From b7a3c69540d0d09933b25caa638f92db8ac72bba Mon Sep 17 00:00:00 2001 From: HardiReady Date: Sat, 30 Jun 2018 17:29:58 +0200 Subject: [PATCH] Use snackbar for success/error labels; Add material loading indicator --- static/src/app/admin/admin.component.html | 5 -- static/src/app/admin/admin.component.ts | 12 ++-- static/src/app/app.component.html | 2 +- static/src/app/app.module.ts | 4 +- static/src/app/army/army-member.component.ts | 2 +- static/src/app/army/army.component.ts | 2 +- .../modules/material-components.module.ts | 52 ------------------ .../edit-decoration.component.html | 7 --- .../edit-decoration.component.ts | 12 ++-- static/src/app/i18n/de.messages.ts | 5 ++ static/src/app/login/signup.component.html | 16 ------ static/src/app/login/signup.component.ts | 19 ++----- static/src/app/material-components.module.ts | 55 +++++++++++++++++++ .../decoration-overview.component.ts | 2 +- .../rank-overview/rank-overview.component.ts | 2 +- .../ranks/edit-rank/edit-rank.component.html | 7 --- .../ranks/edit-rank/edit-rank.component.ts | 12 ++-- .../request/award/req-award.component.html | 5 -- .../app/request/award/req-award.component.ts | 12 ++-- .../confirm-award.component.html | 5 -- .../confirm-award/confirm-award.component.ts | 14 ++--- .../confirm-promotion.component.html | 7 --- .../confirm-promotion.component.ts | 13 ++--- .../promotion/req-promotion.component.html | 6 -- .../promotion/req-promotion.component.ts | 12 ++-- .../snack-bar/snack-bar.service.ts | 4 +- static/src/app/shared.module.ts | 3 +- .../edit-squad/edit-squad.component.html | 7 --- .../squads/edit-squad/edit-squad.component.ts | 12 ++-- .../war/war-submit/war-submit.component.ts | 31 +++++------ static/src/app/style/load-indicator.css | 31 ++++++++++- .../award-user/award-user.component.html | 6 -- .../users/award-user/award-user.component.ts | 18 ++---- .../users/edit-user/edit-user.component.html | 6 -- .../users/edit-user/edit-user.component.ts | 9 +-- static/src/app/{ => utils}/global.helpers.ts | 0 36 files changed, 171 insertions(+), 246 deletions(-) delete mode 100644 static/src/app/common/modules/material-components.module.ts create mode 100644 static/src/app/i18n/de.messages.ts create mode 100644 static/src/app/material-components.module.ts rename static/src/app/{ => utils}/global.helpers.ts (100%) diff --git a/static/src/app/admin/admin.component.html b/static/src/app/admin/admin.component.html index fa60e76..295f2ce 100644 --- a/static/src/app/admin/admin.component.html +++ b/static/src/app/admin/admin.component.html @@ -2,11 +2,6 @@

Admin Panel

