@flowfuse/node-red-dashboard 0.7.0

package/nodes/widgets/ui_text.js

@@ -0,0 +1,98 @@
+module.exports = function (RED) {
+    function TextNode (config) {
+        const node = this
+
+        RED.nodes.createNode(this, config)
+
+        let style = ''
+        if (config.style) {
+            if (config.color) {
+                style += `color: ${config.color};`
+            }
+            if (config.fontSize) {
+                style += `font-size: ${config.fontSize}px;`
+                style += `line-height: ${config.fontSize}px;`
+            }
+            if (config.font) {
+                style += `font-family: ${config.font};`
+            }
+            config.style = style
+        }
+
+        // which group are we rendering this widget
+        const group = RED.nodes.getNode(config.group)
+        // inform the dashboard UI that we are adding this node
+        group.register(node, config)
+    }
+
+    RED.nodes.registerType('ui-text', TextNode)
+}
+
+// module.exports = function(RED) {
+//     var ui = require('../ui')(RED);
+
+//     function TextNode(config) {
+//         RED.nodes.createNode(this, config);
+//         var node = this;
+
+//         var group = RED.nodes.getNode(config.group);
+//         if (!group) { return; }
+//         var tab = RED.nodes.getNode(group.config.tab);
+//         if (!tab) { return; }
+
+//         var layout = config.layout||"row-spread";
+//         var angLayout = "row";
+//         var angLayoutAlign = "space-between center";
+//         if (layout === "row-spread") { angLayout = 'row'; angLayoutAlign = 'space-between center'}
+//         else if (layout === "row-left") { angLayout = 'row'; angLayoutAlign = 'start center'}
+//         else if (layout === "row-center") { angLayout = 'row'; angLayoutAlign = 'center center'}
+//         else if (layout === "row-right") { angLayout = 'row'; angLayoutAlign = 'end center'}
+//         else if (layout === "col-center") { angLayout = 'column'; angLayoutAlign = 'center center'}
+//         let style = "";
+//         if (config.style) {
+//             if (config.color) {
+//                 style += `color: ${config.color};`
+//             }
+//             if (config.fontSize) {
+//                 style += `font-size: ${config.fontSize}px;`
+//             }
+//             if (config.font) {
+//                 style += `font-family: ${config.font};`
+//             }
+//         }
+//         var done = ui.add({
+//             emitOnlyNewValues: false,
+//             node: node,
+//             tab: tab,
+//             group: group,
+//             control: {
+//                 type: 'text',
+//                 label: config.label,
+//                 order: config.order,
+//                 format: config.format,
+//                 width: config.width || group.config.width || 6,
+//                 height: config.height || 1,
+//                 layout: angLayout,
+//                 layoutAlign: angLayoutAlign,
+//                 className: config.className || '',
+//                 style: style,
+//             },
+//             convert: function(value,oldValue,msg) {
+//                 if (value !== undefined && value !== null) {
+//                     if (Buffer.isBuffer(value)) {
+//                         value = value.toString('binary');
+//                     }
+//                     else {
+//                         value = value.toString();
+//                     }
+//                 }
+//                 else {
+//                     msg.payload = oldValue;
+//                 }
+//                 return value;
+//             }
+//         });
+//         node.on("close", done);
+//     }
+//     RED.nodes.registerType("ui_text", TextNode);
+// };

package/nodes/widgets/ui_text_input.html

