From b423866d0debe72d6bef7c9cedaef93e09b0698d Mon Sep 17 00:00:00 2001
From: Russel Yasol <russel.yasol@wvsu.edu.ph>
Date: Sun, 24 Mar 2024 22:38:21 +0800
Subject: [PATCH] added reboot button

---
 simpleadmin/www/atcommander.html | 69 ++++++++++++++++++++++++++++++--
 simpleadmin/www/styles.css       | 41 +++++++++++++++++++
 2 files changed, 106 insertions(+), 4 deletions(-)
 create mode 100644 simpleadmin/www/styles.css
diff --git a/simpleadmin/www/atcommander.html b/simpleadmin/www/atcommander.html
index 5bc2ff7..da5bfda 100644
--- a/simpleadmin/www/atcommander.html
+++ b/simpleadmin/www/atcommander.html
@@ -9,6 +9,7 @@
     <script src="/js/alpinejs.min.js" defer></script>
     <link rel="stylesheet" href="/css/bulma.css" />
     <link rel="stylesheet" type="text/css" href="/css/admin.css" />
+    <link rel="stylesheet" href="styles.css" />
   </head>
 
   <body>
@@ -122,11 +123,40 @@
             </header>
             <div class="card-content">
               <div class="content">
+                <div
+                  class="field"
+                  style="margin-bottom: 1rem"
+                  x-data="atCommands()"
+                >
+                  <p class="control">
+                    <button
+                      class="button is-danger"
+                      @click="sendRebootCommand()"
+                      :disabled="isRebooting"
+                    >
+                      Reboot
+                    </button>
+                  </p>
+
+                  <!-- Loading modal -->
+                  <div x-show="isRebooting" class="modal-overlay">
+                    <div class="loading-modal">
+                      <div class="spinner"></div>
+                      <div class="loading-text" style="display: flex; flex-direction: column;">
+                        <h3>Rebooting...</h3> 
+                        <p style="margin-top: 0.5rem;">Please wait for
+                          <span x-text="countdown" style="font-weight: 500;"></span> seconds before
+                          refreshing the page.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
                 <!-- Add your useful commands content here -->
                 <p>Here are some useful commands:</p>
                 <ul>
                   <li>
-                    See https://github.com/iamromulan/RM520N-GL#at-commands for
+                    <!-- Open to another tab -->
+                    See <a href="https://github.com/iamromulan/RM520N-GL#at-commands" target="_blank" style="cursor: pointer;">https://github.com/iamromulan/RM520N-GL#at-commands</a> for
                     more
                   </li>
                   <li>AT+CFUN=1,1 (reboot)</li>
@@ -235,20 +265,24 @@
         </div>
       </div>
     </div>
-    <!-- END Useful Commands Section -->
 
     <script>
       function atCommands() {
         return {
           isLoading: false,
+          isRebooting: false,
+          countdown: 40, // Total waiting time in seconds
           atcmd: null,
-          defaultAtCommand: 'ATI',
+          defaultAtCommand: "ATI",
           atCommandResponse: "",
           sendAtCommand() {
             if (!this.atcmd) {
               // Use ATI as default command
               this.atcmd = "ATI";
-              console.log("AT Command is empty, using ATI as default command: ", this.atcmd);
+              console.log(
+                "AT Command is empty, using ATI as default command: ",
+                this.atcmd
+              );
             }
             this.isLoading = true;
             fetch(
@@ -271,6 +305,33 @@
           clearResponses() {
             this.atCommandResponse = "";
           },
+          sendRebootCommand() {
+            this.atcmd = "AT+CFUN=1,1";
+            this.isRebooting = true;
+            console.log("Reboot command sent: ", this.atcmd);
+            fetch(
+              "/cgi-bin/get_atcommand?" +
+                new URLSearchParams({
+                  atcmd: this.atcmd,
+                })
+            )
+              .then((res) => {
+                return res.text();
+              })
+              .then((data) => {
+                this.atCommandResponse =
+                  "Rebooting... Please wait a few seconds before refreshing the page.";
+              })
+              .finally(() => {
+                let timer = setInterval(() => {
+                  this.countdown--;
+                  if (this.countdown <= 0) {
+                    clearInterval(timer);
+                    this.isRebooting = false;
+                  }
+                }, 1000); // Update countdown every second
+              });
+          },
         };
       }
     </script>
diff --git a/simpleadmin/www/styles.css b/simpleadmin/www/styles.css
new file mode 100644
index 0000000..8537dd4
--- /dev/null
+++ b/simpleadmin/www/styles.css
@@ -0,0 +1,41 @@
+    .modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .loading-modal {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    text-align: center;
+  }
+  
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left-color: #333;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 10px auto;
+  }
+  
+  .loading-text {
+    font-size: 18px;
+    color: #333;
+  }
+  
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
\ No newline at end of file
