initial mvc concept

2024-12-11 21:01:11 +01:00
parent 4a8e0188b3
commit 8bd2cb72d0
14 changed files with 922 additions and 808 deletions
--- a/rust/src_webpack/src/plant.ts
+++ b/rust/src_webpack/src/plant.ts
@@ -0,0 +1,142 @@
+
+declare var PUBLIC_URL: string;
+
+import { Controller } from ".";
+
+export class PlantViews {
+    private readonly plants: PlantView[] = []
+    private readonly plantsDiv: HTMLDivElement
+  
+    constructor(syncConfig:Controller) {
+      this.plantsDiv = document.getElementById("plants") as HTMLDivElement;
+      for (let plantId = 0; plantId < 8; plantId++) {
+        this.plants[plantId] = new PlantView(plantId, this.plantsDiv, syncConfig);
+      }
+    }
+
+    getPlant(plantId: number) {
+      return this.plants[plantId]
+    }
+  }
+
+export class PlantView {
+    private readonly plantId: number;
+    private readonly plantDiv: HTMLDivElement;
+    private readonly header: HTMLElement;
+    private readonly testButton: HTMLButtonElement;
+    private readonly targetMoisture: HTMLInputElement;
+    private readonly pumpTimeS: HTMLInputElement;
+    private readonly pumpCooldown: HTMLInputElement;
+    private readonly pumpHourStart: HTMLSelectElement;
+    private readonly pumpHourEnd: HTMLSelectElement;
+    private readonly sensorBInstalled: HTMLInputElement;
+    private readonly mode: HTMLSelectElement;
+    private readonly moistureA: HTMLElement;
+    private readonly moistureB: HTMLElement;
+  
+  
+    constructor(plantId: number, parent:HTMLDivElement, controller:Controller) {
+      const dummy = this;
+      this.plantId = plantId;
+      this.plantDiv = document.createElement("div")! as HTMLDivElement
+      const template = require('./plant.html') as string;
+      const plantRaw = template.replaceAll("${plantId}", String(plantId));
+      this.plantDiv.innerHTML = plantRaw
+      parent.appendChild(this.plantDiv)
+  
+      this.header = document.getElementById("plant_"+plantId+"_header")!
+      this.header.innerText = "Plant "+ (this.plantId+1)
+  
+      this.moistureA = document.getElementById("plant_"+plantId+"_moisture_a")! as HTMLElement;
+      this.moistureB = document.getElementById("plant_"+plantId+"_moisture_b")! as HTMLElement;
+
+      this.testButton = document.getElementById("plant_"+plantId+"_test")! as HTMLButtonElement;
+      this.testButton.onclick = function(){
+        controller.testPlant(plantId)
+      }
+
+      this.mode = document.getElementById("plant_"+plantId+"_mode") as HTMLSelectElement
+      this.mode.onchange = function(){
+        controller.configChanged()
+      }
+
+      this.targetMoisture = document.getElementById("plant_"+plantId+"_target_moisture")! as HTMLInputElement;
+      this.targetMoisture.onchange = function(){
+        controller.configChanged()
+      }
+
+      this.pumpTimeS = document.getElementById("plant_"+plantId+"_pump_time_s") as HTMLInputElement;
+      this.pumpTimeS.onchange = function(){
+        controller.configChanged()
+      }
+
+      this.pumpCooldown = document.getElementById("plant_"+plantId+"_pump_cooldown_min") as HTMLInputElement;
+      this.pumpCooldown.onchange = function(){
+        controller.configChanged()
+      }
+
+      this.pumpHourStart = document.getElementById("plant_"+plantId+"_pump_hour_start") as HTMLSelectElement;
+      this.pumpHourStart.onchange = function(){
+        controller.configChanged()
+      }
+      for (let i = 0; i < 24; i++) {
+        let option = document.createElement("option");
+        if (i == 10){
+            option.selected = true
+        }
+        option.innerText = i.toString();
+        this.pumpHourStart.appendChild(option);
+      }
+
+      this.pumpHourEnd = document.getElementById("plant_"+plantId+"_pump_hour_end") as HTMLSelectElement;
+      this.pumpHourEnd.onchange = function(){
+        controller.configChanged()
+      }
+      for (let i = 0; i < 24; i++) {
+        let option = document.createElement("option");
+        if (i == 19){
+            option.selected = true
+        }
+        option.innerText = i.toString();
+        this.pumpHourEnd.appendChild(option);
+      }
+
+      this.sensorBInstalled = document.getElementById("plant_"+plantId+"_sensor_b") as HTMLInputElement;
+      this.sensorBInstalled.onchange = function(){
+        controller.configChanged()
+      }
+      console.log(this)
+    }
+  
+    setConfig(plantConfig: PlantConfig) {
+        console.log("apply config to ui plant " + this.plantId + " config: " + JSON.stringify(plantConfig))
+        this.mode.value = plantConfig.mode;
+        this.targetMoisture.value = plantConfig.target_moisture.toString();
+        this.pumpTimeS.value = plantConfig.pump_time_s.toString();
+        this.pumpCooldown.value = plantConfig.pump_cooldown_min.toString();
+        this.pumpHourStart.value = plantConfig.pump_hour_start.toString();
+        this.pumpHourEnd.value = plantConfig.pump_hour_end.toString();
+        this.sensorBInstalled.checked = plantConfig.sensor_b
+    }
+
+    getConfig() :PlantConfig {
+      const rv:PlantConfig = {
+        mode: this.mode.value,
+        target_moisture: +this.targetMoisture.value,
+        pump_time_s: +this.pumpTimeS.value,
+        pump_cooldown_min: +this.pumpCooldown.value,
+        pump_hour_start: +this.pumpHourStart.value,
+        pump_hour_end: +this.pumpHourEnd.value,
+        sensor_b: this.sensorBInstalled.checked,
+      }
+      return rv
+  }
+
+    setMoistureA(a: number) {
+      this.moistureA.innerText = String(a);
+    }
+
+    setMoistureB(b: number) {
+      this.moistureB.innerText = String(b);
+    }
+  }