Add clickable playername, playerservice + detail page routing

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',

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

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;

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

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

static/src/app/statistic/campaign-player-detail/campaign-player-detail.component.html

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

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

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;

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];
 

static/src/app/statistic/war-detail/war-detail.component.css

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

static/src/app/statistic/war-detail/war-detail.component.html

@@ -60,7 +60,8 @@
     [cssClasses]='customClasses'>
     <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">
-        <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}}
         </span>
       </ng-template>

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) => {