Cache-busting ?v= strings for CSS

Fix display of the last time cleanup ran
Fix a parsing bug with NG3K
2026-04-29 18:25:58 +00:00 · 2026-04-22 10:23:50 +01:00 · 2026-04-11 08:17:30 +01:00 · 2026-04-11 08:14:52 +01:00 · 2026-04-10 08:05:57 +01:00 · 2026-04-10 08:02:45 +01:00
19 changed files with 112 additions and 35 deletions
--- a/alertproviders/ng3k.py
+++ b/alertproviders/ng3k.py
@@ -68,9 +68,9 @@ class NG3K(HTTPAlertProvider):

            dx_country = parts[1]
            qsl_info = parts[3]
-            bands = extra_parts[1]
-            modes = extra_parts[2] if len(extra_parts) > 3 else ""
-            comment = extra_parts[-1]
+            bands = extra_parts[1] if len(extra_parts) > 1 else ""
+            modes = extra_parts[2] if len(extra_parts) > 2 else ""
+            comment = extra_parts[3] if len(extra_parts) > 3 else ""

            # Convert to our alert format
            alert = Alert(source=self.name,
--- a/templates/about.html
+++ b/templates/about.html
@@ -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=1775382121"></script>
+<script src="/js/common.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/add_spot.html
+++ b/templates/add_spot.html
@@ -69,8 +69,8 @@

 </div>

-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/add-spot.js?v=1775382121"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/add-spot.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/alerts.html
+++ b/templates/alerts.html
@@ -56,8 +56,8 @@

 </div>

-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/alerts.js?v=1775382121"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/alerts.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/bands.html
+++ b/templates/bands.html
@@ -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=1775382121"></script>
-<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
-<script src="/js/bands.js?v=1775382121"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/spotsbandsandmap.js?v=1776849830"></script>
+<script src="/js/bands.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/base.html
+++ b/templates/base.html
@@ -24,7 +24,7 @@

    <title>Spothole</title>

-    <link rel="stylesheet" href="/css/style.css" type="text/css">
+    <link rel="stylesheet" href="/css/style.css?v=1776849830" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    <link href="/fa/css/fontawesome.min.css" rel="stylesheet" />
@@ -46,10 +46,9 @@
            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=1775382121"></script>
-    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775382121"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775382121"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775382121"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1776849830"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1776849830"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1776849830"></script>

 </head>
 <body>
--- a/templates/cards/audio.html
+++ b/templates/cards/audio.html
@@ -0,0 +1,11 @@
+<div class="card">
+    <div class="card-body">
+        <h5 class="card-title mb-3">Audio</h5>
+        <div class="form-group">
+            <div class="form-check form-check-inline">
+              <input class="form-check-input storeable-checkbox" type="checkbox" id="pingOnNewSpots" value="pingOnNewSpots" oninput="saveSettings();">
+              <label class="form-check-label" for="pingOnNewSpots">Ping on new spots</label>
+            </div>
+        </div>
+    </div>
+</div>
--- a/templates/cards/basemap.html
+++ b/templates/cards/basemap.html
@@ -5,6 +5,7 @@
            <label for="basemap" class="form-label">Basemap</label>
            <select id="basemap" class="storeable-select form-select" oninput="displayUpdated();">
                <option value="OpenStreetMap.Mapnik" selected>OpenStreetMap Mapnik</option>
+                <option value="OpenStreetMap.Mapnik.Dark">OpenStreetMap Mapnik (Dark)</option>
                <option value="Esri.NatGeoWorldMap">ESRI NatGeo World Map</option>
                <option value="Esri.WorldTopoMap">ESRI World Topo Map</option>
                <option value="Esri.WorldShadedRelief">ESRI World Shaded Relief</option>
--- a/templates/conditions.html
+++ b/templates/conditions.html
@@ -230,8 +230,8 @@
 </div>

 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/conditions.js?v=1775382121"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/conditions.js?v=1776849830"></script>
 <script>$(document).ready(function () {
    $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>
--- a/templates/map.html
+++ b/templates/map.html
@@ -79,9 +79,9 @@
 <script>
    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
-<script src="/js/map.js?v=1775382121"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/spotsbandsandmap.js?v=1776849830"></script>
+<script src="/js/map.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/spots.html
+++ b/templates/spots.html
@@ -74,6 +74,9 @@
                <div class="col">
                    {% module Template("cards/table-columns-spots.html", web_ui_options=web_ui_options) %}
                </div>
+                <div class="col">
+                    {% module Template("cards/audio.html", web_ui_options=web_ui_options) %}
+                </div>
            </div>
        </div>
    </div>
@@ -87,9 +90,9 @@
 <script>
    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/spotsbandsandmap.js?v=1775382121"></script>
-<script src="/js/spots.js?v=1775382121"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/spotsbandsandmap.js?v=1776849830"></script>
+<script src="/js/spots.js?v=1776849830"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/status.html
+++ b/templates/status.html
@@ -59,8 +59,8 @@
    </div>
 </div>

-<script src="/js/common.js?v=1775382121"></script>
-<script src="/js/status.js?v=1775382121"></script>
+<script src="/js/common.js?v=1776849830"></script>
+<script src="/js/status.js?v=1776849830"></script>
 <script>
    $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
 </script>
--- a/webassets/audio/ping.mp3
+++ b/webassets/audio/ping.mp3
--- a/webassets/css/style.css
+++ b/webassets/css/style.css
@@ -214,6 +214,9 @@ div#map {
 .leaflet-container {
    font-family: var(--bs-body-font-family) !important;
 }
+.leaflet-control-attribution {
+    background: none;
+}

 /* Make buttons overlaid on the map have a non-transparent fill so you can see the text better */
 .btn-outline-secondary {
--- a/webassets/js/common.js
+++ b/webassets/js/common.js
@@ -2,6 +2,39 @@
 var options = {};
 // Last time we updated the spots/alerts list on display.
 var lastUpdateTime;
+// Normally load user settings from local storage, unless embedded mode is in use
+let useLocalStorage = true;
+
+// Save settings to local storage. Suppressed if "use local storage" is false.
+function saveSettings() {
+    if (useLocalStorage) {
+        // Find all storeable UI elements, store a key of "element id:property name" mapped to the value of that
+        // property. For a checkbox, that's the "checked" property.
+        $(".storeable-checkbox").each(function() {
+            localStorage.setItem("#" + $(this)[0].id + ":checked", JSON.stringify($(this)[0].checked));
+        });
+        $(".storeable-select").each(function() {
+            localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
+        });
+        $(".storeable-text").each(function() {
+            localStorage.setItem("#" + $(this)[0].id + ":value", JSON.stringify($(this)[0].value));
+        });
+    }
+}
+
+// Load settings from local storage and set up the filter selectors. Suppressed if "use local storage" is false.
+function loadSettings() {
+    if (useLocalStorage) {
+        // Find all local storage entries and push their data to the corresponding UI element
+        Object.keys(localStorage).forEach(function(key) {
+            if (key.startsWith("#") && key.includes(":")) {
+                // Split the key back into an element ID and a property
+                var split = key.split(":");
+                $(split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
+            }
+        });
+    }
+}

 // Load and apply any URL params. This is used for "embedded mode" where another site can embed a version of
 // Spothole and provide its own interface options rather than using the user's saved ones. These may select things
--- a/webassets/js/map.js
+++ b/webassets/js/map.js
@@ -215,6 +215,13 @@ function loadOptions() {
        // Load settings from settings storage now all the controls are available
        loadSettings();

+        // If no basemap has been explicitly saved and the UI is in dark mode, default to dark Mapnik
+        if (localStorage.getItem("#basemap:value") === null) {
+            if (document.documentElement.getAttribute("data-bs-theme") === "dark") {
+                $("#basemap").val("OpenStreetMap.Mapnik.Dark");
+            }
+        }
+
        // Apply basemap and overlay settings now that controls have their saved values
        setBasemap($("#basemap").val());
        setBasemapOpacity(parseFloat($("#basemapOpacity").val()));
@@ -251,16 +258,24 @@ function setBasemap(basemapname) {
        if (typeof backgroundTileLayer !== 'undefined') {
            map.removeLayer(backgroundTileLayer);
        }
-        backgroundTileLayer = L.tileLayer.provider(basemapname, {
+        // OpenStreetMap.Mapnik.Dark is a synthetic variant that uses Mapnik tiles with a CSS filter applied
+        const providerName = basemapname === "OpenStreetMap.Mapnik.Dark" ? "OpenStreetMap.Mapnik" : basemapname;
+        backgroundTileLayer = L.tileLayer.provider(providerName, {
            opacity: parseFloat($("#basemapOpacity").val()),
            edgeBufferTiles: 1
        });
        backgroundTileLayer.addTo(map);
        backgroundTileLayer.bringToBack();
+        if (basemapname === "OpenStreetMap.Mapnik.Dark") {
+            var container = backgroundTileLayer.getContainer();
+            if (container) {
+                container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
+            }
+        }

        // Identify dark basemaps to ensure we use white text for unselected icons
        // and change the background colour appropriately
-        const basemapIsDark = basemapname === "CartoDB.DarkMatter" || basemapname === "Esri.WorldImagery";
+        const basemapIsDark = basemapname === "CartoDB.DarkMatter" || basemapname === "Esri.WorldImagery" || basemapname === "OpenStreetMap.Mapnik.Dark";
        $("#map").css('background-color', basemapIsDark ? "black" : "white");

        // Change the colour of the grid and zone overlays to match
@@ -380,12 +395,19 @@ function setUpMap() {

    // Add basemap
    loadedBasemap = $("#basemap").val();
-    backgroundTileLayer = L.tileLayer.provider(loadedBasemap, {
+    const initialProviderName = loadedBasemap === "OpenStreetMap.Mapnik.Dark" ? "OpenStreetMap.Mapnik" : loadedBasemap;
+    backgroundTileLayer = L.tileLayer.provider(initialProviderName, {
        opacity: parseFloat($("#basemapOpacity").val()),
        edgeBufferTiles: 1
    });
    backgroundTileLayer.addTo(map);
    backgroundTileLayer.bringToBack();
+    if (loadedBasemap === "OpenStreetMap.Mapnik.Dark") {
+        var container = backgroundTileLayer.getContainer();
+        if (container) {
+            container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
+        }
+    }

    // Add marker layer
    markersLayer = new L.LayerGroup();
--- a/webassets/js/spots.js
+++ b/webassets/js/spots.js
@@ -61,6 +61,11 @@ function startSSEConnection() {

        // Add the new spot to table
        addSpotToTopOfTable(newSpot, true);
+
+        // Ping if we need to
+        if ($("#pingOnNewSpots")[0].checked) {
+            new Audio("/audio/ping.mp3").play();
+        }
    };

    evtSource.onerror = function(err) {
--- a/webassets/js/spotsbandsandmap.js
+++ b/webassets/js/spotsbandsandmap.js
@@ -19,7 +19,7 @@ function addBandToggleColourCSS(band_options) {

 // Generate bands filter card. This one is a special case.
 function generateBandsMultiToggleFilterCard(band_options) {
-    var $grid = $('<div class="row row-cols-4 g-1 mb-1">');
+    var $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-1 mb-1">');
    band_options.forEach(o => {
        var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-band storeable-checkbox" id="filter-button-band-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked> <label class="form-check-label" id="filter-button-label-band-${domSafeName}" for="filter-button-band-${domSafeName}">${o['name']}</label></div></div>`);
@@ -40,20 +40,20 @@ function setHamHFBandToggles() {

 // Generate SIGs filter card. This one is also a special case.
 function generateSIGsMultiToggleFilterCard(sig_options) {
-    var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
+    var $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
    sig_options.forEach(o => {
        var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-${domSafeName}" for="filter-button-sig-${domSafeName}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label></div></div>`);
    });
    // Bonus "NO_SIG" / "General DX" option
-    $grid.append(`<div class="col-8"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label></div></div>`);
+    $grid.append(`<div class="w-100"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label></div></div>`);
    $("#sig-options").append($grid);
    $("#sig-options").append(`<div class="mt-1"><a href="#" onclick="toggleFilterButtons('sig', true); return false;">All</a> &nbsp; <a href="#" onclick="toggleFilterButtons('sig', false); return false;">None</a></div>`);
 }

 // Generate modes filter card. This one is also a special case.
 function generateModesMultiToggleFilterCard(mode_options) {
-    var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
+    var $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 g-1 mb-1">');
    mode_options.forEach(o => {
        var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
        $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-mode storeable-checkbox" id="filter-button-mode-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label></div></div>`);
@@ -84,7 +84,7 @@ function setDigiModeToggles() {
 // set which ones are enabled by default based on config rather than having them all enabled by default. We also sanitise
 // names here for HTML elements.
 function generateSourcesMultiToggleFilterCard(source_options, sources_enabled_by_default) {
-    var $grid = $('<div class="row row-cols-3 g-1 mb-1">');
+    var $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
    source_options.forEach(o => {
        var enable = sources_enabled_by_default.includes(o);
        var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
--- a/webassets/js/status.js
+++ b/webassets/js/status.js
@@ -13,7 +13,7 @@ function loadStatus() {
        $("#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());
+        $("#cleanup-last-ran").text(moment.unix(jsonData["cleanup"]["last_ran"]).utc().fromNow());

        jsonData["spot_providers"].forEach(p => {
            $("#spot-providers-status-container").append(`
Author	SHA1	Message	Date
Ian Renton	461ce94204	Cache-busting ?v= strings for CSS	2026-04-22 10:23:50 +01:00
Ian Renton	49949a0b2e	Fix display of the last time cleanup ran	2026-04-11 08:17:30 +01:00
Ian Renton	a3332aa023	Fix a parsing bug with NG3K	2026-04-11 08:14:52 +01:00
Ian Renton	ac1ab4bd2d	Ping on new spots option	2026-04-10 08:05:57 +01:00
Ian Renton	82944b9c38	Layout tweaks	2026-04-10 08:02:45 +01:00
Ian Renton	36dba30089	Ping on new spots option	2026-04-10 07:51:26 +01:00
Ian Renton	1ed175e099	Layout fix	2026-04-07 06:20:07 +01:00
Ian Renton	3870e560ec	Bring localstorage stuff in from jsutils, it's only used here	2026-04-06 19:11:47 +01:00
Ian Renton	236ac1a584	Wider bands/sigs/sources columns on mobile	2026-04-06 18:22:45 +01:00
Ian Renton	9243f98604	Style tweak	2026-04-06 16:37:45 +01:00
Ian Renton	8f062320d3	Re-add Dark Mapnik theme (via dodgy CSS hacks)	2026-04-06 16:16:19 +01:00