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

Compare commits

base: w1cdn:2a5e0db5bcd628164c85f96fd2f9e1880a814fca
Branches Tags
w1cdn:main w1cdn:web_ui_options_faff w1cdn:97-wwtota w1cdn:88-colour-schemes w1cdn:3-sse-endpoints w1cdn:82-tota w1cdn:73-hamqth-lookup
w1cdn:1.2 w1cdn:1.1.1 w1cdn:1.1 w1cdn:1.0.1 w1cdn:1.0
...
compare: w1cdn:ee47d736eb06218e3e337bf5c25135447f90f6de
Branches Tags
w1cdn:main w1cdn:web_ui_options_faff w1cdn:97-wwtota w1cdn:88-colour-schemes w1cdn:3-sse-endpoints w1cdn:82-tota w1cdn:73-hamqth-lookup
w1cdn:1.2 w1cdn:1.1.1 w1cdn:1.1 w1cdn:1.0.1 w1cdn:1.0

5 Commits
2a5e0db5bc ... ee47d736eb

Author SHA1 Message Date
Ian Renton
ee47d736eb Template for conditions page #92 2026-03-28 12:03:38 +00:00
Ian Renton
a55179d944 Template for conditions page #92 2026-03-28 12:01:01 +00:00
Ian Renton
8127122c11 Refreshed status display layout for easier reading 2026-03-28 11:58:24 +00:00
Ian Renton
91276067b9 Conditions display should be a separate page #92 2026-03-28 11:36:37 +00:00
Ian Renton
126ebcb8b2 UI groundwork for conditions display #92 2026-03-28 10:50:38 +00:00
20 changed files with 224 additions and 172 deletions
Expand all files Collapse all files

2
server/webserver.py
View File

@@ -79,6 +79,8 @@ class WebServer:
{"template_name": "alerts", "web_server_metrics": self.web_server_metrics}),
(r"/add-spot", PageTemplateHandler,
{"template_name": "add_spot", "web_server_metrics": self.web_server_metrics}),
(r"/conditions", PageTemplateHandler,
{"template_name": "conditions", "web_server_metrics": self.web_server_metrics}),
(r"/status", PageTemplateHandler,
{"template_name": "status", "web_server_metrics": self.web_server_metrics}),
(r"/about", PageTemplateHandler, {"template_name": "about", "web_server_metrics": self.web_server_metrics}),

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=1774694366"></script>
<script src="/js/common.js?v=1774699418"></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=1774694366"></script>
<script src="/js/add-spot.js?v=1774694366"></script>
<script src="/js/common.js?v=1774699418"></script>
<script src="/js/add-spot.js?v=1774699418"></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=1774694367"></script>
<script src="/js/alerts.js?v=1774694367"></script>
<script src="/js/common.js?v=1774699419"></script>
<script src="/js/alerts.js?v=1774699419"></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=1774694366"></script>
<script src="/js/spotsbandsandmap.js?v=1774694366"></script>
<script src="/js/bands.js?v=1774694366"></script>
<script src="/js/common.js?v=1774699418"></script>
<script src="/js/spotsbandsandmap.js?v=1774699418"></script>
<script src="/js/bands.js?v=1774699418"></script>
<script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

9
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=1774694366"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1774694366"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1774694366"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1774694366"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1774699418"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1774699418"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1774699418"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1774699418"></script>
</head>
<body>
@@ -71,6 +71,7 @@
{% if allow_spotting %}
<li class="nav-item ms-4"><a href="/add-spot" class="nav-link" id="nav-link-add-spot"><i class="fa-solid fa-comment"></i> Add&nbsp;Spot</a></li>
{% end %}
<li class="nav-item ms-4"><a href="/conditions" class="nav-link" id="nav-link-conditions"><i class="fa-solid fa-sun"></i> Conditions</a></li>
<li class="nav-item ms-4"><a href="/status" class="nav-link" id="nav-link-status"><i class="fa-solid fa-chart-simple"></i> Status</a></li>
<li class="nav-item ms-4"><a href="/about" class="nav-link" id="nav-link-about"><i class="fa-solid fa-circle-info"></i> About</a></li>
<li class="nav-item ms-4"><a href="/apidocs" class="nav-link" id="nav-link-api"><i class="fa-solid fa-gear"></i> API</a></li>

