From e8884818430107c80d8aca0a7b42584595904baa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Konstantin=20Gru=CC=88ndger?= <kammermark@gmx.de>
Date: Sat, 5 Dec 2020 15:15:44 +0100
Subject: [PATCH] Added table sorting

---
 app/tasks/sql_tasks.py              |  4 +-
 app/templates/base.html             | 12 +++++
 app/templates/receiver_ranking.html | 68 ++++++++++++++++-------------
 app/templates/receivers.html        | 61 ++++++++++++++++----------
 app/templates/sender_ranking.html   | 59 +++++++++++++++----------
 app/templates/senders.html          | 43 +++++++++++-------
 6 files changed, 151 insertions(+), 96 deletions(-)

diff --git a/app/tasks/sql_tasks.py b/app/tasks/sql_tasks.py
index 769a51e..e116c9c 100644
--- a/app/tasks/sql_tasks.py
+++ b/app/tasks/sql_tasks.py
@@ -135,8 +135,8 @@ def update_statistics(date_str=None):
     db.session.execute(f"""
         UPDATE receiver_rankings AS rr
         SET
-            longtime_global_rank_delta = sq.longtime_global_rank_yesterday - rr.longtime_global_rank,
-            longtime_local_rank_delta = sq.longtime_local_rank_yesterday - rr.longtime_local_rank
+            longtime_global_rank_delta = rr.longtime_global_rank - sq.longtime_global_rank_yesterday,
+            longtime_local_rank_delta = rr.longtime_local_rank - sq.longtime_local_rank_yesterday
         FROM (
             SELECT
                 rr.receiver_id,
diff --git a/app/templates/base.html b/app/templates/base.html
index fa67db5..50227d5 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -1,5 +1,11 @@
 {% extends 'bootstrap/base.html' %}
 
+{% block styles %}
+    {{ super() }}
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.default.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.bootstrap_3.min.css">
+{% endblock %}
+
 {% block title %}
     {% if title %}{{ title }}{% else %}No page title{% endif %}
 {% endblock %}
@@ -55,3 +61,9 @@
 {%- endblock footer %}
 </div>
 {% endblock %}
+
+{% block scripts %}
+    {{ super() }}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.widgets.min.js"></script>
+{% endblock %}
diff --git a/app/templates/receiver_ranking.html b/app/templates/receiver_ranking.html
index 4e28b85..94f2c26 100644
--- a/app/templates/receiver_ranking.html
+++ b/app/templates/receiver_ranking.html
@@ -21,45 +21,51 @@
   </form>
 
   <table id="myTable" class="table table-striped table-bordered tablesorter tablesorter-bootstrap">
-    <tr>
-      <th colspan="2">Ranking</th>
-      <th colspan="2">Receiver</th>
-      <th colspan="2">Maximum</th>
-      <th colspan="3">Counter</th>
-    </tr>
-    <tr>
-      <th class="text-right">Total</th>
-      <th class="text-right">Today</th>
-      <th>Name</th>
-      <th>Airport</th>
-      <th class="text-right">Distance [km]</th>
-      <th class="text-right">Normalized signal quality [dB]</th>
-      <th class="text-right">Senders</th>
-      <th class="text-right">Coverages</th>
-      <th class="text-right">Messages</th>
-    </tr>
-
+    <thead>
+      <tr>
+        <th class="text-right">Total</th>
+        <th class="text-right">Today</th>
+        <th>Name</th>
+        <th>Airport</th>
+        <th class="text-right">Distance [km]</th>
+        <th class="text-right">Normalized signal quality [dB]</th>
+        <th class="text-right">Senders</th>
+        <th class="text-right">Coverages</th>
+        <th class="text-right">Messages</th>
+      </tr>
+    </thead>
 
+    <tbody>
     {% for entry in ranking %}
-    {% if sel_country == '' %}
+    {% if sel_country is none or sel_country == '' %}
       {% set rank = entry.global_rank %}{% set longtime_rank = entry.longtime_global_rank %}{% set longtime_rank_delta = entry.longtime_global_rank_delta %}
     {% else %}
       {% set rank = entry.local_rank %}{% set longtime_rank = entry.longtime_local_rank %}{% set longtime_rank_delta = entry.longtime_local_rank_delta %}
     {% endif %}
-	<tr>
-    <td class="text-right">{{ longtime_rank }} ({% if longtime_rank_delta is none or longtime_rank_delta == 0%}±0{% elif longtime_rank_delta > 0 %}<span class="text-success">+{{ longtime_rank_delta }}</span>{% else %}<span class="text-danger">{{ longtime_rank_delta }}</span>{% endif %})</td>
-    <td class="text-right">{{ rank }}</td>
-    <td><img src="{{ url_for('static', filename='img/Transparent.gif') }}" class="flag flag-{{ entry.receiver.country.iso2|lower }}" alt="{{ entry.receiver.country.iso2 }}"/> {{ entry.receiver|to_html_link|safe }}</td>
-    <td>{{ entry.receiver.airport|to_html_link|safe }}</td>
-    <td class="text-right">{{ '%0.1f' | format(entry.max_distance/1000.0) }}</td>
-    <td class="text-right">{{ '%0.1f' | format(entry.max_normalized_quality) }}</td>
-    <td class="text-right">{{ entry.senders_count }}</td>
-    <td class="text-right">{{ entry.coverages_count }}</td>
-    <td class="text-right">{{ entry.messages_count }}</td>
-	</tr>
-	{% endfor %}
+      <tr>
+        <td class="text-right">{{ longtime_rank }} ({% if longtime_rank_delta is none or longtime_rank_delta == 0%}±0{% elif longtime_rank_delta > 0 %}<span class="text-success">+{{ longtime_rank_delta }}</span>{% else %}<span class="text-danger">{{ longtime_rank_delta }}</span>{% endif %})</td>
+        <td class="text-right">{{ rank }}</td>
+        <td><img src="{{ url_for('static', filename='img/Transparent.gif') }}" class="flag flag-{{ entry.receiver.country.iso2|lower }}" alt="{{ entry.receiver.country.iso2 }}"/> {{ entry.receiver|to_html_link|safe }}</td>
+        <td>{{ entry.receiver.airport|to_html_link|safe }}</td>
+        <td class="text-right">{{ '%0.1f' | format(entry.max_distance/1000.0) }}</td>
+        <td class="text-right">{{ '%0.1f' | format(entry.max_normalized_quality) }}</td>
+        <td class="text-right">{{ entry.senders_count }}</td>
+        <td class="text-right">{{ entry.coverages_count }}</td>
+        <td class="text-right">{{ entry.messages_count }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
   </table>
 </div>
 </div>
 
 {% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  <script>
+    $(function() {
+      $("#myTable").tablesorter({sortList: [[0,0]], theme:"bootstrap", headerTemplate:"{content} {icon}", widgets:["uitheme"]});
+    });
+  </script>
+{% endblock %}
diff --git a/app/templates/receivers.html b/app/templates/receivers.html
index 2a3fd8e..3031014 100644
--- a/app/templates/receivers.html
+++ b/app/templates/receivers.html
@@ -20,32 +20,45 @@
 </div>
 </form>
 
-  <table class="datatable table table-striped table-bordered">
-    <tr>
-      <th>#</th>
-      <th>Country</th>
-      <th>Name</th>
-      <th>Airport</th>
-      <th>Altitude</th>
-      <th>Status</th>
-      <th>Version</th>
-      <th>Platform</th>
-    </tr>
+  <table id="myTable" class="datatable table table-striped table-bordered">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Country</th>
+        <th>Name</th>
+        <th>Airport</th>
+        <th>Altitude</th>
+        <th>Status</th>
+        <th>Version</th>
+        <th>Platform</th>
+      </tr>
+    </thead>
 
-    {% for receiver in receivers %}
-	<tr>
-    <td>{{ loop.index }}</td>
-    <td><img src="{{ url_for('static', filename='img/Transparent.gif') }}" class="flag flag-{{ receiver.country.iso2|lower }}" alt="{{ receiver.country.iso2 }}"/></td>
-    <td>{{ receiver|to_html_link|safe }}</td>
-    <td>{{ receiver.airport|to_html_link|safe }}</td>
-    <td>{{ receiver.altitude|int }} m</td>
-    <td>{{ receiver.state.name }}</td>
-	  <td>{{ receiver.version if receiver.version else '-' }}</td>
-	  <td>{{ receiver.platform if receiver.platform else '-' }}</td>
-	</tr>
-	{% endfor %}
+    <tbody>
+      {% for receiver in receivers %}
+      <tr>
+        <td>{{ loop.index }}</td>
+        <td><img src="{{ url_for('static', filename='img/Transparent.gif') }}" class="flag flag-{{ receiver.country.iso2|lower }}" alt="{{ receiver.country.iso2 }}"/></td>
+        <td>{{ receiver|to_html_link|safe }}</td>
+        <td>{{ receiver.airport|to_html_link|safe }}</td>
+        <td>{{ receiver.altitude|int }} m</td>
+        <td>{{ receiver.state.name }}</td>
+        <td>{{ receiver.version if receiver.version else '-' }}</td>
+        <td>{{ receiver.platform if receiver.platform else '-' }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
   </table>
 </div>
 </div>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  <script>
+    $(function() {
+      $("#myTable").tablesorter({sortList: [[0,0]], theme:"bootstrap", headerTemplate:"{content} {icon}", widgets:["uitheme"]});
+    });
+  </script>
+{% endblock %}
diff --git a/app/templates/sender_ranking.html b/app/templates/sender_ranking.html
index 9113478..0612432 100644
--- a/app/templates/sender_ranking.html
+++ b/app/templates/sender_ranking.html
@@ -5,30 +5,34 @@
 <div class="panel panel-success">
 <div class="panel-heading"><h3 class="panel-title">Sender Ranking</h3></div>
 <div class="panel-body">
-  <table class="datatable table table-striped table-bordered">
-    <tr>
-      <th>#</th>
-      <th>Name</th>
-      <th>Aircraft</th>
-      <th class="text-right">Maximum distance [km]</th>
-      <th class="text-right">Maximal normalized signal quality [dB]</th>
-      <th class="text-right">Receiver counter</th>
-      <th class="text-right">Coverage counter</th>
-      <th class="text-right">Message counter</th>
-    </tr>
+  <table id="myTable" class="datatable table table-striped table-bordered">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Name</th>
+        <th>Aircraft</th>
+        <th class="text-right">Maximum distance [km]</th>
+        <th class="text-right">Maximal normalized signal quality [dB]</th>
+        <th class="text-right">Receiver counter</th>
+        <th class="text-right">Coverage counter</th>
+        <th class="text-right">Message counter</th>
+      </tr>
+    </thead>
 
-    {% for entry in ranking %}
-	<tr>
-    <td>{{ loop.index }}</td>
-    <td>{{ entry.sender|to_html_link|safe }}</a></td>
-    <td>{% if entry.sender.infos|length > 0 %}{{ entry.sender.infos[0].aircraft }}{% else %}-{% endif %}</td>
-    <td class="text-right">{{ '%0.1f' | format(entry.max_distance/1000.0) }}</td>
-    <td class="text-right">{{ '%0.1f' | format(entry.max_normalized_quality) }}</td>
-    <td class="text-right">{{ entry.receivers_count }}</td>
-    <td class="text-right">{{ entry.coverages_count }}</td>
-    <td class="text-right">{{ entry.messages_count }}</td>
-	</tr>
-	{% endfor %}
+    <tbody>
+      {% for entry in ranking %}
+      <tr>
+        <td>{{ loop.index }}</td>
+        <td>{{ entry.sender|to_html_link|safe }}</a></td>
+        <td>{% if entry.sender.infos|length > 0 %}{{ entry.sender.infos[0].aircraft }}{% else %}-{% endif %}</td>
+        <td class="text-right">{{ '%0.1f' | format(entry.max_distance/1000.0) }}</td>
+        <td class="text-right">{{ '%0.1f' | format(entry.max_normalized_quality) }}</td>
+        <td class="text-right">{{ entry.receivers_count }}</td>
+        <td class="text-right">{{ entry.coverages_count }}</td>
+        <td class="text-right">{{ entry.messages_count }}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
   </table>
 
 </div>
@@ -36,4 +40,11 @@
 
 {% endblock %}
 
-
+{% block scripts %}
+  {{ super() }}
+  <script>
+    $(function() {
+      $("#myTable").tablesorter({sortList: [[0,0]], theme:"bootstrap", headerTemplate:"{content} {icon}", widgets:["uitheme"]});
+    });
+  </script>
+{% endblock %}
diff --git a/app/templates/senders.html b/app/templates/senders.html
index f2386a0..a7fd6a6 100644
--- a/app/templates/senders.html
+++ b/app/templates/senders.html
@@ -6,24 +6,37 @@
 <div class="panel panel-success">
 <div class="panel-heading"><h3 class="panel-title">Senders</h3></div>
 <div class="panel-body">
-  <table class="datatable table table-striped table-bordered">
-    <tr>
-      <th>#</th>
-      <th>Name</th>
-      <th>Registration</th>
-      <th>Software version</th>
-    </tr>
+  <table id="myTable" class="datatable table table-striped table-bordered">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Name</th>
+        <th>Registration</th>
+        <th>Software version</th>
+      </tr>
+    </thead>
 
-    {% for sender in senders %}
-	<tr>
-    <td>{{ loop.index }}</td>
-	  <td><a href="{{ url_for('main.sender_detail', sender_id=sender.id) }}">{{ sender.name }}</a></td>
-	  <td>{{ sender.infos[0].registration if sender.infos|length > 0 else '-' }}</td>
-	  <td {% if sender.software_version and sender.software_version < 6.6 %}class="danger"{% endif %}>{% if sender.software_version is not none %}{{ sender.software_version }}{% else %} - {% endif %}</td>
-	</tr>
-	{% endfor %}
+    <tbody>
+      {% for sender in senders %}
+      <tr>
+        <td>{{ loop.index }}</td>
+        <td><a href="{{ url_for('main.sender_detail', sender_id=sender.id) }}">{{ sender.name }}</a></td>
+        <td>{{ sender.infos[0].registration if sender.infos|length > 0 else '-' }}</td>
+        <td {% if sender.software_version and sender.software_version < 6.6 %}class="danger"{% endif %}>{% if sender.software_version is not none %}{{ sender.software_version }}{% else %} - {% endif %}</td>
+      </tr>
+      {% endfor %}
+    </tbody>
   </table>
 </div>
 </div>
 
 {% endblock %}
+
+{% block scripts %}
+  {{ super() }}
+  <script>
+    $(function() {
+      $("#myTable").tablesorter({sortList: [[0,0]], theme:"bootstrap", headerTemplate:"{content} {icon}", widgets:["uitheme"]});
+    });
+  </script>
+{% endblock %}