toasts, freq bugfixes, ui changes

server/datahandler.js

@@ -109,7 +109,8 @@ const callbacks = {
   ), 'callback_af*'),
 
   ecc: koffi.register(rds => (
-    value = rdsparser.get_ecc(rds)
+    value = rdsparser.get_ecc(rds),
+    dataToSend.ecc = value
   ), 'callback_ecc*'),
 
   country: koffi.register(rds => (
@@ -218,6 +219,7 @@ var dataToSend = {
   ta: 0,
   ms: -1,
   pty: 0,
+  ecc: null,
   af: [],
   rt0: '',
   rt1: '',

server/endpoints.js

@@ -4,6 +4,7 @@ const router = express.Router();
 const fs = require('fs');
 const { SerialPort } = require('serialport')
 const path = require('path');
+const https = require('https');
 
 // File Imports
 const { parseAudioDevice } = require('./stream/parser');
@@ -258,5 +259,63 @@ router.get('/ping', (req, res) => {
     res.send('pong');
 });  
 
+router.get('/log_fmlist', (req, res) => {
+    const clientIp = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
+    const postData = JSON.stringify({
+        station: {
+            freq: dataHandler.dataToSend.freq,
+            pi: dataHandler.dataToSend.pi,
+            id: dataHandler.dataToSend.txInfo.id,
+            rds_ps: dataHandler.dataToSend.ps,
+            signal: dataHandler.dataToSend.sig,
+            tp: dataHandler.dataToSend.tp,
+            ta: dataHandler.dataToSend.ta,
+            af_list: dataHandler.dataToSend.af,
+        },
+        server: {
+            uuid: serverConfig.identification.token,
+            latitude: serverConfig.identification.lat,
+            longitude: serverConfig.identification.lon,
+            address: serverConfig.identification.proxyIp.length > 1 ? serverConfig.identification.proxyIp : ('Matches request IP with port ' + serverConfig.webserver.port),
+            webserver_name: serverConfig.identification.tunerName,
+        },
+        client: {
+            request_ip: clientIp
+        },
+        log_msg: `PS: ${dataHandler.dataToSend.ps}, PI: ${dataHandler.dataToSend.pi}, Signal: ${dataHandler.dataToSend.sig.toFixed(0)} dBf`
+    });
+
+    const options = {
+        hostname: 'api.fmlist.org',
+        path: '/fmdx.org/slog.php',
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Content-Length': postData.length,
+        }
+    };
+
+    const request = https.request(options, (response) => {
+        let data = '';
+
+        response.on('data', (chunk) => { // Collect the response data
+            data += chunk;
+        });
+
+        response.on('end', () => {
+            res.status(200).send(data);
+        });
+    });
+
+    request.on('error', (error) => {
+        console.error('Error sending POST request:', error);
+        res.status(500).send(error);
+    });
+
+    request.write(postData);
+    request.end();
+});
+
+
 
 module.exports = router;

server/tx_search.js

@@ -61,7 +61,8 @@ function processData(data, piCode, rdsPs) {
                     if (esMode && (distance.distanceKm > 500)) {
                         weightDistance = Math.abs(distance.distanceKm-1500);
                     }
-                    const score =  (10*Math.log10(station.erp*1000)) / weightDistance; // Calculate score
+                    let erp = (station.erp && station.erp > 0) ? station.erp : 1;
+                    const score =  (10*Math.log10(erp*1000)) / weightDistance; // Calculate score
                     if (score > maxScore) {
                         maxScore = score;
                         txAzimuth = distance.azimuth;
@@ -78,7 +79,7 @@ function processData(data, piCode, rdsPs) {
         return {
             station: matchingStation.station.replace("R.", "Radio "),
             pol: matchingStation.pol.toUpperCase(),
-            erp: matchingStation.erp,
+            erp: (matchingStation.erp && matchingStation.erp > 0) ? matchingStation.erp : '?',
             city: matchingCity.name,
             itu: matchingCity.itu,
             distance: maxDistance.toFixed(0),

web/css/breadcrumbs.css

@@ -63,7 +63,6 @@ label {
     font-weight: bold;
     text-transform: uppercase;
     display: block;
-    text-align: left;
     color: var(--color-4);
 }
 

web/css/dropdown.css

@@ -4,6 +4,7 @@
     background: var(--color-4);
     position: relative;
     margin-right: 20px;
+    border-radius: 15px;
     /*border-bottom: 4px solid var(--color-2);*/
   }
   @media (max-width: 400px) {
@@ -47,9 +48,13 @@
     background-color: var(--color-main-bright);
   }
 
-  .dropdown.opened > input {
+  .dropdown.opened.dropdown-up > input {
     border-radius: 0 0 15px 15px;
   } 
+
+  .dropdown.opened > input {
+    border-radius: 15px 15px 0 0;
+  } 
   .dropdown input:focus {
     outline: none;
   }

web/css/entry.css

@@ -3,6 +3,7 @@
 @import url("main.css"); /* Root stuff that affects the entire webpage (body, wrapper etc.) */
 @import url("breadcrumbs.css"); /* Stuff that applies to random elements only once/twice */
 @import url("buttons.css"); /* Buttons, inputs, select boxes, checkboxes... */
+@import url("toast.css"); /* Toast notifications */
 @import url("dropdown.css"); /* Custom dropdown menus */
 @import url("panels.css"); /* Different panels and their sizes */
 @import url("modal.css"); /* Modal window */

web/index.ejs

@@ -124,7 +124,7 @@
                             </div>
                             
                             <% if (antennas.enabled == true) { %>
-                                <div class="panel-50 no-bg h-100 br-0 m-0 dropdown" id="data-ant" style="margin-right: 25px;">
+                                <div class="panel-50 no-bg h-100 br-0 m-0 dropdown dropdown-up" id="data-ant" style="margin-right: 25px;">
                                     <input type="text" placeholder="Ant A" readonly tabindex="0">
                                     <ul class="options open-top" tabindex="-1">
                                         <% if(antennas.ant1.enabled == true) { %><li data-value="0" class="option" tabindex="0"><%= antennas.ant1.name %></li><% } %>
@@ -164,7 +164,7 @@
                                 </span>
                             <% } %>
                             <% if (device == 'tef' && bwSwitch == true) { %>
-                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;">
+                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 25px;">
                                     <input type="text" placeholder="Auto BW" readonly tabindex="0">
                                     <ul class="options open-top" tabindex="-1">
                                         <li data-value="0" class="option" tabindex="0">Auto</li>
@@ -188,7 +188,7 @@
                             <% } %>
 
                             <% if (device == 'xdr' && bwSwitch == true) { %>
-                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;">
+                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 25px;">
                                     <input type="text" placeholder="Auto BW" readonly tabindex="0">
                                     <ul class="options open-top" tabindex="-1">
                                         <li data-value="0" data-value2="-1" class="option" tabindex="0">Auto</li>
@@ -213,7 +213,7 @@
                             <% } %>
 
                             <% if (device == 'sdr' && bwSwitch == true) { %>
-                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown" id="data-bw" style="margin-left: 25px;">
+                                <div class="panel-50 w-150 no-bg h-100 m-0 dropdown dropdown-up" id="data-bw" style="margin-left: 25px;">
                                     <input type="text" placeholder="Auto BW" readonly tabindex="0">
                                     <ul class="options open-top" tabindex="-1">
                                         <li data-value="0" class="option" tabindex="0">Auto</li>
@@ -233,6 +233,9 @@
                                     </ul>
                                 </div>
                             <% } %>
+                            <!--<button class="tooltip bg-color-4" id="log-fmlist" 
+                            data-tooltip="<strong>LOG TO FMLIST</strong><br>Clicking this button logs the current station to FMLIST's visual logbook." aria-label="Chatbox"
+                            style="width: 80px; height: 48px;margin-left: 15px;"><i class="fa-solid fa-flag fa-lg"></i></button>-->
                         </div>
                     </div>
                 </div>
@@ -321,7 +324,7 @@
             <h1 class="top-25">Settings</h1>
             
             <div class="form-group top-25">
-                <label for="themes"><i class="fa-solid fa-palette"></i> Theme:</label>
+                <label for="themes"><i class="fa-solid fa-palette"></i> Theme</label>
                 <div class="dropdown" id="theme-selector">
                     <input type="text" placeholder="Default" readonly tabindex="0">
                     <ul class="options" tabindex="-1">
@@ -340,7 +343,7 @@
             
             <% if (device !== 'sdr') { %>
             <div class="form-group top-25">
-                <label for="signal"><i class="fa-solid fa-signal"></i> Signal units:</label>
+                <label for="signal"><i class="fa-solid fa-signal"></i> Signal units</label>
                 <div class="dropdown" id="signal-selector">
                     <input type="text" placeholder="dBf" readonly tabindex="0">
                     <ul class="options" tabindex="-1">
@@ -362,7 +365,7 @@
             </div>
 
             <div class="form-group bottom-20 hide-desktop" style="float: none;">
-                <label for="users-online"><i class="fa-solid fa-user"></i> Users online:</label>
+                <label for="users-online"><i class="fa-solid fa-user"></i> Users online</label>
                 <span class="users-online" name="users-online">0</span>
             </div>
             
@@ -391,8 +394,7 @@
                     </div>
                     <% } else { %>
                         <form action="./login" method="post" id="login-form" class="top-25">
-                            <label for="password">Password:</label>
+                            <input type="password" id="password" name="password" placeholder="Password" style="width: 145px;" required>
-                            <input type="password" id="password" name="password" style="width: 145px;" required>
                             <button type="submit" class="br-0 top-10 tooltip" style="height: 46px; width: 50px; margin-left: 0;" role="button" aria-label="Log in" tabindex="0" data-tooltip="Log in">
                                 <i class="fa-solid fa-right-to-bracket"></i>
                             </button>
@@ -488,7 +490,7 @@
     </div>
 </div>
 </div>
-
+<div id="toast-container" style="position: fixed; top: 20px; right: 96px; z-index: 9999;"></div>
 <script src="js/websocket.js"></script>
 <script src="js/webserver.js"></script>
 <% if (!noPlugins) { %>

web/js/dropdown.js

@@ -24,7 +24,7 @@ $(document).ready(function() {
       switch($currentDropdown.attr('id')) {
           case 'data-ant':
               socket.send("Z" + $(event.currentTarget).attr('data-value'));
-              tuneTo(getCurrentFreq()); // Reset RDS when change antenna input
+              resetRDS(getCurrentFreq()); // Reset RDS when change antenna input
               break;
           case 'data-bw':
               legacyBwValue = $(event.currentTarget).attr('data-value2') || "";

web/js/main.js

@@ -240,7 +240,7 @@ function sendPingRequest() {
         socket = new WebSocket(socketAddress);
 
         socket.onopen = () => {
-            console.log("Main/UI reconnected successfully.");
+            sendToast('info', 'Connected', 'Reconnected successfully!', false, false);
         };
         socket.onmessage = (event) => {
             handleWebSocketMessage(event);
@@ -421,9 +421,20 @@ function updateCanvas(parsedData, signalChart) {
     }, 1000 / 15);
 }
 
+let reconnectTimer = null;
+let dataTimeout = null;
+const TIMEOUT_DURATION = 5000;  // 5 seconds timeout for lost connection
+
+const resetDataTimeout = () => {
+    clearTimeout(dataTimeout);
+    dataTimeout = setTimeout(() => {
+        sendToast('warning', 'Connection lost', 'Attempting to reconnect...', false, false);
+    }, TIMEOUT_DURATION);
+};
+
 socket.onmessage = (event) => {
-    if (event.data == 'KICK') {
+    if (event.data === 'KICK') {
-        console.log('Kick initiated.')
+        console.log('Kick initiated.');
         setTimeout(() => {
             window.location.href = '/403';
         }, 500);
@@ -432,7 +443,9 @@ socket.onmessage = (event) => {
 
     parsedData = JSON.parse(event.data);
 
+    resetDataTimeout();
     updatePanels(parsedData);
+
     const sum = signalData.reduce((acc, strNum) => acc + parseFloat(strNum), 0);
     const averageSignal = sum / signalData.length;
     data.push(averageSignal);
@@ -582,6 +595,10 @@ function tuneTo(freq) {
         socket.send("T" + ((freq).toFixed(1) * 1000));
 }
 
+function resetRDS(freq) {
+    socket.send("T" + ((freq).toFixed(3) * 1000));
+}
+
 async function copyPs() {
     var frequency = $('#data-frequency').text();
     var pi = $('#data-pi').text();
@@ -653,11 +670,13 @@ function copyToClipboard(textToCopy) {
 }
 
 function findOnMaps() {
-    var frequency = parseFloat($('#data-frequency').text()).toFixed(1);
+    var frequency = parseFloat($('#data-frequency').text());
     var pi = $('#data-pi').text();
     var latitude = localStorage.getItem('qthLongitude');
     var longitude = localStorage.getItem('qthLatitude');
 
+    frequency > 74 ? frequency = frequency.toFixed(1) : null;
+
     var url = `https://maps.fmdx.org/#qth=${longitude},${latitude}&freq=${frequency}&findPi=${pi}`;
     window.open(url, "_blank");
 }
@@ -991,3 +1010,17 @@ function fillPresets() {
         });
     }
 }
+
+//FMLIST logging
+$('#log-fmlist').on('click', function() {
+    $.ajax({
+        url: './log_fmlist',
+        method: 'GET',
+        success: function(response) {
+            sendToast('success', 'Log successful', response, false, true);
+        },
+        error: function(xhr) {
+            sendToast('error', 'Log failed', xhr.statusText, false, true);
+        }
+    });
+});

web/js/settings.js

@@ -79,7 +79,9 @@ $(document).ready(() => {
             data: $(this).serialize(),
             success: function (data) {
                 // Update the content on the page with the message from the response
-                $('#login-message').text(data.message);
+                sendToast('success', 'Login success!', data.message, false, true);
+
+                //$('#login-message').text(data.message);
                 setTimeout(function () {
                     location.reload(true);
                 }, 1750);
@@ -88,7 +90,7 @@ $(document).ready(() => {
                 // Handle error response
                 if (xhr.status === 403) {
                     // Update the content on the page with the message from the error response
-                    $('#login-message').text(xhr.responseJSON.message);
+                    sendToast('error', 'Login failed!', xhr.responseJSON.message, false, true);
                 } else {
                     // Handle other types of errors if needed
                     console.error('Error:', status, error);
@@ -105,7 +107,7 @@ $(document).ready(() => {
             type: 'GET',  // Assuming the logout is a GET request, adjust accordingly
             url: './logout',
             success: function (data) {
-                $('#login-message').text(data.message);
+                sendToast('success', 'Logout success!', data.message, false, true);
                 setTimeout(function () {
                     location.reload(true);
                 }, 1000);
@@ -114,7 +116,7 @@ $(document).ready(() => {
                 // Handle error response
                 if (xhr.status === 403) {
                     // Update the content on the page with the message from the error response
-                    $('#login-message').text(xhr.responseJSON.message);
+                    sendToast('error', 'Logout failed!', xhr.responseJSON.message, false, true);
                 } else {
                     // Handle other types of errors if needed
                     console.error('Error:', status, error);

web/js/webserver.js

@@ -3,3 +3,4 @@ $.getScript('./js/dropdown.js');
 $.getScript('./js/modal.js');
 $.getScript('./js/settings.js');
 $.getScript('./js/chat.js');
+$.getScript('./js/toast.js');

web/setup.ejs

@@ -12,6 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
+    <div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>
     <div id="wrapper-outer" class="wrapper-outer-static">
     <div id="wrapper" class="setup-wrapper">
         <% if (isAdminAuthenticated) { %>

web/wizard.ejs

@@ -12,6 +12,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>
+    <div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>
     <div id="wrapper-outer">
     <div id="wrapper" class="setup-wrapper">
         <% if (isAdminAuthenticated) { %>