From f72f344860f0767043704eddd91c313a5b3a66e2 Mon Sep 17 00:00:00 2001
From: Fabian Dill <fabian.dill@web.de>
Date: Wed, 24 Jun 2020 09:44:56 +0200
Subject: [PATCH] make tracker table sortable, give it a fixedHeader and
 prepare it for ajax refresh

---
 WebHost/static/static.css      | 12 ++++++++++++
 WebHost/templates/tracker.html | 16 ++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 WebHost/static/static.css

diff --git a/WebHost/static/static.css b/WebHost/static/static.css
new file mode 100644
index 00000000..1be0b582
--- /dev/null
+++ b/WebHost/static/static.css
@@ -0,0 +1,12 @@
+table.dataTable.table-sm > thead > tr > th :not(.sorting_disabled) {
+    padding-right: 0;
+}
+
+.dataTable > thead > tr > th[class*="sort"]:before,
+.dataTable > thead > tr > th[class*="sort"]:after {
+    content: "" !important;
+}
+
+table.dataTable.table-sm > thead > tr > th {
+    padding: 1px !important;
+}
\ No newline at end of file
diff --git a/WebHost/templates/tracker.html b/WebHost/templates/tracker.html
index 1f1b155b..37731ee7 100644
--- a/WebHost/templates/tracker.html
+++ b/WebHost/templates/tracker.html
@@ -2,6 +2,22 @@
 {% block head %}
     <meta http-equiv="refresh" content="60">
     <title>Multiworld Tracker for Room {{ room.id }}</title>
+    <link rel="stylesheet" type="text/css"
+          href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.21/fh-3.1.7/datatables.min.css"/>
+    <script type="text/javascript"
+            src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.21/fh-3.1.7/datatables.min.js"></script>
+    <script>
+        $(document).ready(function () {
+            $(".table").DataTable({
+                "paging": false,
+                "ordering": true,
+                "info": false,
+                "fixedHeader": true,
+                "dom": "t"
+            });
+        })
+    </script>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="static.css") }}"/>
 {% endblock %}
 {% block body %}
     {% for team, players in inventory.items() %}