Add campaign player detail as tab

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

@@ -1,3 +1,8 @@
+.player-campaign-detail-container {
+  padding: 0 1% 0 1%;
+  border-top: thin solid lightgrey;
+}
+
 h2 {
   padding: 10px;
 }

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

@@ -1,10 +1,9 @@
-<div class="overview fade-in" style="padding: 70px 1% 0 1%;" xmlns="http://www.w3.org/1999/html">
+<div class="fade-in player-campaign-detail-container" xmlns="http://www.w3.org/1999/html">
   <h2 class="pull-left">Kampagnendetails - {{campaignPlayer.name}}</h2>
   <h2 class="pull-right">{{campaignPlayer.campaign.title}} Kampagne</h2>
 
   <span class="btn btn-default btn-back" (click)="navigateBack()">< Zurück</span>
 
-
   <div class="sum-container">
     <div class="gauge-container pull-left">
       <ngx-charts-linear-gauge

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

@@ -1,19 +1,25 @@
-import {Component} from "@angular/core";
-import {ActivatedRoute} from "@angular/router";
+import {Component, EventEmitter} from "@angular/core";
 import {CampaignPlayer} from "../../models/model-interfaces";
 import {PlayerService} from "../../services/logs/player.service";
 import {ChartUtils} from "../../utils/chart-utils";
