diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index 63d8a32..f057a2a 100644 --- a/static/src/app/app.module.ts +++ b/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, diff --git a/static/src/app/services/user-interface/snack-bar/snack-bar.service.ts b/static/src/app/services/user-interface/snack-bar/snack-bar.service.ts new file mode 100644 index 0000000..134b371 --- /dev/null +++ b/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 { + 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']); + } +} diff --git a/static/src/app/shared.module.ts b/static/src/app/shared.module.ts index f9788b6..50819ec 100644 --- a/static/src/app/shared.module.ts +++ b/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 { } diff --git a/static/src/app/user-interface/snack-bar/snack-bar-message.css b/static/src/app/user-interface/snack-bar/snack-bar-message.css deleted file mode 100644 index 0d38150..0000000 --- a/static/src/app/user-interface/snack-bar/snack-bar-message.css +++ /dev/null @@ -1,5 +0,0 @@ -.snack-bar-span { - text-align: center; - font-weight: 700; - color: #00d100; -} diff --git a/static/src/app/user-interface/snack-bar/snack-bar-message.html b/static/src/app/user-interface/snack-bar/snack-bar-message.html deleted file mode 100644 index b0b9536..0000000 --- a/static/src/app/user-interface/snack-bar/snack-bar-message.html +++ /dev/null @@ -1,3 +0,0 @@ -
- Success!!! -
diff --git a/static/src/app/user-interface/snack-bar/snack-bar.component.ts b/static/src/app/user-interface/snack-bar/snack-bar.component.ts deleted file mode 100644 index 3728f57..0000000 --- a/static/src/app/user-interface/snack-bar/snack-bar.component.ts +++ /dev/null @@ -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 {} diff --git a/static/src/app/users/edit-user/edit-user.component.ts b/static/src/app/users/edit-user/edit-user.component.ts index f12aec0..875c4c6 100644 --- a/static/src/app/users/edit-user/edit-user.component.ts +++ b/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 {SnackBarComponent} from '../../user-interface/snack-bar/snack-bar.component'; +import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service'; @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.showErrorLabel = true; - setTimeout(() => { - this.showErrorLabel = false; - }, 5000); + this.snackBarService.showError('Benutzername existiert bereits'); } }); } diff --git a/static/src/styles.css b/static/src/styles.css index b52b6f0..42352d2 100644 --- a/static/src/styles.css +++ b/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; +}