From db27de307394a2642d0261ed2b222274274fd7c2 Mon Sep 17 00:00:00 2001
From: Empire <empirephoenix@yahoo.de>
Date: Fri, 21 Mar 2025 23:25:30 +0100
Subject: [PATCH] load and display tankinfo on ui
---
rust/src_webpack/src/api.ts | 20 ++++++
rust/src_webpack/src/log.ts | 2 -
rust/src_webpack/src/main.ts | 18 ++++-
rust/src_webpack/src/plant.ts | 13 +++-
rust/src_webpack/src/tankview.html | 46 ++++++++++++-
rust/src_webpack/src/tankview.ts | 107 +++++++++++++++++++++++++++++
rust/src_webpack/webpack.config.js | 2 +-
7 files changed, 200 insertions(+), 8 deletions(-)
diff --git a/rust/src_webpack/src/api.ts b/rust/src_webpack/src/api.ts
index b4f0066..13bc265 100644
--- a/rust/src_webpack/src/api.ts
+++ b/rust/src_webpack/src/api.ts
@@ -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
}
\ No newline at end of file
diff --git a/rust/src_webpack/src/log.ts b/rust/src_webpack/src/log.ts
index d881eae..b8239b6 100644
--- a/rust/src_webpack/src/log.ts
+++ b/rust/src_webpack/src/log.ts
@@ -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();
}
diff --git a/rust/src_webpack/src/main.ts b/rust/src_webpack/src/main.ts
index 5f0e180..2ba04e2 100644
--- a/rust/src_webpack/src/main.ts
+++ b/rust/src_webpack/src/main.ts
@@ -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")
+ })
+ })
})
})
})
diff --git a/rust/src_webpack/src/plant.ts b/rust/src_webpack/src/plant.ts
index 052ed6c..ad611a6 100644
--- a/rust/src_webpack/src/plant.ts
+++ b/rust/src_webpack/src/plant.ts
@@ -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) {
diff --git a/rust/src_webpack/src/tankview.html b/rust/src_webpack/src/tankview.html
index 596aa5a..0234d86 100644
--- a/rust/src_webpack/src/tankview.html
+++ b/rust/src_webpack/src/tankview.html
@@ -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>
\ No newline at end of file
+</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>
diff --git a/rust/src_webpack/src/tankview.ts b/rust/src_webpack/src/tankview.ts
index 9a9448e..f701557 100644
--- a/rust/src_webpack/src/tankview.ts
+++ b/rust/src_webpack/src/tankview.ts
@@ -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) {
diff --git a/rust/src_webpack/webpack.config.js b/rust/src_webpack/webpack.config.js
index c76eb3e..6386702 100644
--- a/rust/src_webpack/webpack.config.js
+++ b/rust/src_webpack/webpack.config.js
@@ -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 = '';
}