siwat
/
ESPMegaPRO-v3-SDK
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update html

This commit is contained in:
Siwat Sirichai 2024-05-18 16:17:12 +07:00
parent 2a497625de
commit ea2eef0ad1
2 changed files with 107 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/config.html
View File

@ -7,38 +7,69 @@
<h1>ESPMega PRO</h1> <h1>ESPMega PRO</h1>
<h3>Device Configurations</h3> <h3>Device Configurations</h3>
<p class="config_title">IP Address</p> <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> <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> <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> <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> <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> <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> <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 <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> <span class="checkmark"></span>
</label> </label>
<p class="config_title">BMS Server - Username</p> <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> <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> <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> <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> <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="password" id="web_password" name="web_password" class="conf_txt" value="Loading ..."><br>
<input type="submit" class="btn" value="Save"> <input id="save_btn" type="submit" class="btn" value="Save">
<button type="button" class="conf" onclick="window.location.href='/'">Back</button><br /><br /> <button type="button" class="conf" onclick="window.location.href='/'">Back</button><br /><br />
<b>SIWAT SYSTEM 2023</b> <b>SIWAT SYSTEM 2023</b>
</form> </form>
<script> <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() { function send_config() {
event.preventDefault(); event.preventDefault();
// Get the form data // Get the form data
@ -83,14 +114,14 @@
var timeLeft = 15; var timeLeft = 15;
var countdownTimer = setInterval(function () { var countdownTimer = setInterval(function () {
timeLeft--; timeLeft--;
countdown.textContent = timeLeft+"s"; countdown.textContent = timeLeft + "s";
if (timeLeft <= 0) clearInterval(countdownTimer); if (timeLeft <= 0) clearInterval(countdownTimer);
}, 1000); }, 1000);
// Wait for 15 seconds // Wait for 15 seconds
setTimeout(function () { setTimeout(function () {
// Redirect user to homepage based on Form's IP // Redirect user to homepage based on Form's IP
window.location.replace("http://"+formData.ip_address); window.location.replace("http://" + formData.ip_address);
}, 15000); }, 15000);
} }
</script> </script>
@ -291,6 +322,7 @@
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.spinner-container { .spinner-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -301,6 +333,7 @@
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0, 0, 0, 0.9); /* semi-transparent black background */ background: rgba(0, 0, 0, 0.9);
} /* semi-transparent black background */
}
</style> </style>

49
ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/ota.html
View File

@ -4,31 +4,43 @@
<h3>Device Information</h3> <h3>Device Information</h3>
<p style="text-align: left"> <p style="text-align: left">
Hostname Hostname
<span style="float: right">$(hostname)$</span> <span style="float: right" id="hostname">Loading ...</span>
</p> </p>
<p style="text-align: left"> <p style="text-align: left">
IP Address IP Address
<span style="float: right">$(ip_address)$</span> <span style="float: right" id="ip_address">Loading ...</span>
</p> </p>
<p style="text-align: left"> <p style="text-align: left">
MAC Address MAC Address
<span style="float: right">$(mac_address)$</span> <span style="float: right" id="mac_address">Loading ...</span>
</p> </p>
<p style="text-align: left"> <p style="text-align: left">
Device Model
<span style="float: right">$(model)$</span> <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>
<p style="text-align: left"> <p style="text-align: left">
API Server API Server
<span style="float: right">$(mqtt_connection_string)$</span> <span style="float: right" id="api_server">Loading ...</span>
</p> </p>
<p style="text-align: left"> <p style="text-align: left">
API Endpoint API Endpoint
<span style="float: right">$(base_topic)$</span> <span style="float: right" id="api_endpoint">Loading ...</span>
</p> </p>
<p style="text-align: left"> <p style="text-align: left">
Centrally Managed Centrally Managed
<span style="float: right">$(mqtt_connected)$</span> <span style="float: right" id="centrally_managed">Loading ...</span>
</p> </p>
<button type="button" class="conf" onclick="window.location.href='config'">Settings</button><br /><br /> <button type="button" class="conf" onclick="window.location.href='config'">Settings</button><br /><br />
<hr> <hr>
@ -48,6 +60,27 @@
<b>SIWAT SYSTEM 2023</b> <b>SIWAT SYSTEM 2023</b>
</form> </form>
<script> <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) { function sub(obj) {
var fileName = obj.value.split("\\"); var fileName = obj.value.split("\\");
document.getElementById("file-input").innerHTML = document.getElementById("file-input").innerHTML =