further components and bootstrap initial

rust/src_webpack/src/timeview.ts

@@ -1,17 +1,33 @@
-import { Controller } from ".";
+import { Controller } from "./main";
 
 export class TimeView {
     esp_time: HTMLDivElement
     rtc_time: HTMLDivElement
     browser_time: HTMLDivElement
     sync: HTMLButtonElement
+    auto_refresh: HTMLInputElement;
+  controller: Controller;
+  timer: NodeJS.Timeout | undefined;
   
     constructor(controller:Controller) {
+      (document.getElementById("timeview") as HTMLElement).innerHTML = require("./timeview.html")
+
+      this.auto_refresh = document.getElementById("timeview_auto_refresh") as HTMLInputElement;
       this.esp_time = document.getElementById("timeview_esp_time") as HTMLDivElement;
       this.rtc_time = document.getElementById("timeview_rtc_time") as HTMLDivElement;
       this.browser_time = document.getElementById("timeview_browser_time") as HTMLDivElement;
       this.sync = document.getElementById("timeview_time_upload") as HTMLButtonElement;
       this.sync.onclick = controller.syncRTCFromBrowser;
+      this.controller = controller;
+
+      this.auto_refresh.onchange = () => {
+        if(this.timer){
+          clearTimeout(this.timer)
+        }
+        if(this.auto_refresh.checked){
+          controller.updateRTCData()
+        }
+      }
     }
   
     update(native: string, rtc: string) {
@@ -19,5 +35,13 @@ export class TimeView {
       this.rtc_time.innerText = rtc;
       var date = new Date();
       this.browser_time.innerText = date.toISOString();
+      if(this.auto_refresh.checked){
+        this.timer = setTimeout(this.controller.updateRTCData, 1000);
+      } else {
+        if(this.timer){
+          clearTimeout(this.timer)
+        }
+      }
+      
     }
   }