add sorting

web/index.html

@@ -21,12 +21,12 @@
 
     <table id="table">
         <tr>
-            <th>Nummer</th>
+            <th onclick="sort(this, 'number')">Nummer</th>
-            <th>Port</th>
+            <th onclick="sort(this, 'port')">Port</th>
-            <th>Zustand</th>
+            <th onclick="sort(this, 'status')">Zustand</th>
-            <th>Name</th>
+            <th onclick="sort(this, 'name')">Name</th>
-            <th>Meldung</th>
+            <th onclick="sort(this, 'rejector')">Meldung</th>
-            <th>Letzte Änderung</th>
+            <th onclick="sort(this, 'last_change')">Letzte Änderung</th>
         </tr>
     </table>
 </body>

web/main.css

@@ -19,7 +19,9 @@ body {
     margin-right: 10%;
 }
 
-
+th {
+    cursor: pointer;
+}
 
 td,
 th {
@@ -31,6 +33,23 @@ table {
     border-spacing: 0;
 }
 
+th::after {
+    font-family: monospace;
+    padding-left: 3px;
+}
+
+th:not(.sort)::after {
+    content: "\a0";
+}
+
+.sort-up::after {
+    content: "\25b2";
+}
+
+.sort-down::after {
+    content: "\25bc";
+}
+
 .number {
     text-align: right;
 }

web/main.js

@@ -13,6 +13,50 @@ window.onload = () => {
     let evtSource;
     let table = [];
 
+    let direction = -1;
+    let oldkey = "last_change";
+
+    table_elem.firstChild.firstChild.lastChild.className = "sort sort-down";
+
+    console.log(oldkey, direction);
+
+
+    sort = (element, key) => {
+
+        console.log(key, oldkey, direction);
+
+        if (key == oldkey) {
+            direction *= -1;
+        } else {
+            oldkey = key;
+            direction = -1;
+        }
+
+        for (let child of table_elem.firstChild.firstChild.children) {
+            console.log(child);
+            child.className = ""
+        };
+
+        element.className = `sort ${direction > 0 ? "sort-up" : "sort-down"}`;
+
+        do_sort(oldkey, direction);
+    };
+
+    let do_sort = (key, direction) => {
+
+        let is_number = !!~(["port", "number", "last_change"].indexOf(key));
+
+        console.log("is number:", is_number);
+
+        table = table.sort((a, b) => (direction * (
+            is_number ? a[key] - b[key] : ('' +a[key]).localeCompare(b[key], "de-DE")
+        )));
+
+        print_table();
+        console.log(table);
+    };
+
+
     let format_date = date => date.toLocaleDateString("de-DE") + ' ' + date.toLocaleTimeString("de-DE");
 
     let print_table = () => {
@@ -85,11 +129,14 @@ window.onload = () => {
         }
 
         for (let [timestamp, port] of data.errored_ports) {
-            table.push({port, number: '', status: "Fehler", last_change: new Date(timestamp * 1000), rejector: '', name: ''})
+            table.push({port, number: null, status: "Fehler", last_change: new Date(timestamp * 1000), rejector: null, name: null})
         }
 
         console.log(table);
 
+
+        do_sort(oldkey, direction);
+
         print_table();
     };