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

Refreshed status display layout for easier reading

Browse Source
This commit is contained in:
Ian Renton
2026-03-28 11:58:24 +00:00
parent 91276067b9
commit 8127122c11
10 changed files with 118 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/about.html
View File

@@ -67,7 +67,7 @@
<p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
</div>
<script src="/js/common.js?v=1774697797"></script>
<script src="/js/common.js?v=1774699104"></script>
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

4
templates/add_spot.html
View File

@@ -69,8 +69,8 @@
</div>
<script src="/js/common.js?v=1774697797"></script>
<script src="/js/add-spot.js?v=1774697797"></script>
<script src="/js/common.js?v=1774699104"></script>
<script src="/js/add-spot.js?v=1774699104"></script>
<script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

4
templates/alerts.html
View File

@@ -56,8 +56,8 @@
</div>
<script src="/js/common.js?v=1774697797"></script>
<script src="/js/alerts.js?v=1774697797"></script>
<script src="/js/common.js?v=1774699104"></script>
<script src="/js/alerts.js?v=1774699104"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

6
templates/bands.html
View File

@@ -62,9 +62,9 @@
<script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script>
<script src="/js/common.js?v=1774697797"></script>
<script src="/js/spotsbandsandmap.js?v=1774697797"></script>
<script src="/js/bands.js?v=1774697797"></script>
<script src="/js/common.js?v=1774699104"></script>
<script src="/js/spotsbandsandmap.js?v=1774699104"></script>
<script src="/js/bands.js?v=1774699104"></script>
<script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

8
templates/base.html
View File

@@ -46,10 +46,10 @@
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1774697797"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1774697797"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1774697797"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1774697797"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1774699104"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1774699104"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1774699104"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1774699104"></script>
</head>
<body>

2
templates/conditions.html
View File

