Use fraction Enum for war detail

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

@@ -34,14 +34,6 @@
   font-weight: bold;
 }
 
-.text-opfor {
-  color: firebrick;
-}
-
-.text-blufor {
-  color: blue;
-}
-
 /* ########### TABS ########### */
 
 :host /deep/ .nav-tabs {

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

@@ -5,16 +5,16 @@
       <h2>{{war.title}} - vom {{war.date | date: 'dd.MM.yyyy'}}</h2>
       <div class="pull-left head-field" style="width: 250px">
         <h4>Endpunktestand:</h4>
-        <span class="text-blufor" style="font-weight: bold; margin-right: 10px">{{BLUFOR}} {{war.ptBlufor}}</span>
+        <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 class="text-opfor" style="font-weight: bold; margin-left: 10px;">{{war.ptOpfor}} {{OPFOR}}</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: ['#B22222', '#0000FF']}"
+          [scheme]="{domain: [fraction.COLOR_OPFOR, fraction.COLOR_BLUFOR]}"
           [results]="playerChart"
           [legend]="false"
           [explodeSlices]="false"
@@ -40,13 +40,13 @@
             <input type="radio" name="fractSelect" value="BLUFOR"
                    [(ngModel)]="fractionRadioSelect"
                    #fractRadioBufor
-                   (change)="filterPlayersByFraction(fractRadioBufor.value)">{{BLUFOR}}
+                   (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)">{{OPFOR}}
+                   (change)="filterPlayersByFraction(fractRadioOpfor.value)">{{fraction.OPFOR}}
           </label>
           <br>
         </form>
@@ -73,14 +73,14 @@
         <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"
-              [ngClass]="row['fraction'] === 'BLUFOR' ? 'text-blufor' : 'text-opfor'">
+              [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' ? BLUFOR : OPFOR}}
+            {{value === 'BLUFOR' ? fraction.BLUFOR : fraction.OPFOR}}
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column [width]="90" name="Kills" prop="kill"></ngx-datatable-column>
@@ -98,35 +98,37 @@
       </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>-->
+      <!--<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="{{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>
+        <label class="btn btn-default btn-dark" [(ngModel)]="chartSelectModel"
+               btnRadio="{{labelFlag}}">{{labelFlag}}</label>
       </div>
 
       <div *ngIf="showLineChart" class="chart-container">

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

@@ -17,9 +17,7 @@ import {Fraction} from "../../utils/fraction.enum";
 })
 export class WarDetailComponent {
 
-  BLUFOR: string = Fraction.BLUFOR;
-
-  OPFOR: string = Fraction.OPFOR;
+  readonly fraction = Fraction;
 
   @ViewChild('overview') private overviewContainer: ElementRef;
 
@@ -103,7 +101,7 @@ export class WarDetailComponent {
       .subscribe(war => {
         this.war = war;
         this.rows = war.players;
-        this.playerChart = ChartUtils.getSingleDataArray(this.OPFOR, war.playersOpfor, this.BLUFOR, war.playersBlufor);
+        this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
 
         this.initialized = {
           basic: false,