Replace strings with i18n keys in request module

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

@@ -3,13 +3,13 @@
     <div class="return-button">
       <button mat-raised-button (click)="backToOverview()">
         <mat-icon svgIcon="chevron-left"></mat-icon>
-        Zurück
+        {{'public.army.member.button.back' | translate}}
       </button>
     </div>
 
     <h3 class="text-center" style="font-weight: 600"
         [style.color]="user.squadId?.fraction === 'BLUFOR' ? fraction.COLOR_BLUFOR : fraction.COLOR_OPFOR">
-      Auszeichnungen von {{user.username}}
+      {{'public.army.member.headline' | translate:{name: user.username} }}
     </h3>
 
     <div class="text-center">
@@ -19,7 +19,9 @@
       <input type="text" style="background: white;" class="form-control" [(ngModel)]="signatureUrl" readonly>
       <span class="input-group-btn">
         <button class="btn btn-default" [class.btn-success]="isCopied" type="button"
-                ngxClipboard [cbContent]="signatureUrl" (cbOnSuccess)="isCopied = true">kopieren</button>
+                ngxClipboard [cbContent]="signatureUrl" (cbOnSuccess)="isCopied = true">
+          {{'public.army.member.button.copy' | translate}}
+        </button>
       </span>
     </div>
 
@@ -29,9 +31,11 @@
           <thead>
           <tr class="table-head">
             <th class="col-sm-1" style="border-radius: 10px 0 0 0;"></th>
-            <th class="col-sm-2">Bezeichnung</th>
-            <th class="col-sm-2">Begründung</th>
-            <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">Verliehen am</th>
+            <th class="col-sm-2">{{'public.army.member.awards.title' | translate}}</th>
+            <th class="col-sm-2">{{'public.army.member.awards.reason' | translate}}</th>
+            <th class="col-sm-1 text-right" style="border-radius: 0 10px 0 0;">
+              {{'public.army.member.awards.date' | translate}}
+            </th>
           </tr>
           </thead>
           <tbody *ngFor="let award of awards">
@@ -55,7 +59,6 @@
           </tbody>
         </table>
       </div>
-
     </div>
   </div>
 </div>

static/src/app/common/show-error/show-error.component.ts

