frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

experiments with mqtt ui (wip)

This commit is contained in:
mblackstock 2018-05-02 15:15:58 -07:00
parent ae4b1b17a9
commit f478d7c9f0
2 changed files with 139 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

181
nodes/core/io/10-mqtt.html
View File

@ -212,48 +212,89 @@
<input type="password" id="node-config-input-password"> <input type="password" id="node-config-input-password">
</div> </div>
</div> </div>
<div id="mqtt-broker-tab-birth" style="display:none"> <div id="mqtt-broker-tab-messages" style="display:none">
<div class="form-row"> <div id="mqtt-broker-section-birth">
<label for="node-config-input-birthTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label> <div class="palette-header">
<input type="text" id="node-config-input-birthTopic" data-i18n="[placeholder]mqtt.placeholder.birth-topic"> <i class="fa fa-angle-down expanded"></i><span>Message sent on connection (birth message)</span>
</div>
<div class="section-content" style="padding: 12px">
<div class="form-row">
<label for="node-config-input-birthTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
<input type="text" id="node-config-input-birthTopic" data-i18n="[placeholder]mqtt.placeholder.birth-topic">
</div>
<div class="form-row">
<label 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:125px !important">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
&nbsp;&nbsp;<i class="fa fa-history"></i>&nbsp;<span data-i18n="mqtt.retain"></span> &nbsp;<select id="node-config-input-birthRetain" style="width:125px !important">
<option value="false" data-i18n="mqtt.false"></option>
<option value="true" data-i18n="mqtt.true"></option>
</select>
</div>
<div class="form-row">
<label for="node-config-input-birthPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
<input type="text" id="node-config-input-birthPayload" data-i18n="[placeholder]common.label.payload">
</div>
</div>
</div> </div>
<div class="form-row"> <div id="mqtt-broker-section-will">
<label for="node-config-input-birthQos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label> <div class="palette-header">
<select id="node-config-input-birthQos" style="width:125px !important"> <i class="fa fa-angle-down expanded"></i><span>Message sent on an unexpected disconnection (will message)</span>
<option value="0">0</option> </div>
<option value="1">1</option> <div class="section-content" style="padding: 12px">
<option value="2">2</option> <div class="form-row">
</select> <label for="node-config-input-willTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
&nbsp;&nbsp;<i class="fa fa-history"></i>&nbsp;<span data-i18n="mqtt.retain"></span> &nbsp;<select id="node-config-input-birthRetain" style="width:125px !important"> <input type="text" id="node-config-input-willTopic" data-i18n="[placeholder]mqtt.placeholder.will-topic">
<option value="false" data-i18n="mqtt.false"></option> </div>
<option value="true" data-i18n="mqtt.true"></option> <div class="form-row">
</select> <label 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:125px !important">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
&nbsp;&nbsp;<i class="fa fa-history"></i>&nbsp;<span data-i18n="mqtt.retain"></span> &nbsp;<select id="node-config-input-willRetain" style="width:125px !important">
<option value="false" data-i18n="mqtt.false"></option>
<option value="true" data-i18n="mqtt.true"></option>
</select>
</div>
<div class="form-row">
<label for="node-config-input-willPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
<input type="text" id="node-config-input-willPayload" data-i18n="[placeholder]common.label.payload">
</div>
</div>
</div> </div>
<div class="form-row"> <div id="mqtt-broker-section-close">
<label for="node-config-input-birthPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label> <div class="palette-header">
<input type="text" id="node-config-input-birthPayload" data-i18n="[placeholder]common.label.payload"> <i class="fa fa-angle-down"></i><span>Message sent before disconnecting (close message)</span>
</div> </div>
</div> <div class="section-content" style="padding: 12px; display:none">
<div id="mqtt-broker-tab-will" style="display:none"> <div style="padding: 12px;">
<div class="form-row"> <div class="form-row">
<label for="node-config-input-willTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label> <label for="node-config-input-willTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
<input type="text" id="node-config-input-willTopic" data-i18n="[placeholder]mqtt.placeholder.will-topic"> <input type="text" id="node-config-input-willTopic" data-i18n="[placeholder]mqtt.placeholder.will-topic">
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-config-input-willQos"><i class="fa fa-empire"></i> <span data-i18n="mqtt.label.qos"></span></label> <label 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:125px !important"> <select id="node-config-input-willQos" style="width:125px !important">
<option value="0">0</option> <option value="0">0</option>
<option value="1">1</option> <option value="1">1</option>
<option value="2">2</option> <option value="2">2</option>
</select> </select>
&nbsp;&nbsp;<i class="fa fa-history"></i>&nbsp;<span data-i18n="mqtt.retain"></span> &nbsp;<select id="node-config-input-willRetain" style="width:125px !important"> &nbsp;&nbsp;<i class="fa fa-history"></i>&nbsp;<span data-i18n="mqtt.retain"></span> &nbsp;<select id="node-config-input-willRetain" style="width:125px !important">
<option value="false" data-i18n="mqtt.false"></option> <option value="false" data-i18n="mqtt.false"></option>
<option value="true" data-i18n="mqtt.true"></option> <option value="true" data-i18n="mqtt.true"></option>
</select> </select>
</div> </div>
<div class="form-row"> <div class="form-row">
<label for="node-config-input-willPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label> <label for="node-config-input-willPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
<input type="text" id="node-config-input-willPayload" data-i18n="[placeholder]common.label.payload"> <input type="text" id="node-config-input-willPayload" data-i18n="[placeholder]common.label.payload">
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -279,6 +320,29 @@
</script> </script>
<script type="text/x-red" data-template-name="mqtt-broker-section-birth">
<div class="form-row">
<label for="node-config-input-birthTopic"><i class="fa fa-tasks"></i> <span data-i18n="common.label.topic"></span></label>
<input type="text" id="node-config-input-birthTopic" data-i18n="[placeholder]mqtt.placeholder.birth-topic">
</div>
<div class="form-row">
<label 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:125px !important">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
&nbsp;&nbsp;<i class="fa fa-history"></i>&nbsp;<span data-i18n="mqtt.retain"></span> &nbsp;<select id="node-config-input-birthRetain" style="width:125px !important">
<option value="false" data-i18n="mqtt.false"></option>
<option value="true" data-i18n="mqtt.true"></option>
</select>
</div>
<div class="form-row">
<label for="node-config-input-birthPayload"><i class="fa fa-envelope"></i> <span data-i18n="common.label.payload"></span></label>
<input type="text" id="node-config-input-birthPayload" data-i18n="[placeholder]common.label.payload">
</div>
</script>
<script type="text/javascript"> <script type="text/javascript">
RED.nodes.registerType('mqtt-broker',{ RED.nodes.registerType('mqtt-broker',{
category: 'config', category: 'config',
@ -307,7 +371,11 @@
birthTopic: {value:""}, birthTopic: {value:""},
birthQos: {value:"0"}, birthQos: {value:"0"},
birthRetain: {value:false}, birthRetain: {value:false},
birthPayload: {value:""} birthPayload: {value:""},
closeTopic: {value:""},
closeTopic: {value:"0"},
closeTopic: {value:false},
closeTopic: {value:""}
}, },
credentials: { credentials: {
user: {type:"text"}, user: {type:"text"},
@ -343,14 +411,29 @@
id: "mqtt-broker-tab-security", id: "mqtt-broker-tab-security",
label: this._("mqtt.tabs-label.security") label: this._("mqtt.tabs-label.security")
}); });
tabs.addTab({ tabs.addTab({
id: "mqtt-broker-tab-birth", id: "mqtt-broker-tab-messages",
label: this._("mqtt.tabs-label.birth") label: this._("mqtt.tabs-label.messages")
});
tabs.addTab({
id: "mqtt-broker-tab-will",
label: this._("mqtt.tabs-label.will")
}); });
function setUpSection(sectionId) {
var birthMessageSection = $(sectionId);
var paletteHeader = birthMessageSection.find('.palette-header');
var sectionContent = birthMessageSection.find('.section-content');
paletteHeader.click(function(e) {
e.preventDefault();
var twistie = $(this).find('i');
var isExpanded = twistie.hasClass('expanded');
sectionContent.toggle(!isExpanded);
twistie.toggleClass('expanded',!isExpanded);
});
}
setUpSection('#mqtt-broker-section-birth');
setUpSection('#mqtt-broker-section-will');
setUpSection('#mqtt-broker-section-close');
setTimeout(function() { tabs.resize(); },0); setTimeout(function() { tabs.resize(); },0);
if (typeof this.cleansession === 'undefined') { if (typeof this.cleansession === 'undefined') {
this.cleansession = true; this.cleansession = true;
@ -376,6 +459,10 @@
this.birthQos = "0"; this.birthQos = "0";
$("#node-config-input-birthQos").val("0"); $("#node-config-input-birthQos").val("0");
} }
if (typeof this.closeQos === 'undefined') {
this.willQos = "0";
$("#node-config-input-willQos").val("0");
}
function updateTLSOptions() { function updateTLSOptions() {
if ($("#node-config-input-usetls").is(':checked')) { if ($("#node-config-input-usetls").is(':checked')) {

10
nodes/core/locales/en-US/messages.json
View File

@ -335,24 +335,24 @@
"tabs-label": { "tabs-label": {
"connection": "Connection", "connection": "Connection",
"security": "Security", "security": "Security",
"will": "Will Message", "messages": "Messages"
"birth": "Birth Message"
}, },
"placeholder": { "placeholder": {
"clientid": "Leave blank for auto generated", "clientid": "Leave blank for auto generated",
"clientid-nonclean":"Must be set for non-clean sessions", "clientid-nonclean":"Must be set for non-clean sessions",
"will-topic": "Leave blank to disable will message", "will-topic": "Leave blank to disable will message",
"birth-topic": "Leave blank to disable birth message" "birth-topic": "Leave blank to disable birth message",
"close-topic": "Leave blank to use the will message on close"
}, },
"state": { "state": {
"connected": "Connected to broker: __broker__", "connected": "Connected to broker: __broker__",
"disconnected": "Disconnected from broker: __broker__", "disconnected": "Disconnected from broker: __broker__",
"connect-failed": "Connection failed to broker: __broker__" "connect-failed": "Connection failed to broker: __broker__"
}, },
"retain": "Retain", "": "",
"true": "true", "true": "true",
"false": "false", "false": "false",
"tip": "Tip: Leave topic, qos or retain blank if you want to set them via msg properties.", "tip": "Tip: Leave topic, qos or blank if you want to set them via msg properties.",
"errors": { "errors": {
"not-defined": "topic not defined", "not-defined": "topic not defined",
"missing-config": "missing broker configuration", "missing-config": "missing broker configuration",