Use fraction enum in ranks module

static/src/app/ranks/edit-rank/edit-rank.component.html

@@ -18,8 +18,8 @@
     <select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="rank.fraction">
-      <option value="OPFOR">CSAT</option>
+      <option value="OPFOR">{{fraction.OPFOR}}</option>
-      <option value="BLUFOR">NATO</option>
+      <option value="BLUFOR">{{fraction.BLUFOR}}</option>
     </select>
     <show-error text="Fraktion" path="fraction"></show-error>
   </div>

static/src/app/ranks/edit-rank/edit-rank.component.ts

@@ -4,6 +4,7 @@ import {NgForm} from "@angular/forms";
 import {Rank} from "../../models/model-interfaces";
 import {RankService} from "../../services/army-management/rank.service";
 import {Subscription} from "rxjs/Subscription";
+import {Fraction} from "../../utils/fraction.enum";
 
 
 @Component({
@@ -28,6 +29,8 @@ export class EditRankComponent {
 
   @ViewChild(NgForm) form: NgForm;
 
+  readonly fraction = Fraction;
+
   constructor(private route: ActivatedRoute,
               private router: Router,
               private rankService: RankService) {

static/src/app/ranks/rank-list/rank-item.component.html

@@ -6,8 +6,8 @@
         <a>{{rank.name}}</a>
       </span>
       <br>
-      <small *ngIf="rank.fraction == 'OPFOR'">CSAT</small>
+      <small *ngIf="rank.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
-      <small *ngIf="rank.fraction == 'BLUFOR'">NATO</small>
+      <small *ngIf="rank.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
       <small> - Stufe {{rank.level}}</small>
     </div>
 

static/src/app/ranks/rank-list/rank-item.component.ts

@@ -1,6 +1,6 @@
 import {ChangeDetectionStrategy, Component, EventEmitter} from "@angular/core";
-import {Router} from "@angular/router";
 import {Rank} from "../../models/model-interfaces";
+import {Fraction} from "../../utils/fraction.enum";
 
 @Component({
   selector: 'pjm-rank-item',
@@ -19,8 +19,9 @@ export class RankItemComponent {
   rankSelected = new EventEmitter();
   rankDelete = new EventEmitter();
 
-  constructor(private router: Router) {
+  readonly fraction = Fraction;
 
+  constructor() {
   }
 
   ngOnInit() {

static/src/app/ranks/rank-list/rank-list.component.html

@@ -1,8 +1,8 @@
 <div class="select-list">
   <div class="input-group list-header">
     <div class="btn-group" (click)="filterRanks()">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>NATO</label>
+      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="BLUFOR" uncheckable>{{fraction.BLUFOR}}</label>
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>CSAT</label>
+      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="OPFOR" uncheckable>{{fraction.OPFOR}}</label>
     </div>
     <a class="pull-right btn btn-success" (click)="openNewRankForm()">+</a>
   </div>

static/src/app/ranks/rank-list/rank-list.component.ts

@@ -6,6 +6,7 @@ import {ActivatedRoute, Router} from "@angular/router";
 import {Observable} from "rxjs/Observable";
 import {Rank} from "../../models/model-interfaces";
 import {RankService} from "../../services/army-management/rank.service";
+import {Fraction} from "../../utils/fraction.enum";
 
 @Component({
   selector: 'rank-list',
@@ -22,6 +23,8 @@ export class RankListComponent implements OnInit {
 
   public radioModel: string;
 
+  readonly fraction = Fraction;
+
   constructor(private rankService: RankService,
               private router: Router,
               private route: ActivatedRoute,
@@ -62,7 +65,7 @@ export class RankListComponent implements OnInit {
   }
 
   deleteRank(rank) {
-    const fraction = rank.fraction === 'OPFOR' ? 'CSAT' : 'NATO';
+    const fraction = rank.fraction === 'OPFOR' ? Fraction.OPFOR : Fraction.BLUFOR;
     if (confirm('Soll der Rang ' + rank.name + ' (' + fraction + ') wirklich gelöscht werden?')) {
       this.rankService.deleteRank(rank)
         .subscribe((res) => {