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

Starting to implement Run/Pause switch #3

Browse Source
This commit is contained in:
Ian Renton
2025-12-23 22:52:21 +00:00
parent 70dc1b495c
commit 61fc0b9d0f
4 changed files with 44 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
templates/spots.html
View File

@@ -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>

17
webassets/css/style.css
View File

@@ -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;
}
}

26
webassets/js/common.js
View File

@@ -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);
}
}

12
webassets/js/spots.js
View File

@@ -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 = "?";