Merge pull request #79 from dr-dolomite/QuecManager

Fxed critical bug on bands table when viewing on mobile

www/about.html

@@ -23,6 +23,7 @@
     <script src="/js/styles/nav-burger.js"></script>
     <script src="/js/styles/modal-trigger.js"></script>
     <script src="/js/utils/reboot.js"></script>
+    <script src="/js/utils/restart-connection.js"></script>
     <script defer src="/js/auth/auth.js"></script>
 
     <script>
@@ -58,7 +59,7 @@
 
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
+          <a class="navbar-item" href="/"> Home </a>
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
@@ -74,36 +75,43 @@
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Advance </a>
             <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
+              <a class="navbar-item" href="/advance-settings.html">
+                Advance Settings
+              </a>
               <a class="navbar-item" href="#">Experimental Features</a>
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
           </div>
-          <a class="navbar-item" href="/about.html"> About </a>
+          <a class="navbar-item has-text-weight-bold" href="/about.html">
+            About
+          </a>
         </div>
 
         <div class="navbar-end">
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
-              <p class="control is-expanded-mobile">
+              <div class="control is-expanded-mobile">
-                <a
+                <div
-                  href="#"
+                  id="restartConnectionBtn"
                   class="button is-link is-outlined is-fullwidth-mobile"
                 >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
                   <span>Restart Connection</span>
-                </a>
+                </div>
-              </p>
+              </div>
               <div class="is-flex is-mobile is-align-items-center">
-                <p class="control">
+                <div class="control">
-                  <div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
+                  <div
+                    class="button is-warning is-outlined reboot-modal"
+                    data-target="reboot-modal"
+                  >
                     <span class="icon">
                       <i class="fas fa-power-off"></i>
                     </span>
                   </div>
-                </p>
+                </div>
                 <p class="control ml-2 is-mobile">
                   <a
                     href="#"
@@ -294,7 +302,7 @@
           <div id="loading-content" style="display: none">
             <div class="custom-loader"></div>
             <div class="countdown-text">
-              Rebooting... <span id="countdown">40</span>s
+              Rebooting... <span id="countdown">80</span>s
             </div>
           </div>
           <div class="buttons" id="modal-buttons">

www/advance-settings.html

@@ -23,6 +23,7 @@
     <script src="/js/styles/nav-burger.js"></script>
     <script src="/js/styles/modal-trigger.js"></script>
     <script src="/js/utils/reboot.js"></script>
+    <script src="/js/utils/restart-connection.js"></script>
     <script defer src="/js/auth/auth.js"></script>
     <script src="/js/advance/at-terminal.js"></script>
 
@@ -59,7 +60,7 @@
 
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
+          <a class="navbar-item" href="/"> Home </a>
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
@@ -73,9 +74,11 @@
             </div>
           </div>
           <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Advance </a>
+            <a class="navbar-link has-text-weight-bold"> Advance </a>
             <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
+              <a class="navbar-item" href="/advance-settings.html">
+                Advance Settings
+              </a>
               <a class="navbar-item" href="#">Experimental Features</a>
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
@@ -86,25 +89,28 @@
         <div class="navbar-end">
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
-              <p class="control is-expanded-mobile">
+              <div class="control is-expanded-mobile">
-                <a
+                <div
-                  href="#"
+                  id="restartConnectionBtn"
                   class="button is-link is-outlined is-fullwidth-mobile"
                 >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
                   <span>Restart Connection</span>
-                </a>
+                </div>
-              </p>
+              </div>
               <div class="is-flex is-mobile is-align-items-center">
-                <p class="control">
+                <div class="control">
-                  <div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
+                  <div
+                    class="button is-warning is-outlined reboot-modal"
+                    data-target="reboot-modal"
+                  >
                     <span class="icon">
                       <i class="fas fa-power-off"></i>
                     </span>
                   </div>
-                </p>
+                </div>
                 <p class="control ml-2 is-mobile">
                   <a
                     href="#"

www/bandlock.html

@@ -23,6 +23,7 @@
     <script src="/js/styles/nav-burger.js"></script>
     <script src="/js/styles/modal-trigger.js"></script>
     <script src="/js/utils/reboot.js"></script>
+    <script src="/js/utils/restart-connection.js"></script>
     <script defer src="/js/auth/auth.js"></script>
 
     <script>
@@ -57,9 +58,9 @@
 
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
+          <a class="navbar-item" href="/"> Home </a>
           <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Cellular </a>
+            <a class="navbar-link has-text-weight-bold"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
               <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
               <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
@@ -73,7 +74,9 @@
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Advance </a>
             <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
+              <a class="navbar-item" href="/advance-settings.html">
+                Advance Settings
+              </a>
               <a class="navbar-item" href="#">Experimental Features</a>
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
@@ -84,25 +87,28 @@
         <div class="navbar-end">
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
-              <p class="control is-expanded-mobile">
+              <div class="control is-expanded-mobile">
-                <a
+                <div
-                  href="#"
+                  id="restartConnectionBtn"
                   class="button is-link is-outlined is-fullwidth-mobile"
                 >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
                   <span>Restart Connection</span>
-                </a>
+                </div>
-              </p>
+              </div>
               <div class="is-flex is-mobile is-align-items-center">
-                <p class="control">
+                <div class="control">
-                  <div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
+                  <div
+                    class="button is-warning is-outlined reboot-modal"
+                    data-target="reboot-modal"
+                  >
                     <span class="icon">
                       <i class="fas fa-power-off"></i>
                     </span>
                   </div>
-                </p>
+                </div>
                 <p class="control ml-2 is-mobile">
                   <a
                     href="#"
@@ -134,7 +140,7 @@
     <div class="column-margin">
       <div class="fixed-grid has-2-cols has-1-cols-mobile">
         <div class="grid is-gap-5">
