Adding Sort Button

Signed-off-by: Lucas Bergholz <[email protected]>

Author: LucasBergholz

site/static/img/up-down-arrows-icon.png

@@ -1,3 +1,6 @@
+/* eslint-disable max-len */
+/* eslint-disable no-trailing-spaces */
+/* eslint-disable indent */
 // JS Goes here - ES6 supported
 
 import "./css/main.css";
@@ -53,6 +56,9 @@ document.addEventListener("DOMContentLoaded", function() {
 
     // Add input for filtering
     function addInput(el, label, idx) {
+      const container = document.createElement('div');
+      container.setAttribute('style', 'display: flex; align-items: center;');
+
       const input = document.createElement('input');
       input.addEventListener("change", function(e) {
         widget.filters[idx] = e.target.value;
@@ -65,7 +71,11 @@ document.addEventListener("DOMContentLoaded", function() {
       input.setAttribute('type', 'text');
       input.setAttribute('name', 'filter_'  + label);
       input.setAttribute('list', 'opts_for_'  + label);
-      el.appendChild(input);
+
+      container.appendChild(input);
+      addSortButton(container, idx);  
+
+      el.appendChild(container);
     }
     const tbody = el.querySelector('tbody');
     const headings = Array.from(el.querySelectorAll('thead th')).map((el, idx) => {
@@ -95,6 +105,47 @@ document.addEventListener("DOMContentLoaded", function() {
       };
     });
 
+    function addSortButton(el, idx) {
+      const img = document.createElement('img');
+      img.src = "/img/up-down-arrows-icon.png"
+      img.addEventListener("click", function() {
+        sortTable(idx);
+      });
+      img.setAttribute('style', 'width: 16px; margin-left: 5px' )
+    
+      el.appendChild(img)
+    }
+
+    let direction = false;
+    function sortTable(columnIndex) {
+      removeAllChildNodes(tbody);
+      if (isNaN(rows[0].columns[columnIndex][0]) && isNaN(rows[rows.length - 1].columns[columnIndex][0])) {
+        rows.sort((a, b) => {
+          a = a.columns[columnIndex];
+          b = b.columns[columnIndex];
+          return direction ? a.localeCompare(b) : b.localeCompare(a);
+        });
+      } else {
+        if (!columnIndex && window.location.href.includes("docs/alerts")) {
+          rows.sort((a, b) => {
+            a = a.columns[columnIndex].split("-");
+            b = b.columns[columnIndex].split("-");
+            return direction ? a[0] - b[0] : b[0] - a[0];
+          });
+        } else {
+          rows.sort((a, b) => {
+            a = a.columns[columnIndex];
+            b = b.columns[columnIndex];
+            return direction ? a - b : b - a;
+          });
+        }
+      }
+      for (let i = 0; i <= rows.length - 1; i++) {
+        tbody.appendChild(rows[i].el);
+      }
+      direction = !direction;
+    }
+
     // Go through options elements and populate lists with column aggregates
     // gathered in previous loop
     Object.entries(widget.options).map(pair => {