@@ -0,0 +1,141 @@
+<script type="text/javascript">
+    (function () {
+        function hasProperty (obj, prop) {
+            return Object.prototype.hasOwnProperty.call(obj, prop)
+        }
+        RED.nodes.registerType('ui-text-input', {
+            category: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.label.category'),
+            color: RED._('@flowforge/node-red-dashboard/ui-base:ui-base.colors.light'),
+            defaults: {
+                group: { type: 'ui-group', required: true },
+                name: { value: '' },
+                label: { value: 'text' },
+                order: { value: 0 },
+                width: {
+                    value: 0,
+                    validate: function (v) {
+                        const width = v || 0
+                        const currentGroup = $('#node-input-group').val() || this.group
+                        const groupNode = RED.nodes.node(currentGroup)
+                        const valid = !groupNode || +width <= +groupNode.width
+                        $('#node-input-size').toggleClass('input-error', !valid)
+                        return valid
+                    }
+                },
+                height: { value: 0 },
+                topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
+                topicType: { value: 'msg' },
+                mode: { value: 'text', required: true },
+                passthru: { value: true },
+                className: { value: '' }
+            },
+            inputs: 1,
+            outputs: 1,
+            outputLabels: function () { return this.mode },
+            icon: 'font-awesome/fa-i-cursor',
+            paletteLabel: 'text input',
+            oneditprepare: function () {
+                $('#node-input-size').elementSizer({
+                    width: '#node-input-width',
+                    height: '#node-input-height',
+                    group: '#node-input-group'
+                })
+                // topic
+                $('#node-input-topic').typedInput({
+                    default: 'str',
+                    typeField: $('#node-input-topicType'),
+                    types: ['str', 'msg', 'flow', 'global']
+                })
+
+                // 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
+                    }
+                })
+            },
+            label: function () {
+                return this.name || (~this.label.indexOf('{' + '{') ? null : this.label) || this.mode + ' input'
+            },
+            labelStyle: function () { return this.name ? 'node_label_italic' : '' }
+        })
+    })()
+</script>
+
+<script type="text/html" data-template-name="ui-text-input">
+    <div class="form-row">
+        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
+        <input type="text" id="node-input-name">
+    </div>
+    <div class="form-row">
+        <label for="node-input-group"><i class="fa fa-table"></i> Group</label>
+        <input type="text" id="node-input-group">
+    </div>
+    <div class="form-row">
+        <label><i class="fa fa-object-group"></i> Size</label>
+        <input type="hidden" id="node-input-width">
+        <input type="hidden" id="node-input-height">
+        <button class="editor-button" id="node-input-size"></button>
+    </div>
+    <div class="form-row">
+        <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
+        <input type="text" id="node-input-label">
+    </div>
+    <div class="form-row">
+        <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
+        <div style="display: inline;">
+            <input style="width: 70%;" type="text" id="node-input-className" placeholder="Optional CSS class name(s)" style="flex-grow: 1;">
+            <a
+                data-html="true"
+                title="Dynamic Property: Class names can also be set by sending a message to the node with a msg.topic of 'ui-property:class' and a payload containing the class name(s) to be applied. NOTE: classes set at runtime will be applied in addition to any class(es) set in the nodes class field."
+                class="red-ui-button ui-node-popover-title"
+                style="margin-left: 4px; cursor: help; font-size: 0.625rem; border-radius: 50%; width: 24px; height: 24px; display: inline-flex; justify-content: center; align-items: center;">
+                <i style="font-family: ui-serif;">fx</i>
+            </a>
+        </div>
+    </div>
+    <div class="form-row">
+        <label for="node-input-mode"><i class="fa fa-keyboard-o"></i> Mode</label>
+        <select id="node-input-mode">
+            <option value="text">text input (single line)</option>
+            <option value="textarea">text area (multi-line)</option>
+            <option value="email">email address</option>
+            <option value="password">password</option>
+            <option value="number">number</option>
+            <option value="color">color picker</option>
+            <option value="time">time picker</option>
+            <option value="week">week picker</option>
+            <option value="month">month picker</option>
+            <option value="datetime-local">datetime picker</option>
+        </select>
+        <!--<label for="node-input-delay" style="text-align:right; width:100px"><i class="fa fa-clock-o"></i> Delay (ms)</label>
+        <input type="text" style="width:58px" id="node-input-delay">-->
+    </div>
+    <div class="form-row">
+        <label for="node-input-topic" style="padding-left:25px; margin-right:-25px">Topic</label>
+        <input type="text" id="node-input-topic">
+        <input type="hidden" id="node-input-topicType">
+    </div>
+    <div class="form-row">
+        <label style="width:auto" for="node-input-passthru"><i class="fa fa-arrow-right"></i> If <code>msg</code> arrives on input, pass through to output: </label>
+        <input type="checkbox" checked id="node-input-passthru" style="display:inline-block; width:auto; margin-top: 0; margin-left: 3px;">
+    </div>
+    <!--<div class="form-row">
+        <label style="width:auto" for="node-input-sendOnBlur">Send value on focus leave: </label>
+        <input type="checkbox" checked id="node-input-sendOnBlur" style="display:inline-block; width:auto; vertical-align:top;">
+    </div>
+    <div class="form-row">
+        <label style="width:auto" for="node-input-payload"><i class="fa fa-envelope-o"></i> When changed, send:</label>
+    </div>
+    <div class="form-row">
+        <label style="padding-left: 25px; margin-right: -25px">Payload</label>
+        <label style="width:auto">Current value</label>
+    </div>
+    <div class="form-row">
+        <label for="node-input-topic" style="padding-left: 25px; margin-right: -25px">Topic</label>
+        <input type="text" id="node-input-topic">
+        <input type="hidden" id="node-input-topicType">
+    </div>-->
+    <div class="form-tips">Setting <b>Delay</b> to 0 waits for Enter or Tab key, to send input.</span></div>
+</script>

package/nodes/widgets/ui_text_input.js

@@ -0,0 +1,37 @@
+const datastore = require('../store/index.js')
+
+module.exports = function (RED) {
+    function TextInputNode (config) {
+        const node = this
+
+        // create node in Node-RED
+        RED.nodes.createNode(this, config)
+
+        // this ndoe need to store content/value from UI
+        node.value = null
+
+        // which group are we rendering this widget
+        const group = RED.nodes.getNode(config.group)
+
+        const evts = {
+            onChange: true,
+            onInput: function (msg, send) {
+                // store the latest msg passed to node
+                datastore.save(node.id, msg)
+                // only send msg on if we have passthru enabled
+                if (config.passthru) {
+                    send(msg)
+                }
+            }
+        }
+
+        // inform the dashboard UI that we are adding this node
+        group.register(node, config, evts)
+
+        node.on('close', async function (done) {
+            done()
+        })
+    }
+
+    RED.nodes.registerType('ui-text-input', TextInputNode)
+}

