Merge branch 'main' into 95-send-spots-to-xota

# Conflicts:
#	README.md
#	server/handlers/api/addspot.py
#	server/handlers/api/options.py
#	spotproviders/tiles.py
#	templates/about.html
#	templates/add_spot.html
#	templates/alerts.html
#	templates/api_only_home.html
#	templates/bands.html
#	templates/base.html
#	templates/conditions.html
#	templates/map.html
#	templates/spots.html
#	templates/status.html
#	webassets/css/style.css
#	webassets/js/add-spot.js
#	webassets/js/geo.js
#	webassets/js/ui-ham.js
#	webassets/js/utils.js

webassets/apidocs/openapi.yml

@@ -691,7 +691,7 @@ components:
       oneOf:
         - $ref: "#/components/schemas/SIGName"
         - type: string
-          enum: [NO_SIG]
+          enum: [ NO_SIG ]
       example: POTA
 
     Continent:
@@ -1510,7 +1510,7 @@ components:
             for DX). Null if foF2 or MUF data is not yet available.
           additionalProperties:
             type: string
-            enum: [Closed, Short, Long]
+            enum: [ Closed, Short, Long ]
           example:
             "160m": "Closed"
             "80m": "Short"

webassets/css/style.css

@@ -1,10 +1,11 @@
 /* NAVIGATION */
 
 .navbar-nav .nav-link.active {
-  font-weight: bold;
+    font-weight: bold;
 }
+
 .navbar-nav .nav-link i {
-  margin-right: 0.2em;
+    margin-right: 0.2em;
 }
 
 /* In embedded mode, hide header/footer/settings. "#header div" is kind of janky but for some reason if we hide the
@@ -26,9 +27,11 @@ whole of #header, the map vertical sizing breaks. */
     border-top: 1px solid grey;
     border-left: 1px solid grey;
 }
+
 [embedded-mode=true] #embeddedModeFooter {
     display: block;
 }
+
 #embeddedModeFooter img.logo {
     position: relative;
     top: -2px;
@@ -50,15 +53,15 @@ whole of #header, the map vertical sizing breaks. */
 /* GENERAL PAGE LAYOUT */
 
 div.container {
-   display:grid;
-   grid-template-rows:auto 1fr auto;
-   grid-template-columns:100%;
+    display: grid;
+    grid-template-rows:auto 1fr auto;
+    grid-template-columns:100%;
 
-   /* fallback height */
-   min-height:100vh;
+    /* fallback height */
+    min-height: 100vh;
 
-   /* new small viewport height for modern browsers */
-   min-height:100svh;
+    /* new small viewport height for modern browsers */
+    min-height: 100svh;
 }
 
 [embedded-mode=true] div.container {
@@ -69,15 +72,15 @@ div.container {
 
 /* ABOUT PAGE */
 
-#info-container{
+#info-container {
     width: 100%;
 }
 
 @media (min-width: 768px) {
-  #info-container{
-    max-width: 60em;
-    margin: 0 auto;
-  }
+    #info-container {
+        max-width: 60em;
+        margin: 0 auto;
+    }
 }
 
 
@@ -90,7 +93,7 @@ input#search {
 
 i#searchicon {
     position: absolute;
-    left: 0rem;
+    left: 0;
     top: 2px;
     padding: 10px;
     pointer-events: none;
@@ -161,6 +164,7 @@ a.dx-link {
     text-decoration: none;
     font-weight: bold;
 }
+
 a.sig-ref-link {
     color: var(--bs-emphasis-color);
     text-decoration: none;
@@ -171,21 +175,23 @@ tr.table-faded td {
     filter: grayscale(100%) opacity(30%) !important;
     text-decoration: line-through !important;
 }
+
 tr.table-faded td span {
     text-decoration: line-through !important;
 }
 
 /* New spot styles */
 tr.new td {
-  animation: 2s linear newspotanim;
+    animation: 2s linear newspotanim;
 }
+
 @keyframes newspotanim {
-  0% {
-    background-color: var(--bs-success-border-subtle);
-  }
-  100% {
-    background-color: initial;
-  }
+    0% {
+        background-color: var(--bs-success-border-subtle);
+    }
+    100% {
+        background-color: initial;
+    }
 }
 
 
@@ -196,7 +202,7 @@ tr.new td {
     overflow: hidden;
 }
 
-#table-container table{
+#table-container table {
     margin-bottom: 0;
 }
 
@@ -217,8 +223,9 @@ div#map {
 }
 
 .leaflet-container {
-    font-family: var(--bs-body-font-family) !important;
+    font-family: var(--bs-body-font-family) sans-serif !important;
 }
+
 .leaflet-control-attribution {
     background: none;
 }
@@ -343,6 +350,7 @@ div.band-spot:hover span.band-spot-info {
 .input-narrow {
     max-width: 8em;
 }
+
 .input-medium {
     max-width: 12em;
 }
@@ -360,22 +368,27 @@ div.band-spot:hover span.band-spot-info {
     .hideonmobile {
         display: none !important;
     }
+
     /* Make map stretch to horizontal screen edges */
     div#map, div#table-container, div#bands-container {
         margin-left: -1em;
         margin-right: -1em;
     }
+
     /* Avoid map page filters panel being larger than the map itself */
     #settingsButtonRowMap .appearing-panel {
         max-height: 30em;
     }
+
     #settingsButtonRowMap .appearing-panel .card-body {
         max-height: 26em;
         overflow: scroll;
     }
+
     input#search {
         max-width: 7em;
     }
+
     .table-fixed-on-desktop {
         table-layout: auto !important;
     }

webassets/js/add-spot.js

