updating to corrospend with reality

pumpingStation.html

@@ -53,7 +53,16 @@
       hasDistance: { value: false },
       distance: { value: 0 },
       distanceUnit: { value: "m" },
-      distanceDescription: { value: "" }
+      distanceDescription: { value: "" },
+
+      // control strategy
+      controlMode: { value: "none" },
+      startLevel: { value: null },
+      stopLevel: { value: null },
+      minFlowLevel: { value: null },
+      maxFlowLevel: { value: null },
+      flowSetpoint: { value: null },
+      flowDeadband: { value: null }
 
     },
 
@@ -129,6 +138,32 @@
           : 0;
       }
 
+      // control mode toggle UI
+      const toggleModeSections = (val) => {
+        document.querySelectorAll('.ps-mode-section').forEach((el) => el.style.display = 'none');
+        const active = document.getElementById(`ps-mode-${val}`);
+        if (active) active.style.display = '';
+      };
+
+      const modeSelect = document.getElementById('node-input-controlMode');
+      if (modeSelect) {
+        modeSelect.value = this.controlMode || 'none';
+        toggleModeSections(modeSelect.value);
+        modeSelect.addEventListener('change', (e) => toggleModeSections(e.target.value));
+      }
+
+      const setNumberField = (id, val) => {
+        const el = document.getElementById(id);
+        if (el) el.value = Number.isFinite(val) ? val : '';
+      };
+
+      setNumberField('node-input-startLevel', this.startLevel);
+      setNumberField('node-input-stopLevel', this.stopLevel);
+      setNumberField('node-input-minFlowLevel', this.minFlowLevel);
+      setNumberField('node-input-maxFlowLevel', this.maxFlowLevel);
+      setNumberField('node-input-flowSetpoint', this.flowSetpoint);
+      setNumberField('node-input-flowDeadband', this.flowDeadband);
+
         //------------------- END OF CUSTOM config UI ELEMENTS ------------------- //
     },
     oneditsave: function () {
@@ -151,6 +186,18 @@
       node.refHeight = document.getElementById("node-input-refHeight").value || "";
       node.enableDryRunProtection = document.getElementById("node-input-enableDryRunProtection").checked;
       node.enableOverfillProtection = document.getElementById("node-input-enableOverfillProtection").checked;
+
+      // control strategy
+      node.controlMode = document.getElementById('node-input-controlMode').value || 'none';
+
+      const parseNum = (id) => parseFloat(document.getElementById(id)?.value);
+      node.startLevel = parseNum('node-input-startLevel');
+      node.stopLevel = parseNum('node-input-stopLevel');
+      node.minFlowLevel = parseNum('node-input-minFlowLevel');
+      node.maxFlowLevel = parseNum('node-input-maxFlowLevel');
+      node.flowSetpoint = parseNum('node-input-flowSetpoint');
+      node.flowDeadband = parseNum('node-input-flowDeadband');
+
     },
 
   });
@@ -160,7 +207,7 @@
 
 <script type="text/html" data-template-name="pumpingStation">
 
-  <!-- Simulator toggle -->
+  <h4>Simulation</h4>
   <div class="form-row">
     <label for="node-input-simulator"><i class="fa fa-play-circle"></i> Simulator</label>
     <input type="checkbox" id="node-input-simulator" style="width:20px;vertical-align:baseline;" />
@@ -168,8 +215,8 @@
   </div>
 
   <hr>
-
-  <!-- Basin geometry -->
+  
+  <h4>Basin Geometry</h4>
   <div class="form-row">
     <label for="node-input-basinVolume"><i class="fa fa-cube"></i> Basin Volume (m³)</label>
     <input type="number" id="node-input-basinVolume" min="0" step="0.1" />
@@ -195,6 +242,50 @@
 
   <hr>
 
+  <h4>Control Strategy</h4>
+  <div class="form-row">
+    <label for="node-input-controlMode"><i class="fa fa-sliders"></i> Control mode</label>
+    <select id="node-input-controlMode">
+      <option value="none">None / Manual</option>
+      <option value="levelbased">Level-based</option>
+      <option value="flowbased">Flow-based</option>
+    </select>
+  </div>
+
+  <div id="ps-mode-levelbased" class="ps-mode-section">
+    <div class="form-row">
+      <label for="node-input-startLevel">startLevel</label>
+      <input type="number" id="node-input-startLevel" placeholder="m" />
+    </div>
+    <div class="form-row">
+      <label for="node-input-stopLevel">stopLevel</label>
+      <input type="number" id="node-input-stopLevel" placeholder="m" />
+    </div>
+      <div class="form-row">
+      <label for="node-input-minFlowLevel">Min flow (m)</label>
+      <input type="number" id="node-input-minFlowLevel" placeholder="m" />
+    </div>
+    <div class="form-row">
+      <label for="node-input-maxFlowLevel">Max flow (m)</label>
+      <input type="number" id="node-input-maxFlowLevel" placeholder="m" />
+    </div>
+  </div>
+
+  <div id="ps-mode-flowbased" class="ps-mode-section" style="display:none">
+    <div class="form-row">
+      <label for="node-input-flowSetpoint">Flow setpoint</label>
+      <input type="number" id="node-input-flowSetpoint" placeholder="m3/h" />
+    </div>
+    <div class="form-row">
+      <label for="node-input-flowDeadband">Deadband</label>
+      <input type="number" id="node-input-flowDeadband" placeholder="m3/h" />
+    </div>
+  </div>
+
+  <hr>
+
+  <h4>Reference</h4>
+
   <!-- Reference data -->
   <div class="form-row">
     <label for="node-input-minHeightBasedOn"><i class="fa fa-arrows-v"></i> Minimum Height Based On</label>
@@ -217,6 +308,8 @@
 
   <hr>
 
+  <h4>Safety</h4>
+
   <!-- Safety settings -->
   <div class="form-row">
     <label for="node-input-timeleftToFullOrEmptyThresholdSeconds"><i class="fa fa-clock-o"></i> Time To Empty/Full (s)</label>
@@ -246,7 +339,7 @@
     <label for="node-input-overfillThresholdPercent" style="padding-left:20px;">High Volume Threshold (%)</label>
     <input type="number" id="node-input-overfillThresholdPercent" min="0" max="100" step="0.1" />
   </div>
-
+<hr>
   <!-- Shared asset/logger/position menus -->
   <div id="asset-fields-placeholder"></div>
   <div id="logger-fields-placeholder"></div>