-          <div class="cell is-col-span-2 is-col-span-1-mobile">
+          <div class="cell">
             <div class="card">
               <div class="card-header">
                 <div class="card-header-title">4G LTE Band Locking</div>
@@ -142,64 +148,25 @@
               <div class="card-content">
                 <div class="fixed-grid has-5-cols has-3-cols-mobile">
                   <div class="grid" id="lte_bands">
-                    <!-- write each lte band cell here -->
+                    <!-- LTE bands will be populated here -->
                   </div>
                 </div>
               </div>
               <div class="card-footer">
                 <a
-                  href="#"
+                  id="lockLte"
                   class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Lock LTE Bands
                 </a>
-
                 <a
-                  href="#"
+                  id="uncheckLte"
                   class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Uncheck All
                 </a>
-
                 <a
-                  href="#"
+                  id="resetLte"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Reset
-                </a>
-              </div>
-            </div>
-          </div>
-
-          <div class="cell">
-            <div class="card">
-              <div class="card-header">
-                <div class="card-header-title">5G-NR NSA Band Locking</div>
-              </div>
-              <div class="card-content">
-                <div class="fixed-grid has-5-cols has-3-cols-mobile">
-                  <div class="grid" id="nsa_bands">
-                    <!-- write each nsa band cell here -->
-                  </div>
-                </div>
-              </div>
-              <div class="card-footer">
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Lock NSA Bands
-                </a>
-
-                <a
-                  href="#"
-                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
-                >
-                  Uncheck All
-                </a>
-
-                <a
-                  href="#"
                   class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Reset
@@ -216,27 +183,95 @@
               <div class="card-content">
                 <div class="fixed-grid has-5-cols has-3-cols-mobile">
                   <div class="grid" id="sa_bands">
-                    <!-- write each SA band cell here -->
+                    <!-- SA bands will be populated here -->
                   </div>
                 </div>
               </div>
               <div class="card-footer">
                 <a
-                  href="#"
+                  id="lockSa"
                   class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Lock SA Bands
                 </a>
-
                 <a
-                  href="#"
+                  id="uncheckSa"
                   class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Uncheck All
                 </a>
-
                 <a
-                  href="#"
+                  id="resetSa"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                >
+                  Reset
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div class="cell">
+            <div class="card">
+              <div class="card-header">
+                <div class="card-header-title">5G-NR NSA Band Locking</div>
+              </div>
+              <div class="card-content">
+                <div class="fixed-grid has-5-cols has-3-cols-mobile">
+                  <div class="grid" id="nsa_bands">
+                    <!-- NSA bands will be populated here -->
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <a
+                  id="lockNsa"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                >
+                  Lock NSA Bands
+                </a>
+                <a
+                  id="uncheckNsa"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                >
+                  Uncheck All
+                </a>
+                <a
+                  id="resetNsa"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                >
+                  Reset
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <div class="cell">
+            <div class="card">
+              <div class="card-header">
+                <div class="card-header-title">5G-NR SA-DC Band Locking</div>
+              </div>
+              <div class="card-content">
+                <div class="fixed-grid has-5-cols has-3-cols-mobile">
+                  <div class="grid" id="sanrdc_bands">
+                    <!-- SA bands will be populated here -->
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <a
+                  id="lockSaDc"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                >
+                  Lock SA-DC Bands
+                </a>
+                <a
+                  id="uncheckSaDc"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                >
+                  Uncheck All
+                </a>
+                <a
+                  id="resetSaDc"
                   class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Reset
@@ -274,9 +309,7 @@
                 <span>Current Active Bands</span>
               </div>
 
-              <p class="block has-text-weight-semibold">
+              <p class="block has-text-weight-semibold" id="currentBands"></p>
-                Band 1 / Band 3 / NR Band 41
-              </p>
             </div>
           </div>
         </div>
@@ -292,7 +325,7 @@
           <div id="loading-content" style="display: none">
             <div class="custom-loader"></div>
             <div class="countdown-text">
-              Rebooting... <span id="countdown">40</span>s
+              Rebooting... <span id="countdown">80</span>s
             </div>
           </div>
           <div class="buttons" id="modal-buttons">
@@ -302,32 +335,346 @@
         </section>
       </div>
     </div>
