From 1db821ffcbdc43863944f490c8981cd394839f33 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 23 Jan 2025 14:37:54 +0100 Subject: [PATCH 1/3] show notification when offline --- .../src/apps/app/app.context.ts | 3 ++ .../app/network-connection-status.manager.ts | 46 +++++++++++++++++++ .../src/assets/lang/en-us.ts | 2 + 3 files changed, 51 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts diff --git a/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts b/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts index 857064431b..6199e4ae3f 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/app/app.context.ts @@ -1,4 +1,5 @@ import type { UmbAppContextConfig } from './app-context-config.interface.js'; +import { UmbNetworkConnectionStatusManager } from './network-connection-status.manager.js'; import { UmbContextBase } from '@umbraco-cms/backoffice/class-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; @@ -13,6 +14,8 @@ export class UmbAppContext extends UmbContextBase { this.#serverUrl = config.serverUrl; this.#backofficePath = config.backofficePath; this.#serverConnection = config.serverConnection; + + new UmbNetworkConnectionStatusManager(this); } getBackofficePath() { diff --git a/src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts b/src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts new file mode 100644 index 0000000000..6774550b38 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts @@ -0,0 +1,46 @@ +import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import { UmbLocalizationController } from '@umbraco-cms/backoffice/localization-api'; +import { + UMB_NOTIFICATION_CONTEXT, + type UmbNotificationContext, + type UmbNotificationHandler, +} from '@umbraco-cms/backoffice/notification'; + +export class UmbNetworkConnectionStatusManager extends UmbControllerBase { + #notificationContext?: UmbNotificationContext; + #offlineNotification?: UmbNotificationHandler; + + #localize = new UmbLocalizationController(this); + + constructor(host: UmbControllerHost) { + super(host); + + this.consumeContext(UMB_NOTIFICATION_CONTEXT, (notificationContext) => { + this.#notificationContext = notificationContext; + }); + + window.addEventListener('online', () => this.#onOnline()); + window.addEventListener('offline', () => this.#onOffline()); + } + + #onOnline() { + this.#offlineNotification?.close(); + } + + #onOffline() { + this.#offlineNotification = this.#notificationContext?.stay('danger', { + data: { + headline: this.#localize.term('speechBubbles_offlineHeadline'), + message: this.#localize.term('speechBubbles_offlineMessage'), + }, + }); + } + + override destroy() { + this.#offlineNotification?.close(); + this.removeEventListener('online', () => this.#onOnline()); + this.removeEventListener('offline', () => this.#onOffline()); + super.destroy(); + } +} diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts index abee3dfad2..88c9f6bffd 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts @@ -1488,6 +1488,8 @@ export default { preventCleanupDisableError: 'An error occurred while disabling version cleanup for %0%', copySuccessMessage: 'Your system information has successfully been copied to the clipboard', cannotCopyInformation: 'Could not copy your system information to the clipboard', + offlineHeadline: 'Offline', + offlineMessage: 'You are currently offline. Please check your internet connection.', }, stylesheet: { addRule: 'Add style', From 55141df271c0cbf633f06660fdd931af3677dc53 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 24 Jan 2025 21:44:25 +0100 Subject: [PATCH 2/3] Update en.ts --- src/Umbraco.Web.UI.Client/src/assets/lang/en.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index eb1aedc46a..f21e07da7a 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -1491,6 +1491,8 @@ export default { scheduleErrExpireDate2: 'The expire date cannot be before the release date', preventCleanupEnableError: 'An error occurred while enabling version cleanup for %0%', preventCleanupDisableError: 'An error occurred while disabling version cleanup for %0%', + offlineHeadline: 'Offline', + offlineMessage: 'You are currently offline. Please check your internet connection.', }, stylesheet: { addRule: 'Add style', From 633cce5fd85d661282e2382e6dd140b8c3489f1f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 28 Jan 2025 18:31:41 +0100 Subject: [PATCH 3/3] show online notification --- .../src/apps/app/network-connection-status.manager.ts | 6 ++++++ src/Umbraco.Web.UI.Client/src/assets/lang/en.ts | 2 ++ 2 files changed, 8 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts b/src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts index 6774550b38..ad573a2464 100644 --- a/src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts +++ b/src/Umbraco.Web.UI.Client/src/apps/app/network-connection-status.manager.ts @@ -26,6 +26,12 @@ export class UmbNetworkConnectionStatusManager extends UmbControllerBase { #onOnline() { this.#offlineNotification?.close(); + this.#notificationContext?.peek('positive', { + data: { + headline: this.#localize.term('speechBubbles_onlineHeadline'), + message: this.#localize.term('speechBubbles_onlineMessage'), + }, + }); } #onOffline() { diff --git a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts index f21e07da7a..9ee22d3f78 100644 --- a/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts +++ b/src/Umbraco.Web.UI.Client/src/assets/lang/en.ts @@ -1493,6 +1493,8 @@ export default { preventCleanupDisableError: 'An error occurred while disabling version cleanup for %0%', offlineHeadline: 'Offline', offlineMessage: 'You are currently offline. Please check your internet connection.', + onlineHeadline: 'Online', + onlineMessage: 'You are now online. You can continue working.', }, stylesheet: { addRule: 'Add style',