machineGroupControl/ggc.html

<script type="module">
    
    import * as menuUtils from "/generalFunctions/helper/menuUtils.js";
  
    RED.nodes.registerType("ggc", {
      category: "digital twin",
      color: "#4f8582",
  
      defaults: {
        // Define default properties
        name: { value: "", required: true },
        enableLog: { value: false },
        logLevel: { value: "error" },

        // Define specific properties
        speed: { value: 1, required: true },
        startup: { value: 0 },
        warmup: { value: 0 },
        shutdown: { value: 0 },
        cooldown: { value: 0 },

        //define general asset properties
        supplier: { value: "" },
        subType: { value: "" },
        model: { value: "" },
        unit: { value: "" },

      },
  
      inputs: 1,
      outputs: 4,
      inputLabels: ["Input"],
      outputLabels: ["process", "dbase", "upstreamParent", "downstreamParent"],
      icon: "font-awesome/fa-cogs",
  
      label: function () {
        return this.name || "GateGroupControl";
      },
  
    oneditprepare: function () {
        const node = this;

        console.log("ggc Node: Edit Prepare");
  
        const elements = {
          // Basic fields
          name: document.getElementById("node-input-name"),
          // specific fields
          speed: document.getElementById("node-input-speed"),
          startup: document.getElementById("node-input-startup"),
          warmup: document.getElementById("node-input-warmup"),
          shutdown: document.getElementById("node-input-shutdown"),
          cooldown: document.getElementById("node-input-cooldown"),
          // Logging fields
          logCheckbox: document.getElementById("node-input-enableLog"),
          logLevelSelect: document.getElementById("node-input-logLevel"),
          rowLogLevel: document.getElementById("row-logLevel"),
          // Asset fields
          supplier: document.getElementById("node-input-supplier"),
          subType: document.getElementById("node-input-subType"),
          model: document.getElementById("node-input-model"),
          unit: document.getElementById("node-input-unit"),
        };

        const projecSettingstURL = "http://localhost:1880/generalFunctions/settings/projectSettings.json";

      try{

        // Fetch project settings
        menuUtils.fetchProjectData(projecSettingstURL)
          .then((projectSettings) => {

            //assign to node vars
            node.configUrls = projectSettings.configUrls;

            const { cloudConfigURL, localConfigURL } = menuUtils.getSpecificConfigUrl("ggc",node.configUrls.cloud.taggcodeAPI);
            node.configUrls.cloud.config = cloudConfigURL; // first call
            node.configUrls.local.config = localConfigURL; // backup call

            node.locationId = projectSettings.locationId;
            node.uuid = projectSettings.uuid;

            // Gets the ID of the active workspace (Flow)
            const activeFlowId = RED.workspaces.active(); //fetches active flow id
            node.processId = activeFlowId;

           // UI elements 
          menuUtils.initBasicToggles(elements);
          menuUtils.fetchAndPopulateDropdowns(node.configUrls, elements, node); // function for all assets

        })

      }catch(e){
        console.log("Error fetching project settings", e);
      }

      if(node.d){
        //this means node is disabled
        console.log("Current status of node is disabled");
      }
    },
  
    oneditsave: function () {
      const node = this;

      console.log(`------------ Saving changes to node ------------`);
      console.log(`${node.uuid}`);

      //save basic properties
      ["name", "unit", "supplier", "subType", "model"].forEach(
        (field) => {
          const element = document.getElementById(`node-input-${field}`);
          if (element) {
            node[field] = element.value || "";
          }
        }
      );

      // Save numeric and boolean properties
      ["speed", "startup", "warmup", "shutdown", "cooldown"].forEach(
        (field) => {
          const element = document.getElementById(`node-input-${field}`);
          if (element) {
            node[field] = Number(element.value) || 0;
          }
        }
      );

      /*
      //local db
      node[field] = node["modelMetadata"][field];
      //central db
      node[field] = node["modelMetadata"]["product_model_meta"][field];
      */

      const logLevelElement = document.getElementById("node-input-logLevel");
      node.logLevel = logLevelElement ? logLevelElement.value || "info" : "info";

      if (!node.unit) {
          RED.notify("Unit selection is required.", "error");
      }

      if (node.subType && !node.unit) {
        RED.notify("Unit must be set when specifying a subtype.", "error");
      }

      try{
        console.log("Saving assetID and tagnumber");
        console.log(node.assetTagCode);
        // Fetch project settings
        menuUtils.apiCall(node,node.configUrls)
          .then((response) => {

          console.log(" ====<<>>>> API call response", response);

          //save response to node information
          node.assetId = response.asset_id;
          node.assetTagCode = response.asset_tag_number;
          })
          .catch((error) => {
            console.log("Error during API call", error);
          });
      }catch(e){
        console.log("Error saving assetID and tagnumber", e);
      }
  },

  });

  </script>
  
  <!-- Main UI Template -->
  <script type="text/html" data-template-name="ggc">
    <div class="form-row">
      <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
      <input
        type="text"
        id="node-input-name"
        placeholder="ggc Name"
        style="width:70%;"
      />
    </div>
  
    <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" placeholder="1" />
    </div>
  
    <div class="form-row">
      <label for="node-input-startup"><i class="fa fa-clock-o"></i> Startup Time</label>
      <input type="number" id="node-input-startup" placeholder="0" />
    </div>
  
    <div class="form-row">
      <label for="node-input-warmup"><i class="fa fa-clock-o"></i> Warmup Time</label>
      <input type="number" id="node-input-warmup" placeholder="0" />
    </div>
  
    <div class="form-row">
      <label for="node-input-shutdown"><i class="fa fa-clock-o"></i> Shutdown Time</label>
      <input type="number" id="node-input-shutdown" placeholder="0" />
    </div>
  
    <div class="form-row">
      <label for="node-input-cooldown"><i class="fa fa-clock-o"></i> Cooldown Time</label>
      <input type="number" id="node-input-cooldown" placeholder="0" />
    </div>

    <!-- Optional Extended Fields: supplier, type, subType, model -->
    <hr />
    <div class="form-row">
      <label for="node-input-supplier"
        ><i class="fa fa-industry"></i> Supplier</label
      >
      <select id="node-input-supplier" style="width:60%;">
        <option value="">(optional)</option>
      </select>
    </div>
    <div class="form-row">
      <label for="node-input-subType"
        ><i class="fa fa-puzzle-piece"></i> SubType</label
      >
      <select id="node-input-subType" style="width:60%;">
        <option value="">(optional)</option>
      </select>
    </div>
    <div class="form-row">
      <label for="node-input-model"><i class="fa fa-wrench"></i> Model</label>
      <select id="node-input-model" style="width:60%;">
        <option value="">(optional)</option>
      </select>
    </div>
    <div class="form-row">
      <label for="node-input-unit"><i class="fa fa-balance-scale"></i> Unit</label>
      <select id="node-input-unit" style="width:60%;"></select>
    </div>

    <hr />

    <!-- loglevel checkbox -->
    <div class="form-row">
      <label for="node-input-enableLog"
        ><i class="fa fa-cog"></i> Enable Log</label
      >
      <input
        type="checkbox"
        id="node-input-enableLog"
        style="width:20px; vertical-align:baseline;"
      />
      <span>Enable logging</span>
    </div>

  <div class="form-row" id="row-logLevel">
    <label for="node-input-logLevel"><i class="fa fa-cog"></i> Log Level</label>
    <select id="node-input-logLevel" style="width:60%;">
      <option value="info">Info</option>
      <option value="debug">Debug</option>
      <option value="warn">Warn</option>
      <option value="error">Error</option>
    </select>
  </div>

  </script>
  
  <script type="text/html" data-help-name="ggc">
    <p>
      <b>ggc Node</b>: Configure the behavior of a ggc
      used in a digital twin.
    </p>
    <ul>
      <li><b>Supplier:</b> Select a supplier to populate machine options.</li>
      <li><b>SubType:</b> Select a subtype if applicable to further categorize the asset.</li>
      <li><b>Model:</b> Define the specific model for more granular asset configuration.</li>
      <li><b>Unit:</b> Assign a unit to standardize measurements or operations.</li>
      <li><b>Speed:</b> Reaction speed of the machine in response to inputs.</li>
      <li><b>Startup:</b> Define the startup time for the machine.</li>
      <li><b>Warmup:</b> Define the warmup time for the machine.</li>
      <li><b>Shutdown:</b> Define the shutdown time for the machine.</li>
      <li><b>Cooldown:</b> Define the cooldown time for the machine.</li>
      <li><b>Enable Log:</b> Enable or disable logging for the machine.</li>
      <li><b>Log Level:</b> Set the log level (Info, Debug, Warn, Error).</li>
    </ul>
  </script>