Fix server reconnection, add conn. lost snackbar

UI/angular.json

@@ -1,5 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "cli": {
+    "analytics": false
+  },
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {

UI/src/app/_services/conn-lost-snackbar.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class connLostSnackbarService {
+    public visible = false;
+
+    public hide() {
+        this.visible = false;
+    }
+
+    public show() {
+        this.visible = true;
+    }
+}

UI/src/app/_services/socket.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 import { io, Socket } from 'socket.io-client';
+import { connLostSnackbarService } from '../_services/conn-lost-snackbar.service';
 import { BusOption } from '../_models/BusOption';
 import { CloudClient } from '../_models/CloudClient';
 import { CloudDestination } from '../_models/CloudDestination';
@@ -79,13 +80,34 @@ export class SocketService {
   public deviceStateChanged = new Subject<DeviceState[]>();
 
 
-  constructor() {
+  constructor(
+    private connLostSnackbar: connLostSnackbarService
+  ) {
     this.socket = io();
-    this.socket.on("reconnect", (attempt) => {
+
+    this.socket.on('error', (message: string) => {
+      console.error(message);
+    });
+
+    this.socket.on("disconnect", (data) => {
+      console.error(data);
+      connLostSnackbar.show();
+    });
+    this.socket.io.on("reconnect_attempt", (attempt) => {
+      console.log("Reconnect attempt", attempt);
+    });
+    this.socket.io.on("reconnect_error", (error) => {
+      console.log("Reconnect error:", error.message);
+    });
+
+    this.socket.io.on("reconnect", () => {
+      console.log("Reconnected successfully");
+      this.connLostSnackbar.hide();
       if(typeof this.accessToken !== "undefined") {
         this.socket.emit('access_token', this.accessToken);
       }
     });
+
     this.socket.on('sources', (sources: Source[]) => {
       this.sources = this.prepareSources(sources);
     });
@@ -313,13 +335,6 @@ export class SocketService {
     this.socket.on('users', (users: User[]) => {
       this.users = users;
     });
-    this.socket.on('error', (message: string) => {
-      console.error(message);
-      if(message.includes("Access") || message.includes("JWT") || message.includes("jwt")) {
-        console.error("JWT requested after server reconnection. This should not happen.");
-        window.location.reload(); //tmp fix while we figure out how to handle server reconnection
-      }
-    });
 
     this.socket.on('remote_error_opt', (optStatus: boolean) => {
       this.remoteErrorOpt = optStatus;

UI/src/app/app.component.html

@@ -37,3 +37,8 @@
 </nav>
 
 <router-outlet></router-outlet>
+
+<div id="connLostSnackbar" [@fade]="connLostSnackbar.visible ? 'show' : 'hidden'">
+  <p>Connection to server lost...</p>
+  <i class="fa-solid fa-spinner fa-spin fa-xl"></i>
+</div>

UI/src/app/app.component.scss

@@ -0,0 +1,36 @@
+#connLostSnackbar {
+    min-width: 100%;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 2px;
+    padding: 16px;
+    position: fixed;
+    z-index: 1;
+    bottom: 0px;
+    font-size: 17px;
+    border-radius: 10px 10px 0px 0px;
+}
+
+@media only screen and (min-width: 768px) {
+    #connLostSnackbar {
+        left: 50%;
+        position: fixed;
+        transform: translate(-50%, 0px);
+        min-width: 400px;
+        font-size: 20px;
+    }
+}
+
+@media only screen and (min-width: 1600px) {
+    #connLostSnackbar {
+        min-width: 450px;
+        font-size: 28px;
+    }
+}
+
+#connLostSnackbar.show {
+    visibility: visible;
+    -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+    animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}

UI/src/app/app.component.ts

@@ -1,22 +1,41 @@
 import { Component } from '@angular/core';
 import { WakeLockService } from './_services/wake-lock.service';
 import { NavbarVisibilityService } from './_services/navbar-visibility.service';
+import { connLostSnackbarService } from './_services/conn-lost-snackbar.service';
 import { LocationBackService } from 'src/app/_services/locationBack.service';
 import { DarkModeService } from './_services/darkmode.service';
 import { AuthService } from './_services/auth.service';
 
+import { trigger, transition, style, animate, state } from '@angular/animations';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+  styleUrls: ['./app.component.scss'],
+  animations: [
+    trigger('fade', [
+      state('hidden', style({
+        opacity: 0
+      })),
+      state('show', style({
+        opacity: 1
+      })),
+      transition('hidden => show', [
+        animate('0.2s')
+      ]),
+      transition('show => hidden', [
+        animate('0.2s')
+      ])
+    ])
+  ]
 })
 export class AppComponent {
   public showMenu = false;
-  public hideNavBar = false;
 
   constructor(
     private wakeLockService: WakeLockService,
     public navbarVisibilityService: NavbarVisibilityService,
+    public connLostSnackbar: connLostSnackbarService,
     private locationBackService: LocationBackService,
     public darkModeService: DarkModeService,
     public authService: AuthService

UI/src/app/app.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { QrCodeModule } from 'ng-qrcode';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgJsonEditorModule } from 'ang-jsoneditor'
@@ -38,6 +39,7 @@ import { RequireRoleDirective } from './_directives/requireRole';
   ],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     AppRoutingModule,
     QrCodeModule,
     NgbNavModule,