spothole/webassets/js/code.js

// How often to query the server?
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;
// Options-based lookups for band colours
band_colors = {}

// Load spots and populate the table.
function loadSpots() {
    $.getJSON('/api/spots', function(jsonData) {
        // Store last updated time
        lastUpdateTime = moment.utc();
        updateRefreshDisplay();
        // Store data
        spots = jsonData;
        // Update table
        updateTable();
    });
}

// Update the spots table
function updateTable() {
    // Populate table with headers
    let headers = Object.keys(spots[0]);
    let table = $('<table class="table table-striped table-hover">').append('<thead><tr class="table-primary"></tr></thead><tbody></tbody>');
    ["UTC", "DX", "Frequency", "Mode", "Comment", "Source", "Ref.", "DE"].forEach(header => table.find('thead tr').append(`<th>${header}</th>`));

    spots.forEach(s => {
        // Create row
        let $tr = $('<tr>');

        // Show in red if QRT
        if (s["qrt"] == true) {
          $tr.addClass("table-faded");
        }

        // Format a UTC time for display
        var time = moment.utc(s["time"], moment.ISO_8601);
        var time_formatted = time.format("HH:mm")

        // Format dx country
        var dx_country = s["dx_country"]
        if (dx_country == null) {
            dx_country = "Unknown or not a country"
        }

        // Format the frequency
        var mhz = Math.floor(s["freq"] / 1000000.0);
        var khz = Math.floor((s["freq"] - (mhz * 1000000.0)) / 1000.0);
        var hz = Math.floor(s["freq"] - (mhz * 1000000.0) - (khz * 1000.0));
        var hz_string = (hz > 0) ? hz.toFixed(0) : "";
        var freq_string = `<span class='freq-mhz'>${mhz.toFixed(0)}</span><span class='freq-khz'>${khz.toFixed(0).padStart(3, '0')}</span><span class='freq-hz'>${hz_string}</span>`

        // Format the mode
        mode_string = s["mode"];
        if (s["mode"] == null) {
            mode_string = "???"
        }
        if (s["mode_source"] == "BANDPLAN") {
            mode_string = mode_string + "<span class='mode-q'><i class='fa-solid fa-circle-question' title='The mode was not reported via the spotting service. This is a guess based on the frequency.'></i></span>"
        }

        // Band-based colour
        var band_dot_style = ""
        if (band_colors[s["band"]]) {
            band_dot_style = `color: ${band_colors[s["band"]]}; `
        }

        // Format sig_refs
        var sig_refs = ""
        if (s["sig_refs"]) {
            sig_refs = s["sig_refs"].join(", ")
        }

        // Format DE flag
        var de_flag = "<i class='fa-solid fa-circle-question'></i>";
        if (s["de_flag"] && s["de_flag"] != "") {
            de_flag = s["de_flag"];
        }

        // Format de country
        var de_country = s["de_country"]
        if (de_country == null) {
            de_country = "Unknown or not a country"
        }

        // Populate the row
        $tr.append(`<td>${time_formatted}</td>`);
        $tr.append(`<td><span class='flag-wrapper' title='${dx_country}'>${s["dx_flag"]}</span>${s["dx_call"]}</td>`);
        $tr.append(`<td><span class='band-dot' style='${band_dot_style}'>&#9632;</span>${freq_string}</td>`);
        $tr.append(`<td>${mode_string}</td>`);
        $tr.append('<td>' + escapeHtml(`${s["comment"]}`) + '</td>');
        $tr.append(`<td><span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> ${s["source"]}</td>`);
        $tr.append(`<td>${sig_refs}</td>`);
        $tr.append(`<td><span class='flag-wrapper' title='${de_country}'>${de_flag}</span>${s["de_call"]}</td>`);
        table.find('tbody').append($tr);
    });

    // Update DOM
    $('#table-container').html(table);
}

// Load server status
function loadStatus() {
    $.getJSON('/api/status', function(jsonData) {
        $("#status-container").append(generateStatusCard("Server Information", [
            `Software Version: ${jsonData["software-version"]}`,
            `Server Owner Callsign: ${jsonData["server-owner-callsign"]}`,
            `Server Uptime: ${jsonData["uptime"]}`,
            `Memory Use: ${jsonData["mem_use_mb"]} MB`,
            `Total Spots: ${jsonData["num_spots"]}`
        ]));
        $("#status-container").append(generateStatusCard("Web Server", [
            `Status: ${jsonData["webserver"]["status"]}`,
            `Last API Access: ${moment.utc(jsonData["webserver"]["last_api_access"], moment.ISO_8601).format("HH:mm")}`,
            `Last Page Access: ${moment.utc(jsonData["webserver"]["last_page_access"], moment.ISO_8601).format("HH:mm")}`
        ]));
        $("#status-container").append(generateStatusCard("Cleanup Service", [
            `Status: ${jsonData["cleanup"]["status"]}`,
            `Last Ran: ${moment.utc(jsonData["cleanup"]["last_ran"], moment.ISO_8601).format("HH:mm")}`
        ]));
        jsonData["providers"].forEach(p => {
            $("#status-container").append(generateStatusCard("Provider: " + p["name"], [
                `Status: ${p["status"]}`,
                `Last Updated: ${p["enabled"] ? moment.utc(p["last_updated"], moment.ISO_8601).format("HH:mm") : "N/A"}`,
                `Latest Spot: ${p["enabled"] ? moment.utc(p["last_spot"], moment.ISO_8601).format("HH:mm YYYY-MM-DD") : "N/A"}`
            ]));
        });
    });
}