-  </body>
+    <script>
+      // Function to fetch current active bands and display them in the footer
+      async function fetchCurrentBands() {
+        try {
+          const response = await fetch("/cgi-bin/atinout_handler.sh", {
+            method: "POST",
+            body: "command=" + encodeURIComponent("AT+QCAINFO"),
+          });
 
-  <script>
+          const data = await response.json();
-    var lte_bands =
+          // Extract active bands
-      "1:2:3:4:5:7:8:12:13:14:18:19:20:25:26:28:29:30:32:34:38:39:40:41:42:43:46:48:66:71";
+          // Find the lines that contains "LTE BAND <band number>" or "NR5G BAND <band number>" and append them to the currentBands variable
-    var nsa_bands = "1:2:3:5:7:8:12:20:25:28:38:40:41:48:66:71:77:78:79";
+          const lteBands = data.output.match(/LTE BAND ([0-9]+)/g) || [];
-    var sa_bands = "1:2:3:5:7:8:12:20:25:28:38:40:41:48:66:71:77:78:79";
+          const nrBands = data.output.match(/NR5G BAND ([0-9]+)/g) || [];
-
+          // Combine the two arrays and join them with a comma
-    function populateBands(bandsString, targetId) {
+          if (lteBands.length === 0 && nrBands.length === 0) {
-      var bandsArray = bandsString.split(":");
+            document.getElementById("currentBands").textContent =
-      var html = "";
+              "No active bands found";
-
+            return;
-      for (var i = 0; i < bandsArray.length; i++) {
+          } else if (lteBands.length === 0) {
-        html +=
+            document.getElementById("currentBands").textContent =
-          '<div class="cell"><label class="checkbox"><input type="checkbox" /> B' +
+              nrBands.join(", ");
-          bandsArray[i] +
+            return;
-          "</label></div>";
+          } else if (nrBands.length === 0) {
+            document.getElementById("currentBands").textContent =
+              lteBands.join(", ");
+            return;
+          } else {
+            document.getElementById("currentBands").textContent = [
+              ...lteBands,
+              ...nrBands,
+            ].join(", ");
+          }
+        } catch (error) {
+          console.error("Error fetching current bands:", error);
+        }
       }
 
-      // Inject the generated HTML into the target element
+      // Function to fetch supported bands via AT command and populate the checkboxes
-      document.querySelector(targetId).innerHTML = html;
+      async function fetchSupportedBands() {
-    }
+        try {
+          const response = await fetch("/cgi-bin/atinout_handler.sh", {
+            method: "POST",
+            body:
+              "command=" + encodeURIComponent('AT+QNWPREFCFG="policy_band"'),
+          });
+          const data = await response.json();
 
-    // Populate the bands in their respective grids
+          const lteBandsMatch = data.output.match(/"lte_band",([0-9:]+)/);
-    populateBands(lte_bands, "#lte_bands");
+          const nsaBandsMatch = data.output.match(/"nsa_nr5g_band",([0-9:]+)/);
-    populateBands(nsa_bands, "#nsa_bands");
+          const saBandsMatch = data.output.match(/"nr5g_band",([0-9:]+)/);
-    populateBands(sa_bands, "#sa_bands");
+          const saDcBandsMatch = data.output.match(
-  </script>
+            /"nrdc_nr5g_band",([0-9:]+)/
+          );
+
+          if (lteBandsMatch) populateBands(lteBandsMatch[1], "#lte_bands");
+          if (saBandsMatch) populateBands(saBandsMatch[1], "#sa_bands");
+          if (nsaBandsMatch) populateBands(nsaBandsMatch[1], "#nsa_bands");
+          if (saDcBandsMatch) populateBands(saDcBandsMatch[1], "#sanrdc_bands");
+
+          fetchActiveBands();
+        } catch (error) {
+          console.error("Error fetching supported bands:", error);
+        }
+      }
+
+      // Function to fetch currently active bands and mark the checkboxes accordingly
+      async function fetchActiveBands() {
+        try {
+          const response = await fetch("/cgi-bin/atinout_handler.sh", {
+            method: "POST",
+            body:
+              "command=" +
+              encodeURIComponent(
+                'AT+QNWPREFCFG="lte_band";+QNWPREFCFG="nsa_nr5g_band";+QNWPREFCFG="nr5g_band";+QNWPREFCFG="nrdc_nr5g_band"'
+              ),
+          });
+          const data = await response.json();
+
+          // Remove the first line of the output
+          data.output = data.output.split("\n").slice(1).join("\n");
+
+          // Remove "OK" line
+          data.output = data.output.replace("OK", "");
+
+          console.log(data.output);
+
+          // Extract active bands
+          const activeLteBands = data.output
+            .match(/"lte_band",([0-9:]+)/)[1]
+            .split(":");
+          const activeNsaBands = data.output
+            .match(/"nsa_nr5g_band",([0-9:]+)/)[1]
+            .split(":");
+          const activeSaBands = data.output
+            .match(/"nr5g_band",([0-9:]+)/)[1]
+            .split(":");
+          // get the the second to the last line of the output and use it for active sa-dc bands
+          const activeSaDcBandsLine = data.output
+            .split("\n")[6]
+            .match(/"nr5g_band",([0-9:]+)/)[1]
+            .split(":");
+
+          // // Mark checkboxes as checked for active bands
+          markActiveBands(activeLteBands, "#lte_bands");
+          markActiveBands(activeNsaBands, "#nsa_bands");
+          markActiveBands(activeSaBands, "#sa_bands");
+          markActiveBands(activeSaDcBandsLine, "#sanrdc_bands");
+
+          // Fetch current active bands and display them in the footer
+          fetchCurrentBands();
+        } catch (error) {
+          console.error("Error fetching active bands:", error);
+        }
+      }
+
+      // Function to populate bands in the target element
+      function populateBands(bandsString, targetId) {
+        var bandsArray = bandsString.split(":");
+        var html = "";
+
+        for (var i = 0; i < bandsArray.length; i++) {
+          html += `<div class="cell">
+          <label class="checkbox">
+            <input type="checkbox" value="${bandsArray[i]}" /> B${bandsArray[i]}
+          </label>
+        </div>`;
+        }
+
+        document.querySelector(targetId).innerHTML = html;
+      }
+
+      // Function to mark checkboxes as checked based on active bands
+      function markActiveBands(activeBands, targetId) {
+        const checkboxes = document.querySelectorAll(
+          `${targetId} input[type="checkbox"]`
+        );
+        checkboxes.forEach((checkbox) => {
+          if (activeBands.includes(checkbox.value)) {
+            checkbox.setAttribute("checked", "checked");
+          }
+        });
+      }
+
+      // Function to uncheck all checkboxes in the target element
+      function uncheckAll(targetId) {
+        const checkboxes = document.querySelectorAll(
+          `${targetId} input[type="checkbox"]`
+        );
+        checkboxes.forEach((checkbox) => {
+          checkbox.removeAttribute("checked");
+          checkbox.checked = false; // Also update the state programmatically
+        });
+      }
+
+      // Event listeners for "Uncheck All" buttons
+      document
+        .getElementById("uncheckLte")
+        .addEventListener("click", function (event) {
+          event.preventDefault();
+          uncheckAll("#lte_bands");
+        });
+
+      document
+        .getElementById("uncheckNsa")
+        .addEventListener("click", function (event) {
+          event.preventDefault();
+          uncheckAll("#nsa_bands");
+        });
+
+      document
+        .getElementById("uncheckSa")
+        .addEventListener("click", function (event) {
+          event.preventDefault();
+          uncheckAll("#sa_bands");
+        });
+
+      document
+        .getElementById("uncheckSaDc")
+        .addEventListener("click", function (event) {
+          event.preventDefault();
+          uncheckAll("#sanrdc_bands");
+        });
+
+      // Locking the Bands
+      // Function to get checked bands and generate AT command
+      function getCheckedBandsCommand(targetId, commandType) {
+        const checkboxes = document.querySelectorAll(
+          `${targetId} input[type="checkbox"]:checked`
+        );
+        const checkedBands = Array.from(checkboxes)
+          .map((cb) => cb.value)
+          .sort((a, b) => a - b);
+
+        if (checkedBands.length === 0) {
+          return null; // Return null if no bands are selected
+        }
+
+        const bandString = checkedBands.join(":");
+        return `AT+QNWPREFCFG="${commandType}",${bandString}`;
+      }
+
+      // Function to send AT command via atinout
+      async function sendATCommand(command) {
+        try {
+          const response = await fetch("/cgi-bin/atinout_handler.sh", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/x-www-form-urlencoded",
+            },
+            body: `command=${encodeURIComponent(command)}`,
+          });
+          const data = await response.json();
+          return data;
+
+          // refetch active bands after successful command
+          fetchActiveBands();
+        } catch (error) {
+          console.error("Error sending AT command:", error);
+          throw error;
+        }
+      }
+
+      // Function to handle band locking for a specific type
+      async function lockBands(targetId, commandType) {
+        const command = getCheckedBandsCommand(targetId, commandType);
+        if (!command) {
+          alert("Please select at least one band to lock.");
+          return;
+        }
+
+        try {
+          await sendATCommand(command);
+          alert(
+            `Successfully locked ${commandType
+              .split("_")[0]
+              .toUpperCase()} bands`
+          );
+        } catch (error) {
+          alert(`Failed to lock bands: ${error.message}`);
+        }
+      }
+
+      // Event listeners for Lock buttons
+      document
+        .getElementById("lockLte")
+        .addEventListener("click", () => lockBands("#lte_bands", "lte_band"));
+
+      document
+        .getElementById("lockNsa")
+        .addEventListener("click", () =>
+          lockBands("#nsa_bands", "nsa_nr5g_band")
+        );
+
+      document
+        .getElementById("lockSa")
+        .addEventListener("click", () => lockBands("#sa_bands", "nr5g_band"));
+
+      document
+        .getElementById("lockSaDc")
+        .addEventListener("click", () =>
+          lockBands("#sanrdc_bands", "nrdc_nr5g_band")
+        );
+
+      // Event listeners for Reset buttons
+
+      // Function to reset and check all checkboxes for a given band type
+      function resetBands(targetId, bandType) {
+        const checkboxes = document.querySelectorAll(
+          `${targetId} input[type="checkbox"]`
+        );
+        let selectedBands = [];
+
+        // Check all checkboxes and gather their values
+        checkboxes.forEach((checkbox) => {
+          checkbox.setAttribute("checked", "checked");
+          checkbox.checked = true;
+          selectedBands.push(checkbox.value);
+        });
+
+        // Create and send the AT command with all bands
+        sendBandLockCommand(selectedBands, bandType);
+      }
+
+      // Function to send the AT command to lock the bands
+      async function sendBandLockCommand(bands, bandType) {
+        // Join the selected bands with ":" separator for the AT command
+        const bandString = bands.join(":");
+        const command = `AT+QNWPREFCFG="${bandType}",${bandString}`;
+
+        try {
+          const response = await fetch("/cgi-bin/atinout_handler.sh", {
+            method: "POST",
+            body: "command=" + encodeURIComponent(command),
+          });
+
+          const data = await response.json();
+          console.log(
+            `Band lock command for ${bandType} executed:`,
+            data.output
+          );
+        } catch (error) {
+          console.error(
+            `Error sending band lock command for ${bandType}:`,
+            error
+          );
+        }
+      }
+
+      // Event listeners for "Reset" buttons
+      document
+        .getElementById("resetLte")
+        .addEventListener("click", function (event) {
+          event.preventDefault();
+          resetBands("#lte_bands", "lte_band");
+        });
+
+      document
+        .getElementById("resetNsa")
+        .addEventListener("click", function (event) {
+          event.preventDefault();
+          resetBands("#nsa_bands", "nsa_nr5g_band");
+        });
+
+      document
+        .getElementById("resetSa")
+        .addEventListener("click", function (event) {
+          event.preventDefault();
+          resetBands("#sa_bands", "nr5g_band");
+        });
+
+      document
+        .getElementById("resetSaDc")
+        .addEventListener("click", function (event) {
+          event.preventDefault();
+          resetBands("#sanrdc_bands", "nrdc_nr5g_band");
+        });
+
+      // Initial call to fetch supported bands on page load
+      window.onload = fetchSupportedBands;
+    </script>
+  </body>
 </html>

