From 0f9e17cae9b13014be25b398db583dfb69838855 Mon Sep 17 00:00:00 2001
From: bogdan <bogd@live.ru>
Date: Sun, 16 Jul 2023 11:44:24 +0200
Subject: [PATCH] developing dmxmaster page

---
 HTML/dmxmaster.html  | 60 +++++++++++++++++++++-----------------
 HTML/espfs.paths     | 68 ++++++++++++++++++++++----------------------
 HTML/index.html      | 53 +++++++++++++++++++++++-----------
 components/webguiapp |  2 +-
 4 files changed, 106 insertions(+), 77 deletions(-)

diff --git a/HTML/dmxmaster.html b/HTML/dmxmaster.html
index 61d459b..39ce745 100644
--- a/HTML/dmxmaster.html
+++ b/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>
@@ -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');
diff --git a/HTML/espfs.paths b/HTML/espfs.paths
index 20160b4..99a3f86 100644
--- a/HTML/espfs.paths
+++ b/HTML/espfs.paths
@@ -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
\ No newline at end of file
diff --git a/HTML/index.html b/HTML/index.html
index 0983e7b..fb76796 100644
--- a/HTML/index.html
+++ b/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,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/>`
 		});
diff --git a/components/webguiapp b/components/webguiapp
index 51db569..49bab0e 160000
--- a/components/webguiapp
+++ b/components/webguiapp
@@ -1 +1 @@
-Subproject commit 51db5691cea130f8fe5b09c5ca2604942a8b96d0
+Subproject commit 49bab0ea5c2144896bf8537abe32168b0f7dede3