Highlight wanted calls. Closes #117

static/js/alerts.js

@@ -9,15 +9,17 @@ let alerts = [];
 // Load alerts and populate the table. No need for QRZ/HamQTH credential headers as these won't add any useful data
 // to alerts
 function loadAlerts() {
-    $.ajax({url: '/api/v2/alerts' + buildQueryString(), dataType: 'json', success: function (jsonData) {
-        // Store last updated time
-        lastUpdateTime = moment.utc();
-        updateRefreshDisplay();
-        // Store data
-        alerts = jsonData;
-        // Update table
-        updateTable();
-    }});
+    $.ajax({
+        url: '/api/v2/alerts' + buildQueryString(), dataType: 'json', success: function (jsonData) {
+            // Store last updated time
+            lastUpdateTime = moment.utc();
+            updateRefreshDisplay();
+            // Store data
+            alerts = jsonData;
+            // Update table
+            updateTable();
+        }
+    });
 }
 
 // Build a query string for the API, based on the filters that the user has selected.
@@ -115,12 +117,28 @@ function addAlertRowsToTable(tbody, alerts) {
         // Create row
         let $tr = $('<tr>');
 
+        // Calculate some values
+        let wantThis = false;
+        if (a["dx_calls"] != null) {
+            for (i in a["dx_calls"]) {
+                if (callWanted(a["dx_calls"][i])) {
+                    wantThis = true;
+                    break;
+                }
+            }
+        }
+
         // 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) {
+        // which cause the table-striped colouring to go awry. If the call is wanted, suppress the striping so the
+        // highlight colour looks right.
+        if (count % 2 === 1 && !wantThis) {
             $tr.addClass("table-active");
         }
+        // If this is a wanted call, highlight it
+        if (wantThis) {
+            $tr.addClass("row-wanted");
+        }
 
         // Use local time instead of UTC?
         const useLocalTime = $("#timeZone")[0].value === "local";
@@ -255,9 +273,13 @@ function addAlertRowsToTable(tbody, alerts) {
 
         // Second row for mobile view only, containing source, ref, freqs/modes & comment
         const $tr2 = $("<tr class='hidenotonmobile'>");
-        if (count % 2 === 1) {
+        if (count % 2 === 1 && !wantThis) {
             $tr2.addClass("table-active");
         }
+        if (wantThis) {
+            $tr2.addClass("row-wanted");
+        }
+
         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> `);