www/cell-locking.html

@@ -23,6 +23,7 @@
     <script src="/js/styles/nav-burger.js"></script>
     <script src="/js/styles/modal-trigger.js"></script>
     <script src="/js/utils/reboot.js"></script>
+    <script src="/js/utils/restart-connection.js"></script>
     <script defer src="/js/auth/auth.js"></script>
 
     <script>
@@ -58,9 +59,9 @@
 
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
+          <a class="navbar-item" href="/"> Home </a>
           <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Cellular </a>
+            <a class="navbar-link has-text-weight-bold"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
               <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
               <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
@@ -74,7 +75,9 @@
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Advance </a>
             <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
+              <a class="navbar-item" href="/advance-settings.html">
+                Advance Settings
+              </a>
               <a class="navbar-item" href="#">Experimental Features</a>
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
@@ -85,25 +88,25 @@
         <div class="navbar-end">
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
-              <p class="control is-expanded-mobile">
+              <div class="control is-expanded-mobile">
-                <a
+                <div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
-                  href="#"
-                  class="button is-link is-outlined is-fullwidth-mobile"
-                >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
                   <span>Restart Connection</span>
-                </a>
+                </div>
-              </p>
+              </div>
               <div class="is-flex is-mobile is-align-items-center">
-                <p class="control">
+                <div class="control">
-                  <div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
+                  <div
+                    class="button is-warning is-outlined reboot-modal"
+                    data-target="reboot-modal"
+                  >
                     <span class="icon">
                       <i class="fas fa-power-off"></i>
                     </span>
                   </div>
