@flowfuse/node-red-dashboard 0.7.0

package/nodes/config/ui_group.html

@@ -0,0 +1,55 @@
+<script type="text/javascript">
+    RED.nodes.registerType('ui-group', {
+        category: 'config',
+        defaults: {
+            name: {
+                value: 'Group Name',
+                required: true
+            },
+            page: { type: 'ui-page', required: true },
+            width: { value: 6 },
+            height: { value: 1 },
+            order: { value: -1 },
+            disp: { value: true }, // show title on group card
+            className: { value: '' }
+        },
+        label: function () {
+            const page = RED.nodes.node(this.page)?.name || ''
+            return `${this.name} [${page}]` || 'UI Group'
+        },
+        oneditprepare: function () {
+            $('#node-config-input-size').elementSizer({
+                width: '#node-config-input-width',
+                height: '#node-config-input-height',
+                auto: false
+            })
+        }
+    })
+</script>
+
+<script type="text/html" data-template-name="ui-group">
+    <div class="form-row">
+        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> Name</label>
+        <input type="text" id="node-config-input-name">
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-page"><i class="fa fa-bookmark"></i> Page</label>
+        <input type="text" id="node-config-input-page">
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-size"><i class="fa fa-arrows-h"></i> Size</label>
+        <input type="hidden" id="node-config-input-width">
+        <input type="hidden" id="node-config-input-height">
+        <button class="editor-button" id="node-config-input-size"></button>
+    </div>
+    <div class="form-row">
+        <input style="margin:8px 0 10px 102px; width:20px;" type="checkbox" checked id="node-config-input-disp"> <label style="width:auto" for="node-config-input-disp"><span data-i18n="ui-group.display-name"></span></label>
+    </div>
+    <div class="form-row" id="text-row-class">
+        <label for="node-config-input-className"><i class="fa fa-code"></i> Class</label>
+        <input type="text" id="node-config-input-className" placeholder="Optional CSS class name(s) for group"/>
+    </div>
+    <div class="form-row">
+        <button onclick="RED.sidebar.show('dashboard-2.0')" class="editor-button editor-button-small">Open Dashboard 2.0 Sidebar</button>
+    </div>
+</script>

package/nodes/config/ui_group.js

@@ -0,0 +1,34 @@
+module.exports = function (RED) {
+    /**
+     *
+     * @param {*} config
+     */
+    function UIGroupNode (config) {
+        RED.nodes.createNode(this, config)
+        const node = this
+
+        node.on('close', function (removed, done) {
+            node.deregister() // deregister self
+            done()
+        })
+
+        /**
+         * Function for widgets to register themselves with this page
+         * Calls the parent UI Base "register" function and registers this page,
+         * along with the widget
+         * @param {*} widget
+         */
+        node.register = function (widgetNode, widgetConfig, widgetEvents) {
+            const page = RED.nodes.getNode(config.page)
+            const group = config
+            page.register(group, widgetNode, widgetConfig, widgetEvents)
+        }
+
+        node.deregister = function (widgetNode) {
+            const page = RED.nodes.getNode(config.page)
+            const group = config
+            page.deregister(group, widgetNode)
+        }
+    }
+    RED.nodes.registerType('ui-group', UIGroupNode)
+}

package/nodes/config/ui_page.html

