From 986e5f03b5bc5be9618d92ab75c4874066d18799 Mon Sep 17 00:00:00 2001 From: Sean Engelhardt Date: Thu, 28 Jun 2018 12:20:37 +0200 Subject: [PATCH] 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 | 4 ++-- client/src/app/app.module.ts | 8 ++++--- .../core/directives/alert/alert.component.ts | 4 ++++ .../core/directives/toast/toast.component.ts | 4 ++++ client/src/app/core/services/alert.service.ts | 4 ++++ client/src/app/core/services/auth.service.ts | 12 +++++----- client/src/app/core/services/toast.service.ts | 4 ++++ .../projector-container.component.css | 0 .../projector-container.component.html | 0 .../projector-container.component.spec.ts | 0 .../projector-container.component.ts | 0 .../projector/projector.component.css | 0 .../projector/projector.component.html | 0 .../projector/projector.component.spec.ts | 0 .../projector/projector.component.ts | 0 client/src/app/site/login/login.component.ts | 22 +++++++++++-------- 16 files changed, 42 insertions(+), 20 deletions(-) rename client/src/app/{projector => }/projector-container/projector-container.component.css (100%) rename client/src/app/{projector => }/projector-container/projector-container.component.html (100%) rename client/src/app/{projector => }/projector-container/projector-container.component.spec.ts (100%) rename client/src/app/{projector => }/projector-container/projector-container.component.ts (100%) rename client/src/app/{ => projector-container}/projector/projector.component.css (100%) rename client/src/app/{ => projector-container}/projector/projector.component.html (100%) rename client/src/app/{ => projector-container}/projector/projector.component.spec.ts (100%) rename client/src/app/{ => projector-container}/projector/projector.component.ts (100%) diff --git a/client/src/app/app-routing.module.ts b/client/src/app/app-routing.module.ts index 501532e63..e5f086d33 100644 --- a/client/src/app/app-routing.module.ts +++ b/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'; diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index b05f74732..5aaf17511 100644 --- a/client/src/app/app.module.ts +++ b/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 ], diff --git a/client/src/app/core/directives/alert/alert.component.ts b/client/src/app/core/directives/alert/alert.component.ts index 61314644d..d660452e5 100644 --- a/client/src/app/core/directives/alert/alert.component.ts +++ b/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', diff --git a/client/src/app/core/directives/toast/toast.component.ts b/client/src/app/core/directives/toast/toast.component.ts index e72e40624..3357cdb5c 100644 --- a/client/src/app/core/directives/toast/toast.component.ts +++ b/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', diff --git a/client/src/app/core/services/alert.service.ts b/client/src/app/core/services/alert.service.ts index 1ea95b2fe..00fa35902 100644 --- a/client/src/app/core/services/alert.service.ts +++ b/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' }) diff --git a/client/src/app/core/services/auth.service.ts b/client/src/app/core/services/auth.service.ts index 20efe8ac2..2e4eee5c3 100644 --- a/client/src/app/core/services/auth.service.ts +++ b/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 { - return this.http.get('/users/whoami/', httpOptions).pipe( + init(): Observable { + return this.http.get('/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 { - return this.http.post('/users/login/', user, httpOptions).pipe( + login(user: User): Observable { + return this.http.post('/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 { + logout(): Observable { this.isLoggedIn = false; localStorage.removeItem('username'); - return this.http.post('/users/logout/', {}, httpOptions); + return this.http.post('/users/logout/', {}, httpOptions); } //very generic error handling function. diff --git a/client/src/app/core/services/toast.service.ts b/client/src/app/core/services/toast.service.ts index d7bc95292..c087edfaf 100644 --- a/client/src/app/core/services/toast.service.ts +++ b/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' }) diff --git a/client/src/app/projector/projector-container/projector-container.component.css b/client/src/app/projector-container/projector-container.component.css similarity index 100% rename from client/src/app/projector/projector-container/projector-container.component.css rename to client/src/app/projector-container/projector-container.component.css diff --git a/client/src/app/projector/projector-container/projector-container.component.html b/client/src/app/projector-container/projector-container.component.html similarity index 100% rename from client/src/app/projector/projector-container/projector-container.component.html rename to client/src/app/projector-container/projector-container.component.html diff --git a/client/src/app/projector/projector-container/projector-container.component.spec.ts b/client/src/app/projector-container/projector-container.component.spec.ts similarity index 100% rename from client/src/app/projector/projector-container/projector-container.component.spec.ts rename to client/src/app/projector-container/projector-container.component.spec.ts diff --git a/client/src/app/projector/projector-container/projector-container.component.ts b/client/src/app/projector-container/projector-container.component.ts similarity index 100% rename from client/src/app/projector/projector-container/projector-container.component.ts rename to client/src/app/projector-container/projector-container.component.ts diff --git a/client/src/app/projector/projector.component.css b/client/src/app/projector-container/projector/projector.component.css similarity index 100% rename from client/src/app/projector/projector.component.css rename to client/src/app/projector-container/projector/projector.component.css diff --git a/client/src/app/projector/projector.component.html b/client/src/app/projector-container/projector/projector.component.html similarity index 100% rename from client/src/app/projector/projector.component.html rename to client/src/app/projector-container/projector/projector.component.html diff --git a/client/src/app/projector/projector.component.spec.ts b/client/src/app/projector-container/projector/projector.component.spec.ts similarity index 100% rename from client/src/app/projector/projector.component.spec.ts rename to client/src/app/projector-container/projector/projector.component.spec.ts diff --git a/client/src/app/projector/projector.component.ts b/client/src/app/projector-container/projector/projector.component.ts similarity index 100% rename from client/src/app/projector/projector.component.ts rename to client/src/app/projector-container/projector/projector.component.ts diff --git a/client/src/app/site/login/login.component.ts b/client/src/app/site/login/login.component.ts index 143800053..8f254373f 100644 --- a/client/src/app/site/login/login.component.ts +++ b/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);