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

<!-- Editor JS modules — see nodes/machineGroupControl/src/editor/. Loaded in
     dependency order: index.js (namespace + helpers) → modules → oneditprepare. -->
<script src="/machineGroupControl/editor/index.js"></script>
<script src="/machineGroupControl/editor/mode-cards.js"></script>
<script src="/machineGroupControl/editor/oneditprepare.js"></script>

<style>
  /* Mode-card picker. Three cards stack horizontally; on a narrow editor pane
     they wrap. Selected card gets a thick #50a8d9 (Unit-colour) border. */
  .mgc-mode-cards { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px 0; }
  .mgc-mode-card {
    flex:1 1 0; min-width:140px; box-sizing:border-box;
    border:2px solid #d0d0d0; border-radius:4px; background:#fafafa;
    padding:6px 8px 8px 8px; cursor:pointer; user-select:none;
    display:flex; flex-direction:column; gap:4px;
    transition:border-color 80ms ease-out, background 80ms ease-out;
  }
  .mgc-mode-card:hover { border-color:#86bbdd; background:#f5fafd; }
  .mgc-mode-card-on   { border-color:#50a8d9; background:#eaf4fb; }
  .mgc-mode-card-svg svg { width:100%; height:auto; max-height:90px; display:block; }
  .mgc-mode-card-label   { font-weight:600; font-size:12px; color:#333; }
  .mgc-mode-card-caption { font-size:10px; color:#666; line-height:1.3; }
</style>

<script>
    RED.nodes.registerType('machineGroupControl',{
    category: "EVOLV",
    color: "#50a8d9",
    defaults: {
      // Define default properties
      name: { value: "" },
      processOutputFormat: { value: "process" },
      dbaseOutputFormat: { value: "influxdb" },

      // Control strategy
      mode:    { value: "optimalControl" }, // optimalControl | priorityControl | maintenance

      // Same-time landing (rendezvous planner). When ON the planner
      // delays each pump's move so all pumps reach their setpoint at
      // the same wall-clock instant t* = max(eta_i). When OFF each
      // pump moves at its own pace and lands at its own eta.
      useRendezvous: { value: true },

      //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-cogs",

        label: function () {
            return (this.positionIcon || "") + " machineGroup";
        },
        oneditprepare: function() {
            const self = this;
            // Initialize the menu data for the node, then the visual modules.
            // Both attach to window.EVOLV.nodes.machineGroupControl.* — the
            // menu endpoint populates loggerMenu/positionMenu/initEditor; the
            // editor scripts populate editor.modeCards/demandContract.
            const waitForMenuData = () => {
                if (window.EVOLV?.nodes?.machineGroupControl?.initEditor) {
                    window.EVOLV.nodes.machineGroupControl.initEditor(self);
                    if (window.EVOLV.nodes.machineGroupControl.editor?.initVisuals) {
                        window.EVOLV.nodes.machineGroupControl.editor.initVisuals(self);
                    }
                } else {
                    setTimeout(waitForMenuData, 50);
                }
            };
            // Wait for the menu data to be ready before initializing the editor
            waitForMenuData();

        },
        oneditsave: function(){
            const node = this;

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

            // save position field
            if (window.EVOLV?.nodes?.machineGroupControl?.positionMenu?.saveEditor) {
                window.EVOLV.nodes.machineGroupControl.positionMenu.saveEditor(this);
            }
           
        }
    });
    
</script>

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

  <h3>Control strategy</h3>
  <!-- Hidden input is the canonical Node-RED-readable field. The visible
       picker is rendered by src/editor/mode-cards.js into the placeholder
       below, and clicks on a card write back to this input. -->
  <input type="hidden" id="node-input-mode" />
  <div id="mgc-mode-cards" class="mgc-mode-cards"
       role="radiogroup" aria-label="Control strategy mode">
    <!-- mode-cards.js renders three card divs here -->
  </div>

  <p style="margin-top:8px;color:#666;font-size:11px;">
    Demand is self-describing per <code>set.demand</code> message: a bare number is
    treated as % of group capacity; <code>{value, unit}</code> with a flow unit
    (<code>m3/h</code>, <code>l/s</code>, <code>m3/s</code>, &hellip;) is dispatched
    in absolute terms. Negative value stops all pumps.
  </p>

  <h3>Rendezvous planner</h3>
  <div class="form-row" style="display:flex;align-items:center;gap:8px;">
    <input type="checkbox" id="node-input-useRendezvous"
           style="width:auto;margin:0;vertical-align:middle;" />
    <label for="node-input-useRendezvous" style="width:auto;margin:0;cursor:pointer;">
      Same-time landing
    </label>
  </div>
  <p style="margin-top:4px;color:#666;font-size:11px;">
    When enabled (default), every dispatch is routed through the rendezvous
    planner regardless of control strategy: per-pump moves are delayed so all
    pumps reach their setpoint at the same wall-clock instant
    <code>t* = max(eta<sub>i</sub>)</code>. When disabled, every
    <code>flowmovement</code> fires immediately and each pump ramps at its
    own configured reaction speed (legacy behaviour).
  </p>

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

  <!-- Logger fields injected here -->
  <div id="logger-fields-placeholder"></div>

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

</script>

<script type="text/html" data-help-name="machineGroupControl">
    <p>A machineGroupControl node</p>
</script>