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

Persist filters to local storage. Closes #22

Browse Source
This commit is contained in:
Ian Renton
2025-10-03 13:53:23 +01:00
parent 59f7aa8e99
commit afc383c3d9
1 changed files with 41 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
webassets/js/code.js
View File

@@ -185,6 +185,9 @@ function loadOptions() {
$("#filters-container-2").append(generateFilterCard("Modes", "mode_type", options["mode_types"]));
$("#filters-container-2").append(generateFilterCard("Sources", "source", options["sources"]));
// Load filter settings from settings storage
loadSettings();
// Load spots and set up the timer
loadSpots();
setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000)
@@ -213,7 +216,7 @@ function generateFilterCard(displayName, filterQuery, options) {
$card_body.append(`<h5 class='card-title'>${displayName}</h5>`);
$p = $("<p class='card-text filter-card-text'>");
options.forEach(o => {
$p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery}" name="options" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="loadSpots()" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
$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> `);
});
$card_body.append($p);
$card.append($card_body);
@@ -232,7 +235,7 @@ function generateBandsFilterCard(displayName, filterQuery, band_options) {
// CSS doesn't like IDs with decimal points in, so we need to replace that in the same way as when we originally
// queried the options endpoint and set our CSS.
var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
$p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery}" name="options" id="filter-button-${filterQuery}-${o['name']}" value="${o['name']}" autocomplete="off" onClick="loadSpots()" checked><label class="btn btn-outline" id="filter-button-label-${filterQuery}-${cssFormattedBandName}" for="filter-button-${filterQuery}-${o['name']}">${o['name']}</label> `);
$p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery} storeable-checkbox" name="options" id="filter-button-${filterQuery}-${o['name']}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-${filterQuery}-${cssFormattedBandName}" for="filter-button-${filterQuery}-${o['name']}">${o['name']}</label> `);
});
$card_body.append($p);
$card.append($card_body);
@@ -240,6 +243,12 @@ function generateBandsFilterCard(displayName, filterQuery, band_options) {
return $col;
}
// 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) {
@@ -275,14 +284,27 @@ function escapeHtml(str) {
return str.replace(/[&<>"'`]/g, escapeCharacter);
}
// Startup
$(document).ready(function() {
// Call loadOptions(), this will then trigger loading spots and setting up timers.
loadOptions();
// Update the refresh timing display every second
setInterval(updateRefreshDisplay, 1000);
// 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.
return $(".storeable-checkbox").each(function() {
localStorage.setItem($(this)[0].id + ":checked", $(this)[0].checked);
});
}
// Event listeners
// 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() {
// If we are going to display status, load the data for the status panel
if (!$("#status-area").is(":visible")) {
@@ -301,4 +323,14 @@ $(document).ready(function() {
$("#filters-button").button("toggle");
$("#filters-area").hide();
});
}
// Startup
$(document).ready(function() {
// Call loadOptions(), this will then trigger loading spots and setting up timers.
loadOptions();
// Update the refresh timing display every second
setInterval(updateRefreshDisplay, 1000);
// Set up event listeners
setUpEventListeners();
});