Files
valve/valve.html
2025-10-14 14:08:04 +02:00

131 lines
4.3 KiB
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: "#86bbdd", // color for the node based on the S88 schema
defaults: {
// Define default properties
name: { value: "" }, // use asset category as name
// Define specific properties
speed: { value: 1, required: 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-toggle-on",
label: function () {
return this.positionIcon + " " + this.category.slice(0, -1) || "Valve";
},
oneditprepare: function() {
const waitForMenuData = () => {
if (window.EVOLV?.nodes?.measurement?.initEditor) {
window.EVOLV.nodes.measurement.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;
// 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;
});
},
});
</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>
<!-- 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>