@flowfuse/node-red-dashboard 1.16.0 → 1.16.1-312bbd4-202409201219.0

package/nodes/config/ui_base.html

@@ -235,6 +235,26 @@
         display: flex;
         flex-direction: column;
     }
+    div.nrdb2-sb-widget-list-container ol.nrdb2-sb-widget-list.red-ui-editableList-list.ui-sortable {
+        min-height: 20px; /* IMPORTANT! So that user when last element is dragged out it doesnt collapse. */
+    }
+    div.nrdb2-sb-widget-list-container ol.nrdb2-sb-widget-list.red-ui-editableList-list.ui-sortable:empty {
+        border: 1px dashed #c4c4c4;
+        padding: 8px; /* should be 9px to match the other entries but border width is 2px */
+        height: 20px; /* To make it visible */
+        text-align: center;
+        border-left-width: 0;
+        border-right-width: 0;
+        background-color: #f9f9f9;
+    }
+    div.nrdb2-sb-widget-list-container ol.nrdb2-sb-widget-list.red-ui-editableList-list.ui-sortable:empty::before {
+        content: "empty";
+        color: #d2d2d2;
+        font-style: italic;
+    }
+    ol.nrdb2-sb-group-list li:last-child ol.nrdb2-sb-widget-list.red-ui-editableList-list.ui-sortable:empty {
+        border-bottom-width: 0px;
+    }
 </style>
 
 
