bugfixes, UI improvements, logging improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fm-dx-webserver",
-  "version": "1.3.0",
+  "version": "1.3.0.1",
   "description": "FM DX Webserver",
   "main": "index.js",
   "scripts": {

server/endpoints.js

@@ -270,6 +270,19 @@ router.get('/ping', (req, res) => {
     res.send('pong');
 });  
 
+const logHistory = {};
+
+// Function to check if the ID has been logged within the last 60 minutes
+function canLog(id) {
+    const now = Date.now();
+    const sixtyMinutes = 60 * 60 * 1000; // 60 minutes in milliseconds
+    if (logHistory[id] && (now - logHistory[id]) < sixtyMinutes) {
+        return false; // Deny logging if less than 60 minutes have passed
+    }
+    logHistory[id] = now; // Update with the current timestamp
+    return true;
+}
+
 router.get('/log_fmlist', (req, res) => {
     if(dataHandler.dataToSend.txInfo.tx.length === 0) {
         res.status(500).send('No suitable transmitter to log.');
@@ -278,8 +291,18 @@ router.get('/log_fmlist', (req, res) => {
 
     if(serverConfig.extras?.fmlist_integration == false) {
         res.status(500).send('FMLIST Integration is not enabled on this server.');
+        return;
     }
+
     const clientIp = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
+    const txId = dataHandler.dataToSend.txInfo.id; // Extract the ID
+
+    // Check if the ID can be logged (i.e., not logged within the last 60 minutes)
+    if (!canLog(txId)) {
+        res.status(429).send(`ID ${txId} was already logged recently. Please wait before logging again.`);
+        return;
+    }
+
     const postData = JSON.stringify({
         station: {
             freq: dataHandler.dataToSend.freq,
@@ -336,6 +359,4 @@ router.get('/log_fmlist', (req, res) => {
     request.end();
 });
 
-
-
 module.exports = router;

web/css/breadcrumbs.css

@@ -305,6 +305,11 @@ pre {
     top: 10px;
 }
 
+.flex-container.contains-dropdown {
+    z-index: 999;
+    position: relative;
+}
+
 @media (max-width: 768px) {
     canvas, #flags-container {
         display: none;

web/css/dropdown.css

@@ -95,6 +95,7 @@
     display:block;
     transform: translateY(0);
     position:absolute;
+    z-index: 1000;
   }
   .dropdown.opened::before {
     transform: rotate(-225deg);

web/css/helpers.css

@@ -71,6 +71,10 @@
     margin-left: 20px;
 }
 
+.m-right-10 {
+    margin-right: 10px;
+}
+
 .m-right-20 {
     margin-right: 20px;
 }

web/index.ejs

@@ -232,7 +232,7 @@
                             <% } %>
                             <% if (fmlist_integration == true) { %>
                             <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"
+                            data-tooltip="<strong>LOG TO FMLIST</strong><br>Clicking this button logs the current station to FMLIST's visual logbook." aria-label="Log to FMLIST"
                             style="width: 80px; height: 48px;margin-left: 15px !important;"><i class="fa-solid fa-flag fa-lg"></i></button>
                             <% } %>
                         </div>
@@ -356,11 +356,11 @@
             
             <div class="form-group checkbox">
                 <input type="checkbox" tabindex="0"  id="extended-frequency-range" aria-label="Add decimals manually">
-                <label for="extended-frequency-range" class="tooltip" data-tooltip="Enabling this will allow you to enter the decimal point manually.<br>Useful for servers that use upconverters.">Manual decimal entry</label>
+                <label for="extended-frequency-range" class="tooltip" data-tooltip="Enabling this will allow you to enter the decimal point manually.<br>Useful for servers that use upconverters."><i class="fa-solid fa-toggle-off m-right-10"></i> Manual decimal entry</label>
             </div>
             <div class="form-group checkbox">
                 <input type="checkbox" tabindex="0" id="ps-underscores" aria-label="Add underscores to RDS PS">
-                <label for="ps-underscores" class="tooltip" data-tooltip="Enabling this option replaces spaces in RDS PS with underscores.">Underscores in RDS PS</label>
+                <label for="ps-underscores" class="tooltip" data-tooltip="Enabling this option replaces spaces in RDS PS with underscores."><i class="fa-solid fa-toggle-off m-right-10"></i> Underscores in RDS PS</label>
             </div>
 
             <div class="form-group bottom-20 hide-desktop" style="float: none;">

web/js/confighandler.js

@@ -315,8 +315,8 @@ function submitData() {
           }
         }
 
-        $("#fmlist-integration").prop("checked", data.extras ? data.extras?.fmlist_integration : "true");
+        $("#fmlist-integration").prop("checked", data.extras ? data.extras?.fmlistIntegration : "true");
-        $('#fmlist-omid').val(data.extras?.fmlist_omid);
+        $('#fmlist-omid').val(data.extras?.fmlistOmid);
       })
       .catch(error => {
         console.error('Error fetching data:', error.message);

web/js/init.js

@@ -1,9 +1,9 @@
-var currentDate = new Date('Sep 15, 2024 00:00:00');
+var currentDate = new Date('Sep 15, 2024 15:00:00');
 var day = currentDate.getDate();
 var month = currentDate.getMonth() + 1; // Months are zero-indexed, so add 1
 var year = currentDate.getFullYear();
 var formattedDate = day + '/' + month + '/' + year; 
-var currentVersion = 'v1.3.0 [' + formattedDate + ']';
+var currentVersion = 'v1.3.0.1 [' + formattedDate + ']';
 
 getInitialSettings();
 removeUrlParameters(); // Call this function to remove URL parameters

web/js/main.js

@@ -181,6 +181,38 @@ $(document).ready(function () {
         textInput.focus();
     });
     initTooltips();
+
+    //FMLIST logging
+    $('#log-fmlist').on('click', function() {
+        console.log('asdfdasf');
+        $.ajax({
+            url: './log_fmlist',
+            method: 'GET',
+            success: function(response) {
+                // Show a success toast with the response message
+                sendToast('success', 'Log successful', response, false, true);
+            },
+            error: function(xhr) {
+                let errorMessage;
+
+                // Handle different error status codes with custom messages
+                switch (xhr.status) {
+                    case 429:
+                        errorMessage = xhr.responseText;
+                        break;
+                    case 500:
+                        errorMessage = 'Server error: ' + xhr.responseText || 'Internal Server Error';
+                        break;
+                    default:
+                        errorMessage = xhr.statusText || 'An error occurred';
+                }
+
+                // Show an error toast with the specific error message
+                sendToast('error', 'Log failed', errorMessage, false, true);
+            }
+        });
+    });
+
 });
 
 function getServerTime() {
@@ -834,7 +866,7 @@ const updateDataElements = throttle(function(parsedData) {
     }
 
     if(parsedData.txInfo.tx.length > 1 && parsedData.txInfo.dist > 150 && parsedData.txInfo.dist < 4000) {
-        $('#log-fmlist').attr('disabled', 'false').removeClass('btn-disabled cursor-disabled');
+        $('#log-fmlist').removeAttr('disabled').removeClass('btn-disabled cursor-disabled');
     } else {
         $('#log-fmlist').attr('disabled', 'true').addClass('btn-disabled cursor-disabled');
     }
@@ -1016,18 +1048,4 @@ function fillPresets() {
             tuneTo(Number(presetText));
         });
     }
-}
+}
-
-//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

@@ -155,6 +155,13 @@ $(document).ready(() => {
     $('.version-string').text(currentVersion);
     
     setBg();
+
+    updateIconState();
+        
+        // Update icons when the checkbox state changes
+    $('input[type="checkbox"]').change(function() {
+        updateIconState();
+    });
 });
 
 function getQueryParameter(name) {
@@ -162,6 +169,17 @@ function getQueryParameter(name) {
     return urlParams.get(name);
 }
 
+function updateIconState() {
+    $('input[type="checkbox"]').each(function() {
+        var icon = $(this).siblings('label').find('i');
+        if ($(this).is(':checked')) {
+            icon.removeClass('fa-toggle-off').addClass('fa-toggle-on');
+        } else {
+            icon.removeClass('fa-toggle-on').addClass('fa-toggle-off');
+        }
+    });
+}
+
 function setTheme(themeName) {
     const themeColors = themes[themeName];
     if (themeColors) {
@@ -191,4 +209,5 @@ function setBg() {
     } else {
         $('body').css('background', 'var(--color-main)');
     }
-}
+}
+

web/setup.ejs

@@ -118,11 +118,11 @@
                         <div class="flex-container flex-center" style="margin: 30px;">
                             <div class="form-group checkbox">
                                 <input type="checkbox" tabindex="0"  id="tuner-public" aria-label="Public tuner (no password)">
-                                <label for="tuner-public">Public tuner</label>
+                                <label for="tuner-public"><i class="fa-solid fa-toggle-off m-right-10"></i> Public tuner</label>
                             </div>
                             <div class="form-group checkbox">
                                 <input type="checkbox" tabindex="0"  id="tuner-lock" aria-label="Admin lock (only admins can tune)">
-                                <label for="tuner-lock">Admin lock</label>
+                                <label for="tuner-lock"><i class="fa-solid fa-toggle-off m-right-10"></i> Admin lock</label>
                             </div><br>
                         </div>
         
@@ -156,7 +156,7 @@
             <div class="panel-full tab-content no-bg m-0" id="audio" role="tabpanel">
                 <h2>Audio settings</h2>
                 
-                <div class="flex-container">
+                <div class="flex-container contains-dropdown">
                         <div class="panel-33 p-bottom-20">
                             <h3>Device</h3>
                             <div class="form-group">
@@ -220,7 +220,7 @@
                         <h3>Miscellaneous</h3>
                         <div class="form-group checkbox bottom-20">
                             <input type="checkbox" tabindex="0"  id="audio-software-mode" aria-label="ALSA Software mode (plughw) - Linux only">
-                            <label for="audio-software-mode">Toggle ALSA software mode</label>
+                            <label for="audio-software-mode"><i class="fa-solid fa-toggle-off m-right-10"></i> ALSA software mode</label>
                         </div>   
                     </div>
                 </div>
@@ -228,7 +228,7 @@
 
             <div class="panel-full m-0 tab-content no-bg" id="webserver" role="tabpanel">
                 <h2>Webserver settings</h2>
-                <div class="flex-container">
+                <div class="flex-container contains-dropdown">
                     <div class="panel-33 p-bottom-20" style="padding-left: 20px; padding-right: 20px;">
                         <h3>Connection</h3>
                         <p class="text-gray">Leave the IP at 0.0.0.0 unless you explicitly know you have to change it.<br>Don't enter your public IP here.</p>
@@ -249,9 +249,9 @@
                                 <label for="bg-image">Image link:</label>
                                 <input class="input-text w-200" type="text" placeholder="" name="bg-image" id="bg-image">
                             </div>      
-                            <h4>Themes</h4>
+                            <h4 class="top-25">Themes</h4>
-                            <div class="form-group">
+                            <div class="form-group top-10">
-                                <label for="themes"><i class="fa-solid fa-palette"></i> Default server theme:</label>
+                                <label for="selected-theme"><i class="fa-solid fa-palette"></i> Default server theme</label>
                                 <div class="dropdown" id="server-theme-selector" style="margin-right: 0;">
                                     <input type="text" placeholder="Default" id="selected-theme" readonly tabindex="0">
                                     <ul class="options" tabindex="-1">
@@ -270,9 +270,12 @@
                     </div>
                     <div class="panel-33 p-bottom-20">
                         <h3>Antennas</h3>
+                        <div class="flex-container">
+                            
+                        </div>
                         <div class="form-group checkbox bottom-20">
                             <input type="checkbox" tabindex="0"  id="antenna-switch" aria-label="Antenna switch">
-                            <label for="antenna-switch">Enable the antenna switch</label>
+                            <label for="antenna-switch"><i class="fa-solid fa-toggle-off m-right-10"></i> Antenna switch</label>
                         </div><br>
                         
                         <div class="form-group checkbox">
@@ -282,7 +285,7 @@
                         <div class="form-group">
                             <label for="ant1-name">Antenna 1 name:</label>
                             <input class="input-text w-100" type="text" placeholder="Ant A" name="ant1-name" id="ant1-name">
-                        </div>
+                        </div><br>
 
                         <div class="form-group checkbox">
                             <input type="checkbox" tabindex="0"  id="ant2-enabled" aria-label="Enable antenna 2">
@@ -300,7 +303,7 @@
                         <div class="form-group">
                             <label for="ant3-name">Antenna 3 name:</label>
                             <input class="input-text w-100" type="text" placeholder="Ant C" name="ant3-name" id="ant3-name">
-                        </div>
+                        </div><br>
 
                         <div class="form-group checkbox">
                             <input type="checkbox" tabindex="0"  id="ant4-enabled" aria-label="Enable antenna 4">
@@ -315,14 +318,14 @@
                 </div>
 
                 <div class="flex-container">
-                    <div class="panel-50">
+                    <div class="panel-50" style="padding-left: 20px; padding-right: 20px;">
                         <h3>Tuning options</h3>
                         <p>If you want to limit which frequencies the users can tune to,<br>you can set the lower and upper limit here.<br>
                             <span class="text-gray">Enter frequencies in MHz.</span>
                         </p>
                         <div class="form-group checkbox" aria-label="Limit tuning">
                             <input type="checkbox" tabindex="0"  id="tuning-limit">
-                            <label for="tuning-limit">Limit tuning</label>
+                            <label for="tuning-limit"><i class="fa-solid fa-toggle-off m-right-10"></i> Limit tuning</label>
                         </div><br>
                         <div class="form-group">
                             <label for="tuning-lower-limit">Lower limit:</label>
@@ -363,14 +366,14 @@
                         <p>You can switch between American (RBDS) / Global (RDS) mode here.</p>
                         <div class="form-group checkbox bottom-20">
                             <input type="checkbox" tabindex="0"  id="rds-mode" aria-label="Enable american RDS mode (RBDS)">
-                            <label for="rds-mode">Enable American Mode (RBDS)</label>
+                            <label for="rds-mode"><i class="fa-solid fa-toggle-off m-right-10"></i> American Mode (RBDS)</label>
                         </div>      
                     </div>
                     <div class="panel-33">
                         <h3>Chat options</h3>
                         <div class="form-group checkbox bottom-20">
                             <input type="checkbox" tabindex="0"  id="chat-switch" aria-label="Enable chat">
-                            <label for="chat-switch">Enable chat</label>
+                            <label for="chat-switch"><i class="fa-solid fa-toggle-off m-right-10"></i> Chat</label>
                         </div>        
                     </div>
 
@@ -411,11 +414,11 @@
 
             <div class="panel-full m-0 tab-content no-bg" id="tuner" role="tabpanel">
                 <h2>Tuner settings</h2>
-                <div class="flex-container">
+                <div class="flex-container contains-dropdown">
                 <div class="panel-33 p-bottom-20">
                     <h3>Device type</h3>
                     <div class="form-group">
-                        <label for="themes"><i class="fa-solid fa-radio"></i> Device</label>
+                        <label for="device-type"><i class="fa-solid fa-radio"></i> Device</label>
                         <div class="dropdown" id="device-selector" style="margin-right: 0;">
                             <input type="text" placeholder="TEF6686 / TEA685x" id="device-type" readonly tabindex="0">
                             <ul class="options" tabindex="0">
@@ -490,7 +493,7 @@
                         <h4 class="bottom-20">Default frequency</h4>
                         <div class="form-group checkbox">
                             <input type="checkbox" tabindex="0"  id="default-freq-enable" aria-label="Enable deafult frequency for first client">
-                            <label for="default-freq-enable">Enable default frequency for first client</label>
+                            <label for="default-freq-enable"><i class="fa-solid fa-toggle-off m-right-10"></i> Default frequency for first client</label>
                         </div><br>
                         <div class="form-group">
                             <label for="default-freq">Default frequency</label>
@@ -505,7 +508,7 @@
                                 <p>Bandwidth switch allows the user to set the bandwidth manually.</p>
                                 <div class="form-group checkbox">
                                     <input type="checkbox" tabindex="0"  id="toggle-bw" aria-label="Toggle bandwidth switch">
-                                    <label for="toggle-bw">Toggle bandwidth switch</label>
+                                    <label for="toggle-bw"><i class="fa-solid fa-toggle-off m-right-10"></i> Bandwidth switch</label>
                                 </div><br>
                             </div>
                             <div class="panel-50 no-bg">
@@ -513,7 +516,7 @@
                                 <p>Toggling this option will put the tuner to sleep when no clients are connected.</p>
                                 <div class="form-group checkbox">
                                     <input type="checkbox" tabindex="0"  id="shutdown-tuner" aria-label="Auto shutdown">
-                                    <label for="shutdown-tuner">Toggle Auto-shutdown</label>
+                                    <label for="shutdown-tuner"><i class="fa-solid fa-toggle-off m-right-10"></i> Auto-shutdown</label>
                                 </div>
                             </div>
                         </div>
@@ -544,7 +547,7 @@
                         <p></p>
                         <div class="form-group checkbox">
                             <input type="checkbox" tabindex="0"  id="broadcast-tuner" aria-label="Broadcast to map">
-                            <label for="broadcast-tuner">Broadcast to map</label>
+                            <label for="broadcast-tuner"><i class="fa-solid fa-toggle-off m-right-10"></i> Broadcast to map</label>
                         </div><br>
                         <div class="form-group">
                             <label for="owner-contact">Owner contact:</label>
@@ -586,7 +589,7 @@
                     Your server also needs to have a valid UUID, which is obtained by registering on maps in the <strong>Identification & Map</strong> tab.</p>
                     <div class="form-group checkbox">
                         <input type="checkbox" tabindex="0"  id="fmlist-integration" aria-label="FMLIST integration">
-                        <label for="fmlist-integration">Toggle FMLIST integration</label>
+                        <label for="fmlist-integration"><i class="fa-solid fa-toggle-off m-right-10"></i> FMLIST integration</label>
                     </div><br>
                     <p>You can also fill in your OMID from FMLIST.org, if you want the logs to be saved to your account.</p>
                     <div class="form-group">