From e0a497b3f2b85c049026e57820421e0c52bf704d Mon Sep 17 00:00:00 2001
From: 4cuck <40539855+4cuck@users.noreply.github.com>
Date: Fri, 4 Aug 2023 17:04:54 +0200
Subject: [PATCH] allow sorting

---
 server/static/sortable.min.js      |  3 +++
 server/static/sorting.css          | 43 ++++++++++++++++++++++++++++++
 server/templates/instances.html.j2 | 25 ++++++++++++-----
 3 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 server/static/sortable.min.js
 create mode 100644 server/static/sorting.css

diff --git a/server/static/sortable.min.js b/server/static/sortable.min.js
new file mode 100644
index 0000000..fc6e133
--- /dev/null
+++ b/server/static/sortable.min.js
@@ -0,0 +1,3 @@
+document.addEventListener("click",function(c){try{function h(a,b){return a.nodeName===b?a:h(a.parentNode,b)}var y=c.shiftKey||c.altKey,d=h(c.target,"TH"),m=d.parentNode,n=m.parentNode,f=n.parentNode;function p(a,b){a.classList.remove("dir-d");a.classList.remove("dir-u");b&&a.classList.add(b)}function q(a){return y&&a.dataset.sortAlt||a.dataset.sort||a.textContent}if("THEAD"===n.nodeName&&f.classList.contains("sortable")&&!d.classList.contains("no-sort")){var r,e=m.cells,t=parseInt(d.dataset.sortTbr);
+for(c=0;c<e.length;c++)e[c]===d?r=parseInt(d.dataset.sortCol)||c:p(e[c],"");e="dir-d";if(d.classList.contains("dir-d")||f.classList.contains("asc")&&!d.classList.contains("dir-u"))e="dir-u";p(d,e);var u="dir-u"===e,w=function(a,b,g){var v=q((u?a:b).cells[g]);a=q((u?b:a).cells[g]);b=parseFloat(v)-parseFloat(a);return isNaN(b)?v.localeCompare(a):b};for(c=0;c<f.tBodies.length;c++){var k=f.tBodies[c],x=[].slice.call(k.rows,0);x.sort(function(a,b){var g=w(a,b,r);return 0!==g||isNaN(t)?g:w(a,b,t)});var l=
+k.cloneNode();l.append.apply(l,x);f.replaceChild(l,k)}}}catch(h){}});
diff --git a/server/static/sorting.css b/server/static/sorting.css
new file mode 100644
index 0000000..66a15f2
--- /dev/null
+++ b/server/static/sorting.css
@@ -0,0 +1,43 @@
+@charset "UTF-8";
+/* adopted from https://github.com/tofsjonas/sortable */
+.sortable thead th:not(.no-sort) {
+  cursor: pointer;
+}
+.sortable thead th:not(.no-sort)::after, .sortable thead th:not(.no-sort)::before {
+  transition: color 0.1s ease-in-out;
+  font-size: 1.2em;
+  color: transparent;
+}
+.sortable thead th:not(.no-sort)::after {
+  margin-left: 3px;
+  content: "▸";
+}
+.sortable thead th:not(.no-sort):hover::after {
+  color: inherit;
+}
+.sortable thead th:not(.no-sort).dir-d::after {
+  color: inherit;
+  content: "▾";
+}
+.sortable thead th:not(.no-sort).dir-u::after {
+  color: inherit;
+  content: "▴";
+}
+.sortable thead th:not(.no-sort).indicator-left::after {
+  content: "";
+}
+.sortable thead th:not(.no-sort).indicator-left::before {
+  margin-right: 3px;
+  content: "▸";
+}
+.sortable thead th:not(.no-sort).indicator-left:hover::before {
+  color: inherit;
+}
+.sortable thead th:not(.no-sort).indicator-left.dir-d::before {
+  color: inherit;
+  content: "▾";
+}
+.sortable thead th:not(.no-sort).indicator-left.dir-u::before {
+  color: inherit;
+  content: "▴";
+}
diff --git a/server/templates/instances.html.j2 b/server/templates/instances.html.j2
index 7cb29da..675e5ca 100644
--- a/server/templates/instances.html.j2
+++ b/server/templates/instances.html.j2
@@ -14,7 +14,7 @@
     <p><a href="/about">About</a></p>
     <p>Last Updated {{last_updated}} <a href="https://time.is/UTC">UTC</a>.</p>
     <div class="table-responsive">
-      <table class="table">
+      <table class="table sortable">
       <thead>
           <tr>
           <th scope="col">Instance</th>
@@ -84,7 +84,18 @@
           </td>
           <td>{{host.ping_avg}}</td>
           <td>{% if host.rss -%} ✅ {%- else -%} ❌ {%- endif -%}</td>
-          <td>
+          {%- if host.healthy and not host.version -%}
+            {%- set version = "Dmissing" -%}
+          {%- elif host.version and not host.is_upstream -%}
+            {%- set version = "Aforeign" -%}
+          {%- elif host.is_latest_version -%}
+            {%- set version = "Blatest" -%}
+          {%- elif host.version and not host.is_latest_version -%}
+            {%- set version = "Coutdated" -%}
+          {%- else -%}
+            {%- set version = "Eunknown" -%}
+          {%- endif -%}
+          <td data-sort="{{version}}{{host.version | default(value='')}}">
           {%- if host.version_url -%}
             <a href="{{host.version_url}}">
             {{host.version | default(value="missing version")}}
@@ -92,13 +103,13 @@
           {%- else -%}
             <a href="{{host.url ~ '/about'}}">missing version</a>
           {%- endif -%}
-            {%- if host.healthy and not host.version -%}
+            {%- if version == "Dmissing" -%}
                 <span class="ms-1 badge bg-warning">missing</span>
-              {%- elif host.version and not host.is_upstream -%}
+              {%- elif version == "Aforeign" -%}
                 <span class="ms-1 badge bg-secondary">foreign repo</span>
-              {%- elif host.is_latest_version -%}
+              {%- elif version == "Blatest" -%}
                 <span class="ms-1 badge bg-success">latest</span>
-              {%- elif host.version and not host.is_latest_version -%}
+              {%- elif version == "Coutdated" -%}
                 <span class="ms-1 badge bg-info">outdated</span>
               {%- endif -%}
           </td>
@@ -110,5 +121,7 @@
     </div>
   </div>
       <script src="/static/bootstrap.min.js"></script>
+      <link href="/static/sorting.css" rel="stylesheet" />
+      <script src="/static/sortable.min.js"></script>
   </body>
 </html>
\ No newline at end of file