From 44ae806b30040f4df30b1fed860a5876f942f4d7 Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Thu, 23 Jul 2020 11:28:07 +0200
Subject: [PATCH] Add offline alert

---
 .../src/fm/components/app/app.component.html   |  5 +++++
 .../src/fm/components/app/app.component.scss   | 18 ++++++++++++++++++
 .../src/fm/components/app/app.component.ts     |  2 ++
 .../src/fm/reducers/app-common.reducer.ts      |  2 +-
 .../src/fm/services/healthcheck.service.ts     |  2 +-
 5 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html
index ee20526..b449d64 100644
--- a/projects/common/src/fm/components/app/app.component.html
+++ b/projects/common/src/fm/components/app/app.component.html
@@ -26,4 +26,9 @@
   <div class="user-menu">
     <fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>
   </div>
+  <div class="healthstatus-container online" [ngClass]="{'online' :(isOnline|async)}">
+    <div class="healthstatus alert alert-danger" >
+      <span i18n>No connection, check your internet connection</span>
+    </div>
+  </div>
 </div>
diff --git a/projects/common/src/fm/components/app/app.component.scss b/projects/common/src/fm/components/app/app.component.scss
index 5782958..fee4b35 100644
--- a/projects/common/src/fm/components/app/app.component.scss
+++ b/projects/common/src/fm/components/app/app.component.scss
@@ -87,3 +87,21 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;}
 .fullscreen > .user-menu  {
   top:1em;
 }
+
+.healthstatus-container {
+  width: 100%;
+  position: absolute;
+  bottom: 0px;
+  overflow: hidden;
+  transition: height 0.5s ease-out;
+  height:3.25em;
+}
+
+.healthstatus {
+  width: 100%;
+  padding: 1em;
+}
+
+.online {
+  height:0;
+}
diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts
index f435b86..3d4abc1 100644
--- a/projects/common/src/fm/components/app/app.component.ts
+++ b/projects/common/src/fm/components/app/app.component.ts
@@ -35,6 +35,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public currentFolder: Observable<IListItem>;
   public folderParents: Observable<IListItem[]>;
   public fullScreen: Observable<boolean>;
+  public isOnline: Observable<boolean>;
   public routeLoading: Observable<boolean>;
   public menuVisible: Observable<boolean>;
   public accountMenuVisible: Observable<boolean>;
@@ -100,6 +101,7 @@ export class AppComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
+    this.isOnline = this.store.select(appReducers.SelectGetIsOnline);
     this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
     this.menuVisible = this.store.select(appReducers.SelectGetMenuVisible);
     this.accountMenuVisible = this.store.select(appReducers.SelectGetAccountMenuVisible);
diff --git a/projects/common/src/fm/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts
index 19a5fa0..0e27053 100644
--- a/projects/common/src/fm/reducers/app-common.reducer.ts
+++ b/projects/common/src/fm/reducers/app-common.reducer.ts
@@ -33,7 +33,7 @@ export const initialState: State = {
   menuVisible: false,
   userPackages: {},
   accountMenuVisible: false,
-  isOnline: window.navigator.onLine
+  isOnline: true
 }
 
 export function reducer(state = initialState, action: appCommonActions.Actions ): State {
diff --git a/projects/common/src/fm/services/healthcheck.service.ts b/projects/common/src/fm/services/healthcheck.service.ts
index 8888196..8633cc9 100644
--- a/projects/common/src/fm/services/healthcheck.service.ts
+++ b/projects/common/src/fm/services/healthcheck.service.ts
@@ -19,7 +19,7 @@ import { AppConfig } from "../shared/app.config";
     }
 
     check(interval:number): Observable<boolean> {
-      let retval = new BehaviorSubject<boolean>(false);
+      let retval = new BehaviorSubject<boolean>(true);
       setInterval(() => {
         this.httpClient.get(`${this.ApiEndpoint()}/api/v1/healthcheck`).pipe(map(() => true),catchError((error) => of(false))).toPromise().then((status) => {
            retval.next(status);