@@ -3,7 +3,7 @@
Coming soon!
<script src="/js/common.js?v=1774697797"></script>
<script src="/js/common.js?v=1774699104"></script>
<script>$(document).ready(function() { $("#nav-link-conditions").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

6
templates/map.html
View File

@@ -70,9 +70,9 @@
<script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script>
<script src="/js/common.js?v=1774697797"></script>
<script src="/js/spotsbandsandmap.js?v=1774697797"></script>
<script src="/js/map.js?v=1774697797"></script>
<script src="/js/common.js?v=1774699104"></script>
<script src="/js/spotsbandsandmap.js?v=1774699104"></script>
<script src="/js/map.js?v=1774699104"></script>
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

6
templates/spots.html
View File

@@ -87,9 +87,9 @@
<script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script>
<script src="/js/common.js?v=1774697797"></script>
<script src="/js/spotsbandsandmap.js?v=1774697797"></script>
<script src="/js/spots.js?v=1774697797"></script>
<script src="/js/common.js?v=1774699104"></script>
<script src="/js/spotsbandsandmap.js?v=1774699104"></script>
<script src="/js/spots.js?v=1774699104"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

66
templates/status.html
View File

@@ -1,10 +1,68 @@
{% extends "base.html" %}
{% block content %}
<div id="status-container" class="row row-cols-1 row-cols-md-4 g-4 mt-4"></div>
<div class="card mt-5">
<div class="card-header">
Spothole
</div>
<div class="card-body">
<div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
<div class="col"><strong>Metadata</strong></div>
<div class="col">Software Version: <span id="software-version"></span></div>
<div class="col">Owner Callsign: <span id="server-owner-callsign"></span></div>
<div class="col">Up since: <span id="up-since"></span></div>
</div>
<div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
<div class="col"><strong>Performance</strong></div>
<div class="col">Memory Use: <span id="memory-use"></span></div>
<div class="col">Total Spots: <span id="total-spots"></span></div>
<div class="col">Total Alerts: <span id="total-alerts"></span></div>
</div>
<div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
<div class="col"><strong>Web Server</strong></div>
<div class="col">Status: <span id="web-server-status"></span></div>
<div class="col">Last API call: <span id="web-server-last-api"></span></div>
<div class="col">Last page req: <span id="web-server-last-page"></span></div>
</div>
<div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
<div class="col"><strong>Cleanup Service</strong></div>
<div class="col">Status: <span id="cleanup-status"></span></div>
<div class="col">Last ran: <span id="cleanup-last-ran"></span></div>
</div>
</div>
</div>
<script src="/js/common.js?v=1774697797"></script>
<script src="/js/status.js?v=1774697797"></script>
<script>$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --></script>
<div class="card mt-3">
<div class="card-header">
Spot Providers
</div>
<div class="card-body" id="spot-providers-status-container">
</div>
</div>
<div class="card mt-3">
<div class="card-header">
Alert Providers
</div>
<div class="card-body" id="alert-providers-status-container">
</div>
</div>
<div class="card mt-3">
<div class="card-header">
Solar/Band Conditions Providers
</div>
<div class="card-body" id="condition-providers-status-container">
</div>
</div>
<script src="/js/common.js?v=1774699104"></script>
<script src="/js/status.js?v=1774699104"></script>
<script>
$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
</script>
{% end %}

76
webassets/js/status.js
View File

@@ -1,52 +1,50 @@
// Load server status
function loadStatus() {
$.getJSON('/api/v1/status', function(jsonData) {
$("#status-container").empty();
$("#status-container").append(generateStatusCard("Server Information", [
`Software Version: ${jsonData["software-version"]}`,
`Server Owner Callsign: ${jsonData["server-owner-callsign"]}`,
`Server up since: ${moment().subtract(jsonData["uptime"], 'seconds').fromNow()}`,
`Memory Use: ${jsonData["mem_use_mb"]} MB`,
`Total Spots: ${jsonData["num_spots"]}`,
`Total Alerts: ${jsonData["num_alerts"]}`
]));
$("#status-container").append(generateStatusCard("Web Server", [
`Status: ${jsonData["webserver"]["status"]}`,
`Last API Access: ${moment.unix(jsonData["webserver"]["last_api_access"]).utc().fromNow()}`,
`Last Page Access: ${moment.unix(jsonData["webserver"]["last_page_access"]).utc().fromNow()}`
]));
$("#status-container").append(generateStatusCard("Cleanup Service", [
`Status: ${jsonData["cleanup"]["status"]}`,
`Last Ran: ${moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow()}`
]));
$("#software-version").text(jsonData["software-version"]);
$("#server-owner-callsign").text(jsonData["server-owner-callsign"]);
$("#up-since").text(moment().subtract(jsonData["uptime"], 'seconds').fromNow());
$("#memory-use").text(jsonData["mem_use_mb"] + " MB");
$("#total-spots").text(jsonData["num_spots"]);
$("#total-alerts").text(jsonData["num_alerts"]);
$("#web-server-status").text(jsonData["webserver"]["status"]);
$("#web-server-last-api").text(moment.unix(jsonData["webserver"]["last_api_access"]).utc().fromNow());
$("#web-server-last-page").text(moment.unix(jsonData["webserver"]["last_page_access"]).utc().fromNow());
$("#cleanup-status").text(jsonData["cleanup"]["status"]);
$("#cleanu-last-ran").text(moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow());
jsonData["spot_providers"].forEach(p => {
$("#status-container").append(generateStatusCard("Spot Provider: " + p["name"], [
`Status: ${p["status"]}`,
`Last Updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}`,
`Latest Spot: ${(p["enabled"] && p["last_spot"] > 0) ? moment.unix(p["last_spot"]).utc().fromNow() : "N/A"}`
]));
$("#spot-providers-status-container").append(`
<div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
<div class="col"><strong>${p["name"]}</strong></div>
<div class="col">Status: ${p["status"]}</div>
<div class="col">Last updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}</div>
<div class="col">Latest spot: ${(p["enabled"] && p["last_spot"] > 0) ? moment.unix(p["last_spot"]).utc().fromNow() : "N/A"}</div>
</div>`);
});
jsonData["alert_providers"].forEach(p => {
$("#status-container").append(generateStatusCard("Alert Provider: " + p["name"], [
`Status: ${p["status"]}`,
`Last Updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}`
]));
$("#alert-providers-status-container").append(`
<div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
<div class="col"><strong>${p["name"]}</strong></div>
<div class="col">Status: ${p["status"]}</div>
<div class="col">Last updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}</div>
</div>`);
});
jsonData["solar_condition_providers"].forEach(p => {
$("#condition-providers-status-container").append(`
<div class="row row-cols-1 row-cols-md-4 g-4 mb-2">
<div class="col"><strong>${p["name"]}</strong></div>
<div class="col">Status: ${p["status"]}</div>
<div class="col">Last updated: ${(p["enabled"] && p["last_updated"] > 0) ? moment.unix(p["last_updated"]).utc().fromNow() : "N/A"}</div>
</div>`);
});
});
}
// Generate a status card
function generateStatusCard(title, textLines) {
let $col = $("<div class='col'>");
let $card = $("<div class='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;
}
// Startup
$(document).ready(function() {
loadStatus();