load and display tankinfo on ui

This commit is contained in:
Empire 2025-03-21 23:25:30 +01:00
parent 110cb50098
commit db27de3073
7 changed files with 200 additions and 8 deletions

View File

@ -120,4 +120,24 @@ interface BatteryState {
remaining_milli_ampere: string,
state_of_charge: string,
state_of_health: string
}
interface TankInfo {
/// is there enough water in the tank
enough_water: boolean,
/// warning that water needs to be refilled soon
warn_level: boolean,
/// estimation how many ml are still in tank
left_ml: number | null,
/// if there is was an issue with the water level sensor
sensor_error: string | null,
/// raw water sensor value
raw: number | null,
/// percent value
percent: number | null,
/// water in tank might be frozen
water_frozen: boolean,
/// water temperature
water_temp: number | null,
temp_sensor_error: string | null
}

View File

@ -10,8 +10,6 @@ export class LogView {
this.logpanel = document.getElementById("logpanel") as HTMLElement
this.loadLog = document.getElementById("loadLog") as HTMLButtonElement
controller.loadLogLocaleConfig();
this.loadLog.onclick = () => {
controller.loadLog();
}

View File

@ -20,6 +20,18 @@ import { FileView } from './fileview';
import { LogView } from './log';
export class Controller {
loadTankInfo() : Promise<void> {
return fetch(PUBLIC_URL + "/tank")
.then(response => response.json())
.then(json => json as TankInfo)
.then(tankinfo => {
controller.tankView.setTankInfo(tankinfo)
})
.catch(error => {
console.log(error);
});
}
loadLogLocaleConfig() {
return fetch(PUBLIC_URL + "/log_localization")
.then(response => response.json())
@ -459,7 +471,11 @@ controller.updateRTCData().then(_ => {
controller.updateFileList().then(_ => {
controller.progressview.addProgress("initial", 90, "read backupinfo");
controller.getBackupInfo().then(_ => {
controller.progressview.removeProgress("initial");
controller.loadLogLocaleConfig().then(_ => {
controller.loadTankInfo().then(_ => {
controller.progressview.removeProgress("initial")
})
})
})
})
})

View File

@ -139,8 +139,17 @@ export class PlantView {
}
update(a: number, b: number) {
this.moistureA.innerText = String(a)
this.moistureB.innerText = String(b)
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) {

View File

@ -10,10 +10,17 @@
flex-grow: 1;
margin: 0px;
}
.hidden {
display: none;
}
</style>
<div class="flexcontainer">
<div class="subtitle">Tank:</div>
<span style="flex-grow: 1; text-align: center; font-weight: bold;">
Tank:
</span>
<input id="tankview_auto_refresh" type="checkbox">
</div>
<div class="flexcontainer">
<span class="tankkey">Enable Tank Sensor</span>
@ -40,4 +47,39 @@
<div class="flexcontainer">
<div class="tankkey">Full at %</div>
<input class="tankvalue" type="number" min="0" max="100" id="tank_full_percent">
</div>
</div>
<button id="tank_update">Update Tank</button>
<div id="tank_measure_error_container" class="flexcontainer hidden">
<div class="tankkey">Sensor Error</div>
<label class="tankvalue" id="tank_measure_error"></label>
</div>
<div id="tank_measure_ml_container" class="flexcontainer">
<div class="tankkey">Left ml</div>
<label class="tankvalue" id="tank_measure_ml"></label>
</div>
<div id="tank_measure_percent_container" class="flexcontainer">
<div class="tankkey">Current %</div>
<label class="tankvalue" id="tank_measure_percent"></label>
</div>
<div id="tank_measure_temperature_container" class="flexcontainer">
<div class="tankkey">Temperature °C</div>
<label class="tankvalue" id="tank_measure_temperature"></label>
</div>
<div id="tank_measure_rawvolt_container" class="flexcontainer">
<div class="tankkey">Probe Voltage</div>
<label class="tankvalue" id="tank_measure_rawvolt"></label>
</div>
<div id="tank_measure_temperature_error_container" class="flexcontainer">
<div class="tankkey">Temperature Error</div>
<label class="tankvalue" id="tank_measure_temperature_error"></label>
</div>
<div class="flexcontainer">
<div class="tankkey">Enough Water</div>
<label class="tankvalue" id="tank_measure_enoughwater"></label>
</div>
<div class="flexcontainer">
<div class="tankkey">Warn Level</div>
<label class="tankvalue" id="tank_measure_warnlevel"></label>
</div>

View File

@ -7,10 +7,39 @@ export class TankConfigView {
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
@ -24,6 +53,84 @@ export class TankConfigView {
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) {

View File

@ -9,7 +9,7 @@ console.log("Dev server is " + isDevServer);
var host;
if (isDevServer){
//ensure no trailing /
host = 'http://10.23.43.24';
host = 'http://192.168.251.37';
} else {
host = '';
}