spothole/webassets/js/spotsbandsandmap.js

// 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: ${bandToColor(o['name'])}; color: var(--bs-primary);}`);
        $style.append(`.btn-check:checked + #filter-button-label-band-${cssFormattedBandName} { background-color: ${bandToColor(o['name'])}; color: ${bandToContrastColor(o['name'])};}`);
    });
    $('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/Ham HF 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> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="setHamHFBandToggles();">Ham HF</button></span>`);
}

// Set the band toggles so that only the amateur radio HF bands are selected. This includes 160m and 6m because that's
// widely expected by hams to be included. Special case of toggleFilterButtons().
function setHamHFBandToggles() {
    const hamHFBands = ["160m", "80m", "60m", "40m", "30m", "20m", "17m", "15m", "12m", "10m", "6m"];
    $(".filter-button-band").each(function() {
        $(this).prop('checked', hamHFBands.includes($(this).val().replace("filter-button-band-", "")));
    });
    filtersUpdated();
}

// Generate SIGs filter card. This one is also a special case.
function generateSIGsMultiToggleFilterCard(sig_options) {
    // Create a button for each option
    sig_options.forEach(o => {
        $("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-${o['name']}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" id="filter-button-label-sig-${o['name']}" for="filter-button-sig-${o['name']}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label> `);
    });
    // Create a bonus "NO_SIG" / "General DX" option
    $("#sig-options").append(`<input type="checkbox" class="btn-check filter-button-sig storeable-checkbox" name="options" id="filter-button-sig-NO_SIG" value="NO_SIG" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline-primary" id="filter-button-label-sig-NO_SIG" for="filter-button-sig-NO_SIG"><i class="fa-solid fa-tower-cell"></i> General DX</label> `);
    // Create All/None buttons
    $("#sig-options").append(` <span style="display: inline-block"><button id="filter-button-sig-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('sig', true);">All</button>&nbsp;<button id="filter-button-sig-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('sig', false);">None</button></span>`);
}

// Method called when any filter is changed to reload the spots and persist the filter settings.
function filtersUpdated() {
    loadSpots();
    saveSettings();
}

// Function to set dark mode based on the state of the UI toggle in spots, bands and map pages
function toggleDarkMode() {
    enableDarkMode($("#darkMode")[0].checked);
    saveSettings();
}

// Function to update the band colour scheme in spots, bands and map pages
function setBandColorSchemeFromUI() {
    setBandColorScheme($("#band-color-scheme option:selected").val());
    saveSettings();
    // Fudge a full reload because we need to update not just colours in the list/map/bands but also the filters
    window.location.reload();
}

// Reload spots on becoming visible. This forces a refresh when used as a PWA and the user switches back to the PWA
// after some time has passed with it in the background.
addEventListener("visibilitychange", (event) => {
    if (!document.hidden) {
        loadSpots();
    }
});