Added sorting feature of file table

3 files changed, 43 insertions, 20 deletions

diff --git a/src/main/kotlin/App.kt b/src/main/kotlin/App.kt
index 6abaa4c..1d027e7 100644
--- a/src/main/kotlin/App.kt
+++ b/src/main/kotlin/App.kt
@@ -146,15 +146,18 @@ fun crawlFiles(ctx: Context) {
                         .drop(usersFileHome.length + (if (ctx.splats()[0].isNotEmpty()) ctx.splats()[0].length + 2 else 1))
                     val filePath = "$usersFileHome${it.toString().drop(usersFileHome.length)}"
                     files.add(
+                        // TODO: Clean up file array responses
                         arrayOf(
                             if (File(filePath).isDirectory) "$fileName/" else fileName,
                             humanReadableBytes(File(filePath).length()), // TODO: Fix file size for directories
                             SimpleDateFormat("MM/dd/yyyy HH:mm:ss").format(File(filePath).lastModified()).toString(),
-                            if (File(filePath).isDirectory) "true" else isHumanReadable(filePath).toString()
+                            if (File(filePath).isDirectory) "true" else isHumanReadable(filePath).toString(),
+                            File(filePath).length().toString(), // unformatted file size
+                            File(filePath).lastModified().toString() // unformatted last modified date
                         )
                     )
                 }
-                //files.sortWith(String.CASE_INSENSITIVE_ORDER)
+                //files.sortWith(String.CASE_INSENSITIVE_ORDER) // TODO: Reimplement file array sorting in backend
                 ctx.render(
                     "files.rocker.html", model(
                         "files", files,
diff --git a/src/main/resources/js/files.js b/src/main/resources/js/files.js
index 55b8c7e..8b8bd87 100644
--- a/src/main/resources/js/files.js
+++ b/src/main/resources/js/files.js
@@ -131,3 +131,31 @@ function setListeners() {
 }
 
 setListeners();
+
+/**
+ * Set up sort features
+ */
+function sortTable(table, col, ascending) {
+    const tb = table.tBodies[0];
+    let tr = Array.prototype.slice.call(tb.rows, 0);
+
+    ascending = -((+ascending) || -1);
+    tr = tr.sort((a, b) => {
+        if (a.cells[col].getAttribute("data-size") !== null)
+            return ascending * (Number(a.cells[col].getAttribute("data-size")) > Number(b.cells[col].getAttribute("data-size")) ? 1 : -1);
+        else if (a.cells[col].getAttribute("data-date") !== null)
+            return ascending * (Number(a.cells[col].getAttribute("data-date")) > Number(b.cells[col].getAttribute("data-date")) ? 1 : -1);
+        else
+            return ascending * (a.cells[col].textContent.trim().localeCompare(b.cells[col].textContent.trim()))
+    });
+
+    for (let i = 0; i < tr.length; ++i) tb.appendChild(tr[i]);
+}
+
+document.querySelectorAll("thead tr > th").forEach((header, index) => {
+    header.addEventListener("click", () => {
+        const ascending = header.getAttribute("data-asc");
+        sortTable(document.querySelector("table"), index, (ascending === "true"));
+        header.setAttribute("data-asc", (ascending === "false").toString())
+    })
+});
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index 02f32af..bb01259 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -17,42 +17,34 @@
     <table id="table">
         <thead>
         <tr>
-            <th>Name</th>
-            <th>Size</th>
-            <th>Last modified</th>
-            <th>Delete</th>
+            <th data-asc="true">Name</th>
+            <th data-asc="true">Size</th>
+            <th data-asc="true">Last modified</th>
+            <th data-asc="true">Delete</th>
         </tr>
-        </thead>
-
-        <tbody>
         <tr data-href="../">
             <td>../</td>
             <td></td>
             <td></td>
             <td></td>
         </tr>
+        </thead>
 
+        <tbody>
         @for (String[] fileArray : files) {
         @if (fileArray[3] == "true") {
         <tr data-href="@fileArray[0]">
-            <td>@fileArray[0]</td>
-            <td>@fileArray[1]</td>
-            <td>@fileArray[2]</td>
-            <td>
-                <button class="delete"><i class="icon ion-md-trash"></i></button>
-            </td>
-        </tr>
-        } else {
+            } else {
         <tr data-path="@fileArray[0]">
+            }
             <td>@fileArray[0]</td>
-            <td>@fileArray[1]</td>
-            <td>@fileArray[2]</td>
+            <td data-size="@fileArray[4]">@fileArray[1]</td>
+            <td data-date="@fileArray[5]">@fileArray[2]</td>
             <td>
                 <button class="delete"><i class="icon ion-md-trash"></i></button>
             </td>
         </tr>
         }
-        }
         </tbody>
     </table>
 </div>