experiments with mqtt ui (wip)

nodes/core/io/10-mqtt.html

@@ -212,7 +212,12 @@
                 <input type="password" id="node-config-input-password">
             </div>
         </div>
-        <div id="mqtt-broker-tab-birth" style="display:none">
+        <div id="mqtt-broker-tab-messages" style="display:none">
+            <div id="mqtt-broker-section-birth">
+                <div class="palette-header">
+                    <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">
@@ -234,7 +239,12 @@
                         <input type="text" id="node-config-input-birthPayload" data-i18n="[placeholder]common.label.payload">
                     </div>
                 </div>
-        <div id="mqtt-broker-tab-will" style="display:none">
+            </div>
+            <div id="mqtt-broker-section-will">
+                <div class="palette-header">
+                    <i class="fa fa-angle-down expanded"></i><span>Message sent on an unexpected disconnection (will message)</span>
+                </div>
+                <div class="section-content" style="padding: 12px">
                     <div class="form-row">
                         <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">
@@ -257,6 +267,37 @@
                     </div>
                 </div>
             </div>
+            <div id="mqtt-broker-section-close">
+                <div class="palette-header">
+                    <i class="fa fa-angle-down"></i><span>Message sent before disconnecting (close message)</span>
+                </div>
+                <div class="section-content" style="padding: 12px; display:none">
+                    <div style="padding: 12px;">
+                        <div class="form-row">
+                            <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">
+                        </div>
+                        <div class="form-row">
+                            <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>
+    </div>
 </script>
 
 <script type="text/x-red" data-help-name="mqtt-broker">
@@ -279,6 +320,29 @@
 
 </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">
     RED.nodes.registerType('mqtt-broker',{
         category: 'config',
@@ -307,7 +371,11 @@
             birthTopic: {value:""},
             birthQos: {value:"0"},
             birthRetain: {value:false},
-            birthPayload: {value:""}
+            birthPayload: {value:""},
+            closeTopic: {value:""},
+            closeTopic: {value:"0"},
+            closeTopic: {value:false},
+            closeTopic: {value:""}
         },
         credentials: {
             user: {type:"text"},
@@ -343,14 +411,29 @@
                 id: "mqtt-broker-tab-security",
                 label: this._("mqtt.tabs-label.security")
             });
+            
             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",
+            function setUpSection(sectionId) {
-                label: this._("mqtt.tabs-label.will")
+                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);
             if (typeof this.cleansession === 'undefined') {
                 this.cleansession = true;
@@ -376,6 +459,10 @@
                 this.birthQos = "0";
                 $("#node-config-input-birthQos").val("0");
             }
+            if (typeof this.closeQos === 'undefined') {
+                this.willQos = "0";
+                $("#node-config-input-willQos").val("0");
+            }
 
             function updateTLSOptions() {
                 if ($("#node-config-input-usetls").is(':checked')) {

nodes/core/locales/en-US/messages.json

@@ -335,24 +335,24 @@
         "tabs-label": {
             "connection": "Connection",
             "security": "Security",
-            "will": "Will Message",
+            "messages": "Messages"
-            "birth": "Birth Message"
         },
         "placeholder": {
             "clientid": "Leave blank for auto generated",
             "clientid-nonclean":"Must be set for non-clean sessions",
             "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": {
             "connected": "Connected to broker: __broker__",
             "disconnected": "Disconnected from broker: __broker__",
             "connect-failed": "Connection failed to broker: __broker__"
         },
-        "retain": "Retain",
+        "": "",
         "true": "true",
         "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": {
             "not-defined": "topic not defined",
             "missing-config": "missing broker configuration",