added file manager, upload animation, unsaved config indicator

rust/src_webpack/src/main.ts

@@ -1,4 +1,6 @@
 
+import { deepEqual } from 'fast-equals';
+
 declare var PUBLIC_URL: string;
 console.log("Url is " + PUBLIC_URL);
 
@@ -14,8 +16,69 @@ import { SubmitView } from "./submitView";
 import { ProgressView } from "./progress";
 import { OTAView } from "./ota";
 import { BatteryView } from "./batteryview";
+import { FileView } from './fileview';
 
 export class Controller {
+  updateFileList() {
+    fetch(PUBLIC_URL + "/files")
+    .then(response => response.json())
+    .then(json => json as FileList)
+    .then(filelist => {
+      controller.fileview.setFileList(filelist, PUBLIC_URL)
+    })
+    .catch(error => {
+      console.log(error);
+    });
+  }
+  uploadFile(file: File, name:string) {
+    var current = 0;
+    var max = 100;
+    controller.progressview.addProgress("file_upload", (current / max) * 100, "Uploading File " + name + "(" + current + "/" + max + ")")
+    var ajax = new XMLHttpRequest();
+    ajax.upload.addEventListener("progress", event => {
+      current = event.loaded / 1000;
+      max = event.total / 1000;
+      controller.progressview.addProgress("file_upload", (current / max) * 100, "Uploading File " + name + "(" + current + "/" + max + ")")
+    }, false);
+    ajax.addEventListener("load", () => {
+      controller.progressview.removeProgress("file_upload")
+      controller.updateFileList()
+    }, false);
+    ajax.addEventListener("error", () => {
+      alert("Error upload")
+      controller.progressview.removeProgress("file_upload")
+      controller.updateFileList()
+    }, false);
+    ajax.addEventListener("abort", () => {
+      alert("abort upload")
+      controller.progressview.removeProgress("file_upload")
+      controller.updateFileList()
+    }, false);
+    ajax.open("POST", PUBLIC_URL + "/file?filename="+name);
+    ajax.send(file);
+  }
+  deleteFile(name:string) {
+    controller.progressview.addIndeterminate("file_delete", "Deleting " + name);
+    var ajax = new XMLHttpRequest();
+    ajax.open("DELETE", PUBLIC_URL + "/file?filename="+name);
+    ajax.send();
+    ajax.addEventListener("error", () => {
+      controller.progressview.removeProgress("file_delete")
+      alert("Error delete")
+      controller.updateFileList()
+    }, false);
+    ajax.addEventListener("abort", () => {
+      controller.progressview.removeProgress("file_delete")
+      alert("Error upload")
+      controller.updateFileList()
+    }, false);
+    ajax.addEventListener("load", () => {
+      controller.progressview.removeProgress("file_delete")
+      controller.updateFileList()
+    }, false);
+    controller.updateFileList()
+  }
+
   updateRTCData() {
     fetch(PUBLIC_URL + "/time")
       .then(response => response.json())
@@ -81,12 +144,16 @@ export class Controller {
       .then(response => response.json())
       .then(loaded => {
         var currentConfig = loaded as PlantControllerConfig;
-        this.setConfig(currentConfig);
+        controller.setInitialConfig(currentConfig);
+        controller.setConfig(currentConfig);
         //sync json view initially
         this.configChanged();
         controller.progressview.removeProgress("get_config")
       })
   }
+  setInitialConfig(currentConfig: PlantControllerConfig) {
+    this.initialConfig = currentConfig
+  }
   uploadConfig(json: string, statusCallback: (status: string) => void) {
     controller.progressview.addIndeterminate("set_config", "Uploading Config")
     fetch(PUBLIC_URL + "/set_config", {
@@ -96,6 +163,8 @@ export class Controller {
       .then(response => response.text())
       .then(text => statusCallback(text))
     controller.progressview.removeProgress("set_config")
+    //load from remote to be clean
+    controller.downloadConfig()
   }
   syncRTCFromBrowser() {
     controller.progressview.addIndeterminate("write_rtc", "Writing RTC")
@@ -113,12 +182,19 @@ export class Controller {
 
   configChanged() {
     const current = controller.getConfig();
-    var pretty = JSON.stringify(current, undefined, 1);
-    console.log(pretty)
+    var pretty = JSON.stringify(current, undefined, 0);
+    var initial = JSON.stringify(this.initialConfig, undefined, 0);
     controller.submitView.setJson(pretty);
+
+    if (deepEqual(current, controller.initialConfig)) {
+      document.title = "PlantCtrl"
+    } else {
+      document.title = "*PlantCtrl"
+    }
   }
 
 
+
   testPlant(plantId: number) {
     let counter = 0
     let limit = 30
@@ -261,8 +337,7 @@ export class Controller {
     setTimeout(this.waitForReboot, 1000)
   }
 
-
-
+  initialConfig: PlantControllerConfig | null = null
   readonly rebootBtn: HTMLButtonElement
   readonly exitBtn: HTMLButtonElement
   readonly timeView: TimeView;
@@ -274,6 +349,7 @@ export class Controller {
   readonly firmWareView: OTAView;
   readonly progressview: ProgressView;
   readonly batteryView: BatteryView;
+  readonly fileview: FileView;
   constructor() {
     this.timeView = new TimeView(this)
     this.plantViews = new PlantViews(this)
@@ -284,6 +360,7 @@ export class Controller {
     this.submitView = new SubmitView(this)
     this.firmWareView = new OTAView(this)
     this.progressview = new ProgressView(this)
+    this.fileview = new FileView(this)
     this.rebootBtn = document.getElementById("reboot") as HTMLButtonElement
     this.rebootBtn.onclick = () => {
       controller.reboot();
@@ -300,5 +377,6 @@ controller.updateBatteryData();
 controller.downloadConfig();
 //controller.measure_moisture();
 controller.version();
+controller.updateFileList();
 controller.progressview.removeProgress("rebooting");