From f3f25166d487b2a7326ae0f1743ae42ec78f143b Mon Sep 17 00:00:00 2001
From: Benjamin Erhart <berhart@netzarchitekten.com>
Date: Fri, 22 Oct 2021 12:21:22 +0200
Subject: [PATCH] Fixed send.js table sorting. Looks like it stopped working a
 long time ago.

---
 .../resources/static/js/send.js               | 24 +++++++++++--------
 .../resources/templates/send.html             | 14 +++++------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/cli/onionshare_cli/resources/static/js/send.js b/cli/onionshare_cli/resources/static/js/send.js
index 43e9892d..22844ab9 100644
--- a/cli/onionshare_cli/resources/static/js/send.js
+++ b/cli/onionshare_cli/resources/static/js/send.js
@@ -11,7 +11,7 @@ function unhumanize(text) {
   }
 }
 function sortTable(n) {
-  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+  var table, rows, switching, i, x, y, valX, valY, shouldSwitch, dir, switchcount = 0;
   table = document.getElementById("file-list");
   switching = true;
   // Set the sorting direction to ascending:
@@ -21,7 +21,7 @@ function sortTable(n) {
   while (switching) {
     // Start by saying: no switching is done:
     switching = false;
-    rows = table.getElementsByTagName("TR");
+    rows = table.getElementsByClassName("row");
     /* Loop through all table rows (except the
       first, which contains table headers): */
     for (i = 1; i < (rows.length - 1); i++) {
@@ -29,18 +29,22 @@ function sortTable(n) {
       shouldSwitch = false;
       /* Get the two elements you want to compare,
         one from current row and one from the next: */
-      x = rows[i].getElementsByTagName("TD")[n];
-      y = rows[i + 1].getElementsByTagName("TD")[n];
+      x = rows[i].getElementsByClassName("cell-data")[n];
+      y = rows[i + 1].getElementsByClassName("cell-data")[n];
+
+      valX = x.classList.contains("size") ? unhumanize(x.innerHTML.toLowerCase()) : x.innerHTML;
+      valY = y.classList.contains("size") ? unhumanize(y.innerHTML.toLowerCase()) : y.innerHTML;
+
       /* Check if the two rows should switch place,
       based on the direction, asc or desc: */
       if (dir == "asc") {
-          if (unhumanize(x.innerHTML.toLowerCase()) > unhumanize(y.innerHTML.toLowerCase())) {
-            // If so, mark as a switch and break the loop:
-            shouldSwitch= true;
-            break;
-          }
+        if (valX > valY) {
+          // If so, mark as a switch and break the loop:
+          shouldSwitch= true;
+          break;
+        }
       } else if (dir == "desc") {
-        if (unhumanize(x.innerHTML.toLowerCase()) < unhumanize(y.innerHTML.toLowerCase())) {
+        if (valX < valY) {
           // If so, mark as a switch and break the loop:
           shouldSwitch= true;
           break;
diff --git a/cli/onionshare_cli/resources/templates/send.html b/cli/onionshare_cli/resources/templates/send.html
index 5fc1ba1f..b1532cec 100644
--- a/cli/onionshare_cli/resources/templates/send.html
+++ b/cli/onionshare_cli/resources/templates/send.html
@@ -32,7 +32,7 @@
   {% endif %}
 
   <div class="file-list" id="file-list">
-    <div class="d-flex">
+    <div class="d-flex row">
       <div id="filename-header" class="heading">Filename</div>
       <div id="size-header" class="heading">Size</div>
     </div>
@@ -41,26 +41,26 @@
       <div>
         <img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_folder.png" />
         <a href="{{ info.link }}">
-          <span>{{ info.basename }}</span>
+          <span class="cell-data">{{ info.basename }}</span>
         </a>
       </div>
-      <div>&mdash;</div>
+      <div class="cell-data">&mdash;</div>
     </div>
     {% endfor %}
 
     {% for info in files %}
-    <div class="d-flex">
+    <div class="d-flex row">
       <div>
         <img width="30" height="30" title="" alt="" src="{{ static_url_path }}/img/web_file.png" />
         {% if download_individual_files %}
         <a href="{{ info.link }}">
-          <span>{{ info.basename }}</span>
+          <span class="cell-data">{{ info.basename }}</span>
         </a>
         {% else %}
-        <span>{{ info.basename }}</span>
+        <span class="cell-data">{{ info.basename }}</span>
         {% endif %}
       </div>
-      <div>{{ info.size_human }}</div>
+      <div class="cell-data size">{{ info.size_human }}</div>
     </div>
     {% endfor %}
   </div>