41
templates/conditions.html Normal file
View File

@@ -0,0 +1,41 @@
{% extends "base.html" %}
{% block content %}
<div class="card mt-5">
<div class="card-header">
Propagation
</div>
<div class="card-body">
<div class="row row-cols-1 row-cols-md-2 g-3">
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">HF Conditions</h5>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">VHF Conditions</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mt-5">
<div class="card-header">
Solar Weather
</div>
<div class="card-body">
Coming soon!
</div>
</div>
<script src="/js/common.js?v=1774699418"></script>
<script src="/js/conditions.js?v=1774699418"></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=1774694367"></script>
<script src="/js/spotsbandsandmap.js?v=1774694367"></script>
<script src="/js/map.js?v=1774694367"></script>
<script src="/js/common.js?v=1774699419"></script>
<script src="/js/spotsbandsandmap.js?v=1774699419"></script>
<script src="/js/map.js?v=1774699419"></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=1774694366"></script>
<script src="/js/spotsbandsandmap.js?v=1774694366"></script>
<script src="/js/spots.js?v=1774694366"></script>
<script src="/js/common.js?v=1774699418"></script>
<script src="/js/spotsbandsandmap.js?v=1774699418"></script>
<script src="/js/spots.js?v=1774699418"></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=1774694366"></script>
<script src="/js/status.js?v=1774694366"></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=1774699418"></script>
<script src="/js/status.js?v=1774699418"></script>
<script>
$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
</script>
{% end %}

10
templates/widgets/conditions-area-header.html Normal file
View File

@@ -0,0 +1,10 @@
<div class="card-header">
<div class="row">
<div class="col-auto me-auto">
Conditions
</div>
<div class="col-auto d-inline-flex">
<button id="close-conditions-button" type="button" class="btn-close btn-close-white" aria-label="Close" onclick="closeConditionsPanel();"></button>
</div>
</div>
</div>

5
templates/widgets/filters-display-buttons.html
View File

@@ -1,5 +1,4 @@
<div class="d-inline-flex gap-1">
<button id="conditions-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleConditionsPanel();"><i class="fa-solid fa-sun"></i><span class="hideonmobile">&nbsp;Conditions</span></button>
<button id="filters-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i><span class="hideonmobile">&nbsp;Filters</span></button>
<button id="display-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i><span class="hideonmobile">&nbsp;Display</span></button>
<button id="filters-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i>&nbsp;Filters</button>
<button id="display-button" type="button" class="btn btn-outline-secondary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i>&nbsp;Display</button>
</div>

7
webassets/css/style.css
View File

@@ -206,6 +206,13 @@ tr.new td {
}
/* TABLE */
#table-container {
border-radius: 3px;
overflow: hidden;
}
/* MAP */
div#map {
width: auto;

27
webassets/js/alerts.js
View File

