Show warning if SSE connection or send command fails

bundles/org.openhab.ui/web/src/assets/i18n/common/en.json

@@ -7,10 +7,11 @@
   "dialogs.close": "Close",
   "dialogs.copy": "Copy",
   "dialogs.delete": "Delete",
+  "dialogs.reload": "Reload",
   "dialogs.search": "Search",
   "dialogs.search.items": "Search items",
-  "dialogs.search.things": "Search things",  
-  "dialogs.search.rules": "Search rules",  
+  "dialogs.search.things": "Search things",
+  "dialogs.search.rules": "Search rules",
   "dialogs.search.nothingFound": "Nothing found",
   "home.overview.title": "Overview",
   "home.overview.tab": "Overview",
@@ -39,5 +40,7 @@
   "sidebar.tip.signIn": "Sign in as an administrator to access settings",
   "page.navbar.back": "Back",
   "page.navbar.edit": "Edit",
-  "admin.notTranslatedYet": "The administration area is not translated yet."
+  "admin.notTranslatedYet": "The administration area is not translated yet.",
+  "error.communicationFailure": "Communication failure",
+  "error.itemNotFound": "%s not found"
 }

bundles/org.openhab.ui/web/src/components/app.vue

@@ -380,7 +380,9 @@ export default {
       showSettingsSubmenu: false,
       showDeveloperSubmenu: false,
       showDeveloperSidebar: false,
-      currentUrl: ''
+      currentUrl: '',
+
+      communicationFailureToast: null
     }
   },
   computed: {
@@ -655,6 +657,30 @@ export default {
         function unlock () { audioContext.resume().then(clean) }
         function clean () { events.forEach(e => b.removeEventListener(e, unlock)) }
       }
+    },
+    /**
+     * Creates and opens a toast message that indicates a failure, e.g. of SSE connection
+     * @param {string} message message to show
+     * @param {boolean} [reloadButton=false] displays a reload button
+     * @param {boolean} [autoClose=true] closes toast automatically
+     * @returns {Toast.Toast}
+     */
+    displayFailureToast (message, reloadButton = false, autoClose = true) {
+      const toast = this.$f7.toast.create({
+        text: message,
+        closeButton: reloadButton,
+        closeButtonText: this.$t('dialogs.reload'),
+        destroyOnClose: autoClose,
+        closeTimeout: (autoClose) ? 5000 : undefined,
+        cssClass: 'failure-toast button-outline',
+        position: 'bottom',
+        horizontalPosition: 'center'
+      })
+      toast.on('closeButtonClick', () => {
+        window.location.reload()
+      })
+      toast.open()
+      return toast
     }
   },
   created () {
@@ -753,6 +779,45 @@ export default {
         }
       })
 
+      this.$store.subscribe((mutation, state) => {
+        if (mutation.type === 'sseConnected') {
+          if (!window.OHApp && this.$f7) {
+            if (mutation.payload === false) {
+              if (this.communicationFailureToast === null) this.communicationFailureToast = this.displayFailureToast(this.$t('error.communicationFailure'), true, false)
+              this.communicationFailureToast.open()
+            } else if (mutation.payload === true) {
+              if (this.communicationFailureToast !== null) {
+                this.communicationFailureToast.close()
+                this.communicationFailureToast.destroy()
+                this.communicationFailureToast = null
+              }
+            }
+          }
+        }
+      })
+
+      this.$store.subscribeAction({
+        error: (action, state, error) => {
+          if (action.type === 'sendCommand') {
+            let reloadButton = true
+            let msg = this.$t('error.communicationFailure')
+            switch (error) {
+              case 404:
+              case 'Not Found':
+                msg = this.$t('error.itemNotFound').replace('%s', action.payload.itemName)
+                reloadButton = false
+                return this.displayFailureToast(msg, reloadButton)
+            }
+            if (this.communicationFailureToast === null) {
+              this.communicationFailureToast = this.displayFailureToast(this.$t('error.communicationFailure'), true, true)
+              this.communicationFailureToast.on('closed', () => {
+                this.communicationFailureToast = null
+              })
+            }
+          }
+        }
+      })
+
       if (window) {
         window.addEventListener('keydown', this.keyDown)
       }

bundles/org.openhab.ui/web/src/css/app.styl

@@ -285,3 +285,10 @@ html
 // Disable user dragging of background images in canvas layouts
 .disable-user-drag
   user-drag none
+
+.failure-toast
+  background-color var(--f7-theme-color) !important
+  font-size 22px !important
+  --f7-toast-text-color white
+  --f7-button-text-color white
+  --f7-button-border-color white