Mudulize war detail view

.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/app.routing.ts

@@ -58,14 +58,14 @@ export const appRoutes: Routes = [
   },
 
   /** Redirect Configuration **/
-  {
+  // {
-    path: '404',
+  //   path: '404',
-    component: NotFoundComponent
+  //   component: NotFoundComponent
-  },
+  // },
-  {
+  // {
-    path: '**',
+  //   path: '**',
-    redirectTo: '/404'
+  //   redirectTo: '/404'
-  } // always configure this last - first matching route gets processed
+  // } // always configure this last - first matching route gets processed
 ];
 
 export const appRouting = RouterModule.forRoot(appRoutes);

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

@@ -8,6 +8,7 @@ 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";
 
 
 export const statsRoutes: Routes = [{
@@ -36,7 +37,7 @@ export const statsRoutes: Routes = [{
   },
   {
     path: 'war/:id',
-    component: WarDetailComponent,
+    component: WarDetailHeaderComponent,
     outlet: 'right'
   },
   {
@@ -48,5 +49,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, WarDetailHeaderComponent, WarDetailComponent, CampaignPlayerDetailComponent,
+  WarItemComponent];
 

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

@@ -0,0 +1,15 @@
+.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;
+}

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

@@ -0,0 +1,66 @@
+<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 active">
+      <a class="nav-link active"><img src="../../../assets/scoreboard-btn.png"> Scoreboard</a>
+    </li>
+    <li class="nav-item">
+      <a class="nav-link"><img src="../../../assets/fraction-btn.png"> Fraktionen</a>
+    </li>
+  </ul>
+
+  <war-detail *ngIf="war"
+              [war]="war"
+              [fractionFilterSelected]="fractionFilterSelected">
+  </war-detail>
+
+</div>

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

@@ -0,0 +1,49 @@
+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;
+
+  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.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/war-detail.component.css

@@ -34,27 +34,6 @@
   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 ########### */
 
 :host /deep/ .datatable-header {

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

@@ -1,63 +1,7 @@
 <div #overview class="overview fade-in" xmlns="http://www.w3.org/1999/html">
-  <div class=vertical-spacer></div>
-  <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>
-        <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]="{domain: [fraction.COLOR_OPFOR, fraction.COLOR_BLUFOR]}"
-          [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 *ngIf="staticTabs.tabs[0].active" class="form-group">
-          <label class="radio-inline">
-            <input type="radio" name="fractSelect"
-                   [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
-                   [(ngModel)]="fractionRadioSelect"
-                   (change)="filterPlayersByFraction()">Alle
-          </label>
-          <label class="radio-inline">
-            <input type="radio" name="fractSelect" value="BLUFOR"
-                   [(ngModel)]="fractionRadioSelect"
-                   #fractRadioBufor
-                   (change)="filterPlayersByFraction(fractRadioBufor.value)">{{fraction.BLUFOR}}
-          </label>
-          <label class="radio-inline">
-            <input type="radio" name="fractSelect" value="OPFOR"
-                   [(ngModel)]="fractionRadioSelect"
-                   #fractRadioOpfor
-                   (change)="filterPlayersByFraction(fractRadioOpfor.value)">{{fraction.OPFOR}}
-          </label>
-          <br>
-        </form>
-      </div>
-    </div>
-  </div>
-
-  <tabset #staticTabs>
-    <tab>
-      <ng-template tabHeading>
-        <img src="../../../assets/scoreboard-btn.png"> Scoreboard
-      </ng-template>
-      <div class=vertical-spacer></div>
       <ngx-datatable
+        style="width:980px; margin:auto"
         [rows]="rows"
         [sorts]="[{prop: 'kill', dir: 'desc'}]"
         [reorderable]="reorderable"
@@ -87,89 +31,56 @@
         <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()">
+      <!--<div class="chart-select-group btn-group" (click)="selectChart()">-->
-      <ng-template tabHeading>
+        <!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>-->
-        <img src="../../../assets/fraction-btn.png"> Fraktionen
+        <!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>-->
-      </ng-template>
+        <!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"-->
-
+               <!--btnRadio="{{labelKill}}">{{labelKill}}</label>-->
-      <!--<div class="btn-group" style="position: absolute; margin-left: 5%;" dropdown>-->
+        <!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>-->
-      <!--<button dropdownToggle type="button" class="btn btn-default dropdown-toggle dropdown-toggle-split">-->
+        <!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>-->
-      <!--{{dataMode}} <span class="caret"></span>-->
+        <!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"-->
-      <!--</button>-->
+               <!--btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>-->
-      <!--<ul *dropdownMenu class="dropdown-menu" role="menu">-->
+        <!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"-->
-      <!--<li role="menuitem"><a class="dropdown-item" (click)="toggleDataMode(0, 'Summe')">Summe</a></li>-->
+               <!--btnRadio="{{labelTransport}}">{{labelTransport}}</label>-->
-      <!--<li class="divider dropdown-divider"></li>-->
+        <!--<label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"-->
-      <!--<li class="disabled" role="menuitem">-->
+               <!--btnRadio="{{labelFlag}}">{{labelFlag}}</label>-->
-      <!--<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()">
+      <!--<div *ngIf="showLineChart" class="chart-container">-->
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelPoints}}">{{labelPoints}}</label>
+        <!--<ngx-charts-line-chart-->
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelBudget}}">{{labelBudget}}</label>
+          <!--[scheme]="colorScheme"-->
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+          <!--[results]="lineChartData"-->
-               btnRadio="{{labelKill}}">{{labelKill}}</label>
+          <!--[gradient]="gradient"-->
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelFriendlyFire}}">{{labelFriendlyFire}}</label>
+          <!--[xAxis]="xAxis"-->
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel" btnRadio="{{labelRevive}}">{{labelRevive}}</label>
+          <!--[yAxis]="yAxis"-->
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+          <!--[legend]="legend"-->
-               btnRadio="{{labelStabilize}}">{{labelStabilize}}</label>
+          <!--[legendTitle]="legendTitle"-->
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+          <!--[showXAxisLabel]="showXAxisLabel"-->
-               btnRadio="{{labelTransport}}">{{labelTransport}}</label>
+          <!--[showYAxisLabel]="showYAxisLabel"-->
-        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+          <!--[yAxisLabel]="lineChartLabel"-->
-               btnRadio="{{labelFlag}}">{{labelFlag}}</label>
+          <!--[autoScale]="autoscale"-->
-      </div>
+          <!--[timeline]="timeline"-->
+          <!--[roundDomains]="roundDomains">-->
+        <!--</ngx-charts-line-chart>-->
+      <!--</div>-->
 
