From ecee9b80d24e286fedb318850fe755f720773909 Mon Sep 17 00:00:00 2001 From: bartbutenaers Date: Fri, 31 May 2024 18:11:06 +0100 Subject: [PATCH 01/13] notification confirm button --- nodes/widgets/ui_notification.html | 21 ++++++++++++++++++- nodes/widgets/ui_notification.js | 8 +++++-- .../ui-notification/UINotification.vue | 17 ++++++++++++--- 3 files changed, 40 insertions(+), 6 deletions(-) diff --git a/nodes/widgets/ui_notification.html b/nodes/widgets/ui_notification.html index ca2b8d86b..bbb02e394 100644 --- a/nodes/widgets/ui_notification.html +++ b/nodes/widgets/ui_notification.html @@ -21,8 +21,10 @@ displayTime: { value: '3' }, showCountdown: { value: true }, outputs: { value: 1 }, - allowDismiss: { value: 'OK' }, + allowDismiss: { value: true }, dismissText: { value: 'Close' }, + allowConfirm: { value: false }, + confirmText: { value: 'Confirm' }, raw: { value: false }, className: { value: '' }, name: { value: '' } @@ -50,6 +52,15 @@ } }) + $('#node-input-allowConfirm').on('change', function () { + const allowConfirm = $('#node-input-allowConfirm').is(':checked') + if (allowConfirm) { + $('#node-notification-confirmText').show() + } else { + $('#node-notification-confirmText').hide() + } + }) + $('#node-input-colorDefault').on('change', function () { const defaultColor = $('#node-input-colorDefault').is(':checked') if (defaultColor) { @@ -116,6 +127,14 @@ +
+ + +
+
+ + +
diff --git a/nodes/widgets/ui_notification.js b/nodes/widgets/ui_notification.js index 53e782a25..e6b7bacf1 100644 --- a/nodes/widgets/ui_notification.js +++ b/nodes/widgets/ui_notification.js @@ -4,11 +4,15 @@ module.exports = function (RED) { RED.nodes.createNode(this, config) - // which group are we rendering this widget + // which ui are we rendering this widget const ui = RED.nodes.getNode(config.ui) + const evts = { + onAction: true + } + // inform the dashboard UI that we are adding this node - ui.register(null, null, node, config) + ui.register(null, null, node, config, evts) } RED.nodes.registerType('ui-notification', NotificationNode) } diff --git a/ui/src/widgets/ui-notification/UINotification.vue b/ui/src/widgets/ui-notification/UINotification.vue index 65c1a5d95..685cabd71 100644 --- a/ui/src/widgets/ui-notification/UINotification.vue +++ b/ui/src/widgets/ui-notification/UINotification.vue @@ -14,13 +14,21 @@
{{ value }}
- @@ -98,7 +106,10 @@ export default { }, close (payload) { this.show = false - this.$socket.emit('widget-action', this.id, payload) + + let msg = /*this.messages[this.id] ||*/ {} + msg.payload = payload + this.$socket.emit('widget-action', this.id, msg) clearTimeout(this.timeouts.close) clearInterval(this.timeouts.step) From 0aa180af64c8e2f4d445f7ad246d64fa4d990d94 Mon Sep 17 00:00:00 2001 From: bartbutenaers Date: Fri, 31 May 2024 20:48:39 +0100 Subject: [PATCH 02/13] close notification via msg --- ui/src/widgets/ui-notification/UINotification.vue | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/ui/src/widgets/ui-notification/UINotification.vue b/ui/src/widgets/ui-notification/UINotification.vue index 685cabd71..478b749f9 100644 --- a/ui/src/widgets/ui-notification/UINotification.vue +++ b/ui/src/widgets/ui-notification/UINotification.vue @@ -81,10 +81,16 @@ export default { widgetId: this.id, msg }) - this.show = true - if (this.props.displayTime > 0) { - // begin countdown - this.startCountdown(this.props.displayTime * 1000) + + if (this.show) { + this.close('input_msg') + } + else { + this.show = true + if (this.props.displayTime > 0) { + // begin countdown + this.startCountdown(this.props.displayTime * 1000) + } } }, startCountdown (time) { From ccbde2f232d11726ceaf01fed1d3bcba02721b8f Mon Sep 17 00:00:00 2001 From: bartbutenaers Date: Fri, 31 May 2024 21:44:58 +0100 Subject: [PATCH 03/13] notification help --- docs/nodes/widgets/ui-notification.md | 9 +++++--- .../locales/en-US/ui_notification.html | 22 +++++++++++++++++++ 2 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 nodes/widgets/locales/en-US/ui_notification.html diff --git a/docs/nodes/widgets/ui-notification.md b/docs/nodes/widgets/ui-notification.md index 03884dd67..e9418a6f5 100644 --- a/docs/nodes/widgets/ui-notification.md +++ b/docs/nodes/widgets/ui-notification.md @@ -3,10 +3,13 @@ description: Notify users of important updates and alerts with ui-notification i props: UI: Unlike most widgets, notifications are owned by a "UI", not Group. This allows for notifications to be displayed across all pages. Position: The position on the screen whethere the notification will appear. + Color: The color that should be used for the notification border. Timeout: Number of seconds before the notification will automatically close. - Show Countdown Bar: Whether or not to show a reducing progfress bar to indicate the time remaining before the notification will close. + Show Countdown Bar: Whether or not to show a reducing progress bar to indicate the time remaining before the notification will close. Allow Manual Dismissal: Whether or not to show a button that will allow the user to dismiss the notification. Otherwise, will only close after Timeout. Button Label: If "Allow Manual Dismissal" is enabled, this is the label for the button. + Allow Manual Confirmation: Whether or not to show a button that will allow the user to confirm the notification. Otherwise, will only close after Timeout. + Button Label: If "Allow Manual Confirmation" is enabled, this is the label for the button. Accept Raw: Whether you're passing in raw HTML that should be processed client-side. Class: Appends CSS classes to the widget --- @@ -19,7 +22,7 @@ props: Known in Dashboard 1.0 as a "Toast", this widget displays text/HTML in a small window that will appear on the screen for a defined duration of time (`timeout`) and at a defined location on the screen (`position`). -If you want to have the notification show indefinitely, you can set `timeout` to `0`. It will not be possible to close the notification manually unless you also set `allowDismiss` to `true`. +If you want to have the notification show indefinitely, you can set `timeout` to `0`. It will not be possible to close the notification manually unless you also set `allowDismiss` or `allowConfirm` to `true`. ## Properties @@ -34,4 +37,4 @@ This notification was created using a `msg.payload` of: ```html

Generated Notification

This is custom HTML injected into Node-RED

-``` \ No newline at end of file +``` diff --git a/nodes/widgets/locales/en-US/ui_notification.html b/nodes/widgets/locales/en-US/ui_notification.html new file mode 100644 index 000000000..8de69b2c3 --- /dev/null +++ b/nodes/widgets/locales/en-US/ui_notification.html @@ -0,0 +1,22 @@ + diff --git a/nodes/widgets/ui_notification.js b/nodes/widgets/ui_notification.js index e6b7bacf1..f15b1cf49 100644 --- a/nodes/widgets/ui_notification.js +++ b/nodes/widgets/ui_notification.js @@ -8,7 +8,19 @@ module.exports = function (RED) { const ui = RED.nodes.getNode(config.ui) const evts = { - onAction: true + onAction: true, + beforeSend: function (msg) { + if (msg.ui_update) { + const update = msg.ui_update + if (typeof update.title !== 'undefined') { + // dynamically set "title" property + statestore.set(group.getBase(), node, msg, 'title', update.title) + } + // Note that update.close will NOT be stored in the data store, + // since it does not need to be remembered + } + return msg + } } // inform the dashboard UI that we are adding this node diff --git a/ui/src/widgets/ui-notification/UINotification.vue b/ui/src/widgets/ui-notification/UINotification.vue index 7b26a5247..63674f343 100644 --- a/ui/src/widgets/ui-notification/UINotification.vue +++ b/ui/src/widgets/ui-notification/UINotification.vue @@ -5,29 +5,29 @@ vertical multi-line :timeout="-1" - :location="props.position" + :location="position" :style="{'--nrdb-ui-notification-color': color}" > -
- +
+
-
{{ value }}
+
{{ value }}
-