Use fraction Enum in army component

static/src/app/army/army-member.component.css

@@ -27,16 +27,6 @@
   overflow-x: auto;
 }
 
-.opfor {
-  color: firebrick;
-  font-weight: 600;
-}
-
-.blufor {
-  color: blue;
-  font-weight: 600;
-}
-
 .table-head {
   background: #222222;
   color: white;

static/src/app/army/army-member.component.html

@@ -2,7 +2,7 @@
   <div class="army-member-view-container">
     <div class="return-button">
       <span class="btn btn-default" style="position:absolute;" (click)="backToOverview()">< zurück zur Übersicht</span>
-      <h3 class="text-center" [ngClass]="user.squadId?.fraction === 'BLUFOR' ? 'blufor' : 'opfor'">
+      <h3 class="text-center" style="font-weight: 600" [style.color]="user.squadId?.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
         Auszeichnungen von {{user.username}}
       </h3>
     </div>

static/src/app/army/army-member.component.ts

@@ -5,6 +5,7 @@ import {UserService} from "../services/army-management/user.service";
 import {Subscription} from "rxjs/Subscription";
 import {RouteConfig} from "../app.config";
 import {AwardingService} from "../services/army-management/awarding.service";
+import {Fraction} from "../utils/fraction.enum";
 
 
 @Component({
@@ -24,6 +25,8 @@ export class ArmyMemberComponent {
 
   isCopied = false;
 
+  readonly fraction = Fraction;
+
   constructor(private router: Router,
               private route: ActivatedRoute,
               private userService: UserService,

static/src/app/army/army.component.css

@@ -58,14 +58,6 @@ img {
   text-decoration: underline;
 }
 
-.text-opfor {
-  color: firebrick;
-}
-
-.text-blufor {
-  color: blue;
-}
-
 .army-head {
   font-weight: bolder;
   text-align: center

static/src/app/army/army.component.html

@@ -2,7 +2,7 @@
   <h1>Übersicht über alle Spieler, Squads und Armeen</h1>
 
   <div class="pull-left" style="width: 45%;">
-    <h3 class="text-blufor army-head">{{BLUFOR}}</h3>
+    <h3 class="army-head" [style.color]="fraction.COLOR_BLUFOR">{{fraction.BLUFOR}}</h3>
     <div class="squad-layout" *ngFor="let squad of army.BLUFOR.squads">
       <div class="row colored-row title-row">
         <div class="squad-cell pull-left"><img
@@ -11,8 +11,8 @@
       </div>
       <div class="row middle-row">
         <div class="squad-cell name-cell">
-        <span class="text-blufor"
-              style="display: block"
+        <span style="display: block"
+              [style.color]="fraction.COLOR_BLUFOR"
               *ngFor="let member of squad.members">
           <span class="member-link"
                 (click)="select(member._id)">
@@ -31,7 +31,7 @@
   </div>
 
   <div class="pull-right" style="width: 45%;">
-    <h3 class="text-opfor army-head">{{OPFOR}}</h3>
+    <h3 class="army-head" [style.color]="fraction.COLOR_OPFOR">{{fraction.OPFOR}}</h3>
     <div class="squad-layout" *ngFor="let squad of army.OPFOR.squads">
       <div class="row colored-row title-row">
         <div class="squad-cell pull-left"><img
@@ -40,8 +40,8 @@
       </div>
       <div class="row middle-row">
         <div class="squad-cell name-cell">
-        <span class="text-opfor"
-              style="display: block"
+        <span style="display: block"
+              [style.color]="fraction.COLOR_OPFOR"
               *ngFor="let member of squad.members">
           <span class="member-link"
                 (click)="select(member._id)">

static/src/app/army/army.component.ts

@@ -14,9 +14,7 @@ export class ArmyComponent {
 
   army: Army = {BLUFOR: {squads: [], memberCount: 0}, OPFOR: {squads: [], memberCount: 0}};
 
-  BLUFOR: string = Fraction.BLUFOR;
-
-  OPFOR: string = Fraction.OPFOR;
+  readonly fraction = Fraction;
 
   constructor(private router: Router,
               private route: ActivatedRoute,