Add Material "Snackbar", restructure projector

- Since MaterialUI does not have an equivalent to bootstrap alterts,
the toast service and alert service are marked as deprecated for now.
The functionality has been replaced with the snackbar.

client/src/app/app-routing.module.ts

@@ -2,8 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { LoginComponent } from './site/login/login.component';
-import { ProjectorComponent } from './projector/projector.component';
-import { ProjectorContainerComponent } from './projector/projector-container/projector-container.component';
+import { ProjectorComponent } from './projector-container/projector/projector.component';
+import { ProjectorContainerComponent } from './projector-container/projector-container.component';
 import { SiteComponent } from './site/site.component';
 import { StartComponent } from './site/start/start.component';
 import { AgendaComponent } from './site/agenda/agenda.component';

client/src/app/app.module.ts

@@ -13,7 +13,8 @@ import {
     MatCardModule,
     MatInputModule,
     MatProgressSpinnerModule,
-    MatSidenavModule
+    MatSidenavModule,
+    MatSnackBarModule
 } from '@angular/material';
 import { MatListModule } from '@angular/material/list';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -28,14 +29,14 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { AppComponent } from './app.component';
 import { LoginComponent } from './site/login/login.component';
 import { AppRoutingModule } from './app-routing.module';
-import { ProjectorComponent } from './projector/projector.component';
+import { ProjectorComponent } from './projector-container/projector/projector.component';
 import { MotionsComponent } from './site/motions/motions.component';
 import { AgendaComponent } from './site/agenda/agenda.component';
 import { SiteComponent } from './site/site.component';
 import { StartComponent } from './site/start/start.component';
 import { ToastComponent } from './core/directives/toast/toast.component';
 import { ToastService } from './core/services/toast.service';
-import { ProjectorContainerComponent } from './projector/projector-container/projector-container.component';
+import { ProjectorContainerComponent } from './projector-container/projector-container.component';
 import { AlertComponent } from './core/directives/alert/alert.component';
 
 //add font-awesome icons to library.
@@ -74,6 +75,7 @@ library.add(fas);
         MatListModule,
         MatExpansionModule,
         MatMenuModule,
+        MatSnackBarModule,
         FontAwesomeModule,
         AppRoutingModule
     ],

client/src/app/core/directives/alert/alert.component.ts

@@ -2,6 +2,10 @@ import { Component, OnInit, Input } from '@angular/core';
 
 import { Alert, AlertType } from 'app/core/models/alert';
 
+/**TODO Drafted for now. Since the UI is not done yet, this might be replaced or disappear entirely.
+ * Furtermore, Material UI does not support these kinds of alerts
+ */
+
 @Component({
     selector: 'app-alert',
     templateUrl: './alert.component.html',

client/src/app/core/directives/toast/toast.component.ts

@@ -3,6 +3,10 @@ import { Component, OnInit } from '@angular/core';
 import { Alert, AlertType } from 'app/core/models/alert';
 import { ToastService } from 'app/core/services/toast.service';
 
+/**TODO Drafted for now. Since the UI is not done yet, this might be replaced or disappear entirely.
+ * Furtermore, Material UI does not support these kinds of alerts
+ */
+
 @Component({
     selector: 'app-toast',
     templateUrl: './toast.component.html',

client/src/app/core/services/alert.service.ts

@@ -2,6 +2,10 @@ import { Injectable } from '@angular/core';
 
 import { Alert, AlertType } from 'app/core/models/alert';
 
+/**TODO Drafted for now. Since the UI is not done yet, this might be replaced or disappear entirely.
+ * Furtermore, Material UI does not support these kinds of alerts
+ */
+
 @Injectable({
     providedIn: 'root'
 })

client/src/app/core/services/auth.service.ts

@@ -33,8 +33,8 @@ export class AuthService {
 
     // Initialize the service by querying the server
     // Not sure if this makes sense, since a service is not supposed to init()
-    init(): Observable<any> {
-        return this.http.get('/users/whoami/', httpOptions).pipe(
+    init(): Observable<User | any> {
+        return this.http.get<User>('/users/whoami/', httpOptions).pipe(
             tap(val => {
                 console.log('auth-init-whami : ', val);
             }),
@@ -43,8 +43,8 @@ export class AuthService {
     }
 
     //loggins a users. expects a user model
-    login(user: User): Observable<any> {
-        return this.http.post('/users/login/', user, httpOptions).pipe(
+    login(user: User): Observable<User | any> {
+        return this.http.post<User>('/users/login/', user, httpOptions).pipe(
             tap(val => {
                 this.isLoggedIn = true;
                 //Set the session cookie in local storrage.
@@ -56,11 +56,11 @@ export class AuthService {
 
     //logout the user
     //TODO not yet used
-    logout(): Observable<any> {
+    logout(): Observable<User | any> {
         this.isLoggedIn = false;
         localStorage.removeItem('username');
 
-        return this.http.post('/users/logout/', {}, httpOptions);
+        return this.http.post<User>('/users/logout/', {}, httpOptions);
     }
 
     //very generic error handling function.

client/src/app/core/services/toast.service.ts

@@ -3,6 +3,10 @@ import { Observable, Subject } from 'rxjs';
 
 import { Alert, AlertType } from 'app/core/models/alert';
 
+/**TODO Drafted for now. Since the UI is not done yet, this might be replaced or disappear entirely.
+ * Furtermore, Material UI does not support these kinds of alerts
+ */
+
 @Injectable({
     providedIn: 'root'
 })

client/src/app/site/login/login.component.ts

@@ -1,11 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
+import { MatSnackBar } from '@angular/material';
 
 import { BaseComponent } from 'app/base.component';
 import { User } from 'app/core/models/user';
 import { AuthService } from 'app/core/services/auth.service';
-import { AlertService } from 'app/core/services/alert.service';
 
 @Component({
     selector: 'app-login',
@@ -22,8 +22,8 @@ export class LoginComponent extends BaseComponent implements OnInit {
     constructor(
         titleService: Title,
         private authService: AuthService,
-        private alertService: AlertService,
-        private router: Router
+        private router: Router,
+        private snackBar: MatSnackBar
     ) {
         super(titleService);
         this.setInfo();
@@ -38,19 +38,23 @@ export class LoginComponent extends BaseComponent implements OnInit {
         this.info = 'Logged in? ' + (this.authService.isLoggedIn ? 'in' : 'out');
     }
 
+    openSnackBar(message: string) {
+        this.snackBar.open(message, 'OK', {
+            duration: 2000
+        });
+    }
+
     //Todo: This serves as a prototype and need enhancement,
     //like saving a "logged in state" and real checking the server
     //if logIn was fine
     formLogin(): void {
         this.authService.login(this.user).subscribe(res => {
             if (res.status === 400) {
-                //TODO, add more errors here, use
-                console.log('error in login');
-
-                //todo alert seems to work differently than toast
-                this.alertService.error('Benutzername oder Passwort war nicht korrekt.');
+                //TODO translate
+                console.log('res: ', res);
+                this.openSnackBar(res.error.detail);
             } else {
-                this.alertService.success('Logged in! :)');
+                // this.toastService.success('Logged in! :)');
                 this.setInfo();
                 if (this.authService.isLoggedIn) {
                     localStorage.setItem('username', res.user.username);