Multi TX search tweaks

Order the match list by score, clean up of matches panel HTML and show score in DOM as data element

server/datahandler.js

@@ -421,7 +421,8 @@ function handleData(wss, receivedData, rdsWss) {
               id: currentTx.id,
               pi: currentTx.pi,
               reg: currentTx.reg,
-              otherMatches: currentTx.others
+              otherMatches: currentTx.others,
+              score: currentTx.score,
           };
       }
   })

server/tx_search.js

@@ -191,10 +191,12 @@ async function fetchTx(freq, piCode, rdsPs) {
         for (loc of filteredLocations) {
             loc.score = evaluateStation(loc);
         }
-        match = filteredLocations.reduce((max, obj) => obj.score > max.score ? obj : max, filteredLocations[0]);
+        filteredLocations.sort((a, b) => b.score - a.score);
-        multiMatches = filteredLocations.filter(obj => obj !== match);
+        match = filteredLocations[0];
+        multiMatches = filteredLocations.slice(1);
     } else if (filteredLocations.length === 1) {
         match = filteredLocations[0];
+        match.score = 1;
     }
 
     if (match) {
@@ -218,6 +220,7 @@ async function fetchTx(freq, piCode, rdsPs) {
             pi: match.pi,
             foundStation: true,
             reg: match.detectedByPireg,
+            score: match.score,
             others: multiMatches,
         };
     } else {

web/index.ejs

@@ -290,7 +290,7 @@
             </div>
 
             <div class="panel-33 hover-brighten tooltip no-bg-phone" style="min-height: 91px;" data-tooltip="This panel contains the current TX info when RDS is loaded.<br><strong>Clicking on this panel copies the info into the clipboard.</strong>">
-              <div id="data-station-container">
+              <div id="data-station-container" data-score="0">
                 <h2 style="margin-top: 0;" class="mb-0">
                   <span id="data-station-name"></span>
                 </h2>

web/js/main.js

@@ -918,13 +918,11 @@ function throttle(fn, wait) {
 }
 
 function buildAltTxList(txList) {
-    const wrapper = '<div class="panel-100-real m-0" style="background:none;backdrop-filter:none;">';
     let outString = '';
-    outString += wrapper;
     for (let i = 0; i < txList.length; i++) {
         const tx = txList[i];
         outString += `<div class="panel-100-real m-0 hover-brighten no-bg-phone m-0 br-0 p-10" style="min-height: 72px;padding-left: 20px;">
-              <div id="data-station-container-${i}" style="display: block;" class="text-left">
+              <div id="data-station-container-${i}" style="display: block;" class="text-left" data-score="${tx.score}">
                 <h2 style="margin-top: 0;" class="mb-0">
                   <span id="data-station-name-${i}">${tx.station.replace("R.", "Radio ").replace(/%/g, '%25')}</span>
                 </h2>
@@ -935,11 +933,7 @@ function buildAltTxList(txList) {
                 </span>
               </div>
             </div>`;
-        if (i % 2 !== 0) {
-            outString += `</div>${wrapper}`;
-        }
     }
-    outString += '</div>';
     return outString;
 }
 
@@ -955,6 +949,12 @@ function updateHtmlIfChanged($element, newHtml) {
     }
 }
 
+function updateDatasetValIfChanged($element, dataLabel, newVal) {
+    if ($element.attr(dataLabel) !== newVal) {
+        $element.attr(dataLabel, newVal);
+    }
+}
+
 // Main function to update data elements, optimized
 const updateDataElements = throttle(function(parsedData) {
     updateTextIfChanged($dataFrequency, parsedData.freq);
@@ -1015,6 +1015,7 @@ const updateDataElements = throttle(function(parsedData) {
         updateTextIfChanged($('#data-station-pol'), parsedData.txInfo.pol);
         updateHtmlIfChanged($('#data-station-azimuth'), parsedData.txInfo.azi + '°');
         updateHtmlIfChanged($('#data-station-others'), parsedData.txInfo.otherMatches.length > 0 ? ('<span>+' + parsedData.txInfo.otherMatches.length +'</span>') : '');
+        updateDatasetValIfChanged($('#data-station-container'), "data-score", parsedData.txInfo.score);
         const txDistance = localStorage.getItem('imperialUnits') == "true" ? (Number(parsedData.txInfo.dist) * 0.621371192).toFixed(0) + " mi" : parsedData.txInfo.dist + " km";
         const altTxInfo = buildAltTxList(parsedData.txInfo.otherMatches);
         updateHtmlIfChanged($('#alternative-txes'), altTxInfo);