-      <div *ngIf="showLineChart" class="chart-container">
+      <!--<div *ngIf="!showLineChart" class="chart-container">-->
-        <ngx-charts-line-chart
+        <!--<ngx-charts-area-chart-->
-          [scheme]="colorScheme"
+          <!--[scheme]="colorScheme"-->
-          [results]="lineChartData"
+          <!--[results]="areaChartData"-->
-          [gradient]="gradient"
+          <!--[xAxis]="xAxis"-->
-          [xAxis]="xAxis"
+          <!--[yAxis]="yAxis"-->
-          [yAxis]="yAxis"
+          <!--[curve]="stepCurve"-->
-          [legend]="legend"
+          <!--[legend]="legend"-->
-          [legendTitle]="legendTitle"
+          <!--[legendTitle]="legendTitle"-->
-          [showXAxisLabel]="showXAxisLabel"
+          <!--[showXAxisLabel]="showXAxisLabel"-->
-          [showYAxisLabel]="showYAxisLabel"
+          <!--[showYAxisLabel]="showYAxisLabel"-->
-          [yAxisLabel]="lineChartLabel"
+          <!--[yAxisLabel]="labelFlag"-->
-          [autoScale]="autoscale"
+          <!--[autoScale]="autoscale"-->
-          [timeline]="timeline"
+          <!--[timeline]="timeline"-->
-          [roundDomains]="roundDomains">
+          <!--[roundDomains]="false">-->
-        </ngx-charts-line-chart>
+        <!--</ngx-charts-area-chart>-->
-      </div>
+      <!--</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,18 +1,13 @@
-///<reference path="../../utils/chart-utils.ts"/>
+import {Component, ElementRef, SimpleChanges, ViewChild} from "@angular/core";
-import {Component, ElementRef, ViewChild} from "@angular/core";
 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";
 
 
 @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 {
@@ -21,21 +16,9 @@ export class WarDetailComponent {
 
   @ViewChild('overview') private overviewContainer: ElementRef;
 
-  @ViewChild('staticTabs') staticTabs: TabsetComponent;
+  war: War;
 
-  war: War = {players: []};
+  fractionFilterSelected: string;
-
-  logData: any;
-
-  initialized: any;
-
-  startDateObj: Date;
-
-  public chartSelectModel: string;
-
-  fractionRadioSelect: string;
-
-  playerChart: any[] = [];
 
   cellHeight = 40;
 
@@ -48,80 +31,35 @@ export class WarDetailComponent {
     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]
-  };
-
-  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 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.rows = war.players;
-        this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
 
-        this.initialized = {
+  selectPlayerDetail(player) {
-          basic: false,
+    if (player && player.selected && player.selected.length > 0) {
-          budget: false,
+      this.router.navigate(['../../campaign-player/' + this.war.campaign + '/' + player.selected[0].name],
-          kill: false,
+        {relativeTo: this.route});
-          revive: false,
+    }
-          transport: false,
+  }
-          flag: false
-        };
-        Object.assign(this, [this.playerChart, this.lineChartData, this.areaChartData]);
-        this.chartSelectModel = this.labelPoints;
 
-        this.startDateObj = new Date(this.war.date);
+  ngOnChanges(changes: SimpleChanges) {
-        this.startDateObj.setHours(0);
+    if (changes.war) {
-        this.startDateObj.setMinutes(1);
+      this.rows = changes.war.currentValue.players;
-
+    }
-        this.fractionRadioSelect = undefined;
+    if (changes.fractionFilterSelected) {
-        this.staticTabs.tabs[0].active = true;
+      this.filterPlayersByFraction(this.fractionFilterSelected)
+    }
     this.scrollOverviewTop();
-      });
+  }
+
+  scrollOverviewTop() {
+    try {
+      this.overviewContainer.nativeElement.scrollTop = 0;
+    } catch (err) {
+    }
   }
 
   filterPlayersByFraction(fraction?: string) {
@@ -134,272 +72,4 @@ export class WarDetailComponent {
     }
   }
 
-  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/styles.css

@@ -47,3 +47,11 @@ form {
 #right {
   overflow: hidden;
 }
+
+#right-top {
+  overflow: hidden;
+}
+
+#right-bottom {
+  overflow: hidden;
+}