Add clickable playername, playerservice + detail page routing

pull/10/head
Florian Hartwich 2017-10-01 20:24:35 +02:00
parent 8138926e1c
commit 0621d1d2bf
12 changed files with 98 additions and 10 deletions

View File

@ -11,6 +11,7 @@ export class AppConfig {
public readonly apiSquadPath = this.apiUrl + '/squads/'; public readonly apiSquadPath = this.apiUrl + '/squads/';
public readonly apiUserPath = this.apiUrl + '/users/'; public readonly apiUserPath = this.apiUrl + '/users/';
public readonly apiOverviewPath = this.apiUrl + '/overview'; public readonly apiOverviewPath = this.apiUrl + '/overview';
public readonly apiPlayersPath = this.apiUrl + '/players';
public readonly apiRequestAwardPath = this.apiUrl + '/request/award'; public readonly apiRequestAwardPath = this.apiUrl + '/request/award';
public readonly apiPromotionPath = this.apiUrl + '/request/promotion'; public readonly apiPromotionPath = this.apiUrl + '/request/promotion';
public readonly apiWarPath = this.apiUrl + '/wars'; public readonly apiWarPath = this.apiUrl + '/wars';
@ -28,7 +29,6 @@ export const RouteConfig = {
statsPath: 'stats', statsPath: 'stats',
userPath: 'users', userPath: 'users',
overviewPath: 'overview', overviewPath: 'overview',
playersPath: 'players',
request: 'request', request: 'request',
requestAwardPath: 'award', requestAwardPath: 'award',
requestPromotionPath: 'promotion', requestPromotionPath: 'promotion',

View File

@ -62,10 +62,10 @@ export const appRoutes: Routes = [
path: '404', path: '404',
component: NotFoundComponent component: NotFoundComponent
}, },
{ // {
path: '**', // path: '**',
redirectTo: '/404' // redirectTo: '/404'
} // always configure this last - first matching route gets processed // } // always configure this last - first matching route gets processed
]; ];
export const appRouting = RouterModule.forRoot(appRoutes); export const appRouting = RouterModule.forRoot(appRoutes);

View File

@ -29,6 +29,12 @@ export interface Player {
flagTouch?: number; flagTouch?: number;
} }
export interface CampaignPlayer {
name?: string;
campaign?: Campaign;
players?: Player[];
}
export interface Campaign { export interface Campaign {
_id?: string; _id?: string;
title?: string; title?: string;

View File

@ -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())
}
}

View File

@ -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;
}

View File

@ -0,0 +1,5 @@
<div class="overview" xmlns="http://www.w3.org/1999/html">
<h2>{{campaignPlayer.name}}</h2>
</div>

View File

@ -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;
});
}
}

View File

@ -7,12 +7,13 @@ import {LineChartModule, PieChartModule} from "@swimlane/ngx-charts";
import {AccordionModule, CarouselModule} from "ngx-bootstrap"; import {AccordionModule, CarouselModule} from "ngx-bootstrap";
import {CampaignService} from "../services/campaign-service/campaign.service"; import {CampaignService} from "../services/campaign-service/campaign.service";
import {NgxDatatableModule} from "@swimlane/ngx-datatable"; import {NgxDatatableModule} from "@swimlane/ngx-datatable";
import {PlayerService} from "../services/player-service/player.service";
@NgModule({ @NgModule({
declarations: statsRoutingComponents, declarations: statsRoutingComponents,
imports: [CommonModule, SharedModule, statsRouterModule, LineChartModule, PieChartModule, imports: [CommonModule, SharedModule, statsRouterModule, LineChartModule, PieChartModule,
AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule], AccordionModule.forRoot(), CarouselModule.forRoot(), NgxDatatableModule],
providers: [WarService, CampaignService] providers: [WarService, CampaignService, PlayerService]
}) })
export class StatsModule { export class StatsModule {
static routes = statsRouterModule; static routes = statsRouterModule;

View File

@ -7,6 +7,7 @@ import {StatisticOverviewComponent} from "./overview/stats-overview.component";
import {WarItemComponent} from "./war-list/war-item.component"; import {WarItemComponent} from "./war-list/war-item.component";
import {ModuleWithProviders} from "@angular/core"; import {ModuleWithProviders} from "@angular/core";
import {CampaignSubmitComponent} from "./campaign-submit/campaign-submit.component"; import {CampaignSubmitComponent} from "./campaign-submit/campaign-submit.component";
import {CampaignPlayerDetailComponent} from "./campaign-player-detail/campaign-player-detail.component";
export const statsRoutes: Routes = [{ export const statsRoutes: Routes = [{
@ -37,10 +38,15 @@ export const statsRoutes: Routes = [{
path: 'war/:id', path: 'war/:id',
component: WarDetailComponent, component: WarDetailComponent,
outlet: 'right' outlet: 'right'
}]; },
{
path: 'campaign-player/:id/:playerName',
component: CampaignPlayerDetailComponent,
outlet: 'right'
},];
export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes); export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes);
export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent, export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent,
WarListComponent, WarSubmitComponent, WarDetailComponent, WarItemComponent]; WarListComponent, WarSubmitComponent, WarDetailComponent, CampaignPlayerDetailComponent, WarItemComponent];

View File

@ -13,6 +13,7 @@
.player-name { .player-name {
font-weight: bold; font-weight: bold;
cursor: pointer;
} }
.text-opfor { .text-opfor {

View File

@ -60,7 +60,8 @@
[cssClasses]='customClasses'> [cssClasses]='customClasses'>
<ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px"> <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
<ng-template ngx-datatable-cell-template let-row="row" let-value="value"> <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
<span class="player-name" [ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'"> <span class="player-name" (click)="selectPlayerDetail(value)"
[ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
{{value}} {{value}}
</span> </span>
</ng-template> </ng-template>

View File

@ -1,5 +1,5 @@
import {Component} from "@angular/core"; 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 {WarService} from "../../services/war-service/war.service";
import {War} from "../../models/model-interfaces"; import {War} from "../../models/model-interfaces";
@ -29,6 +29,7 @@ export class WarDetailComponent {
}; };
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,
private router: Router,
private warService: WarService) { private warService: WarService) {
Object.assign(this, this.playerChart) 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) { filterPlayersByFraction(fraction: string) {
if (fraction) { if (fraction) {
this.rows = this.war.players.filter((player) => { this.rows = this.war.players.filter((player) => {