@flowfuse/node-red-dashboard 0.7.0

package/nodes/widgets/ui_switch.html

@@ -0,0 +1,194 @@
+<script type="text/javascript">
+    (function () {
+        function hasProperty (obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop)
+        }
+        RED.nodes.registerType('ui-switch', {
+            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: {
+                name: { value: '' },
+                label: { value: 'switch' },
+                // tooltip: {value: ''},
+                group: { type: 'ui-group', required: true },
+                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 },
+                topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
+                topicType: { value: 'msg' },
+                style: { value: '' },
+                className: { value: '' },
+                // on state
+                onvalue: { value: true, validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('onvalueType') : function (v) { return true }) },
+                onvalueType: { value: 'bool' },
+                onicon: { value: '' },
+                oncolor: { value: '' },
+                // off state
+                offvalue: { value: false, validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('offvalueType') : function (v) { return true }) },
+                offvalueType: { value: 'bool' },
+                officon: { value: '' },
+                offcolor: { value: '' }
+            },
+            inputs: 1,
+            outputs: 1,
+            icon: 'font-awesome/fa-toggle-on',
+            paletteLabel: 'switch',
+            label: function () { return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || 'switch' },
+            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-custom-icons').on('change', function () {
+                    if ($('#node-input-custom-icons').val() === 'default') {
+                        $('.form-row-custom-icons').hide()
+                    } else {
+                        $('.form-row-custom-icons').show()
+                    }
+                })
+
+                if (this.onicon !== '' || this.oncolor !== '' || this.officon !== '' || this.offcolor !== '') {
+                    $('#node-input-custom-icons').val('custom')
+                } else {
+                    $('.form-row-custom-icons').hide()
+                    $('#node-input-custom-icons').change()
+                }
+
+                $('#node-input-onvalue').typedInput({
+                    default: 'str',
+                    typeField: $('#node-input-onvalueType'),
+                    types: ['str', 'num', 'bool', 'json', 'bin', 'date', 'flow', 'global']
+                })
+
+                $('#node-input-offvalue').typedInput({
+                    default: 'str',
+                    typeField: $('#node-input-offvalueType'),
+                    types: ['str', 'num', 'bool', 'json', 'bin', 'date', 'flow', 'global']
+                })
+
+                $('#node-input-topic').typedInput({
+                    default: 'str',
+                    typeField: $('#node-input-topicType'),
+                    types: ['str', 'msg', 'flow', 'global']
+                })
+
+                $('#node-input-passthru').on('change', function () {
+                    if (this.checked) {
+                        $('.form-row-decouple').hide()
+                        $('#node-input-decouple').val('false')
+                    } else {
+                        $('.form-row-decouple').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
+                    }
+                })
+            },
+            oneditsave: function () {
+                if ($('#node-input-custom-icons').val() === 'default') {
+                    $('#node-input-onicon').val('')
+                    $('#node-input-officon').val('')
+                    $('#node-input-oncolor').val('')
+                    $('#node-input-offcolor').val('')
+                }
+            }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-switch">
+    <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><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-label"><i class="fa fa-i-cursor"></i> Label</label>
+        <input type="text" id="node-input-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">
+        <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-custom-icons"><i class="fa fa-picture-o"></i> Icon</label>
+        <select id="node-input-custom-icons" style="width:35%">
+            <option value="default">Default</option>
+            <option value="custom">Custom</option>
+        </select>
+    </div>
+    <div class="form-row form-row-custom-icons">
+        <label for="node-input-onicon" style="text-align:right;"><i class="fa fa-toggle-on"></i> On Icon</label>
+        <input type="text" id="node-input-onicon" style="width:120px">
+        <label for="node-input-oncolor" style="width:50px; text-align:right;">Colour</label>
+        <input type="text" id="node-input-oncolor" style="width:120px">
+    </div>
+    <div class="form-row form-row-custom-icons">
+        <label for="node-input-officon" style="text-align:right;"><i class="fa fa-toggle-off"></i> Off Icon</label>
+        <input type="text" id="node-input-officon" style="width:120px">
+        <label for="node-input-offcolor" style="width:50px; text-align:right;">Colour</label>
+        <input type="text" id="node-input-offcolor" style="width:120px">
+    </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-onvalue"><i class="fa fa-envelope-o"></i> When clicked, send:</label>
+    </div>
+    <div class="form-row">
+        <label for="node-input-onvalue" style="padding-left:25px; margin-right:-25px">On Payload</label>
+        <input type="text" id="node-input-onvalue" style="width:70%">
+        <input type="hidden" id="node-input-onvalueType">
+    </div>
+    <div class="form-row">
+        <label for="node-input-offvalue" style="padding-left:25px; margin-right:-25px">Off Payload</label>
+        <input type="text" id="node-input-offvalue" style="width:70%">
+        <input type="hidden" id="node-input-offvalueType">
+    </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">
+        <input type="hidden" id="node-input-topicType">
+    </div>
+</script>