@@ -1043,7 +1063,7 @@
             addItem: function (container, i, /** @type {DashboardItem} */ widget) {
                 const titleRow = $('<div>', { class: 'nrdb2-sb-list-header nrdb2-sb-widgets-list-header' }).appendTo(container)
                 $('<i class="nrdb2-sb-list-handle nrdb2-sb-widget-list-handle fa fa-bars"></i>').appendTo(titleRow)
-                
+
                 // Set the icon
                 const ico = $('<i>', { class: 'nrdb2-sb-icon nrdb2-sb-widget-icon' }).appendTo(titleRow)
                 let widgetIcon = RED.utils.getNodeIcon(widget.node?._def, widget.node) || 'fa-question'

package/nodes/config/ui_base.js

@@ -1,10 +1,9 @@
-const fs = require('fs')
 const path = require('path')
 
 const v = require('../../package.json').version
 const datastore = require('../store/data.js')
 const statestore = require('../store/state.js')
-const { appendTopic, addConnectionCredentials } = require('../utils/index.js')
+const { appendTopic, addConnectionCredentials, getThirdPartyWidgets } = require('../utils/index.js')
 
 // from: https://stackoverflow.com/a/28592528/3016654
 function join (...paths) {
@@ -90,36 +89,8 @@ module.exports = function (RED) {
             /**
              * Load in third party widgets
              */
-            let packagePath, packageJson
-            if (RED.settings?.userDir) {
-                packagePath = path.join(RED.settings.userDir, 'package.json')
-                packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'))
-            } else {
-                node.log('Cannot import third party widgets. No access to Node-RED package.json')
-            }
 
-            if (packageJson && packageJson.dependencies) {
-                Object.entries(packageJson.dependencies)?.filter(([packageName, _packageVersion]) => {
-                    return packageName.includes('node-red-dashboard-2-')
-                }).map(([packageName, _packageVersion]) => {
-                    const modulePath = path.join(RED.settings.userDir, 'node_modules', packageName)
-                    const packagePath = path.join(modulePath, 'package.json')
-                    // get third party package.json
-                    const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'))
-                    if (packageJson?.['node-red-dashboard-2']) {
-                        // loop over object of widgets
-                        Object.entries(packageJson['node-red-dashboard-2'].widgets).forEach(([widgetName, widgetConfig]) => {
-                            uiShared.contribs[widgetName] = {
-                                package: packageName,
-                                name: widgetName,
-                                src: widgetConfig.output,
-                                component: widgetConfig.component
-                            }
-                        })
-                    }
-                    return packageJson
-                })
-            }
+            uiShared.contribs = loadContribs(node)
 
             /**
              * Configure Web Server to handle UI traffic
@@ -217,6 +188,43 @@ module.exports = function (RED) {
         }
     }
 
+    function loadContribs (node) {
+        // from nodesDir
+        let contribs = { ...uiShared.contribs }
+        if (RED.settings?.nodesDir) {
+            const nodesDir = Array.isArray(RED.settings.nodesDir) ? RED.settings.nodesDir : [RED.settings.nodesDir]
+            for (const dir of nodesDir) {
+                try {
+                    if (!dir || typeof dir !== 'string') { continue }
+                    const _contribs = getThirdPartyWidgets(dir)
+                    contribs = { ...contribs, ..._contribs }
+                } catch (error) {
+                    node.log(`Cannot import third party widgets from nodes directory '${dir}}' package.json`)
+                }
+            }
+        }
+
+        // from user directory package.json
+        if (RED.settings?.userDir) {
+            try {
+                const _contribs = getThirdPartyWidgets(RED.settings.userDir)
+                contribs = { ...contribs, ..._contribs }
+            } catch (error) {
+                node.log('Cannot import third party widgets from user directory package.json')
+            }
+        }
+
+        // from main Node-RED package.json
+        try {
+            const appRoot = path.join(require.main.paths?.[0]?.split('node_modules')[0], '..')
+            const _contribs = getThirdPartyWidgets(appRoot)
+            contribs = { ...contribs, ..._contribs }
+        } catch (error) {
+            node.log('Cannot import third party widgets from main application root package.json')
+        }
+        return contribs
+    }
+
     /**
      * Close the SocketIO Server
      */

package/nodes/utils/index.js

@@ -1,3 +1,6 @@
+const fs = require('fs')
+const path = require('path')
+
 function asyncEvaluateNodeProperty (RED, value, type, node, msg) {
     return new Promise(function (resolve, reject) {
         RED.util.evaluateNodeProperty(value, type, node, msg, function (e, r) {
@@ -54,8 +57,50 @@ function addConnectionCredentials (RED, msg, conn, config) {
     return msg
 }
 
+function getThirdPartyWidgets (directory) {
+    const contribs = {}
+    const packagePath = path.join(directory, 'package.json')
+    if (!fs.existsSync(packagePath)) {
+        return contribs
+    }
+    const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'))
+    const getWidgets = (packageJson) => {
+        if (packageJson?.['node-red-dashboard-2']) {
+            // loop over object of widgets & add to contribs object
+            Object.entries(packageJson['node-red-dashboard-2'].widgets).forEach(([widgetName, widgetConfig]) => {
+                contribs[widgetName] = {
+                    package: packageJson.name,
+                    name: widgetName,
+                    src: widgetConfig.output,
+                    path: path.resolve(directory),
+                    component: widgetConfig.component
+                }
+            })
+        }
+    }
+    if (packageJson?.['node-red-dashboard-2']) {
+        // this _is_ a dashboard node! get its widgets.
+        getWidgets(packageJson)
+    } else if (packageJson && packageJson.dependencies) {
+        // get widgets from dependencies of this package
+        Object.entries(packageJson.dependencies)?.filter(([packageName, _packageVersion]) => {
+            return packageName.includes('node-red-dashboard-2-')
+        }).forEach(([packageName, _packageVersion]) => {
+            const modulePath = path.join(directory, 'node_modules', packageName)
+            const packagePath = path.join(modulePath, 'package.json')
+            // get third party package.json
+            const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'))
+            if (packageJson?.['node-red-dashboard-2']) {
+                getWidgets(packageJson)
+            }
+        })
+    }
+    return contribs
+}
+
 module.exports = {
     asyncEvaluateNodeProperty,
     appendTopic,
-    addConnectionCredentials
+    addConnectionCredentials,
+    getThirdPartyWidgets
 }

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

@@ -11,7 +11,9 @@
         <dt>Segments <span class="property-type">list</span></dt>
         <dd>Collection of objects that define the relevant color for a given value</dd>
         <dt>Label <span class="property-type">list</span></dt>
-        <dd>The title text shown above the gauge</dd>
+        <dd>The label text shown above the gauge</dd>
+        <dt>Defaults <span class="property-type">list</span></dt>
+        <dd>Reset to default min/max and segments based on the selected gauge type</dd>
     </dl>
     <h3>Properties (Half &amp; 3/4 Gauges Only)</h3>
     <dl class="message-properties">
@@ -28,4 +30,48 @@
         <dt>Sizes (Segments) <span class="property-type">number</span></dt>
         <dd>A numerical value, in pixels, that defines the thickness of the segments rendered in the gauge.</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">label <span class="property-type">string</span></dt>
+        <dd>Update the label rendered above the Gauge</dd>
+        <dt class="optional">segments <span class="property-type">array</span></dt>
+        <dd>
+            Change the options available in the dropdown at runtime
+            <ul>
+                <li><code>Array&lt;{color: String, from: Number}&gt;</code></li>
+            </ul>
+        </dd>
+        <dt class="optional">gtype <span class="property-type">see detail</span></dt>
+        <dd>Modify the type of Gauge rendered, with the following options:
+            <ul>
+                <li><code>gauge-battery</code></li>
+                <li><code>gauge-34</code></li>
+                <li><code>gauge-half</code></li>
+                <li><code>gauge-tile</code></li>
+                <li><code>gauge-tank</code></li>
+            </ul>
+        </dd>
+        <dt class="optional">gstyle <span class="property-type">see detail</span></dt>
+        <dd>Modify the style of 3/4 and half Gauge rendered, with the following options: (only applicable to for 3/4 and Half gauges)
+            <ul>
+                <li><code>neelde</code></li>
+                <li><code>rounded</code></li>
+            </ul>
+        </dd>
+        <dt class="optional">min <span class="property-type">number</span></dt>
+        <dd>Change the minimum value the gauge supports</dd>
+        <dt class="optional">max <span class="property-type">number</span></dt>
+        <dd>Change the maximum value the gauge supports</dd>
+        <dt class="optional">prefix <span class="property-type">string</span></dt>
+        <dd>Change the text rendered before the Gauge's value (only applicable to for 3/4 and Half gauges)</dd>
+        <dt class="optional">suffix <span class="property-type">string</span></dt>
+        <dd>Change the text rendered after the Gauge's value (only applicable to for 3/4 and Half gauges)</dd>
+        <dt class="optional">units <span class="property-type">array</span></dt>
+        <dd>Controls the "unit" display underneath the gauge's value for 3/4 and Half gauges (only applicable to for 3/4 and Half gauges)</dd>
+        <dt class="optional">icon <span class="property-type">string</span></dt>
+        <dd>Modify which icon is rendered within the gauge (must be a Material Design icon and only applicable to for 3/4 and Half gauges)</dd>
+        <dt class="optional">class <span class="property-type">string</span></dt>
+        <dd>Add a CSS class, or more, to the Button at runtime.</dd>
+    </dl>
 </script>

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

@@ -28,7 +28,8 @@
             "styling": "Styling",
             "class": "Class",
             "units": "Units",
-            "icon": "Icon"
+            "icon": "Icon",
+            "defaults": "Defaults"
         },
         "errors": {
             "unique": "All 'from' values must be unique."

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

@@ -3,26 +3,37 @@
         Adds a single number input row to your dashboard
     </p>
     <h3>Dynamic Properties (Inputs)</h3>
-    <p>Any of the following can be appended to a <code>msg.</code> in order to override or set properties on this node at runtime.</p>
+    <p>Any of the following can be appended to <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">class <span class="property-type">string</span></dt>
-        <dd>Add a CSS class, or more, to the Button at runtime.</dd>
-        <dd>Range <span class="property-type">number</span></dd>
-        <dd>
-            min - the minimum value the slider can be changed to; max - the maximum value the
-            slider can be changed to; step - the increment/decrement value when the slider is moved.
-        </dd>
+        <dd>Add a CSS class, or more, to the number input at runtime.</dd>
     </dl>
     <dl class="message-properties">
         <dt class="optional">min <span class="property-type">number</span></dt>
-        <dd>The minimum value available on the slider.</dd>
+        <dd>Override the minimum value available on the number input.</dd>
     </dl>
     <dl class="message-properties">
         <dt class="optional">step <span class="property-type">number</span></dt>
-        <dd>The step size to allow a user to select from between the <code>min</code> and <code>max</code> values.</dd>
+        <dd>Override the step size to allow a user to select from between the <code>min</code> and <code>max</code> values.</dd>
     </dl>
     <dl class="message-properties">
         <dt class="optional">max <span class="property-type">number</span></dt>
-        <dd>The maximum value available on the slider.</dd>
+        <dd>Override the maximum value available on the number input.</dd>
+    </dl>
+    <dl class="message-properties">
+        <dt class="optional">label <span class="property-type">string</span></dt>
+        <dd>Override the label displayed on the number input.</dd>
+    </dl>
+    <dl class="message-properties">
+        <dt class="optional">icon <span class="property-type">string</span></dt>
+        <dd>Override the icon defined in the initial configuration.</dd>
+    </dl>
+    <dl class="message-properties">
+        <dt class="optional">clearable <span class="property-type">boolean</span></dt>
+        <dd>Controls whether an "x" appears number on input as a user types in order to quickly clear any added numbers.</dd>
+    </dl>
+    <dl class="message-properties">
+        <dt class="optional">spinner <span class="property-type">string</span></dt>
+        <dd>Set the spinner layout as <code>inline</code> or <code>stacked</code> to control how the spinners appear in the number input.</dd>
     </dl>
   </script>

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

@@ -24,6 +24,8 @@
         <dd>If "Icon" is defined, this property controls which side of the "Label" the icon will render on</dd>
         <dt>Label <span class="property-type">string</span></dt>
         <dd>The text shown within the button. If not provided, then the button will only render the icon. It supports HTML content</dd>
+        <dt>Clickable <span class="property-type">string</span></dt>
+        <dd>The part of the horizontal line that is clickable.  By default only the switch icon will be clickable.</dd>
         <dt>Icon <span class="property-type">default | custom</span></dt>
         <dd>Either use the "default" switch appearance, or define your own custom icons.</dd>
         <dt>On Icon <span class="property-type">string</span></dt>
@@ -55,6 +57,17 @@
         <dt class="optional">label <span class="property-type">string</span></dt>
         <dd>Change the switch label at runtime.</dd>
     </dl>
+    <dl class="message-properties">
+        <dt class="optional">clickableArea <span class="property-type">string</span></dt>
+        <dd>
+            Change the clickable area at runtime:
+            <ul>
+                <li><code>switch</code>: only the switch icon is clickable</li>
+                <li><code>label</code>: both the label text and the switch icon are clickable</li>
+                <li><code>line</code>: the entire line is clickable</li>
+            </ul>
+        </dd>
+    </dl>
     <dl class="message-properties">
         <dt class="optional">passthru <span class="property-type">boolean</span></dt>
         <dd>Change the passthrough behaviour of input messages at runtime.</dd>

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

@@ -4,9 +4,9 @@
     </p>
     <h3>Input</h3>
     <p>
-        The ui-table widget requires an array of data to be sent via <code>msg.payload</code>.
-        The table will then render a row for each object within the array, and, by default, a
-        column for each property in the objects.
+        The ui-table widget requires an array or an object of data to be sent via <code>msg.payload</code>.
+        If an array is provided, the table will render a row for each object within the array, and, by default, a column for each property in the objects.
+        If an object is provided, the table will render a single row with columns for each property in the object.
     </p>
     <h3>Properties</h3>
     <dl class="message-properties">
@@ -15,6 +15,11 @@
             Defines the maximum number of data-rows to render in the table.
             Excess rows will be available through pagination control. Set to "0" for no pagination.
         </dd>
+        <dt>Action <span class="property-type">append | replace</span></dt>
+        <dd>
+            Determines the action taken when new data arrives, and whether the new data is appended
+            to the chart, or replaces the existing contents.
+        </dd>
         <dt>Breakpoint <span class="property-type">str | num</span></dt>
         <dd>
             Controls when a table will render, instead, as a card, with each column from a row rendering

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

@@ -18,7 +18,10 @@
             "selection": "Interaction",
             "search": "Search",
             "showSearch": "Show",
-            "mobileBreakpoint": "Breakpoint"
+            "mobileBreakpoint": "Breakpoint",
+            "action": "Action",
+            "append": "Append",
+            "replace": "Replace"
         },
         "selection": {
             "none": "None",