Added api connection check #70

kdb-web/src/app/app.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from './services/auth/auth.service';
+import { SocketService } from './services/socket/socket.service';
 import { ThemeService } from './services/theme/theme.service';
 
 @Component({
@@ -12,9 +13,11 @@ export class AppComponent implements OnInit {
   constructor(
     public authService: AuthService,
     public themeService: ThemeService,
+    private socket: SocketService
   ) { }
 
   ngOnInit(): void {
+    this.socket.startSocket();
     this.themeService.loadTheme();
     this.themeService.loadMenu();
   }

kdb-web/src/app/app.module.ts

@@ -9,6 +9,7 @@ import { ConfirmationService, MessageService } from 'primeng/api';
 import { DialogService } from 'primeng/dynamicdialog';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { NotFoundComponent } from './components/error/not-found/not-found.component';
 import { FooterComponent } from './components/footer/footer.component';
 import { HeaderComponent } from './components/header/header.component';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
@@ -16,7 +17,8 @@ import { SpinnerComponent } from './components/spinner/spinner.component';
 import { SharedModule } from './modules/shared/shared.module';
 import { ErrorHandlerService } from './services/error-handler/error-handler.service';
 import { SettingsService } from './services/settings/settings.service';
-import { NotFoundComponent } from './components/error/not-found/not-found.component';
+
+
 
 @NgModule({
   declarations: [

kdb-web/src/app/services/socket/socket.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SocketService } from './socket.service';
+
+describe('SocketService', () => {
+  let service: SocketService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SocketService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

kdb-web/src/app/services/socket/socket.service.ts

@@ -0,0 +1,71 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ToastOptions } from 'src/app/models/utils/toast-options';
+import { SettingsService } from '../settings/settings.service';
+import { SpinnerService } from '../spinner/spinner.service';
+import { ToastService } from '../toast/toast.service';
+import io from "socket.io-client";
+import { MessageService } from 'primeng/api';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SocketService {
+  private socket: any;
+  disconnected = false;
+
+  constructor(
+    private settingsService: SettingsService,
+    private toastService: ToastService,
+    private spinnerService: SpinnerService,
+    private messageService: MessageService,
+  ) {
+    this.socket = io(`${settingsService.getApiURL()}`)
+  }
+
+  startSocket() {
+    this.socket.on('connect', () => {
+      if (this.disconnected) {
+        if (this.spinnerService.showSpinnerState) {
+          this.spinnerService.hideSpinner();
+          const options: ToastOptions = {
+            closable: false
+          };
+          this.messageService.clear();
+          this.toastService.info("Server verbunden", "Die Verbindung zum Server konnte hergestellt werden.", options);
+        }
+      }
+
+      this.disconnected = false;
+      console.log('Connected!')
+    });
+
+    this.socket.on('connect_error', (err: Error) => {
+      if (this.disconnected) {
+        this.spinnerService.showSpinner();
+        return;
+      }
+
+      this.disconnected = true;
+
+      const options: ToastOptions = {
+        sticky: true,
+        closable: false
+      };
+      this.messageService.clear();
+      this.toastService.error("Server nicht erreichbar", "Die Verbindung zum Server konnte nicht hergestellt werden!\nLaden Sie die Seite neu.", options);
+      console.error(err.toString());
+    });
+
+    this.socket.on('disconnect', () => {
+      console.log('Disconnected!');
+      const options: ToastOptions = {
+        sticky: true,
+        closable: false
+      };
+      this.spinnerService.showSpinner();
+      this.messageService.clear();
+      this.toastService.error("Verbindung unterbrochen", "Die Verbindung zum Server konnte nicht hergestellt werden!\nLaden Sie die Seite neu.", options);
+    });
+  }
+}