From 4bdadb4adb933c9a2f1fc3f451fd63de3a74d6fa Mon Sep 17 00:00:00 2001 From: cgjgh <160297365+cgjgh@users.noreply.github.com> Date: Tue, 19 Nov 2024 21:59:04 -0600 Subject: [PATCH 1/3] Configurable Connection Notifications Update ui_base.json --- nodes/config/locales/en-US/ui_base.json | 6 +++- nodes/config/ui_base.html | 43 +++++++++++++++++++++++++ ui/src/App.vue | 9 ++++++ ui/src/main.mjs | 39 +++++++++++++++------- 4 files changed, 85 insertions(+), 12 deletions(-) diff --git a/nodes/config/locales/en-US/ui_base.json b/nodes/config/locales/en-US/ui_base.json index 11279bc3..6b091f29 100644 --- a/nodes/config/locales/en-US/ui_base.json +++ b/nodes/config/locales/en-US/ui_base.json @@ -31,7 +31,11 @@ "navigationStyleFixed": "Fixed", "navigationStyleIcon": "Collapse to icons", "navigationStyleTemporary": "Appear over content", - "navigationStyleNone": "Always hide" + "navigationStyleNone": "Always hide", + "notifications": "Notifications", + "showReconnect": "Show reconnect notification", + "showDisconnect": "Show disconnect notification", + "reconnectNotificationDelay": "Reconnect notification delay (sec)" }, "layout": { "pages": "Pages", diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html index fbb039a0..32caa2ac 100644 --- a/nodes/config/ui_base.html +++ b/nodes/config/ui_base.html @@ -347,6 +347,15 @@ }, titleBarStyle: { value: 'default' + }, + showReconnectNotification: { + value: true + }, + reconnectNotificationDelay: { + value: 1 + }, + showDisconnectNotification: { + value: true } }, label: function () { @@ -372,6 +381,24 @@ if (this.appIcon) { $('#node-config-input-appIcon').val(this.appIcon) } + + // backward compatibility for reconnect notification + if (!this.showReconnectNotification) { + this.showReconnectNotification = true + $('#node-config-input-showReconnectNotification').prop('checked', true) + } + + // backward compatibility for reconnect notification delay + if (!this.reconnectNotificationDelay) { + this.reconnectNotificationDelay = 1 + $('#node-config-input-reconnectNotificationDelay').val(this.reconnectNotificationDelay) + } + + // backward compatibility for disconnect notification + if (!this.showDisconnectNotification) { + this.showDisconnectNotification = true + $('#node-config-input-showDisconnectNotification').prop('checked', true) + } }, onpaletteadd: function () { // add the Dashboard 2.0 sidebar @@ -2429,4 +2456,20 @@ +
+ +
+
+ + +
+
+ + +
+ +
+ + +
diff --git a/ui/src/App.vue b/ui/src/App.vue index d3d67b55..c0b60f85 100644 --- a/ui/src/App.vue +++ b/ui/src/App.vue @@ -254,6 +254,15 @@ export default { break } } + // store the notification settings in localStorage since we need to do apply them before ui-config is received + const dashboardKey = Object.keys(payload.dashboards)[0] + const dashboard = payload.dashboards && dashboardKey ? payload.dashboards[dashboardKey] : null + + if (dashboard) { + localStorage.setItem('ndrb-show-reconnect-notification', JSON.stringify(dashboard.showReconnectNotification || true)) + localStorage.setItem('ndrb-reconnect-notification-delay', JSON.stringify(dashboard.reconnectNotificationDelay || 1)) + localStorage.setItem('ndrb-show-disconnect-notification', JSON.stringify(dashboard.showDisconnectNotification || true)) + } }) }, methods: { diff --git a/ui/src/main.mjs b/ui/src/main.mjs index 9a5b4bf4..829186a4 100644 --- a/ui/src/main.mjs +++ b/ui/src/main.mjs @@ -139,6 +139,11 @@ fetch('_setup') store.commit('setup/set', setup) + // retrieve the notification settings from localStorage + const showReconnectNotification = JSON.parse(localStorage.getItem('ndrb-show-reconnect-notification')) ?? true + const reconnectNotificationDelay = JSON.parse(localStorage.getItem('ndrb-reconnect-notification-delay')) ?? 1 + const showDisconnectNotification = JSON.parse(localStorage.getItem('ndrb-show-disconnect-notification')) ?? true + let disconnected = false let retryCount = 0 // number of reconnection attempts made @@ -157,12 +162,15 @@ fetch('_setup') retryCount = 0 disconnected = true } - // tell the user we're trying to connect - Alerts.emit('Connection Lost', 'Attempting to reconnect to server...', 'red', { - displayTime: 0, // displayTime 0 persists notifications until another notification closes it - allowDismiss: false, - showCountdown: false - }) + + if (showDisconnectNotification) { + // tell the user we're trying to connect + Alerts.emit('Connection Lost', 'Attempting to reconnect to server...', 'red', { + displayTime: 0, // displayTime 0 persists notifications until another notification closes it + allowDismiss: false, + showCountdown: false + }) + } // attempt to reconnect reconnect() }) @@ -171,12 +179,21 @@ fetch('_setup') console.log('SIO connected') // if we've just disconnected (i.e. aren't connecting for the first time) if (disconnected) { + if (showReconnectNotification) { // send a notification/alert to the user to let them know the connection is live again - Alerts.emit('Connected', 'Connection re-established.', '#1BC318', { - displayTime: 1, - allowDismiss: true, - showCountdown: true - }) + Alerts.emit('Connected', 'Connection re-established.', '#1BC318', { + displayTime: reconnectNotificationDelay, + allowDismiss: true, + showCountdown: true + }) + } else { + //, send a notification for 1 ms to close the disconnected notification + Alerts.emit('Connected', 'Connection re-established.', '#1BC318', { + displayTime: 0.001, // 1 ms + allowDismiss: false, + showCountdown: false + }) + } } disconnected = false clearTimeout(reconnectTO) From 80f3543c36480710a3f3a0cbaf6478308a9afc06 Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Mon, 2 Dec 2024 11:16:42 +0000 Subject: [PATCH 2/3] Use vuex store instead of localstorage --- nodes/config/locales/en-US/ui_base.json | 4 ++-- nodes/config/ui_base.html | 20 ++++++++++---------- nodes/config/ui_base.js | 14 +++++++++++++- ui/src/App.vue | 9 --------- ui/src/main.mjs | 17 +++++++++-------- ui/src/store/ui.mjs | 7 +++++++ 6 files changed, 41 insertions(+), 30 deletions(-) diff --git a/nodes/config/locales/en-US/ui_base.json b/nodes/config/locales/en-US/ui_base.json index 6b091f29..9ffb0c76 100644 --- a/nodes/config/locales/en-US/ui_base.json +++ b/nodes/config/locales/en-US/ui_base.json @@ -32,10 +32,10 @@ "navigationStyleIcon": "Collapse to icons", "navigationStyleTemporary": "Appear over content", "navigationStyleNone": "Always hide", - "notifications": "Notifications", + "connectionNotifications": "Connection Notifications", "showReconnect": "Show reconnect notification", "showDisconnect": "Show disconnect notification", - "reconnectNotificationDelay": "Reconnect notification delay (sec)" + "notificationDisplayTime": "notification display time (seconds)" }, "layout": { "pages": "Pages", diff --git a/nodes/config/ui_base.html b/nodes/config/ui_base.html index 32caa2ac..d738b5d1 100644 --- a/nodes/config/ui_base.html +++ b/nodes/config/ui_base.html @@ -351,7 +351,7 @@ showReconnectNotification: { value: true }, - reconnectNotificationDelay: { + notificationDisplayTime: { value: 1 }, showDisconnectNotification: { @@ -383,19 +383,19 @@ } // backward compatibility for reconnect notification - if (!this.showReconnectNotification) { + if (!('showReconnectNotification' in this)) { this.showReconnectNotification = true $('#node-config-input-showReconnectNotification').prop('checked', true) } - // backward compatibility for reconnect notification delay - if (!this.reconnectNotificationDelay) { - this.reconnectNotificationDelay = 1 - $('#node-config-input-reconnectNotificationDelay').val(this.reconnectNotificationDelay) + // backward compatibility for reconnect notification display time + if (!this.notificationDisplayTime) { + this.notificationDisplayTime = 5 + $('#node-config-input-notificationDisplayTime').val(this.notificationDisplayTime) } // backward compatibility for disconnect notification - if (!this.showDisconnectNotification) { + if (!('showDisconnectNotification' in this)) { this.showDisconnectNotification = true $('#node-config-input-showDisconnectNotification').prop('checked', true) } @@ -2457,15 +2457,15 @@
- +
- - + +
diff --git a/nodes/config/ui_base.js b/nodes/config/ui_base.js index 3b5dde3d..ac76b0dc 100644 --- a/nodes/config/ui_base.js +++ b/nodes/config/ui_base.js @@ -62,11 +62,23 @@ module.exports = function (RED) { config.acceptsClientConfig = ['ui-control', 'ui-notification'] } + // for those upgrading, we need these for backwards compatibility if (!('includeClientData' in config)) { - // for those upgrading, we need this for backwards compatibility config.includeClientData = true } + if (!('showReconnectNotification' in config)) { + config.showReconnectNotification = true + } + + if (!('showDisconnectNotification' in config)) { + config.showDisconnectNotification = true + } + + if (!('notificationDisplayTime' in config)) { + config.notificationDisplayTime = 5 // Show for 5 seconds + } + // expose these properties at runtime node.acceptsClientConfig = config.acceptsClientConfig // which node types can be scoped to a specific client node.includeClientData = config.includeClientData // whether to include client data in msg payloads diff --git a/ui/src/App.vue b/ui/src/App.vue index c0b60f85..d3d67b55 100644 --- a/ui/src/App.vue +++ b/ui/src/App.vue @@ -254,15 +254,6 @@ export default { break } } - // store the notification settings in localStorage since we need to do apply them before ui-config is received - const dashboardKey = Object.keys(payload.dashboards)[0] - const dashboard = payload.dashboards && dashboardKey ? payload.dashboards[dashboardKey] : null - - if (dashboard) { - localStorage.setItem('ndrb-show-reconnect-notification', JSON.stringify(dashboard.showReconnectNotification || true)) - localStorage.setItem('ndrb-reconnect-notification-delay', JSON.stringify(dashboard.reconnectNotificationDelay || 1)) - localStorage.setItem('ndrb-show-disconnect-notification', JSON.stringify(dashboard.showDisconnectNotification || true)) - } }) }, methods: { diff --git a/ui/src/main.mjs b/ui/src/main.mjs index 829186a4..04fbbeae 100644 --- a/ui/src/main.mjs +++ b/ui/src/main.mjs @@ -139,11 +139,6 @@ fetch('_setup') store.commit('setup/set', setup) - // retrieve the notification settings from localStorage - const showReconnectNotification = JSON.parse(localStorage.getItem('ndrb-show-reconnect-notification')) ?? true - const reconnectNotificationDelay = JSON.parse(localStorage.getItem('ndrb-reconnect-notification-delay')) ?? 1 - const showDisconnectNotification = JSON.parse(localStorage.getItem('ndrb-show-disconnect-notification')) ?? true - let disconnected = false let retryCount = 0 // number of reconnection attempts made @@ -163,7 +158,11 @@ fetch('_setup') disconnected = true } - if (showDisconnectNotification) { + console.log(store) + console.log(store.getters['ui/dashboard']) + + const dashboard = store.getters['ui/dashboard'] + if (dashboard?.showDisconnectNotification) { // tell the user we're trying to connect Alerts.emit('Connection Lost', 'Attempting to reconnect to server...', 'red', { displayTime: 0, // displayTime 0 persists notifications until another notification closes it @@ -179,10 +178,12 @@ fetch('_setup') console.log('SIO connected') // if we've just disconnected (i.e. aren't connecting for the first time) if (disconnected) { - if (showReconnectNotification) { + // check vuex store here + const dashboard = store.getters['ui/dashboard'] + if (dashboard?.showReconnectNotification) { // send a notification/alert to the user to let them know the connection is live again Alerts.emit('Connected', 'Connection re-established.', '#1BC318', { - displayTime: reconnectNotificationDelay, + displayTime: dashboard?.notificationDisplayTime || 5, // default: 5 seconds allowDismiss: true, showCountdown: true }) diff --git a/ui/src/store/ui.mjs b/ui/src/store/ui.mjs index 0a08b0c1..9d4960b4 100644 --- a/ui/src/store/ui.mjs +++ b/ui/src/store/ui.mjs @@ -18,6 +18,13 @@ const getters = { dashboards (state) { return state.dashboards }, + dashboard (state) { + const dashboards = Object.keys(state.dashboards) + console.log(dashboards) + const id = dashboards.length ? dashboards[0] : undefined + console.log(id) + return id ? state.dashboards[id] : undefined + }, pages (state) { return state.pages }, From 13357b9c65ffbd031a75ab56280f6266dba387b9 Mon Sep 17 00:00:00 2001 From: Joe Pavitt Date: Mon, 2 Dec 2024 11:18:13 +0000 Subject: [PATCH 3/3] Remove console.logs --- ui/src/main.mjs | 3 --- ui/src/store/ui.mjs | 2 -- 2 files changed, 5 deletions(-) diff --git a/ui/src/main.mjs b/ui/src/main.mjs index 04fbbeae..6dc60c21 100644 --- a/ui/src/main.mjs +++ b/ui/src/main.mjs @@ -158,9 +158,6 @@ fetch('_setup') disconnected = true } - console.log(store) - console.log(store.getters['ui/dashboard']) - const dashboard = store.getters['ui/dashboard'] if (dashboard?.showDisconnectNotification) { // tell the user we're trying to connect diff --git a/ui/src/store/ui.mjs b/ui/src/store/ui.mjs index 9d4960b4..79823e62 100644 --- a/ui/src/store/ui.mjs +++ b/ui/src/store/ui.mjs @@ -20,9 +20,7 @@ const getters = { }, dashboard (state) { const dashboards = Object.keys(state.dashboards) - console.log(dashboards) const id = dashboards.length ? dashboards[0] : undefined - console.log(id) return id ? state.dashboards[id] : undefined }, pages (state) {