based on vue dmx master control page tests
This commit is contained in:
parent
fae113a935
commit
6a9e93d99f
124
HTML/dmxmaster.html
Normal file
124
HTML/dmxmaster.html
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<!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_3_3_4.js"></script>
|
||||
<title>~name~</title>
|
||||
<style>
|
||||
.svldetails{
|
||||
min-height: 70px;
|
||||
min-width: 70px;
|
||||
margin: 5px;
|
||||
background-color: var(--first-color);
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.selection {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
</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'>
|
||||
|
||||
<div id="app">
|
||||
<devlist :slvdevices="slvdevices"></devlist>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<script>
|
||||
showMenu('header-toggle','navbar');
|
||||
</script>
|
||||
|
||||
<script>
|
||||
const app = Vue.createApp({
|
||||
data(){
|
||||
return {
|
||||
slvdevices: [],
|
||||
selectforadd: "RGB",
|
||||
addrforadd:1}
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
app.component('svldetails', {
|
||||
props: ["slvdev"],
|
||||
template: `<div class="svldetails" :class="{ selection: slvdev.sel}" v-on:click="slvdev.sel =!slvdev.sel">
|
||||
<p>{{slvdev.type}}</p>
|
||||
<p>{{slvdev.addr}}</p>
|
||||
</div>`
|
||||
});
|
||||
app.component('devlist', {
|
||||
props: ["slvdevices"],
|
||||
methods:
|
||||
{
|
||||
AddDevice(){
|
||||
this.slvdevices.push({type: this.selectforadd, addr: this.addrforadd, sel: false});
|
||||
},
|
||||
DelDevice(){
|
||||
for(i=0; i<this.slvdevices.length; i++)
|
||||
{
|
||||
if(this.slvdevices[i].sel == true)
|
||||
this.slvdevices.splice(i,1);
|
||||
}
|
||||
},
|
||||
postData() {
|
||||
fetch("\dmxmaster.html", {
|
||||
method: 'post',
|
||||
headers: {
|
||||
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
|
||||
},
|
||||
body: JSON.stringify(this.slvdevices)
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<button class="btn" v-on:click="AddDevice">Добавить устройство</button>
|
||||
<select v-model="selectforadd">
|
||||
<option>RGBW</option>
|
||||
<option>RGB</option>
|
||||
<option>D</option>
|
||||
</select>
|
||||
<input v-model="addrforadd" placeholder="1" />
|
||||
|
||||
<div class="container">
|
||||
<svldetails v-for="slvdev in slvdevices" :key="slvdev.id" :slvdev="slvdev"></svldetails>
|
||||
</div>
|
||||
<button class="btn" v-on:click="DelDevice">Удалить устройства</button>
|
||||
<button class="btn" v-on:click="postData">Отправить</button>
|
||||
</div>`
|
||||
});
|
||||
app.mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,34 +1,35 @@
|
|||
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
|
||||
dmxmaster.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
|
||||
|
|
@ -57,7 +57,6 @@
|
|||
theDate = new Date(t * 1000);
|
||||
return (theDate.toString()).slice(0,34);
|
||||
},
|
||||
|
||||
ToHms(d) {
|
||||
d = Number(d);
|
||||
dd = Math.floor(d/86400);
|
||||
|
|
@ -65,12 +64,18 @@
|
|||
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);}
|
||||
|
||||
},
|
||||
|
||||
computed:{
|
||||
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getData()
|
||||
},
|
||||
created(){
|
||||
this.interval = setInterval(() => {this.getData()},1000)
|
||||
this.interval = setInterval(() => this.getData(),1000)
|
||||
},
|
||||
destroyed(){
|
||||
clearInterval(this.interval)
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 49bab0ea5c2144896bf8537abe32168b0f7dede3
|
||||
Subproject commit 51db5691cea130f8fe5b09c5ca2604942a8b96d0
|
||||
Loading…
Reference in New Issue
Block a user