// Generate a status card
function generateStatusCard(title, textLines) {
    let $col = $("<div class='col'>")
    let $card = $("<div class='card status-card'>");
    let $card_body = $("<div class='card-body'>");
    $card_body.append(`<h5 class='card-title'>${title}</h5>`);
    $card_body.append(`<p class='card-text'>${textLines.join("<br/>")}</p>`);
    $card.append($card_body);
    $col.append($card);
    return $col;
}

// Load server options. Once a successful callback is made from this, we then query spots and set up the timer to query
// spots repeatedly.
function loadOptions() {
    $.getJSON('/api/options', function(jsonData) {
        // Store options
        options = jsonData;

        // Separately store colour lookups for bands
        options["bands"].forEach(b => {
            band_colors[b["name"]] = b["color"];
        });

        // Add CSS for band toggle buttons
        addBandToggleButtonCSS(options["bands"]);

        // Populate the filters panel
        $("#filters-container").append(generateFilterCard("DX Continent", "dx_continent", options["continents"]));
        $("#filters-container").append(generateFilterCard("DE Continent", "de_continent", options["continents"]));
        $("#filters-container").append(generateFilterCard("Modes", "mode_type", options["mode_types"]));
        $("#filters-container").append(generateFilterCard("Sources", "source", options["sources"]));
        $("#filters-container").append(generateBandsFilterCard("Bands", "band", options["bands"]));

        // Load spots and set up the timer
        loadSpots();
        setInterval(loadSpots, REFRESH_INTERVAL_SEC * 1000)
    });
}

// Dynamically add CSS code for the band toggle buttons to be in the appropriate colour
function addBandToggleButtonCSS(band_options) {
    var $style = $('<style>');
    band_options.forEach(o => {
        $style.append(`#filter-button-label-band-${o['name']} { border-color: ${o['color']}; color: var(--bs-primary);}`);
        $style.append(`.btn-check:checked + #filter-button-label-band-${o['name']} { background-color: ${o['color']}; color: ${o['contrast_color']};}`);
    });
    $('html > head').append($style);
}

// Generate filter card
function generateFilterCard(displayName, filterQuery, options) {
    let $col = $("<div class='col-3'>")
    let $card = $("<div class='card status-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'>");
    options.forEach(o => {
        $p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery}" name="options" id="filter-button-${filterQuery}-${o}" value="${filterQuery}:${o}" autocomplete="off" checked><label class="btn btn-outline-primary" for="filter-button-${filterQuery}-${o}">${o}</label> `);
    });
    $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-12'>")
    let $card = $("<div class='card status-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'>");
    band_options.forEach(o => {
        $p.append(`<input type="checkbox" class="btn-check filter-button-${filterQuery}" name="options" id="filter-button-${filterQuery}-${o['name']}" value="${filterQuery}:${o['name']}" autocomplete="off" checked><label class="btn btn-outline" id="filter-button-label-${filterQuery}-${o['name']}" for="filter-button-${filterQuery}-${o['name']}">${o['name']}</label> `);
    });
    $card_body.append($p);
    $card.append($card_body);
    $col.append($card);
    return $col;
}

// 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;
            updatingString = "Updating in " + count.toFixed(0) + " seconds...";
        }
        $("#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);
}

// 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);

    // Event listeners
    $("#status-button").click(function() {
        // If we are going to display status, load the data for the status panel
        if (!$("#status-area").is(":visible")) {
            loadStatus();
        }
        $("#status-area").toggle();
    });
    $("#close-status-button").click(function() {
        $("#status-button").button("toggle");
        $("#status-area").hide();
    });
    $("#filters-button").click(function() {
         $("#filters-area").toggle();
        // If we have just dismissed the filters panel, reload spots
        if (!$("#filters-area").is(":visible")) {
            loadSpots()();
        }
    });
    $("#close-filters-button").click(function() {
        $("#filters-button").button("toggle");
        $("#filters-area").hide();
        // We have just dismissed the filters panel, reload spots
        loadSpots();
    });
});