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; } }