w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-02-04 09:14:30 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Run/Pause button #3

Browse Source
This commit is contained in:
Ian Renton
2025-12-24 08:53:44 +00:00
parent 61fc0b9d0f
commit e8ca488001
3 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/spots.html
View File

@@ -10,7 +10,7 @@
<div class="mt-3"> <div class="mt-3">
<div id="settingsButtonRow" class="row"> <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> <p id="timing-container">Loading...</p>
</div> </div>
<div class="col-lg-6 text-end"> <div class="col-lg-6 text-end">
@@ -22,7 +22,7 @@
<input type="radio" class="btn-check" name="runPause" id="pauseButton" autocomplete="off"> <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> <label class="btn btn-outline-primary" for="pauseButton"><i class="fa-solid fa-pause"></i> Pause</label>
</span> </span>
<span style="position: relative;"> <span class="hideonmobile" style="position: relative;">
<i id="searchicon" class="fa-solid fa-magnifying-glass"></i> <i id="searchicon" class="fa-solid fa-magnifying-glass"></i>
<input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search"> <input id="search" type="search" class="form-control" oninput="filtersUpdated();" placeholder="Search">
</span> </span>

7
webassets/css/style.css
View File

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

26
webassets/js/spots.js
View File

@@ -19,8 +19,11 @@ function loadSpots() {
spots = jsonData; spots = jsonData;
// Update table // Update table
updateTable(); updateTable();
// Start SSE connection to fetch updates in the background // Start SSE connection to fetch updates in the background, if we are in "run" mode
startSSEConnection(); 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. // Update the special timing display for the live spots page, which varies depending on run/pause selection.
function updateTimingDisplayRunPause() { function updateTimingDisplayRunPause() {
// todo run/pause let run = $('#runButton:checked').val();
$("#timing-container").html("Last spot received at " + lastUpdateTime.format('HH:mm') + " UTC."); $("#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. // Build a query string for the API, based on the filters that the user has selected.
@@ -474,4 +477,19 @@ $(document).ready(function() {
loadOptions(); loadOptions();
// Display intro box // Display intro box
displayIntroBox(); 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();
});
}); });