pumpingStation/pumpingStation.html

<!--
| S88-niveau             | Primair (blokkleur) | Tekstkleur |
| ---------------------- | ------------------- | ---------- |
| **Area**               | `#0f52a5`           | wit        |
| **Process Cell**       | `#0c99d9`           | wit        |
| **Unit**               | `#50a8d9`           | zwart      |
| **Equipment (Module)** | `#86bbdd`           | zwart      |
| **Control Module**     | `#a9daee`           | zwart      |

-->
<script src="/pumpingStation/menu.js"></script> <!-- Load the menu script for dynamic dropdowns --> 
<script src="/pumpingStation/configData.js"></script> <!-- Load the config script for node information --> 

<script>//test
  RED.nodes.registerType("pumpingStation", {
    category: "EVOLV",
    color: "#0c99d9", // color for the node based on the S88 schema
    defaults: {
      name: { value: "" },

       // Define station-specific properties
      simulator:      { value: false },
      basinVolume:    { value: 1 },   // m³, total empty basin
      basinHeight:    { value: 1 },   // m, floor to top
      inflowLevel:    { value: 0.8 }, // m, centre of inlet pipe above floor
      outflowLevel:   { value: 0.2 }, // m, centre of outlet pipe above floor
      overflowLevel: { value: 0.9 }, // m, overflow elevation
      defaultFluid:   { value: "wastewater" },
      inletPipeDiameter:  { value: 0.3 }, // m
      outletPipeDiameter: { value: 0.3 }, // m
      pipelineLength:     { value: 80 },  // m
      maxDischargeHead:   { value: 24 },  // m
      staticHead:         { value: 12 },  // m
      maxInflowRate:      { value: 200 }, // m³/h
      temperatureReferenceDegC: { value: 15 },
      timeleftToFullOrEmptyThresholdSeconds:{value:0}, // time threshold to safeguard starting or stopping pumps in seconds
      enableDryRunProtection: { value: true },
      enableOverfillProtection: { value: true },
      dryRunThresholdPercent: { value: 2 },
      overfillThresholdPercent: { value: 98 },
      minHeightBasedOn: { value: "outlet" }, // basis for minimum height check: inlet or outlet
      processOutputFormat: { value: "process" },
      dbaseOutputFormat: { value: "influxdb" },

      // Advanced reference information
      refHeight:      { value: "NAP" }, // reference height
      basinBottomRef: { value: 1 },     // absolute elevation of basin floor

      //define asset properties
      uuid: { value: "" },
      supplier: { value: "" },
      category: { value: "" },
      assetType: { value: "" },
      model: { value: "" },
      unit: { value: "" },

      //logger properties
      enableLog: { value: false },
      logLevel: { value: "error" },

      //physicalAspect
      positionVsParent: { value: "" },
      positionIcon: { value: "" },
      hasDistance: { value: false },
      distance: { value: 0 },
      distanceUnit: { value: "m" },
      distanceDescription: { value: "" },

      // control strategy
      controlMode: { value: "none" },
      startLevel: { value: null },
      minLevel: { value: null },
      maxLevel: { value: null },
      flowSetpoint: { value: null },
      flowDeadband: { value: null }

    },

    inputs: 1,
    outputs: 3,
    inputLabels: ["Input"],
    outputLabels: ["process", "dbase", "parent"],
    icon: "font-awesome/fa-tint",

    label: function () {
      return this.positionIcon + " PumpingStation";
    },
    
    oneditprepare: function() {
        const waitForMenuData = () => {
            if (window.EVOLV?.nodes?.pumpingStation?.initEditor) {
                window.EVOLV.nodes.pumpingStation.initEditor(this);
            } else {
                setTimeout(waitForMenuData, 50);
            }
        };
        // Wait for the menu data to be ready before initializing the editor
        waitForMenuData();
      
        // NODE SPECIFIC
      document.getElementById("node-input-basinVolume");
      document.getElementById("node-input-basinHeight");
      document.getElementById("node-input-inflowLevel");
      document.getElementById("node-input-outflowLevel");
      document.getElementById("node-input-overflowLevel");
      document.getElementById("node-input-refHeight");
      document.getElementById("node-input-basinBottomRef");

      const refHeightEl = document.getElementById("node-input-refHeight");
      if (refHeightEl) {
        refHeightEl.value = this.refHeight || "NAP";
      }

      const minHeightBasedOnEl = document.getElementById("node-input-minHeightBasedOn");
      if (minHeightBasedOnEl) {
        minHeightBasedOnEl.value = this.minHeightBasedOn;
      }

      const dryRunToggle = document.getElementById("node-input-enableDryRunProtection");
      const dryRunPercent = document.getElementById("node-input-dryRunThresholdPercent");
      const overfillToggle = document.getElementById("node-input-enableOverfillProtection");
      const overfillPercent = document.getElementById("node-input-overfillThresholdPercent");

      const toggleInput = (toggleEl, inputEl) => {
        if (!toggleEl || !inputEl) { return; }
        inputEl.disabled = !toggleEl.checked;
        inputEl.parentElement.classList.toggle('disabled', inputEl.disabled);
      };

      if (dryRunToggle && dryRunPercent) {
        dryRunToggle.checked = !!this.enableDryRunProtection;
        dryRunPercent.value = Number.isFinite(this.dryRunThresholdPercent) ? this.dryRunThresholdPercent : 2;
        dryRunToggle.addEventListener('change', () => toggleInput(dryRunToggle, dryRunPercent));
        toggleInput(dryRunToggle, dryRunPercent);
      }

      if (overfillToggle && overfillPercent) {
        overfillToggle.checked = !!this.enableOverfillProtection;
        overfillPercent.value = Number.isFinite(this.overfillThresholdPercent) ? this.overfillThresholdPercent : 98;
        overfillToggle.addEventListener('change', () => toggleInput(overfillToggle, overfillPercent));
        toggleInput(overfillToggle, overfillPercent);
      }

      const timeLeftInput = document.getElementById("node-input-timeleftToFullOrEmptyThresholdSeconds");
      if (timeLeftInput) {
        timeLeftInput.value = Number.isFinite(this.timeleftToFullOrEmptyThresholdSeconds)
          ? this.timeleftToFullOrEmptyThresholdSeconds
          : 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-minLevel', this.minLevel);
      setNumberField('node-input-maxLevel', this.maxLevel);
      setNumberField('node-input-flowSetpoint', this.flowSetpoint);
      setNumberField('node-input-flowDeadband', this.flowDeadband);

        //------------------- END OF CUSTOM config UI ELEMENTS ------------------- //
    },
    oneditsave: function () {
      const node = this;

      //window.EVOLV?.nodes?.pumpingStation?.assetMenu?.saveEditor?.(node);
      window.EVOLV?.nodes?.pumpingStation?.loggerMenu?.saveEditor?.(node);
      window.EVOLV?.nodes?.pumpingStation?.positionMenu?.saveEditor?.(node);

      //node specific
      node.refHeight = document.getElementById("node-input-refHeight").value || "NAP";
      node.minHeightBasedOn = document.getElementById("node-input-minHeightBasedOn").value || "outlet";
      node.simulator = document.getElementById("node-input-simulator").checked;

      ["basinVolume","basinHeight","inflowLevel","outflowLevel","overflowLevel","basinBottomRef","timeleftToFullOrEmptyThresholdSeconds","dryRunThresholdPercent","overfillThresholdPercent"]
        .forEach(field => {
          node[field] = parseFloat(document.getElementById(`node-input-${field}`).value) || 0;
        });

      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.minLevel = parseNum('node-input-minLevel');
      node.maxLevel = parseNum('node-input-maxLevel');
      node.flowSetpoint = parseNum('node-input-flowSetpoint');
      node.flowDeadband = parseNum('node-input-flowDeadband');

    },

  });
</script>

<!-- Main UI -->

<script type="text/html" data-template-name="pumpingStation">

  <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;" />
    <span>Run station in simulated mode</span>
  </div>

  <hr>
  
  <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" />
  </div>
  <div class="form-row">
    <label for="node-input-basinHeight"><i class="fa fa-arrows-v"></i> Basin Height (m)</label>
    <input type="number" id="node-input-basinHeight" min="0" step="0.1" />
  </div>

  <!-- Inlet/Outlet elevations -->
  <div class="form-row">
    <label for="node-input-inflowLevel"><i class="fa fa-long-arrow-up"></i> Inlet Elevation (m)</label>
    <input type="number" id="node-input-inflowLevel" min="0" step="0.01" />
  </div>
  <div class="form-row">
    <label for="node-input-outflowLevel"><i class="fa fa-long-arrow-down"></i> Outlet Elevation (m)</label>
    <input type="number" id="node-input-outflowLevel" min="0" step="0.01" />
  </div>
  <div class="form-row">
    <label for="node-input-overflowLevel"><i class="fa fa-tint"></i> Overflow Level (m)</label>
    <input type="number" id="node-input-overflowLevel" min="0" step="0.01" />
  </div>

  <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-minLevel">minLevel (m)</label>
      <input type="number" id="node-input-minLevel" placeholder="m" />
    </div>
    <div class="form-row">
      <label for="node-input-startLevel">startLevel (m)</label>
      <input type="number" id="node-input-startLevel" placeholder="m" />
    </div>
    <div class="form-row">
      <label for="node-input-maxLevel">maxLevel (m)</label>
      <input type="number" id="node-input-maxLevel" 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>
    <select id="node-input-minHeightBasedOn" style="width:60%;">
      <option value="inlet">Inlet Elevation</option>
      <option value="outlet">Outlet Elevation</option>
    </select>
  </div>
  <div class="form-row">
    <label for="node-input-refHeight"><i class="fa fa-map-marker"></i> Reference height</label>
    <select id="node-input-refHeight" style="width:60%;">
      <option value="NAP">NAP</option>
    </select>
  </div>

  <div class="form-row">
    <label for="node-input-basinBottomRef"><i class="fa fa-level-down"></i> Basin Bottom (m Refheight)</label>
    <input type="number" id="node-input-basinBottomRef" step="0.01" />
  </div>

  <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>
    <input type="number" id="node-input-timeleftToFullOrEmptyThresholdSeconds" min="0" step="1" />
  </div>

  <div class="form-row">
    <label for="node-input-enableDryRunProtection">
      <i class="fa fa-shield"></i> Dry-run Protection
    </label>
    <input type="checkbox" id="node-input-enableDryRunProtection" style="width:20px;vertical-align:baseline;" />
    <span>Prevent pumps from running on low volume</span>
  </div>
  <div class="form-row">
    <label for="node-input-dryRunThresholdPercent" style="padding-left:20px;">Low Volume Threshold (%)</label>
    <input type="number" id="node-input-dryRunThresholdPercent" min="0" max="100" step="0.1" />
  </div>

  <div class="form-row">
    <label for="node-input-enableOverfillProtection">
      <i class="fa fa-exclamation-triangle"></i> Overfill Protection
    </label>
    <input type="checkbox" id="node-input-enableOverfillProtection" style="width:20px;vertical-align:baseline;" />
    <span>Stop filling when approaching overflow</span>
  </div>
  <div class="form-row">
    <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>

  <h3>Output Formats</h3>
  <div class="form-row">
    <label for="node-input-processOutputFormat"><i class="fa fa-random"></i> Process Output</label>
    <select id="node-input-processOutputFormat" style="width:60%;">
      <option value="process">process</option>
      <option value="json">json</option>
      <option value="csv">csv</option>
    </select>
  </div>
  <div class="form-row">
    <label for="node-input-dbaseOutputFormat"><i class="fa fa-database"></i> Database Output</label>
    <select id="node-input-dbaseOutputFormat" style="width:60%;">
      <option value="influxdb">influxdb</option>
      <option value="json">json</option>
      <option value="csv">csv</option>
    </select>
  </div>

  <!-- Shared asset/logger/position menus -->
  <div id="asset-fields-placeholder"></div>
  <div id="logger-fields-placeholder"></div>
  <div id="position-fields-placeholder"></div>


</script>


<script type="text/html" data-help-name="pumpingStation">


</script>