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: {

       // Define station-specific properties
      simulator:      { value: false },
      basinVolume:    { value: 1 },   // m³, total empty basin
      basinHeight:    { value: 1 },   // m, floor to top
      heightInlet:    { value: 0.8 }, // m, centre of inlet pipe above floor
      heightOutlet:   { value: 0.2 }, // m, centre of outlet pipe above floor
      heightOverflow: { value: 0.9 }, // m, overflow elevation
      minHeightBasedOn: { value: "outlet" }, // basis for minimum height check: inlet or outlet

      // 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: "" }

    },

    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-heightInlet");
      document.getElementById("node-input-heightOutlet");
      document.getElementById("node-input-heightOverflow");
      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;
      }

        //------------------- 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","heightInlet","heightOutlet","heightOverflow","basinBottomRef"]
        .forEach(field => {
          node[field] = parseFloat(document.getElementById(`node-input-${field}`).value) || 0;
        });

      node.refHeight = document.getElementById("node-input-refHeight").value || "";
    },

  });
</script>

<!-- Main UI -->

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

  <!-- Simulator toggle -->
  <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>

  <!-- Basin geometry -->
  <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-heightInlet"><i class="fa fa-long-arrow-up"></i> Inlet Elevation (m)</label>
    <input type="number" id="node-input-heightInlet" min="0" step="0.01" />
  </div>
  <div class="form-row">
    <label for="node-input-heightOutlet"><i class="fa fa-long-arrow-down"></i> Outlet Elevation (m)</label>
    <input type="number" id="node-input-heightOutlet" min="0" step="0.01" />
  </div>
  <div class="form-row">
    <label for="node-input-heightOverflow"><i class="fa fa-tint"></i> Overflow Level (m)</label>
    <input type="number" id="node-input-heightOverflow" min="0" step="0.01" />
  </div>

  <hr>

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

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