@@ -0,0 +1,84 @@
+<script type="text/javascript">
+    RED.nodes.registerType('ui-page', {
+        category: 'config',
+        defaults: {
+            name: {
+                value: 'Page Name',
+                required: true
+            },
+            ui: {
+                type: 'ui-base',
+                value: '',
+                required: true
+            },
+            path: {
+                value: '/',
+                required: false
+            },
+            layout: {
+                value: '',
+                required: true
+            },
+            theme: {
+                type: 'ui-theme',
+                value: 'default',
+                required: true
+            },
+            order: {
+                value: -1
+            },
+            className: { value: '' }
+        },
+        oneditprepare: function () {
+            $('#node-config-input-layout').typedInput({
+                type: 'layout',
+                types: [{
+                    value: 'layout',
+                    options: [
+                        { value: 'grid', label: 'Grid' },
+                        { value: 'flex', label: 'Fixed' },
+                        { value: 'notebook', label: 'Notebook' }
+                    ]
+                }],
+                typeField: '#node-input-layoutType'
+            })
+        },
+        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">
+    <div class="form-row">
+        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> Name</label>
+        <input type="text" id="node-config-input-name">
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-ui"><i class="fa fa-bookmark"></i> UI</label>
+        <input type="text" id="node-config-input-ui">
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-path"><i class="fa fa-bookmark"></i> Path</label>
+        <input type="text" id="node-config-input-path">
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-theme"><i class="fa fa-bookmark"></i> Theme</label>
+        <input type="text" id="node-config-input-theme">
+    </div>
+    <div class="form-row">
+        <label for="node-config-input-layout"><i class="fa fa-bookmark"></i> Layout</label>
+        <input type="text" id="node-config-input-layout">
+        <input type="hidden" id="node-config-input-layoutType">
+    </div>
+    <div class="form-row" id="text-row-class">
+        <label for="node-config-input-className"><i class="fa fa-code"></i> Class</label>
+        <input type="text" id="node-config-input-className" placeholder="Optional CSS class name(s) for page"/>
+    </div>
+    <div class="form-row">
+        <button onclick="RED.sidebar.show('dashboard-2.0')" class="editor-button editor-button-small">Open Dashboard 2.0 Sidebar</button>
+    </div>
+</script>

package/nodes/config/ui_page.js

@@ -0,0 +1,33 @@
+module.exports = function (RED) {
+    /**
+     *
+     * @param {*} config
+     */
+    function UIPageNode (config) {
+        RED.nodes.createNode(this, config)
+        const node = this
+
+        node.on('close', function (removed, done) {
+            node.deregister() // deregister self
+            done()
+        })
+
+        /**
+         * Function for widgets to register themselves with this page
+         * Calls the parent UI Base "register" function and registers this page,
+         * along with the widget
+         * @param {*} widget
+         */
+        node.register = function (group, widgetNode, widgetConfig, widgetEvents) {
+            const ui = RED.nodes.getNode(config.ui)
+            const page = config
+            ui.register(page, group, widgetNode, widgetConfig, widgetEvents)
+        }
+        node.deregister = function (group, widgetNode) {
+            const ui = RED.nodes.getNode(config.ui)
+            const page = config
+            ui.deregister(page, group, widgetNode)
+        }
+    }
+    RED.nodes.registerType('ui-page', UIPageNode)
+}

package/nodes/config/ui_theme.html

@@ -0,0 +1,101 @@
+<script type="text/javascript">
+    RED.nodes.registerType('ui-theme', {
+        category: 'config',
+        defaults: {
+            name: {
+                value: 'Theme Name',
+                required: true
+            },
+            // colors
+            colors: {
+                value: null
+            }
+        },
+        oneditprepare: function () {
+            if (!this.colors) {
+                this.colors = {}
+                // set default values
+                this.colors.surface = '#ffffff'
+                this.colors.primary = '#0094CE'
+                // pages
+                this.colors.bgPage = '#eeeeee'
+                // groups
+                this.colors.groupBg = '#ffffff'
+                this.colors.groupOutline = '#cccccc'
+            }
+
+            // loop over keys in this.colors
+            Object.keys(this.colors).forEach((color) => {
+                // get the value of the key
+                const value = this.colors[color]
+                // set the value of the input
+                $('#node-config-input-' + color).val(value)
+            })
+
+            // update label b/g to match the colour input values
+            // this provides nicer styling than the default browser styling
+            const colorWrappers = $('.color-picker-wrapper')
+            colorWrappers.each(function (i) {
+                const wrapper = $(this)
+                const colorPicker = wrapper.children("input[type='color']").eq(0)
+                colorPicker.on('change', () => {
+                    wrapper.css('background-color', colorPicker.val())
+                })
+                wrapper.css('background-color', colorPicker.val())
+            })
+        },
+        oneditsave: function () {
+            // update our config values from the input values
+            Object.keys(this.colors).forEach((color) => {
+                // set the value of the input
+                this.colors[color] = $('#node-config-input-' + color).val()
+            })
+        },
+        label: function () {
+            return `${this.name}` || 'UI Theme'
+        }
+    })
+</script>
+
+<script type="text/html" data-template-name="ui-theme">
+    <div class="form-row">
+        <label for="node-config-input-name"><i class="fa fa-bookmark"></i> Name</label>
+        <input type="text" id="node-config-input-name">
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-bookmark"></i> Surface</label>
+        <label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+            <input type="color" id="node-config-input-surface" style="opacity: 0; width: 100%;"/>
+        </label>
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-bookmark"></i> Primary</label>
+        <label class="color-picker-wrapper" for="node-config-input-primary" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+            <input type="color" id="node-config-input-primary" style="opacity: 0; width: 100%;"/>
+        </label>
+    </div>
+    <div class="form-row">
+        <h4 style="margin-bottom: 0;">Pages</h4>
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-bookmark"></i> Background</label>
+        <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+            <input type="color" id="node-config-input-bgPage" style="opacity: 0; width: 100%;"/>
+        </label>
+    </div>
+    <div class="form-row">
+        <h4 style="margin-bottom: 0;">Groups</h4>
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-bookmark"></i> Background</label>
+        <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+            <input type="color" id="node-config-input-groupBg" style="opacity: 0; width: 100%;"/>
+        </label>
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-bookmark"></i> Outline</label>
+        <label class="color-picker-wrapper" for="node-config-input-background" style="width: 100px; height: 32px; border-radius: 6px; border: 1px solid #ccc">
+            <input type="color" id="node-config-input-groupOutline" style="opacity: 0; width: 100%;"/>
+        </label>
+    </div>
+</script>

package/nodes/config/ui_theme.js

@@ -0,0 +1,15 @@
+module.exports = function (RED) {
+    /**
+     *
+     * @param {*} config
+     */
+    function UIThemeNode (config) {
+        RED.nodes.createNode(this, config)
+        const node = this
+
+        // eslint-disable-next-line no-unused-vars
+        const { id, name, type, _users, ...rest } = config
+        node.colors = { ...rest.colors }
+    }
+    RED.nodes.registerType('ui-theme', UIThemeNode)
+}

package/nodes/store/index.js

@@ -0,0 +1,34 @@
+const data = {}
+
+const getters = {
+    // given a widget id, return the latest msg received
+    msg (id) {
+        return data[id]
+    }
+}
+
+const setters = {
+    // remove data associated to a given widget
+    clear (id) {
+        delete data[id]
+    },
+    // given a widget id, and msg, store that latest value
+    save (id, msg) {
+        data[id] = msg
+    },
+    // given a widget id, and msg, store in an array of history of values
+    // useful for charting widgets
+    append (id, msg) {
+        if (!data[id]) {
+            data[id] = []
+        }
+        data[id].push(msg)
+    }
+}
+
+module.exports = {
+    get: getters.msg,
+    save: setters.save,
+    append: setters.append,
+    clear: setters.clear
+}

package/nodes/utils/index.js

@@ -0,0 +1,35 @@
+function asyncEvaluateNodeProperty (RED, value, type, node, msg) {
+    return new Promise(function (resolve, reject) {
+        RED.util.evaluateNodeProperty(value, type, node, msg, function (e, r) {
+            if (e) {
+                reject(e)
+            } else {
+                resolve(r)
+            }
+        })
+    })
+}
+
+async function appendTopic (RED, config, wNode, msg) {
+    // populate topic if the node specifies one
+    if (config.topic || config.topicType) {
+        try {
+            msg.topic = await asyncEvaluateNodeProperty(RED, config.topic, config.topicType || 'str', wNode, msg) || ''
+        } catch (_err) {
+            // do nothing
+            console.error(_err)
+        }
+    }
+
+    // ensure we have a topic property in the msg, even if it's an empty string
+    if (!('topic' in msg)) {
+        msg.topic = ''
+    }
+
+    return msg
+}
+
+module.exports = {
+    asyncEvaluateNodeProperty,
+    appendTopic
+}

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

@@ -0,0 +1,7 @@
+<script type="text/html" data-help-name="ui-button">
+    <p>Adds a button to the user interface.</p>
+    <p>
+        Clicking the button generates a message with <code>msg.payload</code>
+        set to the <b>Payload</b> field, and <code>msg.topic</code> to the <b>Topic</b> field.
+    </p>
+</script>

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

@@ -0,0 +1,24 @@
+{
+    "ui-button": {
+        "label": {
+            "group": "Group",
+            "size": "Size",
+            "icon": "Icon",
+            "optionalIcon": "optional icon",
+            "label": "Label",
+            "optionalLabel": "optional label",
+            "tooltip": "Tooltip",
+            "optionalTooltip": "optional tooltip",
+            "color": "Color",
+            "optionalColor": "optional text/icon color",
+            "background": "Background",
+            "optionalBackgroundColor": "optional background color",
+            "whenClicked": "When clicked, send:",
+            "payload": "Payload",
+            "topic": "Topic",
+            "emulateClick": "If msg arrives on input, emulate a button click:",
+            "className": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s) for widget"
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+
+<script type="text/html" data-help-name="ui-chart">
+    <h3>Properties</h3>
+    <dl class="message-properties">
+        <dt>Label <span class="property-type">str</span></dt>
+        <dd>Text shown above the rendered chart in the Dashboard.</dd>
+        <dt>Type <span class="property-type">line | bar | scatter</span></dt>
+        <dd>Choose the type of graph that you wish to render data with. Note
+            that different data structures are accepted for different chart types.</dd>
+        <dt>Show Legend <span class="property-type">bool</span></dt>
+        <dd>Defines whether or not a legend is shown between the title and the chart. Each label is driven by <code>msg.topic</code>.</dd>
+        <dt>X-Axis Type <span class="property-type">linear | categorical | time</span></dt>
+        <dd>
+            For charts with an x-axis, this option allows customisation
+            of the type of axis to render.
+        </dd>
+        <dt>Properties <span class="property-type">string</span></dt>
+        <dd>
+            <p><b>Series:</b> Controls how you want to set the Series of data stream into this widget. The default is <code>msg.topic</code>, where separate topics will render to a new line/bar in their respective plots.</p>
+            <p><b>X:</b> Only available for Line & Scatter Charts. This defines the key (which can be nested) of the value that should be plotted onto the x-axis. If left blank, the x-value will be calculated as the current timestamp.</p>
+            <p><b>Y:</b> Defines the key (which can be nested, e.g. <code>'nested.value'</code>) of the value that should be plotted onto the x-axis. This value is ignored if injecting single numerical values into the chart.</p>
+        </dd>
+    </dl>
+    <h3>Input</h3>
+    <p>Data can be passed into the Chart node in a variety of formats,
+    depending on the "X-Axis Type" (e.g. linear, categorical, time).</p>
+    <dl class="message-properties">
+        <dt>Numerical <span class="property-type">linear | categorical | time</span></dt>
+        <dd><pre>msg.payload = 5</pre> A single value, that will be plotted
+            in the y-axis, and the current time of injection as the x-value.</dd>
+        <dt>Series <span class="property-type">linear | categorical | time</span></dt>
+        <dd><pre>msg.topic = 'Series 1'</pre> Multiple series can
+            be shown on the same chart by using a different msg.topic value on each
+            input message.</dd>
+        <dt>Object <span class="property-type">linear</span></dt>
+        <dd><pre>msg.payload = {x: 10, y: 15}</pre>This type of data is only
+            supported on linear plots, e.g. "Line" or "Scatter" charts.</dd>
+    </dl>
+    <h3>Details</h3>
+    <p></p>
+</script>

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

@@ -0,0 +1,17 @@
+{
+    "ui-chart": {
+        "label": {
+            "seriesColors": "Series Colors",
+            "seconds": "Seconds",
+            "minutes": "Minutes",
+            "hours": "Hours",
+            "days": "Days",
+            "weeks": "Weeks",
+            "or": "OR",
+            "points": "points",
+            "xLimit": "X-Axis Limit",
+            "xType": "X-Axis Type",
+            "last": "last"
+        }
+    }
+  }

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

@@ -0,0 +1,24 @@
+<script type="text/html" data-help-name="ui-dropdown">
+    <p>
+        Adds a dropdown to your dashboard that will emit values
+        in Node-RED under `msg.payload` anytime it's value is changed.
+    </p>
+    <p>
+        In the case where a single option is selected, returns the object detailing that selection.
+        If "Allow multiple selections" is enabled, returns an array of objects detailing the selections.
+    </p>
+    <h3>Selecting Options via <code>msg.</code></h3>
+    <p>
+        You can dynamically make selections for this dropdown by passing in the respective <code>value</code> to <code>msg.payload</code>.
+    </p>
+    <p>
+        To make a single selection, pass in the <code>value</code> of the option as <code>msg.payload</code>, e.g. <code>msg.payload = "option1"</code>.
+    </p>
+    <p>
+        To make a multi-selection selection, you must first have "Allow Multiple" enabled on the node, you can then
+        pass an Array of <code>value</code> of the respective options as <code>msg.payload</code>, e.g. <code>msg.payload = ["option1", "option2"]</code>.
+    </p>
+    <p>
+        To clear any selection for a dropdown, pass an empty array <code>[]</code> as <code>msg.payload</code>.
+    </p>
+</script>

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

@@ -0,0 +1,16 @@
+<script type="text/html" data-help-name="ui-form">
+    <p>Adds a form to user interface.</p>
+    <p>Helps to collect multiple value from the user on submit button click as an object in <code>msg.payload</code> </p>
+    <p>Multiple input elements can be added using add elements button</p>
+    <p>Each element contains following components:</p>
+    <ul>
+        <li> <b>Label</b> : Value that will be the label of the element in the user interface</li>
+        <li> <b>Name</b> : Represents the key (variable name) in the <code>msg.payload</code> in which the value of the corresponding element present</li>
+        <li> <b>Type</b> : Drop down option to select the type of input element</li>
+        <li> <b>Required</b> : On switching on the user has to supply the value before submitting</li>
+        <li> <b>Rows</b> : number of UI rows for multiline text input</li>
+        <li> <b>Delete</b> : To remove the current element from the form</li>
+    </ul>
+    <p>Optionally the <b>Topic</b> field can be used to set the <code>msg.topic</code> property.</p>
+    <p>The Cancel button can be hidden by setting it's value to be blank "".</p>
+</script>

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

@@ -0,0 +1,36 @@
+{
+    "ui-form": {
+        "label": {
+            "group": "Group",
+            "size": "Size",
+            "label": "Label",
+            "optionalLabel": "optional label",
+            "formElements": "Form elements",
+            "type": "Type",
+            "required": "Required",
+            "rows": "Rows",
+            "remove": "Remove",
+            "egName": "e.g. Name",
+            "egName2": "e.g. name",
+            "text": "Text",
+            "multiline": "Multiline",
+            "number": "Number",
+            "email": "E-mail",
+            "password": "Password",
+            "checkbox": "Checkbox",
+            "switch": "Switch",
+            "date": "Date",
+            "time": "Time",
+            "element": "element",
+            "buttons": "Buttons",
+            "submitButtonText": "submit button text",
+            "cancelButtonText": "cancel button text",
+            "topic": "Topic",
+            "optionalMsgTopic": "optional msg.topic",
+            "splitLayout":"Place the form elements in two columns",
+            "resetOnSubmit":"Reset the form when submitted",
+            "className": "Class",
+            "classNamePlaceholder": "Optional CSS class name(s) for widget"
+        }
+    }
+  }

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

@@ -0,0 +1,10 @@
+<script type="text/html" data-help-name="ui-text">
+    <p>
+        Converts markdown to rendered HTML int the Dashboard.
+    </p>
+    <p>
+        Can be use for rendering labels, headers or even full blog articles. If you're
+        looking for a quick cheat sheet on how to write Markdown, you can check out
+        FlowFuse's guide <a href="https://flowfuse.com/handbook/development/markdown-how-to/#markdown-how-to" target="_blank">here</a>.
+    </p>
+</script>

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

@@ -0,0 +1,9 @@
+
+<script type="text/html" data-help-name="ui-slider">
+    <p>Adds a slider widget to the user interface.</p>
+    <p>
+        The user can change its value between the limits (<b>min</b> and <b>max</b>).
+        Each value change will generate a message with the value set as <b>payload</b>.
+    </p>
+    <p>The slider can be reversed by setting the min value larger than the max value. e.g. min 100, max 0.</p>
+</script>

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

@@ -0,0 +1,32 @@
+<script type="text/html" data-help-name="ui-switch">
+    <p>
+        Adds a toggle switch to the user interface.
+    </p>
+    <p>
+        Each change in the state of the switch will generate
+        a <code>msg.payload</code> with the specified <b>On</b> and <b>Off</b> values.
+    </p>
+    <p>
+        The <b>On/Off Color</b> and <b>On/Off Icon</b> are optional fields. If the icons are present, the default
+        toggle switch will be replaced with the relevant icons and their respective colors (if defined).
+    </p>
+    <p>
+        The <b>On/Off Icon</b> field can be either a <a href="https://klarsys.github.io/angular-material-icons/" target="_blank">Material Design icon</a>
+        <i>(e.g. 'check', 'close')</i> or a <a href="https://fontawesome.com/v4.7.0/icons/" target="_blank">Font Awesome icon</a>
+        <i>(e.g. 'fa-fire')</i>, or a <a href="https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md">Weather icon</a>.
+        You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.
+    </p>
+    <p>
+        The switch state can be updated by an incoming <code>msg.payload</code>. The values must either be <code>true</code>/<code>false</code>
+        or match the specified type (number, string, etc) in the node's configuration.</p>
+    <!-- <p>
+        The label can also be set by a message property by setting
+    the field to the name of the property, for example <code>{{msg.topic}}</code>.</p>
+    <p>If a <b>Topic</b> is specified, it will be added to the output as <code>msg.topic</code>.</p> -->
+    <!-- <p>Setting <code>msg.enabled</code> to <code>false</code> will disable the switch widget.</p> -->
+    <!-- <p>
+        If a <b>Class</b> is specified, it will be added to the parent card. This way you can style the card
+        and the elements inside it with custom CSS. The Class can be set at runtime by setting a
+        <code>msg.className</code> string property.
+    </p> -->
+</script>