Add network network Status

Author: mckenziearts

src/app/app.module.ts

@@ -20,17 +20,18 @@ import { NgxPermissionsModule } from 'ngx-permissions';
 
 import { environment } from 'environments/environment';
 import { AppRoutingModule } from './core/routes/app-routing.module';
-import { AppComponent } from './core/components/app/app.component';
 import { ROOT_REDUCERS } from './core/store/app.store';
 import { AuthInterceptor } from './modules/authentication/interceptors/auth.interceptor';
 import { HttpLoadingInterceptor } from './shared/interceptors/http-loading.interceptor';
 import { AuthenticationModule } from './modules/authentication/authentication.module';
 import { ErrorsInterceptor } from './shared/interceptors/errors.interceptor';
+import { AppComponent } from './core/components/app/app.component';
+import { NetworkStatusComponent } from './core/components/network-status/network-status.component';
 
 registerLocaleData(localeFr);
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [AppComponent, NetworkStatusComponent],
   imports: [
     AppRoutingModule,
     AuthenticationModule,

src/app/core/components/app/app.component.ts

@@ -1,17 +1,26 @@
-import { Component, OnInit } from '@angular/core';
-
-import { SeoService } from '@app/shared/services/seo.service';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { fromEvent, Observable, Subscription } from 'rxjs';
 
 @Component({
   selector: 'admin-root',
-  template: '<router-outlet></router-outlet>',
+  template: `
+    <router-outlet></router-outlet>
+    <network-status
+      [networkStatus]="connectionStatus"
+      [networkStatusMessage]="connectionStatusMessage"></network-status>
+  `,
 })
-export class AppComponent implements OnInit {
+export class AppComponent implements OnInit, OnDestroy {
   mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  onlineEvent!: Observable<Event>;
+  offlineEvent!: Observable<Event>;
+  subscriptions: Subscription[] = [];
 
-  public constructor(private seoService: SeoService) {}
+  connectionStatusMessage!: string;
+  connectionStatus!: string;
 
   ngOnInit(): void {
+    this.networkStatus();
     document.documentElement.setAttribute('data-theme', this.updateTheme());
 
     new MutationObserver(([{ oldValue }]) => {
@@ -28,6 +37,25 @@ export class AppComponent implements OnInit {
     });
   }
 
+  networkStatus(): void {
+    this.onlineEvent = fromEvent(window, 'online');
+    this.offlineEvent = fromEvent(window, 'offline');
+
+    this.subscriptions.push(
+      this.onlineEvent.subscribe(() => {
+        this.connectionStatus = 'online';
+        this.connectionStatusMessage = $localize`Vous êtes de nouveau en ligne.`;
+      })
+    );
+
+    this.subscriptions.push(
+      this.offlineEvent.subscribe(() => {
+        this.connectionStatus = 'offline';
+        this.connectionStatusMessage = $localize`Connexion perdue ! Vous n'êtes pas connecté à l'Internet`;
+      })
+    );
+  }
+
   updateTheme(savedTheme: string | null = null): string {
     let theme = 'system';
     try {
@@ -59,4 +87,8 @@ export class AppComponent implements OnInit {
       document.documentElement.classList.remove('[&_*]:!transition-none');
     }, 0);
   }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(subscription => subscription.unsubscribe());
+  }
 }

src/app/core/components/network-status/network-status.component.ts

@@ -0,0 +1,55 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'network-status',
+  template: `
+    <div
+      aria-live="assertive"
+      class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:p-6">
+      <div class="flex w-full flex-col items-end space-y-4">
+        <div
+          class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-800 shadow-lg ring-1 ring-black ring-opacity-5">
+          <div class="p-4">
+            <div class="flex items-start">
+              <div class="flex-shrink-0">
+                <!-- Heroicon name: outline/check-circle -->
+                <svg
+                  class="h-6 w-6 text-green-400"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  aria-hidden="true">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div class="ml-3 w-0 flex-1 pt-0.5">
+                <p class="text-sm font-medium text-slate-900 capitalize">
+                  Online
+                </p>
+                <p class="mt-1 text-sm text-slate-500">
+                  Anyone with a link can now view this file.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div *ngIf="networkStatus === 'online'" class="online">
+      <span>{{ networkStatusMessage }}</span>
+    </div>
+
+    <div *ngIf="networkStatus === 'offline'" class="offline">
+      <span>{{ networkStatusMessage }}</span>
+    </div>
+  `,
+})
+export class NetworkStatusComponent {
+  @Input() networkStatusMessage!: string;
+  @Input() networkStatus!: string;
+}