- - Erfolgreich gespeichert - -
diff --git a/static/src/app/admin/admin.component.ts b/static/src/app/admin/admin.component.ts index ee58436..e349bce 100644 --- a/static/src/app/admin/admin.component.ts +++ b/static/src/app/admin/admin.component.ts @@ -4,6 +4,8 @@ import {Observable} from 'rxjs/Observable'; import {AppUserService} from '../services/app-user-service/app-user.service'; import {SquadService} from '../services/army-management/squad.service'; import {Fraction} from '../utils/fraction.enum'; +import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service'; +import {Message} from '../i18n/de.messages'; @Component({ @@ -17,12 +19,11 @@ export class AdminComponent implements OnInit { squads: Squad[] = []; - showSuccessLabel = false; - readonly fraction = Fraction; constructor(private appUserService: AppUserService, - private squadService: SquadService) { + private squadService: SquadService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -46,10 +47,7 @@ export class AdminComponent implements OnInit { this.appUserService.updateUser(updateObject) .subscribe(resUser => { - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 2000); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); }); } diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index 4e6a4a0..319e0bf 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -103,7 +103,7 @@
- +
diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index f057a2a..4f58c5c 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -23,9 +23,11 @@ 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'; +import {MaterialComponentsModule} from './material-components.module'; @NgModule({ - imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, ClipboardModule], + imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, ClipboardModule, + MaterialComponentsModule], providers: [ HttpClient, LoginService, diff --git a/static/src/app/army/army-member.component.ts b/static/src/app/army/army-member.component.ts index 46fa54f..bd559df 100644 --- a/static/src/app/army/army-member.component.ts +++ b/static/src/app/army/army-member.component.ts @@ -7,7 +7,7 @@ import {RouteConfig} from '../app.config'; import {AwardingService} from '../services/army-management/awarding.service'; import {Fraction} from '../utils/fraction.enum'; import {DOCUMENT} from '@angular/common'; -import {CSSHelpers} from '../global.helpers'; +import {CSSHelpers} from '../utils/global.helpers'; @Component({ diff --git a/static/src/app/army/army.component.ts b/static/src/app/army/army.component.ts index cb51b89..d0cf1c4 100644 --- a/static/src/app/army/army.component.ts +++ b/static/src/app/army/army.component.ts @@ -5,7 +5,7 @@ import {ActivatedRoute, Router} from '@angular/router'; import {Fraction} from '../utils/fraction.enum'; import {DOCUMENT} from '@angular/common'; import {RouteConfig} from '../app.config'; -import {CSSHelpers} from '../global.helpers'; +import {CSSHelpers} from '../utils/global.helpers'; @Component({ diff --git a/static/src/app/common/modules/material-components.module.ts b/static/src/app/common/modules/material-components.module.ts deleted file mode 100644 index 3ace341..0000000 --- a/static/src/app/common/modules/material-components.module.ts +++ /dev/null @@ -1,52 +0,0 @@ -/** - * Angular material imports - */ - -import { NgModule } from '@angular/core'; -import { - MatSidenavModule, - MatFormFieldModule, - MatInputModule, - MatButtonModule, - MatCheckboxModule, - MatTableModule, - MatPaginatorModule, - MatSortModule, - MatIconModule, - MatSnackBarModule, - MatToolbarModule, - MatExpansionModule -} from '@angular/material'; - -@NgModule({ - imports: [ - MatSidenavModule, - MatFormFieldModule, - MatInputModule, - MatButtonModule, - MatCheckboxModule, - MatTableModule, - MatPaginatorModule, - MatSortModule, - MatIconModule, - MatSnackBarModule, - MatToolbarModule, - MatExpansionModule - ], - exports: [ - MatSidenavModule, - MatFormFieldModule, - MatInputModule, - MatButtonModule, - MatCheckboxModule, - MatTableModule, - MatPaginatorModule, - MatSortModule, - MatIconModule, - MatSnackBarModule, - MatToolbarModule, - MatExpansionModule - ] -}) - -export class MaterialComponentsModule {} diff --git a/static/src/app/decorations/edit-decoration/edit-decoration.component.html b/static/src/app/decorations/edit-decoration/edit-decoration.component.html index 3852ca3..ee704d0 100644 --- a/static/src/app/decorations/edit-decoration/edit-decoration.component.html +++ b/static/src/app/decorations/edit-decoration/edit-decoration.component.html @@ -75,11 +75,4 @@ [disabled]="!form.valid"> Bestätigen - - - Erfolgreich gespeichert - - diff --git a/static/src/app/decorations/edit-decoration/edit-decoration.component.ts b/static/src/app/decorations/edit-decoration/edit-decoration.component.ts index acca0de..11df1c1 100644 --- a/static/src/app/decorations/edit-decoration/edit-decoration.component.ts +++ b/static/src/app/decorations/edit-decoration/edit-decoration.component.ts @@ -5,6 +5,8 @@ import {Decoration} from '../../models/model-interfaces'; import {DecorationService} from '../../services/army-management/decoration.service'; import {Subscription} from 'rxjs/Subscription'; import {Fraction} from '../../utils/fraction.enum'; +import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service'; +import {Message} from '../../i18n/de.messages'; @Component({ templateUrl: './edit-decoration.component.html', @@ -22,15 +24,14 @@ export class EditDecorationComponent implements OnInit, OnDestroy { imagePreviewSrc; - showSuccessLabel = false; - @ViewChild(NgForm) form: NgForm; readonly fraction = Fraction; constructor(private route: ActivatedRoute, private router: Router, - private decorationService: DecorationService) { + private decorationService: DecorationService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -81,10 +82,7 @@ export class EditDecorationComponent implements OnInit, OnDestroy { this.imagePreviewSrc = 'resource/decoration/' + this.decoration._id + '.png?' + Date.now(); }, 300); fileInput.value = ''; - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 2000); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); }); } } diff --git a/static/src/app/i18n/de.messages.ts b/static/src/app/i18n/de.messages.ts new file mode 100644 index 0000000..fcff963 --- /dev/null +++ b/static/src/app/i18n/de.messages.ts @@ -0,0 +1,5 @@ +export enum Message { + SIGN_UP_SUCCESS = 'Account erfolgreich erstellt', + SUCCESS_SAVE = 'Erfolgreich gespeichert', + DUPLICATED_NAME_ERR = 'Benutzername existiert bereits', +} diff --git a/static/src/app/login/signup.component.html b/static/src/app/login/signup.component.html index e2b0e7d..7986a8b 100644 --- a/static/src/app/login/signup.component.html +++ b/static/src/app/login/signup.component.html @@ -21,28 +21,12 @@ -
-

