monster/monster.html

<!-- Load the dynamic menu & config endpoints -->
<script src="/monster/menu.js"></script>
<script src="/monster/configData.js"></script>

<script>
  RED.nodes.registerType("monster", {
    category: "EVOLV",
    color: "#4f8582",
        defaults: {

          // Define specific properties
          samplingtime: { value: 0 },
          minvolume: { value: 5 },
          maxweight: { value: 22 },
          emptyWeightBucket: { value: 3 },
          aquon_sample_name: { value: "" },

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

    label: function () {
      return this.positionIcon + " " + this.category.slice(0, -1) || "Monster";
    },

    oneditprepare: function() {
      // wait for the menu scripts to load
      const waitForMenuData = () => {
        if (window.EVOLV?.nodes?.monster?.initEditor) {
          window.EVOLV.nodes.monster.initEditor(this);
        } else {
          setTimeout(waitForMenuData, 50);
        }
      };
      waitForMenuData();

      // your existing project‐settings & asset dropdown logic can remain here
      document.getElementById("node-input-samplingtime");
      document.getElementById("node-input-minvolume");
      document.getElementById("node-input-maxweight");
      document.getElementById("node-input-emptyWeightBucket");
      document.getElementById("node-input-aquon_sample_name");

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

      // save asset fields
      if (window.EVOLV?.nodes?.monster?.assetMenu?.saveEditor) {
        window.EVOLV.nodes.monster.assetMenu.saveEditor(this);
      }
      // save logger fields
      if (window.EVOLV?.nodes?.monster?.loggerMenu?.saveEditor) {
        window.EVOLV.nodes.monster.loggerMenu.saveEditor(this);
      }
      // save position field
      if (window.EVOLV?.nodes?.monster?.positionMenu?.saveEditor) {
        window.EVOLV.nodes.monster.positionMenu.saveEditor(this);
      }

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

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

    }
  });
</script>

<!-- Main UI Template -->
<script type="text/html" data-template-name="monster">

  <!-- speficic input -->
  <div class="form-row">
    <label for="node-input-samplingtime"><i class="fa fa-clock-o"></i> Sampling time (h)</label>
    <input type="number" id="node-input-samplingtime" style="width:60%;" />
  </div>
  <div class="form-row">
    <label for="node-input-minvolume"><i class="fa fa-clock-o"></i> Min volume (L)</label>
    <input type="number" id="node-input-minvolume" style="width:60%;" />
  </div>
  <div class="form-row">
    <label for="node-input-maxweight"><i class="fa fa-clock-o"></i> Max weight (kg)</label>
    <input type="number" id="node-input-maxweight" style="width:60%;" />
  </div>
  <div class="form-row">
    <label for="node-input-emptyWeightBucket"><i class="fa fa-clock-o"></i> Empty weight of bucket (kg)</label>
    <input type="number" id="node-input-emptyWeightBucket" style="width:60%;" />
  </div>
  <div class="form-row">
    <label for="node-input-aquon_sample_name"><i class="fa fa-clock-o"></i> Aquon sample name</label>
    <input type="text" id="node-input-aquon_sample_name" style="width:60%;" />
  </div>

  <!-- Asset fields injected here -->
  <div id="asset-fields-placeholder"></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="monster">
  <p><b>Monster node</b>: Configure a monster asset.</p>
  <ul>
   
  </ul>
</script>