C3MA/PlantCtrl
4
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

hide unused html elements based on config test1

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
rust/src_webpack/src/main.html
View File

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

67
rust/src_webpack/src/plant.html
View File

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

46
rust/src_webpack/src/plant.ts
View File

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