make list sortablemain

1 files changed, 67 insertions, 6 deletions

diff --git a/load-status.js b/load-status.js
index 8fb8192..46701e6 100644
--- a/load-status.js
+++ b/load-status.js
@@ -13,14 +13,76 @@ function sub(s, l) {
   return !!l ? s.substr(0,l) : s;
 }
 
-function displayStatus(statusString) {
+let sortKeys = ['CreatedAt'];
+const columns = [
+  {
+    name: 'ID',
+    len: 16,
+  },
+  {
+    name: 'Image',
+    len: 23,
+  },
+  {
+    name: 'Command',
+  },
+  {
+    name: 'Mounts',
+  },
+  {
+    name: 'Status',
+    sort: 'CreatedAt',
+  }
+];
+
+function addSortKey(idx) {
+  let toAdd = columns[idx].sort ?? columns[idx].name;
+  let neg = "";
+  if (sortKeys[0] === toAdd) {
+    neg = "!";
+  }
+  sortKeys = sortKeys.filter((key) => key !== toAdd && key != "!"+toAdd);
+  sortKeys.unshift(neg + toAdd);
+  displayStatus();
+}
+
+let status;
+
+function parseAndDisplayStatus(statusString) {
+  status = JSON.parse(statusString);
+  displayStatus();
+}
+
+function cmp(a, b) {
+  for (sortKey of sortKeys) {
+    let mul;
+    let k;
+    if (sortKey.startsWith("!")) {
+      mul = -1;
+      k = sortKey.substr(1);
+    } else {
+      mul = 1;
+      k = sortKey;
+    }
+    if (a[k] < b[k]) {
+      return -mul;
+    }
+    if (a[k] > b[k]) {
+      return mul;
+    }
+  }
+  if (a<b) return 1;
+  if (a>b) return -1;
+  return 0;
+}
+
+function displayStatus() {
+  status.sort(cmp);
   let statusElement = document.getElementById('status');
-  let status = JSON.parse(statusString);
   let tableContent = "<table>";
-  columns = [{name: 'ID', len: 16}, {name: 'Image', len: 23}, {name: 'Command'}, {name: 'Mounts'}, {name: 'Status'}];
   tableContent += "<tr>" +
     columns
-      .map((column) => "<th>" + column.name + "</th>")
+      .map((column, idx) => "<th><a href=\"#\" onclick=\"addSortKey(" + idx + ")\">" + column.name + "</a></th>")
       .join("") +
     "</th></tr>\n";
   tableContent += status.map((line) =>
@@ -32,6 +94,5 @@ function displayStatus(statusString) {
 }
 
 function getStatus() {
-  httpGetAsync('/status', displayStatus);
+  httpGetAsync('/status', parseAndDisplayStatus);
 }
-