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 default properties
	          name: { value: "" },
        processOutputFormat: { value: "process" },
        dbaseOutputFormat: { value: "influxdb" },

	          // Define specific properties
	          samplingtime: { value: 0 },
	          minvolume: { value: 5 },
          maxweight: { value: 22 },
          nominalFlowMin: { value: 0 },
          flowMax: { value: 0 },
          maxRainRef: { value: 10 },
          minSampleIntervalSec: { value: 60 },
          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 ? 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-nominalFlowMin");
      document.getElementById("node-input-flowMax");
      document.getElementById("node-input-maxRainRef");
      document.getElementById("node-input-minSampleIntervalSec");
      document.getElementById("node-input-emptyWeightBucket");
      const aquonSelect = document.getElementById("node-input-aquon_sample_name");

      if (aquonSelect) {
        const menuData = window.EVOLV?.nodes?.monster?.menuData?.aquon || {};
        const options = menuData.samples || [];
        const specs = menuData.specs || {};
        const defaultSpec = specs.defaults || {};
        const specMap = specs.bySample || {};

        const setReadOnly = () => {};

        const applySpec = (spec) => {
          const merged = {
            samplingtime: defaultSpec.samplingtime,
            minvolume: defaultSpec.minvolume,
            maxweight: defaultSpec.maxweight,
            emptyWeightBucket: defaultSpec.emptyWeightBucket,
            ...(spec || {})
          };

          const samplingTimeEl = document.getElementById("node-input-samplingtime");
          const minVolumeEl = document.getElementById("node-input-minvolume");
          const maxWeightEl = document.getElementById("node-input-maxweight");
          const nominalFlowMinEl = document.getElementById("node-input-nominalFlowMin");
          const flowMaxEl = document.getElementById("node-input-flowMax");
          const maxRainEl = document.getElementById("node-input-maxRainRef");
          const minSampleIntervalEl = document.getElementById("node-input-minSampleIntervalSec");
          const emptyWeightEl = document.getElementById("node-input-emptyWeightBucket");

          if (samplingTimeEl && merged.samplingtime !== undefined) {
            samplingTimeEl.value = merged.samplingtime;
          }
          if (minVolumeEl && merged.minvolume !== undefined) {
            minVolumeEl.value = merged.minvolume;
          }
          if (maxWeightEl && merged.maxweight !== undefined) {
            maxWeightEl.value = merged.maxweight;
          }
          if (nominalFlowMinEl && merged.nominalFlowMin !== undefined) {
            nominalFlowMinEl.value = merged.nominalFlowMin;
          }
          if (flowMaxEl && merged.flowMax !== undefined) {
            flowMaxEl.value = merged.flowMax;
          }
          if (maxRainEl && merged.maxRainRef !== undefined) {
            maxRainEl.value = merged.maxRainRef;
          }
          if (minSampleIntervalEl && merged.minSampleIntervalSec !== undefined) {
            minSampleIntervalEl.value = merged.minSampleIntervalSec;
          }
          if (emptyWeightEl && merged.emptyWeightBucket !== undefined) {
            emptyWeightEl.value = merged.emptyWeightBucket;
          }

        };

        aquonSelect.innerHTML = "";

        const emptyOption = document.createElement("option");
        emptyOption.value = "";
        emptyOption.textContent = "Select sample...";
        aquonSelect.appendChild(emptyOption);

        options.forEach((option) => {
          const optionElement = document.createElement("option");
          optionElement.value = option.code;
          optionElement.textContent = `${option.code} - ${option.description}`;
          optionElement.title = option.description || option.code;
          aquonSelect.appendChild(optionElement);
        });

        if (this.aquon_sample_name) {
          aquonSelect.value = this.aquon_sample_name;
        }

        aquonSelect.addEventListener("change", () => {
          const selected = aquonSelect.value;
          if (!selected) {
            return;
          }
          const selectedSpec = specMap[selected] || {};
          applySpec(selectedSpec);
        });
      }

    },
    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);
      }

      const normalizeNumber = (value) => {
        if (typeof value !== "string") {
          return value;
        }
        return value.replace(",", ".");
      };

      ["samplingtime", "minvolume", "maxweight", "nominalFlowMin", "flowMax", "maxRainRef", "minSampleIntervalSec", "emptyWeightBucket"].forEach((field) => {
        const element = document.getElementById(`node-input-${field}`);
        const rawValue = normalizeNumber(element?.value || "");
        const value = parseFloat(rawValue) || 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">

  <!-- specific input -->
  <h3>Sampling constraints</h3>
  <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>
  <h3>Hydraulic bounds</h3>
  <div class="form-row">
    <label for="node-input-nominalFlowMin"><i class="fa fa-clock-o"></i> Nominal min flow (m3/h)</label>
    <input type="number" id="node-input-nominalFlowMin" style="width:60%;" />
  </div>
  <div class="form-row">
    <label for="node-input-flowMax"><i class="fa fa-clock-o"></i> Max flow (m3/h)</label>
    <input type="number" id="node-input-flowMax" style="width:60%;" />
  </div>
  <h3>Rain scaling</h3>
  <div class="form-row">
    <label for="node-input-maxRainRef"><i class="fa fa-cloud-rain"></i> Max rain reference (mm)</label>
    <input type="number" id="node-input-maxRainRef" style="width:60%;" />
  </div>
  <div class="form-row">
    <label for="node-input-minSampleIntervalSec"><i class="fa fa-hourglass"></i> Min sample interval (s)</label>
    <input type="number" id="node-input-minSampleIntervalSec" style="width:60%;" />
  </div>
  <h3>Bucket</h3>
  <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>
  <h3>Aquon</h3>
  <div class="form-row">
    <label for="node-input-aquon_sample_name"><i class="fa fa-clock-o"></i> Aquon sample name</label>
    <select id="node-input-aquon_sample_name" style="width:60%;"></select>
  </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>
    <li><b>Beta note:</b> values load from specs but remain editable in the editor for testing.</li>
  </ul>
</script>