hide unused html elements based on config test1

rust/src_webpack/src/main.html

@@ -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;
   }
 

rust/src_webpack/src/plant.html

@@ -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>

rust/src_webpack/src/plant.ts

@@ -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;
     }
 }