From f93a4d80820f1d542b3156a5136c4a9c4308e50a Mon Sep 17 00:00:00 2001
From: Russel Yasol <russel.yasol@wvsu.edu.ph>
Date: Thu, 3 Oct 2024 16:28:50 +0800
Subject: [PATCH] fixed data fetching error

---
 www/about.html                     |  12 ++-
 www/advance-settings.html          |   6 +-
 www/bandlock.html                  | 124 +++++++++++++++++++----------
 www/cell-locking.html              |   5 +-
 www/cell-scanner.html              |   5 +-
 www/cell-settings.html             |   5 +-
 www/cell-sms.html                  |   5 +-
 www/css/custom.css                 |  29 +------
 www/home.html                      |   3 +-
 www/js/utils/reboot.js             |   4 +-
 www/js/utils/restart-connection.js |  69 ++++++++++++++++
 11 files changed, 185 insertions(+), 82 deletions(-)
 create mode 100644 www/js/utils/restart-connection.js

diff --git a/www/about.html b/www/about.html
index 3a968dc..b5b0f39 100644
--- a/www/about.html
+++ b/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>
@@ -81,14 +82,19 @@
               <a class="navbar-item" href="/cgi-bin/luci">OpenWRT Luci</a>
             </div>
           </div>
-          <a class="navbar-item has-text-weight-bold" 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">
               <div class="control is-expanded-mobile">
-                <div class="button is-link is-outlined is-fullwidth-mobile">
+                <div
+                  id="restartConnectionBtn"
+                  class="button is-link is-outlined is-fullwidth-mobile"
+                >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
@@ -296,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">
diff --git a/www/advance-settings.html b/www/advance-settings.html
index e7a9dc2..dd4b4ad 100644
--- a/www/advance-settings.html
+++ b/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>
 
@@ -89,7 +90,10 @@
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
               <div class="control is-expanded-mobile">
-                <div class="button is-link is-outlined is-fullwidth-mobile">
+                <div
+                  id="restartConnectionBtn"
+                  class="button is-link is-outlined is-fullwidth-mobile"
+                >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
diff --git a/www/bandlock.html b/www/bandlock.html
index 364ff07..2ecbf26 100644
--- a/www/bandlock.html
+++ b/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>
@@ -87,7 +88,10 @@
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
               <div class="control is-expanded-mobile">
-                <div class="button is-link is-outlined is-fullwidth-mobile">
+                <div
+                  id="restartConnectionBtn"
+                  class="button is-link is-outlined is-fullwidth-mobile"
+                >
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
@@ -149,24 +153,24 @@
                 </div>
               </div>
               <div class="card-footer">
-                <div
+                <a
                   id="lockLte"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Lock LTE Bands
-                </div>
-                <div
+                </a>
+                <a
                   id="uncheckLte"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Uncheck All
-                </div>
-                <div
+                </a>
+                <a
                   id="resetLte"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Reset
-                </div>
+                </a>
               </div>
             </div>
           </div>
@@ -184,24 +188,24 @@
                 </div>
               </div>
               <div class="card-footer">
-                <div
+                <a
                   id="lockSa"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Lock SA Bands
-                </div>
-                <div
+                </a>
+                <a
                   id="uncheckSa"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Uncheck All
-                </div>
-                <div
+                </a>
+                <a
                   id="resetSa"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Reset
-                </div>
+                </a>
               </div>
             </div>
           </div>
@@ -219,24 +223,24 @@
                 </div>
               </div>
               <div class="card-footer">
-                <div
+                <a
                   id="lockNsa"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Lock NSA Bands
-                </div>
-                <div
+                </a>
+                <a
                   id="uncheckNsa"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Uncheck All
-                </div>
-                <div
+                </a>
+                <a
                   id="resetNsa"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Reset
-                </div>
+                </a>
               </div>
             </div>
           </div>
@@ -254,24 +258,24 @@
                 </div>
               </div>
               <div class="card-footer">
-                <div
+                <a
                   id="lockSaDc"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Lock SA-DC Bands
-                </div>
-                <div
+                </a>
+                <a
                   id="uncheckSaDc"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Uncheck All
-                </div>
-                <div
+                </a>
+                <a
                   id="resetSaDc"
-                  class="button card-footer-item has-text-link has-text-weight-semibold has-text-white"
+                  class="card-footer-item has-text-link has-text-weight-semibold has-text-white"
                 >
                   Reset
-                </div>
+                </a>
               </div>
             </div>
           </div>
@@ -305,9 +309,7 @@
                 <span>Current Active Bands</span>
               </div>
 
