-
-
Notifications
You must be signed in to change notification settings - Fork 242
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add error page for initial REST request failure & Abort further load (#…
…1987) Migitates and therefore closes #1205. --------- Signed-off-by: Florian Hotze <[email protected]>
- Loading branch information
1 parent
ec13c3d
commit 7893bd9
Showing
5 changed files
with
199 additions
and
168 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 94 additions & 0 deletions
94
bundles/org.openhab.ui/web/src/components/connection-health-mixin.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| import reloadMixin from './reload-mixin' | ||
|
|
||
| export default { | ||
| mixins: [reloadMixin], | ||
| data () { | ||
| return { | ||
| // For the communication failure toast | ||
| communicationFailureToast: null, | ||
| communicationFailureTimeoutId: null, | ||
| // For the communication failure page | ||
| communicationFailureMsg: null | ||
| } | ||
| }, | ||
| methods: { | ||
| /** | ||
| * 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', () => { | ||
| this.reload() | ||
| }) | ||
| toast.open() | ||
| return toast | ||
| } | ||
| }, | ||
| created () { | ||
| this.checkPurgeServiceWorkerAndCachesAvailable() | ||
| }, | ||
| mounted () { | ||
| this.$f7ready((f7) => { | ||
| this.$store.subscribe((mutation, state) => { | ||
| if (this.ready) { | ||
| if (mutation.type === 'sseConnected') { | ||
| if (!window.OHApp && this.$f7) { | ||
| if (mutation.payload === false) { | ||
| if (this.communicationFailureToast === null) { | ||
| this.communicationFailureTimeoutId = setTimeout(() => { | ||
| if (this.communicationFailureToast !== null) return | ||
| this.communicationFailureToast = this.displayFailureToast(this.$t('error.communicationFailure'), true, false) | ||
| this.communicationFailureToast.open() | ||
| this.communicationFailureTimeoutId = null | ||
| }, 1000) | ||
| } | ||
| } else if (mutation.payload === true) { | ||
| if (this.communicationFailureTimeoutId !== null) clearTimeout(this.communicationFailureTimeoutId) | ||
| 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 | ||
| }) | ||
| } | ||
| } | ||
| } | ||
| }) | ||
| }) | ||
| } | ||
| } |
Oops, something went wrong.