Bootstrap layout. #7

config-example.yml

@@ -47,7 +47,7 @@ providers:
     enabled: false
   -
     class: "DXCluster"
-    name: "HRD Dx Cluster"
+    name: "Cluster"
     enabled: true
     host: "hrd.wa9pie.net"
     port: 8000

views/webpage_home.tpl

@@ -1,6 +1,16 @@
 % rebase('webpage_base.tpl')
 
 <div class="mt-3">
-    <p>Latest spots as of XXXX. Updating in XXX seconds...</p>
+    <div class="row">
+        <div class="col-auto me-auto pt-3">
+            <p id="timing-container">Loading...</p>
+        </div>
+        <div class="col-auto">
+            <p class="d-inline-flex gap-1">
+                <button type="button" class="btn btn-primary" data-bs-toggle="button">Filters</button>
+                <button type="button" class="btn btn-primary" data-bs-toggle="button">Status</button>
+            </p>
+        </div>
+    </div>
     <div id="table-container"></div>
 </div>

webassets/js/code.js

@@ -1,12 +1,36 @@
+// How often to query the server?
+const REFRESH_INTERVAL_SEC = 60;
+
+// Storage for the options that the server gives us. This will define our filters.
+var options = {};
+// Last time we updated the spots list on display.
+var lastUpdateTime;
+
+// Load spots and populate the table.
+function loadSpots() {
     $.getJSON('/api/spots', function(jsonData) {
+        // Store last updated time
+        lastUpdateTime = moment.utc();
+
+        // Populate table with headers
         let headers = Object.keys(jsonData[0]);
         let table = $('<table class="table table-striped table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
-    ["Time", "DX", "Frequency", "Mode", "Comment", "Source", "DE"].forEach(header => table.find('thead tr').append(`<th>${header}</th>`));
+        ["UTC", "DX", "Frequency", "Mode", "Comment", "Source", "DE"].forEach(header => table.find('thead tr').append(`<th>${header}</th>`));
 
         jsonData.forEach(row => {
+          // Create row
           let $tr = $('<tr>');
-      var time = moment(row["time"], moment.ISO_8601);
+
+          // Show in red if QRT
+          if (row["qrt"] == true) {
+            $tr.addClass("table-danger");
+          }
+
+          // Format a UTC time for display
+          var time = moment.utc(row["time"], moment.ISO_8601);
           var time_formatted = time.format("HH:mm")
+
+          // Populate the table data
           $tr.append(`<td>${time_formatted}</td>`);
           $tr.append(`<td>${row["dx_flag"]}&nbsp;${row["dx_call"]}</td>`);
           $tr.append(`<td>${row["freq"]}</td>`);
@@ -17,9 +41,45 @@ $.getJSON('/api/spots', function(jsonData) {
           table.find('tbody').append($tr);
         });
 
+        // Update DOM
         $('#table-container').html(table);
+        updateRefreshDisplay();
     });
+}
 
+// Load server status
+function loadStatus() {
+    $.getJSON('/api/status', function(jsonData) {
+        $('#status-container').html(jsonData); // todo implement
+    });
+}
+
+// Load server options. Once a successful callback is made from this, we then query spots and set up the timer to query
+// spots repeatedly.
+function loadOptions() {
+    $.getJSON('/api/options', function(jsonData) {
+        options = jsonData;
+        console.log(options); //todo remove
+        loadSpots();
+        setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000)
+    });
+}
+
+// Update the refresh timing display
+function updateRefreshDisplay() {
+    if (lastUpdateTime != null) {
+        let count = REFRESH_INTERVAL_SEC;
+        let secSinceUpdate = moment.duration(moment().diff(lastUpdateTime)).asSeconds();
+        updatingString = "Updating..."
+        if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
+            count = REFRESH_INTERVAL_SEC - secSinceUpdate;
+            updatingString = "Updating in " + count.toFixed(0) + " seconds...";
+        }
+        $("#timing-container").text("Last updated at " + lastUpdateTime.format('hh:mm') + " UTC. " + updatingString);
+    }
+}
+
+// Utility function to escape HTML characters from a string.
 function escapeHtml(str) {
   if (typeof str !== 'string') {
     return '';
@@ -41,6 +101,7 @@ function escapeHtml(str) {
 }
 
 
-// Show/hide info block
+// Startup. Call loadOptions(), this will then trigger loading spots and setting up timers.
-function showInfo() { $("#info-container").show(); $("#table-container").hide(); }
+loadOptions();
-function hideInfo() { $("#table-container").show(); $("#info-container").hide(); }
+// Update the refresh timing display every second
+setInterval(updateRefreshDisplay, 1000);