Ham HF band toggle preset and prevent some multiple-SSE shenanigans when searching and typing letters quickly

templates/spots.html

@@ -220,7 +220,7 @@
 
 <script src="/js/common.js?v=3"></script>
 <script src="/js/spotsbandsandmap.js?v=3"></script>
-<script src="/js/spots.js?v=3"></script>
+<script src="/js/spots.js?v=4"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
 
 {% end %}

webassets/js/spots.js

@@ -1,5 +1,6 @@
 // SSE event source
 let evtSource;
+let restartSSEOnErrorTimeoutId;
 // Table row count, to alternate shading
 let rowCount = 0;
 
@@ -30,6 +31,9 @@ function loadSpots() {
 // Start an SSE connection (closing an existing one if it exists). This will then be used to add to the table on the
 // fly.
 function startSSEConnection() {
+    if (evtSource != null) {
+        evtSource.close();
+    }
     evtSource = new EventSource('/api/v1/spots/stream' + buildQueryString());
 
     evtSource.onmessage = function(event) {
@@ -66,8 +70,11 @@ function startSSEConnection() {
     };
 
     evtSource.onerror = function(err) {
-        evtSource.close();
-        setTimeout(startSSEConnection, 1000);
+        if (evtSource != null) {
+            evtSource.close();
+        }
+        clearTimeout(restartSSEOnErrorTimeoutId)
+        restartSSEOnErrorTimeoutId = setTimeout(startSSEConnection, 1000);
     };
 }
 
@@ -147,8 +154,8 @@ function updateTable() {
         table.find('tbody').append('<tr class="table-danger"><td colspan="100" style="text-align:center;">No spots match your filters.</td></tr>');
     }
 
-    spots.reverse();
-    spots.forEach(s => addSpotToTopOfTable(s, false));
+    let spotsNewestFirst = spots.toReversed();
+    spotsNewestFirst.forEach(s => addSpotToTopOfTable(s, false));
 }
 
 // Add rows corresponding to a new spot to the top of the table
@@ -280,9 +287,9 @@ function createNewTableRowsForSpot(s, highlightNew) {
         var items = []
         for (var 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>`
+                items[i] = `<span style="white-space: nowrap;"><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></span>`
             } else {
-                items[i] = `${s["sig_refs"][i]["id"]}`
+                items[i] = `<span style="white-space: nowrap;">${s["sig_refs"][i]["id"]}</span>`
             }
         }
         sig_refs = items.join(", ");
@@ -318,7 +325,7 @@ function createNewTableRowsForSpot(s, highlightNew) {
         $tr.append(`<td class='nowrap'>${time_formatted}</td>`);
     }
     if (showDX) {
-        $tr.append(`<td class='nowrap'><span class='flag-wrapper hideonmobile' title='${dx_country}'>${dx_flag}</span><a class='dx-link' href='https://qrz.com/db/${s["dx_call"]}' target='_new' title='${s["dx_name"] != null ? s["dx_name"] : ""}'>${dx_call}</a></td>`);
+        $tr.append(`<td class='nowrap'><span class='flag-wrapper' title='${dx_country}'>${dx_flag}</span><a class='dx-link' href='https://qrz.com/db/${s["dx_call"]}' target='_new' title='${s["dx_name"] != null ? s["dx_name"] : ""}'>${dx_call}</a></td>`);
     }
     if (showFreq) {
         $tr.append(`<td class='nowrap'><span class='band-bullet' title='${bandFullName}' style='${(s["freq"] != null) ? "color: " + s["band_color"] : "display: none;"}'>&#9632;</span>${freq_string}</td>`);
@@ -336,7 +343,7 @@ function createNewTableRowsForSpot(s, highlightNew) {
         $tr.append(`<td class='nowrap hideonmobile'><span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> ${typeText}</td>`);
     }
     if (showRef) {
-        $tr.append(`<td class='hideonmobile'>${sig_refs}</td>`);
+        $tr.append(`<td class='hideonmobile' style='max-width: 11em;'>${sig_refs}</td>`);
     }
     if (showDE) {
         $tr.append(`<td class='nowrap hideonmobile'><span class='flag-wrapper' title='${de_country}'>${de_flag}</span>${de_call}</td>`);
@@ -357,17 +364,25 @@ function createNewTableRowsForSpot(s, highlightNew) {
     }
 
     $td2 = $("<td colspan='100'>");
+    $td2floatleft = $(`<div style="float: left;">`);
     if (showType) {
-        $td2.append(`<span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> ${typeText} `);
+        $td2floatleft.append(`<span class='icon-wrapper'><i class='fa-solid fa-${s["icon"]}'></i></span> ${typeText} `);
     }
     if (showRef) {
-        $td2.append(`${sig_refs} `);
+        $td2floatleft.append(`${sig_refs} `);
     }
+    $td2.append($td2floatleft);
+    $td2floatright = $(`<div style="float: right;">`);
     if (showBearing) {
-        $td2.append(` &nbsp; Bearing: ${bearingText} `);
+        $td2floatright.append(`${bearingText} &nbsp;`);
     }
+    if (showDE) {
+        $td2floatright.append(` de ${de_call} &nbsp;`);
+    }
+    $td2.append($td2floatright);
+    $td2.append(`</div><div style="clear: both;"></div>`);
     if (showComment) {
-        $td2.append(`<br/>${commentText}`);
+        $td2.append(`${commentText}`);
     }
     $tr2.append($td2);
 

webassets/js/spotsbandsandmap.js

@@ -23,8 +23,18 @@ function generateBandsMultiToggleFilterCard(band_options) {
         var cssFormattedBandName = o['name'] ? o['name'].replace('.', 'p') : "unknown";
         $("#band-options").append(`<input type="checkbox" class="btn-check filter-button-band storeable-checkbox" name="options" id="filter-button-band-${cssFormattedBandName}" value="${o['name']}" autocomplete="off" onClick="filtersUpdated()" checked><label class="btn btn-outline" id="filter-button-label-band-${cssFormattedBandName}" for="filter-button-band-${cssFormattedBandName}">${o['name']}</label> `);
     });
-    // Create All/None buttons
-    $("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button>&nbsp;<button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button></span>`);
+    // Create All/None/Ham HF buttons
+    $("#band-options").append(` <span style="display: inline-block"><button id="filter-button-band-all" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', true);">All</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="toggleFilterButtons('band', false);">None</button> <button id="filter-button-band-none" type="button" class="btn btn-outline-secondary" onclick="setHamHFBandToggles();">Ham HF</button></span>`);
+}
+
+// Set the band toggles so that only the amateur radio HF bands are selected. This includes 160m and 6m because that's
+// widely expected by hams to be included. Special case of toggleFilterButtons().
+function setHamHFBandToggles() {
+    const hamHFBands = ["160m", "80m", "60m", "40m", "30m", "20m", "17m", "15m", "12m", "10m", "6m"];
+    $(".filter-button-band").each(function() {
+        $(this).prop('checked', hamHFBands.includes($(this).attr('id').replace("filter-button-band-", "")));
+    });
+    filtersUpdated();
 }
 
 // Generate SIGs filter card. This one is also a special case.