-                </p>
+                </div>
                 <p class="control ml-2 is-mobile">
                   <a
                     href="#"
@@ -405,7 +408,7 @@
           <div id="loading-content" style="display: none">
             <div class="custom-loader"></div>
             <div class="countdown-text">
-              Rebooting... <span id="countdown">40</span>s
+              Rebooting... <span id="countdown">80</span>s
             </div>
           </div>
           <div class="buttons" id="modal-buttons">

www/cell-scanner.html

@@ -23,6 +23,7 @@
     <script src="/js/styles/nav-burger.js"></script>
     <script src="/js/styles/modal-trigger.js"></script>
     <script src="/js/utils/reboot.js"></script>
+    <script src="/js/utils/restart-connection.js"></script>
     <script defer src="/js/auth/auth.js"></script>
 
     <script>
@@ -58,9 +59,9 @@
 
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
+          <a class="navbar-item" href="/"> Home </a>
           <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Cellular </a>
+            <a class="navbar-link has-text-weight-bold"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
               <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
               <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
@@ -74,7 +75,9 @@
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Advance </a>
             <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
+              <a class="navbar-item" href="/advance-settings.html">
+                Advance Settings
+              </a>
               <a class="navbar-item" href="#">Experimental Features</a>
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
@@ -85,25 +88,25 @@
         <div class="navbar-end">
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
-              <p class="control is-expanded-mobile">
+              <div class="control is-expanded-mobile">
-                <a
+                <div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
-                  href="#"
-                  class="button is-link is-outlined is-fullwidth-mobile"
-                >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
                   <span>Restart Connection</span>
-                </a>
+                </div>
-              </p>
+              </div>
               <div class="is-flex is-mobile is-align-items-center">
-                <p class="control">
+                <div class="control">
-                  <div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
+                  <div
+                    class="button is-warning is-outlined reboot-modal"
+                    data-target="reboot-modal"
+                  >
                     <span class="icon">
                       <i class="fas fa-power-off"></i>
                     </span>
                   </div>
-                </p>
+                </div>
                 <p class="control ml-2 is-mobile">
                   <a
                     href="#"
@@ -465,7 +468,7 @@
           <div id="loading-content" style="display: none">
             <div class="custom-loader"></div>
             <div class="countdown-text">
-              Rebooting... <span id="countdown">40</span>s
+              Rebooting... <span id="countdown">80</span>s
             </div>
           </div>
           <div class="buttons" id="modal-buttons">

www/cell-settings.html

@@ -23,6 +23,7 @@
     <script src="/js/styles/nav-burger.js"></script>
     <script src="/js/styles/modal-trigger.js"></script>
     <script src="/js/utils/reboot.js"></script>
+    <script src="/js/utils/restart-connection.js"></script>
     <script defer src="/js/auth/auth.js"></script>
 
     <script>
@@ -58,9 +59,9 @@
 
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
+          <a class="navbar-item" href="/"> Home </a>
           <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Cellular </a>
+            <a class="navbar-link has-text-weight-bold"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
               <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
               <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
@@ -74,7 +75,9 @@
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Advance </a>
             <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
+              <a class="navbar-item" href="/advance-settings.html">
+                Advance Settings
+              </a>
               <a class="navbar-item" href="#">Experimental Features</a>
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
@@ -85,25 +88,25 @@
         <div class="navbar-end">
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
-              <p class="control is-expanded-mobile">
+              <div class="control is-expanded-mobile">
-                <a
+                <div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
-                  href="#"
-                  class="button is-link is-outlined is-fullwidth-mobile"
-                >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
                   <span>Restart Connection</span>
-                </a>
+                </div>
-              </p>
+              </div>
               <div class="is-flex is-mobile is-align-items-center">
-                <p class="control">
+                <div class="control">
-                  <div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
+                  <div
+                    class="button is-warning is-outlined reboot-modal"
+                    data-target="reboot-modal"
+                  >
                     <span class="icon">
                       <i class="fas fa-power-off"></i>
                     </span>
                   </div>
-                </p>
+                </div>
                 <p class="control ml-2 is-mobile">
                   <a
                     href="#"
@@ -436,7 +439,7 @@
           <div id="loading-content" style="display: none">
             <div class="custom-loader"></div>
             <div class="countdown-text">
-              Rebooting... <span id="countdown">40</span>s
+              Rebooting... <span id="countdown">80</span>s
             </div>
           </div>
           <div class="buttons" id="modal-buttons">

www/cell-sms.html

@@ -23,6 +23,7 @@
     <script src="/js/styles/nav-burger.js"></script>
     <script src="/js/styles/modal-trigger.js"></script>
     <script src="/js/utils/reboot.js"></script>
+    <script src="/js/utils/restart-connection.js"></script>
     <script defer src="/js/auth/auth.js"></script>
 
     <script>
