Use fraction enum in users module

api/routes/account.js

@@ -14,10 +14,9 @@ const AppUserModel = require('../models/app-user');
 
 const account = express.Router();
 
-
 account.route('/')
   .get((req, res, next) => {
-    AppUserModel.find({}).populate('squad').exec((err, items) => {
+    AppUserModel.find({}, {}, {sort: {username: 1}}).populate('squad').exec((err, items) => {
       if (err) {
         err.status = codes.servererror;
         return next(err);
@@ -81,10 +80,8 @@ account.route('/:id')
     routerHandling.httpMethodNotAllowed
   );
 
-
 // this middleware function can be used, if you like or remove it
 // it looks for object(s) in res.locals.items and if they exist, they are send to the client as json
 account.use(routerHandling.emptyResponse);
 
-
 module.exports = account;

api/routes/overview.js

@@ -22,10 +22,10 @@ overview.route('/')
     let countOpfor = 0;
     let countBlufor = 0;
     const armyOverview = {
-      NATO: {
+      BLUFOR: {
         squads: []
       },
-      CSAT: {
+      OPFOR: {
         squads: []
       }
     };
@@ -72,12 +72,12 @@ overview.route('/')
             s.memberCount = squadMembers.length;
             if (s.fraction === 'BLUFOR') {
               delete s.fraction;
-              armyOverview.NATO.squads.push(s);
+              armyOverview.BLUFOR.squads.push(s);
               countBlufor += s.members.length;
             }
             if (s.fraction === 'OPFOR') {
               delete s.fraction;
-              armyOverview.CSAT.squads.push(s);
+              armyOverview.OPFOR.squads.push(s);
               countOpfor += s.members.length;
             }
             callback();
@@ -88,8 +88,8 @@ overview.route('/')
         if (err) {
           return next(err);
         }
-        armyOverview.NATO.memberCount = countBlufor;
-        armyOverview.CSAT.memberCount = countOpfor;
+        armyOverview.BLUFOR.memberCount = countBlufor;
+        armyOverview.OPFOR.memberCount = countOpfor;
         res.locals.items = armyOverview;
         res.locals.processed = true;
         next();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "opt-cc",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "license": "MIT",
   "author": "Florian Hartwich <hardi@noarch.de>",
   "private": true,

static/package.json

@@ -26,19 +26,16 @@
     "@swimlane/ngx-charts": "^6.1.0",
     "@swimlane/ngx-datatable": "^10.2.3",
     "bootstrap": "^3.3.7",
-    "core-js": "^2.4.1",
     "d3": "^4.11.0",
     "jquery": "^3.1.0",
     "jquery-ui": "^1.12.0",
     "jquery-ui-bundle": "^1.11.4",
-    "ngx-bootstrap": "^1.9.3",
+    "ngx-bootstrap": "^2.0.0-beta.8",
     "ngx-clipboard": "^8.1.0",
     "ngx-cookie-service": "^1.0.9",
     "ngx-infinite-scroll": "^0.5.2",
-    "rxjs": "^5.2.0",
-    "ts-helpers": "^1.1.1",
-    "typescript": "^2.3.4",
-    "zone.js": "^0.8.18"
+    "ts-helpers": "^1.1.2",
+    "typescript": "^2.6.1"
   },
   "devDependencies": {
     "@types/jasmine": "2.5.38",

static/src/app/admin/admin.component.html

@@ -44,7 +44,7 @@
                     (change)="updateAppUser(user)">
               <option [value]="0">Ohne Fraktion/ Squad</option>
               <option *ngFor="let squad of squads" [ngValue]="squad">
-                {{squad.fraction == 'BLUFOR'? 'NATO' : 'CSAT'}}: {{squad.name}}
+                {{squad.fraction == 'BLUFOR'? fraction.BLUFOR : fraction.OPFOR}}: {{squad.name}}
               </option>
             </select>
           </td>

static/src/app/admin/admin.component.ts

@@ -3,6 +3,7 @@ import {AppUser, Squad} from "../models/model-interfaces";
 import {Observable} from "rxjs/Observable";
 import {AppUserService} from "../services/app-user-service/app-user.service";
 import {SquadService} from "../services/army-management/squad.service";
+import {Fraction} from "../utils/fraction.enum";
 
 
 @Component({
@@ -18,6 +19,8 @@ export class AdminComponent {
 
   showSuccessLabel = false;
 
+  readonly fraction = Fraction;
+
   constructor(private appUserService: AppUserService,
               private squadService: SquadService) {
   }

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,8 +2,8 @@
   <h1>Übersicht über alle Spieler, Squads und Armeen</h1>
 
   <div class="pull-left" style="width: 45%;">
-    <h3 class="text-blufor army-head">NATO</h3>
-    <div class="squad-layout" *ngFor="let squad of army.NATO.squads">
+    <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
           src="resource/squad/{{squad._id}}.png"></div>
@@ -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)">
@@ -27,12 +27,12 @@
         </div>
       </div>
     </div>
-    <div style="padding: 20px; text-align: center;">Armeemitglieder: {{army.NATO.memberCount}}</div>
+    <div style="padding: 20px; text-align: center;">Armeemitglieder: {{army.BLUFOR.memberCount}}</div>
   </div>
 
   <div class="pull-right" style="width: 45%;">
-    <h3 class="text-opfor army-head">CSAT</h3>
-    <div class="squad-layout" *ngFor="let squad of army.CSAT.squads">
+    <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
           src="resource/squad/{{squad._id}}.png"></div>
@@ -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)">
@@ -56,7 +56,7 @@
         </div>
       </div>
     </div>
-    <div style="padding: 20px; text-align: center;">Armeemitglieder: {{army.CSAT.memberCount}}</div>
+    <div style="padding: 20px; text-align: center;">Armeemitglieder: {{army.OPFOR.memberCount}}</div>
   </div>
 
 </div>

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

@@ -2,6 +2,7 @@ import {Component} from "@angular/core";
 import {Army} from "../models/model-interfaces";
 import {ArmyService} from "../services/army-service/army.service";
 import {ActivatedRoute, Router} from "@angular/router";
+import {Fraction} from "../utils/fraction.enum";
 
 
 @Component({
@@ -11,7 +12,9 @@ import {ActivatedRoute, Router} from "@angular/router";
 })
 export class ArmyComponent {
 
-  army: Army = {NATO: {squads: [], memberCount: 0}, CSAT: {squads: [], memberCount: 0}};
+  army: Army = {BLUFOR: {squads: [], memberCount: 0}, OPFOR: {squads: [], memberCount: 0}};
+
+  readonly fraction = Fraction;
 
   constructor(private router: Router,
               private route: ActivatedRoute,

static/src/app/decorations/decoration-list/decoration-item.component.html

@@ -6,8 +6,8 @@
         <a>{{decoration.name}}</a>
       </span>
       <br>
-      <small *ngIf="decoration.fraction == 'OPFOR'">CSAT</small>
-      <small *ngIf="decoration.fraction == 'BLUFOR'">NATO</small>
+      <small *ngIf="decoration.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
+      <small *ngIf="decoration.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
       <small *ngIf="decoration.fraction == 'GLOBAL'">Global</small>
       <small> - Sortierung: {{decoration.sortingNumber}}</small>
     </div>

static/src/app/decorations/decoration-list/decoration-item.component.ts

@@ -1,9 +1,9 @@
 import {ChangeDetectionStrategy, Component, EventEmitter} from "@angular/core";
-import {Router} from "@angular/router";
 import {Decoration} from "../../models/model-interfaces";
+import {Fraction} from "../../utils/fraction.enum";
 
 @Component({
-  selector: 'pjm-decoration-item',
+  selector: 'decoration-item',
   templateUrl: './decoration-item.component.html',
   styleUrls: ['./decoration-item.component.css', '../../style/list-entry.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -20,7 +20,9 @@ export class DecorationItemComponent {
   decorationSelected = new EventEmitter();
   decorationDelete = new EventEmitter();
 
-  constructor(private router: Router) {
+  readonly fraction = Fraction;
+
+  constructor() {
   }
 
   ngOnInit() {

static/src/app/decorations/decoration-list/decoration-list.component.html

@@ -1,9 +1,9 @@
 <div class="select-list">
   <div class="input-group list-header pull-left">
     <div class="btn-group" (click)="filterDecorations()">
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="blufor" uncheckable>NATO</label>
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="opfor" uncheckable>CSAT</label>
-      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="global" uncheckable>Global</label>
+      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="BLUFOR" uncheckable>{{fraction.BLUFOR}}</label>
+      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="OPFOR" uncheckable>{{fraction.OPFOR}}</label>
+      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="GLOBAL" uncheckable>Global</label>
     </div>
     <a class="pull-right btn btn-success" (click)="openNewDecorationForm()">+</a>
   </div>
@@ -22,12 +22,12 @@
   </div>
 
   <div>
-    <pjm-decoration-item *ngFor="let decoration of decorations$ | async"
+    <decoration-item *ngFor="let decoration of decorations$ | async"
                          [decoration]="decoration"
                          (decorationDelete)="deleteDecoration(decoration)"
                          (decorationSelected)="selectDecoration($event)"
                          [selected]="decoration._id == selectedDecorationId">
-    </pjm-decoration-item>
+    </decoration-item>
   </div>
 
 </div>

static/src/app/decorations/decoration-list/decoration-list.component.ts

@@ -6,6 +6,7 @@ import {ActivatedRoute, Router} from "@angular/router";
 import {Observable} from "rxjs/Observable";
 import {Decoration} from "../../models/model-interfaces";
 import {DecorationService} from "../../services/army-management/decoration.service";
+import {Fraction} from "../../utils/fraction.enum";
 
 @Component({
   selector: 'decoration-list',
@@ -22,6 +23,8 @@ export class DecorationListComponent implements OnInit {
 
   public radioModel: string;
 
+  readonly fraction = Fraction;
+
   constructor(private decorationService: DecorationService,
               private router: Router,
               private route: ActivatedRoute,
@@ -29,7 +32,6 @@ export class DecorationListComponent implements OnInit {
   }
 
   ngOnInit() {
-
     this.decorations$ = this.decorationService.decorations$;
 
     const paramsStream = this.route.queryParams
@@ -44,7 +46,6 @@ export class DecorationListComponent implements OnInit {
       .distinctUntilChanged()
       .switchMap(query => this.decorationService.findDecorations(query, this.radioModel))
       .subscribe();
-
   }
 
   openNewDecorationForm() {
@@ -59,8 +60,8 @@ export class DecorationListComponent implements OnInit {
 
   deleteDecoration(decoration) {
     let fraction = 'Global';
-    if (decoration.fraction === 'BLUFOR') fraction = 'NATO';
-    else if (decoration.fraction === 'OPFOR') fraction = 'CSAT';
+    if (decoration.fraction === 'BLUFOR') fraction = Fraction.BLUFOR;
+    else if (decoration.fraction === 'OPFOR') fraction = Fraction.OPFOR;
 
     if (confirm('Soll die Auszeichnung "' + decoration.name + '" (' + fraction + ') wirklich gelöscht werden?')) {
       this.decorationService.deleteDecoration(decoration)

static/src/app/decorations/edit-decoration/edit-decoration.component.html

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

static/src/app/decorations/edit-decoration/edit-decoration.component.ts

@@ -4,6 +4,7 @@ import {NgForm} from "@angular/forms";
 import {Decoration} from "../../models/model-interfaces";
 import {DecorationService} from "../../services/army-management/decoration.service";
 import {Subscription} from "rxjs/Subscription";
+import {Fraction} from "../../utils/fraction.enum";
 
 @Component({
   templateUrl: './edit-decoration.component.html',
@@ -25,6 +26,8 @@ export class EditDecorationComponent {
 
   @ViewChild(NgForm) form: NgForm;
 
+  readonly fraction = Fraction;
+
   constructor(private route: ActivatedRoute,
               private router: Router,
               private decorationService: DecorationService) {

static/src/app/models/model-interfaces.ts

@@ -100,7 +100,7 @@ export interface Decoration {
 }
 
 export interface Army {
-  NATO: {
+  BLUFOR: {
     squads: {
       _id,
       name,
@@ -113,7 +113,7 @@ export interface Army {
     }[],
     memberCount
   },
-  CSAT: {
+  OPFOR: {
     squads: {
       _id,
       name,

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="BLUFOR">NATO</option>
+      <option value="OPFOR">{{fraction.OPFOR}}</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 == 'BLUFOR'">NATO</small>
+      <small *ngIf="rank.fraction == 'OPFOR'">{{fraction.OPFOR}}</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="opfor" uncheckable>CSAT</label>
+      <label class="btn btn-success" [(ngModel)]="radioModel" btnRadio="BLUFOR" uncheckable>{{fraction.BLUFOR}}</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) => {

static/src/app/squads/edit-squad/edit-squad.component.html

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

static/src/app/squads/edit-squad/edit-squad.component.ts

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

static/src/app/squads/squad-list/squad-item.component.html

@@ -6,8 +6,8 @@
         <a>{{squad.name}}</a>
       </span>
       <br>
-      <small *ngIf="squad.fraction == 'OPFOR'">CSAT</small>
-      <small *ngIf="squad.fraction == 'BLUFOR'">NATO</small>
+      <small *ngIf="squad.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
+      <small *ngIf="squad.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
     </div>
 
     <div class="col-xs-4">

static/src/app/squads/squad-list/squad-item.component.ts

@@ -1,6 +1,6 @@
 import {ChangeDetectionStrategy, Component, EventEmitter} from "@angular/core";
-import {Router} from "@angular/router";
 import {Squad} from "../../models/model-interfaces";
+import {Fraction} from "../../utils/fraction.enum";
 
 @Component({
   selector: 'pjm-squad-item',
@@ -20,7 +20,9 @@ export class SquadItemComponent {
 
   imageSrc;
 
-  constructor(private router: Router) {
+  readonly fraction = Fraction;
+
+  constructor() {
   }
 
   ngOnInit() {

static/src/app/squads/squad-list/squad-list.component.html

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

static/src/app/squads/squad-list/squad-list.component.ts

@@ -6,6 +6,7 @@ import {ActivatedRoute, Router} from "@angular/router";
 import {Observable} from "rxjs/Observable";
 import {Squad} from "../../models/model-interfaces";
 import {SquadService} from "../../services/army-management/squad.service";
+import {Fraction} from "../../utils/fraction.enum";
 
 @Component({
   selector: 'squad-list',
@@ -22,6 +23,8 @@ export class SquadListComponent implements OnInit {
 
   public radioModel: string;
 
+  readonly fraction = Fraction;
+
   constructor(private squadService: SquadService,
               private router: Router,
               private route: ActivatedRoute,
@@ -58,7 +61,7 @@ export class SquadListComponent implements OnInit {
   }
 
   deleteSquad(squad) {
-    const fraction = squad.fraction === 'OPFOR' ? 'CSAT' : 'NATO';
+    const fraction = squad.fraction === 'OPFOR' ? Fraction.OPFOR : Fraction.BLUFOR;
     if (confirm('Soll das Squad "' + squad.name + '" (' + fraction + ') wirklich gelöscht werden?')) {
       this.squadService.deleteSquad(squad)
         .subscribe((res) => {

static/src/app/statistic/overview/stats-overview.component.ts

@@ -3,12 +3,13 @@ import {ActivatedRoute} from "@angular/router";
 import {CarouselConfig} from "ngx-bootstrap";
 import {CampaignService} from "../../services/logs/campaign.service";
 import {ChartUtils} from "../../utils/chart-utils";
+import {Fraction} from "../../utils/fraction.enum";
 
 
 @Component({
   selector: 'stats-overview',
   templateUrl: './stats-overview.component.html',
-  styleUrls: ['./stats-overview.component.css', '../../style/list-entry.css',  '../../style/overview.css'],
+  styleUrls: ['./stats-overview.component.css', '../../style/list-entry.css', '../../style/overview.css'],
   inputs: ['campaigns'],
   providers: [{provide: CarouselConfig, useValue: {interval: false}}]
 })
@@ -24,7 +25,7 @@ export class StatisticOverviewComponent {
   activeSlideIndex;
 
   colorScheme = {
-    domain: ['#0000FF', '#B22222']
+    domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
   };
   gradient = false;
   xAxis = true;
@@ -68,10 +69,10 @@ export class StatisticOverviewComponent {
         if (this.id === 'all') {
           this.title = "Gesamtübersicht";
           wars.sort((a, b) => {
-              // sort by dates, because older campaign can contain newer war
-              if (a['date'] > (b['date'])) return -1;
-              if (a['date'] < (b['date'])) return 1;
-              return 0;
+            // sort by dates, because older campaign can contain newer war
+            if (a['date'] > (b['date'])) return -1;
+            if (a['date'] < (b['date'])) return 1;
+            return 0;
           })
         } else {
           this.title = campaign.title;
@@ -100,20 +101,12 @@ export class StatisticOverviewComponent {
   }
 
   initChart(wars: any[]) {
-    let pointsObj = [
-      {
-        "name": "NATO",
-        "series": []
-      },
-      {
-        "name": "CSAT",
-        "series": []
-      }];
-    let pointsSumObj = JSON.parse(JSON.stringify(pointsObj));
-    let playersObj = JSON.parse(JSON.stringify(pointsObj));
+    const pointsObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+    const pointsSumObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
+    const playersObj = ChartUtils.getMultiDataArray(Fraction.BLUFOR, Fraction.OPFOR);
 
     for (let i = wars.length - 1; i >= 0; i--) {
-      let j = wars.length - i - 1;
+      const j = wars.length - i - 1;
       const warDateString = ChartUtils.getShortDateString(wars[i].date);
 
       pointsObj[0].series.push({
@@ -158,7 +151,7 @@ export class StatisticOverviewComponent {
   }
 
   isActiveSlide(index) {
-    return this.activeSlideIndex === index ? '#d9edf7':'white'
+    return this.activeSlideIndex === index ? '#d9edf7' : 'white'
   }
 
 }

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">NATO {{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}} CSAT</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)">NATO
+                   (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)">CSAT
+                   (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' ? 'NATO' : 'CSAT'}}
+            {{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">
@@ -165,6 +167,12 @@
         </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

@@ -7,6 +7,7 @@ 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({
@@ -16,12 +17,20 @@ import {ChartUtils} from "../../utils/chart-utils";
 })
 export class WarDetailComponent {
 
+  readonly fraction = Fraction;
+
   @ViewChild('overview') private overviewContainer: ElementRef;
 
   @ViewChild('staticTabs') staticTabs: TabsetComponent;
 
   war: War = {players: []};
 
+  logData: any;
+
+  initialized: any;
+
+  startDateObj: Date;
+
   public chartSelectModel: string;
 
   fractionRadioSelect: string;
@@ -51,10 +60,8 @@ export class WarDetailComponent {
   tmpStabilizeData;
   tmpFlagCaptureData;
 
-  initialized;
-
   colorScheme = {
-    domain: ['#0000FF', '#B22222']
+    domain: [Fraction.COLOR_BLUFOR, Fraction.COLOR_OPFOR]
   };
 
   labelPoints = 'Punkte';
@@ -80,12 +87,6 @@ export class WarDetailComponent {
   timeline = false;
   roundDomains = true;
 
-  startDateObj;
-
-  dataMode: string = 'Summe';
-  dataInterval: number = 0;
-  logData;
-
   constructor(private route: ActivatedRoute,
               private router: Router,
               private warService: WarService,
@@ -100,7 +101,7 @@ export class WarDetailComponent {
       .subscribe(war => {
         this.war = war;
         this.rows = war.players;
-        this.playerChart = ChartUtils.getSingleDataArray('CSAT', war.playersOpfor, 'NATO', war.playersBlufor);
+        this.playerChart = ChartUtils.getSingleDataArray(Fraction.OPFOR, war.playersOpfor, Fraction.BLUFOR, war.playersBlufor);
 
         this.initialized = {
           basic: false,
@@ -187,13 +188,6 @@ export class WarDetailComponent {
     }
   }
 
-  toggleDataMode(interval, entryString) {
-    this.dataInterval = interval;
-    this.dataMode = entryString;
-    this.initTransportData();
-    this.lineChartData = this.tmpTransportData;
-  }
-
   loadFractionData() {
     if (this.initialized.basic) {
       return;
@@ -376,14 +370,14 @@ export class WarDetailComponent {
   }
 
   initializeTempCollections() {
-    this.tmpPointData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
-    this.tmpBudgetData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
-    this.tmpKillData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
-    this.tmpFrienlyFireData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
-    this.tmpTransportData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
-    this.tmpReviveData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
-    this.tmpStabilizeData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
-    this.tmpFlagCaptureData = ChartUtils.getMultiDataArray('NATO', 'CSAT');
+    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 => {

static/src/app/users/award-user/award-user.component.html

@@ -13,7 +13,8 @@
             style="min-width: 200px;">
       <option [value]="0">Auswählen...</option>
       <option *ngFor="let deco of decorations" [value]="deco._id">
-        {{deco.fraction == 'BLUFOR'? 'NATO' : deco.fraction == 'OPFOR'? 'CSAT' : 'Global'}}: {{deco.name}}
+        {{deco.fraction == 'BLUFOR'? fraction.BLUFOR : deco.fraction == 'OPFOR'? fraction.OPFOR : 'Global'}}:
+        {{deco.name}}
       </option>
     </select>
 

static/src/app/users/award-user/award-user.component.ts

@@ -4,6 +4,7 @@ import {Award, Decoration} from "../../models/model-interfaces";
 import {NgForm} from "@angular/forms";
 import {AwardingService} from "../../services/army-management/awarding.service";
 import {DecorationService} from "../../services/army-management/decoration.service";
+import {Fraction} from "../../utils/fraction.enum";
 
 
 @Component({
@@ -24,6 +25,8 @@ export class AwardUserComponent {
 
   decoPreviewDisplay = 'none';
 
+  readonly fraction = Fraction;
+
   constructor(private router: Router,
               private route: ActivatedRoute,
               private awardingService: AwardingService,

static/src/app/users/edit-user/edit-user.component.html

@@ -24,7 +24,7 @@
             (change)="toggleRanks()">
       <option [value]="0">Ohne Fraktion/ Squad</option>
       <option *ngFor="let squad of squads" [ngValue]="squad">
-        {{squad.fraction == 'BLUFOR'? 'NATO' : 'CSAT'}}: {{squad.name}}
+        {{squad.fraction == 'BLUFOR'? fraction.BLUFOR : fraction.OPFOR}}: {{squad.name}}
       </option>
     </select>
 

static/src/app/users/edit-user/edit-user.component.ts

@@ -6,6 +6,7 @@ import {SquadService} from "../../services/army-management/squad.service";
 import {RankService} from "../../services/army-management/rank.service";
 import {Subscription} from "rxjs";
 import {NgForm} from "@angular/forms";
+import {Fraction} from "../../utils/fraction.enum";
 
 
 @Component({
@@ -32,6 +33,8 @@ export class EditUserComponent {
 
   error: string;
 
+  readonly fraction = Fraction;
+
   constructor(private router: Router,
               private route: ActivatedRoute,
               private userService: UserService,

static/src/app/users/user-list/user-item.component.html

@@ -6,8 +6,9 @@
         <a>{{user.username}}</a>
       </span>
       <br>
-      <small *ngIf="user.squadId && user.squadId.fraction == 'OPFOR'">CSAT - {{user.squadId.name}}</small>
-      <small *ngIf="user.squadId && user.squadId.fraction == 'BLUFOR'">NATO - {{user.squadId.name}}</small>
+      <small *ngIf="user.squadId && user.squadId.fraction == 'OPFOR'">{{fraction.OPFOR}} - {{user.squadId.name}}</small>
+      <small *ngIf="user.squadId && user.squadId.fraction == 'BLUFOR'">{{fraction.BLUFOR}} - {{user.squadId.name}}
+      </small>
       <small *ngIf="!user.squadId">ohne Squad/Fraktion</small>
     </div>
 

static/src/app/users/user-list/user-item.component.ts

@@ -1,6 +1,6 @@
 import {ChangeDetectionStrategy, Component, EventEmitter} from "@angular/core";
-import {Router} from "@angular/router";
 import {User} from "../../models/model-interfaces";
+import {Fraction} from "../../utils/fraction.enum";
 
 @Component({
   selector: 'pjm-user-item',
@@ -19,8 +19,9 @@ export class UserItemComponent {
   userAward = new EventEmitter();
   userDelete = new EventEmitter();
 
-  constructor(private router: Router) {
+  readonly fraction = Fraction;
 
+  constructor() {
   }
 
   select() {

static/src/app/users/user-list/user-list.component.html

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

static/src/app/users/user-list/user-list.component.ts

@@ -7,6 +7,7 @@ import {Observable} from "rxjs/Observable";
 import {UserService} from "../../services/army-management/user.service";
 import {User} from "../../models/model-interfaces";
 import {ADD, LOAD} from "../../services/stores/user.store";
+import {Fraction} from "../../utils/fraction.enum";
 
 @Component({
   selector: 'squad-list',
@@ -30,6 +31,8 @@ export class UserListComponent implements OnInit {
   offset = 0;
 
   limit = 20;
+  
+  readonly fraction = Fraction;
 
   constructor(private userService: UserService,
               private router: Router,

static/src/app/utils/fraction.enum.ts

@@ -0,0 +1,6 @@
+export enum Fraction {
+  BLUFOR = 'NATO',
+  OPFOR = 'CSAT',
+  COLOR_BLUFOR = '#0000FF',
+  COLOR_OPFOR = '#B22222'
+}