-              <p class="block has-text-weight-semibold">
-                Band 1 / Band 3 / NR Band 41
-              </p>
+              <p class="block has-text-weight-semibold" id="currentBands"></p>
             </div>
           </div>
         </div>
@@ -323,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">
@@ -334,6 +336,43 @@
       </div>
     </div>
     <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"),
+          });
+
+          const data = await response.json();
+          // Extract active bands
+          // Find the lines that contains "LTE BAND <band number>" or "NR5G BAND <band number>" and append them to the currentBands variable
+          const lteBands = data.output.match(/LTE BAND ([0-9]+)/g) || [];
+          const nrBands = data.output.match(/NR5G BAND ([0-9]+)/g) || [];
+          // Combine the two arrays and join them with a comma
+          if (lteBands.length === 0 && nrBands.length === 0) {
+            document.getElementById("currentBands").textContent =
+              "No active bands found";
+            return;
+          } else if (lteBands.length === 0) {
+            document.getElementById("currentBands").textContent =
+              nrBands.join(", ");
+            return;
+          } 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);
+        }
+      }
+
       // Function to fetch supported bands via AT command and populate the checkboxes
       async function fetchSupportedBands() {
         try {
@@ -404,6 +443,9 @@
           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);
         }
diff --git a/www/cell-locking.html b/www/cell-locking.html
index acd5e5d..4ef9f82 100644
--- a/www/cell-locking.html
+++ b/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>
@@ -88,7 +89,7 @@
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
               <div class="control is-expanded-mobile">
-                <div class="button is-link is-outlined is-fullwidth-mobile">
+                <div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
@@ -407,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">
diff --git a/www/cell-scanner.html b/www/cell-scanner.html
index fbf4e31..9580810 100644
--- a/www/cell-scanner.html
+++ b/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>
@@ -88,7 +89,7 @@
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
               <div class="control is-expanded-mobile">
-                <div class="button is-link is-outlined is-fullwidth-mobile">
+                <div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
@@ -467,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">
diff --git a/www/cell-settings.html b/www/cell-settings.html
index 06f2902..852ac05 100644
--- a/www/cell-settings.html
+++ b/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>
@@ -88,7 +89,7 @@
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
               <div class="control is-expanded-mobile">
-                <div class="button is-link is-outlined is-fullwidth-mobile">
+                <div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
@@ -438,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">
diff --git a/www/cell-sms.html b/www/cell-sms.html
index 6a2afe9..dbbd03b 100644
--- a/www/cell-sms.html
+++ b/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>
@@ -88,7 +89,7 @@
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
               <div class="control is-expanded-mobile">
-                <div class="button is-link is-outlined is-fullwidth-mobile">
+                <div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
@@ -402,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">
diff --git a/www/css/custom.css b/www/css/custom.css
index e9ab706..2ec58ce 100644
--- a/www/css/custom.css
+++ b/www/css/custom.css
@@ -261,31 +261,8 @@ html.theme-light {
     background: #3273dc;
   }
 }
+/* End of custom table styles */
 
-/* Change checkbox checked color to this: #3273dc */
-/* Hide the default checkbox */
-/* input[type="checkbox"] {
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border: 2px solid #ccc;
-  border-radius: 4px;
-  background-color: white;
+.isCursorPointer {
   cursor: pointer;
-} */
-
-/* Style when checkbox is checked */
-/* input[type="checkbox"]:checked {
-  background-color: blue;
-  border-color: blue;
-} */
-
-/* Style the checkmark */
-/* input[type="checkbox"]:checked::before {
-  content: "✔";
-  display: block;
-  color: white;
-  font-size: 12px;
-  text-align: center;
-  line-height: 14px;
-} */
+}
\ No newline at end of file
diff --git a/www/home.html b/www/home.html
index 9b682de..b078bc3 100644
--- a/www/home.html
+++ b/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>
@@ -89,7 +90,7 @@
           <div class="navbar-item">
             <div class="buttons is-flex-direction-column-mobile">
               <div class="control is-expanded-mobile">
-                <div class="button is-link is-outlined is-fullwidth-mobile">
+                <div id="restartConnectionBtn" class="button is-link is-outlined is-fullwidth-mobile">
                   <span class="icon">
                     <i class="fas fa-arrows-rotate"></i>
                   </span>
diff --git a/www/js/utils/reboot.js b/www/js/utils/reboot.js
index 9481938..ff36f2e 100644
--- a/www/js/utils/reboot.js
+++ b/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);
     });
diff --git a/www/js/utils/restart-connection.js b/www/js/utils/restart-connection.js
new file mode 100644
index 0000000..b474843
--- /dev/null
+++ b/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');
+    }
+});
\ No newline at end of file