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>
|
||||||
|
|
@ -13,6 +13,7 @@ api/tmr.json
|
||||||
api/users.json
|
api/users.json
|
||||||
api/wifiscan.json
|
api/wifiscan.json
|
||||||
application.html
|
application.html
|
||||||
|
dmxmaster.html
|
||||||
favicon.ico
|
favicon.ico
|
||||||
index.html
|
index.html
|
||||||
info.html
|
info.html
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,6 @@
|
||||||
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);
|
||||||
|
|
@ -65,12 +64,18 @@
|
||||||
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);}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computed:{
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getData()
|
this.getData()
|
||||||
},
|
},
|
||||||
created(){
|
created(){
|
||||||
this.interval = setInterval(() => {this.getData()},1000)
|
this.interval = setInterval(() => this.getData(),1000)
|
||||||
},
|
},
|
||||||
destroyed(){
|
destroyed(){
|
||||||
clearInterval(this.interval)
|
clearInterval(this.interval)
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
Subproject commit 49bab0ea5c2144896bf8537abe32168b0f7dede3
|
Subproject commit 51db5691cea130f8fe5b09c5ca2604942a8b96d0
|
||||||
Loading…
Reference in New Issue
Block a user