userbogd/WebguiappTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

developing dmxmaster page

Browse Source
This commit is contained in:
Bogdan Pilyugin 2023-07-16 11:44:24 +02:00
parent 6a9e93d99f
commit 0f9e17cae9
4 changed files with 106 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
HTML/dmxmaster.html
View File

@ -22,7 +22,7 @@
}
.selection {
background-color: #ff0000;
border: 3px solid var(--accent-color);;
}
</style>
</head>
@ -40,7 +40,7 @@
<div class='cntr' style='text-align:center;margin-top:20px'>
<div id="app">
<devlist :slvdevices="slvdevices"></devlist>
<devlist v-bind:slvdevices="slvdevices"></devlist>
</div>
</div>
@ -58,34 +58,48 @@
<script>
const app = Vue.createApp({
data(){
return {
slvdevices: [],
selectforadd: "RGB",
addrforadd:1}
},
methods:{
return {
slvdevices: []
}
}
});
app.component('svldetails', {
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.addr}}</p>
</div>`
});
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:
{
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(){
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);
}
},
@ -97,25 +111,19 @@
},
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" />
<button class="btn" v-on:click="AddDevice">Add device</button>
<select v-model="selectedtype">
<option v-for="dtype in devtypes" v-bind:value="dtype.type">{{dtype.type}}</option>
</select>
<input v-model="addrforadd" type="number"/>
<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>
<button class="btn" v-on:click="DelDevice">Delete device</button>
<button class="btn" v-on:click="postData">Save conf</button>
</div>`
});
app.mount('#app');

68
HTML/espfs.paths
View File

@ -1,35 +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
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
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

53
HTML/index.html
View File

@ -36,9 +36,17 @@
</main>
<script>
showMenu('header-toggle','navbar');
</script>
<script>
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(){
@ -54,22 +62,34 @@
},
TimeToISO(t) {
theDate = new Date(t * 1000);
return (theDate.toString()).slice(0,34);
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) {
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);}
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()
@ -80,8 +100,9 @@
destroyed(){
clearInterval(this.interval)
},
template:`{{TimeToISO(status_json.time)}}<br/>
Uptime:{{ToHms(status_json.uptime)}}<br/><br/>
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/>`
});

2
components/webguiapp

@ -1 +1 @@
Subproject commit 51db5691cea130f8fe5b09c5ca2604942a8b96d0
Subproject commit 49bab0ea5c2144896bf8537abe32168b0f7dede3