Switch to snack bar service; customize snack bar

static/src/app/app.module.ts

@@ -22,6 +22,7 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {UserService} from './services/army-management/user.service';
 import {UserStore} from './services/stores/user.store';
 import {CookieService} from 'ngx-cookie-service';
+import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
 
 @NgModule({
   imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, ClipboardModule],
@@ -44,7 +45,8 @@ import {CookieService} from 'ngx-cookie-service';
     PromotionService,
     AppConfig,
     routingProviders,
-    CookieService
+    CookieService,
+    SnackBarService
   ],
   declarations: [
     AppComponent,

static/src/app/services/user-interface/snack-bar/snack-bar.service.ts

@@ -0,0 +1,37 @@
+import {Injectable} from '@angular/core';
+import {MatSnackBar, MatSnackBarRef} from '@angular/material/snack-bar';
+
+@Injectable()
+export class SnackBarService {
+  constructor(private snackbar: MatSnackBar) {
+  }
+
+  private show(message: string, action?: string, duration?: number, panelClasses?: string[]): MatSnackBarRef<any> {
+    const config = {};
+    if (duration) {
+      config['duration'] = duration;
+    }
+
+    if (action) {
+      if (panelClasses) {
+        panelClasses.push('snack-bar-button');
+      } else {
+        panelClasses = ['snack-bar-button'];
+      }
+    }
+
+    if (panelClasses) {
+      config['panelClass'] = panelClasses;
+    }
+
+    return this.snackbar.open(message, action, config);
+  }
+
+  showSuccess(message: string) {
+    return this.show(message, undefined, 2500, ['custom-snack-bar', 'label-success']);
+  }
+
+  showError(message: string) {
+    return this.show(message, 'OK', undefined, ['custom-snack-bar', 'label-danger']);
+  }
+}

static/src/app/shared.module.ts

@@ -3,13 +3,11 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {ShowErrorComponent} from './common/show-error/show-error.component';
 import {CommonModule} from '@angular/common';
 import {MaterialComponentsModule} from './common/modules/material-components.module';
-import {SnackBarComponent} from './user-interface/snack-bar/snack-bar.component';
 
 @NgModule({
-  declarations: [ShowErrorComponent, SnackBarComponent],
+  declarations: [ShowErrorComponent],
   imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialComponentsModule],
   exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent],
-  entryComponents: [SnackBarComponent]
 })
 export class SharedModule {
 }

static/src/app/user-interface/snack-bar/snack-bar-message.css

@@ -1,5 +0,0 @@
-.snack-bar-span {
-  text-align: center;
-  font-weight: 700;
-  color: #00d100;
-}

static/src/app/user-interface/snack-bar/snack-bar-message.html

@@ -1,3 +0,0 @@
-<div class="snack-bar-span">
-  Success!!!
-</div>

static/src/app/user-interface/snack-bar/snack-bar.component.ts

@@ -1,8 +0,0 @@
-import {Component} from '@angular/core';
-
-@Component({
-  selector: 'snack-bar-message',
-  templateUrl: 'snack-bar-message.html',
-  styleUrls: ['snack-bar-message.css'],
-})
-export class SnackBarComponent {}

static/src/app/users/edit-user/edit-user.component.ts

@@ -7,8 +7,7 @@ import {RankService} from '../../services/army-management/rank.service';
 import {Subscription} from 'rxjs/Subscription';
 import {NgForm} from '@angular/forms';
 import {Fraction} from '../../utils/fraction.enum';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
-import {SnackBarComponent} from '../../user-interface/snack-bar/snack-bar.component';
 
 
 @Component({
@@ -42,7 +41,7 @@ export class EditUserComponent implements OnInit {
               private userService: UserService,
               private squadService: SquadService,
               private rankService: RankService,
-              private snackBar: MatSnackBar) {
+              private snackBarService: SnackBarService) {
   }
 
   ngOnInit() {
@@ -104,7 +103,7 @@ export class EditUserComponent implements OnInit {
               user.squad = '0';
             }
             this.user = user;
-            this.snackBar.openFromComponent(SnackBarComponent, {duration: 2000});
+            this.snackBarService.showSuccess('Erfolgreich gespeichert');
           });
     } else {
       this.userService.submitUser(updateObject)
@@ -115,11 +114,7 @@ export class EditUserComponent implements OnInit {
             error => {
               // duplicated user error message
               if (error._body.includes('duplicate')) {
-                this.error = 'Benutzername existiert bereits';
+                this.snackBarService.showError('Benutzername existiert bereits');
-                this.showErrorLabel = true;
-                setTimeout(() => {
-                  this.showErrorLabel = false;
-                }, 5000);
               }
             });
     }

static/src/styles.css

@@ -49,3 +49,24 @@ form {
 #right {
   overflow: hidden;
 }
+
+/* MATERIAL */
+
+/* Snackbar begin*/
+.custom-snack-bar {
+  text-align: center;
+  border-radius: 8px 8px 0 0 !important;
+  font-weight: 700;
+  color: #ffffff;
+  text-shadow: black 0.1em 0.1em 0.2em
+}
+
+.custom-snack-bar > simple-snack-bar {
+  display: block;
+}
+
+.snack-bar-button button {
+  color: white;
+  border: 2px solid;
+  padding: 3px 10px;
+}