developing dmxmaster page

HTML/dmxmaster.html

@@ -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>
@@ -59,33 +59,47 @@
 		const app = Vue.createApp({
 			data(){
 	        return {  
-	          slvdevices: [],
+	          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">
+		    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>
+		    		<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">
 		    		<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="DelDevice">Delete device</button>
-		            <button class="btn" v-on:click="postData">Отправить</button>
+		            <button class="btn" v-on:click="postData">Save conf</button>
 					</div>`
 		});
 		app.mount('#app');

HTML/index.html

@@ -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,23 +62,35 @@
 	              },
 	              
 	              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:{
+	            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/>
+	        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/>
 				<br/><br/><br/><br/>`
 		});

components/webguiapp

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