Use vuex store instead of localstorage

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

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 @@
         <label style="width:auto" for="node-config-input-showPathInSidebar"><span data-i18n="ui-base.label.showPath"></span></label>
     </div>
     <div class="form-row" style="margin-bottom: 0;">
-        <label style="font-weight: 600; width: auto;" data-i18n="ui-base.label.notifications"></label>
+        <label style="font-weight: 600; width: auto;" data-i18n="ui-base.label.connectionNotifications"></label>
     </div>
     <div class="form-row form-row-flex" style="align-items: center;">
         <input style="margin: 8px 0 10px 16px; width:20px;" type="checkbox" id="node-config-input-showReconnectNotification">
         <label style="width:auto" for="node-config-input-showReconnectNotification"><span data-i18n="ui-base.label.showReconnect"></span></label>
     </div>
     <div class="form-row form-row-flex" style="align-items: center;">   
-        <input style="width: 80px" type="number" id="node-config-input-reconnectNotificationDelay">
-        <label style="width:auto" for="node-config-input-reconnectNotificationDelay"><span data-i18n="ui-base.label.reconnectNotificationDelay"></span></label>
+        <input style="width: 50px; margin-left: 75px;" type="number" id="node-config-input-notificationDisplayTime">
+        <label style="width:auto" for="node-config-input-notificationDisplayTime"><span data-i18n="ui-base.label.notificationDisplayTime"></span></label>
     </div>
 
     <div class="form-row form-row-flex" style="align-items: center;">

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

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: {

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
                     })

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
     },