From 29e16b66b77b740d3e55d4a8fe94f28d5402e735 Mon Sep 17 00:00:00 2001
From: Expo on server <expo@expo.survex.com>
Date: Wed, 8 Nov 2023 13:05:57 +0000
Subject: [PATCH] Table sorting.

---
 templates/stations.html | 397 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 396 insertions(+), 1 deletion(-)

diff --git a/templates/stations.html b/templates/stations.html
index b26aa94..36b9b98 100644
--- a/templates/stations.html
+++ b/templates/stations.html
@@ -20,7 +20,9 @@ and the SRTM altitude are in <b>bold</b> if the discrepancy is more than 60m ver
 
 <p>Unless otherwise specified data is expressed in UTM in WGS84 datum. Coordinates are expresed in meters.</p>
 
-<table cellpadding="6" cellspacing="8">
+<p>Click on column headings to sort.</p>
+
+<table cellpadding="6" cellspacing="8" class="table-sort">
 <tr><th>Survex Station</th><th>x [m]</th><th>y [m]</th><th>lat. [deg]</th><th>long. [deg]</th><th>alt [m]</th><th>SRTM<br> alt</th><th>SRTM [m]<br> ref</th><th>Used on <br />this Entrance</th><th>Cave</th></tr>
 {% for s in stations %}
 <tr>
@@ -110,6 +112,399 @@ Coordinate systems in Austria are explained in:<br>
 <a href="/stations">Troggle UTM and lat./lomg. and altitude report</a><br>
 <a href="/entrances">Troggle entrances</a><br>
 
+<!-- 
+This script is added for ease of use.
+You can safely delete it.
 
