Starting to implement Run/Pause switch #3

templates/spots.html

@@ -10,13 +10,20 @@
 
 <div class="mt-3">
     <div id="settingsButtonRow" class="row">
-        <div class="col-auto me-auto pt-3">
+        <div class="col-lg-6 me-auto pt-3">
             <p id="timing-container">Loading...</p>
         </div>
-        <div class="col-auto">
+        <div class="col-lg-6 text-end">
             <p class="d-inline-flex gap-1">
+                <span class="btn-group" role="group">
+                  <input type="radio" class="btn-check" name="runPause" id="runButton" autocomplete="off" checked>
+                  <label class="btn btn-outline-primary" for="runButton"><i class="fa-solid fa-play"></i> Run</label>
+
+                  <input type="radio" class="btn-check" name="runPause" id="pauseButton" autocomplete="off">
+                  <label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i> Pause</label>
+                </span>
                 <span style="position: relative;">
-                    <i class="fa-solid fa-magnifying-glass" style="position: absolute; left: 0px; top: 2px; padding: 10px; pointer-events: none;"></i>
+                    <i id="searchicon" class="fa-solid fa-magnifying-glass"></i>
                     <input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search">
                 </span>
                 <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</button>

webassets/css/style.css

@@ -82,10 +82,19 @@ div.container {
 
 input#search {
     max-width: 12em;
+    margin-left: 1rem;
     margin-right: 1rem;
     padding-left: 2em;
 }
 
+i#searchicon {
+    position: absolute;
+    left: 1rem;
+    top: 2px;
+    padding: 10px;
+    pointer-events: none;
+}
+
 div.appearing-panel {
     display: none;
 }
@@ -336,10 +345,12 @@ div.band-spot:hover span.band-spot-info {
         max-height: 26em;
         overflow: scroll;
     }
-    /* Filter/search DX Call field should be smaller on mobile */
+    /* No search on mobile */
     input#search {
-        max-width: 9em;
+        display: none;
-        margin-right: 0;
+    }
+    i#searchicon {
+        display: none;
     }
 }
 

webassets/js/common.js

@@ -117,7 +117,6 @@ function toggleFilterButtons(filterQuery, state) {
 function updateRefreshDisplay() {
     if (lastUpdateTime != null) {
         let secSinceUpdate = moment.duration(moment().diff(lastUpdateTime)).asSeconds();
-        if (typeof REFRESH_INTERVAL_SEC !== 'undefined' && REFRESH_INTERVAL_SEC != null) {
         let count = REFRESH_INTERVAL_SEC;
         let updatingString = "Updating..."
         if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
@@ -131,9 +130,6 @@ function updateRefreshDisplay() {
             }
         }
         $("#timing-container").html("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);
-        } else {
-            $("#timing-container").html("Connected to live spot server. Last spot received at " + lastUpdateTime.format('HH:mm') + " UTC.");
-        }
     }
 }
 

webassets/js/spots.js

@@ -14,7 +14,7 @@ function loadSpots() {
     $.getJSON('/api/v1/spots' + buildQueryString(), function(jsonData) {
         // Store last updated time
         lastUpdateTime = moment.utc();
-        updateRefreshDisplay();
+        updateTimingDisplayRunPause();
         // Store data
         spots = jsonData;
         // Update table
@@ -32,7 +32,7 @@ function startSSEConnection() {
     evtSource.onmessage = function(event) {
         // Store last updated time
         lastUpdateTime = moment.utc();
-        updateRefreshDisplay();
+        updateTimingDisplayRunPause();
         // Get the new spot
         newSpot = JSON.parse(event.data);
         // Awful fudge to ensure new incoming spots at the top of the list don't have timestamps that make them look
@@ -64,10 +64,16 @@ function startSSEConnection() {
 
     evtSource.onerror = function(err) {
         evtSource.close();
-        setTimeout(restartSSEConnection, 1000);
+        setTimeout(startSSEConnection, 1000);
     };
 }
 
+// Update the special timing display for the live spots page, which varies depending on run/pause selection.
+function updateTimingDisplayRunPause() {
+    // todo run/pause
+    $("#timing-container").html("Last spot received at " + lastUpdateTime.format('HH:mm') + " UTC.");
+}
+
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString() {
     var str =  "?";