grunig-nodes
Version:
Grünig Nodes Library
240 lines (222 loc) • 8.61 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('Modbus-Read', {
category: 'Grunig',
color: 'rgb(176, 223, 227)',
defaults: {
name: { value: "" },
mqttPath: { value: "" },
comEnabled: { value: "false" },
format: { value: "" },
// Data-Felder
data1: { value: "" },
data2: { value: "" },
data3: { value: "" },
data4: { value: "" },
data5: { value: "" },
data6: { value: "" },
data7: { value: "" },
data8: { value: "" },
data9: { value: "" },
data10: { value: "" },
data11: { value: "" },
data12: { value: "" },
data13: { value: "" },
data14: { value: "" },
data15: { value: "" },
},
inputs: 1,
outputs: 1,
icon: "file-out.svg",
label: function() {
return this.name || "Modbus-Read";
},
oneditprepare: function() {
// Diese Funktion wird ausgeführt, wenn das Formular zum Bearbeiten des Knotens geladen wird
// Verweis auf das aktuelle Knotenobjekt
var node = this;
// Eingabefeld für den Namen
var nameInput = $("#node-config-input-name");
nameInput.val(node.name);
// Eingabefeld für den Pfad
var pathInput = $("#node-config-input-path");
pathInput.val(node.mqttPath);
// Eingabefeld für comEnabled
var comEnabledInput = $("#node-config-input-comenabled");
comEnabledInput.val(node.comEnabled);
// Eingabefeld für das Format
var formatInput = $("#node-config-input-format");
formatInput.val(node.format);
// Änderungsereignis für den Namen
nameInput.on("change", function() {
node.name = nameInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für den Pfad
pathInput.on("change", function() {
node.mqttPath = pathInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für comEnabled
comEnabledInput.on("change", function() {
node.comEnabled = comEnabledInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für das Format
formatInput.on("change", function() {
node.format = formatInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignisse für die Datenfelder
for (var i = 1; i <= 15; i++) {
var dataField = $("#node-config-input-data" + i);
dataField.val(node["data" + i]);
dataField.on("change", (function(index) {
return function() {
node["data" + index] = $(this).val();
};
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
})(i));
}
}
});
</script>
<!-- Styles -->
<style>
div.form-row label {
width: 140px;
display: contents;
}
.form-row {
margin-bottom: 10px;
}
</style>
<script type="text/html" data-template-name="Modbus-Read">
<div class="form-row">
<label for="node-config-input-name">
<i class="fa fa-tag"></i> Name
</label>
<input type="text" id="node-config-input-name" placeholder="Enter name">
</div>
<div class="form-row">
<label for="node-config-input-path">
<i class="fa fa-folder-open"></i> MQTT Path
</label>
<input type="text" id="node-config-input-path" placeholder="Enter path">
</div>
<div style="height: 40px;"></div>
<div class="form-row">
<label for="node-config-input-format">
<i class="fa fa-file"></i> Format
</label>
<select id="node-config-input-format">
<option value="format_payload">payload</option>
<option value="format_unit">Unit</option>
</select>
</div>
<div class="form-row">
<label for="node-config-input-comenabled">
<i class="fa fa-wrench"></i> Ping
</label>
<select id="node-config-input-comenabled">
<option value="true">Watch</option>
<option value="false">Ignore</option>
</select>
</div>
<div style="height: 40px;"></div>
<!-- Data-Felder -->
<div class="form-row">
<label for="node-config-input-data1">
<i class="fa fa-database"></i> Data 1
</label>
<input type="text" id="node-config-input-data1" placeholder="Data 1">
</div>
<div class="form-row">
<label for="node-config-input-data2">
<i class="fa fa-database"></i> Data 2
</label>
<input type="text" id="node-config-input-data2" placeholder="Data 2">
</div>
<div class="form-row">
<label for="node-config-input-data3">
<i class="fa fa-database"></i> Data 3
</label>
<input type="text" id="node-config-input-data3" placeholder="Data 3">
</div>
<div class="form-row">
<label for="node-config-input-data4">
<i class="fa fa-database"></i> Data 4
</label>
<input type="text" id="node-config-input-data4" placeholder="Data 4">
</div>
<div class="form-row">
<label for="node-config-input-data5">
<i class="fa fa-database"></i> Data 5
</label>
<input type="text" id="node-config-input-data5" placeholder="Data 5">
</div>
<div class="form-row">
<label for="node-config-input-data6">
<i class="fa fa-database"></i> Data 6
</label>
<input type="text" id="node-config-input-data6" placeholder="Data 6">
</div>
<div class="form-row">
<label for="node-config-input-data7">
<i class="fa fa-database"></i> Data 7
</label>
<input type="text" id="node-config-input-data7" placeholder="Data 7">
</div>
<div class="form-row">
<label for="node-config-input-data8">
<i class="fa fa-database"></i> Data 8
</label>
<input type="text" id="node-config-input-data8" placeholder="Data 8">
</div>
<div class="form-row">
<label for="node-config-input-data9">
<i class="fa fa-database"></i> Data 9
</label>
<input type="text" id="node-config-input-data9" placeholder="Data 9">
</div>
<div class="form-row">
<label for="node-config-input-data10">
<i class="fa fa-database"></i> Data 10
</label>
<input type="text" id="node-config-input-data10" placeholder="Data 10">
</div>
<div class="form-row">
<label for="node-config-input-data11">
<i class="fa fa-database"></i> Data 11
</label>
<input type="text" id="node-config-input-data11" placeholder="Data 11">
</div>
<div class="form-row">
<label for="node-config-input-data12">
<i class="fa fa-database"></i> Data 12
</label>
<input type="text" id="node-config-input-data12" placeholder="Data 12">
</div>
<div class="form-row">
<label for="node-config-input-data13">
<i class="fa fa-database"></i> Data 13
</label>
<input type="text" id="node-config-input-data13" placeholder="Data 13">
</div>
<div class="form-row">
<label for="node-config-input-data14">
<i class="fa fa-database"></i> Data 14
</label>
<input type="text" id="node-config-input-data14" placeholder="Data 14">
</div>
<div class="form-row">
<label for="node-config-input-data15">
<i class="fa fa-database"></i> Data 15
</label>
<input type="text" id="node-config-input-data15" placeholder="Data 15">
</div>
</script>