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> <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> </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> <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

4
templates/add_spot.html
View File

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

4
templates/alerts.html
View File

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

6
templates/bands.html
View File

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

8
templates/base.html
View File

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

2
templates/conditions.html
View File

@@ -3,7 +3,7 @@
Coming soon! 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> <script>$(document).ready(function() { $("#nav-link-conditions").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

6
templates/map.html
View File

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

6
templates/spots.html
View File

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

66
templates/status.html
View File

@@ -1,10 +1,68 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block content %} {% 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> <div class="card mt-3">
<script src="/js/status.js?v=1774697797"></script> <div class="card-header">
<script>$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --></script> 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 %} {% end %}

84
webassets/js/status.js
View File

@@ -1,50 +1,48 @@
// Load server status // Load server status
function loadStatus() { function loadStatus() {
$.getJSON('/api/v1/status', function(jsonData) { $.getJSON('/api/v1/status', function(jsonData) {
$("#status-container").empty(); $("#software-version").text(jsonData["software-version"]);
$("#status-container").append(generateStatusCard("Server Information", [ $("#server-owner-callsign").text(jsonData["server-owner-callsign"]);
`Software Version: ${jsonData["software-version"]}`, $("#up-since").text(moment().subtract(jsonData["uptime"], 'seconds').fromNow());
`Server Owner Callsign: ${jsonData["server-owner-callsign"]}`, $("#memory-use").text(jsonData["mem_use_mb"] + " MB");
`Server up since: ${moment().subtract(jsonData["uptime"], 'seconds').fromNow()}`, $("#total-spots").text(jsonData["num_spots"]);
`Memory Use: ${jsonData["mem_use_mb"]} MB`, $("#total-alerts").text(jsonData["num_alerts"]);
`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()}`
]));
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"}`
]));
});
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"}`
]));
});
});
}
// Generate a status card $("#web-server-status").text(jsonData["webserver"]["status"]);
function generateStatusCard(title, textLines) { $("#web-server-last-api").text(moment.unix(jsonData["webserver"]["last_api_access"]).utc().fromNow());
let $col = $("<div class='col'>"); $("#web-server-last-page").text(moment.unix(jsonData["webserver"]["last_page_access"]).utc().fromNow());
let $card = $("<div class='card'>");
let $card_body = $("<div class='card-body'>"); $("#cleanup-status").text(jsonData["cleanup"]["status"]);
$card_body.append(`<h5 class='card-title'>${title}</h5>`); $("#cleanu-last-ran").text(moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow());
$card_body.append(`<p class='card-text'>${textLines.join("<br/>")}</p>`);
$card.append($card_body); jsonData["spot_providers"].forEach(p => {
$col.append($card); $("#spot-providers-status-container").append(`
return $col; <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 => {
$("#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>`);
});
});
} }
// Startup // Startup