-import {Location} from '@angular/common';
 
 
 @Component({
   selector: 'campaign-player-detail',
   templateUrl: './campaign-player-detail.component.html',
+  inputs: ['campaignId', 'playerName'],
+  outputs: ['switchTab'],
   styleUrls: ['./campaign-player-detail.component.css', '../../style/list-entry.css',
     '../../style/hide-scrollbar.css', '../../style/overview.css']
 })
 export class CampaignPlayerDetailComponent {
 
+  campaignId: string;
+
+  playerName: string;
+
+  switchTab = new EventEmitter();
+
   campaignPlayer: CampaignPlayer = {campaign: {}, players: []};
 
   sumData: any[] = [];
@@ -73,15 +79,11 @@ export class CampaignPlayerDetailComponent {
   maxRespawnDeathRatio = 1;
 
 
-  constructor(private route: ActivatedRoute,
-              private location: Location,
-              private playerService: PlayerService) {
+  constructor(private playerService: PlayerService) {
   }
 
   ngOnInit() {
-    this.route.params
-      .map(params => [params['id'], params['playerName']])
-      .flatMap(id => this.playerService.getCampaignPlayer(id[0], encodeURIComponent(id[1])))
+    this.playerService.getCampaignPlayer(this.campaignId, encodeURIComponent(this.playerName))
       .subscribe(campaignPlayer => {
         this.campaignPlayer = campaignPlayer;
         this.killData = this.assignData(this.yAxisKill, "kill");
@@ -91,14 +93,10 @@ export class CampaignPlayerDetailComponent {
         this.reviveData = this.assignData(this.yAxisRevive, "revive");
         this.captureData = this.assignData(this.yAxisCapture, "flagTouch");
 
-        if (this.totalDeath === 0) {
-          // avoid infinite or NaN with no death
-          this.totalDeath = 1;
-        }
-        this.kdRatio = parseFloat((this.totalKills / this.totalDeath).toFixed(2));
+        this.kdRatio = parseFloat((this.totalKills / (this.totalDeath === 0 ? 1 : this.totalDeath)).toFixed(2));
         if (this.kdRatio > 1) this.maxKd = this.kdRatio * 1.7;
 
-        this.respawnDeathRatio = parseFloat((this.totalRespawn / this.totalDeath).toFixed(2));
+        this.respawnDeathRatio = parseFloat((this.totalRespawn / (this.totalDeath === 0 ? 1 : this.totalDeath)).toFixed(2));
 
         this.sumData = [
           {
@@ -177,7 +175,7 @@ export class CampaignPlayerDetailComponent {
   }
 
   navigateBack() {
-    this.location.back();
+    this.switchTab.emit(0);
   }
 
 }

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

@@ -1,4 +1,4 @@
-<div #overview class="fade-in" xmlns="http://www.w3.org/1999/html">
+<div class="fade-in" xmlns="http://www.w3.org/1999/html">
   <ngx-datatable
     style="width:1020px; margin:auto"
     [rows]="rows"
@@ -35,7 +35,7 @@
     </ngx-datatable-column>
     <ngx-datatable-column [width]="80" name="" prop="name">
       <ng-template ngx-datatable-cell-template let-value="value">
-        <span class="btn btn-sm btn-default in-table-btn" (click)="selectPlayerDetail(value)">Gesamt</span>
+        <span class="btn btn-sm btn-default in-table-btn" (click)="selectPlayerDetail(1, value)">Gesamt</span>
       </ng-template>
     </ngx-datatable-column>
   </ngx-datatable>

static/src/app/statistic/war-detail/scoreboard/scoreboard.component.ts

@@ -1,5 +1,4 @@
-import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
-import {ActivatedRoute, Router} from "@angular/router";
+import {Component, ElementRef, EventEmitter, SimpleChanges, ViewChild} from "@angular/core";
 import {War} from "../../../models/model-interfaces";
 import {Fraction} from "../../../utils/fraction.enum";
 
@@ -7,13 +6,14 @@ import {Fraction} from "../../../utils/fraction.enum";
   selector: 'scoreboard',
   templateUrl: './scoreboard.component.html',
   inputs: ['war', 'fractionFilterSelected'],
+  outputs: ['playerTabSwitch'],
   styleUrls: ['./scoreboard.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
 })
 export class ScoreboardComponent {
 
   readonly fraction = Fraction;
 
-  @ViewChild('overview') private overviewContainer: ElementRef;
+  playerTabSwitch = new EventEmitter();
 
   war: War;
 
@@ -30,16 +30,14 @@ export class ScoreboardComponent {
     sortDescending: 'glyphicon glyphicon-triangle-bottom',
   };
 
-  constructor(private route: ActivatedRoute,
-              private router: Router) {
+  constructor() {
   }
 
   ngOnInit() {
   }
 
-  selectPlayerDetail(playerName: string) {
-      this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + playerName],
-        {relativeTo: this.route});
+  selectPlayerDetail(view: number, playerName: string) {
+    this.playerTabSwitch.emit({view: view, player: playerName})
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -49,14 +47,6 @@ export class ScoreboardComponent {
     if (changes.fractionFilterSelected) {
       this.filterPlayersByFraction(this.fractionFilterSelected)
     }
-    this.scrollOverviewTop();
-  }
-
-  scrollOverviewTop() {
-    try {
-      this.overviewContainer.nativeElement.scrollTop = 0;
-    } catch (err) {
-    }
   }
 
   filterPlayersByFraction(fraction?: string) {

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

@@ -66,13 +66,20 @@
     <scoreboard
       *ngIf="tab === 0"
       [war]="war"
-      [fractionFilterSelected]="fractionFilterSelected">
+      [fractionFilterSelected]="fractionFilterSelected"
+      (playerTabSwitch)="switchToPlayerTab($event)">
     </scoreboard>
     <war-detail-fraction
       *ngIf="tab === 1 && logData"
       [war]="war"
       [logData]="logData">
     </war-detail-fraction>
+    <campaign-player-detail
+      *ngIf="tab === 2 && singlePlayerView === 1"
+      [campaignId]="war.campaign"
+      [playerName]="playerDetailName"
+      (switchTab)="switchTab($event)">
+    </campaign-player-detail>
   </div>
 
 </div>

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

@@ -20,6 +20,10 @@ export class WarDetailComponent {
 
   logData;
 
+  singlePlayerView: number;
+
+  playerDetailName: string;
+
   tab: number;
 
   fractionStatsInitialized: boolean;
@@ -45,7 +49,7 @@ export class WarDetailComponent {
       .subscribe(war => {
         this.war = war;
 
-        this.tab = 0;
+        this.switchTab(0);
         this.fractionStatsInitialized = false;
         this.fractionFilterSelected = undefined;
 
@@ -62,6 +66,17 @@ export class WarDetailComponent {
         this.fractionStatsInitialized = true;
       });
     }
+    window.scroll({left: 0, top: 0, behavior: 'smooth'});
+  }
+
+  /**
+   * called by EventEmitter,
+   * @param event with fields: 'view' (0 = war-detail, 1 = campaign-detail); 'player' = player name
+   */
+  switchToPlayerTab(event) {
+    this.singlePlayerView = event.view;
+    this.playerDetailName = event.player;
+    this.switchTab(2);
   }
 
   filterPlayersByFraction(fraction?: string) {

static/src/app/users/user-list/user-list.component.html

@@ -31,7 +31,7 @@
                    [user]="user"
                    (userDelete)="deleteUser(user)"
                    (userSelected)="selectUser($event)"
-                   (userAward)="awardUser($event, $event)"
+                   (userAward)="awardUser($event)"
                    [selected]="user._id == selectedUserId">
     </pjm-user-item>
   </div>

static/src/main.ts

@@ -4,29 +4,6 @@ import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {AppModule} from './app/app.module';
 import {environment} from './environments/environment';
 
-
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/retryWhen';
-import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/observable/from';
-import 'rxjs/add/observable/range';
-import 'rxjs/add/observable/timer';
-import 'rxjs/add/observable/merge';
-import 'rxjs/add/observable/interval';
-
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/mergeMap';
-import 'rxjs/add/operator/switchMap';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/retry';
-import 'rxjs/add/operator/bufferCount';
-import 'rxjs/add/operator/bufferTime';
-import 'rxjs/add/operator/take';
-import 'rxjs/add/operator/delay';
-
 if (environment.production) {
   enableProdMode();
 }