PlantCtrl/rust/src_webpack/src/tankview.ts

import { Controller } from "./main";

export class TankConfigView {
    private readonly tank_useable_ml: HTMLInputElement;
    private readonly tank_empty_percent: HTMLInputElement;
    private readonly tank_full_percent: HTMLInputElement;
    private readonly tank_warn_percent: HTMLInputElement;
    private readonly tank_sensor_enabled: HTMLInputElement;
    private readonly tank_allow_pumping_if_sensor_error: HTMLInputElement;
    private readonly tank_measure_error: HTMLLabelElement;
    private readonly tank_measure_ml: HTMLLabelElement;
    private readonly tank_measure_percent: HTMLLabelElement;
    private readonly tank_measure_temperature: HTMLLabelElement;
    private readonly tank_measure_rawvolt: HTMLLabelElement;
    private readonly tank_measure_enoughwater: HTMLLabelElement;
    private readonly tank_measure_warnlevel: HTMLLabelElement;
    private readonly tank_measure_temperature_error: HTMLLabelElement;
    private readonly tank_measure_error_container: HTMLDivElement;
    private readonly tank_measure_ml_container: HTMLDivElement;
    private readonly tank_measure_percent_container: HTMLDivElement;
    private readonly tank_measure_temperature_container: HTMLDivElement;
    private readonly tank_measure_rawvolt_container: HTMLDivElement;
    private readonly tank_measure_temperature_error_container: HTMLDivElement;
    
    private readonly auto_refresh: HTMLInputElement;
    private timer: NodeJS.Timeout | undefined;
    private readonly controller: Controller;
  
    constructor(controller:Controller){
      (document.getElementById("tankview") as HTMLElement).innerHTML = require("./tankview.html")
      this.controller = controller;

      this.auto_refresh = document.getElementById("tankview_auto_refresh") as HTMLInputElement;

      this.auto_refresh.onchange = () => {
        if(this.timer){
          clearTimeout(this.timer)
        }
        if(this.auto_refresh.checked){
          controller.loadTankInfo()
        }
      }

      this.tank_useable_ml = document.getElementById("tank_useable_ml") as HTMLInputElement;
      this.tank_useable_ml.onchange = controller.configChanged
      this.tank_empty_percent = document.getElementById("tank_empty_percent") as HTMLInputElement;
      this.tank_empty_percent.onchange = controller.configChanged
      this.tank_full_percent = document.getElementById("tank_full_percent") as HTMLInputElement;
      this.tank_full_percent.onchange = controller.configChanged
      this.tank_warn_percent = document.getElementById("tank_warn_percent") as HTMLInputElement;
      this.tank_warn_percent.onchange = controller.configChanged
      this.tank_sensor_enabled = document.getElementById("tank_sensor_enabled") as HTMLInputElement;
      this.tank_sensor_enabled.onchange = controller.configChanged
      this.tank_allow_pumping_if_sensor_error = document.getElementById("tank_allow_pumping_if_sensor_error") as HTMLInputElement;
      this.tank_allow_pumping_if_sensor_error.onchange = controller.configChanged

      let tank_update = document.getElementById("tank_update") as HTMLInputElement;
      tank_update.onclick = () => {
        controller.loadTankInfo()
      }
      

      this.tank_measure_error = document.getElementById("tank_measure_error") as HTMLLabelElement;
      this.tank_measure_error_container = document.getElementById("tank_measure_error_container") as HTMLDivElement;
      
      this.tank_measure_ml = document.getElementById("tank_measure_ml") as HTMLLabelElement;
      this.tank_measure_ml_container = document.getElementById("tank_measure_ml_container") as HTMLDivElement;
      
      this.tank_measure_percent = document.getElementById("tank_measure_percent") as HTMLLabelElement;
      this.tank_measure_percent_container = document.getElementById("tank_measure_percent_container") as HTMLDivElement;

      this.tank_measure_temperature = document.getElementById("tank_measure_temperature") as HTMLLabelElement;
      this.tank_measure_temperature_container = document.getElementById("tank_measure_temperature_container") as HTMLDivElement;
      
      this.tank_measure_rawvolt = document.getElementById("tank_measure_rawvolt") as HTMLLabelElement;
      this.tank_measure_rawvolt_container = document.getElementById("tank_measure_rawvolt_container") as HTMLDivElement;
      
      this.tank_measure_temperature_error = document.getElementById("tank_measure_temperature_error") as HTMLLabelElement;
      this.tank_measure_temperature_error_container = document.getElementById("tank_measure_temperature_error_container") as HTMLDivElement;
      
      this.tank_measure_enoughwater = document.getElementById("tank_measure_enoughwater") as HTMLLabelElement;
      this.tank_measure_warnlevel = document.getElementById("tank_measure_warnlevel") as HTMLLabelElement;
    }

