experiments with mqtt ui (wip)

nodes/core/io/10-mqtt.html

@@ -212,48 +212,89 @@
                 <input type="password" id="node-config-input-password">
             </div>
         </div>
-        <div id="mqtt-broker-tab-birth" style="display:none">
-            <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 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">
+                    </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 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 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">
+                    </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 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 id="mqtt-broker-tab-will" style="display:none">
-            <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 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>
@@ -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",
-                label: this._("mqtt.tabs-label.birth")
-            });
-            tabs.addTab({
-                id: "mqtt-broker-tab-will",
-                label: this._("mqtt.tabs-label.will")
+                id: "mqtt-broker-tab-messages",
+                label: this._("mqtt.tabs-label.messages")
             });
+
+            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);
             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')) {