Use datatables for stats page and other tweaks

Implement datatables for ground stations and satellites stat pages.

Fix ground stations icon

Improve datatables footer spacings all around

Tweak spacing around gravatar

Fixes #380

Signed-off-by: Corey Shields <cshields@gmail.com>

db/static/css/newapp.css

@@ -241,10 +241,15 @@
     font-weight: bold;
 }
 
-a {
+a,
+.user > a:hover {
     color: var(--satnogs-color-primary);
 }
 
+.user > a {
+    color: rgba(0, 0, 0, 0.5);
+}
+
 .page-item.active .page-link {
     z-index: 3;
     color: #fff;

db/static/js/satellites.js

@@ -6,7 +6,7 @@ $(document).ready(function() {
         // https://datatables.net/reference/option/dom
         dom: '<"row"<"d-none d-md-block col-md-6"B><"col-sm-12 col-md-6"f>>' +
         '<"row"<"col-sm-12"tr>>' +
-        '<"row"<"col-sm-12 col-xl-3"i><"col-sm-12 col-md-6 col-xl-3"l><"col-sm-12 col-md-6 col-xl-6"p>>',
+        '<"row"<"col-sm-12 col-xl-3 align-self-center"i><"col-sm-12 col-md-6 col-xl-3 align-self-center"l><"col-sm-12 col-md-6 col-xl-6"p>>',
         buttons: [
             'colvis'
         ],

db/static/js/stats.js

@@ -1,6 +1,53 @@
 /* global Chart */
-
+/* eslint new-cap: "off" */
 $(document).ready(function() {
+    $('#sats').DataTable( {
+        // the dom field controls the layout and visibility of datatable items
+        // and is not intuitive at all. Without layout we have dom: 'ftrilp' 
+        // https://datatables.net/reference/option/dom
+        dom: '<"row"<"d-none d-md-block col-md-6"><"col-sm-12 col-md-6"f>>' +
+        '<"row"<"col-sm-12"tr>>' +
+        '<"row"<"col-sm-12 col-xl-3 align-self-center"i><"col-sm-12 col-md-6 col-xl-3 align-self-center"l><"col-sm-12 col-md-6 col-xl-6"p>>',
+        responsive: {
+            details: {
+                display: $.fn.dataTable.Responsive.display.childRow,
+                type: 'column'
+            }
+        },
+        columnDefs: [ 
+            {
+                className: 'control',
+                orderable: false,
+                targets:   0
+            },
+        ],
+        order: [ 3, 'desc' ],
+        pageLength: 25
+    } );
+
+    $('#stations').DataTable( {
+        // the dom field controls the layout and visibility of datatable items
+        // and is not intuitive at all. Without layout we have dom: 'ftrilp' 
+        // https://datatables.net/reference/option/dom
+        dom: '<"row"<"d-none d-md-block col-md-6"><"col-sm-12 col-md-6"f>>' +
+        '<"row"<"col-sm-12"tr>>' +
+        '<"row"<"col-sm-12 col-xl-3 align-self-center"i><"col-sm-12 col-md-6 col-xl-3 align-self-center"l><"col-sm-12 col-md-6 col-xl-6"p>>',
+        responsive: {
+            details: {
+                display: $.fn.dataTable.Responsive.display.childRow,
+                type: 'column'
+            }
+        },
+        columnDefs: [ 
+            {
+                className: 'control',
+                orderable: false,
+                targets:   0
+            },
+        ],
+        order: [ 2, 'desc' ],
+        pageLength: 25
+    } );
 
     Chart.pluginService.register({
         afterUpdate: function (chart) {

db/static/js/transmitters.js

@@ -38,7 +38,7 @@ $(document).ready(function() {
         // https://datatables.net/reference/option/dom
         dom: '<"row"<"d-none d-md-block col-md-6"B><"col-sm-12 col-md-6"f>>' +
         '<"row"<"col-sm-12"tr>>' +
-        '<"row"<"col-sm-12 col-xl-3"i><"col-sm-12 col-md-6 col-xl-3"l><"col-sm-12 col-md-6 col-xl-6"p>>',
+        '<"row"<"col-sm-12 col-xl-3 align-self-center"i><"col-sm-12 col-md-6 col-xl-3 align-self-center"l><"col-sm-12 col-md-6 col-xl-6"p>>',
         buttons: [
             'colvis'
         ],

db/templates/avatar/avatar_tag.html

@@ -1,2 +1 @@
-<!-- <img src="{{ url }}" width="{{ size }}" height="{{ size }}" class="img-avatar"> -->
-<img src="{{ url }}" class="user-image" alt="User Image">
+<img src="{{ url }}" class="user-image m-1" alt="User Image"><i class="nav-icon fas fa-sm fa-caret-down"></i>

db/templates/base.html

@@ -27,7 +27,7 @@
   <div class="wrapper bg-light">
 
     <!-- Top Navbar menu -->
-    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
+    <nav class="main-header navbar navbar-expand navbar-white navbar-light py-1">
       <ul class="navbar-nav d-lg-none">
         <a class="nav-link keychainify-checked" data-widget="pushmenu" href="#" role="button"><i
             class="fas fa-bars"></i></a>
@@ -43,7 +43,7 @@
       {% endblock %}
 
       {% if request.user.is_authenticated %}
-        <ul class="nav navbar-nav py-2">
+        <ul class="nav navbar-nav ml-1">
           <li class="user user-menu">
             <a href="#" id="control-sidebar-toggle" data-widget="control-sidebar">
               {% avatar request.user %}

db/templates/base/stats.html

@@ -5,6 +5,11 @@
 
 {% block title %} - Stats{% endblock %}
 
+{% block css %}
+<link rel="stylesheet" href="{% static 'lib/datatables.net-bs4/css/dataTables.bootstrap4.min.css' %}">
+<link rel="stylesheet" href="{% static 'lib/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css' %}">
+{% endblock %}
+
 {% block top-menu-left %}
 <h5 class="mb-0 mr-3">Statistics</h5>
 {% endblock %}
@@ -28,7 +33,7 @@
   <li class="nav-item">
     <a class="nav-link" id="user-leaderboard-tab" data-toggle="tab" href="#user-leaderboard" role="tab"
       aria-controls="user-leaderboard" aria-selected="false">
-      <i class="nav-icon fas fa-house-user"></i>
+      <i class="nav-icon fas fa-broadcast-tower"></i>
       <p class="d-none d-lg-inline-block">Ground Stations</p>
     </a>
   </li>
@@ -38,10 +43,10 @@
 {% block content %}
 <!-- SatNOGS DB Stats -->
 <!-- The following div is managed by the tab menus -->
-<div class="col-12 tab-content pt-3 mx-2" id="myTabContent">
+<div class="col-12 tab-content pt-3" id="myTabContent">
 
   <!-- Dashboard panel -->
-  <div class="tab-pane fade show active mx-1" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
+  <div class="tab-pane fade show active" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
     <div class="container-fluid">
       <div class="row">
         <div class="col-xs-12 col-md-4">
@@ -120,11 +125,9 @@
 
   {% if satellites and observers %}
   <!-- Data paylod stats -->
-  <div class="tab-pane fade px-2" id="sat-leaderboard" role="tabpanel"
+  <div class="tab-pane fade" id="sat-leaderboard" role="tabpanel"
     aria-labelledby="sat-leaderboard-tab">
-    <div class="row justify-content-center">
-      <h4>Satellites</h4>
-      <table class="table table-hover table-striped">
+      <table id="sats" class="table table-sm display w-100 px-2 responsive table-striped">
         <thead>
           <tr>
             <th>Norad ID</th>
@@ -146,17 +149,13 @@
           {% endfor %}
         </tbody>
       </table>
-    </div>
   </div>
-  <div class="tab-pane fade px-2" id="user-leaderboard" role="tabpanel"
+  <div class="tab-pane fade" id="user-leaderboard" role="tabpanel"
     aria-labelledby="user-leaderboard-tab">
-    <div class="row justify-content-center">
-      <h4>Stations</h4>
 
-      <table class="table table-hover table-striped">
+      <table id="stations" class="table table-sm display w-100 px-2 responsive table-striped">
         <thead>
           <tr>
-            <th>#</th>
             <th>Name</th>
             <th>Data</th>
             <th>Latest</th>
@@ -165,7 +164,6 @@
         <tbody>
           {% for obs in observers %}
           <tr>
-            <td>{{forloop.counter}}</td>
             <td>{{obs.observer}}</td>
             <td>{{obs.count}}</td>
             <td>{{obs.latest_payload|date:"Y-m-d H:i:s"}}</td>
@@ -173,13 +171,17 @@
           {% endfor %}
         </tbody>
       </table>
-    </div>
   </div>
   {% endif %}
 </div>
 {% endblock %}
 
 {% block javascript %}
+<script src="{% static 'lib/datatables.net/js/jquery.dataTables.min.js' %}"></script>
+<script src="{% static 'lib/datatables.net-buttons/js/dataTables.buttons.min.js' %}"></script>
+<script src="{% static 'lib/datatables.net-responsive/js/dataTables.responsive.min.js' %}"></script>
+<script src="{% static 'lib/datatables.net-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
+<script src="{% static 'lib/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js' %}"></script>
 <script src="{% static 'lib/chart.js/dist/Chart.min.js' %}"></script>
 <script src="{% static 'js/stats.js' %}"></script>
 {% endblock %}