Add player tab btn

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

@@ -1,5 +1,5 @@
 <div class="overview fade-in" style="padding: 70px 1% 0 1%;" 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>

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,15 +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 {WarDetailHeaderComponent} from "./war-detail-header/war-detail-header.component";
+import {WarDetailComponent} from "./war-detail/war-detail.component";
-import {WarDetailFractionComponent} from "./war-detail-fraction/war-detail-fraction.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 = [{
@@ -38,7 +38,7 @@ export const statsRoutes: Routes = [{
   },
   {
     path: 'war/:id',
-    component: WarDetailHeaderComponent,
+    component: WarDetailComponent,
     outlet: 'right'
   },
   {
@@ -50,6 +50,6 @@ export const statsRoutes: Routes = [{
 export const statsRouterModule: ModuleWithProviders = RouterModule.forChild(statsRoutes);
 
 export const statsRoutingComponents = [StatisticComponent, StatisticOverviewComponent, CampaignSubmitComponent,
-  WarListComponent, WarSubmitComponent, WarDetailHeaderComponent, WarDetailComponent, WarDetailFractionComponent,
+  WarListComponent, WarSubmitComponent, WarDetailComponent, ScoreboardComponent, FractionStatsComponent,
   CampaignPlayerDetailComponent, WarItemComponent];
 

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

@@ -1,33 +0,0 @@
-.war-header-container {
-  width: 920px;
-  min-height: 205px;
-  margin: auto;
-}
-
-.head-field {
-  font-size: 24px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-.war-header {
-  border-bottom: thin solid lightgrey;
-}
-
-.nav-tabs > li.active > a {
-  background: #222222;
-}
-
-.nav-tabs > li > a {
-  background: #4b4b4b;
-}
-
-.nav-tabs > li:not(.active) > a:hover {
-  background: #afafaf;
-  color: #f5f5f5;
-}
-
-.nav-link {
-  cursor: pointer !important;
-  color: #FFF !important;
-}

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

@@ -1,73 +0,0 @@
-<div *ngIf="war" class="war-header fade-in" xmlns="http://www.w3.org/1999/html">
-  <div class="war-header-container">
-    <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
-    <div class="pull-left head-field" style="width: 250px">
-      <h4>Endpunktestand:</h4>
-      <span [style.color]="fraction.COLOR_BLUFOR" style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
-      <span style="font-size: x-large">|</span>
-      <span [style.color]="fraction.COLOR_OPFOR" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
-    </div>
-
-    <div class="pull-left head-field " style="padding-left: 140px;">
-      <h4 style="margin-bottom: 0;">Teilnehmer:</h4>
-      <ngx-charts-pie-chart
-        [view]="[120, 120]"
-        [scheme]="colorScheme"
-        [results]="playerChart"
-        [legend]="false"
-        [explodeSlices]="false"
-        [labels]="false"
-        [doughnut]="false"
-        [gradient]="false">
-      </ngx-charts-pie-chart>
-    </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>
-      <form class="form-group">
-        <label class="radio-inline">
-          <input type="radio" name="fractSelect"
-                 [checked]="(fractionFilterSelected == undefined) ? 'true' : 'false'"
-                 [(ngModel)]="fractionFilterSelected"
-                 (change)="filterPlayersByFraction()">Alle
-        </label>
-        <label class="radio-inline">
-          <input type="radio" name="fractSelect" value="BLUFOR"
-                 [(ngModel)]="fractionFilterSelected"
-                 #fractRadioBufor
-                 (change)="filterPlayersByFraction(fractRadioBufor.value)">{{fraction.BLUFOR}}
-        </label>
-        <label class="radio-inline">
-          <input type="radio" name="fractSelect" value="OPFOR"
-                 [(ngModel)]="fractionFilterSelected"
-                 #fractRadioOpfor
-                 (change)="filterPlayersByFraction(fractRadioOpfor.value)">{{fraction.OPFOR}}
-        </label>
-        <br>
-      </form>
-    </div>
-  </div>
-
-  <ul class="nav nav-tabs" style="width:980px; margin:auto">
-    <li class="nav-item" [ngClass]="{active :tab === 0}" (click)="tab = 0">
-      <a class="nav-link"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a>
-    </li>
-    <li class="nav-item" [ngClass]="{active :tab === 1}" (click)="tab = 1">
-      <a class="nav-link"><img src="../../../assets/fraction-btn.png"> Fraktionen</a>
-    </li>
-  </ul>
-
-  <div *ngIf="war">
-    <war-detail
-      *ngIf="tab===0"
-      [war]="war"
-      [fractionFilterSelected]="fractionFilterSelected">
-    </war-detail>
-    <war-detail-fraction
-      *ngIf="tab===1"
-      [war]="war">
-    </war-detail-fraction>
-  </div>
-
-</div>

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

@@ -1,52 +0,0 @@
-import {Component} from "@angular/core";
-import {ActivatedRoute} from "@angular/router";
-import {WarService} from "../../services/logs/war.service";
-import {War} from "../../models/model-interfaces";
-import {ChartUtils} from "../../utils/chart-utils";
-import {Fraction} from "../../utils/fraction.enum";
-
-
-@Component({
-  selector: 'war-detail-header',
-  templateUrl: './war-detail-header.component.html',
-  styleUrls: ['./war-detail-header.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
-})
-export class WarDetailHeaderComponent {
-
-  readonly fraction = Fraction;
-
-  war: War;
-
-  tab: number;
-
-  fractionFilterSelected: string;
-
-  playerChart: any[] = [];
-
-  colorScheme = {
-    domain: [Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR]
-  };
-
-  constructor(private route: ActivatedRoute,
-              private warService: WarService) {
-  }
-
-  ngOnInit() {
-    this.route.params
-      .map(params => params['id'])
-      .filter(id => id != undefined)
-      .flatMap(id => this.warService.getWar(id))
-      .subscribe(war => {
-        this.tab = 0;
-        this.war = war;
-        this.fractionFilterSelected = undefined;
-        this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
-        Object.assign(this, [this.playerChart]);
-      })
-  }
-
-  filterPlayersByFraction(fraction?: string) {
-    this.fractionFilterSelected = fraction;
-  }
-
-}

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

@@ -1,18 +1,17 @@
 import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
-import {LogsService} from "../../services/logs/logs.service";
 import * as d3 from "d3";
-import {ChartUtils} from "../../utils/chart-utils";
+import {ChartUtils} from "../../../utils/chart-utils";
-import {Fraction} from "../../utils/fraction.enum";
+import {Fraction} from "../../../utils/fraction.enum";
-import {War} from "../../models/model-interfaces";
+import {War} from "../../../models/model-interfaces";
 
 
 @Component({
   selector: 'war-detail-fraction',
-  templateUrl: './war-detail-fraction.component.html',
+  templateUrl: './fraction-stats.component.html',
-  inputs: ['war'],
+  inputs: ['war', 'logData'],
-  styleUrls: ['./war-detail-fraction.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
+  styleUrls: ['./fraction-stats.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
 })
-export class WarDetailFractionComponent {
+export class FractionStatsComponent {
 
   readonly fraction = Fraction;
 
@@ -67,14 +66,14 @@ export class WarDetailFractionComponent {
   timeline = false;
   roundDomains = true;
 
-  constructor(private logsService: LogsService) {
+  constructor() {
   }
 
   ngOnInit() {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes.war) {
+    if (changes.war || changes.logData) {
       this.initialized = {
         budget: false,
         kill: false,
@@ -134,14 +133,10 @@ export class WarDetailFractionComponent {
 
   loadFractionData() {
     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;
-    });
   }
 
   initPointData() {

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 #overview 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(value)">Gesamt</span>
+      </ng-template>
+    </ngx-datatable-column>
+  </ngx-datatable>
+</div>

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

@@ -0,0 +1,72 @@
+import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
+import {ActivatedRoute, Router} from "@angular/router";
+import {War} from "../../../models/model-interfaces";
+import {Fraction} from "../../../utils/fraction.enum";
+
+@Component({
+  selector: 'scoreboard',
+  templateUrl: './scoreboard.component.html',
+  inputs: ['war', 'fractionFilterSelected'],
+  styleUrls: ['./scoreboard.component.css', '../../../style/list-entry.css', '../../../style/hide-scrollbar.css']
+})
+export class ScoreboardComponent {
+
+  readonly fraction = Fraction;
+
+  @ViewChild('overview') private overviewContainer: ElementRef;
+
+  war: War;
+
+  fractionFilterSelected: string;
+
+  cellHeight = 40;
+
+  rows = [];
+
+  reorderable: boolean = false;
+
+  customClasses = {
+    sortAscending: 'glyphicon glyphicon-triangle-top',
+    sortDescending: 'glyphicon glyphicon-triangle-bottom',
+  };
+
+  constructor(private route: ActivatedRoute,
+              private router: Router) {
+  }
+
+  ngOnInit() {
+  }
+
+  selectPlayerDetail(playerName: string) {
+      this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + playerName],
+        {relativeTo: this.route});
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.war) {
+      this.rows = changes.war.currentValue.players;
+    }
+    if (changes.fractionFilterSelected) {
+      this.filterPlayersByFraction(this.fractionFilterSelected)
+    }
+    this.scrollOverviewTop();
+  }
+
+  scrollOverviewTop() {
+    try {
+      this.overviewContainer.nativeElement.scrollTop = 0;
+    } catch (err) {
+    }
+  }
+
+  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,99 +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;
-}
-
-/* ########### 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 {
+.nav-tabs {
-  padding-left: 8px;
+  border-bottom: 0;
 }
 
-:host /deep/ .ngx-datatable .datatable-header {
+.nav-tabs > li > a {
-  /*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,33 +1,78 @@
-<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">
-  <ngx-datatable
+  <div class="war-header-container">
-    style="width:980px; margin:auto"
+    <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
-    [rows]="rows"
+    <div class="pull-left head-field" style="width: 250px">
-    [sorts]="[{prop: 'kill', dir: 'desc'}]"
+      <h4>Endpunktestand:</h4>
-    [reorderable]="reorderable"
+      <span [style.color]="fraction.COLOR_BLUFOR" style="font-weight: bold; margin-right: 10px">{{fraction.BLUFOR}} {{war.ptBlufor}}</span>
-    [messages]="{emptyMessage: 'Loading...'}"
+      <span style="font-size: x-large">|</span>
-    [headerHeight]="cellHeight"
+      <span [style.color]="fraction.COLOR_OPFOR" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{fraction.OPFOR}}</span>
-    [rowHeight]="cellHeight"
+    </div>
-    [cssClasses]='customClasses'
+
-    [selectionType]="'single'"
+    <div class="pull-left head-field " style="padding-left: 140px;">
-    (select)="selectPlayerDetail($event)">
+      <h4 style="margin-bottom: 0;">Teilnehmer:</h4>
-    <ngx-datatable-column name="Spieler" prop="name" [width]="210" style="padding-left:10px">
+      <ngx-charts-pie-chart
-      <ng-template ngx-datatable-cell-template let-row="row" let-value="value">
+        [view]="[120, 120]"
-        <span class="player-name"
+        [scheme]="colorScheme"
-              [style.color]="row['fraction'] === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
+        [results]="playerChart"
-          {{value}}
+        [legend]="false"
-        </span>
+        [explodeSlices]="false"
-      </ng-template>
+        [labels]="false"
-    </ngx-datatable-column>
+        [doughnut]="false"
-    <ngx-datatable-column name="Fraktion" prop="fraction" [width]="100">
+        [gradient]="false">
-      <ng-template ngx-datatable-cell-template let-value="value">
+      </ngx-charts-pie-chart>
-        {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
+    </div>
-      </ng-template>
+
-    </ngx-datatable-column>
+    <div class="pull-left " style="padding-left: 150px; padding-top:15px">
-    <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
+      <a class="btn btn-default" style="margin: 20px" target="_blank" href="resource/logs/{{war._id}}/clean.log">Logfile
-    <ngx-datatable-column [width]="110" name="FriendlyFire" prop="friendlyFire"></ngx-datatable-column>
+        anzeigen</a>
-    <ngx-datatable-column [width]="100" name="Revive" prop="revive"></ngx-datatable-column>
+      <form class="form-group" *ngIf="tab === 0">
-    <ngx-datatable-column [width]="100" name="Eroberung" prop="flagTouch"></ngx-datatable-column>
+        <label class="radio-inline">
-    <ngx-datatable-column [width]="100" name="Tod" prop="death"></ngx-datatable-column>
+          <input type="radio" name="fractSelect"
-    <ngx-datatable-column [width]="100" name="Respawn" prop="respawn"></ngx-datatable-column>
+                 [checked]="(fractionFilterSelected == undefined) ? 'true' : 'false'"
-  </ngx-datatable>
+                 [(ngModel)]="fractionFilterSelected"
+                 (change)="filterPlayersByFraction()">Alle
+        </label>
+        <label class="radio-inline">
+          <input type="radio" name="fractSelect" value="BLUFOR"
+                 [(ngModel)]="fractionFilterSelected"
+                 #fractRadioBufor
+                 (change)="filterPlayersByFraction(fractRadioBufor.value)">{{fraction.BLUFOR}}
+        </label>
+        <label class="radio-inline">
+          <input type="radio" name="fractSelect" value="OPFOR"
+                 [(ngModel)]="fractionFilterSelected"
+                 #fractRadioOpfor
+                 (change)="filterPlayersByFraction(fractRadioOpfor.value)">{{fraction.OPFOR}}
+        </label>
+        <br>
+      </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">
+    </scoreboard>
+    <war-detail-fraction
+      *ngIf="tab === 1 && logData"
+      [war]="war"
+      [logData]="logData">
+    </war-detail-fraction>
+  </div>
+
 </div>

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

@@ -1,75 +1,71 @@
-import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
+import {Component} from "@angular/core";
-import {ActivatedRoute, Router} from "@angular/router";
+import {ActivatedRoute} from "@angular/router";
+import {WarService} from "../../services/logs/war.service";
 import {War} from "../../models/model-interfaces";
+import {ChartUtils} from "../../utils/chart-utils";
 import {Fraction} from "../../utils/fraction.enum";
+import {LogsService} from "../../services/logs/logs.service";
 
 
 @Component({
   selector: 'war-detail',
   templateUrl: './war-detail.component.html',
-  inputs: ['war', 'fractionFilterSelected'],
   styleUrls: ['./war-detail.component.css', '../../style/list-entry.css', '../../style/hide-scrollbar.css']
 })
 export class WarDetailComponent {
 
   readonly fraction = Fraction;
 
-  @ViewChild('overview') private overviewContainer: ElementRef;
-
   war: War;
 
+  logData;
+
+  tab: number;
+
+  fractionStatsInitialized: boolean;
+
   fractionFilterSelected: string;
 
-  cellHeight = 40;
+  playerChart: any[] = [];
 
-  rows = [];
+  colorScheme = {
-
+    domain: [Fraction.COLOR_OPFOR, Fraction.COLOR_BLUFOR]
-  reorderable: boolean = false;
-
-  customClasses = {
-    sortAscending: 'glyphicon glyphicon-triangle-top',
-    sortDescending: 'glyphicon glyphicon-triangle-bottom',
   };
 
   constructor(private route: ActivatedRoute,
-              private router: Router) {
+              private warService: WarService,
+              private logsService: LogsService) {
   }
 
   ngOnInit() {
+    this.route.params
+      .map(params => params['id'])
+      .filter(id => id != undefined)
+      .flatMap(id => this.warService.getWar(id))
+      .subscribe(war => {
+        this.war = war;
+
+        this.tab = 0;
+        this.fractionStatsInitialized = false;
+        this.fractionFilterSelected = undefined;
+
+        this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
+        Object.assign(this, [this.playerChart]);
+      })
   }
 
-  selectPlayerDetail(player) {
+  switchTab(index: number) {
-    if (player && player.selected && player.selected.length > 0) {
+    this.tab = index;
-      this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + player.selected[0].name],
+    if (index === 1 && !this.fractionStatsInitialized) {
-        {relativeTo: this.route});
+      this.logsService.getFullLog(this.war._id).subscribe(log => {
-    }
+        this.logData = log;
-  }
+        this.fractionStatsInitialized = true;
-
+      });
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes.war) {
-      this.rows = changes.war.currentValue.players;
-    }
-    if (changes.fractionFilterSelected) {
-      this.filterPlayersByFraction(this.fractionFilterSelected)
-    }
-    this.scrollOverviewTop();
-  }
-
-  scrollOverviewTop() {
-    try {
-      this.overviewContainer.nativeElement.scrollTop = 0;
-    } catch (err) {
     }
   }
 
   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;
-    }
   }
 
 }