From fae113a935d11f9693e1c8c9484d46d511cbcade Mon Sep 17 00:00:00 2001
From: bogdan <bogd@live.ru>
Date: Wed, 12 Jul 2023 19:38:40 +0200
Subject: [PATCH] reworked with component

---
 HTML/espfs.paths | 66 +++++++++++++++++++++---------------------
 HTML/index.html  | 74 +++++++++++++++++++++++++-----------------------
 2 files changed, 71 insertions(+), 69 deletions(-)

diff --git a/HTML/espfs.paths b/HTML/espfs.paths
index 30853e5..583aab8 100644
--- a/HTML/espfs.paths
+++ b/HTML/espfs.paths
@@ -1,34 +1,34 @@
-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
-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
+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 b3f8ee8..2443237 100644
--- a/HTML/index.html
+++ b/HTML/index.html
@@ -24,10 +24,7 @@
 				<div class='cntr' style='text-align:center;margin-top:20px'>
 				<span id="name" ><div class='hdr1'>This device brand name</div></span><br/><br/>
 				<div id="app">
-				{{ TimeToISO(status_json.time)}}<br/>
-				Uptime: {{ToHms(status_json.uptime)}}<br/><br/>
-				Signal WiFi:<span style="color:#0099ff;font-weight:bold">{{status_json.wlev}}</span><br/>
-				<br/><br/><br/><br/><br/><br/><br/><br/><br/>
+				<informer></informer>
 				</div>
 				</div>
 				</div>
@@ -42,44 +39,49 @@
 		</script>
 
 		<script>
-		const app = Vue.createApp({
+		const app = Vue.createApp({});
+		app.component('informer', {
 			data(){
 		        return { 
 		        	status: true,
 		        	status_json: {},
 		        	interval: null}
 		        },
-		        methods: {
-		              async getData() {
-		              const res = await fetch("./api/status.json");
-		              this.status_json = await res.json();
-		              },
-		              
-		              TimeToISO(t) {
-		            	  theDate = new Date(t * 1000);
-		            	  return (theDate.toString()).slice(0,34);
-		              },
-		              
-		              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);}
-		        },
-		        mounted() {
-		            this.getData()
-		        },
-		        created(){
-		            this.interval = setInterval(() =>{
-		              this.getData()},1000)
-		        },
-		          destroyed(){
-		            clearInterval(this.interval)
-		        }
-		    
-		}).mount('#app');
+	        methods: {
+	              async getData() {
+	              const res = await fetch("./api/status.json");
+	              this.status_json = await res.json();
+	              },
+	              
+	              TimeToISO(t) {
+	            	  theDate = new Date(t * 1000);
+	            	  return (theDate.toString()).slice(0,34);
+	              },
+	              
+	              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);}
+	        },
+	        mounted() {
+	            this.getData()
+	        },
+	        created(){
+	            this.interval = setInterval(() => {this.getData()},1000)
+	        },
+	          destroyed(){
+	            clearInterval(this.interval)
+	        },
+	        template:`{{TimeToISO(status_json.time)}}<br/>
+				Uptime:{{ToHms(status_json.uptime)}}<br/><br/>
+				Signal WiFi:<span style="color:#0099ff;font-weight:bold">{{status_json.wlev}}</span><br/>
+				<br/><br/><br/><br/>`
+		});
+		app.mount('#app');
+		
 		</script>	
     </body>
 </html>
\ No newline at end of file