[frontend] Add overlay on network error

kibicara-frontend/src/app/core/auth/error.interceptor.ts

@@ -10,10 +10,16 @@ import { Observable, throwError } from 'rxjs';
 import { LoginService } from './login.service';
 import { catchError } from 'rxjs/operators';
 import { Router } from '@angular/router';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { OverlayComponent } from 'src/app/shared/overlay/overlay.component';
 
 @Injectable()
 export class ErrorInterceptor implements HttpInterceptor {
-  constructor(private loginService: LoginService, private router: Router) {}
+  constructor(
+    private loginService: LoginService,
+    private router: Router,
+    private _snackBar: MatSnackBar
+  ) {}
 
   intercept(
     request: HttpRequest<unknown>,
@@ -24,6 +30,12 @@ export class ErrorInterceptor implements HttpInterceptor {
         if (err.error instanceof ProgressEvent) {
           // TODO Add spinner/overlay in app to prevent user input
           console.log('Networkerror');
+          this._snackBar.openFromComponent(OverlayComponent, {
+            verticalPosition: 'top',
+          });
+          setTimeout(function () {
+            window.location.reload();
+          }, 20000);
         } else if (err.status === 401) {
           this.loginService.logout();
           location.reload(true);

kibicara-frontend/src/app/shared/overlay/overlay.component.html

@@ -0,0 +1,4 @@
+<div class="container">
+  <p>Network connection lost. Reconnecting...</p>
+  <mat-spinner class="spinner"></mat-spinner>
+</div>

kibicara-frontend/src/app/shared/overlay/overlay.component.scss

@@ -0,0 +1,11 @@
+.container {
+  margin: 10%;
+  text-align: center;
+}
+
+.spinner {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  width: 40%;
+}

kibicara-frontend/src/app/shared/overlay/overlay.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OverlayComponent } from './overlay.component';
+
+describe('OverlayComponent', () => {
+  let component: OverlayComponent;
+  let fixture: ComponentFixture<OverlayComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [OverlayComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OverlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/shared/overlay/overlay.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-overlay',
+  templateUrl: './overlay.component.html',
+  styleUrls: ['./overlay.component.scss'],
+})
+export class OverlayComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

kibicara-frontend/src/app/shared/shared.module.ts

@@ -7,9 +7,15 @@ import { RouterModule } from '@angular/router';
 import { CommonModule } from '@angular/common';
 import { Ng2SearchPipeModule } from 'ng2-search-filter';
 import { YesNoDialogComponent } from './yes-no-dialog/yes-no-dialog.component';
+import { OverlayComponent } from './overlay/overlay.component';
 
 @NgModule({
-  declarations: [ToolbarComponent, NotFoundComponent, YesNoDialogComponent],
+  declarations: [
+    ToolbarComponent,
+    NotFoundComponent,
+    YesNoDialogComponent,
+    OverlayComponent,
+  ],
   imports: [
     MaterialModule,
     ReactiveFormsModule,