- - Account erfolgreich erstellt - -

- - {{error}} -
- -
- - diff --git a/static/src/app/login/signup.component.ts b/static/src/app/login/signup.component.ts index a20008e..6e04a8c 100644 --- a/static/src/app/login/signup.component.ts +++ b/static/src/app/login/signup.component.ts @@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core'; import {ActivatedRoute, Router} from '@angular/router'; import {LoginService} from '../services/app-user-service/login-service'; import {RouteConfig} from '../app.config'; +import {Message} from '../i18n/de.messages'; +import {SnackBarService} from '../services/user-interface/snack-bar/snack-bar.service'; @Component({ @@ -12,19 +14,14 @@ import {RouteConfig} from '../app.config'; export class SignupComponent implements OnInit { - showErrorLabel = false; - - showSuccessLabel = false; - - error: string; - loading = false; returnUrl: string; constructor(private route: ActivatedRoute, private router: Router, - private loginService: LoginService) { + private loginService: LoginService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -41,15 +38,11 @@ export class SignupComponent implements OnInit { .subscribe( data => { this.loading = false; - this.showSuccessLabel = true; + this.snackBarService.showSuccess(Message.SIGN_UP_SUCCESS); }, error => { - this.error = error; - this.showErrorLabel = true; - setTimeout(() => { - this.showErrorLabel = false; - }, 4000); this.loading = false; + this.snackBarService.showError(error, 10000); }); } } diff --git a/static/src/app/material-components.module.ts b/static/src/app/material-components.module.ts new file mode 100644 index 0000000..f8e26c9 --- /dev/null +++ b/static/src/app/material-components.module.ts @@ -0,0 +1,55 @@ +/** + * Angular material imports + */ + +import { NgModule } from '@angular/core'; +import { + MatSidenavModule, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + MatCheckboxModule, + MatTableModule, + MatPaginatorModule, + MatSortModule, + MatIconModule, + MatSnackBarModule, + MatToolbarModule, + MatExpansionModule, + MatProgressSpinnerModule +} from '@angular/material'; + +@NgModule({ + imports: [ + // MatSidenavModule, + // MatFormFieldModule, + // MatInputModule, + // MatButtonModule, + // MatCheckboxModule, + // MatTableModule, + // MatPaginatorModule, + // MatSortModule, + // MatIconModule, + MatSnackBarModule, + MatProgressSpinnerModule, + // MatToolbarModule, + // MatExpansionModule + ], + exports: [ + // MatSidenavModule, + // MatFormFieldModule, + // MatInputModule, + // MatButtonModule, + // MatCheckboxModule, + // MatTableModule, + // MatPaginatorModule, + // MatSortModule, + // MatIconModule, + MatSnackBarModule, + MatProgressSpinnerModule, + // MatToolbarModule, + // MatExpansionModule + ] +}) + +export class MaterialComponentsModule {} diff --git a/static/src/app/pub/decoration-overview/decoration-overview.component.ts b/static/src/app/pub/decoration-overview/decoration-overview.component.ts index 2c546dc..4dcb68b 100644 --- a/static/src/app/pub/decoration-overview/decoration-overview.component.ts +++ b/static/src/app/pub/decoration-overview/decoration-overview.component.ts @@ -3,7 +3,7 @@ import {ActivatedRoute, Router} from '@angular/router'; import {DOCUMENT} from '@angular/common'; import {Fraction} from '../../utils/fraction.enum'; -import {CSSHelpers} from '../../global.helpers'; +import {CSSHelpers} from '../../utils/global.helpers'; import {RouteConfig} from '../../app.config'; import {Decoration} from '../../models/model-interfaces'; import {DecorationService} from '../../services/army-management/decoration.service'; diff --git a/static/src/app/pub/rank-overview/rank-overview.component.ts b/static/src/app/pub/rank-overview/rank-overview.component.ts index 26c39cd..bb4abfe 100644 --- a/static/src/app/pub/rank-overview/rank-overview.component.ts +++ b/static/src/app/pub/rank-overview/rank-overview.component.ts @@ -3,7 +3,7 @@ import {ActivatedRoute, Router} from '@angular/router'; import {DOCUMENT} from '@angular/common'; import {Fraction} from '../../utils/fraction.enum'; -import {CSSHelpers} from '../../global.helpers'; +import {CSSHelpers} from '../../utils/global.helpers'; import {RouteConfig} from '../../app.config'; import {Rank} from '../../models/model-interfaces'; import {RankService} from '../../services/army-management/rank.service'; diff --git a/static/src/app/ranks/edit-rank/edit-rank.component.html b/static/src/app/ranks/edit-rank/edit-rank.component.html index eee7a19..7efdfda 100644 --- a/static/src/app/ranks/edit-rank/edit-rank.component.html +++ b/static/src/app/ranks/edit-rank/edit-rank.component.html @@ -56,11 +56,4 @@ [disabled]="!form.valid"> Bestätigen - - - Erfolgreich gespeichert - - diff --git a/static/src/app/ranks/edit-rank/edit-rank.component.ts b/static/src/app/ranks/edit-rank/edit-rank.component.ts index 5be2bbb..07497c3 100644 --- a/static/src/app/ranks/edit-rank/edit-rank.component.ts +++ b/static/src/app/ranks/edit-rank/edit-rank.component.ts @@ -5,6 +5,8 @@ import {Rank} from '../../models/model-interfaces'; import {RankService} from '../../services/army-management/rank.service'; import {Subscription} from 'rxjs/Subscription'; import {Fraction} from '../../utils/fraction.enum'; +import {Message} from '../../i18n/de.messages'; +import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service'; @Component({ @@ -25,15 +27,14 @@ export class EditRankComponent implements OnInit, OnDestroy { imagePreviewSrc; - showSuccessLabel = false; - @ViewChild(NgForm) form: NgForm; readonly fraction = Fraction; constructor(private route: ActivatedRoute, private router: Router, - private rankService: RankService) { + private rankService: RankService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -85,10 +86,7 @@ export class EditRankComponent implements OnInit, OnDestroy { this.imagePreviewSrc = 'resource/rank/' + this.rank._id + '.png?' + Date.now(); }, 300); fileInput.value = ''; - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 2000); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); }); } } diff --git a/static/src/app/request/award/req-award.component.html b/static/src/app/request/award/req-award.component.html index c9cbc66..245e062 100644 --- a/static/src/app/request/award/req-award.component.html +++ b/static/src/app/request/award/req-award.component.html @@ -62,11 +62,6 @@ Bestätigen - - Erfolgreich gespeichert - -
diff --git a/static/src/app/request/award/req-award.component.ts b/static/src/app/request/award/req-award.component.ts index efab43d..999d598 100644 --- a/static/src/app/request/award/req-award.component.ts +++ b/static/src/app/request/award/req-award.component.ts @@ -6,6 +6,8 @@ import {AwardingService} from '../../services/army-management/awarding.service'; import {DecorationService} from '../../services/army-management/decoration.service'; import {UserService} from '../../services/army-management/user.service'; import {LoginService} from '../../services/app-user-service/login-service'; +import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service'; +import {Message} from '../../i18n/de.messages'; @Component({ @@ -18,8 +20,6 @@ export class RequestAwardComponent implements OnInit { showForm = false; - showSuccessLabel = false; - user: User = {_id: '0'}; decoration: Decoration = {_id: '0'}; @@ -39,7 +39,8 @@ export class RequestAwardComponent implements OnInit { private userService: UserService, private awardingService: AwardingService, private decorationService: DecorationService, - private loginService: LoginService) { + private loginService: LoginService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -93,10 +94,7 @@ export class RequestAwardComponent implements OnInit { this.decoration = {_id: '0'}; this.reason = previewImage.src = descriptionField.innerHTML = ''; this.decoPreviewDisplay = 'none'; - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 2000); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); }); }); } diff --git a/static/src/app/request/confirm-award/confirm-award.component.html b/static/src/app/request/confirm-award/confirm-award.component.html index a35c79b..fcf26dc 100644 --- a/static/src/app/request/confirm-award/confirm-award.component.html +++ b/static/src/app/request/confirm-award/confirm-award.component.html @@ -1,11 +1,6 @@

