Implemented a long demanded ability to sort files by columns on page.

web/assets/js/main.js

@@ -55,3 +55,74 @@ file_links.forEach(f => f.addEventListener('click', e => {
     if (overlay.firstChild != null)
         e.preventDefault();
 }));
+
+
+const [thead_name, thead_date, thead_size] = document.getElementsByTagName('thead')[0]
+    .getElementsByTagName('tr')[0].getElementsByTagName('th');
+const tbody = document.getElementsByTagName('tbody')[0];
+
+let g_sort_reverse = false;
+
+thead_name.classList.toggle("clickable");
+thead_name.addEventListener('click', e => {
+    e.preventDefault();
+    sortTable((a,b) => {
+        const a_name = a.children[0].textContent.toLowerCase();
+        const b_name = b.children[0].textContent.toLowerCase();
+        return a_name < b_name ? -1 : a_name > b_name ? 1 : 0;
+    }, thead_name, [thead_date, thead_size]);
+});
+
+thead_date.classList.toggle("clickable");
+thead_date.addEventListener('click', e => {
+    e.preventDefault();
+    sortTable((a,b) => {
+        const a_date = new Date(a.children[1].textContent.slice(0, -4));
+        const b_date = new Date(b.children[1].textContent.slice(0, -4));
+        return a_date - b_date;
+    }, thead_date, [thead_name, thead_size]);
+});
+
+const units = {"B": 0, "KiB": 1, "MiB": 2, "GiB": 3, "TiB": 4};
+
+function sizeToBytes(size, unit) {
+    if (units[unit] == 0) return size;
+    for (let i = 0; i < units[unit]; ++i) size *= 1024;
+    return size;
+}
+
+thead_size.classList.toggle("clickable");
+thead_size.addEventListener('click', e => {
+    e.preventDefault();
+    sortTable((a,b) => {
+        if (a.textContent == "DIR")
+            return 1;
+        let [a_size, a_unit] = a.children[2].textContent.split(" ");
+        let [b_size, b_unit] = b.children[2].textContent.split(" ");
+        return sizeToBytes(+a_size, a_unit) - sizeToBytes(+b_size, b_unit);
+    }, thead_size, [thead_name, thead_date]);
+});
+
+function sortTable(compareFn, target, other) {
+    const records = Array.from(document.getElementsByTagName('tbody')[0].children)
+    records.sort(compareFn);
+
+    tbody.textContent = "";
+
+    other.forEach(v => {
+        v.classList.remove("sort-up");
+        v.classList.remove("sort-down");
+    });
+
+    if (g_sort_reverse) {
+        tbody.append(...records.reverse());
+        target.classList.add("sort-down");
+        target.classList.remove("sort-up");
+    } else {
+        tbody.append(...records);
+        target.classList.add("sort-up");
+        target.classList.remove("sort-down");
+    }
+    
+    g_sort_reverse = !g_sort_reverse;
+}