From ea2eef0ad1db47b87673579bfeefe3821cc8ee2c Mon Sep 17 00:00:00 2001
From: Siwat Sirichai <siwat@siwatinc.com>
Date: Sat, 18 May 2024 16:17:12 +0700
Subject: [PATCH] update html

---
 .../lib/ESPMegaPRO/html/config.html           | 99 ++++++++++++-------
 .../lib/ESPMegaPRO/html/ota.html              | 49 +++++++--
 2 files changed, 107 insertions(+), 41 deletions(-)

diff --git a/ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/config.html b/ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/config.html
index 5c3d80b..5a44452 100644
--- a/ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/config.html
+++ b/ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/config.html
@@ -7,38 +7,69 @@
   <h1>ESPMega PRO</h1>
   <h3>Device Configurations</h3>
   <p class="config_title">IP Address</p>
-  <input type="text" id="ip_address" name="ip_address" class="conf_txt" value="$(ip_address)$"><br>
+  <input type="text" id="ip_address" name="ip_address" class="conf_txt" value="Loading ..."><br>
   <p class="config_title">Network Mask</p>
-  <input type="text" id="netmask" name="netmask" class="conf_txt" value="$(netmask)$"><br>
+  <input type="text" id="netmask" name="netmask" class="conf_txt" value="Loading ..."><br>
   <p class="config_title">Gateway</p>
-  <input type="text" id="gateway" name="gateway" class="conf_txt" value="$(gateway)$"><br>
+  <input type="text" id="gateway" name="gateway" class="conf_txt" value="Loading ..."><br>
   <p class="config_title">DNS Server</p>
-  <input type="text" id="dns" name="dns" class="conf_txt" value="$(dns)$"><br>
+  <input type="text" id="dns" name="dns" class="conf_txt" value="Loading ..."><br>
   <p class="config_title">Hostname</p>
-  <input type="text" id="hostname" name="hostname" class="conf_txt" value="$(hostname)$"><br>
+  <input type="text" id="hostname" name="hostname" class="conf_txt" value="Loading ..."><br>
   <p class="config_title">BMS Server - IP Address</p>
-  <input type="text" id="bms_ip" name="bms_ip" class="conf_txt" value="$(bms_ip)$"><br>
+  <input type="text" id="bms_ip" name="bms_ip" class="conf_txt" value="Loading ..."><br>
   <p class="config_title">BMS Server - Port</p>
-  <input type="text" id="bms_port" name="bms_port" class="conf_txt" value="$(bms_port)$"><br>
+  <input type="text" id="bms_port" name="bms_port" class="conf_txt" value="Loading ..."><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" value="yes">
     <span class="checkmark"></span>
   </label>
   <p class="config_title">BMS Server - Username</p>
-  <input type="text" id="bms_username" name="bms_username" class="conf_txt" value="$(bms_username)$"><br>
+  <input type="text" id="bms_username" name="bms_username" class="conf_txt" value="Loading ..."><br>
   <p class="config_title">BMS Server - Password</p>
-  <input type="password" id="bms_password" name="bms_password" class="conf_txt" value="$(bms_password)$"><br>
+  <input type="password" id="bms_password" name="bms_password" class="conf_txt" value="Loading ..."><br>
   <p class="config_title">BMS Server - Endpoint</p>
-  <input type="text" id="bms_endpoint" name="bms_endpoint" class="conf_txt" value="$(bms_endpoint)$"><br>
+  <input type="text" id="bms_endpoint" name="bms_endpoint" class="conf_txt" value="Loading ..."><br>
   <p class="config_title">Web Interface - Username</p>
-  <input type="text" id="web_username" name="web_username" class="conf_txt" value="$(web_username)$"><br>
+  <input type="text" id="web_username" name="web_username" class="conf_txt" value="Loading ..."><br>
   <p class="config_title">Web Interface - Password</p>
-  <input type="password" id="web_password" name="web_password" class="conf_txt" value="$(web_password)$"><br>
-  <input type="submit" class="btn" value="Save">
+  <input type="password" id="web_password" name="web_password" class="conf_txt" value="Loading ..."><br>
+  <input id="save_btn" type="submit" class="btn" value="Save">
   <button type="button" class="conf" onclick="window.location.href='/'">Back</button><br /><br />
   <b>SIWAT SYSTEM 2023</b>
 </form>
 <script>
