Run/Pause button #3

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();
+    });
 });