diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index 7ebb66e..dbfbca3 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -1,10 +1,14 @@
- + + - + + diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts index b96b106..b82c68a 100644 --- a/static/src/app/app.component.ts +++ b/static/src/app/app.component.ts @@ -6,6 +6,8 @@ import {MatIconRegistry} from '@angular/material'; import {SpinnerService} from './services/user-interface/spinner/spinner.service'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; import {Observable} from 'rxjs'; +import {LoginService} from './services/app-user-service/login-service'; +import {BaseConfig, RouteConfig} from './app.config'; @Component({ @@ -64,6 +66,7 @@ export class AppComponent implements OnInit { }; constructor(private router: Router, + private loginService: LoginService, private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer, private spinnerService: SpinnerService, @@ -108,6 +111,14 @@ export class AppComponent implements OnInit { }); } + logout() { + this.loginService.logout(); + setTimeout(() => { + this.router.navigate([RouteConfig.overviewPath]); + }, 500); + } + + scrollToTop() { this.document.body.scrollTop = 0; // For Safari this.document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera diff --git a/static/src/app/app.config.ts b/static/src/app/app.config.ts index 548c0dd..9499120 100644 --- a/static/src/app/app.config.ts +++ b/static/src/app/app.config.ts @@ -1,7 +1,5 @@ export class AppConfig { - public readonly apiUrl = '/api'; - public readonly apiAppUserPath = this.apiUrl + '/account/'; public readonly apiAuthenticationPath = this.apiUrl + '/authenticate'; public readonly apiAwardPath = this.apiUrl + '/awardings'; @@ -44,6 +42,14 @@ export const RouteConfig = { decorationOverviewPath: 'public/decorations', }; -export const ResponsiveConfig = { - breakpointPx: 959, +export const BaseConfig = { + responsive: { + breakpointPx: 959, + }, + i18n: { + availableLanguages: [ + 'de', + 'en' + ] + } }; diff --git a/static/src/app/common/navigation/navigation-header.component.html b/static/src/app/common/navigation/navigation-header.component.html index 34f3515..6097970 100644 --- a/static/src/app/common/navigation/navigation-header.component.html +++ b/static/src/app/common/navigation/navigation-header.component.html @@ -1,5 +1,5 @@ -
+
@@ -11,7 +11,7 @@ v{{version}}
-
    +
    • {{'navigation.top.board' | translate}}
      • @@ -107,7 +107,7 @@
    • - {{'navigation.top.logout' | translate}} + {{'navigation.top.logout' | translate}}
    • {{'navigation.top.login' | translate}} @@ -120,13 +120,13 @@ - -
      • diff --git a/static/src/app/common/navigation/navigation-header.component.scss b/static/src/app/common/navigation/navigation-header.component.scss index a79feaa..8876c60 100644 --- a/static/src/app/common/navigation/navigation-header.component.scss +++ b/static/src/app/common/navigation/navigation-header.component.scss @@ -1,6 +1,8 @@ li { height: 50px; line-height: 46px; + padding: 0 10px; + cursor: pointer; } li a { @@ -14,12 +16,18 @@ li mat-list-item { cursor: pointer; } -li:hover, li.active { +li:hover { a { color: white; } } +li.active { + @extend li:hover; + + background: #000000; +} + .navigation-items { list-style-type: none; padding: 0; diff --git a/static/src/app/common/navigation/navigation-header.component.ts b/static/src/app/common/navigation/navigation-header.component.ts index 07e80d7..80055fd 100644 --- a/static/src/app/common/navigation/navigation-header.component.ts +++ b/static/src/app/common/navigation/navigation-header.component.ts @@ -1,8 +1,7 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core'; -import {RouteConfig} from '../../app.config'; +import {BaseConfig, RouteConfig} from '../../app.config'; import {environment} from '../../../environments/environment'; import {LoginService} from '../../services/app-user-service/login-service'; -import {Router} from '@angular/router'; import {PromotionService} from '../../services/army-management/promotion.service'; import {AwardingService} from '../../services/army-management/awarding.service'; import {SettingsService} from '../../services/settings.service'; @@ -17,20 +16,21 @@ declare function require(url: string); }) export class NavigationHeaderComponent implements OnInit { - @Output() public sidenavToggle = new EventEmitter(); + @Output() sidenavToggle = new EventEmitter(); + + @Output() userLogout = new EventEmitter(); readonly features = environment.features; + readonly availableLanguages = BaseConfig.i18n.availableLanguages; + config = RouteConfig; language; - languages = ['de', 'en']; - version = require('./../../../../../package.json').version; constructor(public loginService: LoginService, - private router: Router, private promotionService: PromotionService, private awardingService: AwardingService, private translate: TranslateService, @@ -49,21 +49,18 @@ export class NavigationHeaderComponent implements OnInit { } } - public onToggleSidenav = () => { + public onToggleSidenav() { this.sidenavToggle.emit(); }; + public doUserLogout() { + this.userLogout.emit() + }; + setLanguage(language: string) { if (language) { this.language = language; this.settingsService.setLanguage(language); } } - - logout() { - this.loginService.logout(); - setTimeout(() => { - this.router.navigate([RouteConfig.overviewPath]); - }, 500); - } } diff --git a/static/src/app/common/navigation/sidenav-list.component.html b/static/src/app/common/navigation/sidenav-list.component.html index 1126025..9f2cd1c 100644 --- a/static/src/app/common/navigation/sidenav-list.component.html +++ b/static/src/app/common/navigation/sidenav-list.component.html @@ -96,23 +96,23 @@ - - + (click)="doUserLogout(); onSidenavClose()"> {{'navigation.top.logout' | translate}} + routerLinkActive="active" routerLink='{{config.loginPath}}' (click)="onSidenavClose()"> {{'navigation.top.login' | translate}} diff --git a/static/src/app/common/navigation/sidenav-list.component.scss b/static/src/app/common/navigation/sidenav-list.component.scss index 29c4026..7e77703 100644 --- a/static/src/app/common/navigation/sidenav-list.component.scss +++ b/static/src/app/common/navigation/sidenav-list.component.scss @@ -3,6 +3,10 @@ mat-list-item.mat-list-item, a.mat-list-item { text-decoration: none; color: #9d9d9d; + &.active { + background: #000000; + } + &:hover, &.active { color: #ffffff; } diff --git a/static/src/app/common/navigation/sidenav-list.component.ts b/static/src/app/common/navigation/sidenav-list.component.ts index 577128c..88d8aac 100644 --- a/static/src/app/common/navigation/sidenav-list.component.ts +++ b/static/src/app/common/navigation/sidenav-list.component.ts @@ -1,12 +1,11 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core'; -import {RouteConfig} from '../../app.config'; +import {BaseConfig, RouteConfig} from '../../app.config'; import {LoginService} from '../../services/app-user-service/login-service'; import {PromotionService} from '../../services/army-management/promotion.service'; import {AwardingService} from '../../services/army-management/awarding.service'; import {environment} from '../../../environments/environment'; import {TranslateService} from '@ngx-translate/core'; import {SettingsService} from '../../services/settings.service'; -import {Router} from '@angular/router'; @Component({ selector: 'app-sidenav-list', @@ -17,18 +16,19 @@ export class SidenavListComponent implements OnInit { @Output() sidenavClose = new EventEmitter(); + @Output() userLogout = new EventEmitter(); + readonly features = environment.features; + readonly availableLanguages = BaseConfig.i18n.availableLanguages; + config = RouteConfig; language; - languages = ['de', 'en']; - constructor(public loginService: LoginService, - private router: Router, - private promotionService: PromotionService, - private awardingService: AwardingService, + public promotionService: PromotionService, + public awardingService: AwardingService, private translate: TranslateService, private settingsService: SettingsService) { } @@ -40,21 +40,18 @@ export class SidenavListComponent implements OnInit { }); } - public onSidenavClose = () => { + public onSidenavClose() { this.sidenavClose.emit(); }; + public doUserLogout() { + this.userLogout.emit() + }; + setLanguage(language: string) { if (language) { this.language = language; this.settingsService.setLanguage(language); } } - - logout() { - this.loginService.logout(); - setTimeout(() => { - this.router.navigate([RouteConfig.overviewPath]); - }, 500); - } } diff --git a/static/src/app/statistic/stats.component.ts b/static/src/app/statistic/stats.component.ts index 46404cb..a0d3625 100644 --- a/static/src/app/statistic/stats.component.ts +++ b/static/src/app/statistic/stats.component.ts @@ -6,7 +6,7 @@ import {TranslateService} from '@ngx-translate/core'; import {SettingsService} from '../services/settings.service'; import {WarService} from '../services/logs/war.service'; import {Observable} from 'rxjs'; -import {ResponsiveConfig} from '../app.config'; +import {BaseConfig} from '../app.config'; @Component({ selector: 'cc-stats', @@ -33,21 +33,21 @@ export class StatisticComponent implements OnInit { } ngOnInit() { - Observable.fromEvent(window, 'resize').subscribe(event => { - if (event.target['innerWidth'] <= ResponsiveConfig.breakpointPx) { - this.collapsed = true; - this.collapseBtnVisible = false; - } else { - this.collapseBtnVisible = true; - } - }); - this.campaignService.getAllCampaigns() .filter(campaigns => campaigns.length !== 0) .subscribe((campaigns) => { this.campaigns = campaigns; this.resolveCampaignFromUrl(); }); + + Observable.fromEvent(window, 'resize').subscribe(event => { + if (event.target['innerWidth'] <= BaseConfig.responsive.breakpointPx) { + this.collapsed = true; + this.collapseBtnVisible = false; + } else { + this.collapseBtnVisible = true; + } + }); } resolveCampaignFromUrl() {