    setTankInfo(tankinfo: TankInfo) {
      if (tankinfo.sensor_error == null){
        this.tank_measure_error_container.classList.add("hidden")
      } else {
        this.tank_measure_error.innerText = JSON.stringify(tankinfo.sensor_error) ;
        this.tank_measure_error_container.classList.remove("hidden")
      }
      if (tankinfo.left_ml == null){
        this.tank_measure_ml_container.classList.add("hidden")
      } else {
        this.tank_measure_ml.innerText = tankinfo.left_ml.toString();
        this.tank_measure_ml_container.classList.remove("hidden")
      }
      if (tankinfo.percent == null){
        this.tank_measure_percent_container.classList.add("hidden")
      } else {
        this.tank_measure_percent.innerText = tankinfo.percent.toString();
        this.tank_measure_percent_container.classList.remove("hidden")
      }
      if (tankinfo.water_temp == null){
        this.tank_measure_temperature_container.classList.add("hidden")
      } else {
        this.tank_measure_temperature.innerText = tankinfo.water_temp.toString();
        this.tank_measure_temperature_container.classList.remove("hidden")
      }
      if (tankinfo.raw == null){
        this.tank_measure_rawvolt_container.classList.add("hidden")
      } else {
        this.tank_measure_rawvolt.innerText = tankinfo.raw.toString();
        this.tank_measure_rawvolt_container.classList.remove("hidden")
      }

      if (tankinfo.temp_sensor_error == null){
        this.tank_measure_temperature_error_container.classList.add("hidden")
      } else {
        this.tank_measure_temperature_error.innerText = tankinfo.temp_sensor_error;
        this.tank_measure_temperature_error_container.classList.remove("hidden")
      }
     
      this.tank_measure_enoughwater.innerText = tankinfo.enough_water.toString()
     this.tank_measure_warnlevel.innerText = tankinfo.warn_level.toString()

     if(this.auto_refresh.checked){
      this.timer = setTimeout(this.controller.loadTankInfo, 1000);
    } else {
      if(this.timer){
        clearTimeout(this.timer)
      }
    }
    }
  
    setConfig(tank: TankConfig) {
      this.tank_allow_pumping_if_sensor_error.checked = tank.tank_allow_pumping_if_sensor_error;
      this.tank_empty_percent.value = String(tank.tank_empty_percent)
      this.tank_warn_percent.value = String(tank.tank_warn_percent)
      this.tank_full_percent.value = String(tank.tank_full_percent)
      this.tank_sensor_enabled.checked = tank.tank_sensor_enabled
      this.tank_useable_ml.value = String(tank.tank_useable_ml)
    }
    getConfig(): TankConfig {
      return {
        tank_allow_pumping_if_sensor_error: this.tank_allow_pumping_if_sensor_error.checked,
        tank_empty_percent : this.tank_empty_percent.valueAsNumber,
        tank_full_percent: this.tank_full_percent.valueAsNumber,
        tank_sensor_enabled: this.tank_sensor_enabled.checked,
        tank_useable_ml: this.tank_useable_ml.valueAsNumber,
        tank_warn_percent: this.tank_warn_percent.valueAsNumber
      }
    }
  }