Offene Anträge - Auszeichnungen

- - Erfolgreich gespeichert - -
diff --git a/static/src/app/request/confirm-award/confirm-award.component.ts b/static/src/app/request/confirm-award/confirm-award.component.ts index 59238cc..1e9d526 100644 --- a/static/src/app/request/confirm-award/confirm-award.component.ts +++ b/static/src/app/request/confirm-award/confirm-award.component.ts @@ -2,6 +2,8 @@ import {Component, OnInit} from '@angular/core'; import {Award} from '../../models/model-interfaces'; import {AwardingService} from '../../services/army-management/awarding.service'; import {LoginService} from '../../services/app-user-service/login-service'; +import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service'; +import {Message} from '../../i18n/de.messages'; @Component({ @@ -12,10 +14,9 @@ export class ConfirmAwardComponent implements OnInit { awards: Award[]; - showSuccessLabel = false; - constructor(private awardingService: AwardingService, - private loginService: LoginService) { + private loginService: LoginService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -46,13 +47,8 @@ export class ConfirmAwardComponent implements OnInit { if (awards.length < 1) { this.awardingService.hasUnprocessedAwards = false; } - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 2000); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); }); }); } - - } diff --git a/static/src/app/request/confirm-promotion/confirm-promotion.component.html b/static/src/app/request/confirm-promotion/confirm-promotion.component.html index d9db874..00bd97e 100644 --- a/static/src/app/request/confirm-promotion/confirm-promotion.component.html +++ b/static/src/app/request/confirm-promotion/confirm-promotion.component.html @@ -1,11 +1,6 @@

