@flowfuse/node-red-dashboard 1.20.1 → 1.20.2-357ebba-202412181736.0

package/nodes/config/ui_base.js

@@ -1,3 +1,4 @@
+const { Agent } = require('https')
 const path = require('path')
 
 const axios = require('axios')
@@ -736,7 +737,7 @@ module.exports = function (RED) {
             // any widgets we hard-code into our front end (e.g ui-notification for connection alerts) will start with ui-
             // Node-RED built nodes will be a random UUID
             if (!wNode && !id.startsWith('ui-')) {
-                console.log('widget does not exist any more')
+                console.log('widget does not exist in the runtime', id) // TODO: Handle this better for edit-time added nodes (e.g. ui-spacer)
                 return // widget does not exist any more (e.g. deleted from NR and deployed BUT the ui page was not refreshed)
             }
             async function handler () {
@@ -903,9 +904,9 @@ module.exports = function (RED) {
                     type: widgetConfig.type,
                     props: widgetConfig,
                     layout: {
-                        width: widgetConfig.width || 3,
-                        height: widgetConfig.height || 1,
-                        order: widgetConfig.order || 0
+                        width: widgetConfig.width || 3, // default width of 3: this must match up with defaults in wysiwyg editing
+                        height: widgetConfig.height || 1, // default height of 1: this must match up with defaults in wysiwyg editing
+                        order: widgetConfig.order || 0 // default order of 0: this must match up with defaults in wysiwyg editing
                     },
                     state: statestore.getAll(widgetConfig.id),
                     hooks: widgetEvents,
@@ -1051,12 +1052,13 @@ module.exports = function (RED) {
                         } else {
                             // msg could be null if the beforeSend errors and returns null
                             if (msg) {
-                                // store the latest msg passed to node
-                                datastore.save(n, widgetNode, msg)
-
                                 if (widgetConfig.topic || widgetConfig.topicType) {
                                     msg = await appendTopic(RED, widgetConfig, wNode, msg)
                                 }
+
+                                // store the latest msg passed to node
+                                datastore.save(n, widgetNode, msg)
+
                                 if (hasProperty(widgetConfig, 'passthru')) {
                                     if (widgetConfig.passthru) {
                                         send(msg)
@@ -1144,7 +1146,26 @@ module.exports = function (RED) {
         const host = RED.settings.uiHost
         const port = RED.settings.uiPort
         const httpAdminRoot = RED.settings.httpAdminRoot
-        const url = 'http://' + (`${host}:${port}/${httpAdminRoot}flows`).replace('//', '/')
+        let scheme = 'http://'
+        let httpsAgent
+        if (RED.settings.https) {
+            let https = RED.settings.https
+            try {
+                if (typeof https === 'function') {
+                    // since https() could return a promise / be async, we need to await it
+                    // if however the function is actually sync, JS will auto wrap it in a promise and await it
+                    https = await https()
+                }
+                httpsAgent = new Agent({
+                    rejectUnauthorized: false,
+                    ...(https || {})
+                })
+                scheme = 'https://'
+            } catch (error) {
+                return res.status(500).json({ error: 'Error processing https settings' })
+            }
+        }
+        const url = scheme + (`${host}:${port}/${httpAdminRoot}flows`).replace('//', '/')
         console.log('url', url)
         // get request body
         const dashboardId = req.params.dashboardId
@@ -1152,11 +1173,16 @@ module.exports = function (RED) {
         const changes = req.body.changes || {}
         const editKey = req.body.key
         const groups = changes.groups || []
+        const allWidgets = (changes.widgets || [])
+        const updatedWidgets = allWidgets.filter(w => !w.__DB2_ADD_WIDGET && !w.__DB2_REMOVE_WIDGET)
+        const addedWidgets = allWidgets.filter(w => !!w.__DB2_ADD_WIDGET).map(w => { delete w.__DB2_ADD_WIDGET; return w })
+        const removedWidgets = allWidgets.filter(w => !!w.__DB2_REMOVE_WIDGET).map(w => { delete w.__DB2_REMOVE_WIDGET; return w })
+
         console.log(changes, editKey, dashboardId)
         const baseNode = RED.nodes.getNode(dashboardId)
 
         // validity checks
-        if (groups.length === 0) {
+        if (groups.length === 0 && allWidgets.length === 0) {
             // this could be a 200 but since the group data might be missing due to
             // a bug or regression, we'll return a 400 and let the user know
             // there were no changes provided.
@@ -1180,6 +1206,32 @@ module.exports = function (RED) {
             }
         }
 
+        for (const widget of updatedWidgets) {
+            const existingWidget = baseNode.ui.widgets.get(widget.id)
+            if (!existingWidget) {
+                return res.status(400).json({ error: 'Widget not found' })
+            }
+        }
+
+        for (const added of addedWidgets) {
+            // for now, only ui-spacer is supported
+            if (added.type !== 'ui-spacer') {
+                return res.status(400).json({ error: 'Cannot add this kind of widget' })
+            }
+
+            // check if the widget is being added to a valid group
+            const group = baseNode.ui.groups.get(added.group)
+            if (!group) {
+                return res.status(400).json({ error: 'Invalid group id' })
+            }
+        }
+        for (const removed of removedWidgets) {
+            // for now, only ui-spacer is supported
+            if (removed.type !== 'ui-spacer') {
+                return res.status(400).json({ error: 'Cannot remove this kind of widget' })
+            }
+        }
+
         // Prepare headers for the requests
         const getHeaders = {
             'Node-RED-API-Version': 'v2',
@@ -1213,14 +1265,20 @@ module.exports = function (RED) {
             }
             return false
         }
-        let rev = null
-        return axios.request({
-            method: 'GET',
-            headers: getHeaders,
-            url
-        }).then(response => {
-            const flows = response.data?.flows || []
-            rev = response.data?.rev
+        try {
+            const getResponse = await axios.request({
+                method: 'GET',
+                headers: getHeaders,
+                httpsAgent,
+                url
+            })
+
+            if (getResponse.status !== 200) {
+                return res.status(getResponse.status).json({ error: getResponse?.data?.message || 'An error occurred getting flows', code: 'GET_FAILED' })
+            }
+
+            const flows = getResponse.data?.flows || []
+            const rev = getResponse.data?.rev
             const changeResult = []
             for (const modified of groups) {
                 const current = flows.find(n => n.id === modified.id)
@@ -1235,28 +1293,81 @@ module.exports = function (RED) {
                 changeResult.push(applyIfDifferent(current, modified, 'width'))
                 changeResult.push(applyIfDifferent(current, modified, 'order'))
             }
+            // scan through the widgets and apply changes (if any)
+            for (const modified of updatedWidgets) {
+                const current = flows.find(n => n.id === modified.id)
+                if (!current) {
+                    // widget not found in current flows! integrity of data suspect! Has flows changed on the server?
+                    return res.status(400).json({ error: 'Widget not found', code: 'WIDGET_NOT_FOUND' })
+                }
+                if (modified.group !== current.group) {
+                    // integrity of data suspect! Has flow changed on the server?
+                    // Currently we dont support moving widgets between groups
+                    return res.status(400).json({ error: 'Invalid group id', code: 'INVALID_GROUP_ID' })
+                }
+                changeResult.push(applyIfDifferent(current, modified, 'order'))
+                changeResult.push(applyIfDifferent(current, modified, 'width'))
+                changeResult.push(applyIfDifferent(current, modified, 'height'))
+            }
+
+            // scan through the added widgets
+            for (const added of addedWidgets) {
+                const current = flows.find(n => n.id === added.id)
+                if (current) {
+                    // widget already exists in current flows! integrity of data suspect! Has flows changed on the server?
+                    return res.status(400).json({ error: 'Widget already exists', code: 'WIDGET_ALREADY_EXISTS' })
+                }
+                // sanitize the added widget (NOTE: only ui-spacer is supported for now & these are the only properties we care about)
+                const newWidget = {
+                    id: added.id,
+                    type: added.type,
+                    group: added.group,
+                    name: added.name || '',
+                    order: added.order ?? 0,
+                    width: added.width ?? 1,
+                    height: added.height ?? 1,
+                    className: added.className || ''
+                }
+                flows.push(newWidget)
+                changeResult.push(true)
+            }
+            for (const removed of removedWidgets) {
+                const current = flows.find(n => n.id === removed.id)
+                if (!current) {
+                    // widget not found in current flows! integrity of data suspect! Has flows changed on the server?
+                    return res.status(400).json({ error: 'Widget not found', code: 'WIDGET_NOT_FOUND' })
+                }
+                const index = flows.indexOf(current)
+                if (index > -1) {
+                    flows.splice(index, 1)
+                    changeResult.push(true)
+                }
+            }
             if (changeResult.length === 0 || !changeResult.includes(true)) {
-                return res.status(200).json({ message: 'No changes were' })
+                return res.status(201).json({ message: 'No changes were found', code: 'NO_CHANGES' })
             }
-            return flows
-        }).then(flows => {
-            // update the flows with the new group order
-            return axios.request({
+
+            const postResponse = await axios.request({
                 method: 'POST',
                 headers: postHeaders,
+                httpsAgent,
                 url,
                 data: {
                     flows,
                     rev
                 }
             })
-        }).then(response => {
-            return res.status(200).json(response.data)
-        }).catch(error => {
+
+            if (postResponse.status !== 200) {
+                return res.status(postResponse.status).json({ error: postResponse?.data?.message || 'An error occurred deploying flows', code: 'POST_FAILED' })
+            }
+
+            return res.status(postResponse.status).json(postResponse.data)
+        } catch (error) {
             console.error(error)
             const status = error.response?.status || 500
-            return res.status(status).json({ error: error.message })
-        })
+            return res.status(status).json({ error: error.message || 'An error occurred' })
+        }
     })
 
     // PATCH: /dashboard/api/v1/:dashboardId/edit/:pageId - start editing a page

package/nodes/store/data.js

@@ -38,6 +38,16 @@ function canSaveInStore (base, node, msg) {
     return checks.length === 0 || !checks.includes(false)
 }
 
+// Strip msg of properties that are not needed for storage
+function stripMsg (msg) {
+    const newMsg = config.RED.util.cloneMessage(msg)
+
+    // don't need to store ui_updates in the datastore, as this is handled in statestore
+    delete newMsg.ui_update
+
+    return newMsg
+}
+
 const getters = {
     RED () {
         return config.RED
@@ -75,7 +85,11 @@ const setters = {
             data[node.id] = filtered
         } else {
             if (canSaveInStore(base, node, msg)) {
-                data[node.id] = config.RED.util.cloneMessage(msg)
+                const newMsg = stripMsg(msg)
+                data[node.id] = {
+                    ...data[node.id],
+                    ...newMsg
+                }
             }
         }
     },

package/nodes/widgets/locales/en-US/ui_audio.html

@@ -0,0 +1,31 @@
+<script type="text/html" data-help-name="ui-audio">
+    <p>
+        Plays an audio file in the dashboard.
+    </p>
+    <p>
+        Each received <code>msg.payload</code> will contain a new source, i.e. a new audio file url.
+    </p>
+    <h3>Properties</h3>
+    <dl class="message-properties">
+        <dt>Source <span class="property-type">string</span></dt>
+        <dd>The source is the url where the audio file can be fetched.</dd>
+        <dt>Autoplay <span class="property-type">list</span></dt>
+        <dd>Specify whether the audio file will start playing automatically.</dd>
+        <dt>Loop <span class="property-type">list</span></dt>
+        <dd>Specify whether the audio should be looping, i.e. start playing automatically again when ended.</dd>
+        <dt>Muted <span class="property-type">list</span></dt>
+        <dd>Specify whether the audio should be muted.</dd>
+    </dl>
+    <h3>Dynamic Properties (Inputs)</h3>
+    <p>Any of the following can be appended to a <code>msg.ui_update</code> in order to override or set properties on this node at runtime.</p>
+    <dl class="message-properties">
+        <dt class="optional">src<span class="property-type">string</span></dt>
+        <dd>Override the configured audio source.</dd>
+        <dt class="optional">autoplay<span class="property-type">'on' | 'off'</span></dt>
+        <dd>Override the configured autoplay setting .</dd>
+        <dt class="optional">loop<span class="property-type">'on' | 'off'</span></dt>
+        <dd>Override the configured looping behaviour.</dd>
+        <dt class="optional">muted<span class="property-type">'on' | 'off'</span></dt>
+        <dd>Override the configured muted setting.</dd>
+    </dl>
+</script>

package/nodes/widgets/locales/en-US/ui_audio.json

@@ -0,0 +1,17 @@
+{
+    "ui-audio": {
+        "label": {
+            "group": "Group",
+            "size": "Size",
+            "icon": "Icon",
+            "source": "Source",
+            "autoplay": "Autoplay",
+            "loop": "Loop",
+            "muted": "Muted"
+        },
+        "option": {
+            "on": "On",
+            "off": "Off"
+       }
+    }
+}

package/nodes/widgets/ui_audio.html

@@ -0,0 +1,113 @@
+<script type="text/javascript">
+    (function () {
+        RED.nodes.registerType('ui-audio', {
+            category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
+            color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.medium'),
+            defaults: {
+                group: { type: 'ui-group', required: true },
+                name: { 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 >= 0
+                        $('#node-input-size').toggleClass('input-error', !valid)
+                        return valid
+                    }
+                },
+                height: { value: 0 },
+                src: { value: ''},
+                autoplay: { value: 'off' },
+                loop: { value: 'off' },
+                muted: { value: 'off' }
+            },
+            inputs: 1,
+            outputs: 1,
+            align: 'right',
+            icon: 'font-awesome/fa-volume-up',
+            paletteLabel: 'audio',
+            label: function () { return this.name },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' },
+            oneditprepare: function () {
+                // if this groups parent is a subflow template, set the node-config-input-width and node-config-input-height up
+                // as typedInputs and hide the elementSizer (as it doesn't make sense for subflow templates)
+                if (RED.nodes.subflow(this.z)) {
+                    // change inputs from hidden to text & display them
+                    $('#node-input-width').attr('type', 'text')
+                    $('#node-input-height').attr('type', 'text')
+                    $('div.form-row.nr-db-ui-element-sizer-row').hide()
+                    $('div.form-row.nr-db-ui-manual-size-row').show()
+                } else {
+                    // not in a subflow, use the elementSizer
+                    $('div.form-row.nr-db-ui-element-sizer-row').show()
+                    $('div.form-row.nr-db-ui-manual-size-row').hide()
+                    $('#node-input-size').elementSizer({
+                        width: '#node-input-width',
+                        height: '#node-input-height',
+                        group: '#node-input-group'
+                    })
+                }
+
+                // 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-audio">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></label>
+        <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
+    </div>
+    <div class="form-row">
+        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="ui-audio.label.group"></label>
+        <input type="text" id="node-input-group">
+    </div>
+    <div class="form-row nr-db-ui-element-sizer-row">
+        <label><i class="fa fa-object-group"></i> <span data-i18n="ui-audio.label.size"></label>
+        <button class="editor-button" id="node-input-size"></button>
+    </div>
+    <div class="form-row nr-db-ui-manual-size-row">
+        <label><i class="fa fa-arrows-h"></i> <span data-i18n="ui-audio.label.width">Width</label>
+        <input type="hidden" id="node-input-width">
+    </div>
+    <div class="form-row nr-db-ui-manual-size-row">
+        <label><i class="fa fa-arrows-v"></i> <span data-i18n="ui-audio.label.height">Height</label>
+        <input type="hidden" id="node-input-height">
+    </div>
+    <div class="form-row">
+        <label for="node-input-src"><i class="fa fa-globe"></i> <span data-i18n="ui-audio.label.source"></label>
+        <input type="text" id="node-input-src">
+    </div>
+    <div class="form-row">
+        <label for="node-input-autoplay"><i class="fa fa-play-circle"></i> <span data-i18n="ui-audio.label.autoplay"></label>
+        <select id="node-input-autoplay" style="width:70%;">
+            <option value="on" data-i18n="ui-audio.option.on"></option>
+            <option value="off" data-i18n="ui-audio.option.off"></option>
+        </select>
+    </div>
+    <div class="form-row">
+        <label for="node-input-loop"><i class="fa fa-retweet"></i> <span data-i18n="ui-audio.label.loop"></label>
+        <select id="node-input-loop" style="width:70%;">
+            <option value="on" data-i18n="ui-audio.option.on"></option>
+            <option value="off" data-i18n="ui-audio.option.off"></option>
+        </select>
+    </div>
+    <div class="form-row">
+        <label for="node-input-muted"><i class="fa fa-volume-up"></i> <span data-i18n="ui-audio.label.muted"></label>
+        <select id="node-input-muted" style="width:70%;">
+            <option value="on" data-i18n="ui-audio.option.on"></option>
+            <option value="off" data-i18n="ui-audio.option.off"></option>
+        </select>
+    </div>
+    <div class="form-tips"><b>Note</b>: Autoplay will only work after a user gesture (e.g. click on the dashboard).</span></div>
+</script>

package/nodes/widgets/ui_audio.js

@@ -0,0 +1,81 @@
+const datastore = require('../store/data.js')
+const statestore = require('../store/state.js')
+
+module.exports = function (RED) {
+    function AudioNode (config) {
+        const node = this
+
+        RED.nodes.createNode(this, config)
+
+        // which group are we rendering this widget
+        const group = RED.nodes.getNode(config.group)
+
+        const evts = {
+            onAction: true,
+            onInput: function (msg, send) {
+                // store the latest msg passed to node, only if a source is supplied in the payload
+                if (typeof msg.payload === 'string') {
+                    datastore.save(group.getBase(), node, msg)
+                }
+                // only send msg on if we have passthru enabled
+                if (config.passthru) {
+                    send(msg)
+                }
+            },
+            beforeSend: function (msg) {
+                if (msg.playback === 'play') {
+                    const lastMsg = datastore.get(node.id)
+                    // TODO zou eigenlijk de last message met een payload moeten zijn.
+                    const src = lastMsg?.payload || config.src
+                    if (typeof src !== 'string' || src.trim() === '') {
+                        node.warn('Cannot play audio when no source has been specified')
+                    }
+                }
+
+                if (msg.ui_update) {
+                    const updates = msg.ui_update
+
+                    if (updates) {
+                        if (typeof updates.src !== 'undefined') {
+                            // dynamically set "src" property
+                            statestore.set(group.getBase(), node, msg, 'src', updates.src)
+                        }
+                        if (typeof updates.autoplay !== 'undefined') {
+                            if (['on', 'off'].includes(updates.autoplay)) {
+                                // dynamically set "autoplay" property
+                                statestore.set(group.getBase(), node, msg, 'autoplay', updates.autoplay)
+                            } else {
+                                node.error('Property msg.ui_update.autoplay should be "on" or "off"')
+                            }
+                        }
+                        if (typeof updates.loop !== 'undefined') {
+                            if (['on', 'off'].includes(updates.loop)) {
+                                // dynamically set "loop" property
+                                statestore.set(group.getBase(), node, msg, 'loop', updates.loop)
+                            } else {
+                                node.error('Property msg.ui_update.loop should be "on" or "off"')
+                            }
+                        }
+                        if (typeof updates.muted !== 'undefined') {
+                            if (['on', 'off'].includes(updates.muted)) {
+                                // dynamically set "muted" property
+                                statestore.set(group.getBase(), node, msg, 'muted', updates.muted)
+                            } else {
+                                node.error('Property msg.ui_update.muted should be "on" or "off"')
+                            }
+                        }
+                    }
+                }
+                return msg
+            }
+        }
+
+        // inform the dashboard UI that we are adding this node
+        if (group) {
+            group.register(node, config, evts)
+        } else {
+            node.error('No group configured')
+        }
+    }
+    RED.nodes.registerType('ui-audio', AudioNode)
+}

package/nodes/widgets/ui_file_input.js

@@ -19,7 +19,7 @@ module.exports = function (RED) {
 
         // get max file size supported
         const MAX_FILESIZE_DEFAULT = 1e6
-        const maxFileSize = RED.settings.dashboard?.maxHttpBufferSize || MAX_FILESIZE_DEFAULT
+        const maxFileSize = RED.settings.dashboard?.maxHttpBufferSize || RED.settings.ui?.maxHttpBufferSize || MAX_FILESIZE_DEFAULT
 
         config.maxFileSize = maxFileSize
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.20.1",
+    "version": "1.20.2-357ebba-202412181736.0",
     "description": "Dashboard 2.0 - A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts).",
     "keywords": [
         "node-red"
@@ -143,6 +143,7 @@
             "ui-chart": "nodes/widgets/ui_chart.js",
             "ui-gauge": "nodes/widgets/ui_gauge.js",
             "ui-notification": "nodes/widgets/ui_notification.js",
+            "ui-audio": "nodes/widgets/ui_audio.js",
             "ui-markdown": "nodes/widgets/ui_markdown.js",
             "ui-template": "nodes/widgets/ui_template.js",
             "ui-event": "nodes/widgets/ui_event.js",

package/dist/assets/Tableau10-B-NsZVaP.js

@@ -1 +0,0 @@
-function o(e){for(var c=e.length/6|0,n=new Array(c),a=0;a<c;)n[a]="#"+e.slice(a*6,++a*6);return n}const r=o("4e79a7f28e2ce1575976b7b259a14fedc949af7aa1ff9da79c755fbab0ab");export{r as s};

package/dist/assets/array-BKyUJesY.js

@@ -1 +0,0 @@
-function t(r){return typeof r=="object"&&"length"in r?r:Array.from(r)}export{t as a};