valve/valve.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="/valve/menu.js"></script> <!-- Load the menu script for dynamic dropdowns --> 
<script src="/valve/configData.js"></script> <!-- Load the config script for node information --> 

<script>
  RED.nodes.registerType("valve", {
    category: "EVOLV",
    color: "#3CAEA3",
    defaults: {

      // Define default properties
      name: { value: "" }, // use asset category as name

      // Define specific properties
      speed: { value: 1, required: true },
      processOutputFormat: { value: "process" },
      dbaseOutputFormat: { value: "influxdb" },
      
      // Asset identifier surface. supplier/category/assetType are derived
      // at runtime via assetResolver.resolveAssetMetadata(model). Do NOT
      // add them back here. See generalFunctions/src/registry/README.md.
      uuid: { value: "" },
      assetTagNumber: { 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-toggle-on",

    label: function () {
      // No more `this.category` on the node — derive from the model if needed,
      // else fall back to a generic name.
      const stem = this.model ? this.model : "Valve";
      return (this.positionIcon || "") + " " + stem;
    },
    
    oneditprepare: function() {
        const waitForMenuData = () => {
            if (window.EVOLV?.nodes?.valve?.initEditor) {
                window.EVOLV.nodes.valve.initEditor(this);
            } else {
                setTimeout(waitForMenuData, 50);
            }
        };
        // Wait for the menu data to be ready before initializing the editor
        waitForMenuData();
      
        // THIS IS NODE SPECIFIC --------------- Initialize the dropdowns and other specific UI elements -------------- this should be derived from the config in the future (make config based menu)
        document.getElementById("node-input-speed");  
        //------------------- END OF CUSTOM config UI ELEMENTS ------------------- //
    },
    oneditsave: function () {
      const node = this;
      let success = true;

      // Validate asset properties using the asset menu
      if (window.EVOLV?.nodes?.valve?.assetMenu?.saveEditor) {
        success = window.EVOLV.nodes.valve.assetMenu.saveEditor(this);
      }

      // Validate logger properties using the logger menu
      if (window.EVOLV?.nodes?.valve?.loggerMenu?.saveEditor) {
        success = window.EVOLV.nodes.valve.loggerMenu.saveEditor(node);
      }

      // save position field
      if (window.EVOLV?.nodes?.valve?.positionMenu?.saveEditor) {
        window.EVOLV.nodes.valve.positionMenu.saveEditor(this);
      }

      ["speed"].forEach((field) => {
        const element = document.getElementById(`node-input-${field}`);
        const value = parseFloat(element?.value) || 0;
        console.log(`----------------> Saving ${field}: ${value}`);
        node[field] = value;
      });

      return success;

    },
  });
</script>

<!-- Main UI -->

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

  
  <!-- Node-specific controls -->
  <div class="form-row">
    <label for="node-input-speed"><i class="fa fa-clock-o"></i> Reaction Speed</label>
    <input type="number" id="node-input-speed" style="width:60%;" />
  </div>

  <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="frost">frost</option>
      <option value="json">json</option>
      <option value="csv">csv</option>
    </select>
  </div>

  <!-- Optional Extended Fields: supplier, cat, type, model, unit -->
  <!-- Asset fields will be injected here -->
  <div id="asset-fields-placeholder"></div>

  <!-- loglevel checkbox -->
  <div id="logger-fields-placeholder"></div>

  <!-- Position fields will be injected here -->
  <div id="position-fields-placeholder"></div>

</script>


<script type="text/html" data-help-name="valve">
  <p><b>Valve Node</b>: Controls the flow of data through a valve-like mechanism.</p>
  <p>This node is used to manage the flow of data in a process, similar to how a valve controls the flow of liquids or gases.</p>

</script>