mirror of
https://github.com/node-red/node-red.git
synced 2023-10-10 13:36:53 +02:00
* MQTT IN node tidy up * remove userProperties * remove subscriptionIdentifier * MQTT OUT node tidy up * remove topicAlias * remove payloadFormatIndicator * remove subscriptionIdentifier * MQTT BROKER node tidy up * remove topicAliasMaximum * remove maximumPacketSize * remove receiveMaximum * remove userProperties
784 lines
40 KiB
HTML
784 lines
40 KiB
HTML
<!--
|
||
Copyright JS Foundation and other contributors, http://js.foundation
|
||
Licensed under the Apache License, Version 2.0 (the "License");
|
||
you may not use this file except in compliance with the License.
|
||
You may obtain a copy of the License at
|
||
http://www.apache.org/licenses/LICENSE-2.0
|
||
Unless required by applicable law or agreed to in writing, software
|
||
distributed under the License is distributed on an "AS IS" BASIS,
|
||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||
See the License for the specific language governing permissions and
|
||
limitations under the License.
|
||
-->
|
||
<style>
|
||
.form-row label:first-child {
|
||
width: 125px;
|
||
}
|
||
|
||
.mqtt-form-row-cols2 > input.mqtt-form-row-col1 {
|
||
width: calc(35% - 75px);
|
||
}
|
||
.mqtt-form-row-cols2 > select.mqtt-form-row-col1 {
|
||
width: calc(35% - 75px);
|
||
}
|
||
|
||
.mqtt-form-row-cols2 > label.mqtt-form-row-col2 {
|
||
width: 100px;
|
||
margin-left: 42px;
|
||
display: inline-block;
|
||
}
|
||
.mqtt-form-row-cols2 > input.mqtt-form-row-col2 {
|
||
width: calc(35% - 75px);
|
||
display: inline-block;
|
||
}
|
||
.mqtt-form-row-cols2 > select.mqtt-form-row-col2 {
|
||
width: calc(35% - 75px);
|
||
display: inline-block;
|
||
}
|
||
|
||
.form-row.mqtt-flags-row > label {
|
||
vertical-align: top;
|
||
}
|
||
.form-row.mqtt-flags-row > .mqtt-flags {
|
||
display: inline-block;
|
||
width: 70%
|
||
}
|
||
|
||
.form-row.mqtt-flags-row > .mqtt-flags > .mqtt-flag > label {
|
||
display: block;
|
||
padding-left: 15px;
|
||
text-indent: -15px;
|
||
width: 70%;
|
||
}
|
||
.form-row.mqtt-flags-row > .mqtt-flags > .mqtt-flag > label > input {
|
||
position: relative;
|
||
vertical-align: bottom;
|
||
top: -2px;
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
</style>
|
||
|
||
<script type="text/html" data-template-name="mqtt in">
|
||
<div class="form-row">
|
||
<label for="node-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label>
|
||
<input type="text" id="node-input-broker">
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
||
<input type="text" id="node-input-topic" data-i18n="[placeholder]common.label.topic">
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="node-input-qos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
|
||
<select id="node-input-qos" style="width:125px !important">
|
||
<option value="0">0</option>
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="node-input-datatype"><i class="fa fa-sign-out"></i> <span data-i18n="mqtt.label.output"></span></label>
|
||
<select id="node-input-datatype" style="width:70%;">
|
||
<option value="auto" data-i18n="mqtt.output.auto"></option>
|
||
<option value="buffer" data-i18n="mqtt.output.buffer"></option>
|
||
<option value="utf8" data-i18n="mqtt.output.string"></option>
|
||
<option value="json" data-i18n="mqtt.output.json"></option>
|
||
<option value="base64" data-i18n="mqtt.output.base64"></option>
|
||
</select>
|
||
</div>
|
||
<!-- FUTURE
|
||
<div class="form-row mqtt5">
|
||
<label for="node-input-userProperties"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.userProperties"></span></label>
|
||
<input id="node-input-userPropertiesType" type="hidden">
|
||
<input type="text" id="node-input-userProperties" style="width: 70%;" data-i18n="[placeholder]mqtt.label.userProperties" placeholder="">
|
||
</div> -->
|
||
<!-- FUTURE
|
||
<div class="form-row mqtt5">
|
||
<label for="node-input-subscriptionIdentifier" class="mqtt-form-row-col1"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.subscriptionIdentifier"></span></label>
|
||
<input type="number" min="0" max="268435455" id="node-input-subscriptionIdentifier" class="mqtt-form-row-col1" >
|
||
</div> -->
|
||
<div class="form-row mqtt-flags-row mqtt5">
|
||
<label for="node-input-nl" ><i class="fa fa-flag"></i> <span data-i18n="mqtt.label.flags">Flags</span></label>
|
||
<div class="mqtt-flags">
|
||
<div class="mqtt-flag">
|
||
<label for="node-input-nl">
|
||
<input type="checkbox" id="node-input-nl">
|
||
<span data-i18n="mqtt.label.nl"></span>
|
||
</label>
|
||
</div>
|
||
<div class="mqtt-flag">
|
||
<label for="node-input-rap">
|
||
<input type="checkbox" id="node-input-rap">
|
||
<span data-i18n="mqtt.label.rap"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-row mqtt5">
|
||
<label for="node-input-rh" ><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.rh"></span></label>
|
||
<select id="node-input-rh" style="width:70%;">
|
||
<option value="0" data-i18n="mqtt.label.rh0"></option>
|
||
<option value="1" data-i18n="mqtt.label.rh1"></option>
|
||
<option value="2" data-i18n="mqtt.label.rh2"></option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
|
||
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
|
||
</div>
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
RED.nodes.registerType('mqtt in',{
|
||
category: 'network',
|
||
defaults: {
|
||
name: {value:""},
|
||
topic: {value:"",required:true,validate: RED.validators.regex(/^(#$|(\+|[^+#]*)(\/(\+|[^+#]*))*(\/(\+|#|[^+#]*))?$)/)},
|
||
qos: {value: "2"},
|
||
datatype: {value:"auto",required:true},
|
||
broker: {type:"mqtt-broker", required:true},
|
||
// userProperties: {value:"userProperties"},
|
||
// userPropertiesType: {value:"none"},
|
||
// subscriptionIdentifier: {value:0},
|
||
nl: {value:false},
|
||
rap: {value:true},
|
||
rh: {value:0},
|
||
},
|
||
color:"#d8bfd8",
|
||
inputs:0,
|
||
outputs:1,
|
||
icon: "bridge.svg",
|
||
label: function() {
|
||
return this.name||this.topic||"mqtt";
|
||
},
|
||
labelStyle: function() {
|
||
return this.name?"node_label_italic":"";
|
||
},
|
||
oneditprepare: function() {
|
||
$("#node-input-broker").change(function(d){
|
||
var confNode = RED.nodes.node($("#node-input-broker").val());
|
||
var v5 = confNode && confNode.protocolVersion == "5";
|
||
if(v5) {
|
||
$("div.form-row.mqtt5").show();
|
||
} else {
|
||
$("div.form-row.mqtt5").hide();
|
||
}
|
||
});
|
||
if (this.qos === undefined) {
|
||
$("#node-input-qos").val("2");
|
||
}
|
||
if (this.datatype === undefined) {
|
||
$("#node-input-datatype").val("auto");
|
||
}
|
||
// FUTURE
|
||
// $("#node-input-userProperties").typedInput({
|
||
// default: "none",
|
||
// types:[{ value: 'none', label: 'None', hasValue: false },'flow','global','json'],
|
||
// typeField: $("#node-input-userPropertiesType")
|
||
// });
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<script type="text/html" data-template-name="mqtt out">
|
||
<div class="form-row">
|
||
<label for="node-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label>
|
||
<input type="text" id="node-input-broker">
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="node-input-topic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
||
<input type="text" id="node-input-topic" data-i18n="[placeholder]common.label.topic">
|
||
</div>
|
||
|
||
<div class="form-row mqtt-form-row-cols2">
|
||
<label for="node-input-qos" class="mqtt-form-row-col1"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
|
||
<select id="node-input-qos" class="mqtt-form-row-col1">
|
||
<option value=""></option>
|
||
<option value="0">0</option>
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
</select>
|
||
|
||
<label for="node-input-retain" class="mqtt-form-row-col2"><i class="fa fa-history"></i> <span data-i18n="mqtt.retain"></span></label>
|
||
<select id="node-input-retain" class="mqtt-form-row-col2" >
|
||
<option value=""></option>
|
||
<option value="false" data-i18n="mqtt.false"></option>
|
||
<option value="true" data-i18n="mqtt.true"></option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row mqtt5">
|
||
<label for="node-input-userProperties"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.userProperties"></span></label>
|
||
<input id="node-input-userPropertiesType" type="hidden">
|
||
<input type="text" id="node-input-userProperties" style="width: 70%;" data-i18n="[placeholder]mqtt.label.userProperties" placeholder="">
|
||
</div>
|
||
<div class="form-row mqtt5">
|
||
<label for="node-input-responseTopic"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.responseTopic"></span></label>
|
||
<input id="node-input-responseTopicType" type="hidden">
|
||
<input type="text" id="node-input-responseTopic" style="width: 70%;" data-i18n="[placeholder]mqtt.label.responseTopic" placeholder="">
|
||
</div>
|
||
<div class="form-row mqtt5">
|
||
<label for="node-input-correlationData"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.correlationData"></span></label>
|
||
<input id="node-input-correlationDataType" type="hidden">
|
||
<input type="text" id="node-input-correlationData" style="width: 70%;" data-i18n="[placeholder]mqtt.label.correlationData" placeholder="">
|
||
</div>
|
||
<div class="form-row mqtt5">
|
||
<label for="node-input-contentType"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.contentType"></span></label>
|
||
<input id="node-input-contentTypeType" type="hidden">
|
||
<input type="text" id="node-input-contentType" style="width: 70%;" data-i18n="[placeholder]mqtt.label.contentType" placeholder="">
|
||
</div>
|
||
|
||
<div class="form-row mqtt-form-row-cols2 mqtt5">
|
||
<label for="node-input-messageExpiryInterval" class="mqtt-form-row-col1"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.messageExpiryInterval"></span></label>
|
||
<input id="node-input-messageExpiryIntervalType" type="hidden">
|
||
<input id="node-input-messageExpiryInterval" style="width: 70%;" class="mqtt-form-row-col1" >
|
||
|
||
<!-- FUTURE
|
||
<label for="node-input-topicAlias" class="mqtt-form-row-col2"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.topicAlias">Alias</span></label>
|
||
<input type="number" min="0" id="node-input-topicAlias" class="mqtt-form-row-col2" > -->
|
||
</div>
|
||
|
||
<!-- FUTURE
|
||
<div class="form-row mqtt-form-row-cols2 mqtt5">
|
||
<label for="node-input-subscriptionIdentifier" class="mqtt-form-row-col1"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.subscriptionIdentifier"></span></label>
|
||
<input type="number" min="0" max="268435455" id="node-input-subscriptionIdentifier" class="mqtt-form-row-col1" >
|
||
|
||
<label for="node-input-payloadFormatIndicator" class="mqtt-form-row-col2"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.payloadFormatIndicator"></span></label>
|
||
<select id="node-input-payloadFormatIndicator" class="mqtt-form-row-col2" >
|
||
<option value=""></option>
|
||
<option value="false" data-i18n="mqtt.label.payloadFormatIndicatorFalse"></option>
|
||
<option value="true" data-i18n="mqtt.label.payloadFormatIndicatorTrue"></option>
|
||
</select>
|
||
</div> -->
|
||
|
||
<div class="form-row">
|
||
<label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
|
||
<input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
|
||
</div>
|
||
<div class="form-tips"><span data-i18n="mqtt.tip"></span></div>
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
RED.nodes.registerType('mqtt out',{
|
||
category: 'network',
|
||
defaults: {
|
||
name: {value:""},
|
||
topic: {value:""},
|
||
qos: {value:""},
|
||
retain: {value:""},
|
||
responseTopic: {value:"responseTopic"},
|
||
responseTopicType: {value:'none'},
|
||
contentType: {value:"contentType"},
|
||
contentTypeType: {value:'none'},
|
||
userProperties: {value:'userProperties'},
|
||
userPropertiesType: {value:'none'},
|
||
correlationData: {value:'correlationData'},
|
||
correlationDataType: {value:'none'},
|
||
messageExpiryInterval: {value:"messageExpiryInterval"},
|
||
messageExpiryIntervalType: {value:'none'},
|
||
// FUTURE topicAlias: {value:0},
|
||
// FUTURE payloadFormatIndicator: {value:false},
|
||
// FUTURE subscriptionIdentifier: {value:0},
|
||
broker: {type:"mqtt-broker", required:true}
|
||
},
|
||
color:"#d8bfd8",
|
||
inputs:1,
|
||
outputs:0,
|
||
icon: "bridge.svg",
|
||
align: "right",
|
||
label: function() {
|
||
return this.name||this.topic||"mqtt";
|
||
// FUTURE return this.name||this.topic||(this.topicAlias ? "@"+this.topicAlias : "mqtt");
|
||
},
|
||
oneditprepare: function() {
|
||
var typedInputNoneOpt = { value: 'none', label: 'None', hasValue: false };
|
||
|
||
function showHideDynamicFields() {
|
||
var confNode = RED.nodes.node($("#node-input-broker").val());
|
||
var v5 = confNode && confNode.protocolVersion == "5";
|
||
if(v5) {
|
||
$("div.form-row.mqtt5").show();
|
||
} else {
|
||
$("div.form-row.mqtt5").hide();
|
||
}
|
||
var t = $("#node-input-responseTopic").typedInput("type");
|
||
if (t == 'none') {
|
||
$("#node-input-correlationData").parent().hide();
|
||
} else {
|
||
$("#node-input-correlationData").parent().show();
|
||
}
|
||
}
|
||
|
||
$("#node-input-broker").change(function(d){
|
||
showHideDynamicFields();
|
||
});
|
||
|
||
var responseTopicTI = $("#node-input-responseTopic").typedInput({
|
||
default: 'none',
|
||
types: [typedInputNoneOpt, 'msg', 'flow', 'global', 'str'],
|
||
typeField: $("#node-input-responseTopicType")
|
||
});
|
||
|
||
var correlationDataTI = $("#node-input-correlationData").typedInput({
|
||
default: 'none',
|
||
types: [typedInputNoneOpt, 'msg', 'flow', 'global', 'bin'],
|
||
typeField: $("#node-input-correlationDataType")
|
||
});
|
||
//show / hide correlation data depending on responseTopic
|
||
responseTopicTI.on("change", function() {
|
||
showHideDynamicFields();
|
||
});
|
||
responseTopicTI.triggerHandler("change");
|
||
|
||
$("#node-input-userProperties").typedInput({
|
||
default: 'none',
|
||
types: [typedInputNoneOpt, 'msg', 'flow', 'global', 'json'],
|
||
typeField: $("#node-input-userPropertiesType")
|
||
});
|
||
|
||
$("#node-input-messageExpiryInterval").typedInput({
|
||
default: 'none',
|
||
types: [typedInputNoneOpt, 'msg', 'flow', 'global', 'num'],
|
||
typeField: $("#node-input-messageExpiryIntervalType")
|
||
});
|
||
|
||
var makeTypedInputOpt = function(value, label, tooltip){
|
||
return {
|
||
label: label,
|
||
value: value || label,
|
||
title: tooltip,
|
||
multiple: true
|
||
}
|
||
}
|
||
//TODO: i18n
|
||
var commonOpts = [
|
||
makeTypedInputOpt("application/gzip", "application/gzip", "GZip Compressed Archive"),
|
||
makeTypedInputOpt("application/json", "application/json", "JSON format"),
|
||
makeTypedInputOpt("application/octet-stream", "application/octet-stream", "Any kind of binary data"),
|
||
makeTypedInputOpt("application/ogg", "application/ogg", "OGG"),
|
||
makeTypedInputOpt("application/pdf", "application/pdf", "Adobe Portable Document Format (PDF)"),
|
||
makeTypedInputOpt("application/zip", "application/zip", "ZIP archive"),
|
||
makeTypedInputOpt("audio/aac", "audio/aac", "AAC audio"),
|
||
makeTypedInputOpt("audio/midi", "audio/midi", "Musical Instrument Digital Interface (MIDI)"),
|
||
makeTypedInputOpt("audio/x-midi", "audio/x-midi", "Musical Instrument Digital Interface (MIDI)"),
|
||
makeTypedInputOpt("audio/mpeg", "audio/mpeg", "MP3 audio"),
|
||
makeTypedInputOpt("audio/ogg", "audio/ogg", "OGG audio"),
|
||
makeTypedInputOpt("audio/wav", "audio/wav", "Waveform Audio Format"),
|
||
makeTypedInputOpt("audio/webm", "audio/webm", "WEBM audio"),
|
||
makeTypedInputOpt("image/bmp", "image/bmp", "Windows OS/2 Bitmap Graphics"),
|
||
makeTypedInputOpt("image/gif", "image/gif", "Graphics Interchange Format (GIF)"),
|
||
makeTypedInputOpt("image/jpeg", "image/jpeg", "JPEG images"),
|
||
makeTypedInputOpt("image/png", "image/png", "Portable Network Graphics"),
|
||
makeTypedInputOpt("image/tiff", "image/tiff", "Tagged Image File Format (TIFF)"),
|
||
makeTypedInputOpt("image/webp", "image/webp", "WEBP image"),
|
||
makeTypedInputOpt("text/csv", "text/csv", "Comma-separated values (CSV)"),
|
||
makeTypedInputOpt("text/html", "text/html", "HyperText Markup Language (HTML)"),
|
||
makeTypedInputOpt("text/plain", "text/plain", "Text, (generally ASCII or ISO 8859-n)"),
|
||
makeTypedInputOpt("video/mpeg", "video/mpeg", "MPEG Video"),
|
||
makeTypedInputOpt("video/ogg", "video/ogg", "OGG video"),
|
||
makeTypedInputOpt("video/webm", "video/webm", "WEBM video"),
|
||
];
|
||
$("#node-input-contentType").typedInput({
|
||
default: 'none',
|
||
types: [
|
||
typedInputNoneOpt,
|
||
{
|
||
value: "preset",
|
||
label: "Preset",
|
||
title: "Preset Content-Types",
|
||
icon: "fa fa-list",
|
||
showLabel: false,
|
||
multiple: false,
|
||
options: commonOpts,
|
||
default: "application/json"
|
||
}, 'msg', 'flow', 'global', 'str'],
|
||
typeField: $("#node-input-contentTypeType")
|
||
});
|
||
},
|
||
labelStyle: function() {
|
||
return this.name?"node_label_italic":"";
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<script type="text/html" data-template-name="mqtt-broker">
|
||
<div class="form-row">
|
||
<label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
|
||
<input type="text" id="node-config-input-name" data-i18n="[placeholder]common.label.name">
|
||
</div>
|
||
<div class="form-row">
|
||
<ul style="min-width: 600px; margin-bottom: 20px;" id="node-config-mqtt-broker-tabs"></ul>
|
||
</div>
|
||
<div id="node-config-mqtt-broker-tabs-content" style="min-height:150px;">
|
||
<div id="mqtt-broker-tab-connection" style="display:none">
|
||
<div class="form-row node-input-broker">
|
||
<label for="node-config-input-broker"><i class="fa fa-globe"></i> <span data-i18n="mqtt.label.broker"></span></label>
|
||
<input type="text" id="node-config-input-broker" style="width:40%;" data-i18n="[placeholder]mqtt.label.example">
|
||
<label for="node-config-input-port" style="margin-left:20px; width:43px; "> <span data-i18n="mqtt.label.port"></span></label>
|
||
<input type="text" id="node-config-input-port" data-i18n="[placeholder]mqtt.label.port" style="width:55px">
|
||
</div>
|
||
<div class="form-row">
|
||
<input type="checkbox" id="node-config-input-usetls" style="display: inline-block; width: auto; vertical-align: top;">
|
||
<label for="node-config-input-usetls" style="width: auto" data-i18n="mqtt.label.use-tls"></label>
|
||
<div id="node-config-row-tls" class="hide">
|
||
<label style="width: auto; margin-left: 20px; margin-right: 10px;" for="node-config-input-tls"><span data-i18n="mqtt.label.tls-config"></span></label><input style="width: 300px;" type="text" id="node-config-input-tls">
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="node-config-input-clientid"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.clientid"></span></label>
|
||
<input type="text" id="node-config-input-clientid" data-i18n="[placeholder]mqtt.placeholder.clientid">
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="node-config-input-keepalive" style="width: auto"><i class="fa fa-clock-o"></i> <span data-i18n="mqtt.label.keepalive"></span></label>
|
||
<input type="text" id="node-config-input-keepalive" style="width: 50px">
|
||
</div>
|
||
<div class="form-row mqtt-form-row-cols2">
|
||
<label for="node-config-input-cleansession" class="mqtt-form-row-col1"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.session"></span>Session</label>
|
||
<div class="mqtt-flag mqtt-form-row-col1" style="display: inline-block;width: calc(35% - 75px);">
|
||
<label for="node-config-input-cleansession" style="display: block; padding-left: 15px; text-indent: -15px;">
|
||
<input type="checkbox" id="node-config-input-cleansession" style="position: relative;vertical-align: bottom; top: -2px; width: 15px;height: 15px;">
|
||
<span data-i18n="mqtt.label.cleansession"></span>
|
||
</label>
|
||
</div>
|
||
<label for="node-config-input-sessionExpiryInterval" class="mqtt-form-row-col2 mqtt5 sessionExpiryInterval"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.sessionExpiryInterval"></span></label>
|
||
<input type="number" min="0" id="node-config-input-sessionExpiryInterval" class="mqtt-form-row-col2 mqtt5 sessionExpiryInterval" >
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="node-config-input-protocolVersion"><i class="fa fa-cog"></i> <span data-i18n="mqtt.label.protocolVersion"></span></label>
|
||
<select id="node-config-input-protocolVersion" style="width:70%;">
|
||
<option value="3" data-i18n="mqtt.label.protocolVersion3"></option>
|
||
<option value="4" data-i18n="mqtt.label.protocolVersion4"></option>
|
||
<option value="5" data-i18n="mqtt.label.protocolVersion5"></option>
|
||
</select>
|
||
</div>
|
||
<!-- FUTURE
|
||
<div class="form-row mqtt5">
|
||
<label for="node-config-input-userProperties"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.userProperties"></span></label>
|
||
<input id="node-config-input-userPropertiesType" type="hidden">
|
||
<input type="text" id="node-config-input-userProperties" style="width: 70%;" data-i18n="[placeholder]mqtt.label.userProperties" placeholder="">
|
||
</div>
|
||
<div class="form-row mqtt5">
|
||
<label for="node-config-input-topicAliasMaximum"><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.topicAliasMaximum"></span></label>
|
||
<input type="number" min="0" id="node-config-input-topicAliasMaximum">
|
||
</div>
|
||
<div class="form-row mqtt5">
|
||
<label for="node-config-input-maximumPacketSize" ><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.maximumPacketSize"></span></label>
|
||
<input type="number" min="0" id="node-config-input-maximumPacketSize">
|
||
</div>
|
||
<div class="form-row mqtt5">
|
||
<label for="node-config-input-receiveMaximum" ><i class="fa fa-tag"></i> <span data-i18n="mqtt.label.receiveMaximum"></span></label>
|
||
<input type="number" min="0" id="node-config-input-receiveMaximum">
|
||
</div> -->
|
||
</div>
|
||
<div id="mqtt-broker-tab-security" style="display:none">
|
||
<div class="form-row">
|
||
<label for="node-config-input-user"><i class="fa fa-user"></i> <span data-i18n="common.label.username"></span></label>
|
||
<input type="text" id="node-config-input-user">
|
||
</div>
|
||
<div class="form-row">
|
||
<label for="node-config-input-password"><i class="fa fa-lock"></i> <span data-i18n="common.label.password"></span></label>
|
||
<input type="password" id="node-config-input-password">
|
||
</div>
|
||
</div>
|
||
<div id="mqtt-broker-tab-messages" style="display:none">
|
||
<div id="mqtt-broker-section-birth">
|
||
<div class="red-ui-palette-header">
|
||
<i class="fa fa-angle-down"></i><span data-i18n="mqtt.sections-label.birth-message"></span>
|
||
</div>
|
||
<div class="section-content" style="padding:10px 0 0 10px">
|
||
<div class="form-row">
|
||
<label style="width: 100px !important;" for="node-config-input-birthTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
||
<input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-birthTopic" data-i18n="[placeholder]mqtt.placeholder.birth-topic">
|
||
<label style="margin-left: 10px; width: 90px !important;" for="node-config-input-birthRetain"><i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span></label>
|
||
<select id="node-config-input-birthRetain" style="width:75px !important">
|
||
<option value="false" data-i18n="mqtt.false"></option>
|
||
<option value="true" data-i18n="mqtt.true"></option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label style="width: 100px !important;" for="node-config-input-birthPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
|
||
<input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-birthPayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
|
||
<label style="margin-left: 10px; width: 90px !important;" for="node-config-input-birthQos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
|
||
<select id="node-config-input-birthQos" style="width:75px !important">
|
||
<option value="0">0</option>
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="mqtt-broker-section-close">
|
||
<div class="red-ui-palette-header">
|
||
<i class="fa fa-angle-down"></i><span data-i18n="mqtt.sections-label.close-message"></span>
|
||
</div>
|
||
<div class="section-content" style="padding:10px 0 0 10px">
|
||
<div class="form-row">
|
||
<label style="width: 100px !important;" for="node-config-input-closeTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
||
<input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-closeTopic" style="width:300px" data-i18n="[placeholder]mqtt.placeholder.close-topic">
|
||
<label style="margin-left: 10px; width: 90px !important;" for="node-config-input-closeRetain"><i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span></label>
|
||
<select id="node-config-input-closeRetain" style="width:75px !important">
|
||
<option value="false" data-i18n="mqtt.false"></option>
|
||
<option value="true" data-i18n="mqtt.true"></option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label style="width: 100px !important;" for="node-config-input-closePayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
|
||
<input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-closePayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
|
||
<label style="margin-left: 10px; width: 90px !important;" for="node-config-input-closeQos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
|
||
<select id="node-config-input-closeQos" style="width:75px !important">
|
||
<option value="0">0</option>
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="mqtt-broker-section-will">
|
||
<div class="red-ui-palette-header">
|
||
<i class="fa fa-angle-down"></i><span data-i18n="mqtt.sections-label.will-message"></span>
|
||
</div>
|
||
<div class="section-content" style="padding:10px 0 0 10px">
|
||
<div class="form-row">
|
||
<label style="width: 100px !important;" for="node-config-input-willTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
|
||
<input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-willTopic" style="width:300px" data-i18n="[placeholder]mqtt.placeholder.will-topic">
|
||
<label style="margin-left: 10px; width: 90px !important;" for="node-config-input-willRetain"><i class="fa fa-history"></i> <span data-i18n="mqtt.label.retain"></span></label>
|
||
<select id="node-config-input-willRetain" style="width:75px !important">
|
||
<option value="false" data-i18n="mqtt.false"></option>
|
||
<option value="true" data-i18n="mqtt.true"></option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<label style="width: 100px !important;" for="node-config-input-willPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
|
||
<input style="width: calc(100% - 300px) !important" type="text" id="node-config-input-willPayload" style="width:300px" data-i18n="[placeholder]common.label.payload">
|
||
<label style="margin-left: 10px; width: 90px !important;" for="node-config-input-willQos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label>
|
||
<select id="node-config-input-willQos" style="width:75px !important">
|
||
<option value="0">0</option>
|
||
<option value="1">1</option>
|
||
<option value="2">2</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</script>
|
||
|
||
<script type="text/javascript">
|
||
RED.nodes.registerType('mqtt-broker',{
|
||
category: 'config',
|
||
defaults: {
|
||
name: {value:""},
|
||
broker: {value:"",required:true},
|
||
port: {value:1883,required:false,validate:RED.validators.number(true)},
|
||
tls: {type:"tls-config",required: false},
|
||
clientid: {value:"", validate: function(v) {
|
||
if ($("#node-config-input-clientid").length) {
|
||
// Currently editing the node
|
||
return $("#node-config-input-cleansession").is(":checked") || (v||"").length > 0;
|
||
} else {
|
||
return (this.cleansession===undefined || this.cleansession) || (v||"").length > 0;
|
||
}
|
||
}},
|
||
usetls: {value: false},
|
||
verifyservercert: { value: false},
|
||
compatmode: { value: false},
|
||
protocolVersion: { value: 4},
|
||
keepalive: {value:60,validate:RED.validators.number()},
|
||
cleansession: {value: true},
|
||
birthTopic: {value:""},
|
||
birthQos: {value:"0"},
|
||
birthRetain: {value:false},
|
||
birthPayload: {value:""},
|
||
closeTopic: {value:""},
|
||
closeQos: {value:"0"},
|
||
closeRetain: {value:false},
|
||
closePayload: {value:""},
|
||
willTopic: {value:""},
|
||
willQos: {value:"0"},
|
||
willRetain: {value:false},
|
||
willPayload: {value:""},
|
||
sessionExpiryInterval: {value:0},
|
||
// FUTURE topicAliasMaximum: {value:0},
|
||
// FUTURE maximumPacketSize: {value:0},
|
||
// FUTURE receiveMaximum: {value:0},
|
||
// FUTURE userPropertiesType: {value:"json"},
|
||
// FUTURE userProperties: {value:"{}"},
|
||
},
|
||
credentials: {
|
||
user: {type:"text"},
|
||
password: {type: "password"}
|
||
},
|
||
label: function() {
|
||
if (this.name) {
|
||
return this.name;
|
||
}
|
||
var b = this.broker;
|
||
if (!b) { b = "undefined"; }
|
||
var lab = "";
|
||
lab = (this.clientid?this.clientid+"@":"")+b;
|
||
if (b.indexOf("://") === -1){
|
||
if (!this.port){ lab = lab + ":1883"; }
|
||
else { lab = lab + ":" + this.port; }
|
||
}
|
||
return lab;
|
||
},
|
||
oneditprepare: function () {
|
||
var tabs = RED.tabs.create({
|
||
id: "node-config-mqtt-broker-tabs",
|
||
onchange: function(tab) {
|
||
$("#node-config-mqtt-broker-tabs-content").children().hide();
|
||
$("#" + tab.id).show();
|
||
}
|
||
});
|
||
tabs.addTab({
|
||
id: "mqtt-broker-tab-connection",
|
||
label: this._("mqtt.tabs-label.connection")
|
||
});
|
||
tabs.addTab({
|
||
id: "mqtt-broker-tab-security",
|
||
label: this._("mqtt.tabs-label.security")
|
||
});
|
||
|
||
tabs.addTab({
|
||
id: "mqtt-broker-tab-messages",
|
||
label: this._("mqtt.tabs-label.messages")
|
||
});
|
||
|
||
function setUpSection(sectionId, isExpanded) {
|
||
var birthMessageSection = $(sectionId);
|
||
var paletteHeader = birthMessageSection.find('.red-ui-palette-header');
|
||
var twistie = paletteHeader.find('i');
|
||
var sectionContent = birthMessageSection.find('.section-content');
|
||
|
||
function toggleSection(expanded) {
|
||
twistie.toggleClass('expanded', expanded);
|
||
sectionContent.toggle(expanded);
|
||
}
|
||
paletteHeader.on("click", function(e) {
|
||
e.preventDefault();
|
||
var isExpanded = twistie.hasClass('expanded');
|
||
toggleSection(!isExpanded);
|
||
});
|
||
toggleSection(isExpanded);
|
||
}
|
||
|
||
// show first section if none are set so the user gets the idea
|
||
var showBirthSection = this.birthTopic !== ""
|
||
|| this.willTopic === ""
|
||
&& this.birthTopic === ""
|
||
&& this.closeTopic == "";
|
||
setUpSection('#mqtt-broker-section-birth', showBirthSection);
|
||
setUpSection('#mqtt-broker-section-close', this.closeTopic !== "");
|
||
setUpSection('#mqtt-broker-section-will', this.willTopic !== "");
|
||
|
||
setTimeout(function() { tabs.resize(); },0);
|
||
if (typeof this.cleansession === 'undefined') {
|
||
this.cleansession = true;
|
||
$("#node-config-input-cleansession").prop("checked",true);
|
||
}
|
||
if (typeof this.usetls === 'undefined') {
|
||
this.usetls = false;
|
||
$("#node-config-input-usetls").prop("checked",false);
|
||
}
|
||
if (this.compatmode === 'true' || this.compatmode === true) {
|
||
delete this.compatmode;
|
||
this.protocolVersion = 4;
|
||
}
|
||
if (typeof this.protocolVersion === 'undefined') {
|
||
this.protocolVersion = 4;
|
||
}
|
||
function updateSessionExpiryIntervalVisibility() {
|
||
var hide = ($("#node-config-input-cleansession").is(":checked") || $("#node-config-input-protocolVersion").val() != "5");
|
||
if(hide) {
|
||
$(".sessionExpiryInterval").hide();
|
||
} else {
|
||
$(".sessionExpiryInterval").show();
|
||
}
|
||
}
|
||
$("#node-config-input-protocolVersion").change(function(){
|
||
var v5 = $("#node-config-input-protocolVersion").val() == "5";
|
||
if(v5) {
|
||
$("div.form-row.mqtt5").show();
|
||
} else {
|
||
$("div.form-row.mqtt5").hide();
|
||
}
|
||
updateSessionExpiryIntervalVisibility();
|
||
});
|
||
$("#node-config-input-protocolVersion").val(this.protocolVersion);
|
||
// FUTURE
|
||
// $("#node-config-input-userProperties").typedInput({
|
||
// default: "json",
|
||
// types:['json'],
|
||
// typeField: $("#node-config-input-userPropertiesType")
|
||
// });
|
||
if (typeof this.keepalive === 'undefined') {
|
||
this.keepalive = 15;
|
||
$("#node-config-input-keepalive").val(this.keepalive);
|
||
}
|
||
if (typeof this.birthQos === 'undefined') {
|
||
this.birthQos = "0";
|
||
$("#node-config-input-birthQos").val("0");
|
||
}
|
||
if (typeof this.closeQos === 'undefined') {
|
||
this.willQos = "0";
|
||
$("#node-config-input-willQos").val("0");
|
||
}
|
||
if (typeof this.willQos === 'undefined') {
|
||
this.willQos = "0";
|
||
$("#node-config-input-willQos").val("0");
|
||
}
|
||
|
||
function updateTLSOptions() {
|
||
if ($("#node-config-input-usetls").is(':checked')) {
|
||
$("#node-config-row-tls").show();
|
||
} else {
|
||
$("#node-config-row-tls").hide();
|
||
}
|
||
}
|
||
updateTLSOptions();
|
||
$("#node-config-input-usetls").on("click",function() {
|
||
updateTLSOptions();
|
||
});
|
||
var node = this;
|
||
function updateClientId() {
|
||
if ($("#node-config-input-cleansession").is(":checked")) {
|
||
$("#node-config-input-clientid").attr("placeholder",node._("mqtt.placeholder.clientid"));
|
||
} else {
|
||
$("#node-config-input-clientid").attr("placeholder",node._("mqtt.placeholder.clientid-nonclean"));
|
||
}
|
||
updateSessionExpiryIntervalVisibility();
|
||
$("#node-config-input-clientid").change();
|
||
}
|
||
setTimeout(updateClientId,0);
|
||
$("#node-config-input-cleansession").on("click",function() {
|
||
updateClientId();
|
||
});
|
||
|
||
function updatePortEntry(){
|
||
var disabled = $("#node-config-input-port").prop("disabled");
|
||
if ($("#node-config-input-broker").val().indexOf("://") === -1){
|
||
if (disabled){
|
||
$("#node-config-input-port").prop("disabled", false);
|
||
}
|
||
}
|
||
else {
|
||
if (!disabled){
|
||
$("#node-config-input-port").prop("disabled", true);
|
||
}
|
||
}
|
||
}
|
||
$("#node-config-input-broker").on("change", function() {
|
||
updatePortEntry();
|
||
});
|
||
$("#node-config-input-broker").on( "keyup", function() {
|
||
updatePortEntry();
|
||
});
|
||
setTimeout(updatePortEntry,50);
|
||
|
||
},
|
||
oneditsave: function() {
|
||
if (!$("#node-config-input-usetls").is(':checked')) {
|
||
$("#node-config-input-tls").val("");
|
||
}
|
||
}
|
||
});
|
||
</script> |