From 4f7c380bb2f63af5477d89fb05948da324f172c0 Mon Sep 17 00:00:00 2001 From: Florian Hartwich Date: Sun, 6 Aug 2017 10:42:37 +0200 Subject: [PATCH] Add standard list select -> right view for stats --- static/src/app/app.component.html | 21 +------ static/src/app/app.component.ts | 10 +--- static/src/app/app.config.ts | 1 - static/src/app/app.module.ts | 2 +- static/src/app/app.routing.ts | 12 ++-- .../src/app/{ => common}/not-found/index.ts | 0 .../not-found/not-found.component.css | 0 .../not-found/not-found.component.html | 0 .../not-found/not-found.component.ts | 0 .../show-error/show-error.component.ts | 0 .../stats-overview.component.css} | 4 +- .../stats-overview.component.html} | 0 .../stats-overview.component.ts} | 24 +++----- static/src/app/statistic/stats.component.css | 9 +++ static/src/app/statistic/stats.component.html | 1 + static/src/app/statistic/stats.component.ts | 11 ++++ static/src/app/statistic/stats.routing.ts | 37 ++++++++++++ .../war-detail}/war-detail.component.css | 0 .../war-detail}/war-detail.component.html | 7 +-- .../war-detail}/war-detail.component.ts | 21 ++----- .../statistic/war-list/war-item.component.css | 0 .../war-list/war-item.component.html | 17 ++++++ .../statistic/war-list/war-item.component.ts | 38 +++++++++++++ .../statistic/war-list/war-list.component.css | 8 +++ .../war-list/war-list.component.html | 24 ++++++++ .../statistic/war-list/war-list.component.ts | 57 +++++++++++++++++++ .../war-submit}/war-submit.component.css | 2 +- .../war-submit}/war-submit.component.html | 0 .../war-submit}/war-submit.component.ts | 4 +- static/src/app/wars/wars.routing.ts | 19 ------- 30 files changed, 232 insertions(+), 97 deletions(-) rename static/src/app/{ => common}/not-found/index.ts (100%) rename static/src/app/{ => common}/not-found/not-found.component.css (100%) rename static/src/app/{ => common}/not-found/not-found.component.html (100%) rename static/src/app/{ => common}/not-found/not-found.component.ts (100%) rename static/src/app/{ => common}/show-error/show-error.component.ts (100%) rename static/src/app/statistic/{statistic.component.css => overview/stats-overview.component.css} (60%) rename static/src/app/statistic/{statistic.component.html => overview/stats-overview.component.html} (100%) rename static/src/app/statistic/{statistic.component.ts => overview/stats-overview.component.ts} (73%) create mode 100644 static/src/app/statistic/stats.component.css create mode 100644 static/src/app/statistic/stats.component.html create mode 100644 static/src/app/statistic/stats.component.ts create mode 100644 static/src/app/statistic/stats.routing.ts rename static/src/app/{wars => statistic/war-detail}/war-detail.component.css (100%) rename static/src/app/{wars => statistic/war-detail}/war-detail.component.html (93%) rename static/src/app/{wars => statistic/war-detail}/war-detail.component.ts (65%) create mode 100644 static/src/app/statistic/war-list/war-item.component.css create mode 100644 static/src/app/statistic/war-list/war-item.component.html create mode 100644 static/src/app/statistic/war-list/war-item.component.ts create mode 100644 static/src/app/statistic/war-list/war-list.component.css create mode 100644 static/src/app/statistic/war-list/war-list.component.html create mode 100644 static/src/app/statistic/war-list/war-list.component.ts rename static/src/app/{wars => statistic/war-submit}/war-submit.component.css (87%) rename static/src/app/{wars => statistic/war-submit}/war-submit.component.html (100%) rename static/src/app/{wars => statistic/war-submit}/war-submit.component.ts (93%) delete mode 100644 static/src/app/wars/wars.routing.ts diff --git a/static/src/app/app.component.html b/static/src/app/app.component.html index 46e1d09..04b8a4f 100644 --- a/static/src/app/app.component.html +++ b/static/src/app/app.component.html @@ -21,25 +21,8 @@
  • Armeeübersicht
    • -
  • - - +
  • + Statistiken
  • Teilnehmer diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts index 7dcd522..c033920 100644 --- a/static/src/app/app.component.ts +++ b/static/src/app/app.component.ts @@ -1,9 +1,7 @@ import {Component, Inject, Optional} from '@angular/core'; -import {Route, Router} from '@angular/router'; +import {Router} from '@angular/router'; import {LoginService} from './services/login-service/login-service'; import {AUTH_ENABLED} from './app.tokens'; -import {WarService} from "./services/war-service/war.service"; -import {War} from "./models/model-interfaces"; import {PromotionService} from "./services/promotion-service/promotion.service"; import {AwardingService} from "./services/awarding-service/awarding.service"; import {RouteConfig} from "./app.config"; @@ -15,13 +13,10 @@ import {RouteConfig} from "./app.config"; }) export class AppComponent { - wars: War[] = []; - config = RouteConfig; constructor(@Optional() @Inject(AUTH_ENABLED) public authEnabled, private loginService: LoginService, - private warService: WarService, private promotionService: PromotionService, private awardingService: AwardingService, private router: Router) { @@ -29,9 +24,6 @@ export class AppComponent { ngOnInit() { - this.warService.getAllWars().subscribe((wars) => { - this.wars = wars; - }); if (this.loginService.hasPermission(2)) { const fraction = this.loginService.getCurrentUser().squad.fraction; this.promotionService.checkUnconfirmedPromotions(fraction); diff --git a/static/src/app/app.config.ts b/static/src/app/app.config.ts index 5310c57..d45a62f 100644 --- a/static/src/app/app.config.ts +++ b/static/src/app/app.config.ts @@ -28,7 +28,6 @@ export const RouteConfig = { statsPath: 'stats', userPath: 'users', overviewPath: 'overview', - warPath: 'war', requestAwardPath: 'request-award', requestPromotionPath: 'request-promotion', confirmAwardPath: 'confirm-award', diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index bf66e6c..b7f158b 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -5,7 +5,7 @@ import {HttpModule} from '@angular/http'; import {AppComponent} from './app.component'; import {LoginService} from "./services/login-service/login-service"; import {UserStore} from "./services/stores/user.store"; -import {ShowErrorComponent} from './show-error/show-error.component'; +import {ShowErrorComponent} from './common/show-error/show-error.component'; import {APPLICATION_VALIDATORS} from './models/app-validators'; import {appRouting, routingComponents, routingProviders} from './app.routing'; import {AUTH_ENABLED} from './app.tokens'; diff --git a/static/src/app/app.routing.ts b/static/src/app/app.routing.ts index e9b33ad..ed8e247 100644 --- a/static/src/app/app.routing.ts +++ b/static/src/app/app.routing.ts @@ -1,6 +1,6 @@ import {RouterModule, Routes} from "@angular/router"; import {LoginComponent} from "./login/index"; -import {NotFoundComponent} from "./not-found/not-found.component"; +import {NotFoundComponent} from "./common/not-found/not-found.component"; import {LoginGuardAdmin, LoginGuardHL, LoginGuardMT, LoginGuardSQL} from "./login/login.guard"; import {usersRoutes, usersRoutingComponents} from "./users/users.routing"; import {squadsRoutes, squadsRoutingComponents} from "./squads/squads.routing"; @@ -13,17 +13,15 @@ import {RequestAwardComponent} from "./request/award/req-award.component"; import {RequestPromotionComponent} from "./request/promotion/req-promotion.component"; import {ConfirmPromotionComponent} from "./request/confirm-promotion/confirm-promotion.component"; import {ConfirmAwardComponent} from "./request/confirm-award/confirm-award.component"; -import {warRoutes, warsRoutingComponents} from "./wars/wars.routing"; -import {StatisticComponent} from "./statistic/statistic.component"; import {RouteConfig} from "./app.config"; +import {statsRoutes, statsRoutingComponents} from "./statistic/stats.routing"; export const appRoutes: Routes = [ {path: RouteConfig.overviewPath, children: armyRoutes}, {path: '', redirectTo: RouteConfig.overviewPath, pathMatch: 'full'}, - {path: RouteConfig.warPath, children: warRoutes}, - {path: RouteConfig.statsPath, component: StatisticComponent}, + {path: RouteConfig.statsPath, children: statsRoutes}, {path: RouteConfig.loginPath, component: LoginComponent}, {path: RouteConfig.signUpPath, component: SignupComponent}, @@ -48,7 +46,7 @@ export const appRoutes: Routes = [ export const appRouting = RouterModule.forRoot(appRoutes); export const routingComponents = [LoginComponent, SignupComponent, RequestAwardComponent, RequestPromotionComponent, ConfirmAwardComponent, - ConfirmPromotionComponent, StatisticComponent, AdminComponent, ...armyRoutingComponents, NotFoundComponent, ...usersRoutingComponents, - ...squadsRoutingComponents, ...decorationsRoutingComponents, ...ranksRoutingComponents, ...warsRoutingComponents]; + ConfirmPromotionComponent, AdminComponent, ...armyRoutingComponents, NotFoundComponent, ...usersRoutingComponents, + ...squadsRoutingComponents, ...decorationsRoutingComponents, ...ranksRoutingComponents, ...statsRoutingComponents]; export const routingProviders = [LoginGuardSQL, LoginGuardHL, LoginGuardMT, LoginGuardAdmin]; diff --git a/static/src/app/not-found/index.ts b/static/src/app/common/not-found/index.ts similarity index 100% rename from static/src/app/not-found/index.ts rename to static/src/app/common/not-found/index.ts diff --git a/static/src/app/not-found/not-found.component.css b/static/src/app/common/not-found/not-found.component.css similarity index 100% rename from static/src/app/not-found/not-found.component.css rename to static/src/app/common/not-found/not-found.component.css diff --git a/static/src/app/not-found/not-found.component.html b/static/src/app/common/not-found/not-found.component.html similarity index 100% rename from static/src/app/not-found/not-found.component.html rename to static/src/app/common/not-found/not-found.component.html diff --git a/static/src/app/not-found/not-found.component.ts b/static/src/app/common/not-found/not-found.component.ts similarity index 100% rename from static/src/app/not-found/not-found.component.ts rename to static/src/app/common/not-found/not-found.component.ts diff --git a/static/src/app/show-error/show-error.component.ts b/static/src/app/common/show-error/show-error.component.ts similarity index 100% rename from static/src/app/show-error/show-error.component.ts rename to static/src/app/common/show-error/show-error.component.ts diff --git a/static/src/app/statistic/statistic.component.css b/static/src/app/statistic/overview/stats-overview.component.css similarity index 60% rename from static/src/app/statistic/statistic.component.css rename to static/src/app/statistic/overview/stats-overview.component.css index 4f5d11d..68d4fa9 100644 --- a/static/src/app/statistic/statistic.component.css +++ b/static/src/app/statistic/overview/stats-overview.component.css @@ -1,9 +1,9 @@ h3 { width: 920px; - margin-left: 25%; + margin-left: 5%; } .chart-container { width: 1200px; - margin-left: 25%; + margin-left: 5%; } diff --git a/static/src/app/statistic/statistic.component.html b/static/src/app/statistic/overview/stats-overview.component.html similarity index 100% rename from static/src/app/statistic/statistic.component.html rename to static/src/app/statistic/overview/stats-overview.component.html diff --git a/static/src/app/statistic/statistic.component.ts b/static/src/app/statistic/overview/stats-overview.component.ts similarity index 73% rename from static/src/app/statistic/statistic.component.ts rename to static/src/app/statistic/overview/stats-overview.component.ts index ae3d3a6..a762ee0 100644 --- a/static/src/app/statistic/statistic.component.ts +++ b/static/src/app/statistic/overview/stats-overview.component.ts @@ -1,14 +1,13 @@ import {Component} from "@angular/core"; -import {AppComponent} from "../app.component"; -import {WarService} from "../services/war-service/war.service"; +import {WarService} from "../../services/war-service/war.service"; @Component({ - selector: 'statistic', - templateUrl: './statistic.component.html', - styleUrls: ['./statistic.component.css'] + selector: 'stats-overview', + templateUrl: './stats-overview.component.html', + styleUrls: ['./stats-overview.component.css'] }) -export class StatisticComponent { +export class StatisticOverviewComponent { pointData: any[] = []; playerData: any[] = []; @@ -17,18 +16,13 @@ export class StatisticComponent { domain: ['#0000FF', '#B22222'] }; - constructor(private appComponent: AppComponent, - private warService: WarService) { + constructor(private warService: WarService) { } ngOnInit() { - let wars = this.appComponent.wars; - if (wars.length === 0) { - this.warService.getAllWars().subscribe(items => { - this.initChart(items); - }) - } - this.initChart(wars); + this.warService.getAllWars().subscribe(items => { + this.initChart(items); + }) } initChart(wars: any[]) { diff --git a/static/src/app/statistic/stats.component.css b/static/src/app/statistic/stats.component.css new file mode 100644 index 0000000..d9e6a0b --- /dev/null +++ b/static/src/app/statistic/stats.component.css @@ -0,0 +1,9 @@ +#left { + width: 320px; + float: left; + padding-right: 10px; +} + +#right { + overflow: hidden +} diff --git a/static/src/app/statistic/stats.component.html b/static/src/app/statistic/stats.component.html new file mode 100644 index 0000000..0680b43 --- /dev/null +++ b/static/src/app/statistic/stats.component.html @@ -0,0 +1 @@ + diff --git a/static/src/app/statistic/stats.component.ts b/static/src/app/statistic/stats.component.ts new file mode 100644 index 0000000..b571159 --- /dev/null +++ b/static/src/app/statistic/stats.component.ts @@ -0,0 +1,11 @@ +import {Component} from "@angular/core"; + +@Component({ + selector: 'stats', + templateUrl: './stats.component.html', + styleUrls: ['./stats.component.css'] +}) +export class StatisticComponent { + constructor() { + } +} diff --git a/static/src/app/statistic/stats.routing.ts b/static/src/app/statistic/stats.routing.ts new file mode 100644 index 0000000..53d09dc --- /dev/null +++ b/static/src/app/statistic/stats.routing.ts @@ -0,0 +1,37 @@ +import {Routes} from "@angular/router"; +import {StatisticComponent} from "./stats.component"; +import {WarDetailComponent} from "./war-detail/war-detail.component"; +import {WarSubmitComponent} from "./war-submit/war-submit.component"; +import {WarListComponent} from "./war-list/war-list.component"; +import {StatisticOverviewComponent} from "./overview/stats-overview.component"; +import {WarItemComponent} from "./war-list/war-item.component"; + + +export const statsRoutes: Routes = [{ + path: '', component: StatisticComponent, + children: [ + { + path: '', + component: WarListComponent + } + ] +}, + { + path: 'overview', + component: StatisticOverviewComponent, + outlet: 'right' + }, + { + path: 'new', + component: WarSubmitComponent, + outlet: 'right' + }, + { + path: 'war/:id', + component: WarDetailComponent, + outlet: 'right' + }]; + +export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, WarListComponent, + WarSubmitComponent, WarDetailComponent, WarItemComponent]; + diff --git a/static/src/app/wars/war-detail.component.css b/static/src/app/statistic/war-detail/war-detail.component.css similarity index 100% rename from static/src/app/wars/war-detail.component.css rename to static/src/app/statistic/war-detail/war-detail.component.css diff --git a/static/src/app/wars/war-detail.component.html b/static/src/app/statistic/war-detail/war-detail.component.html similarity index 93% rename from static/src/app/wars/war-detail.component.html rename to static/src/app/statistic/war-detail/war-detail.component.html index 83759d4..604789f 100644 --- a/static/src/app/wars/war-detail.component.html +++ b/static/src/app/statistic/war-detail/war-detail.component.html @@ -1,6 +1,6 @@
    -
    +

    {{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}

    Endpunktestand:

    @@ -26,9 +26,6 @@
    Logfile anzeigen -
    -
    +
    diff --git a/static/src/app/wars/war-detail.component.ts b/static/src/app/statistic/war-detail/war-detail.component.ts similarity index 65% rename from static/src/app/wars/war-detail.component.ts rename to static/src/app/statistic/war-detail/war-detail.component.ts index 6fd9b86..861b7a0 100644 --- a/static/src/app/wars/war-detail.component.ts +++ b/static/src/app/statistic/war-detail/war-detail.component.ts @@ -1,8 +1,8 @@ import {Component} from "@angular/core"; -import {Player, War} from "../models/model-interfaces"; -import {WarService} from "../services/war-service/war.service"; import {ActivatedRoute, Router} from "@angular/router"; -import {LoginService} from "../services/login-service/login-service"; +import {WarService} from "../../services/war-service/war.service"; +import {LoginService} from "../../services/login-service/login-service"; +import {Player, War} from "../../models/model-interfaces"; @Component({ @@ -24,10 +24,8 @@ export class WarDetailComponent { playerChart: any[] = []; - constructor(private router: Router, - private route: ActivatedRoute, - private warService: WarService, - private loginService: LoginService) { + constructor(private route: ActivatedRoute, + private warService: WarService) { Object.assign(this, this.playerChart) } @@ -62,13 +60,4 @@ export class WarDetailComponent { } } - delete() { - if (confirm('Soll die Schlacht "' + this.war.title + '" wirklich gelöscht werden?')) { - this.warService.deleteWar(this.war._id) - .subscribe((res) => { - this.router.navigate(['../..'], {relativeTo: this.route}); - }) - } - } - } diff --git a/static/src/app/statistic/war-list/war-item.component.css b/static/src/app/statistic/war-list/war-item.component.css new file mode 100644 index 0000000..e69de29 diff --git a/static/src/app/statistic/war-list/war-item.component.html b/static/src/app/statistic/war-list/war-item.component.html new file mode 100644 index 0000000..f62c441 --- /dev/null +++ b/static/src/app/statistic/war-list/war-item.component.html @@ -0,0 +1,17 @@ +
    + +
    +
    + + {{war.title}} + +
    + vom {{war.date | date: 'dd.MM.yyyy'}} +
    + +
    + +
    + +
    +
    diff --git a/static/src/app/statistic/war-list/war-item.component.ts b/static/src/app/statistic/war-list/war-item.component.ts new file mode 100644 index 0000000..a475a13 --- /dev/null +++ b/static/src/app/statistic/war-list/war-item.component.ts @@ -0,0 +1,38 @@ +import {ChangeDetectionStrategy, Component, EventEmitter} from "@angular/core"; +import {War} from "../../models/model-interfaces"; +import {LoginService} from "../../services/login-service/login-service"; + +@Component({ + selector: 'pjm-war-item', + templateUrl: './war-item.component.html', + styleUrls: ['./war-item.component.css', '../../style/list-entry.css'], + changeDetection: ChangeDetectionStrategy.OnPush, + inputs: ['war', 'selected'], + outputs: ['warSelected', 'warDelete'] +}) +export class WarItemComponent { + + selected: boolean; + + war: War; + + warSelected = new EventEmitter(); + + warDelete = new EventEmitter(); + + constructor(private loginService: LoginService) { + } + + ngOnInit() { + } + + select() { + this.warSelected.emit(this.war._id) + } + + delete() { + this.warDelete.emit(this.war); + } + +} + diff --git a/static/src/app/statistic/war-list/war-list.component.css b/static/src/app/statistic/war-list/war-list.component.css new file mode 100644 index 0000000..c072fcd --- /dev/null +++ b/static/src/app/statistic/war-list/war-list.component.css @@ -0,0 +1,8 @@ +.search-bar { + padding-top: 20px; + padding-bottom: 20px; +} + +.rank-list { + width: 100%; +} diff --git a/static/src/app/statistic/war-list/war-list.component.html b/static/src/app/statistic/war-list/war-list.component.html new file mode 100644 index 0000000..47bd42f --- /dev/null +++ b/static/src/app/statistic/war-list/war-list.component.html @@ -0,0 +1,24 @@ +
    +
    + + Schlacht hinzufügen + +
    + +
    +
    +
    + + Zusammenfassung + +
    +
    +
    + + + +
    diff --git a/static/src/app/statistic/war-list/war-list.component.ts b/static/src/app/statistic/war-list/war-list.component.ts new file mode 100644 index 0000000..a551d8f --- /dev/null +++ b/static/src/app/statistic/war-list/war-list.component.ts @@ -0,0 +1,57 @@ +import {Component, OnInit} from "@angular/core"; +import {ActivatedRoute, Router} from "@angular/router"; +import {War} from "../../models/model-interfaces"; +import {WarService} from "../../services/war-service/war.service"; +import {LoginService} from "../../services/login-service/login-service"; + +@Component({ + selector: 'war-list', + templateUrl: './war-list.component.html', + styleUrls: ['./war-list.component.css', '../../style/list-entry.css'] +}) +export class WarListComponent implements OnInit { + + selectedWarId: string | number = '0'; + + wars: War[] = []; + + constructor(private warService: WarService, + private loginService: LoginService, + private router: Router, + private route: ActivatedRoute) { + } + + ngOnInit() { + this.warService.getAllWars().subscribe((items) => { + this.wars = items; + this.router.navigate([{outlets: {'right': ['overview']}}], {relativeTo: this.route}); + }); + } + + selectNewWar() { + this.selectedWarId = null; + this.router.navigate([{outlets: {'right': ['new']}}], {relativeTo: this.route}); + } + + selectWar(warId: string | number) { + this.selectedWarId = warId; + this.router.navigate([{outlets: {'right': ['war', warId]}}], {relativeTo: this.route}); + } + + selectOverview() { + this.selectedWarId = '0'; + this.router.navigate([{outlets: {'right': ['overview']}}], {relativeTo: this.route}); + } + + deleteWar(war: War) { + if (confirm('Soll die Schlacht ' + war.title + ' wirklich gelöscht werden?')) { + this.warService.deleteWar(war._id) + .subscribe((res) => { + if (this.selectedWarId === war._id) { + this.selectOverview(); + } + this.wars.splice(this.wars.indexOf(war), 1); + }) + } + } +} diff --git a/static/src/app/wars/war-submit.component.css b/static/src/app/statistic/war-submit/war-submit.component.css similarity index 87% rename from static/src/app/wars/war-submit.component.css rename to static/src/app/statistic/war-submit/war-submit.component.css index be57875..dd7472c 100644 --- a/static/src/app/wars/war-submit.component.css +++ b/static/src/app/statistic/war-submit/war-submit.component.css @@ -8,7 +8,7 @@ } .load-arrow { - background: url(../../assets/loading.png) no-repeat; + background: url(../../../assets/loading.png) no-repeat; display: block; width: 120px; height: 120px; diff --git a/static/src/app/wars/war-submit.component.html b/static/src/app/statistic/war-submit/war-submit.component.html similarity index 100% rename from static/src/app/wars/war-submit.component.html rename to static/src/app/statistic/war-submit/war-submit.component.html diff --git a/static/src/app/wars/war-submit.component.ts b/static/src/app/statistic/war-submit/war-submit.component.ts similarity index 93% rename from static/src/app/wars/war-submit.component.ts rename to static/src/app/statistic/war-submit/war-submit.component.ts index 0270c4b..da33ba7 100644 --- a/static/src/app/wars/war-submit.component.ts +++ b/static/src/app/statistic/war-submit/war-submit.component.ts @@ -1,8 +1,8 @@ import {Component, ViewChild} from "@angular/core"; -import {Player, War} from "../models/model-interfaces"; -import {WarService} from "../services/war-service/war.service"; import {ActivatedRoute, Router} from "@angular/router"; import {NgForm} from "@angular/forms"; +import {WarService} from "../../services/war-service/war.service"; +import {War} from "../../models/model-interfaces"; @Component({ diff --git a/static/src/app/wars/wars.routing.ts b/static/src/app/wars/wars.routing.ts deleted file mode 100644 index 70085c8..0000000 --- a/static/src/app/wars/wars.routing.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {Routes} from "@angular/router"; -import {WarSubmitComponent} from "./war-submit.component"; -import {WarDetailComponent} from "./war-detail.component"; -import {LoginGuardMT} from "../login/login.guard"; - - -export const warRoutes: Routes = [ - { - path: '', - component: WarSubmitComponent, - canActivate: [LoginGuardMT] - }, - { - path: ':id', - component: WarDetailComponent, - }]; - -export const warsRoutingComponents = [WarSubmitComponent, WarDetailComponent]; -