WebUI Save Config Complete

ESPMegaPRO-firmware/lib/ESPMegaPRO/html/config.html

@@ -1,4 +1,8 @@
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<div id="loadingSpinner" class="spinner-container" style="display: none;">
+  <div class="spinner"></div>
+  <p id="loadingText">Saving Configuration Please wait (<span id="countdown">15s</span>)</p>
+</div>
+</div>
 <form enctype="multipart/form-data" id="config_form" onsubmit="send_config(event)">
   <h1>ESPMega PRO</h1>
   <h3>Device Configurations</h3>
@@ -17,7 +21,7 @@
   <p class="config_title">BMS Server - Port</p>
   <input type="text" id="bms_port" name="bms_port" class="conf_txt" value="$(bms_port)$"><br>
   <label class="container">Authentication
-    <input type="checkbox" name="bms_useauth"  id="bms_useauth" $(bms_use_auth)$ value="yes">
+    <input type="checkbox" name="bms_useauth" id="bms_useauth" $(bms_use_auth)$ value="yes">
     <span class="checkmark"></span>
   </label>
   <p class="config_title">BMS Server - Username</p>
@@ -56,12 +60,12 @@
 
     // Send the POST request
     fetch("/save_config", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(formData)
-    })
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(formData)
+      })
       .then(response => response.json())
       .then(data => {
         // Handle the response data
@@ -71,10 +75,26 @@
         // Handle any errors
         console.error(error);
       });
+    // Show the loading spinner
+    document.getElementById('loadingSpinner').style.display = 'block';
+
+    // Start the countdown
+    var countdown = document.getElementById('countdown');
+    var timeLeft = 15;
+    var countdownTimer = setInterval(function () {
+      timeLeft--;
+      countdown.textContent = timeLeft+"s";
+      if (timeLeft <= 0) clearInterval(countdownTimer);
+    }, 1000);
+
+    // Wait for 15 seconds
+    setTimeout(function () {
+      // Redirect user to homepage based on Form's IP
+      window.location.replace("http://"+formData.ip_address);
+    }, 15000);
   }
 </script>
 <style>
- 
   p.config_title {
     font-size: 12;
     font-weight: bold;
@@ -169,6 +189,7 @@
     font-size: 15px;
     border: 0;
   }
+
   .conf_txt {
     background-color: #e2e2e2;
   }
@@ -177,63 +198,109 @@
     size: 4;
     display: inline-block;
   }
+
   .container {
-  display: block;
-  position: relative;
-  padding-left: 0px;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 20px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
+    display: block;
+    position: relative;
+    padding-left: 0px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 20px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
 
-.container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
+  .container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
 
-.checkmark {
-  position: absolute;
-  top: 0;
+  .checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 25px;
+    width: 25px;
+    background-color: #eee;
+  }
+
+  .container:hover input~.checkmark {
+    background-color: #ccc;
+  }
+
+  .container input:checked~.checkmark {
+    background-color: #2196F3;
+  }
+
+  .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+
+  .container input:checked~.checkmark:after {
+    display: block;
+  }
+
+  .container .checkmark:after {
+    left: 9px;
+    top: 5px;
+    width: 5px;
+    height: 10px;
+    border: solid white;
+    border-width: 0 3px 3px 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  .spinner {
+    position: fixed;
+    top: 40%;
+    left: 44%;
+    transform: translate(-50%, -50%);
+    width: 100px;
+    height: 100px;
+    border: 16px solid #f3f3f3;
+    border-top: 16px solid #3498db;
+    border-radius: 50%;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  #loadingText {
+    color: #fff;
+    font-size: 40px;
+    text-align: center;
+    position: fixed;
+    top: 65%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  z-index: 9999;
   left: 0;
-  height: 25px;
-  width: 25px;
-  background-color: #eee;
-}
-
-.container:hover input ~ .checkmark {
-  background-color: #ccc;
-}
-
-.container input:checked ~ .checkmark {
-  background-color: #2196F3;
-}
-
-.checkmark:after {
-  content: "";
-  position: absolute;
-  display: none;
-}
-
-.container input:checked ~ .checkmark:after {
-  display: block;
-}
-
-.container .checkmark:after {
-  left: 9px;
-  top: 5px;
-  width: 5px;
-  height: 10px;
-  border: solid white;
-  border-width: 0 3px 3px 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.9); /* semi-transparent black background */
 }
 </style>