w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-10-27 08:49:27 +00:00
Code Issues 11 Packages Projects Releases Wiki Activity

Set up status and start working on filters panel #7

Browse Source
This commit is contained in:
Ian Renton
2025-10-02 19:33:39 +01:00
parent 9f3fc8146b
commit 0e262f68f5
17 changed files with 151 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
webassets/js/code.js
View File

@@ -50,9 +50,9 @@ function updateTable() {
}
// Format the frequency
var mhz = Math.floor(s["freq"] / 1000.0);
var khz = Math.floor(s["freq"] - (mhz * 1000.0));
var hz = Math.floor((s["freq"] - Math.floor(s["freq"])) * 1000.0);
var mhz = Math.floor(s["freq"] / 1000000.0);
var khz = Math.floor((s["freq"] - (mhz * 1000000.0)) / 1000.0);
var hz = Math.floor(s["freq"] - (mhz * 1000000.0) - (khz * 1000.0));
var hz_string = (hz > 0) ? hz.toFixed(0) : "";
var freq_string = `<span class='freq-mhz'>${mhz.toFixed(0)}</span><span class='freq-khz'>${khz.toFixed(0).padStart(3, '0')}</span><span class='freq-hz'>${hz_string}</span>`
@@ -105,10 +105,44 @@ function updateTable() {
// Load server status
function loadStatus() {
$.getJSON('/api/status', function(jsonData) {
$('#status-container').html(jsonData); // todo implement
$("#status-container").append(generateStatusCard("Server Information", [
`Software Version: ${jsonData["software-version"]}`,
`Server Owner Callsign: ${jsonData["server-owner-callsign"]}`,
`Server Uptime: ${jsonData["uptime"]}`,
`Memory Use: ${jsonData["mem_use_mb"]} MB`,
`Total Spots: ${jsonData["num_spots"]}`
]));
$("#status-container").append(generateStatusCard("Web Server", [
`Status: ${jsonData["webserver"]["status"]}`,
`Last API Access: ${moment.utc(jsonData["webserver"]["last_api_access"], moment.ISO_8601).format("HH:mm")}`,
`Last Page Access: ${moment.utc(jsonData["webserver"]["last_page_access"], moment.ISO_8601).format("HH:mm")}`
]));
$("#status-container").append(generateStatusCard("Cleanup Service", [
`Status: ${jsonData["cleanup"]["status"]}`,
`Last Ran: ${moment.utc(jsonData["cleanup"]["last_ran"], moment.ISO_8601).format("HH:mm")}`
]));
jsonData["providers"].forEach(p => {
$("#status-container").append(generateStatusCard("Provider: " + p["name"], [
`Status: ${p["status"]}`,
`Last Updated: ${p["enabled"] ? moment.utc(p["last_updated"], moment.ISO_8601).format("HH:mm") : "N/A"}`,
`Latest Spot: ${p["enabled"] ? moment.utc(p["last_spot"], moment.ISO_8601).format("HH:mm YYYY-MM-DD") : "N/A"}`
]));
});
});
}
// Generate a status card
function generateStatusCard(title, textLines) {
let $col = $("<div class='col'>")
let $card = $("<div class='card status-card'>");
let $card_body = $("<div class='card-body'>");
$card_body.append(`<h5 class='card-title'>${title}</h5>`);
$card_body.append(`<p class='card-text'>${textLines.join("<br/>")}</p>`);
$card.append($card_body);
$col.append($card);
return $col;
}
// Load server options. Once a successful callback is made from this, we then query spots and set up the timer to query
// spots repeatedly.
function loadOptions() {
@@ -121,6 +155,9 @@ function loadOptions() {
band_colors[m["name"]] = m["color"]
});
// Populate the filters panel
$("#filters-container").text(JSON.stringify(options));
// Load spots and set up the timer
loadSpots();
setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000)
@@ -162,8 +199,22 @@ function escapeHtml(str) {
return str.replace(/[&<>"'`]/g, escapeCharacter);
}
// Startup
$(document).ready(function() {
// Call loadOptions(), this will then trigger loading spots and setting up timers.
loadOptions();
// Update the refresh timing display every second
setInterval(updateRefreshDisplay, 1000);
// Startup. Call loadOptions(), this will then trigger loading spots and setting up timers.
loadOptions();
// Update the refresh timing display every second
setInterval(updateRefreshDisplay, 1000);
// Event listeners
$("#status-button").click(function() {
// If we are going to display status, load the data
if (!$("#status-area").is(":visible")) {
loadStatus();
}
$("#status-area").toggle();
});
$("#close-status-button").click(function() { $("#status-area").hide(); });
$("#filters-button").click(function() { $("#filters-area").toggle(); });
$("#close-filters-button").click(function() { $("#filters-area").hide(); });
});