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

@@ -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);
+        });
+}

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() {

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>