@@ -25,7 +25,7 @@ var PROVIDER_CREDENTIAL_SCHEMAS = {
 // Load server options. Once a successful callback is made from this, we can populate the choice boxes in the form and load
 // any saved values from local storage.
 function loadOptions() {
-    $.getJSON('/api/v1/options', function(jsonData) {
+    $.getJSON('/api/v1/options', function (jsonData) {
         // Store options
         options = jsonData;
 
@@ -33,7 +33,7 @@ function loadOptions() {
         $.each(options["modes"], function (i, m) {
             $('#mode').append($('<option>', {
                 value: m,
-                text : m
+                text: m
             }));
         });
 
@@ -41,7 +41,7 @@ function loadOptions() {
         $.each(options["sigs"], function (i, sig) {
             $('#sig').append($('<option>', {
                 value: sig.name,
-                text : sig.name
+                text: sig.name
             }));
         });
 
@@ -190,45 +190,45 @@ function addSpot() {
         saveSettings();
 
         // Unpack the user's entered values
-        var dx = $("#dx-call").val().toUpperCase();
-        var freqStr = $("#freq").val();
-        var mode = $("#mode")[0].value;
-        var sig = $("#sig")[0].value;
-        var sigRef = $("#sig-ref").val();
-        var dxGrid = $("#dx-grid").val();
-        var comment = $("#comment").val();
-        var de = $("#de-call").val().toUpperCase();
+        const dx = $("#dx-call").val().toUpperCase();
+        const freqStr = $("#freq").val();
+        const mode = $("#mode")[0].value;
+        const sig = $("#sig")[0].value;
+        const sigRef = $("#sig-ref").val();
+        const dxGrid = $("#dx-grid").val();
+        const comment = $("#comment").val();
+        const de = $("#de-call").val().toUpperCase();
 
-        var spot = {}
-        if (dx != "") {
+        const spot = {};
+        if (dx !== "") {
             spot["dx_call"] = dx;
         } else {
             // todo maybe for neatness just make all these error/rejections server side rather than having logic in two places
             showAddSpotError("A DX callsign is required in order to spot.");
             return;
         }
-        if (freqStr != "") {
+        if (freqStr !== "") {
             spot["freq"] = parseFloat(freqStr) * 1000;
         } else {
             showAddSpotError("A frequency is required in order to spot.");
             return;
         }
-        if (mode != "") {
+        if (mode !== "") {
             spot["mode"] = mode;
         }
-        if (sig != "") {
+        if (sig !== "") {
             spot["sig"] = sig;
         }
-        if (sigRef != "") {
+        if (sigRef !== "") {
             spot["sig_refs"] = [{id: sigRef}];
         }
-        if (dxGrid != "") {
+        if (dxGrid !== "") {
             spot["dx_grid"] = dxGrid;
         }
-        if (comment != "") {
+        if (comment !== "") {
             spot["comment"] = comment;
         }
-        if (de != "") {
+        if (de !== "") {
             spot["de_call"] = de;
         } else {
             showAddSpotError("A spotter callsign is required in order to spot.");
@@ -274,9 +274,9 @@ function addSpot() {
         }
 
         $.ajax("/api/v1/spot", {
-            data : JSON.stringify(spot),
-            contentType : 'application/json',
-            type : 'POST',
+            data: JSON.stringify(spot),
+            contentType: 'application/json',
+            type: 'POST',
             timeout: 10000,
             success: async function (result) {
                 // Reset CAPTCHA for next use
@@ -313,7 +313,7 @@ function addSpot() {
 
 // Show an "add spot" error.
 function showAddSpotError(text) {
-    var div = $("<div class='alert alert-danger alert-dismissible fade show mb-0 mt-4' role='alert'></div>");
+    const div = $("<div class='alert alert-danger alert-dismissible fade show mb-0 mt-4' role='alert'></div>");
     div.append("<i class='fa-solid fa-triangle-exclamation'></i> ");
     div.append(document.createTextNode(text));
     div.append("<button type='button' class='btn-close' data-bs-dismiss='alert' aria-label='Close'></button>");
@@ -342,7 +342,7 @@ $("#upstream-provider-select").change(function () {
 });
 
 // Startup
-$(document).ready(function() {
+$(document).ready(function () {
     // Load options
     loadOptions();
 });

webassets/js/alerts.js

@@ -2,11 +2,11 @@
 const REFRESH_INTERVAL_SEC = 60 * 10;
 
 // Storage for the alert data that the server gives us.
-var alerts = []
+let alerts = [];
 
 // Load alerts and populate the table.
 function loadAlerts() {
-    $.getJSON('/api/v1/alerts' + buildQueryString(false), function(jsonData) {
+    $.getJSON('/api/v1/alerts' + buildQueryString(false), function (jsonData) {
         // Store last updated time
         lastUpdateTime = moment.utc();
         updateRefreshDisplay();
@@ -19,15 +19,15 @@ function loadAlerts() {
 
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString(includeCredentials) {
-    var str =  "?";
+    let str = "?";
     ["dx_continent", "source"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
             str = str + getQueryStringFor(fn) + "&";
         }
     });
     str = str + "limit=" + $("#alerts-to-fetch option:selected").val();
-    var maxDur = $("#max-duration option:selected").val();
-    if (maxDur != "9999999999") {
+    const maxDur = $("#max-duration option:selected").val();
+    if (maxDur !== "9999999999") {
         str = str + "&max_duration=" + maxDur;
     }
     if ($("#dxpeditions_skip_max_duration_check")[0].checked) {
@@ -42,16 +42,16 @@ function buildQueryString(includeCredentials) {
 // Update the alerts table
 function updateTable() {
     // Use local time instead of UTC?
-    var useLocalTime = $("#timeZone")[0].value == "local";
+    const useLocalTime = $("#timeZone")[0].value === "local";
 
     // Table data toggles
-    var showStartTime = $("#tableShowStartTime")[0].checked;
-    var showEndTime = $("#tableShowEndTime")[0].checked;
-    var showDX = $("#tableShowDX")[0].checked;
-    var showFreqsModes = $("#tableShowFreqsModes")[0].checked;
-    var showComment = $("#tableShowComment")[0].checked;
-    var showSource = $("#tableShowSource")[0].checked;
-    var showRef = $("#tableShowRef")[0].checked;
+    const showStartTime = $("#tableShowStartTime")[0].checked;
+    const showEndTime = $("#tableShowEndTime")[0].checked;
+    const showDX = $("#tableShowDX")[0].checked;
+    const showFreqsModes = $("#tableShowFreqsModes")[0].checked;
+    const showComment = $("#tableShowComment")[0].checked;
+    const showSource = $("#tableShowSource")[0].checked;
+    const showRef = $("#tableShowRef")[0].checked;
 
     // Populate table with headers
     let table = $("#table");
@@ -83,10 +83,10 @@ function updateTable() {
     // Split alerts into three types, each of which will get its own table header: On now, next 24h, and later. "On now"
     // is considered to be events with an end_time where start<now<end, or events with no end time that started in the
     // last hour.
-    onNow = alerts.filter(a => (a["end_time"] != null && a["end_time"] != 0 && moment.unix(a["end_time"]).utc().isSameOrAfter() && moment.unix(a["start_time"]).utc().isBefore())
-        || ((a["end_time"] == null || a["end_time"] == 0) && moment.unix(a["start_time"]).utc().add(1, 'hours').isSameOrAfter() && moment.unix(a["start_time"]).utc().isBefore()));
-    next24h = alerts.filter(a => moment.unix(a["start_time"]).utc().isSameOrAfter() && moment.unix(a["start_time"]).utc().subtract(24, 'hours').isBefore());
-    later = alerts.filter(a => moment.unix(a["start_time"]).utc().subtract(24, 'hours').isSameOrAfter());
+    const onNow = alerts.filter(a => (a["end_time"] != null && a["end_time"] !== 0 && moment.unix(a["end_time"]).utc().isSameOrAfter() && moment.unix(a["start_time"]).utc().isBefore())
+        || ((a["end_time"] == null || a["end_time"] === 0) && moment.unix(a["start_time"]).utc().add(1, 'hours').isSameOrAfter() && moment.unix(a["start_time"]).utc().isBefore()));
+    const next24h = alerts.filter(a => moment.unix(a["start_time"]).utc().isSameOrAfter() && moment.unix(a["start_time"]).utc().subtract(24, 'hours').isBefore());
+    const later = alerts.filter(a => moment.unix(a["start_time"]).utc().subtract(24, 'hours').isSameOrAfter());
 
     if (onNow.length > 0) {
         table.find('tbody').append('<tr><td colspan="100" class="bg-primary-subtle" style="text-align:center;">On Now</td></tr>');
@@ -103,14 +103,14 @@ function updateTable() {
         addAlertRowsToTable(table.find('tbody'), later);
     }
 
-    if (onNow.length == 0 && next24h.length == 0 && later.length == 0) {
+    if (onNow.length === 0 && next24h.length === 0 && later.length === 0) {
         table.find('tbody').append('<tr class="bg-danger-subtle"><td colspan="100" style="text-align:center;">No alerts match your filters.</td></tr>');
     }
 }
 
 // Add a row to tbody for each alert in the provided list
 function addAlertRowsToTable(tbody, alerts) {
-    var count = 0;
+    let count = 0;
     alerts.forEach(a => {
         // Create row
         let $tr = $('<tr>');
@@ -118,29 +118,29 @@ function addAlertRowsToTable(tbody, alerts) {
         // Apply striping to the table. We can't just use Bootstrap's table-striped class because we have all sorts of
         // extra faff to deal with, like the mobile view having extra rows, and the On Now / Next 24h / Later banners
         // which cause the table-striped colouring to go awry.
-        if (count % 2 == 1) {
+        if (count % 2 === 1) {
             $tr.addClass("table-active");
         }
 
         // Use local time instead of UTC?
-        var useLocalTime = $("#timeZone")[0].value == "local";
+        const useLocalTime = $("#timeZone")[0].value === "local";
 
         // Table data toggles
-        var showStartTime = $("#tableShowStartTime")[0].checked;
-        var showEndTime = $("#tableShowEndTime")[0].checked;
-        var showDX = $("#tableShowDX")[0].checked;
-        var showFreqsModes = $("#tableShowFreqsModes")[0].checked;
-        var showComment = $("#tableShowComment")[0].checked;
-        var showSource = $("#tableShowSource")[0].checked;
-        var showRef = $("#tableShowRef")[0].checked;
+        const showStartTime = $("#tableShowStartTime")[0].checked;
+        const showEndTime = $("#tableShowEndTime")[0].checked;
+        const showDX = $("#tableShowDX")[0].checked;
+        const showFreqsModes = $("#tableShowFreqsModes")[0].checked;
+        const showComment = $("#tableShowComment")[0].checked;
+        const showSource = $("#tableShowSource")[0].checked;
+        const showRef = $("#tableShowRef")[0].checked;
 
         // Get times for the alert, and convert to local time if necessary.
-        var start_time_utc = moment.unix(a["start_time"]).utc();
-        var start_time_local = start_time_utc.clone().local();
-        start_time = useLocalTime ? start_time_local : start_time_utc;
-        var end_time_utc = moment.unix(a["end_time"]).utc();
-        var end_time_local = end_time_utc.clone().local();
-        end_time = useLocalTime ? end_time_local : end_time_utc;
+        const start_time_utc = moment.unix(a["start_time"]).utc();
+        const start_time_local = start_time_utc.clone().local();
+        const start_time = useLocalTime ? start_time_local : start_time_utc;
+        const end_time_utc = moment.unix(a["end_time"]).utc();
+        const end_time_local = end_time_utc.clone().local();
+        const end_time = useLocalTime ? end_time_local : end_time_utc;
 
         // Format the times for display. Start time is displayed as e.g. 7 Oct 12:34 unless the time is in a
         // different year to the current year, in which case the year is inserted between month and hour.
@@ -150,22 +150,22 @@ function addAlertRowsToTable(tbody, alerts) {
         // Overriding all of that, if the start time is 00:00 and the end time is 23:59 when considered in UTC, the
         // hours and minutes are stripped out from the display, as we assume the server is just giving us full days.
         // Finally, if there is no end date set, "---" is displayed.
-        var whole_days = start_time_utc.format("HH:mm") == "00:00" &&
-            (end_time_utc != null || end_time_utc > 0 || end_time_utc.format("HH:mm") == "23:59");
-        var hours_minutes_format = whole_days ? "" : " HH:mm";
-        var start_time_formatted = start_time.format("D MMM" + hours_minutes_format);
-        if (start_time.format("YYYY") != moment().format("YYYY")) {
+        const whole_days = start_time_utc.format("HH:mm") === "00:00" &&
+            (end_time_utc === 0 || end_time_utc.format("HH:mm") === "23:59");
+        const hours_minutes_format = whole_days ? "" : " HH:mm";
+        let start_time_formatted = start_time.format("D MMM" + hours_minutes_format);
+        if (start_time.format("YYYY") !== moment().format("YYYY")) {
             start_time_formatted = start_time.format("D MMM YYYY" + hours_minutes_format);
-        } else if (useLocalTime && start_time.format("D MMM YYYY") == moment().format("D MMM YYYY")) {
+        } else if (useLocalTime && start_time.format("D MMM YYYY") === moment().format("D MMM YYYY")) {
             start_time_formatted = start_time.format("[Today]" + hours_minutes_format);
         }
-        var end_time_formatted = "---";
-        if (end_time_utc != null && end_time_utc > 0 && end_time != null) {
-            var end_time_formatted = whole_days ? start_time_formatted : end_time.format("HH:mm");
-            if (end_time.format("D MMM") != start_time.format("D MMM")) {
-                if (end_time.format("YYYY") != moment().format("YYYY")) {
+        let end_time_formatted = "---";
+        if (end_time_utc > 0 && end_time != null) {
+            end_time_formatted = whole_days ? start_time_formatted : end_time.format("HH:mm");
+            if (end_time.format("D MMM") !== start_time.format("D MMM")) {
+                if (end_time.format("YYYY") !== moment().format("YYYY")) {
                     end_time_formatted = end_time.format("D MMM YYYY" + hours_minutes_format);
-                } else if (useLocalTime && end_time.format("D MMM YYYY") == moment().format("D MMM YYYY")) {
+                } else if (useLocalTime && end_time.format("D MMM YYYY") === moment().format("D MMM YYYY")) {
                     end_time_formatted = end_time.format("[Today]" + hours_minutes_format);
                 } else {
                     end_time_formatted = end_time.format("D MMM" + hours_minutes_format);
@@ -174,52 +174,52 @@ function addAlertRowsToTable(tbody, alerts) {
         }
 
         // Format dx country
-        var dx_country = a["dx_country"]
+        let dx_country = a["dx_country"];
         if (dx_country == null) {
             dx_country = "Unknown or not a country"
         }
 
         // Format DX flag
-        var dx_flag = "<i class='fa-solid fa-globe-africa'></i>";
-        if (a["dx_dxcc_id"] && a["dx_dxcc_id"] != null && a["dx_dxcc_id"] != 0) {
+        let dx_flag = "<i class='fa-solid fa-globe-africa'></i>";
+        if (a["dx_dxcc_id"] && a["dx_dxcc_id"] != null && a["dx_dxcc_id"] !== 0) {
             dx_flag = `<img src="img/flags/${a['dx_dxcc_id']}.png" class="flag" width="24" alt="${dx_country}" title="${dx_country}"/>`;
         }
 
         // Format dx calls
-        var dx_calls_html = "";
+        let dx_calls_html = "";
         if (a["dx_calls"] != null) {
             dx_calls_html = a["dx_calls"].map(call => `<a class='dx-link' href='https://qrz.com/db/${call}' target='_new'>${call}</a>`).join(", ");
         }
 
         // Format DXpedition country
-        var dx_country_html = "";
-        if (a["is_dxpedition"] == true && a["dx_country"] != null && a["dx_country"] != "") {
+        let dx_country_html = "";
+        if (a["is_dxpedition"] === true && a["dx_country"] != null && a["dx_country"] !== "") {
             dx_country_html = `<br/>${a["dx_country"]}`;
         }
 
         // Format freqs & modes
-        var freqsModesText = "";
+        let freqsModesText = "";
         if (a["freqs_modes"] != null) {
             freqsModesText = escapeHtml(a["freqs_modes"]);
         }
 
         // Format comment
-        var commentText = "";
+        let commentText = "";
         if (a["comment"] != null) {
             commentText = escapeHtml(a["comment"]);
         }
 
         // Sig or fallback to source
-        var sigSourceText = a["source"];
+        let sigSourceText = a["source"];
         if (a["sig"]) {
             sigSourceText = a["sig"];
         }
 
         // Format sig_refs
-        var sig_refs = "";
+        let sig_refs = "";
         if (a["sig_refs"] != null) {
-            var items = []
-            for (var i = 0; i < a["sig_refs"].length; i++) {
+            const items = [];
+            for (let i = 0; i < a["sig_refs"].length; i++) {
                 if (a["sig_refs"][i]["url"] != null) {
                     items[i] = `<a href='${encodeURI(a["sig_refs"][i]["url"])}' title='${escapeHtml(a["sig_refs"][i]["name"])}' target='_new' class='sig-ref-link'>${escapeHtml(a["sig_refs"][i]["id"])}</a>`
                 } else {
@@ -254,11 +254,11 @@ function addAlertRowsToTable(tbody, alerts) {
         tbody.append($tr);
 
         // Second row for mobile view only, containing source, ref, freqs/modes & comment
-        $tr2 = $("<tr class='hidenotonmobile'>");
-        if (count % 2 == 1) {
+        const $tr2 = $("<tr class='hidenotonmobile'>");
+        if (count % 2 === 1) {
             $tr2.addClass("table-active");
         }
-        $td2 = $("<td colspan='100'>");
+        const $td2 = $("<td colspan='100'>");
         if (showSource) {
             $td2.append(`<span class='icon-wrapper'><i class='fa-solid ${sigToIcon(a["sig"], "fa-globe-africa")}'></i></span> `);
         }
@@ -280,7 +280,7 @@ function addAlertRowsToTable(tbody, alerts) {
 
 // Load server options. Once a successful callback is made from this, we then query alerts.
 function loadOptions() {
-    $.getJSON('/api/v1/options', function(jsonData) {
+    $.getJSON('/api/v1/options', function (jsonData) {
         // Store options
         options = jsonData;
 
@@ -310,7 +310,7 @@ function filtersUpdated() {
 }
 
 // Startup
-$(document).ready(function() {
+$(document).ready(function () {
     // Call loadOptions(), this will then trigger loading alerts and setting up timers.
     loadOptions();
     // Update the refresh timing display every second
@@ -319,7 +319,7 @@ $(document).ready(function() {
 
 // Reload alerts 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) => {
+addEventListener("visibilitychange", () => {
     if (!document.hidden) {
         loadAlerts();
     }

webassets/js/bands.js

@@ -12,7 +12,7 @@ BAND_COLUMN_SPOT_DIV_HEIGHT_PX = BAND_COLUMN_FONT_SIZE * 1.6;
 
 // Load spots and populate the bands display.
 function loadSpots() {
-    $.getJSON('/api/v1/spots' + buildQueryString(false), function(jsonData) {
+    $.getJSON('/api/v1/spots' + buildQueryString(false), function (jsonData) {
         // Store last updated time
         lastUpdateTime = moment.utc();
         updateRefreshDisplay();
@@ -25,7 +25,7 @@ function loadSpots() {
 
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString(includeCredentials) {
-    var str =  "?";
+    let str = "?";
     ["dx_continent", "de_continent", "mode", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
             str = str + getQueryStringFor(fn) + "&";
@@ -43,7 +43,7 @@ function buildQueryString(includeCredentials) {
 // Update the bands display
 function updateBands() {
     // Stop here if nothing to display
-    var bandsContainer = $("#bands-container");
+    const bandsContainer = $("#bands-container");
     if (spots.length === 0) {
         bandsContainer.html("<div class='alert alert-danger' role='alert'>No spots match your filters.</div>");
         return;
@@ -52,7 +52,7 @@ function updateBands() {
     // Do some harsher de-duping. Because we only display callsign, frequency and mode here, the previous
     // de-duplication could have let some through that don't look like dupes on the map, but would do here.
     // Typically that's a person activating two programs at the same time, e.g. POTA & WWFF.
-    spotList = removeDuplicatesForBandPanel(spots);
+    const spotList = removeDuplicatesForBandPanel(spots);
 
     // Convert to a map of band names to the spots on that band. Bands with no
     // spots in view will not be present.
@@ -67,10 +67,10 @@ function updateBands() {
     });
 
     // Track if any columns end up taller than expected, so we can resize the container and avoid vertical scroll.
-    var maxHeightBand = 0;
+    let maxHeightBand = 0;
 
     // Build up table content for each band
-    var table = $('<table id="bands-table">').append('<thead><tr></tr></thead><tbody><tr></tr></tbody>');
+    const table = $('<table id="bands-table">').append('<thead><tr></tr></thead><tbody><tr></tr></tbody>');
     bandToSpots.forEach(function (spotList, bandName) {
         // Get the colours for the band from the first spot, and prepare the header
         table.find('thead tr').append(`<th style='background-color:${bandToColor(spotList[0].band)}; color:${bandToContrastColor(spotList[0].band)}'>${spotList[0].band}</th>`);
@@ -82,11 +82,11 @@ function updateBands() {
 
         // Print the frequency band markers. This is 41 steps to divide the band evenly into 40 markers. One in every
         // four will show the actual frequency, the others will just be dashes.
-        bandMarkersDiv = $('<div class="band-markers">');
+        const bandMarkersDiv = $('<div class="band-markers">');
         const freqStep = (band.end_freq - band.start_freq) / 40.0;
         for (let i = 0; i <= 40; i++) {
             if (i % 4 === 0) {
-                bandMarkersDiv.append("&mdash;" + ((band.start_freq + i * freqStep)/1000000).toFixed(3) + "<br/>");
+                bandMarkersDiv.append("&mdash;" + ((band.start_freq + i * freqStep) / 1000000).toFixed(3) + "<br/>");
             } else if (i % 4 === 2) {
                 bandMarkersDiv.append("&ndash;<br/>");
             } else {
@@ -95,10 +95,12 @@ function updateBands() {
         }
 
         // Prepare the spots list
-        var bandSpotsDiv = $("<div class='band-spots'>");
-        var lastSpotPxDownBand = -999;
+        const bandSpotsDiv = $("<div class='band-spots'>");
+        let lastSpotPxDownBand = -999;
         // Sort by frequency so have a consistent order in which to plan where they will appear on the band div.
-        spotList.sort(function(a, b) { return a.freq - b.freq; });
+        spotList.sort(function (a, b) {
+            return a.freq - b.freq;
+        });
         // First calculate how we should be displaying the spots. There are three "modes" to try to place them in a
         // visually appealing way:
         // 1) Spaced normally, not going over the end of the band, so we populate them forwards.
@@ -118,8 +120,8 @@ function updateBands() {
             // Mode 1 or 2. Run through adding things to the list forwards as a test.
             spotList.forEach(s => {
                 // Work out how far down the div to draw it
-                var percentDownBand = (s.freq - band.start_freq) / (band.end_freq - band.start_freq) * 0.97; // not 100% due to fudge, the first and last dashes are not exactly at the top and bottom of the div as some space is needed for text
-                var pxDownBand = percentDownBand * BAND_COLUMN_HEIGHT_PX;
+                const percentDownBand = (s.freq - band.start_freq) / (band.end_freq - band.start_freq) * 0.97; // not 100% due to fudge, the first and last dashes are not exactly at the top and bottom of the div as some space is needed for text
+                let pxDownBand = percentDownBand * BAND_COLUMN_HEIGHT_PX;
                 if (pxDownBand < lastSpotPxDownBand + BAND_COLUMN_SPOT_DIV_HEIGHT_PX) {
                     pxDownBand = lastSpotPxDownBand + BAND_COLUMN_SPOT_DIV_HEIGHT_PX; // Prevent overlap
                 }
@@ -135,8 +137,8 @@ function updateBands() {
                 lastSpotPxDownBand = 999999;
                 spotList.reverse().forEach(s => {
                     // Work out how far down the div to draw it
-                    var percentDownBand = (s.freq - band.start_freq) / (band.end_freq - band.start_freq) * 0.97; // not 100% due to fudge, the first and last dashes are not exactly at the top and bottom of the div as some space is needed for text
-                    var pxDownBand = percentDownBand * BAND_COLUMN_HEIGHT_PX;
+                    const percentDownBand = (s.freq - band.start_freq) / (band.end_freq - band.start_freq) * 0.97; // not 100% due to fudge, the first and last dashes are not exactly at the top and bottom of the div as some space is needed for text
+                    let pxDownBand = percentDownBand * BAND_COLUMN_HEIGHT_PX;
                     if (pxDownBand > lastSpotPxDownBand - BAND_COLUMN_SPOT_DIV_HEIGHT_PX) {
                         pxDownBand = lastSpotPxDownBand - BAND_COLUMN_SPOT_DIV_HEIGHT_PX; // Prevent overlap
                     }
@@ -149,25 +151,25 @@ function updateBands() {
         // Now each spot is tagged with how far down the div it should go, add them to the DOM.
         spotList.forEach(s => {
             let worked = alreadyWorked(s["dx_call"], s["band"], s["mode"]);
-            bandSpotsDiv.append(`<div class="band-spot" style="top: ${s['pxDownBandLabel']}px; border-top: 1px solid ${bandToColor(s['band'])}; border-left: 5px solid ${bandToColor(s['band'])}; border-bottom: 1px solid ${bandToColor(s['band'])}; border-right: 1px solid ${bandToColor(s['band'])}; text-decoration: ${worked ? 'line-through' : 'none'};"><span class="band-spot-call">${s.dx_call}${s.dx_ssid != null ? "-" + s.dx_ssid : ""}</span><span class="band-spot-info">${s.dx_call}${s.dx_ssid != null ? "-" + s.dx_ssid : ""} ${(s.freq/1000000).toFixed(3)} ${s.mode}</span></div>`);
+            bandSpotsDiv.append(`<div class="band-spot" style="top: ${s['pxDownBandLabel']}px; border-top: 1px solid ${bandToColor(s['band'])}; border-left: 5px solid ${bandToColor(s['band'])}; border-bottom: 1px solid ${bandToColor(s['band'])}; border-right: 1px solid ${bandToColor(s['band'])}; text-decoration: ${worked ? 'line-through' : 'none'};"><span class="band-spot-call">${s.dx_call}${s.dx_ssid != null ? "-" + s.dx_ssid : ""}</span><span class="band-spot-info">${s.dx_call}${s.dx_ssid != null ? "-" + s.dx_ssid : ""} ${(s.freq / 1000000).toFixed(3)} ${s.mode}</span></div>`);
         });
 
         // Work out how tall the canvas should be. Normally this is matching the normal band column height, but if some
         // spots have gone off the end of the band markers and stretched their div, we need to resize the canvas to
         // match, otherwise we have nowhere to draw their connecting lines.
-        var canvasHeight = Math.max(BAND_COLUMN_HEIGHT_PX, lastSpotPxDownBand + BAND_COLUMN_SPOT_DIV_HEIGHT_PX);
+        const canvasHeight = Math.max(BAND_COLUMN_HEIGHT_PX, lastSpotPxDownBand + BAND_COLUMN_SPOT_DIV_HEIGHT_PX);
         maxHeightBand = Math.max(maxHeightBand, canvasHeight);
 
         // Draw horizontal or diagonal lines to join up the "real" frequency with where the spot div ended up
-        var bandLinesCanvas = $(`<canvas class='band-lines-canvas' width='${BAND_COLUMN_CANVAS_WIDTH_PX}px' height='${canvasHeight}px' style='height:${canvasHeight}px !important;'>`);
+        const bandLinesCanvas = $(`<canvas class='band-lines-canvas' width='${BAND_COLUMN_CANVAS_WIDTH_PX}px' height='${canvasHeight}px' style='height:${canvasHeight}px !important;'>`);
         spotList.forEach(s => {
             // Work out how far down the div to draw it
-            var percentDownBand = (s.freq - band.start_freq) / (band.end_freq - band.start_freq) * 0.97; // not 100% due to fudge, the first and last dashes are not exactly at the top and bottom of the div as some space is needed for text
-            var pxDownBandFreq = (percentDownBand + 0.015) * BAND_COLUMN_HEIGHT_PX; // same fudge but add half to put the left end of the line in the right place
-            var pxDownBandLabel = s["pxDownBandLabel"] + (BAND_COLUMN_SPOT_DIV_HEIGHT_PX / 1.75); // line should be to the vertical text-centre spot, not to the top corner
+            const percentDownBand = (s.freq - band.start_freq) / (band.end_freq - band.start_freq) * 0.97; // not 100% due to fudge, the first and last dashes are not exactly at the top and bottom of the div as some space is needed for text
+            const pxDownBandFreq = (percentDownBand + 0.015) * BAND_COLUMN_HEIGHT_PX; // same fudge but add half to put the left end of the line in the right place
+            const pxDownBandLabel = s["pxDownBandLabel"] + (BAND_COLUMN_SPOT_DIV_HEIGHT_PX / 1.75); // line should be to the vertical text-centre spot, not to the top corner
 
             // Draw the line on the canvas
-            var ctx = bandLinesCanvas[0].getContext('2d');
+            const ctx = bandLinesCanvas[0].getContext('2d');
             ctx.beginPath();
             ctx.lineWidth = 2;
             ctx.lineCap = "round";
@@ -178,8 +180,8 @@ function updateBands() {
         });
 
         // Assemble the table cell
-        td = $("<td>");
-        container = $("<div class='band-container'>");
+        const td = $("<td>");
+        const container = $("<div class='band-container'>");
         container.append(bandLinesCanvas);
         container.append(bandMarkersDiv);
         container.append(bandSpotsDiv);
@@ -213,7 +215,6 @@ function removeDuplicatesForBandPanel(spotList) {
                 if (s.dx_call === check.dx_call && s.freq === check.freq && s.mode === check.mode) {
                     // Find which one to keep and which to delete
                     const checkSpotNewer = check.time > s.time;
-                    const keepSpot = checkSpotNewer ? check : s;
                     const deleteSpot = checkSpotNewer ? s : check;
                     // Aggregate list of spots to remove
                     spotsToRemove.push(deleteSpot.uid);
@@ -228,7 +229,7 @@ function removeDuplicatesForBandPanel(spotList) {
 // 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/v1/options', function(jsonData) {
+    $.getJSON('/api/v1/options', function (jsonData) {
         // Store options
         options = jsonData;
 
@@ -269,7 +270,7 @@ function displayUpdated() {
 }
 
 // Startup
-$(document).ready(function() {
+$(document).ready(function () {
     // Call loadOptions(), this will then trigger loading spots and setting up timers.
     loadOptions();
     // Update the refresh timing display every second

webassets/js/common.js

@@ -1,7 +1,7 @@
 // Storage for the options that the server gives us. This will define our filters.
-var options = {};
+let options = {};
 // Last time we updated the spots/alerts list on display.
-var lastUpdateTime;
+let lastUpdateTime;
 // Normally load user settings from local storage, unless embedded mode is in use
 let useLocalStorage = true;
 
@@ -21,8 +21,8 @@ function saveSettings() {
         });
         // Password fields are only saved if the corresponding "remember password" checkbox is ticked.
         $(".password-field").each(function () {
-            var pwKey = "#" + $(this)[0].id + ":value";
-            var rememberCheckboxId = $(this).data("remember-checkbox");
+            const pwKey = "#" + $(this)[0].id + ":value";
+            const rememberCheckboxId = $(this).data("remember-checkbox");
             if (rememberCheckboxId && $("#" + rememberCheckboxId)[0] && $("#" + rememberCheckboxId)[0].checked) {
                 localStorage.setItem(pwKey, JSON.stringify($(this)[0].value));
             } else {
@@ -39,7 +39,7 @@ function loadSettings() {
         Object.keys(localStorage).forEach(function (key) {
             if (key.startsWith("#") && key.includes(":")) {
                 // Split the key back into an element ID and a property
-                var split = key.split(":");
+                const split = key.split(":");
                 $(split[0]).prop(split[1], JSON.parse(localStorage.getItem(key)));
             }
         });
@@ -76,21 +76,13 @@ function loadURLParams() {
     updateFilterFromParam(params, "de_continent", "de_continent");
 }
 
-// Update an HTML checkbox element so that its selected matches the given parameter (which must have a true or false value)
-function updateCheckboxFromParam(params, paramName, checkboxID) {
-    let v = params.get(paramName);
-    if (v != null) {
-        $("#" + checkboxID).prop("checked", (v === "true") ? true : false);
-    }
-}
-
 // Update an HTML select element so that its value matches the given parameter
 function updateSelectFromParam(params, paramName, selectID) {
     let v = params.get(paramName);
     if (v != null) {
         $("#" + selectID).prop("value", v);
         // Extra check if this is the "color scheme" select
-        if (selectID == "color-scheme") {
+        if (selectID === "color-scheme") {
             setColorScheme(v);
         }
     }
@@ -128,16 +120,16 @@ function getSelectedFilterOptions(parameter) {
 // 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 () {
+    const filter = $(".filter-button-" + parameter).filter(function () {
         return !this.checked;
     }).get();
-    return filter.length == 0;
+    return filter.length === 0;
 }
 
 
 // Generate a filter card with inline checkboxes plus All/None links.
 function generateMultiToggleFilterCard(elementID, filterQuery, options) {
-    var $row = $('<div>');
+    const $row = $('<div>');
     options.forEach(o => {
         $row.append(`<div class="form-check form-check-inline"><input type="checkbox" class="form-check-input filter-button-${filterQuery} storeable-checkbox" id="filter-button-${filterQuery}-${o}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" for="filter-button-${filterQuery}-${o}">${o}</label></div>`);
     });
@@ -161,12 +153,13 @@ function updateRefreshDisplay() {
         let updatingString = "Updating..."
         if (secSinceUpdate < REFRESH_INTERVAL_SEC) {
             count = REFRESH_INTERVAL_SEC - secSinceUpdate;
+            let number;
             if (count <= 60) {
-                var number = count.toFixed(0);
-                updatingString = "<span class='nowrap'>Updating in " + number + " second" + (number != "1" ? "s" : "") + ".</span>";
+                number = count.toFixed(0);
+                updatingString = "<span class='nowrap'>Updating in " + number + " second" + (number !== "1" ? "s" : "") + ".</span>";
             } else {
-                var number = Math.round(count / 60.0).toFixed(0);
-                updatingString = "<span class='nowrap'>Updating in " + number + " minute" + (number != "1" ? "s" : "") + ".</span>";
+                number = Math.round(count / 60.0).toFixed(0);
+                updatingString = "<span class='nowrap'>Updating in " + number + " minute" + (number !== "1" ? "s" : "") + ".</span>";
             }
         }
         $("#timing-container").html("Last updated at " + lastUpdateTime.format('HH:mm') + " UTC. " + updatingString);
@@ -188,7 +181,7 @@ function columnsUpdated() {
 // Function to set the colour scheme based on the state of the UI select box
 function setColorSchemeFromUI() {
     let theme = $("#color-scheme option:selected").val();
-    if (theme != "") {
+    if (theme !== "") {
         setColorScheme(theme);
         saveSettings();
     }
@@ -196,8 +189,8 @@ function setColorSchemeFromUI() {
 
 // Function to set the color scheme. Supported values: "dark", "light", "auto"
 function setColorScheme(mode) {
-    let effectiveModeDark = mode == "dark";
-    if (mode == "auto") {
+    let effectiveModeDark = mode === "dark";
+    if (mode === "auto") {
         effectiveModeDark = window.matchMedia('(prefers-color-scheme: dark)').matches
     }
     $("html").attr("data-bs-theme", effectiveModeDark ? "dark" : "light");
@@ -283,16 +276,16 @@ function closeDataPanel() {
 // Build a query string fragment containing any QRZ.com / HamQTH credentials the user has supplied,
 // provided the corresponding "enabled" checkbox is ticked.
 function getCredentialQueryString() {
-    var str = "";
+    let str = "";
     if ($("#qrz-enabled")[0] && $("#qrz-enabled")[0].checked) {
-        var qrzUsername = $("#qrz-username").val();
-        var qrzPassword = $("#qrz-password").val();
+        const qrzUsername = $("#qrz-username").val();
+        const qrzPassword = $("#qrz-password").val();
         if (qrzUsername) str += "&qrz_username=" + encodeURIComponent(qrzUsername);
         if (qrzPassword) str += "&qrz_password=" + encodeURIComponent(qrzPassword);
     }
     if ($("#hamqth-enabled")[0] && $("#hamqth-enabled")[0].checked) {
-        var hamqthUsername = $("#hamqth-username").val();
-        var hamqthPassword = $("#hamqth-password").val();
+        const hamqthUsername = $("#hamqth-username").val();
+        const hamqthPassword = $("#hamqth-password").val();
         if (hamqthUsername) str += "&hamqth_username=" + encodeURIComponent(hamqthUsername);
         if (hamqthPassword) str += "&hamqth_password=" + encodeURIComponent(hamqthPassword);
     }

webassets/js/conditions.js

@@ -420,7 +420,10 @@ function renderIonosondeData() {
         $('#ionosonde-data-rows').hide();
         $('#ionosonde-band-state').hide();
         $('#ionosonde-chart').hide();
-        if (ionosondeChart) { ionosondeChart.destroy(); ionosondeChart = null; }
+        if (ionosondeChart) {
+            ionosondeChart.destroy();
+            ionosondeChart = null;
+        }
         return;
     }
     $('#ionosonde-no-data').hide();

webassets/js/geo.js

@@ -9,12 +9,14 @@ function calcBearing(lat1, lon1, lat2, lon2) {
     lon1 *= Math.PI / 180;
     lat2 *= Math.PI / 180;
     lon2 *= Math.PI / 180;
-    var lonDelta = lon2 - lon1;
-    var y = Math.sin(lonDelta) * Math.cos(lat2);
-    var x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lonDelta);
-    var bearing = Math.atan2(y, x);
+    const lonDelta = lon2 - lon1;
+    const y = Math.sin(lonDelta) * Math.cos(lat2);
+    const x = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lonDelta);
+    let bearing = Math.atan2(y, x);
     bearing = bearing * (180 / Math.PI);
-    if ( bearing < 0 ) { bearing += 360; }
+    if (bearing < 0) {
+        bearing += 360;
+    }
     return bearing;
 }
 
@@ -96,7 +98,7 @@ function latLonForGridSWCornerPlusSize(grid) {
     lat -= 90.0;
 
     // Return nulls on maths errors
-    if (isNaN(lat) || isNaN(lon) || isNaN(latCellSize) ||  isNaN(lonCellSize)) {
+    if (isNaN(lat) || isNaN(lon) || isNaN(latCellSize) || isNaN(lonCellSize)) {
         return [null, null, null, null];
     }
 

webassets/js/map.js

@@ -12,23 +12,23 @@ const ITU_ZONES_COLOR_DARK = 'rgba(120, 120, 60, 1.0)';
 const WAB_WAI_GRID_COLOR_DARK = 'rgba(60, 60, 120, 1.0)';
 
 // Map layers
-var backgroundTileLayer;
-var markersLayer;
-var geodesicsLayer;
-var oms;
-var terminator;
-var maidenheadGrid;
-var cqZones;
-var ituZones;
-var wabwaiGrid;
+let backgroundTileLayer;
+let markersLayer;
+let geodesicsLayer;
+let oms;
+let terminator;
+let maidenheadGrid;
+let cqZones;
+let ituZones;
+let wabwaiGrid;
 // Tracks the currently-loaded basemap provider string to avoid unnecessary tile reloads
-var loadedBasemap;
+let loadedBasemap;
 // Tracks whether this is the first display of markers after page load
-var firstLoad = true;
+let firstLoad = true;
 
 // Load spots and populate the map.
 function loadSpots() {
-    $.getJSON('/api/v1/spots' + buildQueryString(true), function(jsonData) {
+    $.getJSON('/api/v1/spots' + buildQueryString(true), function (jsonData) {
         // Store data
         spots = jsonData;
         // Update map
@@ -41,7 +41,7 @@ function loadSpots() {
 
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString(includeCredentials) {
-    var str =  "?";
+    let str = "?";
     ["dx_continent", "de_continent", "mode", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
             str = str + getQueryStringFor(fn) + "&";
@@ -65,7 +65,7 @@ function updateMap() {
 
     // Make new markers for all spots that match the filter
     spots.forEach(function (s) {
-        var m = L.marker([s["dx_latitude"], s["dx_longitude"]], {icon: getIcon(s)});
+        const m = L.marker([s["dx_latitude"], s["dx_longitude"]], {icon: getIcon(s)});
         m.bindPopup(getTooltipText(s));
         markersLayer.addLayer(m);
         oms.addMarker(m);
@@ -73,7 +73,7 @@ function updateMap() {
         // Create geodesics if required
         if ($("#mapShowGeodesics")[0].checked && s["de_latitude"] != null && s["de_longitude"] != null) {
             try {
-                var geodesic = L.geodesic([[s["de_latitude"], s["de_longitude"]], m.getLatLng()], {
+                const geodesic = L.geodesic([[s["de_latitude"], s["de_longitude"]], m.getLatLng()], {
                     color: bandToColor(s['band']),
                     wrap: false,
                     steps: 5
@@ -88,7 +88,7 @@ function updateMap() {
     // On first load, zoom to the extent of the markers
     if (firstLoad) {
         if (markersLayer.getLayers().length >= 2) {
-            var group = new L.featureGroup(markersLayer.getLayers());
+            const group = new L.featureGroup(markersLayer.getLayers());
             map.fitBounds(group.getBounds().pad(0.1));
         }
         firstLoad = false;
@@ -110,48 +110,50 @@ function getIcon(s) {
 // Tooltip text for the markers
 function getTooltipText(s) {
     // Format DX call
-    var dx_call = s["dx_call"];
+    let dx_call = s["dx_call"];
     if (dx_call == null) {
         dx_call = "";
-        dx_flag = "";
     }
     if (s["dx_ssid"] != null) {
         dx_call = dx_call + "-" + s["dx_ssid"];
     }
 
     // Format DX flag
-    var dx_flag = "<i class='fa-solid fa-globe-africa'></i>";
-    if (s["dx_flag"] && s["dx_flag"] != null && s["dx_flag"] != "") {
+    let dx_flag = "<i class='fa-solid fa-globe-africa'></i>";
+    if (dx_call == null) {
+        dx_flag = "";
+    }
+    if (s["dx_flag"] && s["dx_flag"] != null && s["dx_flag"] !== "") {
         dx_flag = s["dx_flag"];
     }
 
     // Format the frequency
-    var freq_string = "Unknown"
+    let freq_string = "Unknown";
     if (s["freq"] != null) {
-        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)[0] : "";
+        const mhz = Math.floor(s["freq"] / 1000000.0);
+        const khz = Math.floor((s["freq"] - (mhz * 1000000.0)) / 1000.0);
+        const hz = Math.floor(s["freq"] - (mhz * 1000000.0) - (khz * 1000.0));
+        const hz_string = (hz > 0) ? hz.toFixed(0)[0] : "";
         freq_string = `<span class='freq-mhz freq-mhz-pad'>${mhz.toFixed(0)}</span><span class='freq-khz'>${khz.toFixed(0).padStart(3, '0')}</span><span class='freq-hz hideonmobile'>${hz_string}</span>`
     }
 
     // Format comment
-    var commentText = "";
+    let commentText = "";
     if (s["comment"] != null) {
         commentText = escapeHtml(s["comment"]);
     }
 
     // Sig or fallback to source
-    var sigSourceText = s["source"];
+    let sigSourceText = s["source"];
     if (s["sig"]) {
         sigSourceText = s["sig"];
     }
 
     // Format sig_refs
-    var sig_refs = "";
+    let sig_refs = "";
     if (s["sig_refs"] != null) {
-        var items = []
-        for (var i = 0; i < s["sig_refs"].length; i++) {
+        const items = [];
+        for (let i = 0; i < s["sig_refs"].length; i++) {
             if (s["sig_refs"][i]["url"] != null) {
                 items[i] = `<a href='${s["sig_refs"][i]["url"]}' title='${s["sig_refs"][i]["name"]}' target='_new' class='sig-ref-link'>${s["sig_refs"][i]["id"]}</a>`
             } else {
@@ -162,7 +164,7 @@ function getTooltipText(s) {
     }
 
     // DX
-    ttt = `<span class='nowrap'><span class='icon-wrapper'>${dx_flag}</span> <a href='https://www.qrz.com/db/${dx_call}' target='_blank' class="dx-link">${dx_call}</a></span><br/>`;
+    let ttt = `<span class='nowrap'><span class='icon-wrapper'>${dx_flag}</span> <a href='https://www.qrz.com/db/${dx_call}' target='_blank' class="dx-link">${dx_call}</a></span><br/>`;
 
     // Frequency & band
     ttt += `<span class='icon-wrapper'><i class='fa-solid fa-radio markerPopupIcon'></i></span>&nbsp;${freq_string}`;
@@ -192,7 +194,7 @@ function getTooltipText(s) {
 // 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/v1/options', function(jsonData) {
+    $.getJSON('/api/v1/options', function (jsonData) {
         // Store options
         options = jsonData;
 
@@ -273,7 +275,7 @@ function setBasemap(basemapname) {
         backgroundTileLayer.addTo(map);
         backgroundTileLayer.bringToBack();
         if (basemapname === "OpenStreetMap.Mapnik.Dark") {
-            var container = backgroundTileLayer.getContainer();
+            const container = backgroundTileLayer.getContainer();
             if (container) {
                 container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
             }
@@ -409,7 +411,7 @@ function setUpMap() {
     backgroundTileLayer.addTo(map);
     backgroundTileLayer.bringToBack();
     if (loadedBasemap === "OpenStreetMap.Mapnik.Dark") {
-        var container = backgroundTileLayer.getContainer();
+        const container = backgroundTileLayer.getContainer();
         if (container) {
             container.style.filter = 'invert(100%) hue-rotate(180deg) brightness(80%)';
         }
@@ -421,7 +423,7 @@ function setUpMap() {
 
     // Set up spiderfy for overlapping markers
     oms = new OverlappingMarkerSpiderfier(map, {keepSpiderfied: true});
-    oms.addListener('click', function(marker) {
+    oms.addListener('click', function (marker) {
         marker.openPopup();
     });
 
@@ -440,7 +442,7 @@ function setUpMap() {
 
     // Add Maidenhead grid (toggleable)
     maidenheadGrid = L.maidenhead({
-        color : MAIDENHEAD_GRID_COLOR_LIGHT
+        color: MAIDENHEAD_GRID_COLOR_LIGHT
     });
     if ($("#showMaidenheadGrid")[0].checked) {
         maidenheadGrid.addTo(map);
@@ -449,7 +451,7 @@ function setUpMap() {
 
     // Add CQ zone layer (toggleable)
     cqZones = L.cqzones({
-        color : CQ_ZONES_COLOR_LIGHT
+        color: CQ_ZONES_COLOR_LIGHT
     });
     if ($("#showCQZones")[0].checked) {
         cqZones.addTo(map);
@@ -458,7 +460,7 @@ function setUpMap() {
 
     // Add ITU zone layer (toggleable)
     ituZones = L.ituzones({
-        color : ITU_ZONES_COLOR_LIGHT
+        color: ITU_ZONES_COLOR_LIGHT
     });
     if ($("#showITUZones")[0].checked) {
         ituZones.addTo(map);
@@ -467,7 +469,7 @@ function setUpMap() {
 
     // Add WAB/WAI grid layer (toggleable)
     wabwaiGrid = L.workedAllBritainIreland({
-        color : WAB_WAI_GRID_COLOR_LIGHT
+        color: WAB_WAI_GRID_COLOR_LIGHT
     });
     if ($("#showWABWAIGrid")[0].checked) {
         wabwaiGrid.addTo(map);
@@ -480,7 +482,7 @@ function setUpMap() {
 }
 
 // Startup
-$(document).ready(function() {
+$(document).ready(function () {
     // Hide the extra things that need to be hidden on this page
     $(".hideonmap").hide();
     // Set up map

webassets/js/spots.js

@@ -6,7 +6,7 @@ let rowCount = 0;
 
 // Set up a listener to close the SSE connection nicely when we navigate away from the page, to prevent console errors
 // and keep things nice and tidy for the server.
-window.addEventListener('beforeunload', function() {
+window.addEventListener('beforeunload', function () {
     if (evtSource != null) {
         evtSource.close();
     }
@@ -20,7 +20,7 @@ function loadSpots() {
     }
 
     // Make the new query
-    $.getJSON('/api/v1/spots' + buildQueryString(false), function(jsonData) {
+    $.getJSON('/api/v1/spots' + buildQueryString(false), function (jsonData) {
         // Store data
         spots = jsonData;
         // Update table
@@ -41,9 +41,9 @@ function startSSEConnection() {
     }
     evtSource = new EventSource('/api/v1/spots/stream' + buildQueryString(true));
 
-    evtSource.onmessage = function(event) {
+    evtSource.onmessage = function (event) {
         // Get the new spot
-        newSpot = JSON.parse(event.data);
+        const newSpot = JSON.parse(event.data);
         // Awful fudge to ensure new incoming spots at the top of the list don't have timestamps that make them look
         // like they belong further down the list. If the spot is older than the latest one we already have, bump its
         // time up to match it. This isn't great but since we poll spot providers every 2 minutes anyway, it shouldn't
@@ -63,7 +63,7 @@ function startSSEConnection() {
         }
         // If we had zero spots before (i.e. one now), the table will have a "No spots" row that we need to remove now
         // that we have one.
-        if (spots.length == 1) {
+        if (spots.length === 1) {
             $("#table tbody tr").last().remove();
         }
 
@@ -76,7 +76,7 @@ function startSSEConnection() {
         }
     };
 
-    evtSource.onerror = function(err) {
+    evtSource.onerror = function () {
         if (evtSource != null) {
             evtSource.close();
         }
@@ -87,14 +87,14 @@ function startSSEConnection() {
 
 // Build a query string for the API, based on the filters that the user has selected.
 function buildQueryString(includeCredentials) {
-    var str =  "?";
+    let str = "?";
     ["dx_continent", "de_continent", "mode", "source", "band", "sig"].forEach(fn => {
         if (!allFilterOptionsSelected(fn)) {
             str = str + getQueryStringFor(fn) + "&";
         }
     });
     str = str + "limit=" + $("#spots-to-fetch option:selected").val();
-    if ($("#search").val() != "") {
+    if ($("#search").val() !== "") {
         str = str + "&text_includes=" + encodeURIComponent($("#search").val());
     }
     if (includeCredentials) {
@@ -106,22 +106,22 @@ function buildQueryString(includeCredentials) {
 // Update the spots table
 function updateTable() {
     // Use local time instead of UTC?
-    var useLocalTime = $("#timeZone")[0].value == "local";
+    const useLocalTime = $("#timeZone")[0].value === "local";
 
     // Get user grid if valid, this will be null if it's not.
-    var userPos = latLonForGridCentre($("#userGrid").val());
+    const userPos = latLonForGridCentre($("#userGrid").val());
 
     // Table data toggles
-    var showTime = $("#tableShowTime")[0].checked;
-    var showDX = $("#tableShowDX")[0].checked;
-    var showFreq = $("#tableShowFreq")[0].checked;
-    var showMode = $("#tableShowMode")[0].checked;
-    var showComment = $("#tableShowComment")[0].checked;
-    var showBearing = $("#tableShowBearing")[0].checked && userPos != null;
-    var showType = $("#tableShowType")[0].checked;
-    var showRef = $("#tableShowRef")[0].checked;
-    var showDE = $("#tableShowDE")[0].checked;
-    var showWorkedCheckbox = $("#tableShowWorkedCheckbox")[0].checked;
+    const showTime = $("#tableShowTime")[0].checked;
+    const showDX = $("#tableShowDX")[0].checked;
+    const showFreq = $("#tableShowFreq")[0].checked;
+    const showMode = $("#tableShowMode")[0].checked;
+    const showComment = $("#tableShowComment")[0].checked;
+    const showBearing = $("#tableShowBearing")[0].checked && userPos != null;
+    const showType = $("#tableShowType")[0].checked;
+    const showRef = $("#tableShowRef")[0].checked;
+    const showDE = $("#tableShowDE")[0].checked;
+    const showWorkedCheckbox = $("#tableShowWorkedCheckbox")[0].checked;
 
     // Populate table with headers
     let table = $("#table");
@@ -158,7 +158,7 @@ function updateTable() {
     }
 
     table.find('tbody').empty();
-    if (spots.length == 0) {
+    if (spots.length === 0) {
         table.find('tbody').append('<tr class="bg-danger-subtle"><td colspan="100" style="text-align:center;">No spots match your filters.</td></tr>');
     }
 
@@ -182,22 +182,22 @@ function addSpotToTopOfTable(s, highlightNew) {
 // highlightNew = false for an initial load, true for new SSE-loaded spots
 function createNewTableRowsForSpot(s, highlightNew) {
     // Use local time instead of UTC?
-    var useLocalTime = $("#timeZone")[0].value == "local";
+    const useLocalTime = $("#timeZone")[0].value === "local";
 
     // Get user grid if valid, this will be null if it's not.
-    var userPos = latLonForGridCentre($("#userGrid").val());
+    const userPos = latLonForGridCentre($("#userGrid").val());
 
     // Table data toggles
-    var showTime = $("#tableShowTime")[0].checked;
-    var showDX = $("#tableShowDX")[0].checked;
-    var showFreq = $("#tableShowFreq")[0].checked;
-    var showMode = $("#tableShowMode")[0].checked;
-    var showComment = $("#tableShowComment")[0].checked;
-    var showBearing = $("#tableShowBearing")[0].checked && userPos != null;
-    var showType = $("#tableShowType")[0].checked;
-    var showRef = $("#tableShowRef")[0].checked;
-    var showDE = $("#tableShowDE")[0].checked;
-    var showWorkedCheckbox = $("#tableShowWorkedCheckbox")[0].checked;
+    const showTime = $("#tableShowTime")[0].checked;
+    const showDX = $("#tableShowDX")[0].checked;
+    const showFreq = $("#tableShowFreq")[0].checked;
+    const showMode = $("#tableShowMode")[0].checked;
+    const showComment = $("#tableShowComment")[0].checked;
+    const showBearing = $("#tableShowBearing")[0].checked && userPos != null;
+    const showType = $("#tableShowType")[0].checked;
+    const showRef = $("#tableShowRef")[0].checked;
+    const showDE = $("#tableShowDE")[0].checked;
+    const showWorkedCheckbox = $("#tableShowWorkedCheckbox")[0].checked;
 
     // Create row
     let $tr = $('<tr>');
@@ -205,13 +205,13 @@ function createNewTableRowsForSpot(s, highlightNew) {
     // Apply striping to the table. We can't just use Bootstrap's table-striped class because we have all sorts of
     // extra faff to deal with, like the mobile view having extra rows, and the On Now / Next 24h / Later banners
     // which cause the table-striped colouring to go awry.
-    if (rowCount % 2 == 1) {
+    if (rowCount % 2 === 1) {
         $tr.addClass("table-active");
     }
 
     // Show faded out if QRT or already worked
     let alreadyWorkedThis = alreadyWorked(s["dx_call"], s["band"], s["mode"]);
-    if (s["qrt"] == true || alreadyWorkedThis) {
+    if (s["qrt"] === true || alreadyWorkedThis) {
         $tr.addClass("table-faded");
     }
 
@@ -222,65 +222,67 @@ function createNewTableRowsForSpot(s, highlightNew) {
     }
 
     // Format a UTC or local time for display
-    var time = moment.unix(s["time"]).utc();
+    const time = moment.unix(s["time"]).utc();
     if (useLocalTime) {
         time.local();
     }
-    var time_formatted = time.format("HH:mm");
+    const time_formatted = time.format("HH:mm");
 
     // Format DX call
-    var dx_call = s["dx_call"];
+    let dx_call = s["dx_call"];
     if (dx_call == null) {
         dx_call = "";
-        dx_flag = "";
     }
     if (s["dx_ssid"] != null) {
         dx_call = dx_call + "-" + s["dx_ssid"];
     }
 
     // Format dx country
-    var dx_country = s["dx_country"];
+    let dx_country = s["dx_country"];
     if (dx_country == null) {
         dx_country = "Unknown or not a country";
     }
 
     // Format DX flag
-    var dx_flag = "<i class='fa-solid fa-globe-africa'></i>";
-    if (s["dx_dxcc_id"] && s["dx_dxcc_id"] != null && s["dx_dxcc_id"] != 0) {
+    let dx_flag = "<i class='fa-solid fa-globe-africa'></i>";
+    if (dx_call == null) {
+        dx_flag = "";
+    }
+    if (s["dx_dxcc_id"] && s["dx_dxcc_id"] != null && s["dx_dxcc_id"] !== 0) {
         dx_flag = `<img src="img/flags/${s['dx_dxcc_id']}.png" class="flag" width="24" alt="${dx_country}" title="${dx_country}"/>`;
     }
 
     // Format the frequency
-    var freq_string = "Unknown"
+    let freq_string = "Unknown";
     if (s["freq"] != null) {
-        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)[0] : "";
+        const mhz = Math.floor(s["freq"] / 1000000.0);
+        const khz = Math.floor((s["freq"] - (mhz * 1000000.0)) / 1000.0);
+        const hz = Math.floor(s["freq"] - (mhz * 1000000.0) - (khz * 1000.0));
+        const hz_string = (hz > 0) ? hz.toFixed(0)[0] : "";
         freq_string = `<span class='freq-mhz freq-mhz-pad'>${mhz.toFixed(0)}</span><span class='freq-khz'>${khz.toFixed(0).padStart(3, '0')}</span><span class='freq-hz hideonmobile'>${hz_string}</span>`
     }
 
     // Format the mode
-    mode_string = s["mode"];
+    let mode_string = s["mode"];
     if (s["mode"] == null) {
         mode_string = "";
-    } else if (s["mode_source"] == "BANDPLAN") {
+    } else if (s["mode_source"] === "BANDPLAN") {
         mode_string = mode_string + "<span class='mode-q hideonmobile'><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>";
     }
 
     // Format comment
-    var commentText = "";
+    let commentText = "";
     if (s["comment"] != null) {
         commentText = escapeHtml(s["comment"]);
     }
 
     // Format bearing text
-    var bearingText = "---<span class='bearing-q hideonmobile'><i class='fa-solid fa-circle-question' title='The position was not reported via the spotting service, and we could not determine one. A bearing to this DX is not available.'></i></span>";
+    let bearingText = "---<span class='bearing-q hideonmobile'><i class='fa-solid fa-circle-question' title='The position was not reported via the spotting service, and we could not determine one. A bearing to this DX is not available.'></i></span>";
     if (userPos != null && s["dx_latitude"] != null && s["dx_longitude"] != null) {
-        var bearing = calcBearing(userPos[0], userPos[1], s["dx_latitude"], s["dx_longitude"]);
+        const bearing = calcBearing(userPos[0], userPos[1], s["dx_latitude"], s["dx_longitude"]);
         bearingText = bearing.toFixed(0).padStart(3, '0') + "°";
-        if (s["dx_location_good"] == null || s["dx_location_good"] == false) {
-            if (s["dx_location_source"] == "HOME QTH") {
+        if (s["dx_location_good"] == null || s["dx_location_good"] === false) {
+            if (s["dx_location_source"] === "HOME QTH") {
                 bearingText = bearingText + "<span class='bearing-q hideonmobile'><i class='fa-solid fa-circle-question' title='The position was not reported via the spotting service. We had to fall back to a QRZ \"home\" location for a portable/mobile/alternative spot, so this bearing may not be accurate if the DX is close to you..'></i></span>";
             } else {
                 bearingText = bearingText + "<span class='bearing-q hideonmobile'><i class='fa-solid fa-circle-question' title='The position was not reported via the spotting service. We had to fall back to just using the centre of a DXCC entity, so this bearing may not be accurate if the DX is close to you.'></i></span>";
@@ -289,16 +291,16 @@ function createNewTableRowsForSpot(s, highlightNew) {
     }
 
     // Format "type" (Sig or fallback to source)
-    var typeText = s["source"];
+    let typeText = s["source"];
     if (s["sig"]) {
         typeText = s["sig"];
     }
 
     // Format sig_refs
-    var sig_refs = "";
+    let sig_refs = "";
     if (s["sig_refs"] != null) {
-        var items = []
-        for (var i = 0; i < s["sig_refs"].length; i++) {
+        const items = [];
+        for (let i = 0; i < s["sig_refs"].length; i++) {
             if (s["sig_refs"][i]["url"] != null) {
                 items[i] = `<span style="white-space: nowrap;"><a href='${encodeURI(s["sig_refs"][i]["url"])}' title='${escapeHtml(s["sig_refs"][i]["name"])}' target='_new' class='sig-ref-link'>${escapeHtml(s["sig_refs"][i]["id"])}</a></span>`
             } else {
@@ -309,19 +311,19 @@ function createNewTableRowsForSpot(s, highlightNew) {
     }
 
     // Format de country
-    var de_country = s["de_country"];
+    let de_country = s["de_country"];
     if (de_country == null) {
         de_country = "Unknown or not a country";
     }
 
     // Format DE flag
-    var de_flag = "<i class='fa-solid fa-circle-question'></i>";
-    if (s["de_dxcc_id"] && s["de_dxcc_id"] != null && s["de_dxcc_id"] != 0) {
+    let de_flag = "<i class='fa-solid fa-circle-question'></i>";
+    if (s["de_dxcc_id"] && s["de_dxcc_id"] != null && s["de_dxcc_id"] !== 0) {
         de_flag = `<img src="img/flags/${s['de_dxcc_id']}.png" class="flag" width="24" alt="${de_country}" title="${de_country}"/>`;
     }
 
     // Format de call
-    var de_call = s["de_call"];
+    let de_call = s["de_call"];
     if (de_call == null) {
         de_call = "";
         de_flag = "";
@@ -331,10 +333,10 @@ function createNewTableRowsForSpot(s, highlightNew) {
     }
 
     // Format band name
-    var bandFullName = s['band'] ? s['band'] + " band": "Unknown band";
+    const bandFullName = s['band'] ? s['band'] + " band" : "Unknown band";
 
     // Format "worked" checkbox
-    var workedCheckbox = `<input type="checkbox" ${alreadyWorkedThis ? "checked" : ""} onClick="setWorkedState('${s['dx_call']}', '${s['band']}', '${s['mode']}', ${alreadyWorkedThis ? "false" : "true"});" title="Check this box to record that you have worked this callsign on their current band and mode.">`;
+    const workedCheckbox = `<input type="checkbox" ${alreadyWorkedThis ? "checked" : ""} onClick="setWorkedState('${s['dx_call']}', '${s['band']}', '${s['mode']}', ${alreadyWorkedThis ? "false" : "true"});" title="Check this box to record that you have worked this callsign on their current band and mode.">`;
 
     // Populate the row
     if (showTime) {
@@ -369,21 +371,21 @@ function createNewTableRowsForSpot(s, highlightNew) {
     }
 
     // Second row for mobile view only, containing type, ref & comment
-    $tr2 = $("<tr class='hidenotonmobile'>");
+    const $tr2 = $("<tr class='hidenotonmobile'>");
 
     // Apply styles as per the first row
-    if (rowCount % 2 == 1) {
+    if (rowCount % 2 === 1) {
         $tr2.addClass("table-active");
     }
-    if (s["qrt"] == true || alreadyWorkedThis) {
+    if (s["qrt"] === true || alreadyWorkedThis) {
         $tr2.addClass("table-faded");
     }
     if (highlightNew) {
         $tr2.addClass("new");
     }
 
-    $td2 = $("<td colspan='100'>");
-    $td2floatleft = $(`<div style="float: left;">`);
+    const $td2 = $("<td colspan='100'>");
+    const $td2floatleft = $(`<div style="float: left;">`);
     if (showType) {
         $td2floatleft.append(`<span class='icon-wrapper'><i class='fa-solid ${sigToIcon(s["sig"], "fa-tower-cell")}'></i></span> ${typeText} `);
     }
@@ -391,7 +393,7 @@ function createNewTableRowsForSpot(s, highlightNew) {
         $td2floatleft.append(`${sig_refs} `);
     }
     $td2.append($td2floatleft);
-    $td2floatright = $(`<div style="float: right;">`);
+    const $td2floatright = $(`<div style="float: right;">`);
     if (showBearing) {
         $td2floatright.append(`${bearingText} &nbsp;`);
     }
@@ -416,7 +418,7 @@ function createNewTableRowsForSpot(s, highlightNew) {
 // 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/v1/options', function(jsonData) {
+    $.getJSON('/api/v1/options', function (jsonData) {
         // Store options
         options = jsonData;
 
@@ -459,13 +461,13 @@ function loadOptions() {
 
 // Work out if the user's entered grid is a valid Maidenhead grid
 function isUserGridValid() {
-    userGrid = $("#userGrid").val().toUpperCase();
+    const userGrid = $("#userGrid").val().toUpperCase();
     return latLonForGridCentre(userGrid) != null;
 }
 
 // Method called when the user's grid input is changed.
 function userGridUpdated() {
-    var userGridValid = isUserGridValid();
+    const userGridValid = isUserGridValid();
     if (userGridValid) {
         updateTable();
     }
@@ -483,7 +485,7 @@ function displayIntroBox() {
     if (localStorage.getItem("intro-box-dismissed") == null) {
         $("#intro-box").show();
     }
-    $("#intro-box-dismiss").click(function() {
+    $("#intro-box-dismiss").click(function () {
         localStorage.setItem("intro-box-dismissed", true);
     });
 }
@@ -510,19 +512,19 @@ function clearWorked() {
 }
 
 // Startup
-$(document).ready(function() {
+$(document).ready(function () {
     // Call loadOptions(), this will then trigger loading spots and setting up timers.
     loadOptions();
     // Display intro box
     displayIntroBox();
 
     // Set up run/pause toggles
-    $("#runButton").change(function() {
+    $("#runButton").change(function () {
         // Need to start the SSE connection but also do a full re-query to catch up anything that we missed, so we
         // might as well just call loadSpots again which will trigger it all
         loadSpots();
     });
-    $("#pauseButton").change(function() {
+    $("#pauseButton").change(function () {
         // If we are pausing and have an open SSE connection, stop it
         if (evtSource != null) {
             evtSource.close();

webassets/js/spotsbandsandmap.js

@@ -1,5 +1,5 @@
 // Storage for the spot data that the server gives us.
-var spots = []
+let spots = [];
 // List of people the user has worked. Each entry has the format callsign-band-mode. These can be added to the list by
 // ticking the checkbox on a row of the table, and cleared from the Display menu. Where a row would be added to the
 // table and the callsign-band-mode is in this list, it is shown struck through as already worked. This is persisted
@@ -9,9 +9,9 @@ let worked = []
 // Dynamically add CSS code for the band checkboxes to show 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>');
+    const $style = $('<style>');
     band_options.forEach(o => {
-        var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
+        const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
         $style.append(`#filter-button-label-band-${domSafeName} { padding-left: 0.3em; border-left: 5px solid ${bandToColor(o['name'])};}`);
     });
     $('html > head').append($style);
@@ -19,9 +19,9 @@ function addBandToggleColourCSS(band_options) {
 
 // Generate bands filter card. This one is a special case.
 function generateBandsMultiToggleFilterCard(band_options) {
-    var $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-1 mb-1">');
+    const $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 row-cols-xxl-4 g-1 mb-1">');
     band_options.forEach(o => {
-        var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
+        const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
         $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-band storeable-checkbox" id="filter-button-band-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked> <label class="form-check-label" id="filter-button-label-band-${domSafeName}" for="filter-button-band-${domSafeName}">${o['name']}</label></div></div>`);
     });
     $("#band-options").append($grid);
@@ -32,7 +32,7 @@ function generateBandsMultiToggleFilterCard(band_options) {
 // 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() {
+    $(".filter-button-band").each(function () {
         $(this).prop('checked', hamHFBands.includes($(this).val().replace("filter-button-band-", "")));
     });
     filtersUpdated();
@@ -40,9 +40,9 @@ function setHamHFBandToggles() {
 
 // Generate SIGs filter card. This one is also a special case.
 function generateSIGsMultiToggleFilterCard(sig_options) {
-    var $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
+    const $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
     sig_options.forEach(o => {
-        var domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
+        const domSafeName = o["name"].replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
         $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-sig storeable-checkbox" id="filter-button-sig-${domSafeName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-sig-${domSafeName}" for="filter-button-sig-${domSafeName}" title="${o['description']}"><i class="fa-solid ${sigToIcon(o['name'], 'fa-tower-cell')}"></i> ${o['name']}</label></div></div>`);
     });
     // Bonus "NO_SIG" / "General DX" option
@@ -53,9 +53,9 @@ function generateSIGsMultiToggleFilterCard(sig_options) {
 
 // Generate modes filter card. This one is also a special case.
 function generateModesMultiToggleFilterCard(mode_options) {
-    var $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 g-1 mb-1">');
+    const $grid = $('<div class="row row-cols-3 row-cols-md-2 row-cols-lg-3 g-1 mb-1">');
     mode_options.forEach(o => {
-        var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
+        const domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
         $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-mode storeable-checkbox" id="filter-button-mode-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" checked><label class="form-check-label" id="filter-button-label-mode-${domSafeName}" for="filter-button-mode-${domSafeName}">${o}</label></div></div>`);
     });
     $("#mode-options").append($grid);
@@ -65,7 +65,7 @@ function generateModesMultiToggleFilterCard(mode_options) {
 // Set the mode toggles that relate to Analog Voice.
 function setVoiceModeToggles() {
     const modes = ["PHONE", "SSB", "LSB", "USB", "AM", "FM", "DV", "DMR", "DSTAR", "C4FM", "M17"];
-    $(".filter-button-mode").each(function() {
+    $(".filter-button-mode").each(function () {
         $(this).prop('checked', modes.includes($(this).val().replace("filter-button-mode-", "")));
     });
     filtersUpdated();
@@ -74,7 +74,7 @@ function setVoiceModeToggles() {
 // Set the mode toggles that relate to Digimodes.
 function setDigiModeToggles() {
     const modes = ["DATA", "FT8", "FT4", "RTTY", "SSTV", "JS8", "HELL", "PSK", "OLIVIA", "PKT", "MSK144"];
-    $(".filter-button-mode").each(function() {
+    $(".filter-button-mode").each(function () {
         $(this).prop('checked', modes.includes($(this).val().replace("filter-button-mode-", "")));
     });
     filtersUpdated();
@@ -84,10 +84,10 @@ function setDigiModeToggles() {
 // set which ones are enabled by default based on config rather than having them all enabled by default. We also sanitise
 // names here for HTML elements.
 function generateSourcesMultiToggleFilterCard(source_options, sources_enabled_by_default) {
-    var $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
+    const $grid = $('<div class="row row-cols-2 row-cols-xxl-3 g-1 mb-1">');
     source_options.forEach(o => {
-        var enable = sources_enabled_by_default.includes(o);
-        var domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
+        const enable = sources_enabled_by_default.includes(o);
+        const domSafeName = o.replace(/^[^A-Za-z0-9]+|[^\w]+/gi, "");
         $grid.append(`<div class="col"><div class="form-check"><input type="checkbox" class="form-check-input filter-button-source storeable-checkbox" id="filter-button-source-${domSafeName}" value="${o}" autocomplete="off" onClick="filtersUpdated()" ${enable ? "checked" : ""}><label class="form-check-label" for="filter-button-source-${domSafeName}">${o}</label></div></div>`);
     });
     $("#source-options").append($grid);
@@ -115,16 +115,16 @@ function alreadyWorked(callsign, band, mode) {
 
 // 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) => {
+addEventListener("visibilitychange", () => {
     if (!document.hidden) {
         loadSpots();
     }
 });
 
 // Startup
-$(document).ready(function() {
+$(document).ready(function () {
     // Load worked list
-    var tmpWorked = JSON.parse(localStorage.getItem("worked"));
+    const tmpWorked = JSON.parse(localStorage.getItem("worked"));
     if (tmpWorked) {
         worked = tmpWorked;
     }

webassets/js/status.js

@@ -1,6 +1,6 @@
 // Load server status
 function loadStatus() {
-    $.getJSON('/api/v1/status', function(jsonData) {
+    $.getJSON('/api/v1/status', function (jsonData) {
         $("#software-version").text(jsonData["software-version"]);
         $("#server-owner-callsign").text(jsonData["server-owner-callsign"]);
         $("#up-since").text(moment().subtract(jsonData["uptime"], 'seconds').fromNow());
@@ -46,6 +46,6 @@ function loadStatus() {
 }
 
 // Startup
-$(document).ready(function() {
+$(document).ready(function () {
     loadStatus();
 });

webassets/js/ui-ham.js

@@ -4,286 +4,286 @@
 //
 
 const BAND_COLOR_SCHEMES = {
-	"PSK Reporter": {
-		"2200m": "#ff4500",
-		"600m": "#1e90ff",
-		"160m": "#7cfc00",
-		"80m": "#e550e5",
-		"60m": "#00008b",
-		"40m": "#5959ff",
-		"30m": "#62d962",
-		"20m": "#f2c40c",
-		"17m": "#f2f261",
-		"15m": "#cca166",
-		"12m": "#b22222",
-		"11m": "#00ff00",
-		"10m": "#ff69b4",
-		"6m": "#FF0000",
-		"5m": "#e0e0e0",
-		"4m": "#cc0044",
-		"2m": "#FF1493",
-		"1.25m": "#CCFF00",
-		"70cm": "#999900",
-		"23cm": "#5AB8C7",
-		"13cm": "#FF7F50",
-		"5.8GHz": "#cc0099",
-		"10GHz": "#696969",
-		"24GHz": "#f3edc6",
-		"47GHz": "#ffe786",
-		"76GHz": "#baf9d8"
-	},
-	"PSK Reporter (Adjusted)": {
-		"2200m": "#ff4500",
-		"600m": "#1e90ff",
-		"160m": "#7cfc00",
-		"80m": "#b33fb3",
-		"60m": "#00008b",
-		"40m": "#5959ff",
-		"30m": "#62d962",
-		"20m": "#f2c40c",
-		"17m": "#f2f261",
-		"15m": "#cca166",
-		"12m": "#b22222",
-		"11m": "#00ff00",
-		"10m": "#ff7eb4",
-		"6m": "#FF0000",
-		"5m": "#e0e0e0",
-		"4m": "#cc0044",
-		"2m": "#FF1493",
-		"1.25m": "#CCFF00",
-		"70cm": "#999900",
-		"23cm": "#5AB8C7",
-		"13cm": "#FF7F50",
-		"5.8GHz": "#cc0099",
-		"10GHz": "#696969",
-		"24GHz": "#f3edc6",
-		"47GHz": "#ffe786",
-		"76GHz": "#baf9d8"
-	},
-	"RBN": {
-		"2200m": "#000000",
-		"600m": "#aaaaaa",
-		"160m": "#ffe000",
-		"80m": "#093F00",
-		"60m": "#777777",
-		"40m": "#ffa500",
-		"30m": "#ff0000",
-		"20m": "#800080",
-		"17m": "#0000ff",
-		"15m": "#444444",
-		"12m": "#00ffff",
-		"11m": "#000000",
-		"10m": "#ff00ff",
-		"6m": "#ffc0cb",
-		"5m": "#000000",
-		"4m": "#a276ff",
-		"2m": "#92FF7F",
-		"1.25m": "#000000",
-		"70cm": "#000000",
-		"23cm": "#000000",
-		"13cm": "#000000",
-		"5.8GHz": "#000000",
-		"10GHz": "#000000",
-		"24GHz": "#000000",
-		"47GHz": "#000000",
-		"76GHz": "#000000"
-	},
-	"Ham Rainbow": {
-		"2200m": "#8e4f37",
-		"600m": "#8e4f37",
-		"160m": "#8e3737",
-		"80m": "#da2f93",
-		"60m": "#792fda",
-		"40m": "#2f4bda",
-		"30m": "#2fdad2",
-		"20m": "#68da2f",
-		"17m": "#dad52f",
-		"15m": "#da832f",
-		"12m": "#da5c2f",
-		"11m": "#8e8e8e",
-		"10m": "#da2f2f",
-		"6m": "#8e377a",
-		"5m": "#8e8e8e",
-		"4m": "#42378e",
-		"2m": "#37748e",
-		"1.25m": "#8e8e8e",
-		"70cm": "#378e65",
-		"23cm": "#8e8e37",
-		"13cm": "#8e6037",
-		"5.8GHz": "#8e6037",
-		"10GHz": "#8e6037",
-		"24GHz": "#8e6037",
-		"47GHz": "#8e6037",
-		"76GHz": "#8e6037"
-	},
-	"Ham Rainbow (Reverse)": {
-		"2200m": "#42378e",
-		"600m": "#42378e",
-		"160m": "#8e377a",
-		"80m": "#da2f2f",
-		"60m": "#da5c2f",
-		"40m": "#da832f",
-		"30m": "#dad52f",
-		"20m": "#68da2f",
-		"17m": "#2fdad2",
-		"15m": "#2f4bda",
-		"12m": "#792fda",
-		"11m": "#8e8e8e",
-		"10m": "#da2f93",
-		"6m": "#8e3737",
-		"5m": "#8e8e8e",
-		"4m": "#8e4f37",
-		"2m": "#8e6037",
-		"1.25m": "#8e8e8e",
-		"70cm": "#8e8e37",
-		"23cm": "#378e65",
-		"13cm": "#37748e",
-		"5.8GHz": "#37748e",
-		"10GHz": "#37748e",
-		"24GHz": "#37748e",
-		"47GHz": "#37748e",
-		"76GHz": "#37748e",
-	},
-	"Kate Morley": {
-		"2200m": "#817",
-		"600m": "#817",
-		"160m": "#817",
-		"80m": "#a35",
-		"60m": "#c66",
-		"40m": "#e94",
-		"30m": "#ed0",
-		"20m": "#9d5",
-		"17m": "#4d8",
-		"15m": "#2cb",
-		"12m": "#0bc",
-		"11m": "#09c",
-		"10m": "#09c",
-		"6m": "#36b",
-		"5m": "#36b",
-		"4m": "#36b",
-		"2m": "#36b",
-		"1.25m": "#36b",
-		"70cm": "#639",
-		"23cm": "#639",
-		"13cm": "#639",
-		"5.8GHz": "#639",
-		"10GHz": "#639",
-		"24GHz": "#639",
-		"47GHz": "#639",
-		"76GHz": "#639",
-	},
-	"ColorBrewer": {
-		"2200m": "#54278f",
-		"600m": "#756bb1",
-		"160m": "#9e9ac8",
-		"80m": "#cbc9e2",
-		"60m": "#08519c",
-		"40m": "#3182bd",
-		"30m": "#6baed6",
-		"20m": "#bdd7e7",
-		"17m": "#006d2c",
-		"15m": "#31a354",
-		"12m": "#74c476",
-		"11m": "#bae4b3",
-		"10m": "#a63603",
-		"6m": "#e6550d",
-		"5m": "#fd8d3c",
-		"4m": "#fdbe85",
-		"2m": "#a50f15",
-		"1.25m": "#de2d26",
-		"70cm": "#fb6a4a",
-		"23cm": "#fcae91",
-		"13cm": "#636363",
-		"5.8GHz": "#636363",
-		"10GHz": "#969696",
-		"24GHz": "#969696",
-		"47GHz": "#cccccc",
-		"76GHz": "#cccccc",
-	},
-	"IWantHue": {
-		"2200m": "#409271",
-		"600m": "#b03ce1",
-		"160m": "#50c640",
-		"80m": "#d545b7",
-		"60m": "#99b936",
-		"40m": "#7260db",
-		"30m": "#60af57",
-		"20m": "#d54788",
-		"17m": "#58c79f",
-		"15m": "#e2462a",
-		"12m": "#49b1d3",
-		"11m": "#df872f",
-		"10m": "#506bb0",
-		"6m": "#c6a639",
-		"5m": "#9554a3",
-		"4m": "#36783c",
-		"2m": "#da405b",
-		"1.25m": "#657527",
-		"70cm": "#8c97e2",
-		"23cm": "#b44f2f",
-		"13cm": "#d386c8",
-		"5.8GHz": "#aaac66",
-		"10GHz": "#9d4760",
-		"24GHz": "#90672c",
-		"47GHz": "#e08086",
-		"76GHz": "#dc9769",
-	},
-	"IWantHue (Color Blind)": {
-		"2200m": "#bf9e3d",
-		"600m": "#9d2fec",
-		"160m": "#79df39",
-		"80m": "#d445db",
-		"60m": "#5dd175",
-		"40m": "#814dd8",
-		"30m": "#d7ce2f",
-		"20m": "#657af1",
-		"17m": "#8cc34a",
-		"15m": "#d635aa",
-		"12m": "#6cbd80",
-		"11m": "#b860c1",
-		"10m": "#e48721",
-		"6m": "#686ccc",
-		"5m": "#d44e2b",
-		"4m": "#51b3db",
-		"2m": "#d74058",
-		"1.25m": "#56c5ad",
-		"70cm": "#d0478d",
-		"23cm": "#708940",
-		"13cm": "#c380c2",
-		"5.8GHz": "#cab775",
-		"10GHz": "#7a7fc2",
-		"24GHz": "#b87148",
-		"47GHz": "#bd678c",
-		"76GHz": "#c3666b",
-	},
-	"Mokole": {
-		"2200m": "#8b4513",
-		"600m": "#006400",
-		"160m": "#808000",
-		"80m": "#483d8b",
-		"60m": "#5f9ea0",
-		"40m": "#000080",
-		"30m": "#9acd32",
-		"20m": "#8b008b",
-		"17m": "#ff0000",
-		"15m": "#ff8c00",
-		"12m": "#ffd700",
-		"11m": "#7fff00",
-		"10m": "#8a2be2",
-		"6m": "#00ff7f",
-		"5m": "#dc143c",
-		"4m": "#00bfff",
-		"2m": "#0000ff",
-		"1.25m": "#d8bfd8",
-		"70cm": "#ff00ff",
-		"23cm": "#1e90ff",
-		"13cm": "#db7093",
-		"5.8GHz": "#f0e68c",
-		"10GHz": "#ff1493",
-		"24GHz": "#ffa07a",
-		"47GHz": "#ee82ee",
-		"76GHz": "#7fffd4",
-	}
+    "PSK Reporter": {
+        "2200m": "#ff4500",
+        "600m": "#1e90ff",
+        "160m": "#7cfc00",
+        "80m": "#e550e5",
+        "60m": "#00008b",
+        "40m": "#5959ff",
+        "30m": "#62d962",
+        "20m": "#f2c40c",
+        "17m": "#f2f261",
+        "15m": "#cca166",
+        "12m": "#b22222",
+        "11m": "#00ff00",
+        "10m": "#ff69b4",
+        "6m": "#FF0000",
+        "5m": "#e0e0e0",
+        "4m": "#cc0044",
+        "2m": "#FF1493",
+        "1.25m": "#CCFF00",
+        "70cm": "#999900",
+        "23cm": "#5AB8C7",
+        "13cm": "#FF7F50",
+        "5.8GHz": "#cc0099",
+        "10GHz": "#696969",
+        "24GHz": "#f3edc6",
+        "47GHz": "#ffe786",
+        "76GHz": "#baf9d8"
+    },
+    "PSK Reporter (Adjusted)": {
+        "2200m": "#ff4500",
+        "600m": "#1e90ff",
+        "160m": "#7cfc00",
+        "80m": "#b33fb3",
+        "60m": "#00008b",
+        "40m": "#5959ff",
+        "30m": "#62d962",
+        "20m": "#f2c40c",
+        "17m": "#f2f261",
+        "15m": "#cca166",
+        "12m": "#b22222",
+        "11m": "#00ff00",
+        "10m": "#ff7eb4",
+        "6m": "#FF0000",
+        "5m": "#e0e0e0",
+        "4m": "#cc0044",
+        "2m": "#FF1493",
+        "1.25m": "#CCFF00",
+        "70cm": "#999900",
+        "23cm": "#5AB8C7",
+        "13cm": "#FF7F50",
+        "5.8GHz": "#cc0099",
+        "10GHz": "#696969",
+        "24GHz": "#f3edc6",
+        "47GHz": "#ffe786",
+        "76GHz": "#baf9d8"
+    },
+    "RBN": {
+        "2200m": "#000000",
+        "600m": "#aaaaaa",
+        "160m": "#ffe000",
+        "80m": "#093F00",
+        "60m": "#777777",
+        "40m": "#ffa500",
+        "30m": "#ff0000",
+        "20m": "#800080",
+        "17m": "#0000ff",
+        "15m": "#444444",
+        "12m": "#00ffff",
+        "11m": "#000000",
+        "10m": "#ff00ff",
+        "6m": "#ffc0cb",
+        "5m": "#000000",
+        "4m": "#a276ff",
+        "2m": "#92FF7F",
+        "1.25m": "#000000",
+        "70cm": "#000000",
+        "23cm": "#000000",
+        "13cm": "#000000",
+        "5.8GHz": "#000000",
+        "10GHz": "#000000",
+        "24GHz": "#000000",
+        "47GHz": "#000000",
+        "76GHz": "#000000"
+    },
+    "Ham Rainbow": {
+        "2200m": "#8e4f37",
+        "600m": "#8e4f37",
+        "160m": "#8e3737",
+        "80m": "#da2f93",
+        "60m": "#792fda",
+        "40m": "#2f4bda",
+        "30m": "#2fdad2",
+        "20m": "#68da2f",
+        "17m": "#dad52f",
+        "15m": "#da832f",
+        "12m": "#da5c2f",
+        "11m": "#8e8e8e",
+        "10m": "#da2f2f",
+        "6m": "#8e377a",
+        "5m": "#8e8e8e",
+        "4m": "#42378e",
+        "2m": "#37748e",
+        "1.25m": "#8e8e8e",
+        "70cm": "#378e65",
+        "23cm": "#8e8e37",
+        "13cm": "#8e6037",
+        "5.8GHz": "#8e6037",
+        "10GHz": "#8e6037",
+        "24GHz": "#8e6037",
+        "47GHz": "#8e6037",
+        "76GHz": "#8e6037"
+    },
+    "Ham Rainbow (Reverse)": {
+        "2200m": "#42378e",
+        "600m": "#42378e",
+        "160m": "#8e377a",
+        "80m": "#da2f2f",
+        "60m": "#da5c2f",
+        "40m": "#da832f",
+        "30m": "#dad52f",
+        "20m": "#68da2f",
+        "17m": "#2fdad2",
+        "15m": "#2f4bda",
+        "12m": "#792fda",
+        "11m": "#8e8e8e",
+        "10m": "#da2f93",
+        "6m": "#8e3737",
+        "5m": "#8e8e8e",
+        "4m": "#8e4f37",
+        "2m": "#8e6037",
+        "1.25m": "#8e8e8e",
+        "70cm": "#8e8e37",
+        "23cm": "#378e65",
+        "13cm": "#37748e",
+        "5.8GHz": "#37748e",
+        "10GHz": "#37748e",
+        "24GHz": "#37748e",
+        "47GHz": "#37748e",
+        "76GHz": "#37748e",
+    },
+    "Kate Morley": {
+        "2200m": "#817",
+        "600m": "#817",
+        "160m": "#817",
+        "80m": "#a35",
+        "60m": "#c66",
+        "40m": "#e94",
+        "30m": "#ed0",
+        "20m": "#9d5",
+        "17m": "#4d8",
+        "15m": "#2cb",
+        "12m": "#0bc",
+        "11m": "#09c",
+        "10m": "#09c",
+        "6m": "#36b",
+        "5m": "#36b",
+        "4m": "#36b",
+        "2m": "#36b",
+        "1.25m": "#36b",
+        "70cm": "#639",
+        "23cm": "#639",
+        "13cm": "#639",
+        "5.8GHz": "#639",
+        "10GHz": "#639",
+        "24GHz": "#639",
+        "47GHz": "#639",
+        "76GHz": "#639",
+    },
+    "ColorBrewer": {
+        "2200m": "#54278f",
+        "600m": "#756bb1",
+        "160m": "#9e9ac8",
+        "80m": "#cbc9e2",
+        "60m": "#08519c",
+        "40m": "#3182bd",
+        "30m": "#6baed6",
+        "20m": "#bdd7e7",
+        "17m": "#006d2c",
+        "15m": "#31a354",
+        "12m": "#74c476",
+        "11m": "#bae4b3",
+        "10m": "#a63603",
+        "6m": "#e6550d",
+        "5m": "#fd8d3c",
+        "4m": "#fdbe85",
+        "2m": "#a50f15",
+        "1.25m": "#de2d26",
+        "70cm": "#fb6a4a",
+        "23cm": "#fcae91",
+        "13cm": "#636363",
+        "5.8GHz": "#636363",
+        "10GHz": "#969696",
+        "24GHz": "#969696",
+        "47GHz": "#cccccc",
+        "76GHz": "#cccccc",
+    },
+    "IWantHue": {
+        "2200m": "#409271",
+        "600m": "#b03ce1",
+        "160m": "#50c640",
+        "80m": "#d545b7",
+        "60m": "#99b936",
+        "40m": "#7260db",
+        "30m": "#60af57",
+        "20m": "#d54788",
+        "17m": "#58c79f",
+        "15m": "#e2462a",
+        "12m": "#49b1d3",
+        "11m": "#df872f",
+        "10m": "#506bb0",
+        "6m": "#c6a639",
+        "5m": "#9554a3",
+        "4m": "#36783c",
+        "2m": "#da405b",
+        "1.25m": "#657527",
+        "70cm": "#8c97e2",
+        "23cm": "#b44f2f",
+        "13cm": "#d386c8",
+        "5.8GHz": "#aaac66",
+        "10GHz": "#9d4760",
+        "24GHz": "#90672c",
+        "47GHz": "#e08086",
+        "76GHz": "#dc9769",
+    },
+    "IWantHue (Color Blind)": {
+        "2200m": "#bf9e3d",
+        "600m": "#9d2fec",
+        "160m": "#79df39",
+        "80m": "#d445db",
+        "60m": "#5dd175",
+        "40m": "#814dd8",
+        "30m": "#d7ce2f",
+        "20m": "#657af1",
+        "17m": "#8cc34a",
+        "15m": "#d635aa",
+        "12m": "#6cbd80",
+        "11m": "#b860c1",
+        "10m": "#e48721",
+        "6m": "#686ccc",
+        "5m": "#d44e2b",
+        "4m": "#51b3db",
+        "2m": "#d74058",
+        "1.25m": "#56c5ad",
+        "70cm": "#d0478d",
+        "23cm": "#708940",
+        "13cm": "#c380c2",
+        "5.8GHz": "#cab775",
+        "10GHz": "#7a7fc2",
+        "24GHz": "#b87148",
+        "47GHz": "#bd678c",
+        "76GHz": "#c3666b",
+    },
+    "Mokole": {
+        "2200m": "#8b4513",
+        "600m": "#006400",
+        "160m": "#808000",
+        "80m": "#483d8b",
+        "60m": "#5f9ea0",
+        "40m": "#000080",
+        "30m": "#9acd32",
+        "20m": "#8b008b",
+        "17m": "#ff0000",
+        "15m": "#ff8c00",
+        "12m": "#ffd700",
+        "11m": "#7fff00",
+        "10m": "#8a2be2",
+        "6m": "#00ff7f",
+        "5m": "#dc143c",
+        "4m": "#00bfff",
+        "2m": "#0000ff",
+        "1.25m": "#d8bfd8",
+        "70cm": "#ff00ff",
+        "23cm": "#1e90ff",
+        "13cm": "#db7093",
+        "5.8GHz": "#f0e68c",
+        "10GHz": "#ff1493",
+        "24GHz": "#ffa07a",
+        "47GHz": "#ee82ee",
+        "76GHz": "#7fffd4",
+    }
 };
 let bandColorScheme = "PSK Reporter (Adjusted)";
 
@@ -320,7 +320,7 @@ function bandToColor(band) {
 // possible with the band colour. If the band is unknown, white will be returned.
 function bandToContrastColor(band) {
     const rgb = hexToRGB(bandToColor(band));
-    const lum = 0.2126*rgb[0] + 0.7152*rgb[1] + 0.0722*rgb[2];
+    const lum = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
     return (lum > 128) ? "#000000" : "#ffffff";
 }
 
@@ -341,28 +341,28 @@ function modeTypeToColor(modeType) {
 }
 
 const SIG_ICONS = {
-	"POTA": "fa-tree",
-	"SOTA": "fa-mountain-sun",
-	"WWFF": "fa-seedling",
-	"GMA": "fa-person-hiking",
-	"WWBOTA": "fa-radiation",
-	"HEMA": "fa-mound",
-	"IOTA": "fa-book-atlas",
-	"MOTA": "fa-fan",
-	"ARLHS": "fa-house-flood-water",
-	"ILLW": "fa-house-flood-water",
-	"SIOTA": "fa-wheat-awn",
-	"WCA": "fa-chess-rook",
-	"ZLOTA": "fa-kiwi-bird",
-	"WOTA": "fa-w",
-	"BOTA": "fa-umbrella-beach",
-	"KRMNPA": "fa-earth-oceania",
-	"LLOTA": "fa-water",
-	"WWTOTA": "fa-tower-observation",
-	"WAB": "fa-table-cells-large",
-	"WAI": "fa-table-cells-large",
-	"Tiles": "fa-square",
-	"TOTA": "fa-toilet"
+    "POTA": "fa-tree",
+    "SOTA": "fa-mountain-sun",
+    "WWFF": "fa-seedling",
+    "GMA": "fa-person-hiking",
+    "WWBOTA": "fa-radiation",
+    "HEMA": "fa-mound",
+    "IOTA": "fa-book-atlas",
+    "MOTA": "fa-fan",
+    "ARLHS": "fa-house-flood-water",
+    "ILLW": "fa-house-flood-water",
+    "SIOTA": "fa-wheat-awn",
+    "WCA": "fa-chess-rook",
+    "ZLOTA": "fa-kiwi-bird",
+    "WOTA": "fa-w",
+    "BOTA": "fa-umbrella-beach",
+    "KRMNPA": "fa-earth-oceania",
+    "LLOTA": "fa-water",
+    "WWTOTA": "fa-tower-observation",
+    "WAB": "fa-table-cells-large",
+    "WAI": "fa-table-cells-large",
+    "Tiles": "fa-square",
+    "TOTA": "fa-toilet"
 }
 
 const SIG_NAMES = {
@@ -396,12 +396,12 @@ function sigToIcon(sig, defaultIcon) {
     if (col) {
         return col;
     } else {
-		let col = (sig != null) ? SIG_ICONS[sig.toUpperCase()] : null;
-		if (col) {
-			return col;
-		} else {
-			return defaultIcon;
-		}
+        let col = (sig != null) ? SIG_ICONS[sig.toUpperCase()] : null;
+        if (col) {
+            return col;
+        } else {
+            return defaultIcon;
+        }
     }
 }
 

webassets/js/utils.js

@@ -11,13 +11,20 @@ function escapeHtml(str) {
 
     const escapeCharacter = (match) => {
         switch (match) {
-            case '&': return '&';
-            case '<': return '&lt;';
-            case '>': return '&gt;';
-            case '"': return '&quot;';
-            case '\'': return '&#039;';
-            case '`': return '&#096;';
-            default: return match;
+            case '&':
+                return '&amp;';
+            case '<':
+                return '&lt;';
+            case '>':
+                return '&gt;';
+            case '"':
+                return '&quot;';
+            case '\'':
+                return '&#039;';
+            case '`':
+                return '&#096;';
+            default:
+                return match;
         }
     };
 
@@ -27,7 +34,7 @@ function escapeHtml(str) {
 // Converts an HTML hex colour to an array of [R, G, B] where each is 0-255.
 function hexToRGB(hex) {
     return hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i
-             ,(m, r, g, b) => '#' + r + r + g + g + b + b)
-    .substring(1).match(/.{2}/g)
-    .map(x => parseInt(x, 16));
+        , (m, r, g, b) => '#' + r + r + g + g + b + b)
+        .substring(1).match(/.{2}/g)
+        .map(x => parseInt(x, 16));
 }

webassets/service-worker.js

@@ -1,49 +1,49 @@
 const CACHE_NAME = 'Spothole';
 const CACHE_URLS = [
-  'index.html',
-  './',
-  'apidocs',
-  'apidocs/openapi.yml',
-  'about',
-  'css/style.css',
-  'js/add-spot.js',
-  'js/alerts.js',
-  'js/bands.js',
-  'js/common.js',
-  'js/map.js',
-  'js/spots.js',
-  'js/spotsbandsandmap.js',
-  'js/status.js',
-  'img/logo.png',
-  'img/favicon.ico',
-  'img/icon-32.png',
-  'img/icon-192.png',
-  'img/icon-512.png',
-  'fa/css/fontawesome.min.css',
-  'fa/css/solid.min.css',
-  'fa/webfonts/fa-solid-900.ttf',
-  'fa/webfonts/fa-solid-900.woff2'
+    'index.html',
+    './',
+    'apidocs',
+    'apidocs/openapi.yml',
+    'about',
+    'css/style.css',
+    'js/add-spot.js',
+    'js/alerts.js',
+    'js/bands.js',
+    'js/common.js',
+    'js/map.js',
+    'js/spots.js',
+    'js/spotsbandsandmap.js',
+    'js/status.js',
+    'img/logo.png',
+    'img/favicon.ico',
+    'img/icon-32.png',
+    'img/icon-192.png',
+    'img/icon-512.png',
+    'fa/css/fontawesome.min.css',
+    'fa/css/solid.min.css',
+    'fa/webfonts/fa-solid-900.ttf',
+    'fa/webfonts/fa-solid-900.woff2'
 ];
 
 self.addEventListener('fetch', (event) => {
-  // Is this an asset we can cache?
-  const url = new URL(event.request.url);
-  const isCacheableRequest = CACHE_URLS.includes(url.pathname);
+    // Is this an asset we can cache?
+    const url = new URL(event.request.url);
+    const isCacheableRequest = CACHE_URLS.includes(url.pathname);
 
-  if (isCacheableRequest) {
-    // Open the cache
-    event.respondWith(caches.open(CACHE_NAME).then((cache) => {
-      // Go to the network first, cacheing the response
-      return fetch(event.request.url).then((fetchedResponse) => {
-        cache.put(event.request, fetchedResponse.clone());
+    if (isCacheableRequest) {
+        // Open the cache
+        event.respondWith(caches.open(CACHE_NAME).then((cache) => {
+            // Go to the network first, cacheing the response
+            return fetch(event.request.url).then((fetchedResponse) => {
+                cache.put(event.request, fetchedResponse.clone());
 
-        return fetchedResponse;
-      }).catch(() => {
-        // If the network is unavailable, get from cache.
-        return cache.match(event.request.url);
-      });
-    }));
-  } else {
-    // Not a cacheable request, must be a call to the API, so no cache involved just go to the network
-  }
+                return fetchedResponse;
+            }).catch(() => {
+                // If the network is unavailable, get from cache.
+                return cache.match(event.request.url);
+            });
+        }));
+    } else {
+        // Not a cacheable request, must be a call to the API, so no cache involved just go to the network
+    }
 });