bugfixes, new options in settings panel

2026-02-26 22:13:53 +01:00 · 2024-03-03 19:30:34 +01:00
parent d90c8ed479
commit 36647b79b5
9 changed files with 228 additions and 125 deletions
--- a/index.js
+++ b/index.js
@@ -161,6 +161,9 @@ function connectToXdrd() {
            
            if (authFlags.authMsg && authFlags.firstClient) {
              client.write('x\n');
+              if(serverConfig.defaultFreq) {
+                client.write('T' + Math.round(serverConfig.defaultFreq * 1000) +'\n')
+              }
              client.write('T87500\n');
              client.write('A0\n');
              client.write('G00\n');
@@ -203,11 +206,13 @@ function connectToXdrd() {
 }

 client.on('close', () => {
-  logWarn('Disconnected from xdrd. Attempting to reconnect.');
  if(serverConfig.autoShutdown === false) {
+    logWarn('Disconnected from xdrd. Attempting to reconnect.');
    setTimeout(function () {
      connectToXdrd();
    }, 2000)
+  } else {
+    logWarn('Disconnected from xdrd.');
  }
 });

@@ -241,7 +246,8 @@ app.get('/static_data', (req, res) => {
    qthLatitude: serverConfig.identification.lat,
    qthLongitude: serverConfig.identification.lon,
    streamEnabled: streamEnabled,
-    presets: serverConfig.webserver.presets || []
+    presets: serverConfig.webserver.presets || [],
+    defaultTheme: serverConfig.webserver.defaultTheme || 'theme1'
  });
 });

@@ -345,7 +351,8 @@ app.get('/', (req, res) => {
    antennaSwitch: serverConfig.antennaSwitch,
    tuningLimit: serverConfig.webserver.tuningLimit,
    tuningLowerLimit: serverConfig.webserver.tuningLowerLimit,
-    tuningUpperLimit: serverConfig.webserver.tuningUpperLimit
+    tuningUpperLimit: serverConfig.webserver.tuningUpperLimit,
+    chatEnabled: serverConfig.webserver.chatEnabled,
   })
  }
 });