Offene Anträge - Beförderung

- - Erfolgreich gespeichert - -
@@ -55,6 +50,4 @@
- - diff --git a/static/src/app/request/confirm-promotion/confirm-promotion.component.ts b/static/src/app/request/confirm-promotion/confirm-promotion.component.ts index c3c5458..49ee600 100644 --- a/static/src/app/request/confirm-promotion/confirm-promotion.component.ts +++ b/static/src/app/request/confirm-promotion/confirm-promotion.component.ts @@ -3,6 +3,8 @@ import {Promotion, Rank} from '../../models/model-interfaces'; import {RankService} from '../../services/army-management/rank.service'; import {PromotionService} from '../../services/army-management/promotion.service'; import {LoginService} from '../../services/app-user-service/login-service'; +import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service'; +import {Message} from '../../i18n/de.messages'; @Component({ @@ -11,15 +13,14 @@ import {LoginService} from '../../services/app-user-service/login-service'; }) export class ConfirmPromotionComponent implements OnInit { - showSuccessLabel = false; - ranks: Rank[]; promotions: Promotion[]; constructor(private rankService: RankService, private promotionService: PromotionService, - private loginService: LoginService) { + private loginService: LoginService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -50,12 +51,8 @@ export class ConfirmPromotionComponent implements OnInit { if (promotions.length < 1) { this.promotionService.hasUnprocessedPromotion = false; } - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 2000); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); }); }); } - } diff --git a/static/src/app/request/promotion/req-promotion.component.html b/static/src/app/request/promotion/req-promotion.component.html index 33be9d0..070e6b5 100644 --- a/static/src/app/request/promotion/req-promotion.component.html +++ b/static/src/app/request/promotion/req-promotion.component.html @@ -57,12 +57,6 @@ Bestätigen - - Erfolgreich gespeichert - - -
diff --git a/static/src/app/request/promotion/req-promotion.component.ts b/static/src/app/request/promotion/req-promotion.component.ts index 963fcb0..90d091d 100644 --- a/static/src/app/request/promotion/req-promotion.component.ts +++ b/static/src/app/request/promotion/req-promotion.component.ts @@ -6,6 +6,8 @@ import {UserService} from '../../services/army-management/user.service'; import {RankService} from '../../services/army-management/rank.service'; import {PromotionService} from '../../services/army-management/promotion.service'; import {LoginService} from '../../services/app-user-service/login-service'; +import {Message} from '../../i18n/de.messages'; +import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service'; @Component({ @@ -18,8 +20,6 @@ export class RequestPromotionComponent implements OnInit { showForm = false; - showSuccessLabel = false; - user: User = {_id: '0'}; newLevel: number; @@ -37,7 +37,8 @@ export class RequestPromotionComponent implements OnInit { private userService: UserService, private rankService: RankService, private promotionService: PromotionService, - private loginService: LoginService) { + private loginService: LoginService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -79,10 +80,7 @@ export class RequestPromotionComponent implements OnInit { this.uncheckedPromotions = promotions; this.showForm = false; this.user = {_id: '0'}; - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 2000); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); }); }); } 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 index 134b371..fc8ccdc 100644 --- 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 @@ -31,7 +31,7 @@ export class SnackBarService { 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']); + showError(message: string, duration?: number) { + return this.show(message, 'OK', duration, ['custom-snack-bar', 'label-danger']); } } diff --git a/static/src/app/shared.module.ts b/static/src/app/shared.module.ts index 50819ec..8dfc133 100644 --- a/static/src/app/shared.module.ts +++ b/static/src/app/shared.module.ts @@ -2,11 +2,10 @@ import {NgModule} from '@angular/core'; 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'; @NgModule({ declarations: [ShowErrorComponent], - imports: [CommonModule, FormsModule, ReactiveFormsModule, MaterialComponentsModule], + imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [FormsModule, ReactiveFormsModule, ShowErrorComponent], }) export class SharedModule { diff --git a/static/src/app/squads/edit-squad/edit-squad.component.html b/static/src/app/squads/edit-squad/edit-squad.component.html index 964cb42..126bc53 100644 --- a/static/src/app/squads/edit-squad/edit-squad.component.html +++ b/static/src/app/squads/edit-squad/edit-squad.component.html @@ -56,11 +56,4 @@ [disabled]="!form.valid"> Bestätigen - - - Erfolgreich gespeichert - - diff --git a/static/src/app/squads/edit-squad/edit-squad.component.ts b/static/src/app/squads/edit-squad/edit-squad.component.ts index 8189c39..fb5a049 100644 --- a/static/src/app/squads/edit-squad/edit-squad.component.ts +++ b/static/src/app/squads/edit-squad/edit-squad.component.ts @@ -5,6 +5,8 @@ import {Squad} from '../../models/model-interfaces'; import {SquadService} from '../../services/army-management/squad.service'; import {Subscription} from 'rxjs/Subscription'; import {Fraction} from '../../utils/fraction.enum'; +import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service'; +import {Message} from '../../i18n/de.messages'; @Component({ @@ -23,8 +25,6 @@ export class EditSquadComponent implements OnInit, OnDestroy { showImageError = false; - showSuccessLabel = false; - imagePreviewSrc; @ViewChild(NgForm) form: NgForm; @@ -33,7 +33,8 @@ export class EditSquadComponent implements OnInit, OnDestroy { constructor(private route: ActivatedRoute, private router: Router, - private squadService: SquadService) { + private squadService: SquadService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -85,10 +86,7 @@ export class EditSquadComponent implements OnInit, OnDestroy { this.imagePreviewSrc = 'resource/squad/' + this.squad._id + '.png?' + Date.now(); }, 300); fileInput.value = ''; - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 2000); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); }); } } diff --git a/static/src/app/statistic/war/war-submit/war-submit.component.ts b/static/src/app/statistic/war/war-submit/war-submit.component.ts index 1cedb87..798e445 100644 --- a/static/src/app/statistic/war/war-submit/war-submit.component.ts +++ b/static/src/app/statistic/war/war-submit/war-submit.component.ts @@ -4,6 +4,7 @@ import {NgForm} from '@angular/forms'; import {WarService} from '../../../services/logs/war.service'; import {War} from '../../../models/model-interfaces'; import {CampaignService} from '../../../services/logs/campaign.service'; +import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-bar.service'; @Component({ @@ -22,8 +23,6 @@ export class WarSubmitComponent { showFileError = false; - showErrorLabel = false; - loading = false; error; @@ -33,6 +32,7 @@ export class WarSubmitComponent { constructor(private route: ActivatedRoute, private router: Router, private warService: WarService, + private snackBarService: SnackBarService, public campaignService: CampaignService) { } @@ -48,22 +48,21 @@ export class WarSubmitComponent { } saveWar() { - if (this.fileList) { - const file: File = this.fileList[0]; - this.loading = true; - - this.warService.submitWar(this.war, file) - .subscribe(war => { - this.router.navigate(['../war/' + war._id], {relativeTo: this.route}); - }, - error => { - this.error = error._body.error.message; - this.showErrorLabel = true; - this.loading = false; - }); - } else { + if (!this.fileList) { return window.alert(`Logfile ist ein Pflichtfeld`); } + const file: File = this.fileList[0]; + this.loading = true; + + this.warService.submitWar(this.war, file) + .subscribe(war => { + this.router.navigate(['../war/' + war._id], {relativeTo: this.route}); + }, + error => { + this.loading = false; + const errorMsg = JSON.parse(error._body).error.message; + this.snackBarService.showError('Error: '.concat(errorMsg), 10000); + }); } cancel() { diff --git a/static/src/app/style/load-indicator.css b/static/src/app/style/load-indicator.css index 4fed87a..cd77d9d 100644 --- a/static/src/app/style/load-indicator.css +++ b/static/src/app/style/load-indicator.css @@ -1,9 +1,38 @@ .load-indicator { position: absolute; top: 50%; - left: 48.5%; z-index: 1; } +@media only screen and (max-width: 1199px) { + .load-indicator { + left: 46%; + } +} +@media only screen and (min-width: 1200px) { + .load-indicator { + left: 46%; + } +} +@media only screen and (min-width: 1376px) { + .load-indicator { + left: 46.5%; + } +} +@media only screen and (min-width: 1600px) { + .load-indicator { + left: 47.5%; + } +} +@media only screen and (min-width: 1925px) { + .load-indicator { + left: 48%; + } +} + +:host /deep/ .mat-progress-spinner circle, .mat-spinner circle { + stroke: #000000 !important; + stroke-linecap: round; +} .load-arrow { background: url(../../assets/loading.png) no-repeat; diff --git a/static/src/app/users/award-user/award-user.component.html b/static/src/app/users/award-user/award-user.component.html index 12633ab..9e26c00 100644 --- a/static/src/app/users/award-user/award-user.component.html +++ b/static/src/app/users/award-user/award-user.component.html @@ -58,12 +58,6 @@ Bestätigen - - Erfolgreich gespeichert - -
diff --git a/static/src/app/users/award-user/award-user.component.ts b/static/src/app/users/award-user/award-user.component.ts index 2429a42..0ef4e8d 100644 --- a/static/src/app/users/award-user/award-user.component.ts +++ b/static/src/app/users/award-user/award-user.component.ts @@ -5,6 +5,8 @@ import {NgForm} from '@angular/forms'; import {AwardingService} from '../../services/army-management/awarding.service'; import {DecorationService} from '../../services/army-management/decoration.service'; import {Fraction} from '../../utils/fraction.enum'; +import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service'; +import {Message} from '../../i18n/de.messages'; @Component({ @@ -15,8 +17,6 @@ export class AwardUserComponent implements OnInit { @ViewChild(NgForm) form: NgForm; - showSuccessLabel = false; - userId: string; decorations: Decoration[]; @@ -30,7 +30,8 @@ export class AwardUserComponent implements OnInit { constructor(private router: Router, private route: ActivatedRoute, private awardingService: AwardingService, - private decorationService: DecorationService) { + private decorationService: DecorationService, + private snackBarService: SnackBarService) { } ngOnInit() { @@ -83,10 +84,7 @@ export class AwardUserComponent implements OnInit { this.decoPreviewDisplay = 'none'; decorationField.value = undefined; reasonField.value = previewImage.src = descriptionField.innerHTML = ''; - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 2000); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); }); }); } @@ -104,11 +102,7 @@ export class AwardUserComponent implements OnInit { }); }); }); - - this.showSuccessLabel = true; - setTimeout(() => { - this.showSuccessLabel = false; - }, 4000); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); } } diff --git a/static/src/app/users/edit-user/edit-user.component.html b/static/src/app/users/edit-user/edit-user.component.html index 0186196..a14d701 100644 --- a/static/src/app/users/edit-user/edit-user.component.html +++ b/static/src/app/users/edit-user/edit-user.component.html @@ -56,10 +56,4 @@ [disabled]="!form.valid"> Bestätigen - - - {{error}} - - 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 875c4c6..f49ca7d 100644 --- a/static/src/app/users/edit-user/edit-user.component.ts +++ b/static/src/app/users/edit-user/edit-user.component.ts @@ -8,6 +8,7 @@ import {Subscription} from 'rxjs/Subscription'; import {NgForm} from '@angular/forms'; import {Fraction} from '../../utils/fraction.enum'; import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service'; +import {Message} from '../../i18n/de.messages'; @Component({ @@ -26,12 +27,8 @@ export class EditUserComponent implements OnInit { ranks: Rank[] = []; - showSuccessLabel = false; - ranksDisplay = 'none'; - showErrorLabel = false; - error: string; readonly fraction = Fraction; @@ -103,7 +100,7 @@ export class EditUserComponent implements OnInit { user.squad = '0'; } this.user = user; - this.snackBarService.showSuccess('Erfolgreich gespeichert'); + this.snackBarService.showSuccess(Message.SUCCESS_SAVE); }); } else { this.userService.submitUser(updateObject) @@ -114,7 +111,7 @@ export class EditUserComponent implements OnInit { error => { // duplicated user error message if (error._body.includes('duplicate')) { - this.snackBarService.showError('Benutzername existiert bereits'); + this.snackBarService.showError(Message.DUPLICATED_NAME_ERR, 10000); } }); } diff --git a/static/src/app/global.helpers.ts b/static/src/app/utils/global.helpers.ts similarity index 100% rename from static/src/app/global.helpers.ts rename to static/src/app/utils/global.helpers.ts