+  window.onload = function () {
+    var saveButton = document.getElementById("save_btn");
+    saveButton.style.pointerEvents = "none";
+    saveButton.style.opacity = "0.6";
+    // Get the configuration data
+    fetch("/get_config")
+      .then(response => response.json())
+      .then(data => {
+        // Handle the response data
+        console.log(data);
+        document.getElementById("ip_address").value = data.ip_address;
+        document.getElementById("netmask").value = data.netmask;
+        document.getElementById("gateway").value = data.gateway;
+        document.getElementById("dns").value = data.dns;
+        document.getElementById("hostname").value = data.hostname;
+        document.getElementById("bms_ip").value = data.bms_ip;
+        document.getElementById("bms_port").value = data.bms_port;
+        document.getElementById("bms_useauth").checked = data.bms_useauth;
+        document.getElementById("bms_username").value = data.bms_username;
+        document.getElementById("bms_password").value = data.bms_password;
+        document.getElementById("bms_endpoint").value = data.bms_endpoint;
+        document.getElementById("web_username").value = data.web_username;
+        document.getElementById("web_password").value = data.web_password;
+        saveButton.style.pointerEvents = "auto";
+        saveButton.style.opacity = "1";
+      })
+      .catch(error => {
+        // Handle any errors
+        console.error(error);
+      });
+  } 
   function send_config() {
     event.preventDefault();
     // Get the form data
@@ -60,12 +91,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
@@ -83,14 +114,14 @@
     var timeLeft = 15;
     var countdownTimer = setInterval(function () {
       timeLeft--;
-      countdown.textContent = timeLeft+"s";
+      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);
+      window.location.replace("http://" + formData.ip_address);
     }, 15000);
   }
 </script>
@@ -291,16 +322,18 @@
     left: 50%;
     transform: translate(-50%, -50%);
   }
+
   .spinner-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  z-index: 9999;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.9); /* semi-transparent black background */
-}
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    z-index: 9999;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.9);
+    /* semi-transparent black background */
+  }
 </style>
\ No newline at end of file
diff --git a/ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/ota.html b/ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/ota.html
index 5a6a1f5..0aa1e45 100644
--- a/ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/ota.html
+++ b/ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/ota.html
@@ -4,31 +4,43 @@
   <h3>Device Information</h3>
   <p style="text-align: left">
     Hostname
-    <span style="float: right">$(hostname)$</span>
+    <span style="float: right" id="hostname">Loading ...</span>
   </p>
   <p style="text-align: left">
     IP Address
-    <span style="float: right">$(ip_address)$</span>
+    <span style="float: right" id="ip_address">Loading ...</span>
   </p>
   <p style="text-align: left">
     MAC Address
-    <span style="float: right">$(mac_address)$</span>
+    <span style="float: right" id="mac_address">Loading ...</span>
   </p>
   <p style="text-align: left">
-    Device
-    <span style="float: right">$(model)$</span>
+    Model
+    <span style="float: right" id="model">Loading ...</span>
+  </p>
+  <p style="text-align: left">
+    FW Version
+    <span style="float: right" id="fw_version">Loading ...</span>
+  </p>
+  <p style="text-align: left">
+    SDK Version
+    <span style="float: right" id="sdk_version">Loading ...</span>
+  </p>
+  <p style="text-align: left">
+    IDF Version
+    <span style="float: right" id="idf_version">Loading ...</span>
   </p>
   <p style="text-align: left">
     API Server
-    <span style="float: right">$(mqtt_connection_string)$</span>
+    <span style="float: right" id="api_server">Loading ...</span>
   </p>
   <p style="text-align: left">
     API Endpoint
-    <span style="float: right">$(base_topic)$</span>
+    <span style="float: right" id="api_endpoint">Loading ...</span>
   </p>
   <p style="text-align: left">
     Centrally Managed
-    <span style="float: right">$(mqtt_connected)$</span>
+    <span style="float: right" id="centrally_managed">Loading ...</span>
   </p>
   <button type="button" class="conf" onclick="window.location.href='config'">Settings</button><br /><br />
   <hr>
@@ -48,6 +60,27 @@
   <b>SIWAT SYSTEM 2023</b>
 </form>
 <script>
+  window.onload(function () {
+    fetch("/get_device_info")
+      .then(response => response.json())
+      .then(data => {
+        console.log(data);
+        document.getElementById("hostname").innerHTML = data.hostname;
+        document.getElementById("ip_address").innerHTML = data.ip_address;
+        document.getElementById("mac_address").innerHTML = data.mac_address;
+        document.getElementById("model").innerHTML = data.model;
+        document.getElementById("fw_version").innerHTML = data.fw_version;
+        document.getElementById("sdk_version").innerHTML = data.sdk_version;
+        document.getElementById("idf_version").innerHTML = data.idf_version;
+        document.getElementById("api_server").innerHTML = data.api_server+":"+data.api_port;
+        document.getElementById("api_endpoint").innerHTML = data.api_endpoint;
+        document.getElementById("centrally_managed").innerHTML = data.centrally_managed;
+      }).catch(error => {
+        console.error(error);
+      });
+    }
+  );
+        
   function sub(obj) {
     var fileName = obj.value.split("\\");
     document.getElementById("file-input").innerHTML =