@flowfuse/nr-mqtt-nodes 0.1.0

package/nodes/ff-mqtt.html

@@ -0,0 +1,488 @@
+<!--
+This is a fork of the MQTT nodes from Node-RED.
+The original code can be found at:
+https://github.com/node-red/node-red/blob/b428e24ea51e00e2260739987dfab74872765a9f/packages/node_modules/@node-red/nodes/core/network/21-httpin.html
+Below is the copyright notice for the original code.
+The copyright notice for this fork is the same as the original.
+### Changes:
+- Hide advanced features
+- Remove the config node for MQTT broker
+- Remove the dynamic connection control
+- lint errors fixed up
+-->
+<!--
+  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>
+
+    .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.mqtt5-out > label {
+        width: 130px;
+    }
+    .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;
+        width: 100%;
+    }
+    .form-row.mqtt-flags-row > .mqtt-flags > .mqtt-flag > label > input {
+        position: relative;
+        vertical-align: bottom;
+        top: -2px;
+        width: 15px;
+        height: 15px;
+    }
+    .form-row-mqtt5 {
+        display: none;
+    }
+    .form-row-mqtt5.form-row-mqtt5-active:not(.form-row-mqtt-static-disabled) {
+        display: block
+    }
+    .form-row-mqtt-static-disabled {
+        display: none;
+        /* opacity: 0.3;
+        pointer-events: none; */
+    }
+    .form-row.form-row-mqtt-datatype-tip > .form-tips {
+        width: calc(70% - 18px);
+        display: inline-block;
+        margin-top: -8px;
+    }
+
+    /* Hide advanced options in initial offering */
+    .form-row.ff-no-use {
+        display: none !important;
+    }
+
+</style>
+
+<script type="text/html" data-template-name="ff-mqtt-in">
+    <div class="form-row" id="ff-mqtt-client-link-feature-disabled" style="color: var(--red-ui-text-color-error);">
+        <label><i class="fa fa-warning"></i> <span></span></label>
+        <span data-i18n="ff-mqtt.label.featureDisabled"></span>
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-globe"></i> <span data-i18n="ff-mqtt.label.broker"></span></label>
+        <span class="red-ui-help">
+            <a href="#" class="red-ui-link" id="ff-mqtt-client-link" target="_blank">
+                <span>Configure Access Control </span><i class="fa fa-external-link"></i>
+            </a>
+        </span>
+    </div>
+    <div class="form-row">
+        <label for="node-input-topicType" data-i18n="ff-mqtt.label.action"></label>
+        <select id="node-input-topicType" style="width: 70%">
+            <option value="topic" data-i18n="ff-mqtt.label.staticTopic"></option>
+            <option value="dynamic" data-i18n="ff-mqtt.label.dynamicTopic"></option>
+        </select>
+        <input type="hidden" id="node-input-inputs">
+    </div>
+    <div class="form-row form-row-mqtt-static">
+        <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 form-row-mqtt-static">
+        <label for="node-input-qos"><i class="fa fa-empire"></i> <span data-i18n="ff-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 mqtt-flags-row form-row-mqtt5 form-row-mqtt-static ff-no-use">
+        <label for="node-input-nl" ><i class="fa fa-flag"></i> <span data-i18n="ff-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="ff-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="ff-mqtt.label.rap"></span>
+                </label>
+            </div>
+        </div>
+    </div>
+    <div class="form-row form-row-mqtt5 form-row-mqtt-static ff-no-use">
+        <label for="node-input-rh" style="width:100%"><i class="fa fa-tag"></i> <span data-i18n="ff-mqtt.label.rh"></span></label>
+        <select id="node-input-rh" style="margin-left: 104px; width: 70%">
+            <option value="0" data-i18n="ff-mqtt.label.rh0"></option>
+            <option value="1" data-i18n="ff-mqtt.label.rh1"></option>
+            <option value="2" data-i18n="ff-mqtt.label.rh2"></option>
+        </select>
+    </div>
+    <div class="form-row">
+        <label for="node-input-datatype"><i class="fa fa-sign-out"></i> <span data-i18n="ff-mqtt.label.output"></span></label>
+        <select id="node-input-datatype" style="width:70%;">
+            <option value="auto-detect" data-i18n="ff-mqtt.output.auto-detect"></option>
+            <option value="buffer" data-i18n="ff-mqtt.output.buffer"></option>
+            <option value="utf8" data-i18n="ff-mqtt.output.string"></option>
+            <option value="json" data-i18n="ff-mqtt.output.json"></option>
+            <option value="base64" data-i18n="ff-mqtt.output.base64"></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/html" data-template-name="ff-mqtt-out">
+    <div class="form-row" id="ff-mqtt-client-link-feature-disabled" style="color: var(--red-ui-text-color-error);">
+        <label><i class="fa fa-warning"></i> <span></span></label>
+        <span data-i18n="ff-mqtt.label.featureDisabled"></span>
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-globe"></i> <span data-i18n="ff-mqtt.label.broker"></span></label>
+        <span class="red-ui-help">
+            <a href="#" class="red-ui-link" id="ff-mqtt-client-link" target="_blank">
+                <span>Configure Access Control </span><i class="fa fa-external-link"></i>
+            </a>
+        </span>
+    </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="ff-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="ff-mqtt.retain"></span></label>
+        <select id="node-input-retain" class="mqtt-form-row-col2" >
+            <option value=""></option>
+            <option value="false" data-i18n="ff-mqtt.false"></option>
+            <option value="true" data-i18n="ff-mqtt.true"></option>
+        </select>
+    </div>
+    <div class="form-row mqtt5 mqtt5-out ff-no-use">
+        <label for="node-input-userProps"><span data-i18n="ff-mqtt.label.userProperties"></span></label>
+        <input type="text" id="node-input-userProps" style="width: calc(100% - 166px);">
+    </div>
+    <div class="form-row mqtt5 mqtt5-out ff-no-use">
+        <label for="node-input-respTopic"><span data-i18n="ff-mqtt.label.responseTopic"></span></label>
+        <input type="text" id="node-input-respTopic" style="width: calc(100% - 166px);">
+    </div>
+    <div class="form-row mqtt5 mqtt5-out ff-no-use">
+        <label for="node-input-correl"><span data-i18n="ff-mqtt.label.correlationData"></span></label>
+        <input type="text" id="node-input-correl" style="width: calc(100% - 166px);">
+    </div>
+    <div class="form-row mqtt5 mqtt5-out ff-no-use">
+        <label for="node-input-contentType"><span data-i18n="ff-mqtt.label.contentType"></span></label>
+        <input type="text" id="node-input-contentType" style="width: calc(100% - 166px);">
+    </div>
+
+    <div class="form-row mqtt-form-row-cols2 mqtt5 mqtt5-out ff-no-use">
+        <label for="node-input-expiry" class="mqtt-form-row-col1"><span data-i18n="ff-mqtt.label.expiry"></span></label>
+        <input id="node-input-expiry"  style="width: calc(100% - 166px);" class="mqtt-form-row-col1" >
+    </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="ff-mqtt.tip"></span></div>
+</script>
+
+<script type="text/javascript">
+/* global RED, $ */
+(function () {
+    const typedInputNoneOpt = {
+        value: 'none',
+        label: RED._('ff-mqtt.label.none'),
+        hasValue: false
+    }
+    const makeTypedInputOpt = function (value) {
+        return {
+            value,
+            label: value,
+            hasValue: false
+        }
+    }
+    const contentTypeOpts = [
+        typedInputNoneOpt,
+        makeTypedInputOpt('application/json'),
+        makeTypedInputOpt('application/octet-stream'),
+        makeTypedInputOpt('text/csv'),
+        makeTypedInputOpt('text/html'),
+        makeTypedInputOpt('text/plain'),
+        {
+            value: 'other',
+            label: RED._('ff-mqtt.label.other'),
+            icon: 'red/images/typedInput/az.svg'
+        }
+    ]
+
+    function getDefaultContentType (value) {
+        let defaultContentType
+        const matchedContentType = contentTypeOpts.filter(function (v) {
+            return v.value === value
+        })
+        if (matchedContentType.length > 0) {
+            defaultContentType = matchedContentType[0].value
+        }
+        if (value && !defaultContentType) {
+            defaultContentType = 'other'
+        }
+        return defaultContentType || 'none'
+    }
+    /**
+     * Test a topic string is valid for publishing
+     * @param {string} topic
+     * @returns `true` if it is a valid topic
+     */
+    function validateMQTTPublishTopic (topic, opts) {
+        if (!topic || topic === '' || !/[\\+#\b\f\n\r\t\v\0]/.test(topic)) {
+            return true
+        }
+        return RED._('ff-mqtt.errors.invalid-topic')
+    }
+    function setupTopicField (node, input) {
+        input.autoComplete({
+            minLength: 0,
+            completionPluginType: 'node-red-mqtt-topic-autocomplete-source',
+            context: {
+                node
+            }
+        })
+    }
+    RED.nodes.registerType('ff-mqtt-in', {
+        category: 'FlowFuse',
+        defaults: {
+            name: { value: '' },
+            topic: {
+                value: '',
+                validate: function (v, opt) {
+                    let isDynamic = this.inputs === 1
+                    const topicTypeSelect = $('#node-input-topicType')
+                    if (topicTypeSelect.length) {
+                        isDynamic = topicTypeSelect.val() === 'dynamic'
+                    }
+                    if (isDynamic || ((!!v) && RED.validators.regex(/^(#$|(\\+|[^+#]*)(\/(\+|[^+#]*))*(\/(\+|#|[^+#]*))?$)/)(v))) {
+                        return true
+                    }
+                    return RED._('ff-mqtt.errors.invalid-topic')
+                }
+            },
+            qos: { value: '2' },
+            datatype: { value: 'auto-detect', required: true },
+            nl: { value: false },
+            rap: { value: true },
+            rh: { value: 0 },
+            inputs: { value: 0 }
+        },
+        color: '#d8bfd8',
+        inputs: 0,
+        outputs: 1,
+        icon: 'ff-logo.svg',
+        paletteLabel: 'ff mqtt in',
+        label: function () {
+            let label = 'ff mqtt in'
+            if (this.topicType !== 'dynamic' && this.topic) {
+                label = this.topic
+            }
+            return this.name || label
+        },
+        labelStyle: function () {
+            return this.name ? 'node_label_italic' : ''
+        },
+        oneditprepare: function () {
+            const node = this
+
+            const forgeUrl = RED.settings.ffMqttInUserTeamBrokerClientUrl || RED.settings.ffMqttInForgeUrl || ''
+            $('#ff-mqtt-client-link').attr('href', forgeUrl)
+            const featureEnabled = RED.settings.ffMqttInFeatureEnabled !== false || RED.settings.ffMqttOutFeatureEnabled !== false
+            if (featureEnabled === false) {
+                $('#ff-mqtt-client-link-feature-disabled').show()
+            } else {
+                $('#ff-mqtt-client-link-feature-disabled').hide()
+            }
+
+            setupTopicField(node, $('#node-input-topic'))
+            const isV5Broker = function () {
+                // const confNode = RED.nodes.node($('#node-input-broker').val())
+                // return confNode && confNode.protocolVersion === '5'
+                return true
+            }
+            const isDynamic = function () {
+                return $('#node-input-topicType').val() === 'dynamic'
+            }
+            const updateVisibility = function () {
+                const v5 = isV5Broker()
+                const dynamic = isDynamic()
+                $('div.form-row-mqtt5').toggleClass('form-row-mqtt5-active', !!v5)
+                $('div.form-row.form-row-mqtt-static').toggleClass('form-row-mqtt-static-disabled', !!dynamic)
+            }
+
+            // $('#node-input-broker').on('change', function (d) {
+            //     updateVisibility()
+            // })
+
+            $('#node-input-topicType').on('change', function () {
+                $('#node-input-inputs').val(isDynamic() ? 1 : 0)
+                updateVisibility()
+            })
+
+            if (node.inputs === 1) {
+                $('#node-input-topicType').val('dynamic')
+            } else {
+                $('#node-input-topicType').val('topic')
+            }
+            $('#node-input-topicType').trigger('change')
+
+            if (node.qos === undefined) {
+                $('#node-input-qos').val('2')
+            }
+            if (node.datatype === undefined) {
+                $('#node-input-datatype').val('auto-detect')
+            }
+            updateVisibility()
+        },
+        oneditsave: function () {
+            if ($('#node-input-topicType').val() === 'dynamic') {
+                $('#node-input-topic').val('')
+            }
+        }
+    })
+
+    RED.nodes.registerType('ff-mqtt-out', {
+        category: 'FlowFuse',
+        defaults: {
+            name: { value: '' },
+            topic: { value: '', validate: validateMQTTPublishTopic },
+            qos: { value: '' },
+            retain: { value: '' },
+            respTopic: { value: '' },
+            contentType: { value: '' },
+            userProps: { value: '' },
+            correl: { value: '' },
+            expiry: { value: '' }
+        },
+        color: '#d8bfd8',
+        inputs: 1,
+        outputs: 0,
+        icon: 'ff-logo.svg',
+        paletteLabel: 'ff mqtt out',
+        align: 'right',
+        label: function () {
+            return this.name || this.topic || 'ff mqtt out'
+        },
+        oneditprepare: function () {
+            const that = this
+            const forgeUrl = RED.settings.ffMqttOutUserTeamBrokerClientUrl || RED.settings.ffMqttOutForgeUrl || ''
+            $('#ff-mqtt-client-link').attr('href', forgeUrl)
+            const featureEnabled = RED.settings.ffMqttInFeatureEnabled !== false || RED.settings.ffMqttOutFeatureEnabled !== false
+            if (featureEnabled === false) {
+                $('#ff-mqtt-client-link-feature-disabled').show()
+            } else {
+                $('#ff-mqtt-client-link-feature-disabled').hide()
+            }
+
+            setupTopicField(that, $('#node-input-topic'))
+
+            function showHideDynamicFields () {
+                const confNode = RED.nodes.node($('#node-input-broker').val())
+                const v5 = confNode && confNode.protocolVersion === '5'
+                if (v5) {
+                    $('div.form-row.mqtt5').show()
+                    const t = $('#node-input-respTopic').typedInput('type')
+                    if (t === 'none') {
+                        $('#node-input-correl').parent().hide()
+                    } else {
+                        $('#node-input-correl').parent().show()
+                    }
+                } else {
+                    $('div.form-row.mqtt5').hide()
+                }
+            }
+
+            // $('#node-input-broker').on('change', function (d) {
+            showHideDynamicFields()
+            // })
+
+            const respTopicTI = $('#node-input-respTopic').typedInput({
+                default: !this.respTopic ? 'none' : 'str',
+                types: [typedInputNoneOpt, 'str']
+            })
+
+            $('#node-input-correl').typedInput({
+                default: !this.correl ? 'none' : 'str',
+                types: [typedInputNoneOpt, 'str']
+            })
+            // show / hide correlation data depending on respTopic
+            respTopicTI.on('change', showHideDynamicFields)
+            respTopicTI.triggerHandler('change')
+
+            $('#node-input-userProps').typedInput({
+                default: !this.userProps ? 'none' : 'json',
+                types: [typedInputNoneOpt, 'json']
+            })
+            $('#node-input-expiry').typedInput({
+                default: !this.expiry ? 'none' : 'num',
+                types: [typedInputNoneOpt, 'num']
+            })
+            $('#node-input-contentType').typedInput({
+                default: getDefaultContentType(this.contentType),
+                types: contentTypeOpts
+            })
+        },
+        oneditsave: function () {
+            let contentType = $('#node-input-contentType').val().trim()
+            if (contentType === '') {
+                contentType = $('#node-input-contentType').typedInput('type')
+                if (contentType === 'none' || contentType === 'other') {
+                    contentType = ''
+                }
+            }
+            $('#node-input-contentType').val(contentType)
+        },
+        labelStyle: function () {
+            return this.name ? 'node_label_italic' : ''
+        }
+    })
+})()
+</script>
+