@@ -58,9 +59,9 @@
 
       <div id="navMenu" class="navbar-menu">
         <div class="navbar-start ml-6">
-          <a class="navbar-item has-text-weight-bold" href="/"> Home </a>
+          <a class="navbar-item" href="/"> Home </a>
           <div class="navbar-item has-dropdown is-hoverable">
-            <a class="navbar-link"> Cellular </a>
+            <a class="navbar-link has-text-weight-bold"> Cellular </a>
             <div class="navbar-dropdown is-boxed">
               <a class="navbar-item" href="/bandlock.html"> Band Locking </a>
               <a class="navbar-item" href="/cell-locking.html">Cell Locking</a>
@@ -74,7 +75,9 @@
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Advance </a>
             <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
+              <a class="navbar-item" href="/advance-settings.html">
+                Advance Settings
+              </a>
               <a class="navbar-item" href="#">Experimental Features</a>
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
@@ -85,25 +88,25 @@
         <div class="navbar-end">
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
-              <p class="control is-expanded-mobile">
+              <div class="control is-expanded-mobile">
-                <a
+                <div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
-                  href="#"
-                  class="button is-link is-outlined is-fullwidth-mobile"
-                >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
                   <span>Restart Connection</span>
-                </a>
+                </div>
-              </p>
+              </div>
               <div class="is-flex is-mobile is-align-items-center">
-                <p class="control">
+                <div class="control">
-                  <div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
+                  <div
+                    class="button is-warning is-outlined reboot-modal"
+                    data-target="reboot-modal"
+                  >
                     <span class="icon">
                       <i class="fas fa-power-off"></i>
                     </span>
                   </div>
-                </p>
+                </div>
                 <p class="control ml-2 is-mobile">
                   <a
                     href="#"
@@ -400,7 +403,7 @@
           <div id="loading-content" style="display: none">
             <div class="custom-loader"></div>
             <div class="countdown-text">
-              Rebooting... <span id="countdown">40</span>s
+              Rebooting... <span id="countdown">80</span>s
             </div>
           </div>
           <div class="buttons" id="modal-buttons">

www/css/custom.css

@@ -260,4 +260,9 @@ html.theme-light {
   .cell-carousel__dot--active {
     background: #3273dc;
   }
+}
+/* End of custom table styles */
+
+.isCursorPointer {
+  cursor: pointer;
 }

www/home.html

@@ -25,6 +25,7 @@
     <script src="/js/styles/nav-burger.js"></script>
     <script src="/js/styles/modal-trigger.js"></script>
     <script src="/js/utils/reboot.js"></script>
+    <script src="/js/utils/restart-connection.js"></script>
     <script defer src="/js/auth/auth.js"></script>
 
     <script>
@@ -75,7 +76,9 @@
           <div class="navbar-item has-dropdown is-hoverable">
             <a class="navbar-link"> Advance </a>
             <div class="navbar-dropdown is-boxed">
-              <a class="navbar-item" href="/advance-settings.html"> Advance Settings </a>
+              <a class="navbar-item" href="/advance-settings.html">
+                Advance Settings
+              </a>
               <a class="navbar-item" href="#">Experimental Features</a>
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
@@ -86,25 +89,25 @@
         <div class="navbar-end">
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
-              <p class="control is-expanded-mobile">
+              <div class="control is-expanded-mobile">
-                <a
+                <div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
-                  href="#"
-                  class="button is-link is-outlined is-fullwidth-mobile"
-                >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
                   <span>Restart Connection</span>
-                </a>
+                </div>
-              </p>
+              </div>
               <div class="is-flex is-mobile is-align-items-center">
-                <p class="control">
+                <div class="control">
-                  <div href="#" class="button is-warning is-outlined reboot-modal" data-target="reboot-modal" >
+                  <div
+                    class="button is-warning is-outlined reboot-modal"
+                    data-target="reboot-modal"
+                  >
                     <span class="icon">
                       <i class="fas fa-power-off"></i>
                     </span>
                   </div>
-                </p>
+                </div>
                 <p class="control ml-2 is-mobile">
                   <a
                     href="#"

www/index.html

@@ -26,59 +26,65 @@
   </head>
 
   <body>
-    <div class="box container mt-6">
+    <div class="container mt-6">
-      <div class="fixed-grid has-1-cols">
+      <div class="card">
-        <div class="grid is-gap-5">
+        <div class="card-content">
-          <div class="cell">
+          <div class="fixed-grid has-1-cols">
-            <div class="field is-grouped">
+            <div class="grid is-gap-5">
-              <div class="control">
+              <div class="cell">
-                <img
+                <div class="field is-grouped">
-                  src="/assets/logo.png"
+                  <div class="control">
-                  alt="Logo"
+                    <img
-                  class="image is-square image is-32x32"
+                      src="/assets/logo.png"
-                />
+                      alt="Logo"
+                      class="image is-square image is-32x32"
+                    />
+                  </div>
+                  <div class="control">
+                    <h1 class="title">QuecManager Login</h1>
+                  </div>
+                </div>
               </div>
-              <div class="control">
+
-                <h1 class="title">QuecManager Login</h1>
+              <div class="cell">
+                <form id="loginForm">
+                  <div class="field">
+                    <label class="label">Username</label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        id="username"
+                        type="text"
+                        required
+                        placeholder="Username"
+                      />
+                    </div>
+                  </div>
+
+                  <div class="field">
+                    <label class="label">Password</label>
+                    <div class="control">
+                      <input
+                        class="input"
+                        id="password"
+                        type="password"
+                        required
+                        placeholder="********"
+                      />
+                    </div>
+                  </div>
+
+                  <button class="button is-primary" type="submit">
+                    Sign in
+                  </button>
+                  <p
+                    id="error"
+                    class="has-text-danger has-text-weight-semibold mt-2"
+                  ></p>
+                </form>
               </div>
             </div>
           </div>