@@ -1,5 +1,6 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 import {FormGroup, NgForm} from '@angular/forms';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'show-error',
@@ -10,7 +11,7 @@ import {FormGroup, NgForm} from '@angular/forms';
       </div>
     </div>`
 })
-export class ShowErrorComponent {
+export class ShowErrorComponent implements OnInit {
 
   // tslint:disable-next-line:no-input-rename
   @Input('controlPath') controlPath;
@@ -20,10 +21,15 @@ export class ShowErrorComponent {
 
   private form: FormGroup;
 
-  constructor(ngForm: NgForm) {
+  constructor(ngForm: NgForm,
+              private translate: TranslateService) {
     this.form = ngForm.form;
   }
 
+  ngOnInit() {
+    this.translate.setDefaultLang('de');
+  }
+
   get errorMessages(): string[] {
     const control = this.form.get(this.controlPath);
     const messages = [];
@@ -37,22 +43,43 @@ export class ShowErrorComponent {
         let message = '';
         switch (code) {
           case 'required':
-            message = `${this.displayName} ist ein Pflichtfeld`;
+            this.translate.get('public.error.message.required', {fieldName: this.displayName})
+                .subscribe((res: string) => {
+                  message = res;
+                });
             break;
           case 'minlength':
-            message = `${this.displayName} muss mindestens ${error.requiredLength} Zeichen enthalten`;
+            this.translate.get('public.error.message.min.length', {
+                  fieldName: this.displayName,
+                  boundary: error.requiredLength
+                })
+                .subscribe((res: string) => {
+                  message = res;
+                });
             break;
           case 'maxlength':
-            message = `${this.displayName} darf maximal ${error.requiredLength} Zeichen enthalten`;
+            this.translate.get('public.error.message.max.length', {
+                  fieldName: this.displayName,
+                  boundary: error.requiredLength
+                })
+                .subscribe((res: string) => {
+                  message = res;
+                });
             break;
           case 'invalidEMail':
-            message = `Bitte geben Sie eine gültige E-Mail Adresse an`;
+            this.translate.get('public.error.message.email').subscribe((res: string) => {
+              message = res;
+            });
             break;
           case 'userNotFound':
-            message = `Der eingetragene Benutzer existiert nicht.`;
+            this.translate.get('public.error.message.no.user').subscribe((res: string) => {
+              message = res;
+            });
             break;
           default:
-            message = `${name} ist nicht valide`;
+            this.translate.get('public.error.message.default', {fieldName: name}).subscribe((res: string) => {
+              message = res;
+            });
         }
         messages.push(message);
       }

static/src/app/common/user-interface/list-filter/list-filter.component.html

@@ -1,12 +1,13 @@
 <div class="input-group list-header pull-left">
   <mat-button-toggle-group #group="matButtonToggleGroup">
     <mat-button-toggle *ngFor="let button of filterButtons" value="{{button.value}}" (change)="execute(group)">
-      {{button.label}}
+      <span *ngIf="button.label !== fraction.BLUFOR && button.label !== fraction.OPFOR">{{button.label | translate}}</span>
+      <span *ngIf="button.label === fraction.BLUFOR || button.label === fraction.OPFOR">{{button.label}}</span>
     </mat-button-toggle>
   </mat-button-toggle-group>
   <button mat-icon-button
           class="add-btn"
-          matTooltip="{{addButton.tooltip}}"
+          matTooltip="{{addButton.tooltip | translate}}"
           (click)="add()">
       <mat-icon svgIcon="{{addButton.svgIcon}}">
     </mat-icon>

static/src/app/common/user-interface/list-filter/list-filter.component.ts

@@ -1,4 +1,5 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Fraction} from '../../../utils/fraction.enum';
 
 @Component({
   selector: 'cc-list-filter',
@@ -15,6 +16,8 @@ export class ListFilterComponent {
 
   @Output() openAddFrom = new EventEmitter();
 
+  readonly fraction = Fraction;
+
   constructor() {
   }
 

static/src/app/common/user-interface/search-field/search-field.component.html

@@ -6,7 +6,7 @@
   <span class="input-group-btn">
       <button class="btn btn-default" type="button"
               (click)="emitSearch()">
-        Suchen
+        {{'public.common.search.button' | translate}}
       </button>
     </span>
 </div>

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

@@ -8,8 +8,8 @@
       <br>
       <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>
+      <small *ngIf="decoration.fraction == 'GLOBAL'">{{'decorations.list.filter.global' | translate}}</small>
+      <small>{{'decorations.item.label.sort' | translate:{value: decoration.sortingNumber} }}</small>
     </div>
 
     <div class="col-xs-4">
@@ -18,7 +18,8 @@
            [style.max-width]="imgStyle.width"
            [style.margin-top]="imgStyle.marginTop"
            class="decoration-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="{{'decorations.list.button.delete' | translate}}"
+            class="glyphicon glyphicon-trash trash"></span>
     </div>
   </div>
 </div>

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

@@ -2,8 +2,8 @@
   <cc-list-filter
     [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
                       {label: fraction.OPFOR, value: 'OPFOR'},
-                      {label: 'Global', value: 'GLOBAL'}]"
-    [addButton]="{svgIcon: 'add', tooltip: 'Neue Auszeichnung hinzufügen'}"
+                      {label: 'decorations.list.filter.global', value: 'GLOBAL'}]"
+    [addButton]="{svgIcon: 'add', tooltip: 'decorations.list.button.add'}"
     (executeSearch)="filterDecorations($event)"
     (openAddFrom)="openNewDecorationForm()">
   </cc-list-filter>

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

@@ -8,6 +8,7 @@ import {DecorationService} from '../../services/army-management/decoration.servi
 import {Fraction} from '../../utils/fraction.enum';
 import {MatButtonToggleGroup} from '@angular/material';
 import {UIHelpers} from '../../utils/global.helpers';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'cc-decoration-list',
@@ -28,7 +29,8 @@ export class DecorationListComponent implements OnInit {
 
   constructor(private decorationService: DecorationService,
               private router: Router,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -60,11 +62,16 @@ export class DecorationListComponent implements OnInit {
       fraction = Fraction.OPFOR;
     }
 
-    if (confirm('Soll die Auszeichnung "' + decoration.name + '" (' + fraction + ') wirklich gelöscht werden?')) {
-      this.decorationService.deleteDecoration(decoration)
-          .subscribe((res) => {
-          });
-    }
+    this.translate.get('decorations.list.delete.confirm', {
+      name: decoration.name,
+      fraction: fraction
+    }).subscribe((confirmQuestion) => {
+      if (confirm(confirmQuestion)) {
+        this.decorationService.deleteDecoration(decoration)
+            .subscribe((res) => {
+            });
+      }
+    })
   }
 
   filterDecorations(group?: MatButtonToggleGroup) {

static/src/app/decorations/decoration.module.ts

@@ -4,11 +4,35 @@ import {CommonModule} from '@angular/common';
 import {DecorationStore} from '../services/stores/decoration.store';
 import {DecorationService} from '../services/army-management/decoration.service';
 import {NgModule} from '@angular/core';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {HttpClient} from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/decorations/', '.json');
+}
 
 @NgModule({
   declarations: decorationsRoutingComponents,
-  imports: [CommonModule, SharedModule, decorationRoutesModule],
-  providers: [DecorationStore, DecorationService]
+
+  imports: [
+    CommonModule,
+    SharedModule,
+    decorationRoutesModule,
+
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      },
+      isolate: true
+    })],
+
+  providers: [
+    DecorationStore,
+    DecorationService
+  ]
 })
 export class DecorationsModule {
   static routes = decorationRoutesModule;

static/src/app/decorations/decoration.routing.ts

@@ -3,8 +3,13 @@ import {DecorationListComponent} from './decoration-list/decoration-list.compone
 import {EditDecorationComponent} from './edit-decoration/edit-decoration.component';
 import {ModuleWithProviders} from '@angular/core';
 import {DecorationItemComponent} from './decoration-list/decoration-item.component';
+import {DecorationsComponent} from './decorations.component';
 
 export const decorationsRoutes: Routes = [
+  {
+    path: '',
+    component: DecorationsComponent,
+  },
   {
     path: '',
     component: DecorationListComponent,
@@ -23,5 +28,6 @@ export const decorationsRoutes: Routes = [
 
 export const decorationRoutesModule: ModuleWithProviders = RouterModule.forChild(decorationsRoutes);
 
-export const decorationsRoutingComponents = [DecorationItemComponent, DecorationListComponent, EditDecorationComponent];
+export const decorationsRoutingComponents = [DecorationsComponent, DecorationItemComponent, DecorationListComponent,
+  EditDecorationComponent];
 

static/src/app/decorations/decorations.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

static/src/app/decorations/decorations.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'cc-decorations-root',
+  templateUrl: './decorations.component.html',
+  styleUrls: ['./decorations.component.scss']
+})
+export class DecorationsComponent {
+
+  constructor(private translate: TranslateService) {
+    translate.setDefaultLang('de');
+  }
+}

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

@@ -1,63 +1,63 @@
 <form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
-  <h3 *ngIf="decoration._id">Auszeichnung editieren</h3>
-  <h3 *ngIf="!decoration._id">Neue Auszeichnung hinzufügen</h3>
+  <h3 *ngIf="decoration._id">{{'decorations.submit.headline.edit' | translate}}</h3>
+  <h3 *ngIf="!decoration._id">{{'decorations.submit.headline.new' | translate}}</h3>
 
   <div class="form-group">
-    <label for="title">Name</label>
+    <label for="title">{{'decorations.submit.field.name' | translate}}</label>
     <input type="text" class="form-control"
            [(ngModel)]="decoration.name"
            name="title"
            id="title"
            required maxlength="50"/>
-    <show-error displayName="Name" controlPath="title"></show-error>
+    <show-error displayName="{{'decorations.submit.field.name' | translate}}" controlPath="title"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="fraction">Fraktion</label>
+    <label for="fraction">{{'decorations.submit.field.fraction' | translate}}</label>
     <select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="decoration.fraction">
       <option value="OPFOR">{{fraction.OPFOR}}</option>
       <option value="BLUFOR">{{fraction.BLUFOR}}</option>
-      <option value="GLOBAL">Global</option>
+      <option value="GLOBAL">{{'decorations.submit.field.fraction.global' | translate}}</option>
     </select>
-    <show-error displayName="Fraktion" controlPath="fraction"></show-error>
+    <show-error displayName="{{'decorations.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="type">Art</label>
+    <label for="type">{{'decorations.submit.field.type' | translate}}</label>
     <select id="type" name="type" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="decoration.isMedal">
-      <option value="true">Orden</option>
-      <option value="false">Ribbon</option>
+      <option value="true">{{'decorations.submit.field.type.medal' | translate}}</option>
+      <option value="false">{{'decorations.submit.field.type.ribbon' | translate}}</option>
     </select>
-    <show-error displayName="Art" controlPath="type"></show-error>
+    <show-error displayName="{{'decorations.submit.field.type' | translate}}" controlPath="type"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="sort">Sortierung</label>
+    <label for="sort">{{'decorations.submit.field.sort' | translate}}</label>
     <input id="sort" name="sort" type="number" class="form-control btn dropdown-toggle"
            [(ngModel)]="decoration.sortingNumber">
-    <show-error displayName="Sortierung" controlPath="sort"></show-error>
+    <show-error displayName="{{'decorations.submit.field.sort' | translate}}" controlPath="sort"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="description">Beschreibung</label>
+    <label for="description">{{'decorations.submit.field.description' | translate}}</label>
     <textarea id="description" name="description" class="form-control" rows="5"
               required
               [(ngModel)]="decoration.description"></textarea>
-    <show-error displayName="Beschreibung" controlPath="description"></show-error>
+    <show-error displayName="{{'decorations.submit.field.description' | translate}}" controlPath="description"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="graphic">Bild</label>
+    <label for="graphic">{{'decorations.submit.field.image' | translate}}</label>
     <input id="graphic" name="graphic" class="ui-button form-control" type="file"
            #fileInput
            accept="image/png"
            (change)="fileChange($event)">
     <span class="label label-bg label-danger center-block" style="font-size:small" *ngIf="showImageError">
-      Bild muss im PNG Format vorliegen
+      {{'decorations.submit.field.image.error.type' | translate}}
     </span>
 
     <img class="preview-image" src="{{imagePreviewSrc}}">
@@ -66,7 +66,7 @@
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'decorations.submit,button.cancel' | translate}}
   </button>
 
   <button id="save"
@@ -74,6 +74,6 @@
           (click)="saveDecoration(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
-    Bestätigen
+    {{'decorations.submit,button.submit' | translate}}
   </button>
 </form>

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

@@ -7,6 +7,7 @@ import {Subscription} from 'rxjs/Subscription';
 import {Fraction} from '../../utils/fraction.enum';
 import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
 import {Message} from '../../i18n/de.messages';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   templateUrl: './edit-decoration.component.html',
@@ -31,7 +32,8 @@ export class EditDecorationComponent implements OnInit, OnDestroy {
   constructor(private route: ActivatedRoute,
               private router: Router,
               private decorationService: DecorationService,
-              private snackBarService: SnackBarService) {
+              private snackBarService: SnackBarService,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -69,7 +71,12 @@ export class EditDecorationComponent implements OnInit, OnDestroy {
               this.router.navigate(['..'], {relativeTo: this.route});
             });
       } else {
-        return window.alert(`Bild ist ein Pflichtfeld`);
+        this.translate.get('decorations.submit.field.image').subscribe((fieldNameLogo) => {
+          this.translate.get('public.error.message.required',
+            {fieldName: fieldNameLogo}).subscribe((message) => {
+            this.snackBarService.showError(message, 4000);
+          })
+        });
       }
     } else {
       if (this.fileList) {

static/src/app/pub/public.routing.ts

@@ -6,7 +6,6 @@ import {DecorationPanelComponent} from './decoration-overview/decoration-panel/d
 import {RankPanelComponent} from './rank-overview/rank-panel/rank-panel.component';
 import {UserListSheetComponent} from './user-list-sheet/user-list-sheet.component';
 import {PublicComponent} from './public.component';
-import {StatisticComponent} from '../statistic/stats.component';
 
 export const publicRoutes: Routes = [
   {

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

@@ -1,44 +1,43 @@
 <form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
-  <h3 *ngIf="rank._id">Rang editieren</h3>
-  <h3 *ngIf="!rank._id">Neuen Rang hinzufügen</h3>
+  <h3 *ngIf="rank._id">{{'ranks.submit.headline.edit' | translate}}</h3>
+  <h3 *ngIf="!rank._id">{{'ranks.submit.headline.new' | translate}}</h3>
 
   <div class="form-group">
-    <label for="title">Name</label>
+    <label for="title">{{'ranks.submit.field.name' | translate}}</label>
     <input type="text" class="form-control"
            [(ngModel)]="rank.name"
            name="title"
            id="title"
            required maxlength="50"/>
-
-    <show-error displayName="Name" controlPath="title"></show-error>
+    <show-error displayName="{{'ranks.submit.field.name' | translate}}" controlPath="title"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="fraction">Fraktion</label>
+    <label for="fraction">{{'ranks.submit.field.fraction' | translate}}</label>
     <select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="rank.fraction">
       <option value="OPFOR">{{fraction.OPFOR}}</option>
       <option value="BLUFOR">{{fraction.BLUFOR}}</option>
     </select>
-    <show-error displayName="Fraktion" controlPath="fraction"></show-error>
+    <show-error displayName="{{'ranks.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="level">Stufe</label>
+    <label for="level">{{'ranks.submit.field.level' | translate}}</label>
     <input id="level" name="level" type="number" class="form-control btn dropdown-toggle"
            [(ngModel)]="rank.level">
-    <show-error displayName="Stufe" controlPath="level"></show-error>
+    <show-error displayName="{{'ranks.submit.field.level' | translate}}" controlPath="level"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="logo">Bild</label>
+    <label for="logo">{{'ranks.submit.field.image' | translate}}</label>
     <input id="logo" name="logo" class="ui-button form-control" type="file"
            accept="image/png"
            #fileInput
            (change)="fileChange($event)">
     <span class="label label-bg label-danger center-block" style="font-size:small" *ngIf="showImageError">
-        Bild muss im PNG Format vorliegen
+      {{'ranks.submit.field.image.error.format' | translate}}
     </span>
 
     <img class="preview-image" src="{{imagePreviewSrc}}">
@@ -47,7 +46,7 @@
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'ranks.submit.button.cancel' | translate}}
   </button>
 
   <button id="save"
@@ -55,6 +54,6 @@
           (click)="saveRank(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
-    Bestätigen
+    {{'ranks.submit.button.submit' | translate}}
   </button>
 </form>

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

@@ -7,6 +7,7 @@ import {Subscription} from 'rxjs/Subscription';
 import {Fraction} from '../../utils/fraction.enum';
 import {Message} from '../../i18n/de.messages';
 import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
+import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
@@ -34,7 +35,8 @@ export class EditRankComponent implements OnInit, OnDestroy {
   constructor(private route: ActivatedRoute,
               private router: Router,
               private rankService: RankService,
-              private snackBarService: SnackBarService) {
+              private snackBarService: SnackBarService,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -73,7 +75,12 @@ export class EditRankComponent implements OnInit, OnDestroy {
               this.router.navigate(['..'], {relativeTo: this.route});
             });
       } else {
-        return window.alert(`Bild ist ein Pflichtfeld`);
+        this.translate.get('ranks.submit.field.image').subscribe((fieldNameIMage) => {
+          this.translate.get('public.error.message.required',
+            {fieldName: fieldNameIMage}).subscribe((message) => {
+            this.snackBarService.showError(message, 4000);
+          })
+        });
       }
     } else {
       if (this.fileList) {
@@ -95,12 +102,4 @@ export class EditRankComponent implements OnInit, OnDestroy {
     this.router.navigate([this.rank._id ? '../..' : '..'], {relativeTo: this.route});
     return false;
   }
-
-  canDeactivate(): boolean {
-    if (this.saved || !this.form.dirty) {
-      return true;
-    }
-    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
-  }
-
 }

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

@@ -8,12 +8,13 @@
       <br>
       <small *ngIf="rank.fraction == 'OPFOR'">{{fraction.OPFOR}}</small>
       <small *ngIf="rank.fraction == 'BLUFOR'">{{fraction.BLUFOR}}</small>
-      <small> - Stufe {{rank.level}}</small>
+      <small>{{'ranks.list.item.label.level' | translate:{level: rank.level} }}</small>
     </div>
 
     <div class="col-xs-4">
       <img src="{{imageSrc}}" class="rank-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()" matTooltip="{{'ranks.list.button.delete' | translate}}"
+            class="glyphicon glyphicon-trash trash"></span>
     </div>
 
   </div>

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

@@ -2,7 +2,7 @@
   <cc-list-filter
     [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
                       {label: fraction.OPFOR, value: 'OPFOR'}]"
-    [addButton]="{svgIcon: 'add', tooltip: 'Neuen Rang hinzufügen'}"
+    [addButton]="{svgIcon: 'add', tooltip: 'ranks.list.button.add'}"
     (executeSearch)="filterRanks($event)"
     (openAddFrom)="openNewRankForm()">
   </cc-list-filter>

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

@@ -8,6 +8,7 @@ import {RankService} from '../../services/army-management/rank.service';
 import {Fraction} from '../../utils/fraction.enum';
 import {UIHelpers} from '../../utils/global.helpers';
 import {MatButtonToggleGroup} from '@angular/material';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'cc-rank-list',
@@ -28,7 +29,8 @@ export class RankListComponent implements OnInit {
 
   constructor(private rankService: RankService,
               private router: Router,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -60,10 +62,15 @@ export class RankListComponent implements OnInit {
 
   deleteRank(rank) {
     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) => {
-          });
-    }
+    this.translate.get('ranks.list.delete.confirm', {
+      name: rank.name,
+      fraction: fraction
+    }).subscribe((confirmQuestion) => {
+      if (confirm(confirmQuestion)) {
+        this.rankService.deleteRank(rank)
+            .subscribe((res) => {
+            });
+      }
+    });
   }
 }

static/src/app/ranks/ranks.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

static/src/app/ranks/ranks.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'cc-ranks-root',
+  templateUrl: './ranks.component.html',
+  styleUrls: ['./ranks.component.scss']
+})
+export class RanksComponent {
+
+  constructor(private translate: TranslateService) {
+    translate.setDefaultLang('de');
+  }
+}

static/src/app/ranks/ranks.module.ts

@@ -4,11 +4,34 @@ import {SharedModule} from '../shared.module';
 import {CommonModule} from '@angular/common';
 import {RankService} from '../services/army-management/rank.service';
 import {RankStore} from '../services/stores/rank.store';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+import {HttpClient} from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/ranks/', '.json');
+}
 
 @NgModule({
   declarations: ranksRoutingComponents,
-  imports: [CommonModule, SharedModule, rankRouterModule],
-  providers: [RankStore, RankService]
+  imports: [
+    CommonModule,
+    SharedModule,
+    rankRouterModule,
+
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      },
+      isolate: true
+    })
+  ],
+  providers: [
+    RankStore,
+    RankService
+  ]
 })
 export class RanksModule {
   static routes = rankRouterModule;

static/src/app/ranks/ranks.routing.ts

@@ -3,8 +3,13 @@ import {RankListComponent} from './rank-list/rank-list.component';
 import {EditRankComponent} from './edit-rank/edit-rank.component';
 import {RankItemComponent} from './rank-list/rank-item.component';
 import {ModuleWithProviders} from '@angular/core';
+import {RanksComponent} from './ranks.component';
 
 export const ranksRoutes: Routes = [
+  {
+    path: '',
+    component: RanksComponent,
+  },
   {
     path: '',
     component: RankListComponent,
@@ -23,5 +28,4 @@ export const ranksRoutes: Routes = [
 
 export const rankRouterModule: ModuleWithProviders = RouterModule.forChild(ranksRoutes);
 
-export const ranksRoutingComponents = [RankItemComponent, RankListComponent, EditRankComponent];
-
+export const ranksRoutingComponents = [RanksComponent, RankItemComponent, RankListComponent, EditRankComponent];

static/src/app/request/award/req-award.component.html

@@ -1,8 +1,8 @@
 <form #form="ngForm" class="overview">
-  <h3>Auszeichnung beantragen</h3>
+  <h3>{{'request.award.headline' | translate}}</h3>
 
   <div class="form-group">
-    <label for="user">Teilnehmer</label>
+    <label for="user">{{'request.award.field.user' | translate}}</label>
     <select class="form-control"
             name="user"
             id="user"
@@ -10,7 +10,7 @@
             [compareWith]="equals"
             (change)="toggleUser()"
             required>
-      <option [ngValue]="{_id: '0'}">Auswählen...</option>
+      <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
       <option *ngFor="let user of users" [ngValue]="user">
         {{user.username}}
       </option>
@@ -18,7 +18,7 @@
   </div>
 
   <div class="form-group">
-    <label for="decoration">Auszeichnung</label>
+    <label for="decoration">{{'request.award.field.award' | translate}}</label>
     <select class="form-control"
             name="decoration"
             id="decoration"
@@ -26,7 +26,7 @@
             [compareWith]="equals"
             (change)="toggleDecoPreview(decoDescription, decoPreview)"
             required>
-      <option [ngValue]="{_id: '0'}">Auswählen...</option>
+      <option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
       <option *ngFor="let deco of decorations" [ngValue]="deco">
         {{deco.name}}
       </option>
@@ -44,35 +44,35 @@
   </div>
 
   <div class="form-group">
-    <label for="reason">Begründung</label>
+    <label for="reason">{{'request.award.field.reason' | translate}}</label>
     <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
-              id="reason" placeholder="Begründung eingeben..." rows="3"></textarea>
+              id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
   </div>
 
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'request.award.button.cancel' | translate}}
   </button>
 
   <button id="save"
           (click)="addAwarding(decoPreview, decoDescription)"
           class="btn btn-default"
           [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
-    Bestätigen
+    {{'request.award.button.submit' | translate}}
   </button>
 
   <div class="table-container" *ngIf="showForm">
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Bild</th>
-        <th class="col-sm-2">Bezeichnung</th>
-        <th class="col-sm-2">Begründung</th>
-        <th class="col-sm-1 ">Antragsteller</th>
-        <th class="col-sm-1 text-right">Datum</th>
-        <th class="col-sm-1 text-center">Status</th>
-        <th class="col-sm-2 text-right">Grund für Ablehnung</th>
+        <th class="col-sm-1">{{'request.award.table.head.image' | translate}}</th>
+        <th class="col-sm-2">{{'request.award.table.head.name' | translate}}</th>
+        <th class="col-sm-2">{{'request.award.table.head.reason' | translate}}</th>
+        <th class="col-sm-1 ">{{'request.award.table.head.requester' | translate}}</th>
+        <th class="col-sm-1 text-right">{{'request.award.table.head.date' | translate}}</th>
+        <th class="col-sm-1 text-center">{{'request.award.table.head.status' | translate}}</th>
+        <th class="col-sm-2 text-right">{{'request.award.table.head.reject.reason' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let award of awards">
@@ -96,7 +96,15 @@
           {{award.date | date: 'dd.MM.yyyy'}}
         </td>
         <td class="text-center">
-          {{award.confirmed === 0? 'In Bearbeitung' : (award.confirmed === 1? 'Genehmigt' : 'Abgelehnt')}}
+           <span *ngIf="award.confirmed === 0">
+            {{'request.award.table.status.progressing' | translate}}
+          </span>
+          <span *ngIf="award.confirmed === 1">
+            {{'request.award.table.status.accepted' | translate}}
+          </span>
+          <span *ngIf="award.confirmed !== 0 && award.confirmed !== 1">
+            {{'request.award.table.status.rejected' | translate}}
+          </span>
         </td>
         <td class="text-right">
           {{award.rejectReason ? award.rejectReason : ''}}

static/src/app/request/award/req-award.component.ts

@@ -82,10 +82,10 @@ export class RequestAwardComponent implements OnInit {
   addAwarding(previewImage, descriptionField) {
     if (this.decoration._id && this.reason.length > 0) {
       const award: Award = {
-        'userId': this.user._id,
-        'decorationId': this.decoration._id,
-        'reason': this.reason,
-        'date': Date.now()
+        userId: this.user._id,
+        decorationId: this.decoration._id,
+        reason: this.reason,
+        date: Date.now()
       };
       this.awardingService.requestAwarding(award).subscribe(() => {
         this.awardingService.getUserAwardings(this.user._id)

static/src/app/request/confirm-award/confirm-award.component.html

@@ -1,18 +1,18 @@
 <form #form="ngForm" class="overview">
-  <h3>Offene Anträge - Auszeichnungen</h3>
+  <h3>{{'request.confirm.award.headline' | translate}}</h3>
 
   <div class="table-container">
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Teilnehmer</th>
+        <th class="col-sm-1">{{'request.confirm.award.table.head.participant' | translate}}</th>
         <th class="col-sm-1"></th>
-        <th class="col-sm-2">Auszeichnung</th>
-        <th class="col-sm-2">Begründung</th>
-        <th class="col-sm-1 ">Antragsteller</th>
-        <th class="col-sm-1 text-right">Datum</th>
+        <th class="col-sm-2">{{'request.confirm.award.table.head.award' | translate}}</th>
+        <th class="col-sm-2">{{'request.confirm.award.table.head.reason' | translate}}</th>
+        <th class="col-sm-1 ">{{'request.confirm.award.table.head.requester' | translate}}</th>
+        <th class="col-sm-1 text-right">{{'request.confirm.award.table.head.date' | translate}}</th>
         <th class="col-sm-2 text-right"></th>
-        <th class="col-sm-1 text-right">Aktion</th>
+        <th class="col-sm-1 text-right">{{'request.confirm.award.table.head.action' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let award of awards">
@@ -43,16 +43,19 @@
         <td>
           <textarea style="width: 100%;"
                     rows="3"
-                    placeholder="Begründung für Ablehnung (optional)"
+                    placeholder="{{'request.confirm.award.table.reject.reason.placeholder' | translate}}"
                     #rejectReason></textarea>
         </td>
         <td class="text-right">
-          <a class="action" (click)="confirm(award, true, reason.value)">Bestätigen</a><br>
-          <a class="action" (click)="confirm(award, false, reason.value, rejectReason.value)">Ablehnen</a>
+          <a class="action" (click)="confirm(award, true, reason.value)">
+            {{'request.confirm.award.table.button.action.accept' | translate}}
+          </a><br>
+          <a class="action" (click)="confirm(award, false, reason.value, rejectReason.value)">
+            {{'request.confirm.award.table.button.action.reject' | translate}}
+          </a>
         </td>
       </tr>
       </tbody>
     </table>
   </div>
-
 </form>

static/src/app/request/confirm-promotion/confirm-promotion.component.html

@@ -1,18 +1,18 @@
 <form #form="ngForm" class="overview">
-  <h3>Offene Anträge - Beförderung</h3>
+  <h3>{{'request.confirm.promotion.headline' | translate}}</h3>
 
   <div class="table-container">
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Teilnehmer</th>
-        <th class="col-sm-1">Alter Rang</th>
-        <th class="col-sm-1">Neuer Rang</th>
-        <th class="col-sm-1 ">Antragsteller</th>
-        <th class="col-sm-1 text-center">Datum</th>
-        <th class="col-sm-1 text-center">Status</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
+        <th class="col-sm-1 ">{{'"request.confirm.promotion.table.head.requester' | translate}}</th>
+        <th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th>
+        <th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.status' | translate}}</th>
         <th class="col-sm-2 text-right"></th>
-        <th class="col-sm-1 text-right">Aktion</th>
+        <th class="col-sm-1 text-right">{{'request.confirm.promotion.table.head.action' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let promotion of promotions">
@@ -33,17 +33,29 @@
           {{promotion.timestamp | date: 'dd.MM.yyyy'}}
         </td>
         <td class="text-center">
-          {{promotion.confirmed === 0? 'In Bearbeitung' : (promotion.confirmed === 1? 'Genehmigt' : 'Abgelehnt')}}
+          <span *ngIf="promotion.confirmed === 0">
+            {{'request.confirm.promotion.table.status.progressing' | translate}}
+          </span>
+          <span *ngIf="promotion.confirmed === 1">
+            {{'request.confirm.promotion.table.status.accepted' | translate}}
+          </span>
+          <span *ngIf="promotion.confirmed !== 0 && promotion.confirmed !== 1">
+            {{'request.confirm.promotion.table.status.rejected' | translate}}
+          </span>
         </td>
         <td>
           <textarea style="width: 100%;"
                     rows="3"
-                    placeholder="Begründung für Ablehnung (optional)"
+                    placeholder="{{'request.confirm.promotion.table.reject.reason.placeholder' | translate}}"
                     #rejectReason></textarea>
         </td>
         <td class="text-right">
-          <a class="action" (click)="confirm(promotion, true)">Bestätigen</a><br>
-          <a class="action" (click)="confirm(promotion, false, rejectReason.value)">Ablehnen</a>
+          <a class="action" (click)="confirm(promotion, true)">
+            {{'request.confirm.promotion.table.button.action.accept' | translate}}
+          </a><br>
+          <a class="action" (click)="confirm(promotion, false, rejectReason.value)">
+            {{'request.confirm.promotion.table.button.action.reject' | translate}}
+          </a>
         </td>
       </tr>
       </tbody>

static/src/app/request/promotion/req-promotion.component.html

@@ -1,8 +1,8 @@
 <form #form="ngForm" class="overview">
-  <h3>Beförderung beantragen</h3>
+  <h3>{{'request.promotion.headline' | translate}}</h3>
 
   <div class="form-group">
-    <label for="user">Teilnehmer</label>
+    <label for="user">{{'request.promotion.field.participant' | translate}}</label>
     <select class="form-control"
             name="user"
             id="user"
@@ -10,7 +10,7 @@
             [compareWith]="equals"
             required
             (change)="toggleUser()">
-      <option [ngValue]="{_id: '0'}">Auswählen...</option>
+      <option [ngValue]="{_id: '0'}">{{'request.promotion.field.participant.placeholder' | translate}}</option>
       <option *ngFor="let user of users" [ngValue]="user">
         {{user.username}}
       </option>
@@ -20,7 +20,7 @@
   <div *ngIf="showForm">
 
     <div class="form-group">
-      <label for="user">Aktueller Rang</label>
+      <label for="user">{{'request.promotion.field.rank.before' | translate}}</label>
       <input class="form-control"
              [(ngModel)]="selectedUserRank"
              [ngModelOptions]="{standalone: true}"
@@ -28,7 +28,7 @@
     </div>
 
     <div class="form-group">
-      <label for="decoration">Neuer Rang</label>
+      <label for="decoration">{{'request.promotion.field.rank.after' | translate}}</label>
       <select class="form-control"
               name="decoration"
               id="decoration"
@@ -46,7 +46,7 @@
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'request.promotion.button.cancel' | translate}}
   </button>
 
   <button id="save"
@@ -54,7 +54,7 @@
           (click)="addPromotion()"
           class="btn btn-default"
           [disabled]="newLevel === user.rankLvl">
-    Bestätigen
+    {{'request.promotion.button.submit' | translate}}
   </button>
 
   <div class="table-container">
@@ -62,13 +62,13 @@
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Teilnehmer</th>
-        <th class="col-sm-1">Alter Rang</th>
-        <th class="col-sm-1">Neuer Rang</th>
-        <th class="col-sm-1 ">Antragsteller</th>
-        <th class="col-sm-1 text-center">Datum</th>
-        <th class="col-sm-1 text-center">Status</th>
-        <th class="col-sm-2 text-right">Grund für Ablehnung</th>
+        <th class="col-sm-1">{{'request.promotion.table.head.participant' | translate}}</th>
+        <th class="col-sm-1">{{'request.promotion.table.head.rank.before' | translate}}</th>
+        <th class="col-sm-1">{{'request.promotion.table.head.rank.after' | translate}}</th>
+        <th class="col-sm-1 ">{{'request.promotion.table.head.requester' | translate}}</th>
+        <th class="col-sm-1 text-center">{{'request.promotion.table.head.date' | translate}}</th>
+        <th class="col-sm-1 text-center">{{'request.promotion.table.head.status' | translate}}</th>
+        <th class="col-sm-2 text-right">{{'request.promotion.table.head.reject.reason' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let promotion of uncheckedPromotions">
@@ -89,10 +89,18 @@
           {{promotion.timestamp | date: 'dd.MM.yyyy'}}
         </td>
         <td class="text-center">
-          {{promotion.confirmed === 0? 'In Bearbeitung' : (promotion.confirmed === 1? 'Genehmigt' : 'Abgelehnt')}}
+          <span *ngIf="promotion.confirmed === 0">
+            {{'request.confirm.promotion.table.status.progressing' | translate}}
+          </span>
+          <span *ngIf="promotion.confirmed === 1">
+            {{'request.confirm.promotion.table.status.accepted' | translate}}
+          </span>
+          <span *ngIf="promotion.confirmed !== 0 && promotion.confirmed !== 1">
+            {{'request.confirm.promotion.table.status.rejected' | translate}}
+          </span>
         </td>
         <td class="text-right">
-          {{promotion.rejectReason ? promotion.rejectReason : ''}}
+          <span *ngIf="promotion.rejectReason">{{promotion.rejectReason}}</span>
         </td>
       </tr>
       </tbody>

static/src/app/request/promotion/req-promotion.component.ts

@@ -98,5 +98,4 @@ export class RequestPromotionComponent implements OnInit {
       return o1._id === o2._id;
     }
   }
-
 }

static/src/app/request/request.component.ts

@@ -1,11 +1,13 @@
 import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
-  selector: 'cc-request',
+  selector: 'cc-request-root',
   templateUrl: 'request.component.html',
   styleUrls: ['request.component.css']
 })
 export class RequestComponent {
-  constructor() {
+  constructor(private translate: TranslateService) {
+    translate.setDefaultLang('de');
   }
 }

static/src/app/request/request.module.ts

@@ -9,11 +9,38 @@ import {ConfirmPromotionComponent} from './confirm-promotion/confirm-promotion.c
 import {RequestAwardComponent} from './award/req-award.component';
 import {RequestPromotionComponent} from './promotion/req-promotion.component';
 import {SqlDashboardComponent} from './sql-dashboard/sql-dashboard.component';
+import {HttpClient} from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/request/', '.json');
+}
 
 @NgModule({
-  declarations: [RequestComponent, RequestPromotionComponent, RequestAwardComponent, ConfirmPromotionComponent,
-    ConfirmAwardComponent, SqlDashboardComponent, FilterRankPipe],
-  imports: [CommonModule, SharedModule, requestRouterModule]
+  declarations: [
+    RequestComponent,
+    RequestPromotionComponent,
+    RequestAwardComponent,
+    ConfirmPromotionComponent,
+    ConfirmAwardComponent,
+    SqlDashboardComponent,
+    FilterRankPipe
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    requestRouterModule,
+
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      },
+      isolate: true
+    })
+  ]
 })
 export class RequestModule {
   static routes = requestRouterModule;

static/src/app/request/request.routing.ts

@@ -11,33 +11,37 @@ import {LoginGuardHL, LoginGuardSQL} from '../login';
 import {SqlDashboardComponent} from './sql-dashboard/sql-dashboard.component';
 
 
-export const requestRoutes: Routes = [{
-  path: '', component: RequestComponent
-},
+export const requestRoutes: Routes = [
   {
-    path: RouteConfig.requestAwardPath,
-    component: RequestAwardComponent,
-    canActivate: [LoginGuardSQL]
-  },
-  {
-    path: RouteConfig.requestPromotionPath,
-    component: RequestPromotionComponent,
-    canActivate: [LoginGuardSQL]
-  },
-  {
-    path: RouteConfig.sqlDashboardPath,
-    component: SqlDashboardComponent,
-    canActivate: [LoginGuardSQL]
-  },
-  {
-    path: RouteConfig.confirmAwardPath,
-    component: ConfirmAwardComponent,
-    canActivate: [LoginGuardHL]
-  },
-  {
-    path: RouteConfig.confirmPromotionPath,
-    component: ConfirmPromotionComponent,
-    canActivate: [LoginGuardHL]
+    path: '',
+    component: RequestComponent,
+    children: [
+      {
+        path: RouteConfig.requestAwardPath,
+        component: RequestAwardComponent,
+        canActivate: [LoginGuardSQL]
+      },
+      {
+        path: RouteConfig.requestPromotionPath,
+        component: RequestPromotionComponent,
+        canActivate: [LoginGuardSQL]
+      },
+      {
+        path: RouteConfig.sqlDashboardPath,
+        component: SqlDashboardComponent,
+        canActivate: [LoginGuardSQL]
+      },
+      {
+        path: RouteConfig.confirmAwardPath,
+        component: ConfirmAwardComponent,
+        canActivate: [LoginGuardHL]
+      },
+      {
+        path: RouteConfig.confirmPromotionPath,
+        component: ConfirmPromotionComponent,
+        canActivate: [LoginGuardHL]
+      },
+    ]
   },
 ];
 

static/src/app/request/sql-dashboard/sql-dashboard.component.html

@@ -1,16 +1,16 @@
 <div class="overview">
-  <h3>SQL Dashboard</h3>
+  <h3>{{'request.sql.dashboard.headline' | translate}}</h3>
 
   <div class="table-container">
-    <label>Beförderungsanträge</label>
+    <label>{{'request.confirm.promotion.headline' | translate}}</label>
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Teilnehmer</th>
-        <th class="col-sm-1">Alter Rang</th>
-        <th class="col-sm-1">Neuer Rang</th>
-        <th class="col-sm-1 ">Antragsteller</th>
-        <th class="col-sm-1 text-center">Datum</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.participant' | translate}}</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.before' | translate}}</th>
+        <th class="col-sm-1">{{'request.confirm.promotion.table.head.rank.after' | translate}}</th>
+        <th class="col-sm-1 ">{{'request.confirm.promotion.table.head.requester' | translate}}</th>
+        <th class="col-sm-1 text-center">{{'request.confirm.promotion.table.head.date' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let promotion of promotions">
@@ -36,16 +36,16 @@
   </div>
 
   <div class="table-container">
-    <label>Anträge für Orden/ Auszeichnungen</label>
+    <label>{{'request.confirm.award.headline' | translate}}</label>
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Teilnehmer</th>
-        <th class="col-sm-1">Bild</th>
-        <th class="col-sm-2">Bezeichnung</th>
-        <th class="col-sm-2">Begründung</th>
-        <th class="col-sm-1 ">Antragsteller</th>
-        <th class="col-sm-1 text-right">Datum</th>
+        <th class="col-sm-1">{{'request.confirm.award.table.head.participant' | translate}}</th>
+        <th class="col-sm-1"></th>
+        <th class="col-sm-2">{{'request.confirm.award.table.head.award' | translate}}</th>
+        <th class="col-sm-2">{{'request.confirm.award.table.head.reason' | translate}}</th>
+        <th class="col-sm-1 ">{{'request.confirm.award.table.head.requester' | translate}}</th>
+        <th class="col-sm-1 text-right">{{'request.confirm.award.table.head.date' | translate}}</th>
       </tr>
       </thead>
       <tbody *ngFor="let award of awards">

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

@@ -1,44 +1,43 @@
 <form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
-  <h3 *ngIf="squad._id">Squad editieren</h3>
-  <h3 *ngIf="!squad._id">Neues Squad hinzufügen</h3>
+  <h3 *ngIf="squad._id">{{'squad.submit.edit.headline' | translate}}</h3>
+  <h3 *ngIf="!squad._id">{{'squad.submit.new.headline' | translate}}</h3>
 
   <div class="form-group">
-    <label for="title">Name</label>
+    <label for="title">{{'squad.submit.field.name' | translate}}</label>
     <input type="text" class="form-control"
            [(ngModel)]="squad.name"
            name="title"
            id="title"
            required maxlength="50"/>
-
-    <show-error displayName="Name" controlPath="title"></show-error>
+    <show-error displayName="{{'squad.submit.field.name' | translate}}" controlPath="title"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="fraction">Fraktion</label>
+    <label for="fraction">{{'squad.submit.field.fraction' | translate}}</label>
     <select id="fraction" name="fraction" class="form-control btn dropdown-toggle"
             required
             [(ngModel)]="squad.fraction">
       <option value="OPFOR">{{fraction.OPFOR}}</option>
       <option value="BLUFOR">{{fraction.BLUFOR}}</option>
     </select>
-    <show-error displayName="Fraktion" controlPath="fraction"></show-error>
+    <show-error displayName="{{'squad.submit.field.fraction' | translate}}" controlPath="fraction"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="sort">Sortierung</label>
+    <label for="sort">{{'squad.submit.field.sort' | translate}}</label>
     <input id="sort" name="sort" type="number" class="form-control btn dropdown-toggle"
            [(ngModel)]="squad.sortingNumber">
-    <show-error displayName="Sortierung" controlPath="sort"></show-error>
+    <show-error displayName="{{'squad.submit.field.sort' | translate}}" controlPath="sort"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="logo">Logo</label>
+    <label for="logo">{{'squad.submit.field.logo' | translate}}</label>
     <input id="logo" name="logo" class="ui-button form-control" type="file"
            #fileInput
            accept="image/png"
            (change)="fileChange($event)">
     <span class="label label-bg label-danger center-block" style="font-size:small" *ngIf="showImageError">
-        Bild muss im PNG Format vorliegen
+        {{'squad.submit.error.logo.type' | translate}}
     </span>
 
     <img class="preview-image" src="{{imagePreviewSrc}}">
@@ -47,7 +46,7 @@
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'squad.submit.button.cancel' | translate}}
   </button>
 
   <button id="save"
@@ -55,6 +54,6 @@
           (click)="saveSquad(fileInput)"
           class="btn btn-default"
           [disabled]="!form.valid">
-    Bestätigen
+    {{'squad.submit.button.submit' | translate}}
   </button>
 </form>

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

@@ -7,6 +7,7 @@ import {Subscription} from 'rxjs/Subscription';
 import {Fraction} from '../../utils/fraction.enum';
 import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
 import {Message} from '../../i18n/de.messages';
+import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
@@ -34,7 +35,8 @@ export class EditSquadComponent implements OnInit, OnDestroy {
   constructor(private route: ActivatedRoute,
               private router: Router,
               private squadService: SquadService,
-              private snackBarService: SnackBarService) {
+              private snackBarService: SnackBarService,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -73,7 +75,12 @@ export class EditSquadComponent implements OnInit, OnDestroy {
               this.router.navigate(['..'], {relativeTo: this.route});
             });
       } else {
-        return window.alert(`Bild ist ein Pflichtfeld`);
+        this.translate.get('squad.submit.field.logo').subscribe((fieldNameLogo) => {
+          this.translate.get('public.error.message.required',
+            {fieldName: fieldNameLogo}).subscribe((message) => {
+            this.snackBarService.showError(message, 4000);
+          })
+        });
       }
     } else {
       if (this.fileList) {
@@ -95,12 +102,4 @@ export class EditSquadComponent implements OnInit, OnDestroy {
     this.router.navigate([this.squad._id ? '../..' : '..'], {relativeTo: this.route});
     return false;
   }
-
-  canDeactivate(): boolean {
-    if (this.saved || !this.form.dirty) {
-      return true;
-    }
-    return window.confirm(`Ihr Formular besitzt ungespeicherte Änderungen, möchten Sie die Seite wirklich verlassen?`);
-  }
-
 }

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

@@ -12,7 +12,9 @@
 
     <div class="col-xs-4">
       <img src="{{imageSrc}}" height="50px" class="squad-list-preview">
-      <span (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="glyphicon glyphicon-trash trash"></span>
+      <span (click)="delete(); $event.stopPropagation()"
+            matTooltip="{{'squad.modify.delete' | translate}}"
+            class="glyphicon glyphicon-trash trash"></span>
     </div>
   </div>
 </div>

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

@@ -2,7 +2,7 @@
   <cc-list-filter
     [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
                       {label: fraction.OPFOR, value: 'OPFOR'}]"
-    [addButton]="{svgIcon: 'add', tooltip: 'Neues Squad hinzufügen'}"
+    [addButton]="{svgIcon: 'add', tooltip: 'squad.list.tooltip.new'}"
     (executeSearch)="filterSquads($event)"
     (openAddFrom)="openNewSquadForm()">
   </cc-list-filter>

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

@@ -8,6 +8,7 @@ import {SquadService} from '../../services/army-management/squad.service';
 import {Fraction} from '../../utils/fraction.enum';
 import {UIHelpers} from '../../utils/global.helpers';
 import {MatButtonToggleGroup} from '@angular/material';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'cc-squad-list',
@@ -28,7 +29,8 @@ export class SquadListComponent implements OnInit {
 
   constructor(private squadService: SquadService,
               private router: Router,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -54,11 +56,16 @@ export class SquadListComponent implements OnInit {
 
   deleteSquad(squad) {
     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) => {
-          });
-    }
+    this.translate.get('squad.list.delete.confirm', {
+      name: squad.name,
+      fraction: fraction
+    }).subscribe((confirmQuestion) => {
+      if (confirm(confirmQuestion)) {
+        this.squadService.deleteSquad(squad)
+            .subscribe((res) => {
+            });
+      }
+    });
   }
 
   filterSquads(group?: MatButtonToggleGroup) {

static/src/app/squads/squads.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

static/src/app/squads/squads.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'cc-squads-root',
+  templateUrl: './squads.component.html',
+  styleUrls: ['./squads.component.scss']
+})
+export class SquadsComponent {
+
+  constructor(private translate: TranslateService) {
+    this.translate.setDefaultLang('de');
+  }
+}

static/src/app/squads/squads.module.ts

@@ -4,11 +4,36 @@ import {SharedModule} from '../shared.module';
 import {squadRouterModule, squadsRoutingComponents} from './squads.routing';
 import {SquadStore} from '../services/stores/squad.store';
 import {SquadService} from '../services/army-management/squad.service';
+import {HttpClient} from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/squads/', '.json');
+}
 
 @NgModule({
   declarations: squadsRoutingComponents,
-  imports: [CommonModule, SharedModule, squadRouterModule],
-  providers: [SquadStore, SquadService]
+
+  imports: [
+    CommonModule,
+    SharedModule,
+    squadRouterModule,
+
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      },
+      isolate: true
+    })
+  ],
+
+  providers: [
+    SquadStore,
+    SquadService
+  ]
 })
 export class SquadsModule {
   static routes = squadRouterModule;

static/src/app/squads/squads.routing.ts

@@ -3,8 +3,13 @@ import {SquadListComponent} from './squad-list/squad-list.component';
 import {EditSquadComponent} from './edit-squad/edit-squad.component';
 import {ModuleWithProviders} from '@angular/core';
 import {SquadItemComponent} from './squad-list/squad-item.component';
+import {SquadsComponent} from './squads.component';
 
 export const squadsRoutes: Routes = [
+  {
+    path: '',
+    component: SquadsComponent
+  },
   {
     path: '',
     component: SquadListComponent,
@@ -19,9 +24,10 @@ export const squadsRoutes: Routes = [
     path: 'edit/:id',
     component: EditSquadComponent,
     outlet: 'right'
-  }];
+  }
+];
 
 export const squadRouterModule: ModuleWithProviders = RouterModule.forChild(squadsRoutes);
 
-export const squadsRoutingComponents = [SquadItemComponent, SquadListComponent, EditSquadComponent];
+export const squadsRoutingComponents = [SquadsComponent, SquadItemComponent, SquadListComponent, EditSquadComponent];
 

static/src/app/statistic/war/scoreboard/scoreboard.component.ts

@@ -5,6 +5,7 @@ import {PlayerUtils} from '../../../utils/player-utils';
 import {saveAs} from 'file-saver/FileSaver';
 import {MatSort} from '@angular/material';
 import {SortUtils} from '../../../utils/sort-utils';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'cc-scoreboard',
@@ -37,7 +38,8 @@ export class ScoreboardComponent implements OnChanges {
 
   displayedColumns = this.tableHead.map(head => head.prop);
 
-  constructor(private elRef: ElementRef) {
+  constructor(private elRef: ElementRef,
+              private translate: TranslateService) {
     this.displayedColumns.push('interact');
   }
 
@@ -93,12 +95,13 @@ export class ScoreboardComponent implements OnChanges {
   exportCSV() {
     let csvOut = '';
     for (let i = 0; i < this.tableHead.length; i++) {
-      csvOut += this.tableHead[i].head;
-      if (i !== this.tableHead.length - 1) {
-        csvOut += ',';
-      }
+      this.translate.get(this.tableHead[i].head).subscribe((translated) => {
+        csvOut += translated;
+        if (i !== this.tableHead.length - 1) {
+          csvOut += ',';
+        }
+      });
     }
-
     for (let j = 0; j < this.war.players.length; j++) {
       const player = this.war.players[j];
       csvOut += '\r\n';

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

@@ -26,11 +26,11 @@
   </div>
 
   <div class="form-group" *ngIf="!war._id">
-    <label for="log">Logfile</label>
+    <label for="log">{{'stats.war.submit.logfile' | translate}}</label>
     <input id="log" name="log" class="ui-button form-control" type="file"
            (change)="fileChange($event)">
     <span class="label label-bg label-danger center-block" style="font-size:small" *ngIf="showFileError">
-        Logfile muss im Format RPT, LOG oder TXT vorliegen
+        {{'stats.war.submit.error.file.format' | translate}}
     </span>
   </div>
 

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

@@ -8,6 +8,7 @@ import {SnackBarService} from '../../../services/user-interface/snack-bar/snack-
 import {SpinnerService} from '../../../services/user-interface/spinner/spinner.service';
 import {Subscription} from 'rxjs';
 import {Fraction} from '../../../utils/fraction.enum';
+import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
@@ -38,6 +39,7 @@ export class WarSubmitComponent {
               private warService: WarService,
               private snackBarService: SnackBarService,
               private spinnerService: SpinnerService,
+              private translate: TranslateService,
               public campaignService: CampaignService) {
     this.subscription = this.route.params
                             .map(params => params['id'])
@@ -61,7 +63,12 @@ export class WarSubmitComponent {
 
   saveWar() {
     if (!this.fileList) {
-      return window.alert(`Logfile ist ein Pflichtfeld`);
+      this.translate.get('stats.war.submit.logfile').subscribe((fieldNameLogfile) => {
+        this.translate.get('public.error.message.required',
+          {fieldName: fieldNameLogfile}).subscribe((message) => {
+          this.snackBarService.showError(message, 4000);
+        })
+      })
     }
     const file: File = this.fileList[0];
     this.loading = true;

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

@@ -1,8 +1,8 @@
 <form #form="ngForm" class="overview">
-  <h3>Teilnehmer auszeichnen</h3>
+  <h3>{{'users.award.headline' | translate}}</h3>
 
   <div class="form-group">
-    <label for="decoration">Auszeichnung</label>
+    <label for="decoration">{{'users.award.field.decoration' | translate}}</label>
     <select class="form-control"
             name="decoration"
             id="decoration"
@@ -11,14 +11,13 @@
             [ngModel]="0"
             required
             style="min-width: 200px;">
-      <option [value]="0">Auswählen...</option>
+      <option [value]="0">{{'users.award.field.decoration.placeholder' | translate}}</option>
       <option *ngFor="let deco of decorations" [value]="deco._id">
         {{deco.fraction == 'BLUFOR'? fraction.BLUFOR : deco.fraction == 'OPFOR'? fraction.OPFOR : 'Global'}}:
         {{deco.name}}
       </option>
     </select>
-
-    <show-error displayName="Auszeichnung" controlPath="decoration"></show-error>
+    <show-error displayName="{{'users.award.field.decoration' | translate}}" controlPath="decoration"></show-error>
   </div>
 
   <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
@@ -38,37 +37,40 @@
   </div>
 
   <div class="form-group">
-    <label for="reason">Begründung</label>
+    <label for="reason">{{'users.award.field.reason' | translate}}</label>
     <textarea class="form-control center-block" name="reason" [ngModel]="undefined" required
-              id="reason" placeholder="Begründung eingeben..." rows="3" #awardTextArea></textarea>
-    <show-error displayName="Begründung" controlPath="reason"></show-error>
+              id="reason" placeholder="{{'users.award.field.reason.placeholder' | translate}}"
+              rows="3" #awardTextArea>
+    </textarea>
+    <show-error displayName="{{'users.award.field.reason' | translate}}" controlPath="reason"></show-error>
   </div>
 
-
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'users.award.button.cancel' | translate}}
   </button>
 
   <button id="save"
           (click)="addAwarding(decorationField, awardTextArea, decoPreview, decoDescription)"
           class="btn btn-default"
           [disabled]="decorationField.value === '0' || !form.valid">
-    Bestätigen
+    {{'users.award.button.submit' | translate}}
   </button>
 
   <div class="table-container">
     <table class="table table-hover">
       <thead>
       <tr>
-        <th class="col-sm-1">Bild</th>
-        <th class="col-sm-2">Bezeichnung</th>
-        <th class="col-sm-2">Begründung</th>
-        <th class="col-sm-1 text-right">Datum</th>
-        <th class="col-sm-1 text-center">Status</th>
+        <th class="col-sm-1">{{'users.award.table.head.image' | translate}}</th>
+        <th class="col-sm-2">{{'users.award.table.head.name' | translate}}</th>
+        <th class="col-sm-2">{{'users.award.table.head.reason' | translate}}</th>
+        <th class="col-sm-1 text-right">{{'users.award.table.head.date' | translate}}</th>
+        <th class="col-sm-1 text-center">{{'users.award.table.head.status' | translate}}</th>
         <th class="col-sm-1 text-center">
-          <span class="btn btn-default" (click)="deleteAwarding()">Löschen</span>
+          <span class="btn btn-default" (click)="deleteAwarding()">
+            {{'users.award.table.button.delete' | translate}}
+          </span>
         </th>
       </tr>
       </thead>
@@ -90,7 +92,9 @@
           <a class="small text-nowrap">{{award.date | date: 'dd.MM.yyyy'}}</a>
         </td>
         <td class="text-center">
-          {{award.confirmed === 0 ? 'In Bearbeitung' : (award.confirmed === 1 ? 'Genehmigt' : 'Abgelehnt')}}
+          {{award.confirmed === 0 ?
+          awardStatus['users.award.table.status.in.progress'] : (award.confirmed === 1 ?
+          awardStatus['users.award.table.status.approved']: awardStatus['users.award.table.status.rejected'])}}
         </td>
         <td class="text-center">
           <label>

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

@@ -7,6 +7,7 @@ import {DecorationService} from '../../services/army-management/decoration.servi
 import {Fraction} from '../../utils/fraction.enum';
 import {SnackBarService} from '../../services/user-interface/snack-bar/snack-bar.service';
 import {Message} from '../../i18n/de.messages';
+import {TranslateService} from '@ngx-translate/core';
 
 
 @Component({
@@ -23,6 +24,8 @@ export class AwardUserComponent implements OnInit {
 
   awards: Award[];
 
+  awardStatus = {};
+
   decoPreviewDisplay = 'none';
 
   readonly fraction = Fraction;
@@ -31,10 +34,18 @@ export class AwardUserComponent implements OnInit {
               private route: ActivatedRoute,
               private awardingService: AwardingService,
               private decorationService: DecorationService,
-              private snackBarService: SnackBarService) {
+              private snackBarService: SnackBarService,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
+    ['users.award.table.status.in.progress',
+      'users.award.table.status.approved',
+      'users.award.table.status.rejected'].forEach((i18n) => {
+      this.translate.get(i18n).subscribe((translated) => {
+        this.awardStatus[i18n] = translated;
+      })
+    });
 
     this.decorationService.findDecorations().subscribe(decorations => {
       this.decorations = decorations;

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

@@ -1,38 +1,36 @@
 <form #form="ngForm" (keydown.enter)="$event.preventDefault()" class="overview">
-  <h3 *ngIf="user._id">Teilnehmer editieren</h3>
-  <h3 *ngIf="!user._id">Neuen Teilnehmer hinzufügen</h3>
+  <h3 *ngIf="user._id">{{'user.submit.headline.edit' | translate}}</h3>
+  <h3 *ngIf="!user._id">{{'user.submit.headline.new' | translate}}</h3>
 
   <div class="form-group">
-    <label for="title">Name</label>
+    <label for="title">{{'user.submit.field.name' | translate}}</label>
     <input class="form-control"
            [(ngModel)]="user.username"
            name="title"
            id="title"
            required
            maxlength="50"/>
-
-    <show-error displayName="Name" controlPath="title"></show-error>
+    <show-error displayName="{{'user.submit.field.name' | translate}}" controlPath="title"></show-error>
   </div>
 
   <div class="form-group">
-    <label for="squad">Squad</label>
+    <label for="squad">{{'user.submit.field.squad' | translate}}</label>
     <select class="form-control"
             name="squad"
             id="squad"
             [(ngModel)]="user.squadId"
             [compareWith]="equals"
             (change)="toggleRanks()">
-      <option [value]="0">Ohne Fraktion/ Squad</option>
+      <option [value]="0">{{'user.submit.field.squad.not.assigned' | translate}}</option>
       <option *ngFor="let squad of squads" [ngValue]="squad">
         {{squad.fraction == 'BLUFOR'? fraction.BLUFOR : fraction.OPFOR}}: {{squad.name}}
       </option>
     </select>
-
-    <show-error displayName="Squad" controlPath="squad"></show-error>
+    <show-error displayName="{{'user.submit.field.squad' | translate}}" controlPath="squad"></show-error>
   </div>
 
   <div class="form-group" [style.display]="ranksDisplay">
-    <label for="rank">Rang</label>
+    <label for="rank">{{'user.submit.field.rank' | translate}}</label>
     <select class="form-control"
             name="rank"
             id="rank" [ngModel]="user.rankLvl"
@@ -40,14 +38,13 @@
             style="min-width: 200px;">
       <option *ngFor="let rank of ranks" [value]="rank.level">{{rank.name}}</option>
     </select>
-
-    <show-error displayName="Rang" controlPath="rank"></show-error>
+    <show-error displayName="{{'user.submit.field.rank' | translate}}" controlPath="rank"></show-error>
   </div>
 
   <button id="cancel"
           (click)="cancel()"
           class="btn btn-default">
-    Abbrechen
+    {{'user.submit.button.cancel' | translate}}
   </button>
 
   <button id="save"
@@ -55,6 +52,6 @@
           (click)="saveUser(rankLevel.value)"
           class="btn btn-default"
           [disabled]="!form.valid">
-    Bestätigen
+    {{'user.submit.button.submit' | translate}}
   </button>
 </form>

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

@@ -130,5 +130,4 @@ export class EditUserComponent implements OnInit {
       return o1._id === o2._id;
     }
   }
-
 }

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

@@ -9,12 +9,14 @@
       <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>
+      <small *ngIf="!user.squadId">{{'users.list.item.label.no.squad' | translate}}</small>
     </div>
 
     <div class="col-sm-4">
-      <mat-icon (click)="delete(); $event.stopPropagation()" matTooltip="Löschen" class="pull-right" style="margin-top: 8px;" svgIcon="delete"></mat-icon>
-      <mat-icon (click)="award(); $event.stopPropagation()" matTooltip="Auszeichnungen" class="icon-award pull-right" svgIcon="award"></mat-icon>
+      <mat-icon (click)="delete(); $event.stopPropagation()" matTooltip="{{'users.list.tooltip.delete' | translate}}"
+                class="pull-right" style="margin-top: 8px;" svgIcon="delete"></mat-icon>
+      <mat-icon (click)="award(); $event.stopPropagation()" matTooltip="{{'users.list.tooltip.awards' | translate}}"
+                class="icon-award pull-right" svgIcon="award"></mat-icon>
     </div>
   </div>
 </div>

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

@@ -2,8 +2,8 @@
   <cc-list-filter
     [filterButtons]="[{label: fraction.BLUFOR, value: 'BLUFOR'},
                       {label: fraction.OPFOR, value: 'OPFOR'},
-                      {label: 'Ohne Squad', value: 'UNASSIGNED'}]"
-    [addButton]="{svgIcon: 'add-user', tooltip: 'Neuen Teilnehmer hinzufügen'}"
+                      {label: 'users.list.filter.no.squad', value: 'UNASSIGNED'}]"
+    [addButton]="{svgIcon: 'add-user', tooltip: 'users.list.tooltip.new'}"
     (executeSearch)="filterUsers(undefined, $event)"
     (openAddFrom)="openNewUserForm()">
   </cc-list-filter>

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

@@ -9,6 +9,7 @@ import {ADD, LOAD} from '../../services/stores/user.store';
 import {Fraction} from '../../utils/fraction.enum';
 import {MatButtonToggleGroup} from '@angular/material';
 import {UIHelpers} from '../../utils/global.helpers';
+import {TranslateService} from '@ngx-translate/core';
 
 @Component({
   selector: 'cc-user-list',
@@ -37,7 +38,8 @@ export class UserListComponent implements OnInit {
 
   constructor(private userService: UserService,
               private router: Router,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              private translate: TranslateService) {
   }
 
   ngOnInit() {
@@ -67,11 +69,13 @@ export class UserListComponent implements OnInit {
   }
 
   deleteUser(user: User) {
-    if (confirm('Soll der Teilnehmer "' + user.username + '" wirklich gelöscht werden?')) {
-      this.userService.deleteUser(user)
-          .subscribe((res) => {
-          });
-    }
+    this.translate.get('squad.list.delete.confirm', {name: user.username}).subscribe((confirmQuestion) => {
+      if (confirm(confirmQuestion)) {
+        this.userService.deleteUser(user)
+            .subscribe((res) => {
+            });
+      }
+    });
   }
 
   filterUsers(action?, group?: MatButtonToggleGroup) {

static/src/app/users/users.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

static/src/app/users/users.component.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'cc-users-root',
+  templateUrl: './users.component.html',
+  styleUrls: ['./users.component.scss']
+})
+export class UsersComponent {
+
+  constructor(private translate: TranslateService) {
+    this.translate.setDefaultLang('de');
+  }
+}

static/src/app/users/users.module.ts

@@ -3,10 +3,32 @@ import {usersRouterModule, usersRoutingComponents} from './users.routing';
 import {CommonModule} from '@angular/common';
 import {SharedModule} from '../shared.module';
 import {InfiniteScrollModule} from 'ngx-infinite-scroll';
+import {HttpClient} from '@angular/common/http';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
+
+export function createTranslateLoader(http: HttpClient) {
+  return new TranslateHttpLoader(http, './assets/i18n/users/', '.json');
+}
 
 @NgModule({
   declarations: usersRoutingComponents,
-  imports: [CommonModule, SharedModule, InfiniteScrollModule, usersRouterModule],
+
+  imports: [
+    CommonModule,
+    SharedModule,
+    InfiniteScrollModule,
+    usersRouterModule,
+
+    TranslateModule.forChild({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [HttpClient]
+      },
+      isolate: true
+    })
+  ],
 })
 export class UsersModule {
   static routes = usersRouterModule;

static/src/app/users/users.routing.ts

@@ -4,8 +4,13 @@ import {UserListComponent} from './user-list/user-list.component';
 import {AwardUserComponent} from './award-user/award-user.component';
 import {ModuleWithProviders} from '@angular/core';
 import {UserItemComponent} from './user-list/user-item.component';
+import {UsersComponent} from './users.component';
 
 export const usersRoutes: Routes = [
+  {
+    path: '',
+    component: UsersComponent,
+  },
   {
     path: '',
     component: UserListComponent,
@@ -30,4 +35,5 @@ export const usersRoutes: Routes = [
 
 export const usersRouterModule: ModuleWithProviders = RouterModule.forChild(usersRoutes);
 
-export const usersRoutingComponents = [UserItemComponent, UserListComponent, EditUserComponent, AwardUserComponent];
+export const usersRoutingComponents = [UsersComponent, UserItemComponent, UserListComponent, EditUserComponent,
+  AwardUserComponent];

static/src/assets/i18n/app/de.json

@@ -1,4 +1,13 @@
 {
+  "public.error.headline": "Oops, diese Seite kennen wir nicht...",
+  "public.error.message.required": "{{fieldName}} ist ein Pflichtfeld",
+  "public.error.message.min.length": "{{fieldName}} muss mindestens {{boundary}} Zeichen enthalten",
+  "public.error.message.max.length": "{{fieldName}} darf maximal {{boundary}} Zeichen enthalten",
+  "public.error.message.email": "Bitte geben Sie eine gültige E-Mail Adresse an",
+  "public.error.message.no.user": "Der eingetragene Benutzer existiert nicht.",
+  "public.error.message.default": "{{fieldName}} ist nicht valide",
+  "public.common.search.button": "Suchen",
+
   "navigation.top.board": "Zum Forum",
   "navigation.top.overview": "Armeeübersicht",
   "navigation.top.ranks": "Ränge",
@@ -34,5 +43,11 @@
   "public.army.headline": "Übersicht über alle Spieler, Squads und Armeen",
   "public army.squad.members": "Mitglieder:",
   "public.army.members": "Armeemitglieder:",
-  "public.error.headline": "Oops, diese Seite kennen wir nicht..."
+
+  "public.army.member.button.back": "Zurück",
+  "public.army.member.button.copy": "kopieren",
+  "public.army.member.headline": "Auszeichnungen von {{name}}",
+  "public.army.member.awards.title": "Bezeichnung",
+  "public.army.member.awards.reason": "Begründung",
+  "public.army.member.awards.date": "Verliehen am"
 }

static/src/assets/i18n/decorations/de.json

@@ -0,0 +1,31 @@
+{
+  "public.error.message.required": "{{fieldName}} ist ein Pflichtfeld",
+  "public.error.message.min.length": "{{fieldName}} muss mindestens {{boundary}} Zeichen enthalten",
+  "public.error.message.max.length": "{{fieldName}} darf maximal {{boundary}} Zeichen enthalten",
+  "public.error.message.email": "Bitte geben Sie eine gültige E-Mail Adresse an",
+  "public.error.message.no.user": "Der eingetragene Benutzer existiert nicht.",
+  "public.error.message.default": "{{fieldName}} ist nicht valide",
+  "public.common.search.button": "Suchen",
+
+  "decorations.list.button.add": "Neue Auszeichnung hinzufügen",
+  "decorations.list.button.delete": "Löschen",
+  "decorations.list.filter.global": "Global",
+  "decorations.list.delete.confirm": "Soll die Auszeichnung '{{name}}' ({{fraction}}) wirklich gelöscht werden?",
+
+  "decorations.item.label.sort": " - Sortierung {{value}}",
+
+  "decorations.submit.headline.edit": "Auszeichnung bearbeiten",
+  "decorations.submit.headline.new": "Neue Auszeichnung hinzufügen",
+  "decorations.submit.field.name": "Name",
+  "decorations.submit.field.fraction": "Fraktion",
+  "decorations.submit.field.fraction.global": "Global",
+  "decorations.submit.field.type": "Art",
+  "decorations.submit.field.type.ribbon": "Ordensband",
+  "decorations.submit.field.type.medal": "Orden",
+  "decorations.submit.field.sort": "Sortierung",
+  "decorations.submit.field.description": "Beschreibung",
+  "decorations.submit.field.image": "Bild",
+  "decorations.submit.field.image.error.type": "Bild muss im PNG Format vorliegen",
+  "decorations.submit,button.submit": "Bestätigen",
+  "decorations.submit,button.cancel": "Abbrechen"
+}

static/src/assets/i18n/decorations/en.json

@@ -0,0 +1,3 @@
+{
+
+}

static/src/assets/i18n/ranks/de.json

@@ -0,0 +1,24 @@
+{
+  "public.error.message.required": "{{fieldName}} ist ein Pflichtfeld",
+  "public.error.message.min.length": "{{fieldName}} muss mindestens {{boundary}} Zeichen enthalten",
+  "public.error.message.max.length": "{{fieldName}} darf maximal {{boundary}} Zeichen enthalten",
+  "public.error.message.email": "Bitte geben Sie eine gültige E-Mail Adresse an",
+  "public.error.message.no.user": "Der eingetragene Benutzer existiert nicht.",
+  "public.error.message.default": "{{fieldName}} ist nicht valide",
+  "public.common.search.button": "Suchen",
+
+  "ranks.list.button.add": "Neuen Rank hinzufügen",
+  "ranks.list.button.delete": "Löschen",
+  "ranks.list.delete.confirm": "Soll der Rang '{{name}}' ({{fraction}}) wirklich gelöscht werden?",
+  "ranks.list.item.label.level": " - Stufe {{level}}",
+
+  "ranks.submit.headline.new": "Neuen Rang hinzufügen",
+  "ranks.submit.headline.edit": "Rang bearbeiten",
+  "ranks.submit.field.name": "Name",
+  "ranks.submit.field.fraction": "Fraktion",
+  "ranks.submit.field.level": "Stufe",
+  "ranks.submit.field.image": "Bild",
+  "ranks.submit.field.image.error.format": "Bild muss im PNG Format vorliegen",
+  "ranks.submit.button.submit": "Bestätigen",
+  "ranks.submit.button.cancel": "Abbrechen"
+}

static/src/assets/i18n/ranks/en.json

@@ -0,0 +1,3 @@
+{
+
+}

static/src/assets/i18n/request/de.json

@@ -0,0 +1,72 @@
+{
+  "public.error.message.required": "{{fieldName}} ist ein Pflichtfeld",
+  "public.error.message.min.length": "{{fieldName}} muss mindestens {{boundary}} Zeichen enthalten",
+  "public.error.message.max.length": "{{fieldName}} darf maximal {{boundary}} Zeichen enthalten",
+  "public.error.message.email": "Bitte geben Sie eine gültige E-Mail Adresse an",
+  "public.error.message.no.user": "Der eingetragene Benutzer existiert nicht.",
+  "public.error.message.default": "{{fieldName}} ist nicht valide",
+  "public.common.search.button": "Suchen",
+
+  "request.confirm.award.headline": "Offene Anträge - Auszeichnungen",
+  "request.confirm.award.table.head.participant": "Teilnehmer",
+  "request.confirm.award.table.head.award": "Auszeichnung",
+  "request.confirm.award.table.head.reason": "Begründung",
+  "request.confirm.award.table.head.requester": "Antragsteller",
+  "request.confirm.award.table.head.date": "Datum",
+  "request.confirm.award.table.head.action": "Aktion",
+  "request.confirm.award.table.reject.reason.placeholder": "Begründung für Ablehnung (optional)",
+  "request.confirm.award.table.button.action.accept": "Bestätigen",
+  "request.confirm.award.table.button.action.reject": "Ablehnen",
+
+  "request.confirm.promotion.headline": "Offene Anträge - Beförderungen",
+  "request.confirm.promotion.table.head.participant": "Teilnehmer",
+  "request.confirm.promotion.table.head.rank.before": "Alter Rang",
+  "request.confirm.promotion.table.head.rank.after": "Neuer Rang",
+  "request.confirm.promotion.table.head.requester": "Antragsteller",
+  "request.confirm.promotion.table.head.date": "Datum",
+  "request.confirm.promotion.table.head.status": "Status",
+  "request.confirm.promotion.table.head.action": "Aktion",
+  "request.confirm.promotion.table.reject.reason.placeholder": "Begründung für Ablehnung (optional)",
+  "request.confirm.promotion.table.button.action.accept": "Bestätigen",
+  "request.confirm.promotion.table.button.action.reject": "Ablehnen",
+  "request.confirm.promotion.table.status.progressing": "In Bearbeitung",
+  "request.confirm.promotion.table.status.accepted": "Genehmigt",
+  "request.confirm.promotion.table.status.rejected": "Abgelehnt",
+
+  "request.award.headline": "Auszeichnung beantragen",
+  "request.award.field.user": "Teilnehmer",
+  "request.award.field.user.placeholder": "Auswählen...",
+  "request.award.field.award": "Auszeichnung",
+  "request.award.field.award.placeholder": "Auswählen...",
+  "request.award.field.reason": "Begründung",
+  "request.award.field.reason.placeholder": "Begründung eingeben...",
+  "request.award.button.cancel": "Abbrechen",
+  "request.award.button.submit": "Bestätigen",
+  "request.award.table.head.image": "Bild",
+  "request.award.table.head.name": "Bezeichnung",
+  "request.award.table.head.reason": "Begründung",
+  "request.award.table.head.requester": "Antragsteller",
+  "request.award.table.head.date": "Datum",
+  "request.award.table.head.status": "Status",
+  "request.award.table.head.reject.reason": "Grund für Ablehnung",
+  "request.award.table.status.progressing": "In Bearbeitung",
+  "request.award.table.status.accepted": "Genehmigt",
+  "request.award.table.status.rejected": "Abgelehnt",
+
+  "request.promotion.headline": "Beförderung beantragen",
+  "request.promotion.field.participant": "Teilnehmer",
+  "request.promotion.field.participant.placeholder": "Auswählen...",
+  "request.promotion.field.rank.before": "Aktueller Rang",
+  "request.promotion.field.rank.after": "Neuer Rang",
+  "request.promotion.button.submit": "Bestätigen",
+  "request.promotion.button.cancel": "Abbrechen",
+  "request.promotion.table.head.participant": "Teilnehmer",
+  "request.promotion.table.head.rank.before": "Alter Rang",
+  "request.promotion.table.head.rank.after": "Neuer Rang",
+  "request.promotion.table.head.requester": "Antragsteller",
+  "request.promotion.table.head.date": "Datum",
+  "request.promotion.table.head.status": "Status",
+  "request.promotion.table.head.reject.reason": "Grund für Ablehnung",
+
+  "request.sql.dashboard.headline":"SQL Dashboard"
+}

static/src/assets/i18n/request/en.json

@@ -0,0 +1,2 @@
+{
+}

static/src/assets/i18n/squads/de.json

@@ -0,0 +1,22 @@
+{
+  "public.error.message.required": "{{fieldName}} ist ein Pflichtfeld",
+  "public.error.message.min.length": "{{fieldName}} muss mindestens {{boundary}} Zeichen enthalten",
+  "public.error.message.max.length": "{{fieldName}} darf maximal {{boundary}} Zeichen enthalten",
+  "public.error.message.email": "Bitte geben Sie eine gültige E-Mail Adresse an",
+  "public.error.message.no.user": "Der eingetragene Benutzer existiert nicht.",
+  "public.error.message.default": "{{fieldName}} ist nicht valide",
+  "public.common.search.button": "Suchen",
+
+  "squad.list.tooltip.delete": "Löschen",
+  "squad.list.delete.confirm": "Soll das Squad '{{name}}' ({{fraction}}) wirklich gelöscht werden?",
+  "squad.list.tooltip.new": "Neues Squad hinzufügen",
+  "squad.submit.new.headline": "Neues Squad hinzufügen",
+  "squad.submit.edit.headline": "Squad bearbeiten",
+  "squad.submit.field.name": "Name",
+  "squad.submit.field.fraction": "Fraktion",
+  "squad.submit.field.sort": "Sortierung",
+  "squad.submit.field.logo": "Logo",
+  "squad.submit.error.logo.type": "Bild muss im PNG Format vorliegen",
+  "squad.submit.button.submit": "Bestätigen",
+  "squad.submit.button.cancel": "Abbrechen"
+}

static/src/assets/i18n/squads/en.json

@@ -0,0 +1,3 @@
+{
+
+}

static/src/assets/i18n/statistics/de.json

@@ -63,14 +63,24 @@
   "stats.war.submit.headline.edit": "Schlacht bearbeiten",
   "stats.war.submit.title": "Titel",
   "stats.war.submit.campaign": "Kampagne",
+  "stats.war.submit.logfile": "Logfile",
   "stats.war.submit.points": "Punkte",
   "stats.war.submit.final.budget": "Endbudget",
   "stats.war.submit.button.submit": "Bestätigen",
   "stats.war.submit.button.cancel": "Abbrechen",
+  "stats.war.submit.error.file.format": "Logfile muss im Format RPT, LOG oder TXT vorliegen",
 
   "stats.campaign.submit.headline.new": "Neue Kampagne hinzufügen",
   "stats.campaign.submit.headline.edit": "Kampagne editieren",
   "stats.campaign.submit.title": "Titel",
   "stats.campaign.submit.button.submit": "Bestätigen",
-  "stats.campaign.submit.button.cancel": "Abbrechen"
+  "stats.campaign.submit.button.cancel": "Abbrechen",
+
+  "public.error.message.required": "{{fieldName}} ist ein Pflichtfeld",
+  "public.error.message.min.length": "{{fieldName}} muss mindestens {{boundary}} Zeichen enthalten",
+  "public.error.message.max.length": "{{fieldName}} darf maximal {{boundary}} Zeichen enthalten",
+  "public.error.message.email": "Bitte geben Sie eine gültige E-Mail Adresse an",
+  "public.error.message.no.user": "Der eingetragene Benutzer existiert nicht.",
+  "public.error.message.default": "{{fieldName}} ist nicht valide",
+  "public.common.search.button": "Suchen"
 }

static/src/assets/i18n/users/de.json

@@ -0,0 +1,44 @@
+{
+  "public.error.message.required": "{{fieldName}} ist ein Pflichtfeld",
+  "public.error.message.min.length": "{{fieldName}} muss mindestens {{boundary}} Zeichen enthalten",
+  "public.error.message.max.length": "{{fieldName}} darf maximal {{boundary}} Zeichen enthalten",
+  "public.error.message.email": "Bitte geben Sie eine gültige E-Mail Adresse an",
+  "public.error.message.no.user": "Der eingetragene Benutzer existiert nicht.",
+  "public.error.message.default": "{{fieldName}} ist nicht valide",
+  "public.common.search.button": "Suchen",
+
+  "users.list.tooltip.new": "Neuen Teilnehmer hinzufügen",
+  "users.list.tooltip.delete": "Löschen",
+  "users.list.tooltip.awards": "Auszeichnungen",
+  "users.list.filter.no.squad": "Ohne Squad",
+  "users.list.item.label.no.squad": "ohne Squad/Fraktion",
+  "ranks.list.delete.confirm": "Soll der Teilnehmer '{{name}}' wirklich gelöscht werden?",
+
+  "users.award.headline": "Teilnehmer auszeichnen",
+  "users.award.field.decoration": "Auszeichnung",
+  "users.award.field.decoration.placeholder": "Auswählen...",
+  "users.award.field.reason": "Begründung",
+  "users.award.field.reason.placeholder": "Begründung eingeben...",
+  "users.award.button.submit": "Bestätigen",
+  "users.award.button.cancel": "Abbrechen",
+
+  "users.award.table.head.image": "Bild",
+  "users.award.table.head.name": "Bezeichnung",
+  "users.award.table.head.reason": "Begründung",
+  "users.award.table.head.date": "Datum",
+  "users.award.table.head.status": "Status",
+  "users.award.table.button.delete": "Löschen",
+
+  "users.award.table.status.in.progress": "In Bearbeitung",
+  "users.award.table.status.approved": "Genehmigt",
+  "users.award.table.status.rejected": "Abgelehnt",
+
+  "user.submit.headline.new": "Neuen Teilnehmer hinzufügen",
+  "user.submit.headline.edit": "Teilnehmer bearbeiten",
+  "user.submit.field.name": "Name",
+  "user.submit.field.squad": "Squad",
+  "user.submit.field.squad.not.assigned": "Ohne Fraktion/ Squad",
+  "user.submit.field.rank": "Rang",
+  "user.submit.button.submit": "Bestätigen",
+  "user.submit.button.cancel": "Abbrechen"
+}

static/src/assets/i18n/users/en.json

@@ -0,0 +1,3 @@
+{
+
+}