Merge branch 'release/v1.6.4' of hardi/opt-cc into master

.gitignore

@@ -44,7 +44,8 @@ Thumbs.db
 .directory
 
 # Internal Data
-/public
+public/
+mongodb-data/
 resource/
 backup/
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "license": "MIT",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,

static/src/app/app.component.html

@@ -96,6 +96,6 @@
     <router-outlet name="right"></router-outlet>
   </div>
   <div id="footer">
-    <router-outlet name="bottom"></router-outlet>
+    <router-outlet name="footer"></router-outlet>
   </div>
 </div>

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">Spielerstatistik - {{campaignPlayer.name}}</h2>
+  <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 {Component, EventEmitter} from "@angular/core";
-import {ActivatedRoute} from "@angular/router";
 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,
+  constructor(private playerService: PlayerService) {
-              private location: Location,
-              private playerService: PlayerService) {
   }
 
   ngOnInit() {
-    this.route.params
+    this.playerService.getCampaignPlayer(this.campaignId, encodeURIComponent(this.playerName))
-      .map(params => [params['id'], params['playerName']])
-      .flatMap(id => this.playerService.getCampaignPlayer(id[0], encodeURIComponent(id[1])))
       .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) {
+        this.kdRatio = parseFloat((this.totalKills / (this.totalDeath === 0 ? 1 : this.totalDeath)).toFixed(2));
-          // avoid infinite or NaN with no death
-          this.totalDeath = 1;
-        }
-        this.kdRatio = parseFloat((this.totalKills / 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/stats.module.ts

@@ -4,7 +4,7 @@ import {SharedModule} from "../shared.module";
 import {statsRouterModule, statsRoutingComponents} from "./stats.routing";
 import {WarService} from "../services/logs/war.service";
 import {NgxChartsModule} from "@swimlane/ngx-charts";
-import {AccordionModule, BsDropdownModule, ButtonsModule, TabsModule} from "ngx-bootstrap";
+import {AccordionModule, ButtonsModule} from "ngx-bootstrap";
 import {CampaignService} from "../services/logs/campaign.service";
 import {NgxDatatableModule} from "@swimlane/ngx-datatable";
 import {PlayerService} from "../services/logs/player.service";
@@ -13,7 +13,7 @@ import {LogsService} from "../services/logs/logs.service";
 @NgModule({
   declarations: statsRoutingComponents,
   imports: [CommonModule, SharedModule, statsRouterModule, NgxChartsModule,
-    AccordionModule.forRoot(), BsDropdownModule.forRoot(), ButtonsModule.forRoot(), TabsModule.forRoot(), NgxDatatableModule],
+    AccordionModule.forRoot(), ButtonsModule.forRoot(), NgxDatatableModule],
   providers: [WarService, CampaignService, PlayerService, LogsService]
 })
 export class StatsModule {

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

@@ -1,13 +1,15 @@
 import {RouterModule, Routes} from "@angular/router";
 import {StatisticComponent} from "./stats.component";
-import {WarDetailComponent} from "./war-detail/war-detail.component";
-import {WarSubmitComponent} from "./war-submit/war-submit.component";
 import {WarListComponent} from "./war-list/war-list.component";
 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";
+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";
 
 
 export const statsRoutes: Routes = [{
@@ -48,5 +50,6 @@ export const statsRoutes: Routes = [{
 export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes);
 
 export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent,
-  WarListComponent, WarSubmitComponent, WarDetailComponent, CampaignPlayerDetailComponent, WarItemComponent];
+  WarListComponent, WarSubmitComponent, WarDetailComponent, ScoreboardComponent, FractionStatsComponent,
+  CampaignPlayerDetailComponent, WarItemComponent];
 

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

@@ -0,0 +1,32 @@
+.btn-dark {
+  background: #4b4b4b;
+  color: #f5f5f5;
+  border-color: #000;
+}
+
+.btn-dark:hover {
+  background: #afafaf;
+  color: #f5f5f5;
+}
+
+.btn-dark.active {
+  background: #222222;
+}
+
+.chart-container {
+  width: 95%;
+  margin: 2%;
+  min-width: 900px;
+  height: 600px;
+  padding: 15px;
+  float: left;
+}
+
+.chart-select-group {
+  width: 980px;
+  margin: auto;
+}
+
+/*.dropdown-menu > li > a {*/
+/*cursor: pointer;*/
+/*}*/

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

@@ -0,0 +1,77 @@
+<!--<div class="btn-group" style="position: absolute; margin-left: 5%;" dropdown>-->
+<!--<button dropdownToggle type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split">-->
+<!--{{dataMode}} <span class="caret"></span>-->
+<!--</button>-->
+<!--<ul *dropdownMenu class="dropdown-menu" role="menu">-->
+<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(0, 'Summe')">Summe</a></li>-->
+<!--<li class="divider dropdown-divider"></li>-->
+<!--<li class="disabled" role="menuitem">-->
+<!--<a class="dropdown-item" style="cursor: default!important;">Interval:</a>-->
+<!--</li>-->
+<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(1, '1 Minute')">1 Minute</a></li>-->
+<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(5, '5 Minuten')">5 Minuten</a></li>-->
+<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(10, '10 Minuten')">10 Minuten</a>-->
+<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(20, '20 Minuten')">20 Minuten</a>-->
+<!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(40, '40 Minuten')">40 Minuten</a>-->
+<!--</li>-->
+<!--</ul>-->
+<!--</div>-->
+
+<div class="fade-in" xmlns="http://www.w3.org/1999/html">
+  <div class="chart-select-group">
+    <div class="btn-group" (click)="selectChart()">
+      <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+             btnRadio="{{labelPoints}}">{{labelPoints}}</label>
+      <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+             btnRadio="{{labelBudget}}">{{labelBudget}}</label>
+      <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+             btnRadio="{{labelKill}}">{{labelKill}}</label>
+      <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+             btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
+      <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+             btnRadio="{{labelRevive}}">{{labelRevive}}</label>
+      <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+             btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
+      <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+             btnRadio="{{labelTransport}}">{{labelTransport}}</label>
+      <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+             btnRadio="{{labelFlag}}">{{labelFlag}}</label>
+    </div>
+  </div>
+
+  <div *ngIf="showLineChart" class="chart-container">
+    <ngx-charts-line-chart
+      [scheme]="colorScheme"
+      [results]="lineChartData"
+      [gradient]="gradient"
+      [xAxis]="xAxis"
+      [yAxis]="yAxis"
+      [legend]="legend"
+      [legendTitle]="legendTitle"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [yAxisLabel]="lineChartLabel"
+      [autoScale]="autoscale"
+      [timeline]="timeline"
+      [roundDomains]="roundDomains">
+    </ngx-charts-line-chart>
+  </div>
+
+  <div *ngIf="!showLineChart" class="chart-container">
+    <ngx-charts-area-chart
+      [scheme]="colorScheme"
+      [results]="areaChartData"
+      [xAxis]="xAxis"
+      [yAxis]="yAxis"
+      [curve]="stepCurve"
+      [legend]="legend"
+      [legendTitle]="legendTitle"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [yAxisLabel]="labelFlag"
+      [autoScale]="autoscale"
+      [timeline]="timeline"
+      [roundDomains]="false">
+    </ngx-charts-area-chart>
+  </div>
+</div>

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

@@ -0,0 +1,339 @@
+import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
+import * as d3 from "d3";
+import {ChartUtils} from "../../../utils/chart-utils";
+import {Fraction} from "../../../utils/fraction.enum";
+import {War} from "../../../models/model-interfaces";
+
+
+@Component({
+  selector: 'war-detail-fraction',
+  templateUrl: './fraction-stats.component.html',
+  inputs: ['war', 'logData'],
+  styleUrls: ['./fraction-stats.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
+})
+export class FractionStatsComponent {
+
+  readonly fraction = Fraction;
+
+  @ViewChild('overview') private overviewContainer: ElementRef;
+
+  war: War;
+
+  logData: any;
+
+  startDateObj: Date;
+
+  initialized: any;
+
+  public chartSelectModel: string;
+
+  lineChartData: any[] = [];
+  areaChartData: any[] = [];
+
+  tmpPointData;
+  tmpBudgetData;
+  tmpKillData;
+  tmpFrienlyFireData;
+  tmpTransportData;
+  tmpReviveData;
+  tmpStabilizeData;
+  tmpFlagCaptureData;
+
+  colorScheme = {
+    domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
+  };
+
+  labelPoints = 'Punkte';
+  labelBudget = 'Budget';
+  labelKill = 'Kills';
+  labelFriendlyFire = 'FriendlyFire';
+  labelTransport = 'Lufttransport';
+  labelRevive = 'Revive';
+  labelStabilize = 'Stabilisiert';
+  labelFlag = 'Flaggenbesitz';
+  lineChartLabel: string = this.labelPoints;
+
+  showLineChart = true;
+  stepCurve = d3.curveStepAfter;
+  gradient = false;
+  yAxis = true;
+  xAxis = true;
+  legend = false;
+  legendTitle = false;
+  showXAxisLabel = false;
+  showYAxisLabel = true;
+  autoscale = true;
+  timeline = false;
+  roundDomains = true;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.war || changes.logData) {
+      this.initialized = {
+        budget: false,
+        kill: false,
+        revive: false,
+        transport: false,
+        flag: false
+      };
+      Object.assign(this, [this.lineChartData, this.areaChartData]);
+      this.chartSelectModel = this.labelPoints;
+
+      this.startDateObj = new Date(this.war.date);
+      this.startDateObj.setHours(0);
+      this.startDateObj.setMinutes(1);
+      this.loadFractionData();
+    }
+  }
+
+  selectChart() {
+    if (this.chartSelectModel !== this.labelFlag) {
+      this.showLineChart = true;
+      this.lineChartLabel = this.chartSelectModel;
+      switch (this.chartSelectModel) {
+        case this.labelPoints:
+          this.lineChartData = this.tmpPointData;
+          break;
+        case this.labelBudget:
+          this.initBudgetData();
+          this.lineChartData = this.tmpBudgetData;
+          break;
+        case this.labelKill:
+          this.initKillData();
+          this.lineChartData = this.tmpKillData;
+          break;
+        case this.labelFriendlyFire:
+          this.initKillData();
+          this.lineChartData = this.tmpFrienlyFireData;
+          break;
+        case this.labelRevive:
+          this.initRevive();
+          this.lineChartData = this.tmpReviveData;
+          break;
+        case this.labelStabilize:
+          this.initRevive();
+          this.lineChartData = this.tmpStabilizeData;
+          break;
+        case this.labelTransport:
+          this.initTransportData();
+          this.lineChartData = this.tmpTransportData;
+          break;
+      }
+    } else {
+      this.initFlagHoldData();
+      this.showLineChart = false;
+      this.areaChartData = this.tmpFlagCaptureData;
+    }
+  }
+
+  loadFractionData() {
+    this.initializeTempCollections();
+    this.initPointData();
+    this.showLineChart = true;
+    this.lineChartLabel = this.labelPoints;
+    this.lineChartData = this.tmpPointData;
+  }
+
+  initPointData() {
+    this.logData.points.forEach(pointEntry => {
+      this.tmpPointData[0].series.push(ChartUtils.getSeriesEntry(new Date(pointEntry.time), pointEntry.ptBlufor));
+      this.tmpPointData[1].series.push(ChartUtils.getSeriesEntry(new Date(pointEntry.time), pointEntry.ptOpfor));
+    });
+    this.addFinalTimeData(this.tmpPointData);
+  }
+
+  initBudgetData() {
+    if (this.initialized.budget) {
+      return;
+    }
+    this.logData.budget.forEach(budgetEntry => {
+      const budgetEntryDate = new Date(budgetEntry.time);
+      const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1;
+      const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1;
+
+      if (this.isTwoMinutesAhead(budgetEntryDate, this.tmpBudgetData)) {
+        this.tmpBudgetData[fractionChange].series.push(ChartUtils.getSeriesEntry(new Date(budgetEntry.time), budgetEntry.newBudget));
+        this.tmpBudgetData[fractionOld].series.push(ChartUtils.getSeriesEntry(new Date(budgetEntry.time),
+          this.tmpBudgetData[fractionOld].series[this.tmpBudgetData[fractionOld].series.length - 1].value));
+      }
+    });
+    this.addFinalTimeData(this.tmpBudgetData);
+    this.initialized.budget = true;
+  }
+
+  initKillData() {
+    if (this.initialized.kill) {
+      return;
+    }
+    let killCountBlufor = 0, killCountOpfor = 0, ffKillCountBlufor = 0, ffKillCountOpfor = 0;
+
+    for (const {killEntry, index} of this.logData.kill.map((killEntry, index) => ({killEntry, index}))) {
+      const killEntryDate = new Date(killEntry.time);
+      if (killEntry.friendlyFire === false) {
+        if (killEntry.fraction === 'BLUFOR') {
+          killCountBlufor++;
+        }
+        if (killEntry.fraction === 'OPFOR') {
+          killCountOpfor++;
+        }
+        if (this.isTwoMinutesAhead(killEntryDate, this.tmpKillData)) {
+          this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
+          this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
+        }
+      } else {
+        if (killEntry.fraction === 'BLUFOR') {
+          ffKillCountBlufor++;
+        }
+        if (killEntry.fraction === 'OPFOR') {
+          ffKillCountOpfor++;
+        }
+        if (this.isTwoMinutesAhead(killEntryDate, this.tmpFrienlyFireData)) {
+          this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
+          this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
+        }
+      }
+      if (index === this.logData.kill.length - 1) {
+        this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
+        this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
+        this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
+        this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
+      }
+    }
+
+    this.addFinalTimeData(this.tmpKillData);
+    this.addFinalTimeData(this.tmpFrienlyFireData)
+    this.initialized.kill = true;
+  }
+
+  initRevive() {
+    if (this.initialized.revive) {
+      return;
+    }
+    let reviveCountBlufor = 0, reviveCountOpfor = 0, stabilizeCountBlufor = 0, stabilizeCountOpfor = 0;
+    for (const {reviveEntry, index} of this.logData.revive.map((reviveEntry, index) => ({reviveEntry, index}))) {
+      const reviveEntryDate = new Date(reviveEntry.time);
+      if (reviveEntry.stabilized === false) {
+        if (reviveEntry.fraction === 'BLUFOR') {
+          reviveCountBlufor++;
+        } else {
+          reviveCountOpfor++;
+        }
+        if (this.isTwoMinutesAhead(reviveEntryDate, this.tmpReviveData)) {
+          this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
+          this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
+        }
+      } else {
+        if (reviveEntry.fraction === 'BLUFOR') {
+          stabilizeCountBlufor++;
+        } else {
+          stabilizeCountOpfor++;
+        }
+        if (this.isTwoMinutesAhead(reviveEntryDate, this.tmpStabilizeData)) {
+          this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
+          this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
+        }
+      }
+      if (index === this.logData.revive.length - 1) {
+        this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
+        this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
+        this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
+        this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
+      }
+    }
+    this.addFinalTimeData(this.tmpReviveData);
+    this.addFinalTimeData(this.tmpStabilizeData);
+    this.initialized.revive = true;
+  }
+
+  initTransportData() {
+    if (this.initialized.transport) {
+      return;
+    }
+    let transportCountBlufor = 0, transportCountOpfor = 0;
+    for (const {transportEntry, index} of this.logData.transport.map((transportEntry, index) => ({
+      transportEntry,
+      index
+    }))) {
+      const transportEntryDate = new Date(transportEntry.time);
+      if (transportEntry.fraction === 'BLUFOR') {
+        transportCountBlufor++;
+      } else {
+        transportCountOpfor++;
+      }
+      if (this.isTwoMinutesAhead(transportEntryDate, this.tmpTransportData) || index === this.logData.transport.length - 1) {
+        this.tmpTransportData[0].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountBlufor));
+        this.tmpTransportData[1].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountOpfor));
+      }
+    }
+    this.addFinalTimeData(this.tmpTransportData);
+    this.initialized.transport = true;
+
+  }
+
+  initFlagHoldData() {
+    if (this.initialized.flag) {
+      return;
+    }
+    let flagStatusBlufor = true;
+    let flagStatusOpfor = true;
+    this.tmpFlagCaptureData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusBlufor));
+    this.tmpFlagCaptureData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusOpfor));
+
+    this.logData.flag.forEach(flagEntry => {
+      if (flagEntry.flagFraction === 'BLUFOR') {
+        flagStatusBlufor = !flagEntry.capture;
+      } else {
+        flagStatusOpfor = !flagEntry.capture;
+      }
+      this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push(
+        ChartUtils.getSeriesEntry(new Date(flagEntry.time), flagEntry.flagFraction === 'BLUFOR' ? flagStatusBlufor : flagStatusOpfor)
+      )
+    });
+
+    this.addFinalTimeData(this.tmpFlagCaptureData);
+    this.initialized.flag = true;
+  }
+
+  protected isTwoMinutesAhead(entryDate: Date, tmpData: any): boolean {
+    return entryDate.getTime() >= tmpData[0].series[tmpData[0].series.length - 1].name.getTime() + (1.5 * 60000)
+  }
+
+  initializeTempCollections() {
+    this.tmpPointData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+    this.tmpBudgetData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+    this.tmpKillData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+    this.tmpFrienlyFireData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+    this.tmpTransportData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+    this.tmpReviveData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+    this.tmpStabilizeData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+    this.tmpFlagCaptureData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+
+    [this.tmpKillData, this.tmpFrienlyFireData, this.tmpReviveData, this.tmpStabilizeData, this.tmpTransportData].forEach(tmp => {
+      [0, 1].forEach(index => {
+        tmp[index].series.push(ChartUtils.getSeriesEntry(this.startDateObj, 0));
+      })
+    });
+    this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetBlufor));
+    this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetOpfor));
+  }
+
+  addFinalTimeData(tmpCollection) {
+    const endDate = new Date(this.war.endDate);
+    if (tmpCollection === this.tmpBudgetData) {
+      this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(endDate, this.war.endBudgetBlufor));
+      this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(endDate, this.war.endBudgetOpfor));
+    } else {
+      for (let j in [0, 1]) {
+        if (tmpCollection[j].series[tmpCollection[j].series.length - 1].name < endDate) {
+          tmpCollection[j].series.push(ChartUtils.getSeriesEntry(endDate, tmpCollection[j].series[tmpCollection[j].series.length - 1].value));
+        }
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,42 @@
+.player-name {
+  font-weight: bold;
+}
+
+/* ########### DATATABLE ########### */
+
+:host /deep/ .datatable-header {
+  background: #222222;
+  font-weight: 700;
+  border-radius: 10px 10px 0 0;
+  color: white;
+}
+
+:host /deep/ span.datatable-header-cell-label, :host /deep/ div.datatable-body-cell-label {
+  padding-left: 8px;
+}
+
+:host /deep/ .ngx-datatable .datatable-header {
+  /*vertical center alignment*/
+  display: table-cell;
+  vertical-align: middle;
+}
+
+:host /deep/ .ngx-datatable .datatable-body .datatable-body-row > div {
+  /*vertical alignment*/
+  position: relative;
+  top: 10px;
+}
+
+:host /deep/ .datatable-body-row {
+  color: #222222;
+  border-bottom: 1px solid grey;
+}
+
+:host /deep/ .datatable-body-row:hover {
+  background-color: #f7f7f7;
+}
+
+.in-table-btn {
+  position: absolute;
+  margin-top: -5px;
+}

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

@@ -0,0 +1,42 @@
+<div class="fade-in" xmlns="http://www.w3.org/1999/html">
+  <ngx-datatable
+    style="width:1020px; margin:auto"
+    [rows]="rows"
+    [sorts]="[{prop: 'kill', dir: 'desc'}]"
+    [reorderable]="reorderable"
+    [messages]="{emptyMessage: 'Loading...'}"
+    [headerHeight]="cellHeight"
+    [rowHeight]="cellHeight"
+    [cssClasses]='customClasses'
+    [selectionType]="'single'">
+    <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"
+              [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+          {{value}}
+        </span>
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
+      <ng-template ngx-datatable-cell-template let-value="value">
+        {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
+      </ng-template>
+    </ngx-datatable-column>
+    <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
+    <ngx-datatable-column [width]="104" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
+    <ngx-datatable-column [width]="80" name="Revive" prop="revive"></ngx-datatable-column>
+    <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
+    <ngx-datatable-column [width]="70" name="Tod" prop="death"></ngx-datatable-column>
+    <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>
+      </ng-template>
+    </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(1, value)">Gesamt</span>
+      </ng-template>
+    </ngx-datatable-column>
+  </ngx-datatable>
+</div>

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

@@ -0,0 +1,62 @@
+import {Component, ElementRef, EventEmitter, SimpleChanges, ViewChild} from "@angular/core";
+import {War} from "../../../models/model-interfaces";
+import {Fraction} from "../../../utils/fraction.enum";
+
+@Component({
+  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;
+
+  playerTabSwitch = new EventEmitter();
+
+  war: War;
+
+  fractionFilterSelected: string;
+
+  cellHeight = 40;
+
+  rows = [];
+
+  reorderable: boolean = false;
+
+  customClasses = {
+    sortAscending: 'glyphicon glyphicon-triangle-top',
+    sortDescending: 'glyphicon glyphicon-triangle-bottom',
+  };
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+  selectPlayerDetail(view: number, playerName: string) {
+    this.playerTabSwitch.emit({view: view, player: playerName})
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.war) {
+      this.rows = changes.war.currentValue.players;
+    }
+    if (changes.fractionFilterSelected) {
+      this.filterPlayersByFraction(this.fractionFilterSelected)
+    }
+  }
+
+  filterPlayersByFraction(fraction?: string) {
+    if (fraction) {
+      this.rows = this.war.players.filter((player) => {
+        return player.fraction === fraction;
+      })
+    } else {
+      this.rows = this.war.players;
+    }
+  }
+
+}

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

@@ -1,7 +1,7 @@
-.vertical-spacer {
+.war-header-container {
-  height: 205px;
+  width: 920px;
-  float: left;
+  min-height: 205px;
-  width: 4%;
+  margin: auto;
 }
 
 .head-field {
@@ -10,120 +10,32 @@
   margin-bottom: 10px;
 }
 
-@media screen and (min-width: 1500px) {
+.war-header {
-  .vertical-spacer {
+  border-bottom: thin solid lightgrey;
-    width: 15%;
-  }
 }
 
-@media screen and (min-width: 2000px) {
+.nav-tabs > li.active > a {
-  .vertical-spacer {
-    width: 20%;
-  }
-}
-
-.overview {
-  overflow-y: scroll;
-  overflow-x: hidden;
-  border-left: thin solid lightgrey;
-  bottom: 20px;
-  height: 100vh;
-}
-
-.player-name {
-  font-weight: bold;
-}
-
-/* ########### TABS ########### */
-
-:host /deep/ .nav-tabs {
-  padding-left: 35% !important;
-}
-
-:host /deep/ .nav-link {
-  background: #4b4b4b;
-  color: white;
-}
-
-:host /deep/ .nav-link:hover {
-  background: #afafaf;
-  color: #000;
-}
-
-:host /deep/ .nav-tabs > li.active > a {
   background: #222222;
-  color: white;
 }
 
-/* ########### DATATABLE ########### */
+.nav-tabs {
-
+  border-bottom: 0;
-:host /deep/ .datatable-header {
-  background: #222222;
-  font-weight: 700;
-  border-radius: 10px 10px 0 0;
-  color: white;
 }
 
-:host /deep/ span.datatable-header-cell-label, :host /deep/ div.datatable-body-cell-label {
+.nav-tabs > li > a {
-  padding-left: 8px;
-}
-
-:host /deep/ .ngx-datatable .datatable-header {
-  /*vertical center alignment*/
-  display: table-cell;
-  vertical-align: middle;
-}
-
-:host /deep/ .ngx-datatable .datatable-body .datatable-body-row > div {
-  /*vertical alignment*/
-  position: relative;
-  top: 10px;
-}
-
-:host /deep/ .datatable-body-row {
-  color: #222222;
-  border-bottom: 1px solid grey;
-  cursor: pointer;
-}
-
-:host /deep/ .datatable-body-row:hover {
-  background-color: #f7f7f7;
-}
-
-/* ########### CHART-TAB ######## */
-
-.btn-dark {
   background: #4b4b4b;
-  color: #f5f5f5;
-  border-color: #000;
 }
 
-.btn-dark:hover {
+.nav-tabs > li:not(.active) > a:hover {
   background: #afafaf;
   color: #f5f5f5;
 }
 
-.btn-dark.active {
+.nav-link {
-  background: #222222;
+  cursor: pointer !important;
+  color: #FFF !important;
 }
 
-.chart-container {
+.nav-tabs > li.deactivated > a.nav-link {
-  width: 95%;
+  cursor: not-allowed !important;
-  margin: 2%;
-  min-width: 900px;
-  height: 600px;
-  padding: 15px;
-  float: left;
 }
-
-.chart-select-group {
-  width: 50%;
-  margin: auto;
-  position: inherit;
-  display: block;
-  vertical-align: middle;
-}
-
-/*.dropdown-menu > li > a {*/
-  /*cursor: pointer;*/
-/*}*/

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

@@ -1,7 +1,5 @@
-<div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
+<div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
-  <div class=vertical-spacer></div>
+  <div class="war-header-container">
-  <div style="overflow:hidden">
-    <div style="width: 920px;min-height: 205px;">
     <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
     <div class="pull-left head-field" style="width: 250px">
       <h4>Endpunktestand:</h4>
@@ -14,7 +12,7 @@
       <h4 style="margin-bottom: 0;">Teilnehmer:</h4>
       <ngx-charts-pie-chart
         [view]="[120, 120]"
-          [scheme]="{domain: [fraction.COLOR_OPFOR, fraction.COLOR_BLUFOR]}"
+        [scheme]="colorScheme"
         [results]="playerChart"
         [legend]="false"
         [explodeSlices]="false"
@@ -25,23 +23,24 @@
     </div>
 
     <div class="pull-left " style="padding-left: 150px; padding-top:15px">
-        <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile anzeigen</a>
+      <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
-        <form *ngIf="staticTabs.tabs[0].active" class="form-group">
+        anzeigen</a>
+      <form class="form-group" *ngIf="tab === 0">
         <label class="radio-inline">
           <input type="radio" name="fractSelect"
-                   [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
+                 [checked]="(fractionFilterSelected == undefined) ? 'true' : 'false'"
-                   [(ngModel)]="fractionRadioSelect"
+                 [(ngModel)]="fractionFilterSelected"
                  (change)="filterPlayersByFraction()">Alle
         </label>
         <label class="radio-inline">
           <input type="radio" name="fractSelect" value="BLUFOR"
-                   [(ngModel)]="fractionRadioSelect"
+                 [(ngModel)]="fractionFilterSelected"
                  #fractRadioBufor
                  (change)="filterPlayersByFraction(fractRadioBufor.value)">{{fraction.BLUFOR}}
         </label>
         <label class="radio-inline">
           <input type="radio" name="fractSelect" value="OPFOR"
-                   [(ngModel)]="fractionRadioSelect"
+                 [(ngModel)]="fractionFilterSelected"
                  #fractRadioOpfor
                  (change)="filterPlayersByFraction(fractRadioOpfor.value)">{{fraction.OPFOR}}
         </label>
@@ -49,127 +48,38 @@
       </form>
     </div>
   </div>
+
+  <ul class="nav nav-tabs" style="width:980px; margin:auto">
+    <li class="nav-item" [ngClass]="{active :tab === 0}" (click)="switchTab(0)">
+      <a class="nav-link"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a>
+    </li>
+    <li class="nav-item" [ngClass]="{active :tab === 1}" (click)="switchTab(1)">
+      <a class="nav-link"><img src="../../../assets/fraction-btn.png"> Fraktionen</a>
+    </li>
+    <li class="nav-item" [ngClass]="{active :tab === 2, deactivated :tab !== 2} ">
+      <a class="nav-link"><img src="../../../assets/player-stats-btn.png"> Player</a>
+    </li>
+  </ul>
+
+  <!--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>
+    <campaign-player-detail
+      *ngIf="tab === 2 && singlePlayerView === 1"
+      [campaignId]="war.campaign"
+      [playerName]="playerDetailName"
+      (switchTab)="switchTab($event)">
+    </campaign-player-detail>
   </div>
 
-  <tabset #staticTabs>
-    <tab>
-      <ng-template tabHeading>
-        <img src="../../../assets/scoreboard-btn.png"> Scoreboard
-      </ng-template>
-      <div class=vertical-spacer></div>
-      <ngx-datatable
-        [rows]="rows"
-        [sorts]="[{prop: 'kill', dir: 'desc'}]"
-        [reorderable]="reorderable"
-        [messages]="{emptyMessage: 'Loading...'}"
-        [headerHeight]="cellHeight"
-        [rowHeight]="cellHeight"
-        [cssClasses]='customClasses'
-        [selectionType]="'single'"
-        (select)="selectPlayerDetail($event)">
-        <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"
-              [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
-          {{value}}
-        </span>
-          </ng-template>
-        </ngx-datatable-column>
-        <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
-          <ng-template ngx-datatable-cell-template let-value="value">
-            {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
-          </ng-template>
-        </ngx-datatable-column>
-        <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
-        <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
-        <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
-        <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
-        <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
-        <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
-      </ngx-datatable>
-    </tab>
-
-    <tab (select)="loadFractionData()">
-      <ng-template tabHeading>
-        <img src="../../../assets/fraction-btn.png"> Fraktionen
-      </ng-template>
-
-      <!--<div class="btn-group" style="position: absolute; margin-left: 5%;" dropdown>-->
-      <!--<button dropdownToggle type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split">-->
-      <!--{{dataMode}} <span class="caret"></span>-->
-      <!--</button>-->
-      <!--<ul *dropdownMenu class="dropdown-menu" role="menu">-->
-      <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(0, 'Summe')">Summe</a></li>-->
-      <!--<li class="divider dropdown-divider"></li>-->
-      <!--<li class="disabled" role="menuitem">-->
-      <!--<a class="dropdown-item" style="cursor: default!important;">Interval:</a>-->
-      <!--</li>-->
-      <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(1, '1 Minute')">1 Minute</a></li>-->
-      <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(5, '5 Minuten')">5 Minuten</a></li>-->
-      <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(10, '10 Minuten')">10 Minuten</a>-->
-      <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(20, '20 Minuten')">20 Minuten</a>-->
-      <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(40, '40 Minuten')">40 Minuten</a>-->
-      <!--</li>-->
-      <!--</ul>-->
-      <!--</div>-->
-
-      <div class="chart-select-group btn-group" (click)="selectChart()">
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
-               btnRadio="{{labelKill}}">{{labelKill}}</label>
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
-               btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
-               btnRadio="{{labelTransport}}">{{labelTransport}}</label>
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
-               btnRadio="{{labelFlag}}">{{labelFlag}}</label>
-      </div>
-
-      <div *ngIf="showLineChart" class="chart-container">
-        <ngx-charts-line-chart
-          [scheme]="colorScheme"
-          [results]="lineChartData"
-          [gradient]="gradient"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="lineChartLabel"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="roundDomains">
-        </ngx-charts-line-chart>
-      </div>
-
-      <div *ngIf="!showLineChart" class="chart-container">
-        <ngx-charts-area-chart
-          [scheme]="colorScheme"
-          [results]="areaChartData"
-          [xAxis]="xAxis"
-          [yAxis]="yAxis"
-          [curve]="stepCurve"
-          [legend]="legend"
-          [legendTitle]="legendTitle"
-          [showXAxisLabel]="showXAxisLabel"
-          [showYAxisLabel]="showYAxisLabel"
-          [yAxisLabel]="labelFlag"
-          [autoScale]="autoscale"
-          [timeline]="timeline"
-          [roundDomains]="false">
-        </ngx-charts-area-chart>
-      </div>
-    </tab>
-
-    <!--<tab>-->
-      <!--<ng-template tabHeading>-->
-        <!--<img src="../../../assets/player-stats-btn.png"> Player-->
-      <!--</ng-template>-->
-    <!--</tab>-->
-  </tabset>
-
 </div>

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

@@ -1,13 +1,10 @@
-///<reference path="../../utils/chart-utils.ts"/>
+import {Component} from "@angular/core";
-import {Component, ElementRef, ViewChild} from "@angular/core";
+import {ActivatedRoute} from "@angular/router";
-import {ActivatedRoute, Router} from "@angular/router";
 import {WarService} from "../../services/logs/war.service";
 import {War} from "../../models/model-interfaces";
-import {LogsService} from "../../services/logs/logs.service";
-import {TabsetComponent} from "ngx-bootstrap";
-import * as d3 from "d3";
 import {ChartUtils} from "../../utils/chart-utils";
 import {Fraction} from "../../utils/fraction.enum";
+import {LogsService} from "../../services/logs/logs.service";
 
 
 @Component({
@@ -19,76 +16,27 @@ export class WarDetailComponent {
 
   readonly fraction = Fraction;
 
-  @ViewChild('overview') private overviewContainer: ElementRef;
+  war: War;
 
-  @ViewChild('staticTabs') staticTabs: TabsetComponent;
+  logData;
 
-  war: War = {players: []};
+  singlePlayerView: number;
 
-  logData: any;
+  playerDetailName: string;
 
-  initialized: any;
+  tab: number;
 
-  startDateObj: Date;
+  fractionStatsInitialized: boolean;
 
-  public chartSelectModel: string;
+  fractionFilterSelected: string;
-
-  fractionRadioSelect: string;
 
   playerChart: any[] = [];
 
-  cellHeight = 40;
-
-  rows = [];
-
-  reorderable: boolean = false;
-
-  customClasses = {
-    sortAscending: 'glyphicon glyphicon-triangle-top',
-    sortDescending: 'glyphicon glyphicon-triangle-bottom',
-  };
-
-  lineChartData: any[] = [];
-  areaChartData: any[] = [];
-
-  tmpPointData;
-  tmpBudgetData;
-  tmpKillData;
-  tmpFrienlyFireData;
-  tmpTransportData;
-  tmpReviveData;
-  tmpStabilizeData;
-  tmpFlagCaptureData;
-
   colorScheme = {
-    domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
+    domain: [Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR]
   };
 
-  labelPoints = 'Punkte';
-  labelBudget = 'Budget';
-  labelKill = 'Kills';
-  labelFriendlyFire = 'FriendlyFire';
-  labelTransport = 'Lufttransport';
-  labelRevive = 'Revive';
-  labelStabilize = 'Stabilisiert';
-  labelFlag = 'Flaggenbesitz';
-  lineChartLabel: string = this.labelPoints;
-
-  showLineChart = true;
-  stepCurve = d3.curveStepAfter;
-  gradient = false;
-  yAxis = true;
-  xAxis = true;
-  legend = false;
-  legendTitle = false;
-  showXAxisLabel = false;
-  showYAxisLabel = true;
-  autoscale = true;
-  timeline = false;
-  roundDomains = true;
-
   constructor(private route: ActivatedRoute,
-              private router: Router,
               private warService: WarService,
               private logsService: LogsService) {
   }
@@ -100,306 +48,39 @@ export class WarDetailComponent {
       .flatMap(id => this.warService.getWar(id))
       .subscribe(war => {
         this.war = war;
-        this.rows = war.players;
+
+        this.switchTab(0);
+        this.fractionStatsInitialized = false;
+        this.fractionFilterSelected = undefined;
+
         this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
+        Object.assign(this, [this.playerChart]);
+      })
+  }
 
-        this.initialized = {
+  switchTab(index: number) {
-          basic: false,
+    this.tab = index;
-          budget: false,
+    if (index === 1 && !this.fractionStatsInitialized) {
-          kill: false,
+      this.logsService.getFullLog(this.war._id).subscribe(log => {
-          revive: false,
+        this.logData = log;
-          transport: false,
+        this.fractionStatsInitialized = true;
-          flag: false
-        };
-        Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
-        this.chartSelectModel = this.labelPoints;
-
-        this.startDateObj = new Date(this.war.date);
-        this.startDateObj.setHours(0);
-        this.startDateObj.setMinutes(1);
-
-        this.fractionRadioSelect = undefined;
-        this.staticTabs.tabs[0].active = true;
-        this.scrollOverviewTop();
       });
     }
+    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) {
-    if (fraction) {
+    this.fractionFilterSelected = fraction;
-      this.rows = this.war.players.filter((player) => {
-        return player.fraction === fraction;
-      })
-    } else {
-      this.rows = this.war.players;
-    }
-  }
-
-  selectChart() {
-    if (this.chartSelectModel !== this.labelFlag) {
-      this.showLineChart = true;
-      this.lineChartLabel = this.chartSelectModel;
-      switch (this.chartSelectModel) {
-        case this.labelPoints:
-          this.lineChartData = this.tmpPointData;
-          break;
-        case this.labelBudget:
-          this.initBudgetData();
-          this.lineChartData = this.tmpBudgetData;
-          break;
-        case this.labelKill:
-          this.initKillData();
-          this.lineChartData = this.tmpKillData;
-          break;
-        case this.labelFriendlyFire:
-          this.initKillData();
-          this.lineChartData = this.tmpFrienlyFireData;
-          break;
-        case this.labelRevive:
-          this.initRevive();
-          this.lineChartData = this.tmpReviveData;
-          break;
-        case this.labelStabilize:
-          this.initRevive();
-          this.lineChartData = this.tmpStabilizeData;
-          break;
-        case this.labelTransport:
-          this.initTransportData();
-          this.lineChartData = this.tmpTransportData;
-          break;
-      }
-    } else {
-      this.initFlagHoldData();
-      this.showLineChart = false;
-      this.areaChartData = this.tmpFlagCaptureData;
-    }
-  }
-
-  selectPlayerDetail(player) {
-    if (player && player.selected && player.selected.length > 0) {
-      this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + player.selected[0].name],
-        {relativeTo: this.route});
-    }
-  }
-
-  scrollOverviewTop() {
-    try {
-      this.overviewContainer.nativeElement.scrollTop = 0;
-    } catch (err) {
-    }
-  }
-
-  loadFractionData() {
-    if (this.initialized.basic) {
-      return;
-    }
-
-    this.initializeTempCollections();
-
-    this.logsService.getFullLog(this.war._id).subscribe((data) => {
-      this.logData = data;
-      this.initPointData();
-      this.showLineChart = true;
-      this.lineChartLabel = this.labelPoints;
-      this.lineChartData = this.tmpPointData;
-      this.initialized.basic = true;
-    });
-  }
-
-  initPointData() {
-    this.logData.points.forEach(pointEntry => {
-      this.tmpPointData[0].series.push(ChartUtils.getSeriesEntry(new Date(pointEntry.time), pointEntry.ptBlufor));
-      this.tmpPointData[1].series.push(ChartUtils.getSeriesEntry(new Date(pointEntry.time), pointEntry.ptOpfor));
-    });
-    this.addFinalTimeData(this.tmpPointData);
-  }
-
-  initBudgetData() {
-    if (this.initialized.budget) {
-      return;
-    }
-    this.logData.budget.forEach(budgetEntry => {
-      const budgetEntryDate = new Date(budgetEntry.time);
-      const fractionChange = budgetEntry.fraction === 'BLUFOR' ? 0 : 1;
-      const fractionOld = budgetEntry.fraction !== 'BLUFOR' ? 0 : 1;
-
-      if (WarDetailComponent.isTwoMinutesAhead(budgetEntryDate, this.tmpBudgetData)) {
-        this.tmpBudgetData[fractionChange].series.push(ChartUtils.getSeriesEntry(new Date(budgetEntry.time), budgetEntry.newBudget));
-        this.tmpBudgetData[fractionOld].series.push(ChartUtils.getSeriesEntry(new Date(budgetEntry.time),
-          this.tmpBudgetData[fractionOld].series[this.tmpBudgetData[fractionOld].series.length - 1].value));
-      }
-    });
-    this.addFinalTimeData(this.tmpBudgetData);
-    this.initialized.budget = true;
-  }
-
-  initKillData() {
-    if (this.initialized.kill) {
-      return;
-    }
-    let killCountBlufor = 0, killCountOpfor = 0, ffKillCountBlufor = 0, ffKillCountOpfor = 0;
-
-    for (const {killEntry, index} of this.logData.kill.map((killEntry, index) => ({killEntry, index}))) {
-      const killEntryDate = new Date(killEntry.time);
-      if (killEntry.friendlyFire === false) {
-        if (killEntry.fraction === 'BLUFOR') {
-          killCountBlufor++;
-        }
-        if (killEntry.fraction === 'OPFOR') {
-          killCountOpfor++;
-        }
-        if (WarDetailComponent.isTwoMinutesAhead(killEntryDate, this.tmpKillData)) {
-          this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
-          this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
-        }
-      } else {
-        if (killEntry.fraction === 'BLUFOR') {
-          ffKillCountBlufor++;
-        }
-        if (killEntry.fraction === 'OPFOR') {
-          ffKillCountOpfor++;
-        }
-        if (WarDetailComponent.isTwoMinutesAhead(killEntryDate, this.tmpFrienlyFireData)) {
-          this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
-          this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
-        }
-      }
-      if (index === this.logData.kill.length - 1) {
-        this.tmpKillData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountBlufor));
-        this.tmpKillData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, killCountOpfor));
-        this.tmpFrienlyFireData[0].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountBlufor));
-        this.tmpFrienlyFireData[1].series.push(ChartUtils.getSeriesEntry(killEntryDate, ffKillCountOpfor));
-      }
-    }
-
-    this.addFinalTimeData(this.tmpKillData);
-    this.addFinalTimeData(this.tmpFrienlyFireData)
-    this.initialized.kill = true;
-  }
-
-  initRevive() {
-    if (this.initialized.revive) {
-      return;
-    }
-    let reviveCountBlufor = 0, reviveCountOpfor = 0, stabilizeCountBlufor = 0, stabilizeCountOpfor = 0;
-    for (const {reviveEntry, index} of this.logData.revive.map((reviveEntry, index) => ({reviveEntry, index}))) {
-      const reviveEntryDate = new Date(reviveEntry.time);
-      if (reviveEntry.stabilized === false) {
-        if (reviveEntry.fraction === 'BLUFOR') {
-          reviveCountBlufor++;
-        } else {
-          reviveCountOpfor++;
-        }
-        if (WarDetailComponent.isTwoMinutesAhead(reviveEntryDate, this.tmpReviveData)) {
-          this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
-          this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
-        }
-      } else {
-        if (reviveEntry.fraction === 'BLUFOR') {
-          stabilizeCountBlufor++;
-        } else {
-          stabilizeCountOpfor++;
-        }
-        if (WarDetailComponent.isTwoMinutesAhead(reviveEntryDate, this.tmpStabilizeData)) {
-          this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
-          this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
-        }
-      }
-      if (index === this.logData.revive.length - 1) {
-        this.tmpReviveData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountBlufor));
-        this.tmpReviveData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, reviveCountOpfor));
-        this.tmpStabilizeData[0].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountBlufor));
-        this.tmpStabilizeData[1].series.push(ChartUtils.getSeriesEntry(reviveEntryDate, stabilizeCountOpfor));
-      }
-    }
-    this.addFinalTimeData(this.tmpReviveData);
-    this.addFinalTimeData(this.tmpStabilizeData);
-    this.initialized.revive = true;
-  }
-
-  initTransportData() {
-    if (this.initialized.transport) {
-      return;
-    }
-    let transportCountBlufor = 0, transportCountOpfor = 0;
-    for (const {transportEntry, index} of this.logData.transport.map((transportEntry, index) => ({
-      transportEntry,
-      index
-    }))) {
-      const transportEntryDate = new Date(transportEntry.time);
-      if (transportEntry.fraction === 'BLUFOR') {
-        transportCountBlufor++;
-      } else {
-        transportCountOpfor++;
-      }
-      if (WarDetailComponent.isTwoMinutesAhead(transportEntryDate, this.tmpTransportData) || index === this.logData.transport.length - 1) {
-        this.tmpTransportData[0].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountBlufor));
-        this.tmpTransportData[1].series.push(ChartUtils.getSeriesEntry(transportEntryDate, transportCountOpfor));
-      }
-    }
-    this.addFinalTimeData(this.tmpTransportData);
-    this.initialized.transport = true;
-
-  }
-
-  initFlagHoldData() {
-    if (this.initialized.flag) {
-      return;
-    }
-    let flagStatusBlufor = true;
-    let flagStatusOpfor = true;
-    this.tmpFlagCaptureData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusBlufor));
-    this.tmpFlagCaptureData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, flagStatusOpfor));
-
-    this.logData.flag.forEach(flagEntry => {
-      if (flagEntry.flagFraction === 'BLUFOR') {
-        flagStatusBlufor = !flagEntry.capture;
-      } else {
-        flagStatusOpfor = !flagEntry.capture;
-      }
-      this.tmpFlagCaptureData[flagEntry.flagFraction === 'BLUFOR' ? 0 : 1].series.push(
-        ChartUtils.getSeriesEntry(new Date(flagEntry.time), flagEntry.flagFraction === 'BLUFOR' ? flagStatusBlufor : flagStatusOpfor)
-      )
-    });
-
-    this.addFinalTimeData(this.tmpFlagCaptureData);
-    this.initialized.flag = true;
-  }
-
-  private static isTwoMinutesAhead(entryDate: Date, tmpData: any): boolean {
-    return entryDate.getTime() >= tmpData[0].series[tmpData[0].series.length - 1].name.getTime() + (1.5 * 60000)
-  }
-
-  initializeTempCollections() {
-    this.tmpPointData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpBudgetData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpKillData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpFrienlyFireData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpTransportData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpReviveData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpStabilizeData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-    this.tmpFlagCaptureData = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
-
-    [this.tmpKillData, this.tmpFrienlyFireData, this.tmpReviveData, this.tmpStabilizeData, this.tmpTransportData].forEach(tmp => {
-      [0, 1].forEach(index => {
-        tmp[index].series.push(ChartUtils.getSeriesEntry(this.startDateObj, 0));
-      })
-    });
-    this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetBlufor));
-    this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(this.startDateObj, this.war.budgetOpfor));
-  }
-
-  addFinalTimeData(tmpCollection) {
-    const endDate = new Date(this.war.endDate);
-    if (tmpCollection === this.tmpBudgetData) {
-      this.tmpBudgetData[0].series.push(ChartUtils.getSeriesEntry(endDate, this.war.endBudgetBlufor));
-      this.tmpBudgetData[1].series.push(ChartUtils.getSeriesEntry(endDate, this.war.endBudgetOpfor));
-    } else {
-      for (let j in [0, 1]) {
-        if (tmpCollection[j].series[tmpCollection[j].series.length - 1].name < endDate) {
-          tmpCollection[j].series.push(ChartUtils.getSeriesEntry(endDate, tmpCollection[j].series[tmpCollection[j].series.length - 1].value));
-        }
-      }
-    }
   }
 
 }

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

@@ -82,7 +82,6 @@ export class WarListComponent implements OnInit {
     if (confirm('Soll die Kampagne ' + campaign.title + ' wirklich gelöscht werden?')) {
       this.campaignService.deleteCampaign(campaign._id)
         .subscribe((res) => {
-          console.log(res)
           if (this.selectedWarId === campaign._id) {
             this.selectOverview('all');
           }

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