@flowfuse/node-red-dashboard 1.16.1-ee4508a-202409161000.0 → 1.17.0

package/nodes/config/ui_page.html

@@ -1,107 +1,256 @@
+<style>
+    .red-ui-editableList-header.node-config-list-breakpoints-header {
+        display: flex;
+        gap: 12px;
+        margin: 0 33px 0 5px;
+        padding: 6px 0 3px;
+    }
+    .node-config-list-breakpoints-header > div,
+    .node-config-list-breakpoints-item input {
+        width: 33.3%;
+    }
+    .node-config-list-breakpoints-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-right: 28px;
+    }
+    .node-config-list-breakpoints-item label {
+        width: 50px;
+    }
+    #node-config-list-breakpoints li {
+        border-bottom: none;
+    }
+    .node-config-breakpoints-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .node-config-breakpoints-actions {
+
+    }
+</style>
+
 <script type="text/javascript">
-    RED.nodes.registerType('ui-page', {
-        category: 'config',
-        defaults: {
-            name: {
-                value: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.pageName'),
-                required: true
-            },
-            ui: {
-                type: 'ui-base',
-                value: '',
-                required: true
-            },
-            path: {
-                value: -1,
-                required: false
-            },
-            icon: {
-                value: 'home',
-                required: false
-            },
-            layout: {
-                value: '',
-                required: true
-            },
-            theme: {
-                type: 'ui-theme',
-                value: 'default',
-                required: true
-            },
-            order: {
-                value: -1
+    (async function () {
+        // convert to i18 text
+        function c_ (x) {
+            return RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.' + x)
+        }
+        RED.nodes.registerType('ui-page', {
+            category: 'config',
+            defaults: {
+                name: {
+                    value: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.pageName'),
+                    required: true
+                },
+                ui: {
+                    type: 'ui-base',
+                    value: '',
+                    required: true
+                },
+                path: {
+                    value: -1,
+                    required: false
+                },
+                icon: {
+                    value: 'home',
+                    required: false
+                },
+                layout: {
+                    value: '',
+                    required: true
+                },
+                theme: {
+                    type: 'ui-theme',
+                    value: 'default',
+                    required: true
+                },
+                breakpoints: {
+                    value: [
+                        { name: 'Default', px: 0, cols: 3 },
+                        { name: 'Tablet', px: 576, cols: 6 },
+                        { name: 'Small Desktop', px: 768, cols: 9 },
+                        { name: 'Desktop', px: 1024, cols: 12 }
+                    ]
+                },
+                order: {
+                    value: -1
+                },
+                className: { value: '' },
+                visible: { value: 'true' },
+                disabled: { value: 'false' }
             },
-            className: { value: '' },
-            visible: { value: 'true' },
-            disabled: { value: 'false' }
-        },
-        oneditprepare: function () {
-            if (this.path === -1) {
+            oneditprepare: function () {
+                if (this.path === -1) {
                 // we have no path set yet
-                let pageCount = 0
-                RED.nodes.eachConfig((cNode) => {
-                    pageCount += cNode.type === 'ui-page' ? 1 : 0
+                    let pageCount = 0
+                    RED.nodes.eachConfig((cNode) => {
+                        pageCount += cNode.type === 'ui-page' ? 1 : 0
+                    })
+                    this.path = '/page' + (pageCount + 1)
+                    $('#node-config-input-path').val(this.path)
+                }
+
+                $('#node-config-input-layout').typedInput({
+                    type: 'layout',
+                    types: [{
+                        value: 'layout',
+                        options: [
+                            { value: 'grid', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.grid') },
+                            { value: 'flex', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.fixed') },
+                            { value: 'tabs', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.tabs') },
+                            { value: 'notebook', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.notebook') }
+                        ]
+                    }],
+                    typeField: '#node-input-layoutType'
                 })
-                this.path = '/page' + (pageCount + 1)
-                $('#node-config-input-path').val(this.path)
-            }
 
-            $('#node-config-input-layout').typedInput({
-                type: 'layout',
-                types: [{
-                    value: 'layout',
-                    options: [
-                        { value: 'grid', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.grid') },
-                        { value: 'flex', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.fixed') },
-                        { value: 'tabs', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.tabs') },
-                        { value: 'notebook', label: RED._('@flowfuse/node-red-dashboard/ui-page:ui-page.label.notebook') }
-                    ]
-                }],
-                typeField: '#node-input-layoutType'
-            })
-
-            // backwards compatibility - because NR can't do boolean values on dropdowns
-            if (this.visible === false || this.visible === 'false') {
-                this.visible = false
-                $('#node-config-input-visible').val('false')
-            } else {
-                this.visible = true
-                $('#node-config-input-visible').val('true')
-            }
+                $('#node-config-input-layout').on('change', function (event, type, value) {
+                // show for the others
+                    if (value === 'flex') {
+                        $('#node-config-container-breakpoints').hide()
+                    } else {
+                        $('#node-config-container-breakpoints').show()
+                    }
+                })
 
-            // backwards compatibility
-            if (this.disabled === 'true' || this.disabled === true) {
-                this.disabled = true
-                $('#node-config-input-disabled').val('true')
-            } else {
-                this.disabled = false
-                $('#node-config-input-disabled').val('false')
-            }
-        },
-        oneditsave: function () {
-            // convert string to boolean
-            const visible = $('#node-config-input-visible').val()
-            if (visible === 'true') {
-                this.visible = true
-            } else {
-                this.visible = false
-            }
+                // Breakpoints Editable List
+                const breakpointsList = $('#node-config-list-breakpoints').editableList({
+                    header: $('<div>').addClass('node-config-list-breakpoints-header')
+                        .append($.parseHTML('<div>' + c_('label.name') + '</div>' +
+                        '<div>' + c_('label.breakpoint') + '</div>' +
+                        '<div>' + c_('label.columns') + '</div>')),
+                    addItem: function (container, i, breakpoint) {
+                        const row = $('<div>').addClass('node-config-list-breakpoints-item').appendTo(container)
+                        // Value Field
+                        $('<input/>').addClass('node-input-breakpoint-name')
+                            .attr('type', 'text')
+                            .attr('placeholder', 'Mobile (sm)')
+                            .val(breakpoint.name)
+                            .attr('disabled', () => {
+                                return i === 0
+                            })
+                            .appendTo(row)
+
+                        $('<input/>').addClass('node-input-breakpoint-px')
+                            .attr('type', 'text')
+                            .attr('required', 'true')
+                            .attr('placeholder', '1024')
+                            .val(breakpoint.px)
+                            .attr('disabled', () => {
+                                return i === 0
+                            })
+                            .appendTo(row)
 
-            // convert string to boolean
-            const disabled = $('#node-config-input-disabled').val()
-            if (disabled === 'true') {
-                this.disabled = true
-            } else {
-                this.disabled = false
+                        // Label field
+                        $('<input/>').addClass('node-input-breakpoint-cols')
+                            .attr('type', 'text')
+                            .attr('required', 'true')
+                            .attr('placeholder', '12')
+                            .val(breakpoint.cols)
+                            .appendTo(row)
+    
+                        // remove button
+                        const removeButton = $('<a href="#" class="red-ui-editableList-item-remove red-ui-button red-ui-button-small"><i class="fa fa-remove"></i></a>')
+                        removeButton.on('click', function (e) {
+                            e.preventDefault()
+                            if (i > 0) {
+                                breakpointsList.editableList('removeItem', breakpoint)
+                            }
+                        })
+                        if (i > 0) {
+                            row.append(removeButton)
+                        }
+                        return row
+                    }
+                })
+
+                // set defaults
+                const defaultBreakpoints = [
+                    { name: 'Default', px: 0, cols: 3 },
+                    { name: 'Tablet', px: 576, cols: 6 },
+                    { name: 'Small Desktop', px: 768, cols: 9 },
+                    { name: 'Desktop', px: 1024, cols: 12 }
+                ]
+
+                if (!this.breakpoints) {
+                    this.breakpoints = defaultBreakpoints
+                }
+
+                for (let i = 0; i < this.breakpoints.length; i++) {
+                    const breakpoint = this.breakpoints[i]
+                    breakpointsList.editableList('addItem', breakpoint)
+                }
+
+                // setup reset to defaults button
+                $('#node-config-breakpoints-reset').on('click', function (e) {
+                    e.preventDefault()
+                    breakpointsList.editableList('empty')
+                    for (let i = 0; i < defaultBreakpoints.length; i++) {
+                        const breakpoint = defaultBreakpoints[i]
+                        breakpointsList.editableList('addItem', breakpoint)
+                    }
+                })
+
+                // backwards compatibility - because NR can't do boolean values on dropdowns
+                if (this.visible === false || this.visible === 'false') {
+                    this.visible = false
+                    $('#node-config-input-visible').val('false')
+                } else {
+                    this.visible = true
+                    $('#node-config-input-visible').val('true')
+                }
+
+                // backwards compatibility
+                if (this.disabled === 'true' || this.disabled === true) {
+                    this.disabled = true
+                    $('#node-config-input-disabled').val('true')
+                } else {
+                    this.disabled = false
+                    $('#node-config-input-disabled').val('false')
+                }
+            },
+            oneditsave: function () {
+                const node = this
+                // convert string to boolean
+                const visible = $('#node-config-input-visible').val()
+                if (visible === 'true') {
+                    this.visible = true
+                } else {
+                    this.visible = false
+                }
+
+                // convert string to boolean
+                const disabled = $('#node-config-input-disabled').val()
+                if (disabled === 'true') {
+                    this.disabled = true
+                } else {
+                    this.disabled = false
+                }
+
+                // breakpoints
+                const breakpoints = $('#node-config-list-breakpoints').editableList('items')
+    
+                node.breakpoints = []
+                breakpoints.each(function (i) {
+                    const row = $(this)
+                    const breakpoint = {
+                        name: row.find('.node-input-breakpoint-name').val(),
+                        px: row.find('.node-input-breakpoint-px').val(),
+                        cols: row.find('.node-input-breakpoint-cols').val()
+                    }
+                    node.breakpoints.push(breakpoint)
+                })
+            },
+            label: function () {
+                const baseNode = RED.nodes.node(this.ui)
+                const base = baseNode ? baseNode.path : '/'
+                const path = this.path || ''
+                return `${this.name} [${base}${path}]` || 'UI Page'
             }
-        },
-        label: function () {
-            const baseNode = RED.nodes.node(this.ui)
-            const base = baseNode ? baseNode.path : '/'
-            const path = this.path || ''
-            return `${this.name} [${base}${path}]` || 'UI Page'
-        }
-    })
+        })
+    })()
 </script>
 
 <script type="text/html" data-template-name="ui-page">
@@ -134,6 +283,21 @@
         <label for="node-config-input-className"><i class="w-16 fa fa-code"></i> <span data-i18n="ui-page.label.class"></label>
         <input type="text" id="node-config-input-className" data-i18n="[placeholder]ui-page.label.classNamePlaceholder"/>
     </div>
+    <div id="node-config-container-breakpoints">
+        <div class="form-row node-config-breakpoints-header" style="font-weight: 600;">
+            <div>
+                <i class="w-16 fa fa-mobile"></i> <span data-i18n="ui-page.label.responsiveness">
+            </div>
+            <div class="node-config-breakpoints-actions">
+                <button id="node-config-breakpoints-reset" type="button" class="red-ui-button red-ui-button-small" style="margin-top: 4px; margin-right: 5px;" title="add an item">
+                    <i class="fa fa-refresh"></i><span> <span data-i18n="ui-page.label.reset"></span>
+                </button>
+            </div>
+        </div>
+        <div class="form-row">
+            <ol id="node-config-list-breakpoints"></ol>
+        </div>
+    </div>
     <div class="form-row" style="font-weight: 600;">
         <i class="w-16 fa fa-eye"></i> <span data-i18n="ui-page.label.defaultState">
     </div>

package/nodes/config/ui_page.js

@@ -28,6 +28,15 @@ module.exports = function (RED) {
             config.visible = (config.visible === 'true' || config.visible === true)
         }
 
+        if (!('breakpoints' in config)) {
+            config.breakpoints = [
+                { name: 'Default', px: 0, cols: 3 },
+                { name: 'Tablet', px: 576, cols: 6 },
+                { name: 'Small Desktop', px: 768, cols: 9 },
+                { name: 'Desktop', px: 1024, cols: 12 }
+            ]
+        }
+
         const ui = RED.nodes.getNode(config.ui)
 
         // register self

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">
@@ -31,7 +33,7 @@
     <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">title <span class="property-type">string</span></dt>
+        <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>

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_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",