added sortable tables

src/Handler/Home.hs

@@ -45,8 +45,10 @@ getHomeR = do
   defaultLayout $ do
     addStylesheet $ StaticR css_stickybar_css
     addStylesheet $ StaticR css_show_hide_css
+    addStylesheet $ StaticR css_sortable_css
     addScript $ StaticR js_stickybar_js
     addScript $ StaticR js_show_hide_js
+    addScript $ StaticR js_sortable_js
     setTitle "Willkommen zum ReWorX Test!"
     $(widgetFile "home")
 

static/css/sortable.css

@@ -0,0 +1,30 @@
+table.js-sortable th {
+  cursor: pointer;
+  position: relative;
+  padding-right: 20px;
+}
+
+table.js-sortable th.sorted-asc,
+table.js-sortable th.sorted-desc {
+  color: rebeccapurple;
+}
+
+table.js-sortable th.sorted-asc::after,
+table.js-sortable th.sorted-desc::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  width: 0;
+  height: 0;
+  top: 7px;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+}
+
+table.js-sortable th.sorted-asc::after {
+  border-top: 8px solid rebeccapurple;
+}
+
+table.js-sortable th.sorted-desc::after {
+  border-bottom: 8px solid rebeccapurple;
+}

static/js/sortable.js

@@ -0,0 +1,89 @@
+/**
+ * delcare a table as sortable by adding class 'js-sortable'
+ */
+document.addEventListener('DOMContentLoaded', function() {
+
+    var tables = [];
+    var ASC = 1;
+    var DESC = -1;
+
+    function initTable(table, tableIndex) {
+      console.log('initTable for ', table);
+        var trs = table.querySelectorAll('tr');
+        var ths = table.querySelectorAll('th');
+        var trContents = [];
+
+        Array.from(trs).forEach(function(tr, rowIndex) {
+            if (rowIndex === 0) {
+                // register table headers as sort-listener
+                Array.from(tr.querySelectorAll('th')).forEach(function(th, thIndex) {
+                    th.addEventListener('click', function(el) {
+                        sortTableBy(tableIndex, thIndex);
+                    });
+                });
+            } else {
+                // register table rows
+                trContents.push(Array.from(tr.querySelectorAll('td')).map(function(td) {
+                    return td.innerHTML;
+                }));
+            }
+        });
+
+        tables.push({
+            el: table,
+            ths: ths,
+            sortBy: 0,
+            sortDir: ASC,
+            trContents,
+        });
+    }
+
+    function updateThs(tableIndex, thIndex, sortOrder) {
+        Array.from(tables[tableIndex].ths).forEach(function (th) {
+            th.classList.remove('sorted-asc', 'sorted-desc');
+        });
+        var suffix = sortOrder > 0 ? 'asc' : 'desc';
+        tables[tableIndex].ths[thIndex].classList.add('sorted-' + suffix);
+    }
+
+    function sortTableBy(tableIndex, thIndex) {
+        var table = tables[tableIndex];
+        var sortKey = thIndex;
+        var sortOrder = ASC;
+        if (table.sortBy === sortKey) {
+            sortOrder = table.sortDir === ASC ? DESC : ASC;
+        }
+
+        table.trContents.sort(dynamicSort(sortKey, sortOrder));
+        tables[tableIndex].sortBy = thIndex;
+        tables[tableIndex].sortDir = sortOrder;
+        updateThs(tableIndex, thIndex, sortOrder);
+
+        Array.from(table.el.querySelectorAll('tr')).forEach(function(tr, trIndex) {
+            if (trIndex > 0) {
+                Array.from(tr.querySelectorAll('td')).forEach(function (td, tdIndex) {
+                    td.innerHTML = table.trContents[trIndex - 1][tdIndex];
+                });
+            }
+        });
+    }
+
+    function dynamicSort(key, order) {
+        return function (a,b) {
+            var aVal = parseInt(a[key]);
+            var bVal = parseInt(b[key]);
+            if ((isNaN(aVal) && !isNaN(bVal)) || (!isNaN(aVal) && isNaN(bVal))) {
+              console.error('trying to sort table by row with mixed content: "%s", "%s"', a[key], b[key]);
+            }
+            aVal = isNaN(aVal) ? a[key] : aVal;
+            bVal = isNaN(bVal) ? b[key] : bVal;
+            var result = (aVal < bVal) ? -1 : (aVal > bVal) ? 1 : 0;
+            return result * order;
+        }
+    }
+
+    var rawTables = document.querySelectorAll('.js-sortable');
+    Array.from(rawTables).forEach(function(table, i) {
+        initTable(table, i);
+    });
+});

templates/home.hamlet

@@ -39,6 +39,37 @@
     <li .list-group-item>
       <a href=@{SubmissionListR}>Dateien hochladen und abrufen
 
+
+<div>
+  <table .js-sortable>
+    <thead>
+      <tr>
+        <th>ID
+        <th>TH1
+        <th>TH2
+        <th>TH3
+    <tbody>
+      <tr>
+        <td>0
+        <td>14
+        <td>CON2
+        <td>3
+      <tr>
+        <td>1
+        <td>5
+        <td>ONT2
+        <td>13
+      <tr>
+        <td>2
+        <td>CONT1
+        <td>NT2
+        <td>43
+      <tr>
+        <td>3
+        <td>43
+        <td>T2C2
+        <td>35
+
 <div>
   <h2>Funktionen zum Testen