154 lines
4.3 KiB
HTML
154 lines
4.3 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>
|
|
<style>
|
|
.svldetails{
|
|
height: 60px;
|
|
width: 60px;
|
|
margin: 2px;
|
|
padding: 2px;
|
|
background-color: var(--first-color);
|
|
border-radius: 5px;
|
|
border: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
float: left;
|
|
}
|
|
|
|
.selection {
|
|
border: 3px solid var(--accent-color);;
|
|
}
|
|
.svldetails p{
|
|
margin: 0px;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>PageSurround();</script>
|
|
|
|
<!--========== CONTENTS ==========-->
|
|
<main>
|
|
<section>
|
|
<div class="ml">
|
|
<div id="app">
|
|
<div class="mlp">
|
|
<div class="mlpc">
|
|
<div class="mlhdr">DMX1</div>
|
|
<div class='cntr' style='text-align:center;margin-top:20px'>
|
|
<devlist v-bind:slvdevices="slvdevices" v-bind:key="1"></devlist>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mlp">
|
|
<div class="mlpc">
|
|
<div class="mlhdr">DMX2</div>
|
|
<div class='cntr' style='text-align:center;margin-top:20px'>
|
|
<devlist v-bind:slvdevices="slvdevices2" v-bind:key="2"></devlist>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<script>
|
|
showMenu('header-toggle','navbar');
|
|
</script>
|
|
|
|
<script>
|
|
const app = Vue.createApp({
|
|
data(){
|
|
return {
|
|
slvdevices: [],
|
|
slvdevices2: [],
|
|
selecteddevs: []
|
|
}
|
|
}
|
|
});
|
|
|
|
app.component('svldetails', {
|
|
props: ["slvdev"],
|
|
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', {
|
|
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", "key"],
|
|
|
|
methods:
|
|
{
|
|
AddDevice(){
|
|
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++)
|
|
{
|
|
while(this.slvdevices[i].sel == true)
|
|
this.slvdevices.splice(i,1);
|
|
}
|
|
},
|
|
PostData() {
|
|
alert("key="+this.key);
|
|
fetch("\dmxmaster.html", {
|
|
method: 'post',
|
|
headers: {
|
|
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
|
|
},
|
|
body: JSON.stringify(this.slvdevices)
|
|
|
|
});
|
|
}
|
|
},
|
|
computed: {
|
|
selected: function(){
|
|
this.selecteddevs = this.slvdevices.filter(function (n) {
|
|
return this.slvdevices[n].sel;
|
|
})
|
|
}
|
|
},
|
|
template: `<div>
|
|
<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">Delete device</button>
|
|
<button class="btn" v-on:click="PostData">Save conf</button>
|
|
</div>`
|
|
});
|
|
app.mount('#app');
|
|
</script>
|
|
</body>
|
|
</html> |