package/package.json

@@ -0,0 +1,114 @@
+{
+    "name": "@flowfuse/node-red-dashboard",
+    "homepage": "https://dashboard.flowfuse.com",
+    "version": "0.7.0",
+    "description": "A collection of Node-RED nodes that provide functionality to build your own UI applications (inc. forms, buttons, charts) within Node-RED.",
+    "author": {
+        "name": "Joe Pavitt",
+        "url": "https://github.com/joepavitt"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/FlowFuse/node-red-dashboard.git"
+    },
+    "files": [
+        "dist/*",
+        "nodes/*"
+    ],
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "build:dev": "vue-cli-service build  --mode development",
+        "docs:dev": "vitepress dev docs",
+        "docs:build": "vitepress build docs",
+        "lint": "eslint -c .eslintrc.json \"nodes/**/*.js\" \"nodes/**/*.html\" \"ui/src/**/*.js\" \"ui/src/**/*.vue\" \"test/**/*.js\"",
+        "test": "mocha \"test/**/*.spec.js\"",
+        "test:debug": "mocha --inspect=9226 \"test/**/*.spec.js\""
+    },
+    "license": "Apache-2.0",
+    "keywords": [
+        "node-red"
+    ],
+    "node-red": {
+        "version": ">=3.0.0",
+        "nodes": {
+            "ui-base": "nodes/config/ui_base.js",
+            "ui-page": "nodes/config/ui_page.js",
+            "ui-group": "nodes/config/ui_group.js",
+            "ui-theme": "nodes/config/ui_theme.js",
+            "ui-form": "nodes/widgets/ui_form.js",
+            "ui-text-input": "nodes/widgets/ui_text_input.js",
+            "ui-button": "nodes/widgets/ui_button.js",
+            "ui-dropdown": "nodes/widgets/ui_dropdown.js",
+            "ui-radio-group": "nodes/widgets/ui_radio_group.js",
+            "ui-slider": "nodes/widgets/ui_slider.js",
+            "ui-switch": "nodes/widgets/ui_switch.js",
+            "ui-text": "nodes/widgets/ui_text.js",
+            "ui-table": "nodes/widgets/ui_table.js",
+            "ui-chart": "nodes/widgets/ui_chart.js",
+            "ui-notification": "nodes/widgets/ui_notification.js",
+            "ui-markdown": "nodes/widgets/ui_markdown.js",
+            "ui-template": "nodes/widgets/ui_template.js"
+        }
+    },
+    "dependencies": {
+        "chartjs-adapter-luxon": "^1.3.1",
+        "core-js": "^3.32.0",
+        "express": "^4.18.2",
+        "socket.io": "^4.7.1",
+        "vue": "^3.3.4"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.22.20",
+        "@babel/eslint-parser": "^7.22.15",
+        "@babel/plugin-transform-private-methods": "^7.22.5",
+        "@mdi/font": "~6.9.96",
+        "@unhead/vue": "^1.7.4",
+        "@vue/cli-plugin-babel": "~5.0.8",
+        "@vue/cli-plugin-eslint": "~5.0.8",
+        "@vue/cli-service": "~5.0.8",
+        "chart.js": "^4.4.0",
+        "dompurify": "^3.0.5",
+        "eslint": "^8.49.0",
+        "eslint-config-standard": "^17.1.0",
+        "eslint-plugin-html": "^7.1.0",
+        "eslint-plugin-import": "^2.28.1",
+        "eslint-plugin-n": "^16.1.0",
+        "eslint-plugin-no-only-tests": "^3.1.0",
+        "eslint-plugin-promise": "^6.1.1",
+        "eslint-plugin-vue": "^8.7.1",
+        "eslint-plugin-vuetify": "^2.0.5",
+        "glob": "^10.3.4",
+        "highlight.js": "^11.8.0",
+        "luxon": "^3.4.3",
+        "marked": "^4.3.0",
+        "marked-highlight": "^2.0.6",
+        "medium-zoom": "^1.0.8",
+        "mermaid": "^10.4.0",
+        "mocha": "^10.2.0",
+        "node-red": "^3.1.0",
+        "node-red-node-test-helper": "^0.3.2",
+        "should": "^13.2.3",
+        "should-sinon": "^0.0.6",
+        "sinon": "^15.2.0",
+        "socket.io-client": "^4.7.2",
+        "vitepress": "^1.0.0-beta.7",
+        "vue-router": "^4.2.4",
+        "vuetify": "^3.3.16",
+        "vuex": "^4.1.0"
+    },
+    "overrides": {
+        "node-red-node-test-helper": {
+            "semver": "^7.5.4" 
+        }
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not dead",
+        "not ie 11"
+    ],
+    "engines": {
+        "node": ">=14"
+    }
+}