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>
@@ -119,14 +119,16 @@
       <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;
+  readonly fraction = Fraction;
-
-  OPFOR: string = Fraction.OPFOR;
 
   @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,