package/nodes/widgets/ui_switch.js

@@ -0,0 +1,98 @@
+const datastore = require('../store/index.js')
+const { appendTopic } = require('../utils/index.js')
+
+module.exports = function (RED) {
+    function SwitchNode (config) {
+        // create node in Node-RED
+        RED.nodes.createNode(this, config)
+
+        const node = this
+        node.status({})
+
+        const states = ['off', 'on']
+
+        // which group are we rendering this widget
+        const group = RED.nodes.getNode(config.group)
+
+        const evts = {
+            // runs on UI interaction
+            // value = true | false from the ui-switch
+            onChange: async function (value) {
+                // ensure we have latest instance of the widget's node
+                const wNode = RED.nodes.getNode(node.id)
+                const msg = datastore.get(node.id) || {}
+
+                node.status({
+                    fill: value ? 'green' : 'red',
+                    shape: 'ring',
+                    text: value ? states[1] : states[0]
+                })
+
+                // retrieve the assigned on/off value
+                const on = RED.util.evaluateNodeProperty(config.onvalue, config.onvalueType, wNode)
+                const off = RED.util.evaluateNodeProperty(config.offvalue, config.offvalueType, wNode)
+                msg.payload = value ? on : off
+
+                datastore.save(node.id, msg)
+
+                // simulate Node-RED node receiving an input
+                wNode.send(msg)
+            },
+            onInput: async function (msg, send) {
+                let error = null
+                // ensure we have latest instance of the widget's node
+                const wNode = RED.nodes.getNode(node.id)
+
+                // retrieve the assigned on/off value
+                const on = RED.util.evaluateNodeProperty(config.onvalue, config.onvalueType, wNode)
+                const off = RED.util.evaluateNodeProperty(config.offvalue, config.offvalueType, wNode)
+                if (msg.payload === true || msg.payload === on) {
+                    msg.payload = on
+                } else if (msg.payload === false || msg.payload === off) {
+                    msg.payload = off
+                } else {
+                    // throw Node-RED error
+                    error = 'Invalid payload value'
+                }
+                if (!error) {
+                    // store the latest msg passed to node
+                    datastore.save(node.id, msg)
+
+                    node.status({
+                        fill: msg.payload ? 'green' : 'red',
+                        shape: 'ring',
+                        text: msg.payload ? states[1] : states[0]
+                    })
+
+                    if (config.passthru) {
+                        send(msg)
+                    }
+                } else {
+                    const err = new Error(error)
+                    err.type = 'warn'
+                    throw err
+                }
+            },
+            beforeSend: async function (msg) {
+                // ensure we have latest instance of the widget's node
+                const wNode = RED.nodes.getNode(node.id)
+
+                msg = await appendTopic(RED, config, wNode, msg)
+                return msg
+            }
+        }
+
+        const on = RED.util.evaluateNodeProperty(config.onvalue, config.onvalueType, node)
+        const off = RED.util.evaluateNodeProperty(config.offvalue, config.offvalueType, node)
+
+        config.evaluated = {
+            on,
+            off
+        }
+
+        // inform the dashboard UI that we are adding this node
+        group.register(node, config, evts)
+    }
+
+    RED.nodes.registerType('ui-switch', SwitchNode)
+}

