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

html dashboard page, without upload

Browse source
This commit is contained in:
Siwat Sirichai 2024-01-01 16:38:14 +07:00
parent 8c43d260d0
commit d340142879
10 changed files with 719 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

176
ESPMegaPRO-firmware/lib/ESPMegaPRO/html/ota.html Normal file
View file

@ -0,0 +1,176 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
<h1>ESPMega PRO</h1>
<h3>Device Information</h3>
<p style="text-align: left">
Hostname
<span style="float: right">$(hostname)$</span>
</p>
<p style="text-align: left">
IP Address
<span style="float: right">$(ip_address)$</span>
</p>
<p style="text-align: left">
MAC Address
<span style="float: right">$(mac_address)$</span>
</p>
<p style="text-align: left">
Device
<span style="float: right">$(model)$</span>
</p>
<p style="text-align: left">
API Server
<span style="float: right">$(mqtt_connection_string)$</span>
</p>
<p style="text-align: left">
API Endpoint
<span style="float: right">$(base_topic)$</span>
</p>
<p style="text-align: left">
Centrally Managed
<span style="float: right">$(mqtt_connected)$</span>
</p>
<button type="button" class="conf" onclick="window.location.href='config'">Settings</button><br /><br />
<hr>
<h3>Upload Software Package</h3>
<input type="file" name="update" id="file" onchange="sub(this)" style="display: none" />
<label id="file-input" for="file">Choose file...</label>
<input type="submit" class="btn" value="Program" /><br /><br />
<div id="prg"></div>
<br />
<div id="prgbar">
<div id="bar"></div>
</div>
<br />
<b>SIWAT SYSTEM 2023</b>
</form>
<script>
function sub(obj) {
var fileName = obj.value.split("\\");
document.getElementById("file-input").innerHTML =
" " + fileName[fileName.length - 1];
}
$("form").submit(function (e) {
e.preventDefault();
var form = $("#upload_form")[0];
var data = new FormData(form);
$.ajax({
url: "/update",
type: "POST",
data: data,
contentType: false,
processData: false,
xhr: function () {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener(
"progress",
function (evt) {
if (evt.lengthComputable) {
var per = evt.loaded / evt.total;
if (Math.round(per * 100) < 100) {
$("#prg").html("Updating . . . (" + Math.round(per * 100) + "%)");
}
else {
$("#prg").html("Update Completed, Rebooting . . .");
}
$("#bar").css("width", Math.round(per * 100) + "%");
}
},
false
);
return xhr;
},
success: function (d, s) {
console.log("success!");
},
error: function (a, b, c) { },
});
});
</script>
<style>
hr {
display: block;
color: #aaaaaa;
background-color: #aaaaaa;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 0px;
height: 3px;
}
#file-input,
input {
width: 100%;
height: 44px;
border-radius: 4px;
margin: 10px auto;
font-size: 15px;
}
input {
background: #f1f1f1;
border: 0;
padding: 0 15px;
}
body {
background-image: url("https://fs.siwatsystem.com/arona_bg.png");
background-size: cover;
font-family: sans-serif;
font-size: 14px;
color: #777;
}
#file-input {
background-color: #CCCCCC;
color: #5E5E5E;
padding: 0;
border: 1px solid #ddd;
line-height: 44px;
text-align: center;
display: block;
cursor: pointer;
}
#bar,
#prgbar {
background-color: #D9D9D9;
border-radius: 10px;
}
#bar {
background-color: #29CD1F;
width: 0%;
height: 10px;
}
form {
background: rgba(255, 255, 255, 0.95);
max-width: 258px;
margin: 75px auto;
padding: 30px;
border-radius: 15px;
text-align: center;
}
.btn {
background: #CA3D3D;
color: #fff;
cursor: pointer;
}
.conf {
background: #417df3;
color: #fff;
cursor: pointer;
width: 100%;
height: 44px;
border-radius: 4px;
margin: 10px auto;
font-size: 15px;
border: 0;
}
</style>