user kick, plugins, bugfixes

web/css/entry.css

@@ -7,4 +7,5 @@
 @import url("panels.css"); /* Different panels and their sizes */
 @import url("modal.css"); /* Modal window */
 @import url("setup.css"); /* Web setup interface */
+@import url("multiselect.css"); /* Multiselect tags */
 @import url("helpers.css"); /* Stuff that is used often such as text changers etc */

web/index.ejs

@@ -468,5 +468,8 @@
 </div>
 
 <script src="js/webserver.js"></script>
+<% plugins.forEach(function(plugin) { %>
+        <script src="js/plugins/<%= plugin %>"></script>
+<% }); %>
 </body>
 </html>

web/js/3las/main.js

@@ -20,6 +20,8 @@ function OnConnectivityCallback(isConnected) {
 }
 
 function OnPlayButtonClick(_ev) {
+    const $playbutton = $('.playbutton');
+    $playbutton.find('.fa-solid').toggleClass('fa-play fa-stop');
     try {
         if (Stream.ConnectivityFlag) {
             Stream.Stop();
@@ -29,8 +31,6 @@ function OnPlayButtonClick(_ev) {
             setTimeout(() => {
                 $playbutton.removeClass('bg-gray').prop('disabled', false);
             }, 3000);
-            const $playbutton = $('.playbutton');
-            $playbutton.find('.fa-solid').toggleClass('fa-play fa-stop');
         }
     } catch (error) {
         console.error(error);

web/js/confighandler.js

@@ -11,6 +11,7 @@ function submitData() {
     const defaultTheme = themeDataValue;
 
     const bgImage = $("#bg-image").val() || '';
+    const rdsMode = $('#rds-mode').is(":checked") || false;
     
     const ant1enabled = $('#ant1-enabled').is(":checked") || false;
     const ant2enabled = $('#ant2-enabled').is(":checked") || false;
@@ -71,6 +72,11 @@ function submitData() {
     const tunePass = $('#tune-pass').val();
     const adminPass = $('#admin-pass').val();
 
+    let plugins = [];
+    $('#plugin-list option:selected').each(function() {
+      plugins.push($(this).data('name'));
+  });
+
     const publicTuner = $("#tuner-public").is(":checked");
     const lockToAdmin = $("#tuner-lock").is(":checked");
     const autoShutdown = $("#shutdown-tuner").is(":checked") || false;
@@ -88,7 +94,8 @@ function submitData() {
         defaultTheme,
         presets,
         banlist,
-        bgImage
+        bgImage,
+        rdsMode,
       },
       antennas: {
         enabled: antennasEnabled,
@@ -136,6 +143,7 @@ function submitData() {
         tunePass,
         adminPass,
       },
+      plugins,
       device,
       publicTuner, 
       lockToAdmin,
@@ -181,6 +189,7 @@ function submitData() {
         $("#chat-switch").prop("checked", data.webserver.chatEnabled || false);
 
         $('#selected-theme').val(data.webserver.defaultTheme || 'Default');
+        $('#rds-mode').prop("checked", data.webserver.rdsMode || false);
 
         var selectedTheme = $(".option[data-value='" + data.webserver.defaultTheme + "']");
         
@@ -273,6 +282,14 @@ function submitData() {
         $("#shutdown-tuner").prop("checked", data.autoShutdown);
         $("#antenna-switch").prop("checked", data.antennas?.enabled);
 
+        data.plugins.forEach(function(name) {
+          // Find the option with the corresponding data-name attribute and mark it as selected
+          $('#plugin-list option[data-name="' + name + '"]').prop('selected', true);
+        });
+      
+        // Update the multi-select element to reflect the changes
+        $('#plugin-list').trigger('change');
+
         // Check if latitude and longitude are present in the data
         if (data.identification.lat && data.identification.lon) {
           // Set the map's center to the received coordinates

web/js/dropdown.js

@@ -54,3 +54,18 @@ const closeDropdownFromOutside = (event) => {
 $(document).on('click', closeDropdownFromOutside);
 $listOfOptions.on('click', selectOption);
 $dropdowns.on('click', toggleDropdown);
+
+// MULTISELECT
+$('.multiselect option').mousedown(function(e) {
+  e.preventDefault();
+  var originalScrollTop = $(this).parent().scrollTop();
+  console.log(originalScrollTop);
+  $(this).prop('selected', $(this).prop('selected') ? false : true);
+  var self = this;
+  $(this).parent().focus();
+  setTimeout(function() {
+      $(self).parent().scrollTop(originalScrollTop);
+  }, 0);
+  
+  return false;
+});

web/js/init.js

@@ -3,7 +3,7 @@ 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.1.9c [' + formattedDate + ']';
+var currentVersion = 'v1.2.0 [' + formattedDate + ']';
 
 getInitialSettings();
 
@@ -20,6 +20,7 @@ function getInitialSettings() {
             localStorage.setItem('preset3', data.presets[2]);
             localStorage.setItem('preset4', data.presets[3]);
             localStorage.setItem('bgImage', data.bgImage);
+            localStorage.setItem('rdsMode', data.rdsMode);
         },
         error: function (error) {
             console.error('Error:', error);

web/js/main.js

@@ -25,6 +25,8 @@ const usa_programmes = [
     "Spanish Talk", "Spanish Music", "Hip Hop", "", "", "Weather", "Emergency Test", "Emergency" 
 ];
 
+const rdsMode = localStorage.getItem('rdsMode');
+
 $(document).ready(function () {
     var canvas = $('#signal-canvas')[0];
 
@@ -359,7 +361,16 @@ function updateCanvas(parsedData, signalChart) {
 }
 
 socket.onmessage = (event) => {
+    if (event.data == 'KICK') {
+        console.log('Kick iniitiated.')
+        setTimeout(() => {
+          window.location.href = '/403';
+        }, 500); // Adjust the delay as needed
+        return;
+    }
+
     parsedData = JSON.parse(event.data);
+
     updatePanels(parsedData);
     if(localStorage.getItem("smoothSignal") == 'true') {
         const sum = signalData.reduce((acc, strNum) => acc + parseFloat(strNum), 0);
@@ -701,7 +712,7 @@ const updateDataElements = throttle(function(parsedData) {
     updateHtmlIfChanged($dataRt0, processString(parsedData.rt0, parsedData.rt0_errors));
     updateHtmlIfChanged($dataRt1, processString(parsedData.rt1, parsedData.rt1_errors));
 
-    updateTextIfChanged($dataPty, europe_programmes[parsedData.pty]);
+    updateTextIfChanged($dataPty, rdsMode == 'true' ? usa_programmes[parsedData.pty] : europe_programmes[parsedData.pty]);
 
     if (parsedData.rds === true) {
         $flagDesktopCointainer.css('background-color', 'var(--color-2)');

web/setup.ejs

@@ -25,6 +25,7 @@
                 <li data-panel="connection">Connection</li>
                 <li data-panel="audio">Audio</li>
                 <li data-panel="webserver">Webserver</li>
+                <li data-panel="plugins">Plugins</li>
                 <li data-panel="identification">Info & Map</li>
                 <li class="logout-link text-gray"><i class="fas fa-sign-out"></i></li>
             </ul>
@@ -59,7 +60,7 @@
                             <th>IP Address</th>
                             <th>Location</th>
                             <th>Online since</th>
-                            <!--<th></th>-->
+                            <th></th>
                         </tr>
                     </thead>
                     <tbody>
@@ -69,7 +70,7 @@
                                     <td><%= user.ip %></td>
                                     <td><%= user.location %></td>
                                     <td><%= user.time %></td>
-                                    <!--<td><a href="./kick?user=<% user.ip %>">Kick</a></td>-->
+                                    <td><a href="./kick?ip=<%= user.ip %>">Kick</a></td>
                                 </tr>
                             <% }); %>
                         <% } else { %>
@@ -78,7 +79,32 @@
                             </tr>
                         <% } %>
                     </tbody>
-                </table>                
+                </table>    
+                
+                <h3>Maintenance</h3>
+                <div class="flex-container flex-center" style="margin: 30px;">
+                    <div class="form-group checkbox">
+                        <input type="checkbox" id="tuner-public">
+                        <label for="tuner-public">Public tuner (no password)</label>
+                    </div>
+                    <div class="form-group checkbox">
+                        <input type="checkbox" id="tuner-lock">
+                        <label for="tuner-lock">Admin lock [only admins can tune]</label>
+                    </div>
+                    <div class="form-group checkbox">
+                        <input type="checkbox" id="shutdown-tuner">
+                        <label for="shutdown-tuner">Auto-shutdown</label>
+                    </div><br>
+                </div>
+
+                <div class="form-group">
+                    <label for="tune-pass">Tune password:</label>
+                    <input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
+                </div>
+                <div class="form-group">
+                    <label for="admin-pass">Admin setup password:</label>
+                    <input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
+                </div><br>
 
                 <h3>Console</h3>
                 <% if (consoleOutput && consoleOutput.length > 0) { %>
@@ -91,37 +117,8 @@
                     <p>No console output available.</p>
                 <% } %>
 
-                <h3>Maintenance</h3>
-                <div class="flex-container">
-                    <div class="panel-50 no-bg">
-                        <div class="form-group checkbox">
-                            <input type="checkbox" id="tuner-public">
-                            <label for="tuner-public">Allow tuner control without password</label>
-                        </div>
-                        <div class="form-group checkbox">
-                            <input type="checkbox" id="tuner-lock">
-                            <label for="tuner-lock">Lock the tuner [only admins can tune with this option]</label>
-                        </div>
-                    </div>
-                    <div class="panel-50 no-bg">
-                        <div class="form-group checkbox">
-                            <input type="checkbox" id="shutdown-tuner">
-                            <label for="shutdown-tuner">Auto-shutdown tuner when no one is online</label>
-                        </div><br>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label for="tune-pass">Tune password:</label>
-                    <input class="input-text w-200" type="password" name="tune-pass" id="tune-pass">
-                </div>
-                <div class="form-group">
-                    <label for="admin-pass">Admin setup password:</label>
-                    <input class="input-text w-200" type="password" name="admin-pass" id="admin-pass">
-                </div><br>
-
                 <p class="text-small">Version: <span class="version-string color-4"></span></p>
-                <p class="p-bottom-20"><a href="https://github.com/noobishsvk/fm-dx-webserver" target="_blank">Check for the latest source code</a> • <a href="https://buymeacoffee.com/noobish" target="_blank">Support the developer</a></p>
+                <p><a href="https://github.com/noobishsvk/fm-dx-webserver" target="_blank">Check for the latest source code</a> • <a href="https://buymeacoffee.com/noobish" target="_blank">Support the developer</a></p>
             </div>
     
             <div class="panel-100 tab-content" id="connection">
@@ -355,6 +352,13 @@
                     </div>
 
                     <div class="panel-50 no-bg">
+                        <h3>RDS Mode</h3>
+                        <p>You can switch between American (RBDS) / Global (RDS) mode here.</p>
+                        <div class="form-group checkbox bottom-20">
+                            <input type="checkbox" id="rds-mode">
+                            <label for="rds-mode">Enable American Mode (RBDS)</label>
+                        </div>      
+
                         <h3>Presets</h3>
                         <p>You can set up to 4 presets.<br>These presets are accessible with the F1-F4 buttons.<br>
                         <span class="text-gray">Enter frequencies in MHz.</span></p>
@@ -399,6 +403,21 @@
 
             </div>
 
+            <div class="panel-100 tab-content" id="plugins">
+                <h2>Plugins</h2>
+                <p>Any compatible <strong>.js</strong> plugin, which is in the "plugins" folder, will be listed here.<br>
+                    Click on the individual plugins to enable/disable them.</p>
+                    <select id="plugin-list" class="multiselect" multiple>
+                        <% plugins.forEach(function(plugin) { %>
+                            <option data-name="<%= plugin.frontEndPath %>" title="<%= plugin.name %> by <%= plugin.author %> [v<%= plugin.version %>]">
+                                <%= plugin.name %> by <%= plugin.author %> [v<%= plugin.version %>]
+                            </option>
+                        <% }); %>
+                    </select><br><br>
+                    <a href="https://github.com/NoobishSVK/fm-dx-webserver/wiki/Plugin-List" target="_blank">Download new plugins here!</a>
+                    
+            </div>
+
             <div class="panel-100 tab-content" id="tuner">
                 <h2>Tuner Specific Settings</h2>
                 <div class="form-group">