From 63429c16c30a4f563b57608772d22d873b3bcb1c Mon Sep 17 00:00:00 2001
From: Ian Renton <ian@ianrenton.com>
Date: Tue, 7 Oct 2025 20:11:29 +0100
Subject: [PATCH] Extract common JS code from spots and alerts JS #17

---
 views/webpage_alerts.tpl |   1 +
 views/webpage_base.tpl   |   2 +-
 views/webpage_spots.tpl  |   1 +
 webassets/js/alerts.js   | 119 --------------------------------------
 webassets/js/common.js   | 120 +++++++++++++++++++++++++++++++++++++++
 webassets/js/spots.js    | 118 --------------------------------------
 6 files changed, 123 insertions(+), 238 deletions(-)
 create mode 100644 webassets/js/common.js

diff --git a/views/webpage_alerts.tpl b/views/webpage_alerts.tpl
index 92901c4..2f24278 100644
--- a/views/webpage_alerts.tpl
+++ b/views/webpage_alerts.tpl
@@ -42,5 +42,6 @@
     </p>
 </div>
 
+<script src="/js/common.js"></script>
 <script src="/js/alerts.js"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
\ No newline at end of file
diff --git a/views/webpage_base.tpl b/views/webpage_base.tpl
index a3503a6..3788351 100644
--- a/views/webpage_base.tpl
+++ b/views/webpage_base.tpl
@@ -73,7 +73,7 @@
     </main>
 
     <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
-        <p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com">Ian, MØTRT</a> and other contributors.</p>
+        <p class="col-md-4 mb-0 text-body-secondary">Made with love by <a href="https://ianrenton.com" class="text-body-secondary">Ian, MØTRT</a> and other contributors.</p>
         <ul class="nav col-md-4 justify-content-end">
             <li class="nav-item">
                 <a href="/about#faq" class="nav-link px-2 text-body-secondary">FAQ</a>
diff --git a/views/webpage_spots.tpl b/views/webpage_spots.tpl
index c1f206d..cc9fe75 100644
--- a/views/webpage_spots.tpl
+++ b/views/webpage_spots.tpl
@@ -75,5 +75,6 @@
     </p>
 </div>
 
+<script src="/js/common.js"></script>
 <script src="/js/spots.js"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
\ No newline at end of file
diff --git a/webassets/js/alerts.js b/webassets/js/alerts.js
index 8534bd8..c4ad8fa 100644
--- a/webassets/js/alerts.js
+++ b/webassets/js/alerts.js
@@ -3,10 +3,6 @@ const REFRESH_INTERVAL_SEC = 60 * 30;
 
 // Storage for the alert data that the server gives us.
 var alerts = []
-// Storage for the options that the server gives us. This will define our filters.
-var options = {};
-// Last time we updated the alerts list on display.
-var lastUpdateTime;
 
 // Load alerts and populate the table.
 function loadAlerts() {
@@ -34,29 +30,6 @@ function buildQueryString() {
     return str;
 }
 
-// For a parameter, such as dx_continent, get the query string for the current filter options.
-function getQueryStringFor(parameter) {
-    return parameter + "=" + encodeURIComponent(getSelectedFilterOptions(parameter));
-}
-
-// For a parameter, such as dx_continent, get the filter options that are currently selected in the UI.
-function getSelectedFilterOptions(parameter) {
-    return $(".filter-button-" + parameter).filter(function() {
-        return this.checked;
-    }).map(function() {
-        return this.value;
-    }).get().join(",");
-}
-
-// For a parameter, such as dx_continent, return true if all possible options are enabled. (In this case, we don't need
-// to bother sending this as one of the query parameters to the API; no parameter provided implies "send everything".)
-function allFilterOptionsSelected(parameter) {
-    var filter = $(".filter-button-" + parameter).filter(function() {
-        return !this.checked;
-    }).get();
-    return filter.length == 0;
-}
-
 // Update the alerts table
 function updateTable() {
     // Populate table with headers
@@ -178,103 +151,11 @@ function loadOptions() {
     });
 }
 
