PlantCtrl/rust/src_webpack/src/plant.ts

import {PlantConfig, PumpTestResult} from "./api";

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: [string], moisture_b: [string]) {
        for (let plantId = 0; plantId < PLANT_COUNT; plantId++) {
            const a = moisture_a[plantId]
            const b = moisture_b[plantId]
            this.plants[plantId].setMeasurementResult(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)
        }
    }

    setPumpTestCurrent(plantId: number, response: PumpTestResult) {
        const plantView = this.plants[plantId];
        plantView.setTestResult(response)
    }
}



export class PlantView {
    private readonly moistureSensorMinFrequency: HTMLInputElement;
    private readonly moistureSensorMaxFrequency: HTMLInputElement;
    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 sensorAInstalled: HTMLInputElement;
    private readonly sensorBInstalled: HTMLInputElement;
    private readonly mode: HTMLSelectElement;
    private readonly moistureA: HTMLElement;
    private readonly moistureB: HTMLElement;
    private readonly pump_current_result: HTMLElement
    private readonly maxConsecutivePumpCount: HTMLInputElement;
    private readonly minPumpCurrentMa: HTMLInputElement;
    private readonly maxPumpCurrentMa: HTMLInputElement;
    private readonly ignoreCurrentError: HTMLInputElement;


    constructor(plantId: number, parent: HTMLDivElement, controller: Controller) {
        this.plantId = plantId;
        this.plantDiv = document.createElement("div")! as HTMLDivElement
        const template = require('./plant.html') as string;
        this.plantDiv.innerHTML = template.replaceAll("${plantId}", String(plantId))

        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.pump_current_result = document.getElementById("plant_" + plantId + "_pump_current_result")! 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.sensorAInstalled = document.getElementById("plant_" + plantId + "_sensor_a") as HTMLInputElement;
        this.sensorAInstalled.onchange = function () {
            controller.configChanged()
        }

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

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

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

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


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

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

        this.moistureSensorMaxFrequency = document.getElementById("plant_" + plantId + "_max_frequency") as HTMLInputElement;
        this.moistureSensorMaxFrequency.onchange = () => {
            controller.configChanged();
        };
    }

    updateVisibility(plantConfig: PlantConfig) {
        let sensorOnly = document.getElementsByClassName("plantSensorEnabledOnly_"+ this.plantId)
        let pumpOnly = document.getElementsByClassName("plantPumpEnabledOnly_"+ this.plantId)
        let targetOnly = document.getElementsByClassName("plantTargetEnabledOnly_"+ this.plantId)

        console.log("updateVisibility plantConfig: " + plantConfig.mode)
        let showSensor = plantConfig.sensor_a || plantConfig.sensor_b
        let showPump = plantConfig.mode !== "OFF"
        let showTarget = plantConfig.mode === "TargetMoisture"

        console.log("updateVisibility showsensor: " + showSensor + " pump " + showPump + " target " +showTarget)

        for (const element of Array.from(sensorOnly)) {
            if (showSensor) {
                element.classList.remove("plantHidden_" + this.plantId)
            } else {
                element.classList.add("plantHidden_" + this.plantId)
            }
        }

        for (const element of Array.from(pumpOnly)) {
            if (showPump) {
                element.classList.remove("plantHidden_" + this.plantId)
            } else {
                element.classList.add("plantHidden_" + this.plantId)
            }
        }

        for (const element of Array.from(targetOnly)) {
            if (showTarget) {
                element.classList.remove("plantHidden_" + this.plantId)
            } else {
                element.classList.add("plantHidden_" + this.plantId)
            }
        }
    }

    setTestResult(result: PumpTestResult) {
        this.pump_current_result.innerText = "Did abort " + result.error + " median current " + result.median_current_ma + " max current " + result.max_current_ma + " min current " + result.min_current_ma
    }

    setMeasurementResult(a: string, b: string) {
        this.moistureA.innerText = a
        this.moistureB.innerText = 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.sensorAInstalled.checked = plantConfig.sensor_a;
        this.maxConsecutivePumpCount.value = plantConfig.max_consecutive_pump_count.toString();
        this.minPumpCurrentMa.value = plantConfig.min_pump_current_ma.toString();
        this.maxPumpCurrentMa.value = plantConfig.max_pump_current_ma.toString();
        this.ignoreCurrentError.checked = plantConfig.ignore_current_error;

        // Set new fields
        this.moistureSensorMinFrequency.value =
            plantConfig.moisture_sensor_min_frequency?.toString() || "";
        this.moistureSensorMaxFrequency.value =
            plantConfig.moisture_sensor_max_frequency?.toString() || "";

        this.updateVisibility(plantConfig);
    }

    getConfig(): PlantConfig {

        let conv: 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,
            sensor_a: this.sensorAInstalled.checked,
            max_consecutive_pump_count: this.maxConsecutivePumpCount.valueAsNumber,
            moisture_sensor_min_frequency: this.moistureSensorMinFrequency.valueAsNumber || null,
            moisture_sensor_max_frequency: this.moistureSensorMaxFrequency.valueAsNumber || null,
            min_pump_current_ma: this.minPumpCurrentMa.valueAsNumber,
            max_pump_current_ma: this.maxPumpCurrentMa.valueAsNumber,
            ignore_current_error: this.ignoreCurrentError.checked,
        };
        this.updateVisibility(conv);
        return conv;
    }
}