@@ -476,13 +483,14 @@ app.get('/getDevices', (req, res) => {
 /**
 * WEBSOCKET BLOCK
 */
+let lastDisconnectTime = null;

 wss.on('connection', (ws, request) => {
  const clientIp = request.headers['x-forwarded-for'] || request.connection.remoteAddress;
  currentUsers++;
  dataHandler.showOnlineUsers(currentUsers);
  if(currentUsers > 0 && serverConfig.autoShutdown === true) {
-    client.write('x\n'); 
+    connectToXdrd(); 
  }

  // Use ipinfo.io API to get geolocation information
@@ -556,9 +564,19 @@ wss.on('connection', (ws, request) => {
      connectedUsers.splice(index, 1); // Remove the user's data from connectedUsers array
    }

+    if (currentUsers === 0 && serverConfig.defaultFreq && serverConfig.enableDefaultFreq && serverConfig.enableDefaultFreq === true) {
+      setTimeout(function() {
+        if(currentUsers === 0) {
+          client.write('T' + Math.round(serverConfig.defaultFreq * 1000) +'\n');
+          dataHandler.dataToSend.freq = Number(serverConfig.defaultFreq).toFixed(3);
+        }
+      }, 10000)
+    }
+  
    if (currentUsers === 0 && serverConfig.autoShutdown === true) {
      client.write('X\n');
    }
+
    logInfo(`Web client \x1b[31mdisconnected\x1b[0m (${clientIp}) \x1b[90m[${currentUsers}]`);
  });  

--- a/server_config.js
+++ b/server_config.js
@@ -14,7 +14,8 @@ let serverConfig = {
  webserver: {
    webserverIp: "0.0.0.0",
    webserverPort: 8080,
-    banlist: []
+    banlist: [],
+    chatEnabled: true
  },
  xdrd: {
    xdrdIp: "127.0.0.1",
@@ -39,9 +40,11 @@ let serverConfig = {
    tunePass: "",
    adminPass: ""
  },
+  defaultFreq: 87.5,
  publicTuner: true,
  lockToAdmin: false,
  autoShutdown: false,
+  enableDefaultFreq: false
 };

 function deepMerge(target, source)
--- a/web/index.ejs
+++ b/web/index.ejs
@@ -71,7 +71,7 @@
                <div class="flex-container">
                    <div class="panel-75 flex-container no-bg">
                        <div class="panel-10 no-bg h-100 m-0 m-right-20 hide-phone" style="width: 100px;margin-right: 20px !important;">
-                            <button class="playbutton"><i class="fa-solid fa-play fa-lg"></i></button>
+                            <button class="playbutton" aria-label="Play / Stop Button"><i class="fa-solid fa-play fa-lg"></i></button>
                        </div>
                        <div class="panel-100 m-0 hover-brighten flex-center" id="ps-container" style="height: 90px;">
                            <span class="text-big" id="data-ps"></span>
@@ -124,7 +124,7 @@
                            
                            <% if (antennaSwitch) { %>
                                <div class="panel-50 no-bg h-100 m-0 dropdown" id="data-ant" style="margin-right: 25px;">
-                                    <input type="text" placeholder="Ant A" readonly />
+                                    <input type="text" placeholder="Ant A" readonly>
                                    <ul class="options">
                                        <li data-value="0" class="option">Ant A</li>
                                        <li data-value="1" class="option">Ant B</li>
@@ -188,9 +188,11 @@
                        </ul>
                    </div>
                </div>
+                <% if (chatEnabled) { %>
                <div class="panel-10 no-bg h-100 hide-phone" style="width: 100px; height: 100px;">
                    <button class="chatbutton bg-color-2"><i class="fa-solid fa-comments fa-lg"></i> (<span class="chat-messages-count">0</span>)</button>
                </div>
+                <% } %>
            </div>
        </div>
        <div id="flags-container-phone" class="panel-33">
@@ -210,7 +212,9 @@
    </div>
    
    <button id="settings" aria-label="Settings"><i class="fa-solid fa-gear"></i></button>
+    <% if (chatEnabled) { %>
    <button class="chatbutton hide-desktop bg-color-2"><i class="fa-solid fa-comments fa-lg"></i> (<span class="chat-messages-count">0</span>)</button>
+    <% } %>
    <button id="users-online-container" class="hide-phone" aria-label="Online users"><i class="fa-solid fa-user"></i> <span class="users-online"></span></button>

 <div id="myModal" class="modal">
@@ -223,7 +227,7 @@
            <div class="form-group top-25">
                <label for="themes"><i class="fa-solid fa-palette"></i> Theme:</label>
                <div class="dropdown" id="theme-selector">
-                    <input type="text" placeholder="Theme" readonly />
+                    <input type="text" placeholder="Default" readonly>
                    <ul class="options">
                        <li class="option" data-value="theme1">Default</li>
                        <li class="option" data-value="theme2">Cappuccino</li>
@@ -241,7 +245,7 @@
            <div class="form-group top-25">
                <label for="signal"><i class="fa-solid fa-signal"></i> Signal units:</label>
                <div class="dropdown" id="signal-selector">
-                    <input type="text" placeholder="Signal Units" readonly />
+                    <input type="text" placeholder="dBf" readonly>
                    <ul class="options">
                        <li class="option" data-value="dbf">dBf</li>
                        <li class="option" data-value="dbuv">dBuV</li>
@@ -296,7 +300,7 @@
                            <br>
                            <br>
                            <% if(ownerContact){ %>
-                                <span>Owner contact:<span><br>
+                                <span>Owner contact:</span><br>
                                <span class="text-small m-0"><%= ownerContact %></span>
                             <% } %>
                        </div>
@@ -315,7 +319,7 @@
            <div class="hover-brighten br-0" style="height: 50px;padding:12px;" onclick="window.open('https://buymeacoffee.com/noobish')">
                <strong>Support</strong> the developer!
            </div>
-            <div class="hover-brighten br-0" style="height: 50px;padding:12px;"onclick="window.open('https://discord.com/invite/ZAVNdS74mC')">
+            <div class="hover-brighten br-0" style="height: 50px;padding:12px;" onclick="window.open('https://discord.com/invite/ZAVNdS74mC')">
                Join our <strong>OpenRadio Discord</strong> community!
            </div>
        </div>
--- a/web/js/confighandler.js
+++ b/web/js/confighandler.js
@@ -4,12 +4,22 @@ function submitData() {
    const tuningLimit = $('#tuning-limit').is(":checked") || false;
    const tuningLowerLimit = $('#tuning-lower-limit').val() || '0';
    const tuningUpperLimit = $('#tuning-upper-limit').val() || '108';
+    const chatEnabled = $("#chat-switch").length > 0 ? $("#chat-switch").is(":checked") : true;
+
+    var themeSelectedValue = $("#selected-theme").val();
+    var themeDataValue = $(".option:contains('" + themeSelectedValue + "')").attr('data-value') || 'theme1';
+
+    const defaultTheme = themeDataValue;
+    
    let presets = [];
    presets.push($('#preset1').val() || '87.5');
    presets.push($('#preset2').val() || '87.5');
    presets.push($('#preset3').val() || '87.5');
    presets.push($('#preset4').val() || '87.5');

+    const enableDefaultFreq = $('#default-freq-enable').is(":checked") || false;
+    const defaultFreq = $('#default-freq').val() || '87.5';
+
    let banlist = [];
    if($('#ip-addresses').length > 0) {
      validateAndAdd(banlist);
@@ -50,6 +60,8 @@ function submitData() {
        tuningLimit,
        tuningLowerLimit,
        tuningUpperLimit,
+        chatEnabled,
+        defaultTheme,
        presets,
        banlist
      },
@@ -80,6 +92,8 @@ function submitData() {
      lockToAdmin,
      autoShutdown,
      antennaSwitch,
+      enableDefaultFreq,
+      defaultFreq,
    };

    if(adminPass.length < 1) {
@@ -118,6 +132,16 @@ function submitData() {
        $('#tuning-limit').prop("checked", data.webserver.tuningLimit);
        $('#tuning-lower-limit').val(data.webserver.tuningLowerLimit || "");
        $('#tuning-upper-limit').val(data.webserver.tuningUpperLimit || "");
+        $("#chat-switch").prop("checked", data.webserver.chatEnabled || false);
+
+        $('#selected-theme').val(data.webserver.defaultTheme || 'Default');
+
+        var selectedTheme = $(".option[data-value='" + data.webserver.defaultTheme + "']");
+        
+        // If the option exists, set its text as the value of the input
+        if (selectedTheme.length > 0) {
+            $("#selected-theme").val(selectedTheme.text());
+        }
        
        if(Array.isArray(data.webserver.presets)) {
          $('#preset1').val(data.webserver.presets[0] || "");
@@ -126,6 +150,9 @@ function submitData() {
          $('#preset4').val(data.webserver.presets[3] || "");
        }

+        $("#default-freq-enable").prop("checked", data.enableDefaultFreq || false);
+        $('#default-freq').val(data.defaultFreq || "87.5");
+
        $('#ip-addresses').val(data.webserver.banlist?.join('\n') || "");

        $('#xdrd-ip').val(data.xdrd.xdrdIp);
--- a/web/js/init.js
+++ b/web/js/init.js
@@ -9,6 +9,7 @@ function getInitialSettings() {
            localStorage.setItem('qthLatitude', data.qthLatitude);
            localStorage.setItem('qthLongitude', data.qthLongitude);
            localStorage.setItem('streamEnabled', data.streamEnabled);
+            localStorage.setItem('defaultTheme', data.defaultTheme);
            localStorage.setItem('preset1', data.presets[0]);
            localStorage.setItem('preset2', data.presets[1]);
            localStorage.setItem('preset3', data.presets[2]);
--- a/web/js/main.js
+++ b/web/js/main.js
@@ -362,7 +362,7 @@ function getCurrentFreq() {
 function checkKey(e) {
    e = e || window.event;

-    if ($('#password:focus').length > 0) {
+    if ($('#password:focus').length > 0 || $('#chat-send-message:focus').length > 0) {
        return; 
    }

--- a/web/js/settings.js
+++ b/web/js/settings.js
@@ -29,8 +29,13 @@
        // Theme Selector
        const themeSelector = $('#theme-selector');
        const savedTheme = localStorage.getItem('theme');
+        const defaultTheme = localStorage.getItem('defaultTheme');
        const savedUnit = localStorage.getItem('signalUnit');

+        if(defaultTheme && themes[defaultTheme]) {
+            setTheme(defaultTheme);
+        }
+
        if (savedTheme && themes[savedTheme]) {
            setTheme(savedTheme);
            themeSelector.find('input').val(themeSelector.find('.option[data-value="' + savedTheme + '"]').text());
--- a/web/js/setup.js
+++ b/web/js/setup.js
@@ -9,12 +9,6 @@ $(document).ready(function() {
  MapCreate();
  fetchData();

-  setTimeout( function() {
-    if ($('.nav li.active[data-panel="status"]').length > 0) {
-      $('#submit-config').hide();
-    }
-  }, 50 )
-
  map.on('click', function(ev) {
    $('#lat').val((ev.latlng.lat).toFixed(6));
    $('#lng').val((ev.latlng.lng).toFixed(6));
@@ -31,7 +25,7 @@ $(document).ready(function() {
    }
  });

-  $('#status').show();
+  $('#dashboard').show();
  showPanelFromHash();
  $('.nav li').click(function() {
    // Remove background color from all li elements
@@ -54,12 +48,6 @@ $(document).ready(function() {
            map.invalidateSize();
        }, 200);
    }
-
-    if(panelId == 'status') {
-      $('#submit-config').hide();
-    } else {
-      $('#submit-config').show();
-    }
  });


--- a/web/setup.ejs
+++ b/web/setup.ejs
@@ -20,21 +20,19 @@
        </div>
        <div class="panel-100">
            <ul class="nav">
-                <li data-panel="status" class="active">Status</li>
+                <li data-panel="dashboard" class="active">Dashboard</li>
                <li data-panel="connection">Connection</li>
                <li data-panel="audio">Audio</li>
                <li data-panel="webserver">Webserver</li>
-                <li data-panel="identification">Identification</li>
-                <li data-panel="mapbroadcast">Online map</li>
-                <li data-panel="maintenance">Maintenance</li>
+                <li data-panel="identification">Info & Map</li>
                <li class="logout-link text-gray"><i class="fas fa-sign-out"></i></li>
            </ul>
        </div>

        <div id="login-message"></div>
        <div class="panel-100">
-            <div class="panel-100 tab-content" id="status">
-                <h2>STATUS</h2>
+            <div class="panel-100 tab-content" id="dashboard">
+                <h2>Dashboard</h2>

                <div class="panel-100 flex-container auto">
                    <div class="panel-33">
@@ -90,7 +88,36 @@
                    <p>No console output available.</p>
                <% } %>

-                <p>Version: <span class="version-string color-4"></span></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>
            </div>
    
@@ -183,14 +210,55 @@

            <div class="panel-100 tab-content" id="webserver">
                <h2>Webserver settings</h2>
+                <div class="flex-container">
+                    <div class="panel-50 no-bg">
                        <h3>Antenna options</h3>
                        <div class="form-group checkbox bottom-20">
                            <input type="checkbox" id="antenna-switch">
                            <label for="antenna-switch">Enable the antenna switch</label>
-                </div><br>
+                        </div>        
+                    </div>
+                    <div class="panel-50 no-bg">
+                        <h3>Chat options</h3>
+                        <div class="form-group checkbox bottom-20">
+                            <input type="checkbox" id="chat-switch">
+                            <label for="chat-switch">Enable chat</label>
+                        </div>        
+                    </div>
+                </div>

+                <h3>Themes</h3>
+                <div class="form-group">
+                    <label for="themes"><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>
+                        <ul class="options">
+                            <li class="option" data-value="theme1">Default</li>
+                            <li class="option" data-value="theme2">Cappuccino</li>
+                            <li class="option" data-value="theme3">Nature</li>
+                            <li class="option" data-value="theme4">Ocean</li>
+                            <li class="option" data-value="theme5">Terminal</li>
+                            <li class="option" data-value="theme6">Nightlife</li>
+                            <li class="option" data-value="theme7">Blurple</li>
+                            <li class="option" data-value="theme8">Construction</li>
+                            <li class="option" data-value="theme9">AMOLED</li>
+                        </ul>
+                    </div>
+                </div>
+                <br><hr>
+
+                <div class="flex-container">
+                    <div class="panel-50 no-bg">
                        <h3>Tuning options</h3>
-                <p>If you want to limit which frequencies the users can tune to, you can set the lower and upper limit here.<br>
+                        <div class="form-group checkbox">
+                            <input type="checkbox" id="default-freq-enable">
+                            <label for="default-freq-enable">Enable default frequency for first client</label>
+                        </div><br>
+                        <div class="form-group">
+                            <label for="default-freq">Default frequency:</label>
+                            <input class="input-text w-150" type="text" placeholder="87.5" name="default-freq" id="default-freq">
+                        </div>
+                        <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">
@@ -205,9 +273,11 @@
                            <label for="tuning-upper-limit">Upper Limit:</label>
                            <input class="input-text w-100" type="text" placeholder="108" name="tuning-upper-limit" id="tuning-upper-limit">
                        </div>
+                    </div>

+                    <div class="panel-50 no-bg">
                        <h3>Presets</h3>
-                <p>You can set up to 4 presets. These presets are accessible with the F1-F4 buttons.<br>
+                        <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>
                        <div class="form-group">
                            <label for="preset1">Preset 1:</label>
@@ -216,7 +286,7 @@
                        <div class="form-group">
                            <label for="preset2">Preset 2:</label>
                            <input class="input-text w-100" type="text" placeholder="87.5" name="preset2" id="preset2">
-                </div>
+                        </div><br>
                        <div class="form-group">
                            <label for="preset1">Preset 3:</label>
                            <input class="input-text w-100" type="text" placeholder="87.5" name="preset3" id="preset3">
@@ -225,6 +295,10 @@
                            <label for="preset1">Preset 4:</label>
                            <input class="input-text w-100" type="text" placeholder="87.5" name="preset4" id="preset4">
                        </div>
+                    </div>
+                </div>
+
+                <br><hr>

                <h3>Banlist</h3>
                <p>If you have users that don't behave in your chat, you can choose to ban them by their IP address.<br>
@@ -237,9 +311,13 @@
            </div>
    
            <div class="panel-100 tab-content" id="identification">
-                <h2>Tuner Identification info</h2>
+                <h2>Identification & Map</h2>

-                <p class="text-gray">Set your tuner name and description here. This info will be visible to anyone who tunes in. </p>
+                <div class="flex-container">
+                    <div class="panel-50 no-bg">
+                        <h3>Basic info</h3>
+                        
+                        <p class="text-gray">Set your tuner name and description here.<br>This info will be visible to anyone who tunes in. </p>
                        <div class="panel-100" style="padding-left: 20px; padding-right: 20px;">
                            <label for="webserver-name" style="width: 100%;max-width: 768px; margin:auto;">Webserver name:</label>
                            <input style="width: 100%; max-width: 768px;" class="input-text" type="text" name="webserver-name" id="webserver-name" placeholder="Fill your server name here." maxlength="32">
@@ -247,6 +325,30 @@
                            <label for="webserver-desc" style="width: 100%;max-width: 768px; margin: auto;">Webserver description:</label>
                            <textarea id="webserver-desc" name="webserver-desc" placeholder="Fill the server description here. You can put useful info here such as your antenna setup. You can use simple markdown." maxlength="255"></textarea>
                        </div>
+                    </div>
+
+                    <div class="panel-50 no-bg">
+                        <h3>Online map</h3>
+                        <p class="m-0 text-gray">If your location information is filled,<br>you can add your tuner to a public list.</p>
+                        <p></p>
+                        <div class="form-group checkbox">
+                            <input type="checkbox" id="broadcast-tuner">
+                            <label for="broadcast-tuner">Broadcast to map</label>
+                        </div><br>
+                        <div class="form-group">
+                            <label for="owner-contact">Owner contact:</label>
+                            <input class="input-text" type="text" placeholder="Your e-mail, discord..." name="owner-contact" id="owner-contact">
+                        </div>
+                        <div class="form-group">
+                            <label for="broadcast-address">Broadcast address (if using a proxy):</label>
+                            <input class="input-text" type="text" name="broadcast-address" id="broadcast-address">
+                        </div>
+        
+                        <p>Check your tuner at <strong><a href="https://list.fmdx.pl" target="_blank" class="color-4">list.fmdx.pl</a></strong>.</p>
+                    </div>
+                </div>
+                <br>
+                <hr>

                <h3>Location:</h3>
                <p class="text-gray">Location info is useful for automatic identification of stations using RDS.</p>
@@ -264,51 +366,6 @@
                <br>
            </div>

-            <div class="panel-100 tab-content" id="mapbroadcast">
-                <h2>Map broadcast</h2>
-                <p class="m-0">If your location information is filled, you can add your tuner to a public list.</p>
-                <p></p>
-                <div class="form-group checkbox">
-                    <input type="checkbox" id="broadcast-tuner">
-                    <label for="broadcast-tuner">Broadcast to map</label>
-                </div><br>
-                <div class="form-group">
-                    <label for="owner-contact">Owner contact:</label>
-                    <input class="input-text" type="text" placeholder="Your e-mail, discord..." name="owner-contact" id="owner-contact">
-
-                    <label for="broadcast-address">Broadcast address (if using a proxy):</label>
-                    <input class="input-text" type="text" name="broadcast-address" id="broadcast-address">
-                </div>
-
-                <p>Check your tuner at <strong><a href="https://list.fmdx.pl" target="_blank" class="color-4">list.fmdx.pl</a></strong>.</p>
-            </div>
-    
-            <div class="panel-100 tab-content" id="maintenance">
-                <h2>Maintenance</h2>
-                <div class="text-left top-25 bottom-20 panel-33 auto">
-                    <div class="form-group checkbox">
-                        <input type="checkbox" id="tuner-public">
-                        <label for="tuner-public">Allow tuner control without password</label>
-                    </div><br>
-                    <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><br><br>
-                    <div class="form-group checkbox">
-                        <input type="checkbox" id="shutdown-tuner">
-                        <label for="shutdown-tuner">Auto-shutdown [XDR Only]</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>
-            </div>
-
            <button id="submit-config" style="height:48px; width: 200px;margin:20px;" onclick="submitData();">Save settings</button>
        </div>