mirror of
https://git.ianrenton.com/ian/spothole.git
synced 2025-10-27 16:59:25 +00:00
37 lines
2.4 KiB
JavaScript
37 lines
2.4 KiB
JavaScript
// How often to query the server?
|
|
const REFRESH_INTERVAL_SEC = 60;
|
|
|
|
// Storage for the spot data that the server gives us.
|
|
var spots = []
|
|
|
|
// Dynamically add CSS code for the band toggle buttons to be in the appropriate colour.
|
|
// Some band names contain decimal points which are not allowed in CSS classes, so we text-replace them to "p".
|
|
function addBandToggleColourCSS(band_options) {
|
|
var $style = $('<style>');
|
|
band_options.forEach(o => {
|
|
// CSS doesn't like IDs with decimal points in, so we need to replace that
|
|
var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
|
|
$style.append(`#filter-button-label-band-${cssFormattedBandName} { border-color: ${o['color']}; color: var(--bs-primary);}`);
|
|
$style.append(`.btn-check:checked + #filter-button-label-band-${cssFormattedBandName} { background-color: ${o['color']}; color: ${o['contrast_color']};}`);
|
|
});
|
|
$('html > head').append($style);
|
|
}
|
|
|
|
// Generate bands filter card. This one is a special case.
|
|
function generateBandsMultiToggleFilterCard(band_options) {
|
|
// Create a button for each option
|
|
band_options.forEach(o => {
|
|
// 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";
|
|
$("#band-options").append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${cssFormattedBandName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-band-${cssFormattedBandName}" for="filter-button-band-${cssFormattedBandName}">${o['name']}</label> `);
|
|
});
|
|
// Create All/None buttons
|
|
$("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button></span>`);
|
|
}
|
|
|
|
// Method called when any filter is changed to reload the spots and persist the filter settings.
|
|
function filtersUpdated() {
|
|
loadSpots();
|
|
saveSettings();
|
|
} |