From a5a098a3868f587e5baea4c9aeec071745999b1e Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Tue, 1 Sep 2020 21:56:24 +0200
Subject: [PATCH] [frontend] Add overlay on network error
---
.../src/app/core/auth/error.interceptor.ts | 14 ++++++++++-
.../app/shared/overlay/overlay.component.html | 4 ++++
.../app/shared/overlay/overlay.component.scss | 11 +++++++++
.../shared/overlay/overlay.component.spec.ts | 24 +++++++++++++++++++
.../app/shared/overlay/overlay.component.ts | 12 ++++++++++
.../src/app/shared/shared.module.ts | 8 ++++++-
6 files changed, 71 insertions(+), 2 deletions(-)
create mode 100644 kibicara-frontend/src/app/shared/overlay/overlay.component.html
create mode 100644 kibicara-frontend/src/app/shared/overlay/overlay.component.scss
create mode 100644 kibicara-frontend/src/app/shared/overlay/overlay.component.spec.ts
create mode 100644 kibicara-frontend/src/app/shared/overlay/overlay.component.ts
diff --git a/kibicara-frontend/src/app/core/auth/error.interceptor.ts b/kibicara-frontend/src/app/core/auth/error.interceptor.ts
index b8adc78..555e834 100644
--- a/kibicara-frontend/src/app/core/auth/error.interceptor.ts
+++ b/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);
diff --git a/kibicara-frontend/src/app/shared/overlay/overlay.component.html b/kibicara-frontend/src/app/shared/overlay/overlay.component.html
new file mode 100644
index 0000000..6ffaaf0
--- /dev/null
+++ b/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>
diff --git a/kibicara-frontend/src/app/shared/overlay/overlay.component.scss b/kibicara-frontend/src/app/shared/overlay/overlay.component.scss
new file mode 100644
index 0000000..d05e06f
--- /dev/null
+++ b/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%;
+}
diff --git a/kibicara-frontend/src/app/shared/overlay/overlay.component.spec.ts b/kibicara-frontend/src/app/shared/overlay/overlay.component.spec.ts
new file mode 100644
index 0000000..02a3020
--- /dev/null
+++ b/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();
+ });
+});
diff --git a/kibicara-frontend/src/app/shared/overlay/overlay.component.ts b/kibicara-frontend/src/app/shared/overlay/overlay.component.ts
new file mode 100644
index 0000000..bc6890d
--- /dev/null
+++ b/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 {}
+}
diff --git a/kibicara-frontend/src/app/shared/shared.module.ts b/kibicara-frontend/src/app/shared/shared.module.ts
index 5ea0155..6645dd2 100644
--- a/kibicara-frontend/src/app/shared/shared.module.ts
+++ b/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,