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

68
HTML/index.html
View File

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