hide unused html elements based on config test1

This commit is contained in:
Empire 2025-06-27 21:23:18 +02:00
parent cc4e9efffd
commit f02d935f40
3 changed files with 93 additions and 36 deletions

View File

@ -75,15 +75,15 @@
.subcontainer {
min-width: 300px;
max-width: 900px;
flex-grow: 1;
border-style: solid;
border-width: 1px;
flex-grow: 1;
border-style: solid;
border-width: 1px;
padding: 8px;
}
.subcontainercontainer{
flex-grow: 1;
}
.plantcontainer {
flex-grow: 1;
min-width: 100%;
@ -120,15 +120,15 @@
}
.plantlist {
display: flex;
display: flex;
flex-wrap: wrap;
}
.subtitle {
flex-grow: 1;
text-align: center;
flex-grow: 1;
text-align: center;
font-weight: bold;
}

View File

@ -8,7 +8,7 @@
}
.plantkey {
min-width: 175px;
min-width: 195px;
}
.plantvalue {
@ -19,6 +19,19 @@
min-width: 20px;
margin: 0;
}
.plantTargetEnabledOnly_${plantId}{
}
.plantPumpEnabledOnly_${plantId}{
}
.plantSensorEnabledOnly_${plantId}{
}
.plantHidden_${plantId} {
display: none;
}
</style>
@ -27,7 +40,14 @@
id="plant_${plantId}_header">
Plant ${plantId}
</div>
<div class="flexcontainer">
<div class="plantkey">Sensor A installed:</div>
<input class="plantcheckbox" id="plant_${plantId}_sensor_a" type="checkbox">
</div>
<div class="flexcontainer">
<div class="plantkey">Sensor B installed:</div>
<input class="plantcheckbox" id="plant_${plantId}_sensor_b" type="checkbox">
</div>
<div class="flexcontainer">
<div class="plantkey">
Mode:
@ -39,83 +59,76 @@
</select>
</div>
<div class="flexcontainer">
<div class="flexcontainer plantTargetEnabledOnly_${plantId}">
<div class="plantkey">Target Moisture:</div>
<input class="plantvalue" id="plant_${plantId}_target_moisture" type="number" min="0" max="100" placeholder="0">
</div>
<div class="flexcontainer">
<div class="flexcontainer plantPumpEnabledOnly_${plantId}">
<div class="plantkey">Pump Time (s):</div>
<input class="plantvalue" id="plant_${plantId}_pump_time_s" type="number" min="0" max="600" placeholder="30">
</div>
<div class="flexcontainer">
<div class="flexcontainer plantPumpEnabledOnly_${plantId}">
<div class="plantkey">Pump Cooldown (m):</div>
<input class="plantvalue" id="plant_${plantId}_pump_cooldown_min" type="number" min="0" max="600"
placeholder="30">
</div>
<div class="flexcontainer">
<div class="flexcontainer plantPumpEnabledOnly_${plantId}">
<div class="plantkey">"Pump Hour Start":</div>
<select class="plantvalue" id="plant_${plantId}_pump_hour_start">10</select>
</div>
<div class="flexcontainer">
<div class="flexcontainer plantPumpEnabledOnly_${plantId}">
<div class="plantkey">"Pump Hour End":</div>
<select class="plantvalue" id="plant_${plantId}_pump_hour_end">19</select>
</div>
<div class="flexcontainer">
<div class="flexcontainer plantTargetEnabledOnly_${plantId}">
<div class="plantkey">Warn Pump Count:</div>
<input class="plantvalue" id="plant_${plantId}_max_consecutive_pump_count" type="number" min="1" max="50"
placeholder="10">
</div>
<div class="flexcontainer">
<div class="flexcontainer plantSensorEnabledOnly_${plantId}">
<div class="plantkey">Min Frequency Override</div>
<input class="plantvalue" id="plant_${plantId}_min_frequency" type="number" min="1000" max="25000">
</div>
<div class="flexcontainer">
<div class="flexcontainer plantSensorEnabledOnly_${plantId}">
<div class="plantkey">Max Frequency Override</div>
<input class="plantvalue" id="plant_${plantId}_max_frequency" type="number" min="1000" max="25000">
</div>
<div class="flexcontainer">
<div class="plantkey">Sensor A installed:</div>
<input class="plantcheckbox" id="plant_${plantId}_sensor_a" type="checkbox">
</div>
<div class="flexcontainer">
<div class="plantkey">Sensor B installed:</div>
<input class="plantcheckbox" id="plant_${plantId}_sensor_b" type="checkbox">
</div>
<div class="flexcontainer">
<div class="flexcontainer plantPumpEnabledOnly_${plantId}">
<h2 class="plantkey">Current config:</h2>
</div>
<div class="flexcontainer">
<div class="flexcontainer plantPumpEnabledOnly_${plantId}">
<div class="plantkey">Min current</div>
<input class="plantvalue" id="plant_${plantId}_min_pump_current_ma" type="number" min="0" max="4500">
</div>
<div class="flexcontainer">
<div class="flexcontainer plantPumpEnabledOnly_${plantId}">
<div class="plantkey">Max current</div>
<input class="plantvalue" id="plant_${plantId}_max_pump_current_ma" type="number" min="0" max="4500">
</div>
<div class="flexcontainer">
<div class="flexcontainer plantPumpEnabledOnly_${plantId}">
<div class="plantkey">Ignore current sensor error</div>
<input class="plantcheckbox" id="plant_${plantId}_ignore_current_error" type="checkbox">
</div>
<div class="flexcontainer">
<div class="flexcontainer plantPumpEnabledOnly_${plantId}">
<button class="subtitle" id="plant_${plantId}_test">Test Pump</button>
</div>
<div class="flexcontainer">
<div class="flexcontainer plantSensorEnabledOnly_${plantId}">
<div class="subtitle">Live:</div>
</div>
<div class="flexcontainer">
<div class="flexcontainer plantSensorEnabledOnly_${plantId}">
<span class="plantsensorkey">Sensor A:</span>
<span class="plantsensorvalue" id="plant_${plantId}_moisture_a">not measured</span>
</div>
<div class="flexcontainer">
<div class="flexcontainer plantSensorEnabledOnly_${plantId}">
<div class="plantsensorkey">Sensor B:</div>
<span class="plantsensorvalue" id="plant_${plantId}_moisture_b">not measured</span>
</div>
<div class="flexcontainer">
<div class="flexcontainer plantPumpEnabledOnly_${plantId}">
<div class="plantsensorkey">Test Current</div>
<span class="plantsensorvalue" id="plant_${plantId}_pump_current_result">not_tested</span>
</div>

View File

@ -49,6 +49,8 @@ export class PlantViews {
}
}
export class PlantView {
private readonly moistureSensorMinFrequency: HTMLInputElement;
private readonly moistureSensorMaxFrequency: HTMLInputElement;
@ -186,6 +188,43 @@ export class PlantView {
};
}
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
}
@ -214,10 +253,13 @@ export class PlantView {
plantConfig.moisture_sensor_min_frequency?.toString() || "";
this.moistureSensorMaxFrequency.value =
plantConfig.moisture_sensor_max_frequency?.toString() || "";
this.updateVisibility(plantConfig);
}
getConfig(): PlantConfig {
return {
let conv: PlantConfig = {
mode: this.mode.value,
target_moisture: this.targetMoisture.valueAsNumber,
pump_time_s: this.pumpTimeS.valueAsNumber,
@ -233,5 +275,7 @@ export class PlantView {
max_pump_current_ma: this.maxPumpCurrentMa.valueAsNumber,
ignore_current_error: this.ignoreCurrentError.checked,
};
this.updateVisibility(conv);
return conv;
}
}