From 0621d1d2bf502e67261df41e144e3c3ae5dc5ee7 Mon Sep 17 00:00:00 2001 From: Florian Hartwich Date: Sun, 1 Oct 2017 20:24:35 +0200 Subject: [PATCH] Add clickable playername, playerservice + detail page routing --- static/src/app/app.config.ts | 2 +- static/src/app/app.routing.ts | 8 ++--- static/src/app/models/model-interfaces.ts | 6 ++++ .../services/player-service/player.service.ts | 18 +++++++++++ .../campaign-player-detail.component.css | 12 +++++++ .../campaign-player-detail.component.html | 5 +++ .../campaign-player-detail.component.ts | 32 +++++++++++++++++++ static/src/app/statistic/stats.module.ts | 3 +- static/src/app/statistic/stats.routing.ts | 10 ++++-- .../war-detail/war-detail.component.css | 1 + .../war-detail/war-detail.component.html | 3 +- .../war-detail/war-detail.component.ts | 8 ++++- 12 files changed, 98 insertions(+), 10 deletions(-) create mode 100644 static/src/app/services/player-service/player.service.ts create mode 100644 static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css create mode 100644 static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html create mode 100644 static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts diff --git a/static/src/app/app.config.ts b/static/src/app/app.config.ts index 868fc3a..ad97dbe 100644 --- a/static/src/app/app.config.ts +++ b/static/src/app/app.config.ts @@ -11,6 +11,7 @@ export class AppConfig { public readonly apiSquadPath = this.apiUrl + '/squads/'; public readonly apiUserPath = this.apiUrl + '/users/'; public readonly apiOverviewPath = this.apiUrl + '/overview'; + public readonly apiPlayersPath = this.apiUrl + '/players'; public readonly apiRequestAwardPath = this.apiUrl + '/request/award'; public readonly apiPromotionPath = this.apiUrl + '/request/promotion'; public readonly apiWarPath = this.apiUrl + '/wars'; @@ -28,7 +29,6 @@ export const RouteConfig = { statsPath: 'stats', userPath: 'users', overviewPath: 'overview', - playersPath: 'players', request: 'request', requestAwardPath: 'award', requestPromotionPath: 'promotion', diff --git a/static/src/app/app.routing.ts b/static/src/app/app.routing.ts index 47e9acd..767f6cd 100644 --- a/static/src/app/app.routing.ts +++ b/static/src/app/app.routing.ts @@ -62,10 +62,10 @@ export const appRoutes: Routes = [ path: '404', component: NotFoundComponent }, - { - path: '**', - redirectTo: '/404' - } // always configure this last - first matching route gets processed + // { + // path: '**', + // redirectTo: '/404' + // } // always configure this last - first matching route gets processed ]; export const appRouting = RouterModule.forRoot(appRoutes); diff --git a/static/src/app/models/model-interfaces.ts b/static/src/app/models/model-interfaces.ts index a4ccc0a..d5b536f 100644 --- a/static/src/app/models/model-interfaces.ts +++ b/static/src/app/models/model-interfaces.ts @@ -29,6 +29,12 @@ export interface Player { flagTouch?: number; } +export interface CampaignPlayer { + name?: string; + campaign?: Campaign; + players?: Player[]; +} + export interface Campaign { _id?: string; title?: string; diff --git a/static/src/app/services/player-service/player.service.ts b/static/src/app/services/player-service/player.service.ts new file mode 100644 index 0000000..ae231cc --- /dev/null +++ b/static/src/app/services/player-service/player.service.ts @@ -0,0 +1,18 @@ +import {Injectable} from "@angular/core"; +import {AppConfig} from "../../app.config"; +import {HttpClient} from "../http-client"; + +@Injectable() +export class PlayerService { + + constructor(private http: HttpClient, + private config: AppConfig) { + } + + getCampaignPlayer(campaignId: string, playerName: string) { + return this.http.get(this.config.apiPlayersPath + '/' + campaignId + '/' + playerName) + .map(res => res.json()) + } + +} + diff --git a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css new file mode 100644 index 0000000..039c8c0 --- /dev/null +++ b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.css @@ -0,0 +1,12 @@ +.overview { + position: fixed; + overflow-y: scroll; + overflow-x: hidden; + border-left: thin solid lightgrey; + bottom: 20px; + width: 100%; + padding-left: 50px; + padding-top: 70px; + margin-left: 10px; + height: 100vh; +} diff --git a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html new file mode 100644 index 0000000..803341a --- /dev/null +++ b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html @@ -0,0 +1,5 @@ +
+ +

{{campaignPlayer.name}}

+ +
diff --git a/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts new file mode 100644 index 0000000..95fdf41 --- /dev/null +++ b/static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.ts @@ -0,0 +1,32 @@ +import {Component} from "@angular/core"; +import {ActivatedRoute} from "@angular/router"; +import {CampaignPlayer} from "../../models/model-interfaces"; +import {PlayerService} from "../../services/player-service/player.service"; + + +@Component({ + selector: 'campaign-player-detail', + templateUrl: './campaign-player-detail.component.html', + styleUrls: ['./campaign-player-detail.component.css'] +}) +export class CampaignPlayerDetailComponent { + + campaignPlayer: CampaignPlayer = {}; + + fractionRadioSelect: string; + + + constructor(private route: ActivatedRoute, + private playerService: PlayerService) { + } + + ngOnInit() { + this.route.params + .map(params => [params['id'], params['playerName']]) + .flatMap(id => this.playerService.getCampaignPlayer(id[0], id[1])) + .subscribe(campaignPlayer => { + this.campaignPlayer = campaignPlayer; + }); + } + +} diff --git a/static/src/app/statistic/stats.module.ts b/static/src/app/statistic/stats.module.ts index 15b9e9d..ed3e8ab 100644 --- a/static/src/app/statistic/stats.module.ts +++ b/static/src/app/statistic/stats.module.ts @@ -7,12 +7,13 @@ import {LineChartModule, PieChartModule} from "@swimlane/ngx-charts"; import {AccordionModule, CarouselModule} from "ngx-bootstrap"; import {CampaignService} from "../services/campaign-service/campaign.service"; import {NgxDatatableModule} from "@swimlane/ngx-datatable"; +import {PlayerService} from "../services/player-service/player.service"; @NgModule({ declarations: statsRoutingComponents, imports: [CommonModule, SharedModule, statsRouterModule, LineChartModule, PieChartModule, AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule], - providers: [WarService, CampaignService] + providers: [WarService, CampaignService, PlayerService] }) export class StatsModule { static routes = statsRouterModule; diff --git a/static/src/app/statistic/stats.routing.ts b/static/src/app/statistic/stats.routing.ts index acff442..dbc6951 100644 --- a/static/src/app/statistic/stats.routing.ts +++ b/static/src/app/statistic/stats.routing.ts @@ -7,6 +7,7 @@ import {StatisticOverviewComponent} from "./overview/stats-overview.component"; import {WarItemComponent} from "./war-list/war-item.component"; import {ModuleWithProviders} from "@angular/core"; import {CampaignSubmitComponent} from "./campaign-submit/campaign-submit.component"; +import {CampaignPlayerDetailComponent} from "./campaign-player-detail/campaign-player-detail.component"; export const statsRoutes: Routes = [{ @@ -37,10 +38,15 @@ export const statsRoutes: Routes = [{ path: 'war/:id', component: WarDetailComponent, outlet: 'right' - }]; + }, + { + path: 'campaign-player/:id/:playerName', + component: CampaignPlayerDetailComponent, + outlet: 'right' + },]; export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes); export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent, - WarListComponent, WarSubmitComponent, WarDetailComponent, WarItemComponent]; + WarListComponent, WarSubmitComponent, WarDetailComponent, CampaignPlayerDetailComponent, WarItemComponent]; diff --git a/static/src/app/statistic/war-detail/war-detail.component.css b/static/src/app/statistic/war-detail/war-detail.component.css index ac08fbe..06ae73a 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.css +++ b/static/src/app/statistic/war-detail/war-detail.component.css @@ -13,6 +13,7 @@ .player-name { font-weight: bold; + cursor: pointer; } .text-opfor { diff --git a/static/src/app/statistic/war-detail/war-detail.component.html b/static/src/app/statistic/war-detail/war-detail.component.html index 6ff3d83..1e9367d 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.html +++ b/static/src/app/statistic/war-detail/war-detail.component.html @@ -60,7 +60,8 @@ [cssClasses]='customClasses'> - + {{value}} diff --git a/static/src/app/statistic/war-detail/war-detail.component.ts b/static/src/app/statistic/war-detail/war-detail.component.ts index 4d84ef6..5fa8448 100644 --- a/static/src/app/statistic/war-detail/war-detail.component.ts +++ b/static/src/app/statistic/war-detail/war-detail.component.ts @@ -1,5 +1,5 @@ import {Component} from "@angular/core"; -import {ActivatedRoute} from "@angular/router"; +import {ActivatedRoute, Router} from "@angular/router"; import {WarService} from "../../services/war-service/war.service"; import {War} from "../../models/model-interfaces"; @@ -29,6 +29,7 @@ export class WarDetailComponent { }; constructor(private route: ActivatedRoute, + private router: Router, private warService: WarService) { Object.assign(this, this.playerChart) } @@ -54,6 +55,11 @@ export class WarDetailComponent { }); } + selectPlayerDetail(playerName) { + this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + playerName], + {relativeTo: this.route}); + } + filterPlayersByFraction(fraction: string) { if (fraction) { this.rows = this.war.players.filter((player) => {