From 61fc0b9d0ff91fc2759ddb613a1f1052e0b23268 Mon Sep 17 00:00:00 2001
From: Ian Renton <ian@ianrenton.com>
Date: Tue, 23 Dec 2025 22:52:21 +0000
Subject: [PATCH] Starting to implement Run/Pause switch #3

---
 templates/spots.html    | 13 ++++++++++---
 webassets/css/style.css | 17 ++++++++++++++---
 webassets/js/common.js  | 26 +++++++++++---------------
 webassets/js/spots.js   | 12 +++++++++---
 4 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/templates/spots.html b/templates/spots.html
index cc36d5e..efa6d27 100644
--- a/templates/spots.html
+++ b/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>
diff --git a/webassets/css/style.css b/webassets/css/style.css
index 5d3c7d5..a8bc52c 100644
--- a/webassets/css/style.css
+++ b/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;
-        margin-right: 0;
+        display: none;
+    }
+    i#searchicon {
+        display: none;
     }
 }
 
diff --git a/webassets/js/common.js b/webassets/js/common.js
index 70bfa15..a40da8e 100644
--- a/webassets/js/common.js
+++ b/webassets/js/common.js
@@ -117,23 +117,19 @@ 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) {
-                count = REFRESH_INTERVAL_SEC - secSinceUpdate;
-                if (count <= 60) {
-                    var number = count.toFixed(0);
-                    updatingString = "<span class='nowrap'>Updating in " + number + " second" + (number != "1" ? "s" : "") + ".</span>";
-                } else {
-                    var number = Math.round(count / 60.0).toFixed(0);
-                    updatingString = "<span class='nowrap'>Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".</span>";
-                }
+        let count = REFRESH_INTERVAL_SEC;
+        let updatingString = "Updating..."
+        if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
+            count = REFRESH_INTERVAL_SEC - secSinceUpdate;
+            if (count <= 60) {
+                var number = count.toFixed(0);
+                updatingString = "<span class='nowrap'>Updating in " + number + " second" + (number != "1" ? "s" : "") + ".</span>";
+            } else {
+                var number = Math.round(count / 60.0).toFixed(0);
+                updatingString = "<span class='nowrap'>Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".</span>";
             }
-            $("#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.");
         }
+        $("#timing-container").html("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);
     }
 }
 
diff --git a/webassets/js/spots.js b/webassets/js/spots.js
index e0efe6d..7c3a5b2 100644
--- a/webassets/js/spots.js
+++ b/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 =  "?";