developing dmxmaster page
This commit is contained in:
parent
6a9e93d99f
commit
0f9e17cae9
|
|
@ -22,7 +22,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.selection {
|
.selection {
|
||||||
background-color: #ff0000;
|
border: 3px solid var(--accent-color);;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
<div class='cntr' style='text-align:center;margin-top:20px'>
|
<div class='cntr' style='text-align:center;margin-top:20px'>
|
||||||
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<devlist :slvdevices="slvdevices"></devlist>
|
<devlist v-bind:slvdevices="slvdevices"></devlist>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -58,34 +58,48 @@
|
||||||
<script>
|
<script>
|
||||||
const app = Vue.createApp({
|
const app = Vue.createApp({
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
slvdevices: [],
|
slvdevices: []
|
||||||
selectforadd: "RGB",
|
}
|
||||||
addrforadd:1}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
app.component('svldetails', {
|
app.component('svldetails', {
|
||||||
props: ["slvdev"],
|
props: ["slvdev"],
|
||||||
template: `<div class="svldetails" :class="{ selection: slvdev.sel}" v-on:click="slvdev.sel =!slvdev.sel">
|
methods:{
|
||||||
|
SelDev(){
|
||||||
|
this.slvdev.sel =!this.slvdev.sel;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
template: `<div class="svldetails" :class="{ selection: slvdev.sel}" v-on:click="SelDev">
|
||||||
<p>{{slvdev.type}}</p>
|
<p>{{slvdev.type}}</p>
|
||||||
<p>{{slvdev.addr}}</p>
|
<p>{{slvdev.addr}}</p>
|
||||||
</div>`
|
</div>`
|
||||||
});
|
});
|
||||||
app.component('devlist', {
|
app.component('devlist', {
|
||||||
props: ["slvdevices"],
|
data() {return{
|
||||||
|
devtypes:[
|
||||||
|
{type:'RGBW', chls:4},
|
||||||
|
{type:'RGB', chls:3},
|
||||||
|
{type:'D', chls:1},
|
||||||
|
{type:'DIMMER', chls:8}
|
||||||
|
],
|
||||||
|
selectedtype:'RGB',
|
||||||
|
addrforadd:1
|
||||||
|
}},
|
||||||
|
props: ["slvdevices"],
|
||||||
methods:
|
methods:
|
||||||
{
|
{
|
||||||
AddDevice(){
|
AddDevice(){
|
||||||
this.slvdevices.push({type: this.selectforadd, addr: this.addrforadd, sel: false});
|
this.slvdevices.push({type: this.selectedtype, addr: this.addrforadd, sel: false});
|
||||||
|
for(i=0; i<this.devtypes.length; i++)
|
||||||
|
if(this.devtypes[i].type == this.selectedtype)
|
||||||
|
this.addrforadd += this.devtypes[i].chls;
|
||||||
},
|
},
|
||||||
DelDevice(){
|
DelDevice(){
|
||||||
for(i=0; i<this.slvdevices.length; i++)
|
for(i=0; i<this.slvdevices.length; i++)
|
||||||
{
|
{
|
||||||
if(this.slvdevices[i].sel == true)
|
while(this.slvdevices[i].sel == true)
|
||||||
this.slvdevices.splice(i,1);
|
this.slvdevices.splice(i,1);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -97,25 +111,19 @@
|
||||||
},
|
},
|
||||||
body: JSON.stringify(this.slvdevices)
|
body: JSON.stringify(this.slvdevices)
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
template: `<div>
|
template: `<div>
|
||||||
<button class="btn" v-on:click="AddDevice">Добавить устройство</button>
|
<button class="btn" v-on:click="AddDevice">Add device</button>
|
||||||
<select v-model="selectforadd">
|
<select v-model="selectedtype">
|
||||||
<option>RGBW</option>
|
<option v-for="dtype in devtypes" v-bind:value="dtype.type">{{dtype.type}}</option>
|
||||||
<option>RGB</option>
|
</select>
|
||||||
<option>D</option>
|
<input v-model="addrforadd" type="number"/>
|
||||||
</select>
|
|
||||||
<input v-model="addrforadd" placeholder="1" />
|
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<svldetails v-for="slvdev in slvdevices" :key="slvdev.id" :slvdev="slvdev"></svldetails>
|
<svldetails v-for="slvdev in slvdevices" :key="slvdev.id" :slvdev="slvdev"></svldetails>
|
||||||
</div>
|
</div>
|
||||||
<button class="btn" v-on:click="DelDevice">Удалить устройства</button>
|
<button class="btn" v-on:click="DelDevice">Delete device</button>
|
||||||
<button class="btn" v-on:click="postData">Отправить</button>
|
<button class="btn" v-on:click="postData">Save conf</button>
|
||||||
</div>`
|
</div>`
|
||||||
});
|
});
|
||||||
app.mount('#app');
|
app.mount('#app');
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
adapters.html
|
adapters.html
|
||||||
api
|
api
|
||||||
api/dbg.json
|
api/dbg.json
|
||||||
api/dbg2.json
|
api/dbg2.json
|
||||||
api/gendata.json
|
api/gendata.json
|
||||||
api/mem.json
|
api/mem.json
|
||||||
api/set1.json
|
api/set1.json
|
||||||
api/set2.json
|
api/set2.json
|
||||||
api/set3.json
|
api/set3.json
|
||||||
api/stat.json
|
api/stat.json
|
||||||
api/status.json
|
api/status.json
|
||||||
api/tmr.json
|
api/tmr.json
|
||||||
api/users.json
|
api/users.json
|
||||||
api/wifiscan.json
|
api/wifiscan.json
|
||||||
application.html
|
application.html
|
||||||
dmxmaster.html
|
dmxmaster.html
|
||||||
favicon.ico
|
favicon.ico
|
||||||
index.html
|
index.html
|
||||||
info.html
|
info.html
|
||||||
reboot.html
|
reboot.html
|
||||||
res
|
res
|
||||||
res/appstyles.css
|
res/appstyles.css
|
||||||
res/ca_cert.pem
|
res/ca_cert.pem
|
||||||
res/cron.js
|
res/cron.js
|
||||||
res/crondata.js
|
res/crondata.js
|
||||||
res/dynamic.css
|
res/dynamic.css
|
||||||
res/iconsfont.css
|
res/iconsfont.css
|
||||||
res/iconsfont.woff2
|
res/iconsfont.woff2
|
||||||
res/logo.png
|
res/logo.png
|
||||||
res/main.js
|
res/main.js
|
||||||
res/res.js
|
res/res.js
|
||||||
res/styles.css
|
res/styles.css
|
||||||
res/vue.global.prod_3_3_4.js
|
res/vue.global.prod_3_3_4.js
|
||||||
services.html
|
services.html
|
||||||
system.html
|
system.html
|
||||||
|
|
@ -36,9 +36,17 @@
|
||||||
</main>
|
</main>
|
||||||
<script>
|
<script>
|
||||||
showMenu('header-toggle','navbar');
|
showMenu('header-toggle','navbar');
|
||||||
</script>
|
|
||||||
|
function uptimeconvert(t)
|
||||||
<script>
|
{
|
||||||
|
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({});
|
const app = Vue.createApp({});
|
||||||
app.component('informer', {
|
app.component('informer', {
|
||||||
data(){
|
data(){
|
||||||
|
|
@ -54,22 +62,34 @@
|
||||||
},
|
},
|
||||||
|
|
||||||
TimeToISO(t) {
|
TimeToISO(t) {
|
||||||
theDate = new Date(t * 1000);
|
d = Number(t);
|
||||||
return (theDate.toString()).slice(0,34);
|
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) {
|
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);}
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
computed:{
|
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() {
|
mounted() {
|
||||||
this.getData()
|
this.getData()
|
||||||
|
|
@ -80,8 +100,9 @@
|
||||||
destroyed(){
|
destroyed(){
|
||||||
clearInterval(this.interval)
|
clearInterval(this.interval)
|
||||||
},
|
},
|
||||||
template:`{{TimeToISO(status_json.time)}}<br/>
|
template:`{{isotime}}<br/>
|
||||||
Uptime:{{ToHms(status_json.uptime)}}<br/><br/>
|
Uptime:{{uptime}}<br/>
|
||||||
|
<br/>
|
||||||
Signal WiFi:<span style="color:#0099ff;font-weight:bold">{{status_json.wlev}}</span><br/>
|
Signal WiFi:<span style="color:#0099ff;font-weight:bold">{{status_json.wlev}}</span><br/>
|
||||||
<br/><br/><br/><br/>`
|
<br/><br/><br/><br/>`
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1 +1 @@
|
||||||
Subproject commit 51db5691cea130f8fe5b09c5ca2604942a8b96d0
|
Subproject commit 49bab0ea5c2144896bf8537abe32168b0f7dede3
|
||||||
Loading…
Reference in New Issue
Block a user