@@ -306,33 +306,6 @@ function filtersUpdated() {
saveSettings();
}
// React to toggling/closing panels
function toggleFiltersPanel() {
// If we are going to display the filters panel, hide the display panel
if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
$("#display-area").hide();
$("#display-button").button("toggle");
}
$("#filters-area").toggle();
}
function closeFiltersPanel() {
$("#filters-button").button("toggle");
$("#filters-area").hide();
}
function toggleDisplayPanel() {
// If we are going to display status, load the data for the status panel, and hide the filters panel
if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
$("#filters-area").hide();
$("#filters-button").button("toggle");
}
$("#display-area").toggle();
}
function closeDisplayPanel() {
$("#display-button").button("toggle");
$("#display-area").hide();
}
// Startup
$(document).ready(function() {
// Call loadOptions(), this will then trigger loading alerts and setting up timers.

27
webassets/js/bands.js
View File

@@ -265,33 +265,6 @@ function displayUpdated() {
saveSettings();
}
// React to toggling/closing panels
function toggleFiltersPanel() {
// If we are going to show the filters panel, hide the display panel
if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
$("#display-area").hide();
$("#display-button").button("toggle");
}
$("#filters-area").toggle();
}
function closeFiltersPanel() {
$("#filters-button").button("toggle");
$("#filters-area").hide();
}
function toggleDisplayPanel() {
// If we are going to show the display panel, hide the filters panel
if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
$("#filters-area").hide();
$("#filters-button").button("toggle");
}
$("#display-area").toggle();
}
function closeDisplayPanel() {
$("#display-button").button("toggle");
$("#display-area").hide();
}
// Startup
$(document).ready(function() {
// Call loadOptions(), this will then trigger loading spots and setting up timers.

33
webassets/js/common.js
View File

@@ -183,6 +183,39 @@ function listenForOSThemeChange() {
});
}
// Panel toggle functions
const PANELS = [
{ area: "#filters-area",button: "#filters-button" },
{ area: "#display-area", button: "#display-button" },
];
// Toggle a panel open or closed. If opening, all other visible panels are closed first.
// areaId is the jQuery selector for the panel's content area, e.g. "#filters-area".
function togglePanel(areaId) {
if (!$(areaId).is(":visible")) {
PANELS.forEach(p => {
if (p.area !== areaId && $(p.area).is(":visible")) {
$(p.area).hide();
$(p.button).button("toggle");
}
});
}
$(areaId).toggle();
}
// Close a panel and deactivate its toggle button.
function closePanel(areaId) {
const panel = PANELS.find(p => p.area === areaId);
if (panel) { $(panel.button).button("toggle"); }
$(areaId).hide();
}
function toggleFiltersPanel() { togglePanel("#filters-area"); }
function closeFiltersPanel() { closePanel("#filters-area"); }
function toggleDisplayPanel() { togglePanel("#display-area"); }
function closeDisplayPanel() { closePanel("#display-area"); }
// Startup
$(document).ready(function() {
usePreferredTheme();

11
webassets/js/conditions.js Normal file
View File

@@ -0,0 +1,11 @@
// Load solar conditions
function loadSolarConditions() {
$.getJSON('/api/v1/solar', function(jsonData) {
});
}
// Startup
$(document).ready(function() {
loadSolarConditions();
});

27
webassets/js/map.js
View File

@@ -196,33 +196,6 @@ function displayUpdated() {
saveSettings();
}
// React to toggling/closing panels
function toggleFiltersPanel() {
// If we are going to show the filters panel, hide the display panel
if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
$("#display-area").hide();
$("#display-button").button("toggle");
}
$("#filters-area").toggle();
}
function closeFiltersPanel() {
$("#filters-button").button("toggle");
$("#filters-area").hide();
}
function toggleDisplayPanel() {
// If we are going to show the display panel, hide the filters panel
if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
$("#filters-area").hide();
$("#filters-button").button("toggle");
}
$("#display-area").toggle();
}
function closeDisplayPanel() {
$("#display-button").button("toggle");
$("#display-area").hide();
}
// Set up the map
function setUpMap() {
// Create map

27
webassets/js/spots.js
View File

@@ -462,33 +462,6 @@ function userGridUpdated() {
saveSettings();
}
// React to toggling/closing panels
function toggleFiltersPanel() {
// If we are going to show the filters panel, hide the display and add spot panels
if (!$("#filters-area").is(":visible") && $("#display-area").is(":visible")) {
$("#display-area").hide();
$("#display-button").button("toggle");
}
$("#filters-area").toggle();
}
function closeFiltersPanel() {
$("#filters-button").button("toggle");
$("#filters-area").hide();
}
function toggleDisplayPanel() {
// If we are going to show the display panel, hide the filters and add spot panels
if (!$("#display-area").is(":visible") && $("#filters-area").is(":visible")) {
$("#filters-area").hide();
$("#filters-button").button("toggle");
}
$("#display-area").toggle();
}
function closeDisplayPanel() {
$("#display-button").button("toggle");
$("#display-area").hide();
}
// Display the intro box, unless the user has already dismissed it once.
function displayIntroBox() {
if (localStorage.getItem("intro-box-dismissed") == null) {

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();