Offline und Online Banner

Initialisierung Wartet auf Netzwerk

apps/isa-app/src/app/app.component.html

@@ -8,14 +8,21 @@
       <div>Sie sind offline, keine Verbindung zum Netzwerk.</div>
     </h3>
     <p>Bereits geladene Ihnalte werden angezeigt, Interaktionen sind aktuell nicht möglich.</p>
-    <button class="fixed top-5 right-4 text-3xl w-12 h-12" type="button" (click)="dismissOfflineBanner()">
+  </div>
+}
+@if ($onlineBannerVisible()) {
+  <div [@fadeInOut] class="bg-green-500 text-white text-center fixed inset-x-0 top-0 z-tooltip p-4">
+    <h3 class="font-bold grid grid-flow-col items-center justify-center text-xl gap-4">
+      <div>
+        <ng-icon name="matWifi"></ng-icon>
+      </div>
+
+      <div>Sie sind wieder online.</div>
+    </h3>
+    <button class="fixed top-2 right-4 text-3xl w-12 h-12" type="button" (click)="$onlineBannerVisible.set(false)">
       <ng-icon name="matClose"></ng-icon>
     </button>
   </div>
 }
 
-@if (!$online()) {
-  <div [@fadeInOut] class="bg-brand fixed inset-x-0 top-0 z-tooltip h-1 animate-pulse"></div>
-}
-
 <router-outlet></router-outlet>

apps/isa-app/src/app/app.component.ts

@@ -39,11 +39,26 @@ export class AppComponent implements OnInit {
 
   $offlineBannerVisible = signal(false);
 
-  onlineEffect = effect(() => {
+  $onlineBannerVisible = signal(false);
+
+  private onlineBannerDismissTimeout: any;
+
+  onlineEffects = effect(() => {
     const online = this.$online();
+    const offlineBannerVisible = this.$offlineBannerVisible();
 
     untracked(() => {
       this.$offlineBannerVisible.set(!online);
+
+      if (!online) {
+        this.$onlineBannerVisible.set(false);
+        clearTimeout(this.onlineBannerDismissTimeout);
+      }
+
+      if (offlineBannerVisible && online) {
+        this.$onlineBannerVisible.set(true);
+        this.onlineBannerDismissTimeout = setTimeout(() => this.$onlineBannerVisible.set(false), 5000);
+      }
     });
   });
 
@@ -176,8 +191,4 @@ export class AppComponent implements OnInit {
         });
     }
   }
-
-  dismissOfflineBanner() {
-    this.$offlineBannerVisible.set(false);
-  }
 }

apps/isa-app/src/app/app.module.ts

@@ -38,7 +38,9 @@ import { ShellModule } from '@shared/shell';
 import { MainComponent } from './main.component';
 import { IconModule } from '@shared/components/icon';
 import { NgIconsModule } from '@ng-icons/core';
-import { matClose, matWifiOff } from '@ng-icons/material-icons/baseline';
+import { matClose, matWifi, matWifiOff } from '@ng-icons/material-icons/baseline';
+import { NetworkStatusService } from './services/network-status.service';
+import { firstValueFrom } from 'rxjs';
 
 registerLocaleData(localeDe, localeDeExtra);
 registerLocaleData(localeDe, 'de', localeDeExtra);
@@ -49,11 +51,25 @@ export function _appInitializerFactory(
   injector: Injector,
   scanAdapter: ScanAdapterService,
   nativeContainer: NativeContainerService,
+  networkStatus: NetworkStatusService,
 ) {
   return async () => {
     const statusElement = document.querySelector('#init-status');
     const laoderElement = document.querySelector('#init-loader');
+
     try {
+      let online = false;
+
+      while (!online) {
+        online = await firstValueFrom(networkStatus.online$);
+
+        if (!online) {
+          statusElement.innerHTML =
+            '<b>Warte auf Netzwerkverbindung (WLAN)</b><br><br>Bitte prüfen Sie die Netzwerkverbindung (WLAN).<br><br>';
+          await new Promise((resolve) => setTimeout(resolve, 250));
+        }
+      }
+
       statusElement.innerHTML = 'Konfigurationen werden geladen...';
       await config.init();
       statusElement.innerHTML = 'Authentifizierung wird geprüft...';
@@ -72,8 +88,26 @@ export function _appInitializerFactory(
       await scanAdapter.init();
     } catch (error) {
       laoderElement.remove();
-      statusElement.innerHTML =
-        '<b>Fehler bei der Initialisierung.</b><br><br>Bitte versuchen Sie es erneut. oder wenden Sie sich an den Support.<br><br>' + error;
+      statusElement.classList.add('text-xl');
+      statusElement.innerHTML = '<b>Fehler bei der Initialisierung</b><br><br>Bitte prüfen Sie die Netzwerkverbindung (WLAN).<br><br>';
+
+      const reload = document.createElement('button');
+      reload.classList.add('bg-brand', 'text-white', 'p-2', 'rounded', 'cursor-pointer');
+      reload.innerHTML = 'App neu laden';
+      reload.onclick = () => window.location.reload();
+      statusElement.appendChild(reload);
+
+      const preLabel = document.createElement('div');
+      preLabel.classList.add('mt-12');
+      preLabel.innerHTML = 'Fehlermeldung:';
+
+      statusElement.appendChild(preLabel);
+
+      const pre = document.createElement('pre');
+      pre.classList.add('mt-4', 'text-wrap');
+      pre.innerHTML = error.message;
+
+      statusElement.appendChild(pre);
 
       console.error('Error during app initialization', error);
       throw error;
@@ -119,14 +153,14 @@ export function _notificationsHubOptionsFactory(config: Config, auth: AuthServic
     ScanditScanAdapterModule.forRoot(),
     PlatformModule,
     IconModule.forRoot(),
-    NgIconsModule.withIcons({ matWifiOff, matClose }),
+    NgIconsModule.withIcons({ matWifiOff, matClose, matWifi }),
   ],
   providers: [
     {
       provide: APP_INITIALIZER,
       useFactory: _appInitializerFactory,
       multi: true,
-      deps: [Config, AuthService, Injector, ScanAdapterService, NativeContainerService],
+      deps: [Config, AuthService, Injector, ScanAdapterService, NativeContainerService, NetworkStatusService],
     },
     {
       provide: NOTIFICATIONS_HUB_OPTIONS,

apps/isa-app/src/app/services/network-status.service.ts

@@ -1,13 +1,21 @@
 import { inject, Injectable } from '@angular/core';
-import { fromEvent, map, merge, of } from 'rxjs';
+import { map, Observable } from 'rxjs';
 
 @Injectable({ providedIn: 'root' })
 export class NetworkStatusService {
-  online$ = merge(
-    of(navigator.onLine),
-    fromEvent(window, 'online').pipe(map(() => true)),
-    fromEvent(window, 'offline').pipe(map(() => false)),
-  );
+  online$ = new Observable<boolean>((subscriber) => {
+    const handler = () => subscriber.next(navigator.onLine);
+
+    window.addEventListener('online', handler);
+    window.addEventListener('offline', handler);
+
+    handler();
+
+    return () => {
+      window.removeEventListener('online', handler);
+      window.removeEventListener('offline', handler);
+    };
+  });
 
   status$ = this.online$.pipe(map((online) => (online ? 'online' : 'offline')));
 }