Add i18n for squad management

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

@@ -6,7 +6,7 @@
   </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/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/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/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((fieldNameLogfile) => {
+          this.translate.get('public.error.message.required',
+            {fieldName: fieldNameLogfile}).subscribe((message) => {
+            return window.alert(message);
+          })
+        });
       }
     } 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.component.html

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

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

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'cc-squad-root',
+  templateUrl: './squad.component.html',
+  styleUrls: ['./squad.component.scss']
+})
+export class SquadComponent {
+
+  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/squad/', '.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 {SquadComponent} from './squad.component';
 
 export const squadsRoutes: Routes = [
+  {
+    path: '',
+    component: SquadComponent
+  },
   {
     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 = [SquadComponent, SquadItemComponent, SquadListComponent, EditSquadComponent];
 

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) => {
+          return window.alert(message);
+        })
+      })
     }
     const file: File = this.fileList[0];
     this.loading = true;

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",
@@ -33,13 +42,5 @@
 
   "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.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.army.members": "Armeemitglieder:"
 }

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

@@ -0,0 +1,22 @@
+{
+  "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",
+
+  "squad.list.tooltip.delete": "Löschen",
+  "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/squad/en.json

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

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

@@ -63,10 +63,12 @@
   "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",
@@ -79,5 +81,6 @@
   "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.error.message.default": "{{fieldName}} ist nicht valide",
+  "public.common.search.button": "Suchen"
 }