w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-10-27 08:49:27 +00:00
Code Issues 11 Packages Projects Releases Wiki Activity

Extract common JS code from spots and alerts JS #17

Browse Source
This commit is contained in:
Ian Renton
2025-10-07 20:11:29 +01:00
parent ff8cac274a
commit 63429c16c3
6 changed files with 123 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
webassets/js/spots.js
View File

@@ -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() {