Add manage user i18n replacements

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

@@ -1,7 +1,8 @@
 <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

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/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

@@ -9,7 +9,7 @@ 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/squad/', '.json');
+  return new TranslateHttpLoader(http, './assets/i18n/squads/', '.json');
 }
 
 @NgModule({

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

@@ -3,12 +3,12 @@ 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 {SquadComponent} from './squad.component';
+import {SquadsComponent} from './squads.component';
 
 export const squadsRoutes: Routes = [
   {
     path: '',
-    component: SquadComponent
+    component: SquadsComponent
   },
   {
     path: '',
@@ -29,5 +29,5 @@ export const squadsRoutes: Routes = [
 
 export const squadRouterModule: ModuleWithProviders = RouterModule.forChild(squadsRoutes);
 
-export const squadsRoutingComponents = [SquadComponent, SquadItemComponent, SquadListComponent, EditSquadComponent];
+export const squadsRoutingComponents = [SquadsComponent, SquadItemComponent, SquadListComponent, EditSquadComponent];
 

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="{{'users.award.field.decoration' | translate}}" controlPath="decoration"></show-error>
-    <show-error displayName="Auszeichnung" 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>
+              id="reason" placeholder="{{'users.award.field.reason.placeholder' | translate}}"
-    <show-error displayName="Begründung" controlPath="reason"></show-error>
+              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-1">{{'users.award.table.head.image' | translate}}</th>
-        <th class="col-sm-2">Bezeichnung</th>
+        <th class="col-sm-2">{{'users.award.table.head.name' | translate}}</th>
-        <th class="col-sm-2">Begründung</th>
+        <th class="col-sm-2">{{'users.award.table.head.reason' | translate}}</th>
-        <th class="col-sm-1 text-right">Datum</th>
+        <th class="col-sm-1 text-right">{{'users.award.table.head.date' | translate}}</th>
-        <th class="col-sm-1 text-center">Status</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">{{'user.submit.headline.edit' | translate}}</h3>
-  <h3 *ngIf="!user._id">Neuen Teilnehmer hinzufügen</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="{{'user.submit.field.name' | translate}}" controlPath="title"></show-error>
-    <show-error displayName="Name" 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="{{'user.submit.field.squad' | translate}}" controlPath="squad"></show-error>
-    <show-error displayName="Squad" 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="{{'user.submit.field.rank' | translate}}" controlPath="rank"></show-error>
-    <show-error displayName="Rang" 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/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)="delete(); $event.stopPropagation()" matTooltip="{{'users.list.tooltip.delete' | translate}}"
-      <mat-icon (click)="award(); $event.stopPropagation()" matTooltip="Auszeichnungen" class="icon-award pull-right" svgIcon="award"></mat-icon>
+                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'}]"
+                      {label: 'users.list.filter.no.squad', value: 'UNASSIGNED'}]"
-    [addButton]="{svgIcon: 'add-user', tooltip: 'Neuen Teilnehmer hinzufügen'}"
+    [addButton]="{svgIcon: 'add-user', tooltip: 'users.list.tooltip.new'}"
     (executeSearch)="filterUsers(undefined, $event)"
     (openAddFrom)="openNewUserForm()">
   </cc-list-filter>

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

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

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

@@ -2,11 +2,11 @@ import {Component} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 
 @Component({
-  selector: 'cc-squad-root',
+  selector: 'cc-users-root',
-  templateUrl: './squad.component.html',
+  templateUrl: './users.component.html',
-  styleUrls: ['./squad.component.scss']
+  styleUrls: ['./users.component.scss']
 })
-export class SquadComponent {
+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/users/de.json

@@ -0,0 +1,44 @@
+{
+  "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",
+
+  "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",
+
+  "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 @@
+{
+
+}