Add icons back to spots & alerts

static/apidocs/openapi.yml

@@ -20,6 +20,7 @@ info:
     * Added DTMBA, FEA, BIWOTA, COTA & PGA SIGs
     * Removed the distinction between LSB & USB (both will now show as SSB) and between the various digital voice modes, which will now show as DV.
     * Added `sig_type`, `icon`, `region_flag` and `refs_globally_unique` to SIG data
+    * Added `icon` to spot and alert data
     * Added `alert_type` and `url` to alert data
     * Added `contests_skip_max_duration_check` to alert query parameters
     * SIG reference types (e.g. "Park") are now capitalised to match other enums
@@ -1298,6 +1299,10 @@ components:
             Propagation mode, if known. This is only populated when the upstream spot specifically states it; Spothole
             does not try to determine it using its own algorithm.
           $ref: "#/components/schemas/PropagationMode"
+        icon:
+          type: string
+          description: Icon to use when displaying this spot in the web UI. Chosen from the Font Awesome set.
+          example: "fa-tower-cell"
 
 
     SpotSubmission:
@@ -1466,6 +1471,10 @@ components:
           type: string
           description: The ID the source gave it, if any.
           example: "GUID-123456"
+        icon:
+          type: string
+          description: Icon to use when displaying this spot in the web UI. Chosen from the Font Awesome set.
+          example: "fa-tower-cell"
 
 
     AlertStream:

static/js/alerts.js

@@ -273,7 +273,7 @@ function addAlertRowsToTable(tbody, alerts) {
             $tr.append(`<td class='hideonmobile'>${commentText}</td>`);
         }
         if (showSource) {
-            $tr.append(`<td class='nowrap hideonmobile'><span class='icon-wrapper'><i class='fa-solid ${sigToIcon(a["sig"], options["sigs"], "fa-globe-africa")}'></i></span> ${sigSourceText}</td>`);
+            $tr.append(`<td class='nowrap hideonmobile'><span class='icon-wrapper'><i class='fa-solid ${a["icon"]}'></i></span> ${sigSourceText}</td>`);
         }
         if (showRef) {
             $tr.append(`<td class='hideonmobile'>${sig_refs}</td>`);
@@ -291,7 +291,7 @@ function addAlertRowsToTable(tbody, alerts) {
 
         const $td2 = $("<td colspan='100'>");
         if (showSource) {
-            $td2.append(`<span class='icon-wrapper'><i class='fa-solid ${sigToIcon(a["sig"], options["sigs"], "fa-globe-africa")}'></i></span> `);
+            $td2.append(`<span class='icon-wrapper'><i class='fa-solid ${a["icon"]}'></i></span> `);
         }
         if (showRef) {
             $td2.append(`${sig_refs} `);

static/js/common.js

@@ -285,20 +285,6 @@ function callWanted(call) {
     }
 }
 
-// Get the Font Awesome icon for a given SIG. If the SIG is unknown, the provided default symbol will be returned
-// The sig is provided by name as a string, while all_sigs contains all the SIG info from the options call. This
-// is because sometimes the sig name arrives via a spot and therefore we need to look up the rest of the SIG data
-// separately.
-function sigToIcon(sig, all_sigs, defaultIcon) {
-    if (sig) {
-        const match = all_sigs.find((check_sig) => check_sig["name"].toUpperCase() === sig.toUpperCase());
-        if (match) {
-            return match["icon"];
-        }
-    }
-    return defaultIcon;
-}
-
 // Startup
 $(document).ready(function () {
     usePreferredTheme();

static/js/map.js

@@ -223,7 +223,7 @@ function updateMap() {
 // Get an icon for a spot, based on its band, using PSK Reporter colours, its program etc.
 function getIcon(s) {
     return L.ExtraMarkers.icon({
-        icon: sigToIcon(s["sig"], options["sigs"], "fa-tower-cell"),
+        icon: s["icon"],
         iconColor: bandToContrastColor(s["band"]),
         markerColor: bandToColor(s["band"]),
         shape: 'circle',
@@ -243,13 +243,19 @@ function getTooltipText(s) {
         dx_call = dx_call + "-" + s["dx_ssid"];
     }
 
+    // Format dx country
+    let dx_country = s["dx_country"];
+    if (dx_country == null) {
+        dx_country = "Unknown or not a country";
+    }
+
     // Format 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"];
+    if (s["dx_dxcc_id"] && s["dx_dxcc_id"] != null && s["dx_dxcc_id"] !== 0) {
+        dx_flag = `<img src="static/img/flags/${s['dx_dxcc_id']}.png" class="flag" width="24" alt="${dx_country}" title="${dx_country}"/>`;
     }
 
     // Format the frequency
@@ -303,7 +309,7 @@ function getTooltipText(s) {
     ttt += "<br/>";
 
     // Source / SIG / Ref
-    ttt += `<span class='nowrap'><span class='icon-wrapper'><i class='fa-solid ${sigToIcon(s["sig"], options["sigs"], "fa-tower-cell")}'></i></span>&nbsp;${sigSourceText} ${sig_refs}</span><br/>`;
+    ttt += `<span class='nowrap'><span class='icon-wrapper'><i class='fa-solid ${s["icon"]}'></i></span>&nbsp;${sigSourceText} ${sig_refs}</span><br/>`;
 
     // Time
     ttt += `<span class='icon-wrapper'><i class='fa-solid fa-clock markerPopupIcon'></i></span>&nbsp;${moment.unix(s["time"]).fromNow()}`;

static/js/spots.js

@@ -398,7 +398,7 @@ function createNewTableRowsForSpot(s, highlightNew) {
         $tr.append(`<td class='nowrap hideonmobile'>${distanceText}</td>`);
     }
     if (showType) {
-        $tr.append(`<td class='nowrap hideonmobile'><span class='icon-wrapper'><i class='fa-solid ${sigToIcon(s["sig"], options["sigs"], "fa-tower-cell")}'></i></span> ${typeText}</td>`);
+        $tr.append(`<td class='nowrap hideonmobile'><span class='icon-wrapper'><i class='fa-solid ${s["icon"]}'></i></span> ${typeText}</td>`);
     }
     if (showRef) {
         $tr.append(`<td class='hideonmobile' style='max-width: 11em;'>${sig_refs}</td>`);
@@ -430,7 +430,7 @@ function createNewTableRowsForSpot(s, highlightNew) {
     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"], options["sigs"], "fa-tower-cell")}'></i></span> ${typeText} `);
+        $td2floatleft.append(`<span class='icon-wrapper'><i class='fa-solid ${s["icon"]}'></i></span> ${typeText} `);
     }
     if (showRef) {
         $td2floatleft.append(`${sig_refs} `);