@flowfuse/node-red-dashboard 0.7.0

package/nodes/widgets/ui_notification.html

@@ -0,0 +1,139 @@
+<style>
+    #ui-chart-colors input[type="color"] {
+        font-weight: bold;
+    }
+    #ui-chart-colors input[type="color"]::-webkit-color-swatch,
+    #ui-chart-colors input[type="color"]::-moz-color-swatch {
+        border: none;
+    }
+</style>
+
+<script type="text/javascript">
+    (function () {
+        RED.nodes.registerType('ui-notification', {
+            category: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.label.category'),
+            color: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.colors.medium'),
+            defaults: {
+                ui: { type: 'ui-base', value: '', required: true },
+                position: { value: 'top right' },
+                colorDefault: { value: true },
+                color: { value: null },
+                displayTime: { value: '3' },
+                showCountdown: { value: true },
+                outputs: { value: 0 },
+                allowDismiss: { value: 'OK' },
+                dismissText: { value: 'Close' },
+                raw: { value: false },
+                className: { value: '' },
+                name: { value: '' }
+            },
+            inputs: 1,
+            outputs: 0,
+            align: 'right',
+            icon: 'font-awesome/fa-envelope-o',
+            paletteLabel: 'notification',
+            label: function () { return this.name || (this.position === 'prompt' ? 'show dialog' : (this.position === 'dialog' ? 'show dialog' : 'show notification')) },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
+            oneditprepare: function () {
+                $('#node-input-topic').typedInput({
+                    default: 'str',
+                    typeField: $('#node-input-topicType'),
+                    types: ['str', 'msg', 'flow', 'global']
+                })
+
+                $('#node-input-allowDismiss').on('change', function () {
+                    const allowDismiss = $('#node-input-allowDismiss').is(':checked')
+                    if (allowDismiss) {
+                        $('#node-notification-dismissText').show()
+                    } else {
+                        $('#node-notification-dismissText').hide()
+                    }
+                })
+
+                $('#node-input-colorDefault').on('change', function () {
+                    const defaultColor = $('#node-input-colorDefault').is(':checked')
+                    console.log(defaultColor)
+                    if (defaultColor) {
+                        $('#node-input-color').hide()
+                    } else {
+                        $('#node-input-color').show()
+                    }
+                })
+    
+                // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
+                $('.ui-node-popover-title').tooltip({
+                    show: {
+                        effect: 'slideDown',
+                        delay: 150
+                    }
+                })
+            }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-notification">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name" placeholder="Name">
+    </div>
+    <div class="form-row">
+        <label for="node-input-ui"><i class="fa fa-bookmark"></i> UI</label>
+        <input type="text" id="node-input-ui">
+    </div>
+    <div class="form-row">
+        <label for="node-input-position"><i class="fa fa-th-large"></i> Position</label>
+        <select type="text" id="node-input-position" style="display:inline-block; width:70%; vertical-align:baseline;">
+            <option value="top right">Top Right</option>
+            <option value="top center">Top Center</option>
+            <option value="top left">Top Left</option>
+            <option value="bottom right">Bottom Right</option>
+            <option value="bottom right">Bottom Center</option>
+            <option value="bottom left">Bottom Left</option>
+            <option value="center center">Center</option>
+        </select>
+    </div>
+    <div class="form-row">
+        <label for="node-input-color"><i class="fa fa-paint-brush"></i> Color</label>
+        <div style="display: inline-flex; gap: 8px; align-items: center;">
+            <input type="checkbox" id="node-input-colorDefault" style="width: auto; margin: 0;">
+            <label for="node-input-colorDefault" style="margin: 0; line-height: 34px;">Default</label>
+            <input type="color" id="node-input-color" placeholder="#FFFFFF">
+        </div>
+    </div>
+    <div class="form-row" id="node-toast-displaytime">
+        <label for="node-input-displayTime"><i class="fa fa-clock-o"></i> Timeout (S)</label>
+        <input type="text" id="node-input-displayTime" placeholder="[msg.timeout]">
+    </div>
+    <div class="form-row form-row-flex" id="node-notification-showCountdown">
+        <input type="checkbox" id="node-input-showCountdown">
+        <label for="node-input-showCountdown">Show timeout countdown bar on notification</label>
+    </div>
+    <div class="form-row form-row-flex" id="node-notification-allowDismiss">
+        <input type="checkbox" id="node-input-allowDismiss">
+        <label for="node-input-allowDismiss"> Allow Manual Dismissal</label>
+    </div>
+    <div class="form-row form-row-flex" style="margin-left: 32px;" id="node-notification-dismissText">
+        <label for="node-input-dismissText"><i class="fa fa-check"></i> Button Label</label>
+        <input type="text" id="node-input-dismissText" placeholder="Close">
+    </div>
+    <div class="form-row form-row-flex" id="node-toast-raw">
+        <input type="checkbox" id="node-input-raw" style="display:inline-block; width:auto; vertical-align:baseline;">
+        <label style="width:auto" for="node-input-raw"> Accept raw HTML/JavaScript input in msg.payload to format popup.</label>
+    </div>
+    <div class="form-row">
+        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+        <div style="display: inline;">
+            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+            <a
+                data-html="true"
+                title="Dynamic Property: Class names can also be set by sending a message to the node with a msg.topic of 'ui-property:class' and a payload containing the class name(s) to be applied. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
+                class="red-ui-button ui-node-popover-title"
+                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+                <i style="font-family: ui-serif;">fx</i>
+            </a>
+        </div>
+    </div>
+    <div class="form-tips"><b>Note</b>: checking <i>Accept raw HTML/JavaScript</i> can allow injection of code.
+    Ensure the input comes from trusted sources.</span></div>
+</script>

package/nodes/widgets/ui_notification.js

@@ -0,0 +1,14 @@
+module.exports = function (RED) {
+    function NotificationNode (config) {
+        const node = this
+
+        RED.nodes.createNode(this, config)
+
+        // which group are we rendering this widget
+        const ui = RED.nodes.getNode(config.ui)
+
+        // inform the dashboard UI that we are adding this node
+        ui.register(null, null, node, config)
+    }
+    RED.nodes.registerType('ui-notification', NotificationNode)
+}

package/nodes/widgets/ui_radio_group.html

@@ -0,0 +1,186 @@
+<script type="text/javascript">
+    (function () {
+        function hasProperty (obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop)
+        }
+        RED.nodes.registerType('ui-radio-group', {
+            category: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.label.category'),
+            color: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.colors.light'),
+            defaults: {
+                group: { type: 'ui-group', required: true },
+                name: { value: '' },
+                label: { value: 'Select Option:' },
+                order: { value: 0 },
+                width: {
+                    value: 0,
+                    validate: function (v) {
+                        const width = v || 0
+                        const currentGroup = $('#node-input-group').val() || this.group
+                        const groupNode = RED.nodes.node(currentGroup)
+                        const valid = !groupNode || +width <= +groupNode.width
+                        $('#node-input-size').toggleClass('input-error', !valid)
+                        return valid
+                    }
+                },
+                height: { value: 0 },
+                columns: { value: 1 },
+                passthru: { value: false },
+                options: {
+                    value: [{ value: '', label: '' }],
+                    validate: function (v) {
+                        const unique = new Set(v.map(function (o) { return o.value }))
+                        return v.length === unique.size
+                    }
+                },
+                payload: { value: '' },
+                topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
+                topicType: { value: 'msg' },
+                className: { value: '' }
+            },
+            inputs: 1,
+            outputs: 1,
+            icon: 'font-awesome/fa-dot-circle-o',
+            paletteLabel: 'radio group',
+            label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'radio group' },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
+            oneditprepare: function () {
+                if (this.multiple === undefined) {
+                    $('#node-input-multiple').prop('checked', false)
+                }
+                // $("#node-input-size").elementSizer({
+                //     width: "#node-input-width",
+                //     height: "#node-input-height",
+                //     group: "#node-input-group"
+                // });
+                const un = new Set(this.options.map(function (o) { return o.value }))
+                if (this.options.length === un.size) { $('#valWarning').hide() } else { $('#valWarning').show() }
+
+                function generateOption (i, option) {
+                    const container = $('<li/>', { style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px; border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);' })
+                    const row = $('<div/>').appendTo(container)
+                    $('<div/>', { style: 'padding-top:5px; padding-left:175px;' }).appendTo(container)
+                    $('<div/>', { style: 'padding-top:5px; padding-left:120px;' }).appendTo(container)
+
+                    $('<i style="color: var(--red-ui-form-text-color, #eee); cursor:move; margin-left:3px;" class="node-input-option-handle fa fa-bars"></i>').appendTo(row)
+
+                    $('<input/>', { class: 'node-input-option-value', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Value', value: option.value }).appendTo(row).typedInput({ default: option.type || 'str', types: ['str', 'num', 'bool'] })
+                    $('<input/>', { class: 'node-input-option-label', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Label', value: option.label }).appendTo(row)
+
+                    const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row)
+                    const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan)
+                    $('<i/>', { class: 'fa fa-remove' }).appendTo(deleteButton)
+
+                    deleteButton.click(function () {
+                        container.css({ background: 'var(--red-ui-secondary-background-inactive, #fee)' })
+                        container.fadeOut(300, function () {
+                            $(this).remove()
+                        })
+                    })
+
+                    $('#node-input-option-container').append(container)
+                }
+
+                $('#node-input-add-option').click(function () {
+                    generateOption($('#node-input-option-container').children().length + 1, {})
+                    $('#node-input-option-container-div').scrollTop($('#node-input-option-container-div').get(0).scrollHeight)
+                })
+
+                for (let i = 0; i < this.options.length; i++) {
+                    const option = this.options[i]
+                    generateOption(i + 1, option)
+                }
+
+                $('#node-input-option-container').sortable({
+                    axis: 'y',
+                    handle: '.node-input-option-handle',
+                    cursor: 'move'
+                })
+
+                $('#node-input-topic').typedInput({
+                    default: 'str',
+                    typeField: $('#node-input-topicType'),
+                    types: ['str', 'msg', 'flow', 'global']
+                })
+
+                // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
+                $('.ui-node-popover-title').tooltip({
+                    show: {
+                        effect: 'slideDown',
+                        delay: 150
+                    }
+                })
+            },
+            oneditsave: function () {
+                const options = $('#node-input-option-container').children()
+                const node = this
+                node.options = []
+                options.each(function (i) {
+                    const option = $(this)
+                    const o = {
+                        label: option.find('.node-input-option-label').val(),
+                        value: option.find('.node-input-option-value').typedInput('value'),
+                        type: option.find('.node-input-option-value').typedInput('type')
+                    }
+                    if (option.find('.node-input-option-value').typedInput('type') === 'num') {
+                        o.value = Number(o.value)
+                    }
+                    if (option.find('.node-input-option-value').typedInput('type') === 'bool') {
+                        o.value = (o.value === 'true')
+                    }
+                    node.options.push(o)
+                })
+            }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-radio-group">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name">
+    </div>
+    <div class="form-row">
+        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+        <input type="text" id="node-input-group">
+    </div>
+    <div class="form-row">
+        <label for="node-input-label"><i class="fa fa-tag"></i> Label</label>
+        <input type="text" id="node-input-label" placeholder="optional label">
+    </div>
+    <div class="form-row">
+        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+        <div style="display: inline;">
+            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+            <a
+                data-html="true"
+                title="Dynamic Property: Class names can also be set by sending a message to the node with a msg.topic of 'ui-property:class' and a payload containing the class name(s) to be applied. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
+                class="red-ui-button ui-node-popover-title"
+                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+                <i style="font-family: ui-serif;">fx</i>
+            </a>
+        </div>
+    </div>
+    <div class="form-row node-input-option-container-row" style="margin-bottom: 0px;width: 100%">
+        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Options</label>
+        <div id="node-input-option-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width:calc(70% + 15px);">
+            <span id="valWarning" style="color: var(--red-ui-text-color-error, #910000)"><b>All Values must be unique.</b></span>
+            <ol id="node-input-option-container" style="list-style-type:none; margin:0;"></ol>
+        </div>
+    </div>
+    <div class="form-row">
+        <a href="#" class="editor-button editor-button-small" id="node-input-add-option" style="margin-top:4px; margin-left:103px;"><i class="fa fa-plus"></i> <span>option</span></a>
+    </div>
+    <div class="form-row">
+        <label for="node-input-columns"><i class="fa fa-tag"></i> Columns</label>
+        <input type="number" id="node-input-columns" placeholder="columns" min="1" max="5">
+    </div>
+    <div class="form-row">
+        <label for="node-input-topic"><i class="fa fa-tasks"></i> Topic</label>
+        <input type="text" id="node-input-topic" style="width:70%" placeholder="optional msg.topic">
+        <input type="hidden" id="node-input-topicType">
+    </div>
+    <div class="form-row">
+        <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
+        <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
+    </div>
+</script>

package/nodes/widgets/ui_radio_group.js

@@ -0,0 +1,20 @@
+module.exports = function (RED) {
+    function RadioGroupNode (config) {
+        // create node in Node-RED
+        RED.nodes.createNode(this, config)
+
+        const node = this
+
+        // which group are we rendering this widget
+        const group = RED.nodes.getNode(config.group)
+
+        const evts = {
+            onChange: true
+        }
+
+        // inform the dashboard UI that we are adding this node
+        group.register(node, config, evts)
+    }
+
+    RED.nodes.registerType('ui-radio-group', RadioGroupNode)
+}

package/nodes/widgets/ui_slider.html

@@ -0,0 +1,162 @@
+<script type="text/javascript">
+    (function () {
+        function hasProperty (obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop)
+        }
+        RED.nodes.registerType('ui-slider', {
+            category: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.label.category'),
+            color: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.colors.light'),
+            defaults: {
+                group: { type: 'ui-group', required: true },
+                name: { value: '' },
+                label: { value: 'slider' },
+                tooltip: { value: '' },
+                order: { value: 0 },
+                width: {
+                    value: 0,
+                    validate: function (v) {
+                        const width = v || 0
+                        const currentGroup = $('#node-input-group').val() || this.group
+                        const groupNode = RED.nodes.node(currentGroup)
+                        const valid = !groupNode || +width <= +groupNode.width
+                        $('#node-input-size').toggleClass('input-error', !valid)
+                        return valid
+                    }
+                },
+                height: { value: 0 },
+                passthru: { value: false },
+                outs: { value: 'all' },
+                topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
+                topicType: { value: 'msg' },
+                thumbLabel: { value: true },
+                min: { value: 0, required: true, validate: RED.validators.number() },
+                max: { value: 10, required: true, validate: RED.validators.number() },
+                step: { value: 1 },
+                className: { value: '' }
+            },
+            inputs: 1,
+            outputs: 1,
+            outputLabels: function () { return this.min + ' - ' + this.max },
+            icon: 'font-awesome/fa-sliders',
+            paletteLabel: 'slider',
+            label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'slider' },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
+            oneditprepare: function () {
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group'
+                })
+                $('#node-input-topic').typedInput({
+                    default: 'str',
+                    typeField: $('#node-input-topicType'),
+                    types: ['str', 'msg', 'flow', 'global']
+                })
+                // if (!$("#node-input-outs").val()) { $("#node-input-outs").val("all") }
+
+                // use jQuery UI tooltip to convert the plain old title attribute to a nice tooltip
+                $('.ui-node-popover-title').tooltip({
+                    show: {
+                        effect: 'slideDown',
+                        delay: 150
+                    }
+                })
+            }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-slider">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name">
+        <input type="hidden" id="node-input-topicType">
+    </div>
+    <div class="ui-slider">
+        <div class="form-row">
+            <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+            <input type="text" id="node-input-group">
+        </div>
+        <div class="form-row">
+            <label><i class="fa fa-object-group"></i> Size</label>
+            <input type="hidden" id="node-input-width">
+            <input type="hidden" id="node-input-height">
+            <button class="editor-button" id="node-input-size"></button>
+        </div>
+        <div class="form-row">
+            <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+            <div style="display: inline;">
+                <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+                <a
+                    data-html="true"
+                    title="Dynamic Property: Class names can also be set by sending a message to the node with a msg.topic of 'ui-property:class' and a payload containing the class name(s) to be applied. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
+                    class="red-ui-button ui-node-popover-title"
+                    style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+                    <i style="font-family: ui-serif;">fx</i>
+                </a>
+            </div>
+        </div>
+        <div class="form-row">
+            <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
+            <input type="text" id="node-input-label">
+        </div>
+        <div class="form-row">
+            <label><i class="fa fa-i-cursor"></i> Thumb</label>
+            <input type="checkbox" id="node-input-thumbLabel" style="display: inline-block; width: auto; vertical-align: top; margin: 0 3px 0 0;"/>
+            <label for="node-input-thumbLabel" style="width: 70%;"> Show Thumb Label</label>
+        </div>
+        <!--<div class="form-row">
+            <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
+            <input type="text" id="node-input-tooltip" placeholder="optional tooltip">
+        </div>-->
+        <div class="form-row">
+            <label for="node-input-min"><i class="fa fa-arrows-h"></i> Range</label>
+            <div style="display: grid; grid-template-columns: repeat(3, 1fr); width: 70%">
+                <div>
+                    <span for="node-input-min">min</span>
+                    <input type="text" id="node-input-min" style="width:60px">
+                </div>
+                <div>
+                    <span for="not-input-step">step</span>
+                    <input type="text" id="node-input-step" style="width:60px">
+                </div>
+                <div>
+                    <span for="not-input-max">max</span>
+                    <input type="text" id="node-input-max" style="width:60px">
+                </div>
+            </div>
+        </div>
+        <!-- <div class="form-row">
+            <label for="node-input-outs"><i class="fa fa-sign-out"></i> Output</label>
+            <select id="node-input-outs" style="width:204px">
+                <option value="all">continuously while sliding</option>
+                <option value="end">only on release</option>
+            </select>
+        </div>-->
+        <div class="form-row">
+            <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
+            <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; vertical-align:top;">
+        </div>
+        <div class="form-row">
+            <label style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> When changed, send:</label>
+        </div>
+        <!-- <div class="form-row">
+            <label style="padding-left:25px; margin-right:-25px">Payload</label>
+            <label style="width:auto">Current value</label>
+        </div> -->
+        <div class="form-row">
+            <label for="node-input-topic" style="padding-left:25px; margin-right:-25px">Topic</label>
+            <input type="text" id="node-input-topic">
+        </div>
+    </div>
+</script>
+
+<style id="nr-db2-ui-slider-styles">
+    .red-ui-editor div.ui-slider .form-row {
+        display: flex;
+        align-items: center;
+    }
+    .red-ui-editor div.ui-slider .form-row label {
+        margin-bottom: 0;
+    }
+</style>

package/nodes/widgets/ui_slider.js

@@ -0,0 +1,31 @@
+module.exports = function (RED) {
+    function SliderNode (config) {
+        RED.nodes.createNode(this, config)
+        const node = this
+
+        // which group are we rendering this widget
+        const group = RED.nodes.getNode(config.group)
+
+        this.pt = config.passthru
+        this.state = [' ', ' ']
+
+        node.status({})
+
+        const evts = {
+            onChange: true,
+            beforeSend: function (msg) {
+                if (!node.pt) {
+                    node.state[0] = msg.payload
+                    node.status({ shape: 'dot', fill: 'grey', text: node.state[0] + ' | ' + node.state[1] })
+                } else if (node._wireCount === 0) {
+                    node.status({ shape: 'dot', fill: 'grey', text: msg.payload })
+                }
+                return msg
+            }
+        }
+
+        // inform the dashboard UI that we are adding this node
+        group.register(node, config, evts)
+    }
+    RED.nodes.registerType('ui-slider', SliderNode)
+}