From 3b1d001543e438d9a28a13bf64f674193079ee20 Mon Sep 17 00:00:00 2001
From: Klara Modin <klarasmodin@gmail.com>
Date: Sun, 18 Sep 2022 22:58:20 +0200
Subject: [PATCH] frontend: sortable tables in summary (#61)

Adapted from https://stackoverflow.com/a/57080195.
Additions:
1. sortTable accepts a secondary column and sorting direction. The 'Name'
   column (number 0) is always used for the secondary
2. use classes 'ascSorted' and 'descSorted' to toggle between ascending and
   descending order
3. in the table functions, use .innerHTML instead of .innnerText so the
   link to detailed protocol information does not get lost. Also
   preserve .classList
---
 frontend/assets/static/sortTable.js   | 73 +++++++++++++++++++++++++++
 frontend/assets/templates/page.tpl    |  1 +
 frontend/assets/templates/summary.tpl |  2 +-
 3 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 frontend/assets/static/sortTable.js

diff --git a/frontend/assets/static/sortTable.js b/frontend/assets/static/sortTable.js
new file mode 100644
index 0000000..8f8e62e
--- /dev/null
+++ b/frontend/assets/static/sortTable.js
@@ -0,0 +1,73 @@
+// adapted from https://stackoverflow.com/a/57080195
+
+document.querySelectorAll('table.sortable')
+    .forEach((table)=> {
+        table.querySelectorAll('th')
+            .forEach((element, columnNo) => {
+                element.addEventListener('click', event => {
+                    if(element.classList.contains('ascSorted')) {
+                        dir = -1;
+                        element.classList.remove('ascSorted');
+                        element.classList.add('descSorted');
+                        element.innerText = element.innerText.slice(0,-2) + " ↓";
+                    } else if(element.classList.contains('descSorted')) {
+                        dir = 1;
+                        element.classList.remove('descSorted');
+                        element.classList.add('ascSorted');
+                        element.innerText = element.innerText.slice(0,-2) + " ↑";
+                    } else {
+                        dir = 1;
+                        element.classList.add('ascSorted');
+                        element.innerText += " ↑";
+                    }
+                    sortTable(table, columnNo, 0, dir, 1);
+                });
+            });
+    });
+
+function sortTable(table, priCol, secCol, priDir, secDir) {
+    const tableBody = table.querySelector('tbody');
+    const tableData = table2data(tableBody);
+    tableData.sort((a, b) => {
+        if(a[priCol] === b[priCol]) {
+            if(a[secCol] > b[secCol]) {
+                return secDir;
+            } else {
+                return -secDir;
+            }
+        } else if(a[priCol] > b[priCol]) {
+            return priDir;
+        } else {
+            return -priDir;
+        }
+    });
+    data2table(tableBody, tableData);
+}
+
+function table2data(tableBody) {
+    const tableData = [];
+    tableBody.querySelectorAll('tr')
+        .forEach(row => {
+            const rowData = [];
+            row.querySelectorAll('td')
+                .forEach(cell => {
+                    rowData.push(cell.innerHTML);
+                });
+            rowData.classList = row.classList.toString();
+            tableData.push(rowData);
+        });
+    return tableData;
+}
+
+function data2table(tableBody, tableData) {
+    tableBody.querySelectorAll('tr')
+        .forEach((row, i) => {
+            const rowData = tableData[i];
+            row.classList = rowData.classList;
+            row.querySelectorAll('td')
+                .forEach((cell, j) => {
+                    cell.innerHTML = rowData[j];
+                });
+            tableData.push(rowData);
+        });
+}
diff --git a/frontend/assets/templates/page.tpl b/frontend/assets/templates/page.tpl
index b42a900..d8bd1a0 100644
--- a/frontend/assets/templates/page.tpl
+++ b/frontend/assets/templates/page.tpl
@@ -76,6 +76,7 @@
 
 <script src="/static/jsdelivr/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
 <script src="/static/jsdelivr/npm/bootstrap@4.5.1/dist/js/bootstrap.min.js" integrity="sha256-0IiaoZCI++9oAAvmCb5Y0r93XkuhvJpRalZLffQXLok=" crossorigin="anonymous"></script>
+<script src="/static/sortTable.js"></script>
 
 <script>
 function goto() {
diff --git a/frontend/assets/templates/summary.tpl b/frontend/assets/templates/summary.tpl
index c0c97f9..1aa4214 100644
--- a/frontend/assets/templates/summary.tpl
+++ b/frontend/assets/templates/summary.tpl
@@ -1,6 +1,6 @@
 {{ $ServerName := urlquery .ServerName }}
 
-<table class="table table-striped table-bordered table-sm">
+<table class="table table-striped table-bordered table-sm sortable">
   <thead>
 {{ range .Header }}
     <th scope="col">{{ html . }}</th>