userbogd/WebguiappTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reworked with component

Browse Source
This commit is contained in:
Bogdan Pilyugin 2023-07-12 19:38:40 +02:00
parent 03ed6c7309
commit fae113a935
2 changed files with 71 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
HTML/espfs.paths
View File

@ -1,34 +1,34 @@
adapters.html
api
api/dbg.json
api/dbg2.json
api/gendata.json
api/mem.json
api/set1.json
api/set2.json
api/set3.json
api/stat.json
api/status.json
api/tmr.json
api/users.json
api/wifiscan.json
application.html
favicon.ico
index.html
info.html
reboot.html
res
res/appstyles.css
res/ca_cert.pem
res/cron.js
res/crondata.js
res/dynamic.css
res/iconsfont.css
res/iconsfont.woff2
res/logo.png
res/main.js
res/res.js
res/styles.css
res/vue.global.prod_3_3_4.js
services.html
adapters.html
api
api/dbg.json
api/dbg2.json
api/gendata.json
api/mem.json
api/set1.json
api/set2.json
api/set3.json
api/stat.json
api/status.json
api/tmr.json
api/users.json
api/wifiscan.json
application.html
favicon.ico
index.html
info.html
reboot.html
res
res/appstyles.css
res/ca_cert.pem
res/cron.js
res/crondata.js
res/dynamic.css
res/iconsfont.css
res/iconsfont.woff2
res/logo.png
res/main.js
res/res.js
res/styles.css
res/vue.global.prod_3_3_4.js
services.html
system.html

74
HTML/index.html
View File

@ -24,10 +24,7 @@
<div class='cntr' style='text-align:center;margin-top:20px'>
<span id="name" ><div class='hdr1'>This device brand name</div></span><br/><br/>
<div id="app">
{{ TimeToISO(status_json.time)}}<br/>
Uptime: {{ToHms(status_json.uptime)}}<br/><br/>
Signal WiFi:<span style="color:#0099ff;font-weight:bold">{{status_json.wlev}}</span><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<informer></informer>
</div>
</div>
</div>
@ -42,44 +39,49 @@
</script>
<script>
const app = Vue.createApp({
const app = Vue.createApp({});
app.component('informer', {
data(){
return {
status: true,
status_json: {},
interval: null}
},
methods: {
async getData() {
const res = await fetch("./api/status.json");
this.status_json = await res.json();
},
TimeToISO(t) {
theDate = new Date(t * 1000);
return (theDate.toString()).slice(0,34);
},
ToHms(d) {
d = Number(d);
dd = Math.floor(d/86400);
h = Math.floor(d%86400/3600);
m = Math.floor(d%3600/60);
s = Math.floor(d%3600%60);
return (' '+dd+'d '+(h<10?"0":"")+h+":"+(m<10?"0":"")+m+":"+(s<10?"0":"")+s);}
},
mounted() {
this.getData()
},
created(){
this.interval = setInterval(() =>{
this.getData()},1000)
},
destroyed(){
clearInterval(this.interval)
}
}).mount('#app');
methods: {
async getData() {
const res = await fetch("./api/status.json");
this.status_json = await res.json();
},
TimeToISO(t) {
theDate = new Date(t * 1000);
return (theDate.toString()).slice(0,34);
},
ToHms(d) {
d = Number(d);
dd = Math.floor(d/86400);
h = Math.floor(d%86400/3600);
m = Math.floor(d%3600/60);
s = Math.floor(d%3600%60);
return (' '+dd+'d '+(h<10?"0":"")+h+":"+(m<10?"0":"")+m+":"+(s<10?"0":"")+s);}
},
mounted() {
this.getData()
},
created(){
this.interval = setInterval(() => {this.getData()},1000)
},
destroyed(){
clearInterval(this.interval)
},
template:`{{TimeToISO(status_json.time)}}<br/>
Uptime:{{ToHms(status_json.uptime)}}<br/><br/>
Signal WiFi:<span style="color:#0099ff;font-weight:bold">{{status_json.wlev}}</span><br/>
<br/><br/><br/><br/>`
});
app.mount('#app');
</script>
</body>
</html>