working message offline

ui/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Storage } from '@ionic/storage'
 import { AuthService, AuthState } from './services/auth.service'
 import { ApiService } from './services/api/api.service'
 import { Router, RoutesRecognized } from '@angular/router'
-import { distinctUntilChanged, filter, finalize, takeWhile } from 'rxjs/operators'
+import { distinctUntilChanged, filter, finalize, map, takeWhile } from 'rxjs/operators'
 import { AlertController, ToastController } from '@ionic/angular'
 import { LoaderService } from './services/loader.service'
 import { Emver } from './services/emver.service'
@@ -24,6 +24,7 @@ export class AppComponent {
   showMenu = false
   selectedIndex = 0
   untilLoaded = true
+  offlineToast: HTMLIonToastElement
   appPages = [
     {
       title: 'Services',
@@ -112,6 +113,14 @@ export class AppComponent {
       takeWhile(() => auth === AuthState.VERIFIED),
     )
     .subscribe(c => {
+      if (!c.network || !c.internet) {
+        this.presentToastOffline()
+      } else {
+        if (this.offlineToast) {
+          this.offlineToast.dismiss()
+          this.offlineToast = undefined
+        }
+      }
       console.log('CONNECTION CHANGED', c)
     })
   }
@@ -216,6 +225,25 @@ export class AppComponent {
     await toast.present()
   }
 
+  private async presentToastOffline () {
+    this.offlineToast = await this.toastCtrl.create({
+      header: 'No Internet',
+      message: `Please check your Internet connection and try again.`,
+      position: 'bottom',
+      duration: 0,
+      buttons: [
+        {
+          side: 'start',
+          icon: 'close',
+          handler: () => {
+            return true
+          },
+        },
+      ],
+    })
+    await this.offlineToast.present()
+  }
+
   private async setError (e: Error) {
     console.error(e)
     await this.presentError(e.message)
@@ -247,4 +275,4 @@ const LoadingSpinner: (m?: string) => LoadingOptions = (m) => {
     cssClass: 'loader',
     ...toMergeIn,
   } as LoadingOptions
-}
+}

ui/src/app/services/connection.service.ts

@@ -7,9 +7,9 @@ import { ApiService } from './api/api.service'
   providedIn: 'root',
 })
 export class ConnectionService {
-  private offlineSubscription: Subscription
-  private onlineSubscription: Subscription
-  private httpSubscription: Subscription
+  private offlineSubscription$: Subscription
+  private onlineSubscription$: Subscription
+  private httpSubscription$: Subscription
   private readonly currentState: ConnectionState = {
     network: true,
     internet: true,
@@ -25,9 +25,9 @@ export class ConnectionService {
 
   ngOnDestroy (): void {
     try {
-      this.offlineSubscription.unsubscribe()
-      this.onlineSubscription.unsubscribe()
-      this.httpSubscription.unsubscribe()
+      this.offlineSubscription$.unsubscribe()
+      this.onlineSubscription$.unsubscribe()
+      this.httpSubscription$.unsubscribe()
     } catch (e) {
       console.error(e.message)
     }
@@ -44,34 +44,36 @@ export class ConnectionService {
   }
 
   private checkNetworkState (): void {
-    this.onlineSubscription = fromEvent(window, 'online').subscribe(() => {
+    this.onlineSubscription$ = fromEvent(window, 'online').subscribe(() => {
       this.currentState.network = true
       this.checkInternetState()
       this.emitEvent()
     })
 
-    this.offlineSubscription = fromEvent(window, 'offline').subscribe(() => {
-      this.currentState.network = true
-      this.checkInternetState()
+    this.offlineSubscription$ = fromEvent(window, 'offline').subscribe(() => {
+      this.currentState.network = false
+      if (this.httpSubscription$) {
+        this.httpSubscription$.unsubscribe()
+      }
       this.emitEvent()
     })
   }
 
   private checkInternetState (): void {
 
-    if (this.httpSubscription) {
-      this.httpSubscription.unsubscribe()
+    if (this.httpSubscription$) {
+      this.httpSubscription$.unsubscribe()
     }
 
     // ping server every 10 seconds
-    this.httpSubscription = timer(0, 10000)
+    this.httpSubscription$ = timer(0, 10000)
       .pipe(
         switchMap(() => this.apiService.echo()),
         retryWhen(errors =>
           errors.pipe(
             tap(val => {
               console.error('Echo error: ', val)
-              this.currentState.internet = true
+              this.currentState.internet = false
               this.emitEvent()
             }),
             // restart after 2 seconds
@@ -86,7 +88,7 @@ export class ConnectionService {
   }
 
   private emitEvent (): void {
-    this.stateChangeEventEmitter.next(this.currentState)
+    this.stateChangeEventEmitter.next({ ...this.currentState })
   }
 }