Run/Pause button #3

templates/spots.html

@@ -10,7 +10,7 @@
 
 <div class="mt-3">
     <div id="settingsButtonRow" class="row">
-        <div class="col-lg-6 me-auto pt-3">
+        <div class="col-lg-6 me-auto pt-3 hideonmobile">
             <p id="timing-container">Loading...</p>
         </div>
         <div class="col-lg-6 text-end">
@@ -22,7 +22,7 @@
                   <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;">
+                <span class="hideonmobile" style="position: relative;">
                     <i id="searchicon" class="fa-solid fa-magnifying-glass"></i>
                     <input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search">
                 </span>

webassets/css/style.css

@@ -345,13 +345,6 @@ div.band-spot:hover span.band-spot-info {
         max-height: 26em;
         overflow: scroll;
     }
-    /* No search on mobile */
-    input#search {
-        display: none;
-    }
-    i#searchicon {
-        display: none;
-    }
 }
 
 @media (min-width: 992px) {

webassets/js/spots.js

@@ -19,8 +19,11 @@ function loadSpots() {
         spots = jsonData;
         // Update table
         updateTable();
-        // Start SSE connection to fetch updates in the background
-        startSSEConnection();
+        // Start SSE connection to fetch updates in the background, if we are in "run" mode
+        let run = $('#runButton:checked').val();
+        if (run) {
+            startSSEConnection();
+        }
     });
 }
 
@@ -70,8 +73,8 @@ function startSSEConnection() {
 
 // 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.");
+    let run = $('#runButton:checked').val();
+    $("#timing-container").html((run ? "Connected to server. Last update at " : "Paused at ") + lastUpdateTime.format('HH:mm') + " UTC.");
 }
 
 // Build a query string for the API, based on the filters that the user has selected.
@@ -474,4 +477,19 @@ $(document).ready(function() {
     loadOptions();
     // Display intro box
     displayIntroBox();
+
+    // Set up run/pause toggles
+    $("#runButton").change(function() {
+        // Need to start the SSE connection but also do a full re-query to catch up anything that we missed, so we
+        // might as well just call loadSpots again which will trigger it all
+        loadSpots();
+        updateTimingDisplayRunPause();
+    });
+    $("#pauseButton").change(function() {
+        // If we are pausing and have an open SSE connection, stop it
+        if (evtSource != null) {
+            evtSource.close();
+        }
+        updateTimingDisplayRunPause();
+    });
 });