-// Generate filter card
-function generateFilterCard(displayName, filterQuery, options) {
-    let $col = $("<div class='col'>")
-    let $card = $("<div class='card'>");
-    let $card_body = $("<div class='card-body'>");
-    $card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
-    $p = $("<p class='card-text filter-card-text'>");
-    // Create a button for each option
-    options.forEach(o => {
-        $p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
-    });
-    // Create All/None buttons
-    $p.append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
-    // Compile HTML elements to return
-    $card_body.append($p);
-    $card.append($card_body);
-    $col.append($card);
-    return $col;
-}
-
-// Method called when "All" or "None" is clicked
-function toggleFilterButtons(filterQuery, state) {
-    $(".filter-button-" + filterQuery).each(function() {
-        $(this).prop('checked', state);
-    });
-    filtersUpdated();
-}
-
 // Method called when any filter is changed to reload the alerts and persist the filter settings.
 function filtersUpdated() {
     loadAlerts();
     saveSettings();
 }
-
-// Update the refresh timing display
-function updateRefreshDisplay() {
-    if (lastUpdateTime != null) {
-        let count = REFRESH_INTERVAL_SEC;
-        let secSinceUpdate = moment.duration(moment().diff(lastUpdateTime)).asSeconds();
-        updatingString = "Updating..."
-        if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
-            count = REFRESH_INTERVAL_SEC - secSinceUpdate;
-            if (count <= 60) {
-                var number = count.toFixed(0);
-                updatingString = "Updating in " + number + " second" + (number != "1" ? "s" : "") + ".";
-            } else {
-                var number = Math.round(count / 60.0).toFixed(0);
-                updatingString = "Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".";
-            }
-        }
-        $("#timing-container").text("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);
-    }
-}
-
-// Utility function to escape HTML characters from a string.
-function escapeHtml(str) {
-    if (typeof str !== 'string') {
-        return '';
-    }
-
-    const escapeCharacter = (match) => {
-        switch (match) {
-            case '&': return '&amp;';
-            case '<': return '&lt;';
-            case '>': return '&gt;';
-            case '"': return '&quot;';
-            case '\'': return '&#039;';
-            case '`': return '&#096;';
-            default: return match;
-        }
-    };
-
-    return str.replace(/[&<>"'`]/g, escapeCharacter);
-}
-
-// Save settings to local storage
-function saveSettings() {
-    // 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", $(this)[0].checked);
-    });
-    $(".storeable-select").each(function() {
-        localStorage.setItem($(this)[0].id + ":value", $(this)[0].value);
-    });
-}
-
-// Load settings from local storage and set up the filter selectors
-function loadSettings() {
-    // Find all local storage entries and push their data to the corresponding UI element
-    Object.keys(localStorage).forEach(function(key) {
-        // 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)));
-    });
-}
-
 // Set up UI element event listeners, after the document is ready
 function setUpEventListeners() {
     $("#settings-button").click(function() {
diff --git a/webassets/js/common.js b/webassets/js/common.js
new file mode 100644
index 0000000..d24c645
--- /dev/null
+++ b/webassets/js/common.js
@@ -0,0 +1,120 @@
+// Storage for the options that the server gives us. This will define our filters.
+var options = {};
+// Last time we updated the spots/alerts list on display.
+var lastUpdateTime;
+
+
+// For a parameter, such as dx_continent, get the query string for the current filter options.
+function getQueryStringFor(parameter) {
+    return parameter + "=" + encodeURIComponent(getSelectedFilterOptions(parameter));
+}
+
+// For a parameter, such as dx_continent, get the filter options that are currently selected in the UI.
+function getSelectedFilterOptions(parameter) {
+    return $(".filter-button-" + parameter).filter(function() {
+        return this.checked;
+    }).map(function() {
+        return this.value;
+    }).get().join(",");
+}
+
+// For a parameter, such as dx_continent, return true if all possible options are enabled. (In this case, we don't need
+// to bother sending this as one of the query parameters to the API; no parameter provided implies "send everything".)
+function allFilterOptionsSelected(parameter) {
+    var filter = $(".filter-button-" + parameter).filter(function() {
+        return !this.checked;
+    }).get();
+    return filter.length == 0;
+}
+
+
+// Generate filter card
+function generateFilterCard(displayName, filterQuery, options) {
+    let $col = $("<div class='col'>")
+    let $card = $("<div class='card'>");
+    let $card_body = $("<div class='card-body'>");
+    $card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
+    $p = $("<p class='card-text filter-card-text'>");
+    // Create a button for each option
+    options.forEach(o => {
+        $p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
+    });
+    // Create All/None buttons
+    $p.append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
+    // Compile HTML elements to return
+    $card_body.append($p);
+    $card.append($card_body);
+    $col.append($card);
+    return $col;
+}
+
+// Method called when "All" or "None" is clicked
+function toggleFilterButtons(filterQuery, state) {
+    $(".filter-button-" + filterQuery).each(function() {
+        $(this).prop('checked', state);
+    });
+    filtersUpdated();
+}
+
+// Update the refresh timing display
+function updateRefreshDisplay() {
+    if (lastUpdateTime != null) {
+        let count = REFRESH_INTERVAL_SEC;
+        let secSinceUpdate = moment.duration(moment().diff(lastUpdateTime)).asSeconds();
+        updatingString = "Updating..."
+        if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
+            count = REFRESH_INTERVAL_SEC - secSinceUpdate;
+            if (count <= 60) {
+                var number = count.toFixed(0);
+                updatingString = "Updating in " + number + " second" + (number != "1" ? "s" : "") + ".";
+            } else {
+                var number = Math.round(count / 60.0).toFixed(0);
+                updatingString = "Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".";
+            }
+        }
+        $("#timing-container").text("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);
+    }
+}
+
+// Utility function to escape HTML characters from a string.
+function escapeHtml(str) {
+    if (typeof str !== 'string') {
+        return '';
+    }
+
+    const escapeCharacter = (match) => {
+        switch (match) {
+            case '&': return '&amp;';
+            case '<': return '&lt;';
+            case '>': return '&gt;';
+            case '"': return '&quot;';
+            case '\'': return '&#039;';
+            case '`': return '&#096;';
+            default: return match;
+        }
+    };
+
+    return str.replace(/[&<>"'`]/g, escapeCharacter);
+}
+
+// Save settings to local storage
+function saveSettings() {
+    // 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", $(this)[0].checked);
+    });
+    $(".storeable-select").each(function() {
+        localStorage.setItem($(this)[0].id + ":value", $(this)[0].value);
+    });
+}
+
+// Load settings from local storage and set up the filter selectors
+function loadSettings() {
+    // Find all local storage entries and push their data to the corresponding UI element
+    Object.keys(localStorage).forEach(function(key) {
+        // 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)));
+    });
+}
diff --git a/webassets/js/spots.js b/webassets/js/spots.js
index ac0b014..3c3274e 100644
--- a/webassets/js/spots.js
+++ b/webassets/js/spots.js
@@ -3,10 +3,6 @@ const REFRESH_INTERVAL_SEC = 60;
 
 // Storage for the spot data that the server gives us.
 var spots = []
-// Storage for the options that the server gives us. This will define our filters.
-var options = {};
-// Last time we updated the spots list on display.
-var lastUpdateTime;
 
 // Load spots and populate the table.
 function loadSpots() {
@@ -33,29 +29,6 @@ function buildQueryString() {
     return str;
 }
 
-// For a parameter, such as dx_continent, get the query string for the current filter options.
-function getQueryStringFor(parameter) {
-    return parameter + "=" + encodeURIComponent(getSelectedFilterOptions(parameter));
-}
-
-// For a parameter, such as dx_continent, get the filter options that are currently selected in the UI.
-function getSelectedFilterOptions(parameter) {
-    return $(".filter-button-" + parameter).filter(function() {
-        return this.checked;
-    }).map(function() {
-        return this.value;
-    }).get().join(",");
-}
-
-// For a parameter, such as dx_continent, return true if all possible options are enabled. (In this case, we don't need
-// to bother sending this as one of the query parameters to the API; no parameter provided implies "send everything".)
-function allFilterOptionsSelected(parameter) {
-    var filter = $(".filter-button-" + parameter).filter(function() {
-        return !this.checked;
-    }).get();
-    return filter.length == 0;
-}
-
 // Update the spots table
 function updateTable() {
     // Populate table with headers
@@ -249,26 +222,6 @@ function addBandColourCSS(band_options) {
     $('html > head').append($style);
 }
 
-// Generate filter card
-function generateFilterCard(displayName, filterQuery, options) {
-    let $col = $("<div class='col'>")
-    let $card = $("<div class='card'>");
-    let $card_body = $("<div class='card-body'>");
-    $card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
-    $p = $("<p class='card-text filter-card-text'>");
-    // Create a button for each option
-    options.forEach(o => {
-        $p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
-    });
-    // Create All/None buttons
-    $p.append(` <span style="display: inline-block"><button id="filter-button-${filterQuery}-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', true);">All</button>&nbsp;<button id="filter-button-${filterQuery}-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('${filterQuery}', false);">None</button></span>`);
-    // Compile HTML elements to return
-    $card_body.append($p);
-    $card.append($card_body);
-    $col.append($card);
-    return $col;
-}
-
 // Generate bands filter card. This one is a special case.
 function generateBandsFilterCard(displayName, filterQuery, band_options) {
     let $col = $("<div class='col'>")
@@ -292,83 +245,12 @@ function generateBandsFilterCard(displayName, filterQuery, band_options) {
     return $col;
 }
 
-// Method called when "All" or "None" is clicked
-function toggleFilterButtons(filterQuery, state) {
-    $(".filter-button-" + filterQuery).each(function() {
-        $(this).prop('checked', state);
-    });
-    filtersUpdated();
-}
-
 // Method called when any filter is changed to reload the spots and persist the filter settings.
 function filtersUpdated() {
     loadSpots();
     saveSettings();
 }
 
-// Update the refresh timing display
-function updateRefreshDisplay() {
-    if (lastUpdateTime != null) {
-        let count = REFRESH_INTERVAL_SEC;
-        let secSinceUpdate = moment.duration(moment().diff(lastUpdateTime)).asSeconds();
-        updatingString = "Updating..."
-        if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
-            count = REFRESH_INTERVAL_SEC - secSinceUpdate;
-            if (count <= 60) {
-                var number = count.toFixed(0);
-                updatingString = "Updating in " + number + " second" + (number != "1" ? "s" : "") + ".";
-            } else {
-                var number = Math.round(count / 60.0).toFixed(0);
-                updatingString = "Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".";
-            }
-        }
-        $("#timing-container").text("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);
-    }
-}
-
-// Utility function to escape HTML characters from a string.
-function escapeHtml(str) {
-    if (typeof str !== 'string') {
-        return '';
-    }
-
-    const escapeCharacter = (match) => {
-        switch (match) {
-            case '&': return '&amp;';
-            case '<': return '&lt;';
-            case '>': return '&gt;';
-            case '"': return '&quot;';
-            case '\'': return '&#039;';
-            case '`': return '&#096;';
-            default: return match;
-        }
-    };
-
-    return str.replace(/[&<>"'`]/g, escapeCharacter);
-}
-
-// Save settings to local storage
-function saveSettings() {
-    // 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", $(this)[0].checked);
-    });
-    $(".storeable-select").each(function() {
-        localStorage.setItem($(this)[0].id + ":value", $(this)[0].value);
-    });
-}
-
-// Load settings from local storage and set up the filter selectors
-function loadSettings() {
-    // Find all local storage entries and push their data to the corresponding UI element
-    Object.keys(localStorage).forEach(function(key) {
-        // 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)));
-    });
-}
-
 // Set up UI element event listeners, after the document is ready
 function setUpEventListeners() {
     $("#status-button").click(function() {