-
-          <div class="cell">
-            <form id="loginForm">
-              <div class="field">
-                <label class="label">Username</label>
-                <div class="control">
-                  <input
-                    class="input"
-                    id="username"
-                    type="text"
-                    required
-                    placeholder="Username"
-                  />
-                </div>
-              </div>
-
-              <div class="field">
-                <label class="label">Password</label>
-                <div class="control">
-                  <input
-                    class="input"
-                    id="password"
-                    type="password"
-                    required
-                    placeholder="********"
-                  />
-                </div>
-              </div>
-
-              <button class="button is-primary" type="submit">Sign in</button>
-              <p
-                id="error"
-                class="has-text-danger has-text-weight-semibold mt-2"
-              ></p>
-            </form>
-          </div>
         </div>
       </div>
     </div>

www/js/home/main.js

@@ -1,12 +1,12 @@
 // Constants
 const ACCESS_TECH_MAP = {
   2: "UTRAN",
-  4: "UTRAN W/ HSDPA",
+  4: "UTRAN / HSDPA",
-  5: "UTRAN W/ HSUPA",
+  5: "UTRAN / HSUPA",
-  6: "UTRAN W/ HSDPA & HSUPA",
+  6: "UTRAN / HSDPA & HSUPA",
   7: "E-UTRAN",
-  10: "E-UTRAN connected to a 5GCN",
+  10: "E-UTRAN - 5GCN",
-  11: "NR connected to a 5GCN",
+  11: "NR - 5GCN",
   12: "NG-RAN",
   13: "E-UTRAN-NR dual",
 };
@@ -384,7 +384,9 @@ function processBandwidth(response, networkType) {
 
   if (networkType === "NR5G-NSA") {
     processNR5GBandwidth(sccLines, pccBWParsed);
-  } else {
+  } else if (networkType === "NR5G-SA") {
+    processNR5GBandwidth(sccLines, pccBWParsed);
+  } else if (networkType === "LTE") {
     processLTEBandwidth(sccLines, pccBWParsed);
   }
 }
@@ -773,6 +775,8 @@ function processBandsTable(jsonData) {
     const sccRow = createBandTableRow(sccBand, networkType, servingCellJSON);
     tableBody.appendChild(sccRow);
   });
