grunig-nodes
Version:
Grünig Nodes Library
223 lines (206 loc) • 8.02 kB
HTML
<script type="text/javascript">
RED.nodes.registerType('MQTT-InfluxDB-Alarm', {
category: 'Grunig',
color: 'rgb(176, 223, 227)',
defaults: {
name: { value: "" },
topicPath: { value: "" },
typeDB: { 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-in.svg",
label: function() {
return this.name || "MQTT-InfluxDB-Alarm";
},
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.topicPath);
// Eingabefeld für den Typ
var typeInput = $("#node-config-input-type");
typeInput.val(node.typeDB);
// Ä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.topicPath = pathInput.val();
RED.nodes.dirty(true);
RED.nodes.node(node.id).changed = true;
});
// Änderungsereignis für den Typ
typeInput.on("change", function() {
node.typeDB = typeInput.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>
.red-ui-editor .form-row label, .red-ui-editor-dialog .form-row label {
width: 130px;
}
.red-ui-editor .form-row input, .red-ui-editor .form-row div[contenteditable=true], .red-ui-editor-dialog .form-row input, .red-ui-editor-dialog .form-row div[contenteditable=true] {
width: 60%;
}
div.form-row label {
width: 140px;
display: contents;
}
.form-row {
margin-bottom: 10px;
}
</style>
<script type="text/html" data-template-name="MQTT-InfluxDB-Alarm">
<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> 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-type">
<i class="fa fa-cogs"></i> Type
</label>
<input type="text" id="node-config-input-type" placeholder="Enter type">
</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>