+Radost Waszkiewicz (2023)
+-->
+<script>
+/* 
+table-sort-js
+Author: Lee Wannacott
+Licence: MIT License Copyright (c) 2021 Lee Wannacott 
+*/
+
+function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
+  function getHTMLTables() {
+    if (testingTableSortJS === true) {
+      const getTagTable = domDocumentWindow.getElementsByTagName("table");
+      return [getTagTable];
+    } else {
+      const getTagTable = document.getElementsByTagName("table");
+      return [getTagTable];
+    }
+  }
+
+  const [getTagTable] = getHTMLTables();
+  const columnIndexAndTableRow = {};
+  const fileSizeColumnTextAndRow = {};
+  for (let table of getTagTable) {
+    if (table.classList.contains("table-sort")) {
+      makeTableSortable(table);
+    }
+  }
+
+  function makeTableSortable(sortableTable) {
+    let createTableHead;
+    let tableBody;
+    if (sortableTable.getElementsByTagName("thead").length === 0) {
+      if (testingTableSortJS === true) {
+        createTableHead = domDocumentWindow.createElement("thead");
+      } else {
+        createTableHead = document.createElement("thead");
+      }
+      createTableHead.appendChild(sortableTable.rows[0]);
+      sortableTable.insertBefore(createTableHead, sortableTable.firstChild);
+      if (sortableTable.querySelectorAll("tbody").length > 1) {
+        tableBody = sortableTable.querySelectorAll("tbody")[1];
+      } else {
+        tableBody = sortableTable.querySelector("tbody");
+      }
+    } else {
+      tableBody = sortableTable.querySelector("tbody");
+    }
+
+    const tableHead = sortableTable.querySelector("thead");
+    const tableHeadHeaders = tableHead.querySelectorAll("th");
+
+    for (let [columnIndex, th] of tableHeadHeaders.entries()) {
+      if (!th.classList.contains("disable-sort")) {
+        th.style.cursor = "pointer";
+        makeEachColumnSortable(th, columnIndex, tableBody, sortableTable);
+      }
+    }
+  }
+
+  function makeEachColumnSortable(th, columnIndex, tableBody, sortableTable) {
+    const desc = th.classList.contains("order-by-desc");
+    let tableArrows = sortableTable.classList.contains("table-arrows");
+    const [arrowUp, arrowDown] = [" ▲", " ▼"];
+    const fillValue = "!X!Y!Z!";
+
+    if (desc && tableArrows) {
+      th.insertAdjacentText("beforeend", arrowDown);
+    } else if (tableArrows) {
+      th.insertAdjacentText("beforeend", arrowUp);
+    }
+
+    function sortDataAttributes(tableRows, columnData) {
+      for (let [i, tr] of tableRows.entries()) {
+        const dataAttributeTd = tr.querySelectorAll("td").item(columnIndex)
+          .dataset.sort;
+        columnData.push(`${dataAttributeTd}#${i}`);
+        columnIndexAndTableRow[columnData[i]] = tr.innerHTML;
+      }
+    }
+
+    function sortFileSize(tableRows, columnData) {
+      const numberWithUnitType =
+        /[.0-9]+(\s?B|\s?KB|\s?KiB|\s?MB|\s?MiB|\s?GB|\s?GiB|T\s?B|\s?TiB)/i;
+      const unitType =
+        /(\s?B|\s?KB|\s?KiB|\s?MB|\s?MiB|\s?GB|G\s?iB|\s?TB|\s?TiB)/i;
+      const fileSizes = {
+        Kibibyte: 1024,
+        Mebibyte: 1.049e6,
+        Gibibyte: 1.074e9,
+        Tebibyte: 1.1e12,
+        Pebibyte: 1.126e15,
+        Kilobyte: 1000,
+        Megabyte: 1e6,
+        Gigabyte: 1e9,
+        Terabyte: 1e12,
+      };
+      function removeUnitTypeConvertToBytes(fileSizeTd, _replace, i) {
+        fileSizeTd = fileSizeTd.replace(unitType, "");
+        fileSizeTd = fileSizeTd.replace(
+          fileSizeTd,
+          fileSizeTd * fileSizes[_replace]
+        );
+        if (i) {
+          columnData.push(`${fileSizeTd}#${i}`);
+        }
+        return fileSizeTd;
+      }
+      for (let [i, tr] of tableRows.entries()) {
+        let fileSizeTd = tr
+          .querySelectorAll("td")
+          .item(columnIndex).textContent;
+        if (fileSizeTd.match(numberWithUnitType)) {
+          if (fileSizeTd.match(/\s?KB/i)) {
+            removeUnitTypeConvertToBytes(fileSizeTd, "Kilobyte", i);
+          } else if (fileSizeTd.match(/\s?KiB/i)) {
+            removeUnitTypeConvertToBytes(fileSizeTd, "Kibibyte", i);
+          } else if (fileSizeTd.match(/\s?MB/i)) {
+            // TODO: figure out why refactoring this line breaks test.
+            fileSizeTd = removeUnitTypeConvertToBytes(fileSizeTd, "Megabyte");
+            columnData.push(`${fileSizeTd}#${i}`);
+          } else if (fileSizeTd.match(/\s?MiB/i)) {
+            removeUnitTypeConvertToBytes(fileSizeTd, "Mebibyte", i);
+          } else if (fileSizeTd.match(/\s?GB/i)) {
+            removeUnitTypeConvertToBytes(fileSizeTd, "Gigabyte", i);
+          } else if (fileSizeTd.match(/\s?GiB/i)) {
+            removeUnitTypeConvertToBytes(fileSizeTd, "Gibibyte", i);
+          } else if (fileSizeTd.match(/\s?TB/i)) {
+            removeUnitTypeConvertToBytes(fileSizeTd, "Terabyte", i);
+          } else if (fileSizeTd.match(/\s?TiB/i)) {
+            removeUnitTypeConvertToBytes(fileSizeTd, "Tebibyte", i);
+          } else if (fileSizeTd.match(/\s?B/i)) {
+            fileSizeTd = fileSizeTd.replace(unitType, "");
+            columnData.push(`${fileSizeTd}#${i}`);
+          }
+        } else {
+          columnData.push(`${fillValue}#${i}`);
+        }
+      }
+    }
+
+    let [timesClickedColumn, columnIndexesClicked] = [0, []];
+
+    function rememberSort(timesClickedColumn, columnIndexesClicked) {
+      // if user clicked different column from first column reset times clicked.
+      columnIndexesClicked.push(columnIndex);
+      if (timesClickedColumn === 1 && columnIndexesClicked.length > 1) {
+        const lastColumnClicked =
+          columnIndexesClicked[columnIndexesClicked.length - 1];
+        const secondLastColumnClicked =
+          columnIndexesClicked[columnIndexesClicked.length - 2];
+        if (lastColumnClicked !== secondLastColumnClicked) {
+          timesClickedColumn = 0;
+          columnIndexesClicked.shift();
+        }
+      }
+    }
+
+    function getColSpanData(sortableTable, colSpanData, colSpanSum) {
+      sortableTable.querySelectorAll("th").forEach((th, index) => {
+        colSpanData[index] = th.colSpan;
+        if (index === 0) colSpanSum[index] = th.colSpan;
+        else colSpanSum[index] = colSpanSum[index - 1] + th.colSpan;
+      });
+    }
+
+    function getTableData(tableProperties) {
+      const {
+        tableRows,
+        columnData,
+        isFileSize,
+        isDataAttribute,
+        colSpanData,
+        colSpanSum,
+      } = tableProperties;
+      for (let [i, tr] of tableRows.entries()) {
+        let tdTextContent = tr
+          .querySelectorAll("td")
+          .item(
+            colSpanData[columnIndex] === 1
+              ? colSpanSum[columnIndex] - 1
+              : colSpanSum[columnIndex] - colSpanData[columnIndex]
+          ).textContent;
+        if (tdTextContent.length === 0) {
+          tdTextContent = "";
+        }
+        if (tdTextContent.trim() !== "") {
+          if (isFileSize) {
+            fileSizeColumnTextAndRow[columnData[i]] = tr.innerHTML;
+          }
+          if (!isFileSize && !isDataAttribute) {
+            columnData.push(`${tdTextContent}#${i}`);
+            columnIndexAndTableRow[`${tdTextContent}#${i}`] = tr.innerHTML;
+          }
+        } else {
+          // Fill in blank table cells dict key with filler value.
+          columnData.push(`${fillValue}#${i}`);
+          columnIndexAndTableRow[`${fillValue}#${i}`] = tr.innerHTML;
+        }
+      }
+
+      const isPunctSort = th.classList.contains("punct-sort");
+      const isAlphaSort = th.classList.contains("alpha-sort");
+      function sortAscending(a, b) {
+        if (a.includes(`${fillValue}#`)) {
+          return 1;
+        } else if (b.includes(`${fillValue}#`)) {
+          return -1;
+        } else {
+          return a.localeCompare(
+            b,
+            navigator.languages[0] || navigator.language,
+            { numeric: !isAlphaSort, ignorePunctuation: !isPunctSort }
+          );
+        }
+      }
+
+      function sortDescending(a, b) {
+        return sortAscending(b, a);
+      }
+
+      function clearArrows(arrowUp = "▲", arrowDown = "▼") {
+        th.innerHTML = th.innerHTML.replace(arrowUp, "");
+        th.innerHTML = th.innerHTML.replace(arrowDown, "");
+      }
+
+      if (columnData[0] === undefined) {
+        return;
+      }
+
+      function changeTableArrow(arrowDirection) {
+        if (tableArrows) {
+          clearArrows(arrowUp, arrowDown);
+          th.insertAdjacentText("beforeend", arrowDirection);
+        }
+      }
+
+      function sortColumn(sortDirection) {
+        columnData.sort(sortDirection, {
+          numeric: !isAlphaSort,
+          ignorePunctuation: !isPunctSort,
+        });
+      }
+
+      if (timesClickedColumn === 1) {
+        if (desc) {
+          changeTableArrow(arrowDown);
+          sortColumn(sortDescending);
+        } else {
+          changeTableArrow(arrowUp);
+          sortColumn(sortAscending);
+        }
+      } else if (timesClickedColumn === 2) {
+        timesClickedColumn = 0;
+        if (desc) {
+          changeTableArrow(arrowUp);
+          sortColumn(sortAscending);
+        } else {
+          changeTableArrow(arrowDown);
+          sortColumn(sortDescending);
+        }
+      }
+    }
+
+    function updateTable(tableProperties) {
+      const { tableRows, columnData, isFileSize } = tableProperties;
+      for (let [i, tr] of tableRows.entries()) {
+        if (isFileSize) {
+          tr.innerHTML = fileSizeColumnTextAndRow[columnData[i]];
+          let fileSizeInBytesHTML = tr
+            .querySelectorAll("td")
+            .item(columnIndex).innerHTML;
+          const fileSizeInBytesText = tr
+            .querySelectorAll("td")
+            .item(columnIndex).textContent;
+          const fileSizes = {
+            Kibibyte: 1024,
+            Mebibyte: 1.049e6,
+            Gibibyte: 1.074e9,
+            Tebibyte: 1.1e12,
+            Pebibyte: 1.126e15,
+          };
+          // Remove the unique identifyer for duplicate values(#number).
+          columnData[i] = columnData[i].replace(/#[0-9]*/, "");
+          const fileSize = columnData[i];
+          if (fileSize < fileSizes.Kibibyte) {
+            fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
+              fileSizeInBytesText,
+              `${parseFloat(fileSize).toFixed(2)} B`
+            );
+          } else if (
+            fileSize >= fileSizes.Kibibyte &&
+            fileSize < fileSizes.Mebibyte
+          ) {
+            fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
+              fileSizeInBytesText,
+              `${(fileSize / fileSizes.Kibibyte).toFixed(2)} KiB`
+            );
+          } else if (
+            fileSize >= fileSizes.Mebibyte &&
+            fileSize < fileSizes.Gibibyte
+          ) {
+            fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
+              fileSizeInBytesText,
+              `${(fileSize / fileSizes.Mebibyte).toFixed(2)} MiB`
+            );
+          } else if (
+            fileSize >= fileSizes.Gibibyte &&
+            fileSize < fileSizes.Tebibyte
+          ) {
+            fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
+              fileSizeInBytesText,
+              `${(fileSize / fileSizes.Gibibyte).toFixed(2)} GiB`
+            );
+          } else if (
+            fileSize >= fileSizes.Tebibyte &&
+            fileSize < fileSizes.Pebibyte
+          ) {
+            fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
+              fileSizeInBytesText,
+              `${(fileSize / fileSizes.Tebibyte).toFixed(2)} TiB`
+            );
+          } else {
+            fileSizeInBytesHTML = fileSizeInBytesHTML.replace(
+              fileSizeInBytesText,
+              "NaN"
+            );
+          }
+          tr.querySelectorAll("td").item(columnIndex).innerHTML =
+            fileSizeInBytesHTML;
+        } else if (!isFileSize) {
+          tr.innerHTML = columnIndexAndTableRow[columnData[i]];
+        }
+      }
+    }
+
+    th.addEventListener("click", function () {
+      const [columnData, colSpanData, colSpanSum] = [[], {}, {}];
+
+      const visibleTableRows = Array.prototype.filter.call(
+        tableBody.querySelectorAll("tr"),
+        (tr) => {
+          return tr.style.display !== "none";
+        }
+      );
+
+      const isDataAttribute = th.classList.contains("data-sort");
+      if (isDataAttribute) {
+        sortDataAttributes(visibleTableRows, columnData);
+      }
+
+      const isFileSize = th.classList.contains("file-size-sort");
+      if (isFileSize) {
+        sortFileSize(visibleTableRows, columnData);
+      }
+
+      const isRememberSort = sortableTable.classList.contains("remember-sort");
+      if (!isRememberSort) {
+        rememberSort(timesClickedColumn, columnIndexesClicked);
+      }
+
+      timesClickedColumn += 1;
+
+      getColSpanData(sortableTable, colSpanData, colSpanSum);
+      const tableProperties = {
+        tableRows: visibleTableRows,
+        columnData,
+        isFileSize,
+        isDataAttribute,
+        colSpanData,
+        colSpanSum,
+      };
+      getTableData(tableProperties);
+      updateTable(tableProperties);
+    });
+  }
+}
+
+if (
+  document.readyState === "complete" ||
+  document.readyState === "interactive"
+) {
+  tableSortJs();
+} else if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", tableSortJs, false);
+}
+if (typeof module == "object") {
+  module.exports = tableSortJs;
+}
+</script>
 
 {% endblock %}