load and display tankinfo on ui
This commit is contained in:
parent
110cb50098
commit
db27de3073
@ -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
|
||||
}
|
@ -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();
|
||||
}
|
||||
|
@ -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")
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
@ -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) {
|
||||
|
@ -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>
|
||||
|
@ -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) {
|
||||
|
@ -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 = '';
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user