Add empty view and tab switch

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.6.6",
+  "version": "1.7.0",
   "license": "MIT",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,
@@ -8,7 +8,7 @@
     "start": "npm run deploy-static-prod && npm start --prefix ./api",
     "dev": "npm run deploy-static && npm run dev --prefix ./api",
     "deploy-static": "cd ./static && $(npm bin)/ng build && ln -s ../api/resource/ ../public/resource",
-    "deploy-static-prod": "cd ./static && $(npm bin)/ng build --prod --aot && ln -s ../api/resource/ ../public/resource",
+    "deploy-static:prod": "cd ./static && $(npm bin)/ng build --prod --aot && ln -s ../api/resource/ ../public/resource",
     "postinstall": "npm install --prefix ./static && npm install --prefix  ./api",
     "mongodb": "mkdir -p mongodb-data && mongod --dbpath ./mongodb-data",
     "test": "npm test --prefix ./api",

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

@@ -130,7 +130,7 @@ export class CampaignPlayerDetailComponent {
   }
 
   private assignData(label, field) {
-    let killObj = {
+    let dataObj = {
       name: label,
       series: []
     };
@@ -138,12 +138,12 @@ export class CampaignPlayerDetailComponent {
     let total = 0;
     for (let i = 0; i < playerLength; i++) {
       const warDateString = ChartUtils.getShortDateString(this.campaignPlayer.players[i].warId.date);
-      const warKills = this.campaignPlayer.players[i][field];
+      const warData = this.campaignPlayer.players[i][field];
-      killObj.series.push({
+      dataObj.series.push({
         name: warDateString,
-        value: warKills
+        value: warData
       });
-      total += warKills;
+      total += warData;
     }
     switch (field) {
       case 'kill':
@@ -171,7 +171,7 @@ export class CampaignPlayerDetailComponent {
         this.totalCapture = total;
         break;
     }
-    return [killObj];
+    return [dataObj];
   }
 
   navigateBack() {

static/src/app/statistic/stats.routing.ts

@@ -10,6 +10,7 @@ import {WarDetailComponent} from "./war-detail/war-detail.component";
 import {ScoreboardComponent} from "./war-detail/scoreboard/scoreboard.component";
 import {WarSubmitComponent} from "./war-submit/war-submit.component";
 import {FractionStatsComponent} from "./war-detail/fraction-stats/fraction-stats.component";
+import {WarPlayerDetailComponent} from "./war-player-detail/war-player-detail.component";
 
 
 export const statsRoutes: Routes = [{
@@ -51,5 +52,5 @@ export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(stat
 
 export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent,
   WarListComponent, WarSubmitComponent, WarDetailComponent, ScoreboardComponent, FractionStatsComponent,
-  CampaignPlayerDetailComponent, WarItemComponent];
+  CampaignPlayerDetailComponent, WarPlayerDetailComponent, WarItemComponent];
 

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

@@ -31,10 +31,10 @@
     <ngx-datatable-column [width]="90" name="Respawn" prop="respawn"></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 disabled">Detail</span>
+        <span class="btn btn-sm btn-default in-table-btn" (click)="selectPlayerDetail(0, value)">Detail</span>
       </ng-template>
     </ngx-datatable-column>
-    <ngx-datatable-column [width]="80" name="" prop="name">
+    <ngx-datatable-column [width]="80" prop="name">
       <ng-template ngx-datatable-cell-template let-value="value">
         <span class="btn btn-sm btn-default in-table-btn" (click)="selectPlayerDetail(1, value)">Gesamt</span>
       </ng-template>

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

@@ -64,23 +64,34 @@
 
   <!--Sub-Components (=TABS)-->
   <div *ngIf="war">
+
     <scoreboard
       *ngIf="tab === 0"
       [war]="war"
       [fractionFilterSelected]="fractionFilterSelected"
       (playerTabSwitch)="switchToPlayerTab($event)">
     </scoreboard>
+
     <war-detail-fraction
       *ngIf="tab === 1 && logData"
       [war]="war"
       [logData]="logData">
     </war-detail-fraction>
+
+    <war-player-detail
+      *ngIf="tab === 2 && singlePlayerView === 0"
+      [campaignId]="war.campaign"
+      [playerName]="playerDetailName"
+      (switchTab)="switchTab($event)">
+    </war-player-detail>
+
     <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-player-detail/war-player-detail.component.css

@@ -0,0 +1,15 @@
+.player-war-detail-container {
+  padding: 0 1% 0 1%;
+  border-top: thin solid lightgrey;
+}
+
+h2 {
+  padding: 10px;
+}
+
+.btn-back {
+  clear: both;
+  float: left;
+  width: 120px;
+  margin-left: 10px;
+}

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

@@ -0,0 +1,7 @@
+<div class="fade-in player-war-detail-container" xmlns="http://www.w3.org/1999/html">
+  <h2 class="pull-left">Schlachtdetails - HardiReady</h2>
+  <h2 class="pull-right">RtHiaB Schlacht #13</h2>
+
+  <span class="btn btn-default btn-back" (click)="navigateBack()">< Zurück</span>
+
+</div>

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

@@ -0,0 +1,181 @@
+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";
+
+
+@Component({
+  selector: 'war-player-detail',
+  templateUrl: './war-player-detail.component.html',
+  inputs: ['campaignId', 'playerName'],
+  outputs: ['switchTab'],
+  styleUrls: ['./war-player-detail.component.css', '../../style/list-entry.css',
+    '../../style/hide-scrollbar.css', '../../style/overview.css']
+})
+export class WarPlayerDetailComponent {
+
+  campaignId: string;
+
+  playerName: string;
+
+  switchTab = new EventEmitter();
+
+  campaignPlayer: CampaignPlayer = {campaign: {}, players: []};
+
+  sumData: any[] = [];
+  killData: any[] = [];
+  friendlyFireData: any[] = [];
+  deathData: any[] = [];
+  respawnData: any[] = [];
+  reviveData: any[] = [];
+  captureData: any[] = [];
+
+  yAxisKill = 'Kills';
+  yAxisFriendlyFire = 'FriendlyFire';
+  yAxisDeath = 'Tode';
+  yAxisRespawn = 'Respawn';
+  yAxisRevive = 'Revive';
+  yAxisCapture = 'Eroberungen';
+  avgLabel = 'Durchschnitt';
+
+  colorScheme = {
+    domain: ['#00ce12']
+  };
+  colorSchemeBar = {
+    domain: [
+      '#2d5a00', '#455600', '#00561f', '#3f3b00', '#003c19', '#083c00'
+    ]
+  };
+  showRefLines = true;
+  showRefLabels = true;
+  killRefLines = [];
+  deathRefLines = [];
+  captureRefLines = [];
+  friendlyFireRefLines = [];
+  reviveRefLines = [];
+  respawnRefLines = [];
+
+  gradient = false;
+  xAxis = true;
+  yAxis = true;
+  legend = false;
+  showXAxisLabel = true;
+  showYAxisLabel = true;
+  autoscale = false;
+  timeline = false;
+  roundDomains = true;
+
+  totalKills;
+  totalFriendlyFire;
+  totalDeath;
+  totalRespawn;
+  totalRevive;
+  totalCapture;
+
+  kdRatio = 0;
+  maxKd = 1.7;
+
+  respawnDeathRatio = 0;
+  maxRespawnDeathRatio = 1;
+
+
+  constructor(private playerService: PlayerService) {
+  }
+
+  ngOnInit() {
+    this.playerService.getCampaignPlayer(this.campaignId, encodeURIComponent(this.playerName))
+      .subscribe(campaignPlayer => {
+        this.campaignPlayer = campaignPlayer;
+        this.killData = this.assignData(this.yAxisKill, "kill");
+        this.friendlyFireData = this.assignData(this.yAxisFriendlyFire, "friendlyFire");
+        this.deathData = this.assignData(this.yAxisDeath, "death");
+        this.respawnData = this.assignData(this.yAxisRespawn, "respawn");
+        this.reviveData = this.assignData(this.yAxisRevive, "revive");
+        this.captureData = this.assignData(this.yAxisCapture, "flagTouch");
+
+        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 === 0 ? 1 : this.totalDeath)).toFixed(2));
+
+        this.sumData = [
+          {
+            name: this.yAxisKill,
+            value: this.totalKills
+          },
+          {
+            name: this.yAxisFriendlyFire,
+            value: this.totalFriendlyFire
+          },
+          {
+            name: this.yAxisDeath,
+            value: this.totalDeath
+          },
+          {
+            name: this.yAxisRespawn,
+            value: this.totalRespawn
+          },
+          {
+            name: this.yAxisRevive,
+            value: this.totalRevive
+          },
+          {
+            name: this.yAxisCapture,
+            value: this.totalCapture
+          }
+        ];
+
+        Object.assign(this, [this.sumData, this.killData, this.friendlyFireData, this.deathData, this.respawnData, this.reviveData, this.captureData]);
+      });
+  }
+
+  private assignData(label, field) {
+    let killObj = {
+      name: label,
+      series: []
+    };
+    const playerLength = this.campaignPlayer.players.length;
+    let total = 0;
+    for (let i = 0; i < playerLength; i++) {
+      const warDateString = ChartUtils.getShortDateString(this.campaignPlayer.players[i].warId.date);
+      const warKills = this.campaignPlayer.players[i][field];
+      killObj.series.push({
+        name: warDateString,
+        value: warKills
+      });
+      total += warKills;
+    }
+    switch (field) {
+      case 'kill':
+        this.killRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalKills = total;
+        break;
+      case 'friendlyFire':
+        this.friendlyFireRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalFriendlyFire = total;
+        break;
+      case 'death':
+        this.deathRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalDeath = total;
+        break;
+      case 'respawn':
+        this.respawnRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalRespawn = total;
+        break;
+      case 'revive':
+        this.reviveRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalRevive = total;
+        break;
+      case 'flagTouch':
+        this.captureRefLines.push({value: total / playerLength, name: this.avgLabel});
+        this.totalCapture = total;
+        break;
+    }
+    return [killObj];
+  }
+
+  navigateBack() {
+    this.switchTab.emit(0);
+  }
+
+}