+
+  initMobileCarousel();
 }
 
 function processCellInfo(jsonData) {
@@ -1086,9 +1090,8 @@ document.addEventListener("DOMContentLoaded", () => {
   setupEventListeners();
 });
 
-// Mobile carousel functions
+let carouselInitialized = false;
-let touchStartX = 0;
+let currentSlide = 0;
-let touchEndX = 0;
 
 function initMobileCarousel() {
   const table = document.getElementById("bandTable");
@@ -1096,65 +1099,95 @@ function initMobileCarousel() {
   const rows = tbody.querySelectorAll("tr");
 
   if (window.innerWidth <= 768) {
-    // Create carousel structure
+    let carouselWrapper = document.querySelector(".cell-carousel");
-    const carouselWrapper = document.createElement("div");
-    carouselWrapper.className = "cell-carousel";
 
-    const carouselContainer = document.createElement("div");
+    if (!carouselInitialized) {
-    carouselContainer.className = "cell-carousel__container";
+      // Create carousel structure only if it doesn't exist
+      carouselWrapper = document.createElement("div");
+      carouselWrapper.className = "cell-carousel";
 
-    // Move content to carousel
+      const carouselContainer = document.createElement("div");
-    rows.forEach((row) => {
+      carouselContainer.className = "cell-carousel__container";
-      carouselContainer.insertAdjacentHTML(
-        "beforeend",
-        row.getAttribute("data-mobile")
-      );
-    });
 
-    carouselWrapper.appendChild(carouselContainer);
+      carouselWrapper.appendChild(carouselContainer);
 
-    // Add only indicators
+      // Add touch event listeners only once
-    const indicatorsHTML = `
+      carouselContainer.addEventListener("touchstart", handleTouchStart, false);
-      <div class="cell-carousel__indicators">
+      carouselContainer.addEventListener("touchmove", handleTouchMove, false);
-        ${Array.from(
+      carouselContainer.addEventListener("touchend", handleTouchEnd, false);
-          { length: rows.length },
-          (_, i) =>
-            `<span class="cell-carousel__dot ${
-              i === 0 ? "cell-carousel__dot--active" : ""
-            }" 
-                 onclick="goToSlide(${i})"></span>`
-        ).join("")}
-      </div>
-    `;
 
-    // Replace table with carousel
+      // Insert carousel into DOM
-    table.style.display = "none";
+      table.style.display = "none";
-    table.parentNode.insertBefore(carouselWrapper, table);
+      table.parentNode.insertBefore(carouselWrapper, table);
-    carouselWrapper.insertAdjacentHTML("beforeend", indicatorsHTML);
 
-    // Add touch event listeners
+      carouselInitialized = true;
-    carouselContainer.addEventListener("touchstart", handleTouchStart, false);
+    }
-    carouselContainer.addEventListener("touchmove", handleTouchMove, false);
+
-    carouselContainer.addEventListener("touchend", handleTouchEnd, false);
+    // Update carousel content
+    updateCarouselContent(rows);
   } else {
-    // Restore desktop view if necessary
+    // Restore desktop view
     const carousel = document.querySelector(".cell-carousel");
     if (carousel) {
-      carousel.remove();
+      carousel.style.display = "none";
       table.style.display = "";
     }
+
     rows.forEach((row) => {
       row.innerHTML = row.getAttribute("data-desktop");
     });
   }
 }
 
+function updateCarouselContent(rows) {
+  const carouselContainer = document.querySelector(".cell-carousel__container");
+  const indicators = document.querySelector(".cell-carousel__indicators");
+
+  if (!carouselContainer) return;
+
+  // Clear existing content
+  carouselContainer.innerHTML = "";
+  if (indicators) indicators.remove();
+
+  // Add new slides
+  rows.forEach((row) => {
+    carouselContainer.insertAdjacentHTML(
+      "beforeend",
+      row.getAttribute("data-mobile")
+    );
+  });
+
+  // Update indicators
+  const indicatorsHTML = `
+    <div class="cell-carousel__indicators">
+      ${Array.from(
+        { length: rows.length },
+        (_, i) =>
+          `<span class="cell-carousel__dot ${
+            i === currentSlide ? "cell-carousel__dot--active" : ""
+          }"
+               onclick="goToSlide(${i})"></span>`
+      ).join("")}
+    </div>
+  `;
+
+  carouselContainer.parentNode.insertAdjacentHTML("beforeend", indicatorsHTML);
+
+  // Reset to first slide and update display
+  currentSlide = 0;
+  updateCarousel();
+}
+
+// Your existing touch handling functions remain the same
+let touchStartX = 0;
+let touchEndX = 0;
+
 function handleTouchStart(event) {
   touchStartX = event.touches[0].clientX;
 }
 
 function handleTouchMove(event) {
-  event.preventDefault(); // Prevent scrolling while swiping
+  event.preventDefault();
 }
 
 function handleTouchEnd(event) {
@@ -1163,18 +1196,15 @@ function handleTouchEnd(event) {
 }
 
 function handleSwipe() {
-  const swipeThreshold = 50; // Minimum distance for a swipe
+  const swipeThreshold = 50;
   const container = document.querySelector(".cell-carousel__container");
   const slides = container.querySelectorAll(".cell-carousel__slide");
-
   const diffX = touchStartX - touchEndX;
 
   if (Math.abs(diffX) > swipeThreshold) {
     if (diffX > 0 && currentSlide < slides.length - 1) {
-      // Swipe left, go to next slide
       currentSlide++;
     } else if (diffX < 0 && currentSlide > 0) {
-      // Swipe right, go to previous slide
       currentSlide--;
     }
     updateCarousel();
@@ -1188,15 +1218,16 @@ function goToSlide(index) {
 
 function updateCarousel() {
   const container = document.querySelector(".cell-carousel__container");
+  if (!container) return;
+
   container.style.transform = `translateX(-${currentSlide * 100}%)`;
 
-  // Update indicators
   const dots = document.querySelectorAll(".cell-carousel__dot");
   dots.forEach((dot, index) => {
     dot.classList.toggle("cell-carousel__dot--active", index === currentSlide);
   });
 }
 
-// Initialize carousel on load and resize
+// Update your event listeners
 window.addEventListener("load", initMobileCarousel);
 window.addEventListener("resize", initMobileCarousel);

www/js/utils/reboot.js

@@ -2,7 +2,7 @@ document.addEventListener('DOMContentLoaded', function() {
     const modal = document.getElementById('reboot-modal');
     const rebootButton = document.getElementById('rebootModem');
     const cancelButtons = modal.querySelectorAll('.cancel, .modal-background');
-    const restartConnectionBtn = document.querySelector('a.button.is-link.is-outlined');
+    const powerButton = document.querySelector('div.button.is-warning.is-outlined.reboot-modal');
     const modalMessage = document.getElementById('modal-message');
     const loadingContent = document.getElementById('loading-content');
     const modalButtons = document.getElementById('modal-buttons');
@@ -46,7 +46,7 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     // Show modal when restart connection button is clicked
-    restartConnectionBtn.addEventListener('click', function(e) {
+    powerButton.addEventListener('click', function(e) {
         e.preventDefault();
         toggleModal(true);
     });

www/js/utils/restart-connection.js

@@ -0,0 +1,69 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const restartBtn = document.getElementById('restartConnectionBtn');
+    
+    // Function to send AT commands
+    async function sendRestartCommands() {
+        try {
+            // Disable the restart button and show loading state
+            restartBtn.classList.add('is-loading');
+            restartBtn.disabled = true;
+
+            // Send AT+CFUN=0
+            const response1 = await fetch('/cgi-bin/atinout_handler.sh', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: 'command=' + encodeURIComponent('AT+CFUN=0')
+            });
+
+            if (!response1.ok) {
+                throw new Error(`HTTP error! status: ${response1.status}`);
+            }
+
+            // Wait for 2 seconds
+            await new Promise(resolve => setTimeout(resolve, 2000));
+
+            // Send AT+CFUN=1
+            const response2 = await fetch('/cgi-bin/atinout_handler.sh', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: 'command=' + encodeURIComponent('AT+CFUN=1')
+            });
+
+            if (!response2.ok) {
+                throw new Error(`HTTP error! status: ${response2.status}`);
+            }
+
+            const data1 = await response1.json();
+            const data2 = await response2.json();
+            
+            if (data1.output.includes('OK') && data2.output.includes('OK')) {
+                alert('Connection restarted successfully');
+                // Optionally reload the page after a short delay
+                setTimeout(() => {
+                    window.location.reload();
+                }, 1000);
+            } else {
+                throw new Error('Restart command failed');
+            }
+
+        } catch (error) {
+            console.error('Error:', error);
+            alert('Failed to restart connection. Please try again.');
+        } finally {
+            // Re-enable the restart button and remove loading state
+            restartBtn.classList.remove('is-loading');
+            restartBtn.disabled = false;
+        }
+    }
+
+    // Add click event listener to the restart button
+    if (restartBtn) {
+        restartBtn.addEventListener('click', sendRestartCommands);
+    } else {
+        console.warn('Restart Connection button not found in the DOM');
+    }
+});