PlantCtrl/rust/src_webpack/src/plant.ts

const PLANT_COUNT = 8;


import { Controller } from "./main";

export class PlantViews {
    private readonly measure_moisture: HTMLButtonElement;
    private readonly plants: PlantView[] = []
    private readonly plantsDiv: HTMLDivElement
  
    constructor(syncConfig:Controller) {
      this.measure_moisture = document.getElementById("measure_moisture") as HTMLButtonElement
      this.measure_moisture.onclick = syncConfig.measure_moisture
      this.plantsDiv = document.getElementById("plants") as HTMLDivElement;
      for (let plantId = 0; plantId < PLANT_COUNT; plantId++) {
        this.plants[plantId] = new PlantView(plantId, this.plantsDiv, syncConfig);
      }
    }

    getConfig(): PlantConfig[] {
      const rv: PlantConfig[] = [];
      for (let i = 0; i < PLANT_COUNT; i++) {
        rv[i] = this.plants[i].getConfig();
      }
      return rv
    }
    update(moisture_a: [number], moisture_b: [number]) {
      for (let plantId = 0; plantId < PLANT_COUNT; plantId++) {
        const a = moisture_a[plantId]
        const b = moisture_b[plantId]
        this.plants[plantId].update(a,b)
      }
    }

    setConfig(plants: PlantConfig[]) {
      for (let plantId = 0; plantId < PLANT_COUNT; plantId++) {
        const plantConfig = plants[plantId];
        const plantView = this.plants[plantId];
        plantView.setConfig(plantConfig)
      }
    }
  }

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;
    private readonly maxConsecutivePumpCount: HTMLInputElement;
  
  
    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
      
      this.plantDiv.classList.add("plantcontainer")
      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()
      }

      this.maxConsecutivePumpCount = document.getElementById("plant_"+plantId+"_max_consecutive_pump_count") as HTMLInputElement;
      this.maxConsecutivePumpCount.onchange = function(){
        controller.configChanged()
      }
    }

    update(a: number, b: number) {
      if (a = 200){
        this.moistureA.innerText = "error"
      } else {
        this.moistureA.innerText = String(a)
      }
      
      if (b = 200){
        this.moistureB.innerText = "error"
      } else {
        this.moistureB.innerText = String(b)
      }
    }
  
    setConfig(plantConfig: 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
        this.maxConsecutivePumpCount.value = plantConfig.max_consecutive_pump_count.toString();
    }

    getConfig() :PlantConfig {
      const rv:PlantConfig = {
        mode: this.mode.value,
        target_moisture: this.targetMoisture.valueAsNumber,
        pump_time_s: this.pumpTimeS.valueAsNumber,
        pump_cooldown_min: this.pumpCooldown.valueAsNumber,
        pump_hour_start: +this.pumpHourStart.value,
        pump_hour_end: +this.pumpHourEnd.value,
        sensor_b: this.sensorBInstalled.checked,
        max_consecutive_pump_count: this.maxConsecutivePumpCount.valueAsNumber
      }
      return rv
  }

    setMoistureA(a: number) {
      this.moistureA.innerText = String(a);
    }

    setMoistureB(b: number) {
      this.moistureB.innerText = String(b);
    }
  }