package/nodes/widgets/ui_table.html

@@ -0,0 +1,149 @@
+<script type="text/javascript">
+    (function () {
+        RED.nodes.registerType('ui-table', {
+            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: {
+                group: { type: 'ui-group', required: true },
+                name: { value: '' },
+                label: { value: 'text' },
+                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 },
+                maxrows: { value: 0, validate: RED.validators.number() },
+                autocols: { value: true },
+                columns: {
+                    // value: [{ key: '', label: '' }]
+                    value: null
+                }
+            },
+            inputs: 1,
+            outputs: 0,
+            outputLabels: function () { return this.mode },
+            icon: 'font-awesome/fa-table',
+            paletteLabel: 'table',
+            label: function () {
+                return this.name || 'table'
+            },
+            oneditprepare: function () {
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group'
+                })
+                const autocols = $('#node-input-autocols')
+
+                $(autocols).change(() => {
+                    const val = autocols.is(':checked')
+                    const customColsDiv = $('#node-input-columns-container')
+                    if (val) {
+                        customColsDiv.hide()
+                    } else {
+                        customColsDiv.show()
+                    }
+                })
+
+                // Columns Editor
+                function generateColumn (i, col) {
+                    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-column-handle fa fa-bars"></i>').appendTo(row)
+
+                    $('<input/>', { class: 'node-input-column-key', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Key', value: col.key }).appendTo(row)
+                    $('<input/>', { class: 'node-input-column-label', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: 'Label', value: col.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-column-container').append(container)
+                }
+
+                $('#node-input-add-column').click(function () {
+                    generateColumn($('#node-input-column-container').children().length + 1, {})
+                    $('#node-input-column-container-div').scrollTop($('#node-input-column-column-div').get(0).scrollHeight)
+                })
+
+                for (let i = 0; i < this.columns?.length; i++) {
+                    const col = this.columns[i]
+                    generateColumn(i + 1, col)
+                }
+
+                $('#node-input-column-container').sortable({
+                    axis: 'y',
+                    handle: '.node-input-column-handle',
+                    cursor: 'move'
+                })
+            },
+            oneditsave: function () {
+                const columns = $('#node-input-column-container').children()
+                const node = this
+                node.columns = []
+                columns.each(function (i) {
+                    const column = $(this)
+                    const o = {
+                        label: column.find('.node-input-column-label').val(),
+                        key: column.find('.node-input-column-key').val()
+                    }
+                    node.columns.push(o)
+                })
+            }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-table">
+    <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><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-maxrows"><i class="fa fa-tag"></i> Max Rows</label>
+        <input type="number" id="node-input-maxrows">
+    </div>
+    <div class="form-row" style="display:flex;">
+        <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> Columns</label>
+        <div class="form-row node-input-column-container-row" style="margin-bottom: 0px; width:calc(70% + 15px);">
+            <div>
+                <input type="checkbox" checked id="node-input-autocols" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
+                <label style="width:auto" for="node-input-autocols">Auto Calculate Columns</label>
+            </div>
+            <div id="node-input-columns-container">
+                <div id="node-input-column-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: 100%;">
+                    <ol id="node-input-column-container" style="list-style-type:none; margin:0;"></ol>
+                </div>
+                <a href="#" class="editor-button editor-button-small" id="node-input-add-column" style="margin-top:4px;"><i class="fa fa-plus"></i> <span>column</span></a>
+            </div>
+        </div>
+    </div>
+</script>

package/nodes/widgets/ui_table.js

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