113 lines
3.2 KiB
HTML
113 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="res/styles.css">
|
|
<link rel="stylesheet" href="res/iconsfont.css">
|
|
<script src="res/main.js"></script>
|
|
<script src="res/res.js"></script>
|
|
<script src="res/vue.global.prod.js"></script>
|
|
<title>~name~</title>
|
|
</head>
|
|
<body>
|
|
<script>PageSurround();</script>
|
|
|
|
<!--========== CONTENTS ==========-->
|
|
<main>
|
|
<section>
|
|
<div class="ml">
|
|
|
|
<div class="mlp">
|
|
<div class="mlpc">
|
|
<div class="mlhdr"></div>
|
|
<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">
|
|
<informer></informer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<script>
|
|
showMenu('header-toggle','navbar');
|
|
|
|
function uptimeconvert(t)
|
|
{
|
|
d = Number(t);
|
|
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);
|
|
}
|
|
|
|
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) {
|
|
d = Number(t);
|
|
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);
|
|
|
|
},
|
|
ToHms(d) {}
|
|
|
|
},
|
|
computed:{
|
|
uptime: function(){
|
|
d = Number(this.status_json.uptime);
|
|
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);
|
|
},
|
|
|
|
|
|
isotime: function(){
|
|
theDate = new Date(this.status_json.time * 1000);
|
|
return (theDate.toString()).slice(0,34);
|
|
}
|
|
},
|
|
|
|
|
|
mounted() {
|
|
this.getData()
|
|
},
|
|
created(){
|
|
this.interval = setInterval(() => this.getData(),1000)
|
|
},
|
|
destroyed(){
|
|
clearInterval(this.interval)
|
|
},
|
|
template:`{{isotime}}<br/>
|
|
Uptime:{{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> |