[player] Add translations

projects/common/assets/i18n/de.json

-{}
+{
+  "page": "Seite",
+  "alwaysVisiblePage": "Seite immer sichtbar",
+  "presentationIncomplete": "Bearbeitung unvollständig",
+  "responsesIncomplete": "Antworten sind unvollständig",
+  "noReason": "Navigation ohne Angabe von Gründen verweigert",
+  "inputRequired": "Eingabe erforderlich",
+  "InputTooShort": "Eingabe zu kurz",
+  "InputTooLong": "Eingabe zu lang",
+  "ValueTooSmall": "Wert zu klein",
+  "ValueTooBig": "Wert zu groß"
+}

projects/player/src/app/components/form.component.ts

@@ -2,6 +2,7 @@ import { Component, Input, OnDestroy } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { TranslateService } from '@ngx-translate/core';
 import { FormService } from '../../../../common/form.service';
 import { VeronaSubscriptionService } from '../services/verona-subscription.service';
 import { VeronaPostService } from '../services/verona-post.service';
@@ -35,7 +36,8 @@ export class FormComponent implements OnDestroy {
               private formService: FormService,
               private veronaSubscriptionService: VeronaSubscriptionService,
               private veronaPostService: VeronaPostService,
-              private messageService: MessageService) {
+              private messageService: MessageService,
+              private translateService: TranslateService) {
     this.form = this.formBuilder.group({
       pages: this.formBuilder.array([])
     });
@@ -75,7 +77,8 @@ export class FormComponent implements OnDestroy {
   private onNavigationDenied(message: VopNavigationDeniedNotification): void {
     // eslint-disable-next-line no-console
     console.log('player: onNavigationDenied', message);
-    this.messageService.showWarning(message.reason?.join(', ') || 'noReason');
+    const reasons = message.reason?.map((reason: string) => this.translateService.instant(reason));
+    this.messageService.showWarning(reasons?.join(', ') || this.translateService.instant('noReason'));
     this.form.markAllAsTouched();
   }
 

projects/player/src/app/components/player-state/player-state.component.html

@@ -3,12 +3,12 @@
   <mat-tab-group [fxFlex]="pageWidth" [(selectedIndex)]="currentIndex"
                  (selectedIndexChange)="onSelectedIndexChange()"
                  mat-align-tabs="start">
-    <mat-tab *ngFor="let page of scrollPages; let i = index" label="{{page.label}}">
+    <mat-tab *ngFor="let page of scrollPages; let i = index" label="{{'page' | translate}} {{i + 1}}">
       <app-page class="page" [parentForm]="parenForm" [page]="page"></app-page>
     </mat-tab>
   </mat-tab-group>
   <div *ngIf="alwaysVisiblePage" fxFlex="50">
-    <div class="mat-tab-label">{{alwaysVisiblePage.label}}</div>
+    <div class="mat-tab-label">{{'alwaysVisiblePage' | translate}}</div>
     <app-page class="page" [parentForm]="parenForm" [page]="alwaysVisiblePage"></app-page>
   </div>
 </div>

projects/player/src/app/components/player-state/player-state.component.ts

@@ -4,6 +4,7 @@ import {
 import { FormGroup } from '@angular/forms';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
 import { UnitPage } from '../../../../../common/unit';
 import { VeronaSubscriptionService } from '../../services/verona-subscription.service';
 import {
@@ -25,7 +26,8 @@ export class PlayerStateComponent implements OnInit, OnDestroy {
   private ngUnsubscribe = new Subject<void>();
 
   constructor(private veronaSubscriptionService: VeronaSubscriptionService,
-              private veronaPostService: VeronaPostService) {
+              private veronaPostService: VeronaPostService,
+              private translateService: TranslateService) {
   }
 
   private get state(): RunningState {
@@ -37,8 +39,8 @@ export class PlayerStateComponent implements OnInit, OnDestroy {
   }
 
   get validPages():Record<string, string>[] {
-    return this.pages.map((page:UnitPage): Record<string, string> => (
-      { [page.id]: page.label }));
+    return this.scrollPages.map((page: UnitPage, index: number): Record<string, string> => (
+      { [page.id]: `${this.translateService.instant('page')} ${index}` }));
   }
 
   get alwaysVisiblePage(): UnitPage | undefined {

projects/player/src/app/components/validation-message.component.ts

@@ -12,22 +12,22 @@ import { FormService } from '../../../../common/form.service';
   template: `
       <ng-container *ngIf="formElementControl && formElementControl.touched">
           <mat-error *ngIf="formElementControl.errors?.required">
-              {{requiredMessage}}
+              {{requiredMessage | translate}}
           </mat-error>
           <mat-error *ngIf="formElementControl.errors?.requiredTrue">
-              {{requiredMessage}}
+              {{requiredMessage | translate}}
           </mat-error>
           <mat-error *ngIf="formElementControl.errors?.minlength">
-              {{minLengthMessage}}
+              {{minLengthMessage | translate}}
           </mat-error>
           <mat-error *ngIf="formElementControl.errors?.maxlength">
-              {{maxLengthMessage}}
+              {{maxLengthMessage | translate}}
           </mat-error>
           <mat-error *ngIf="formElementControl.errors?.min">
-              {{minMessage}}
+              {{minMessage | translate}}
           </mat-error>
           <mat-error *ngIf="formElementControl.errors?.max">
-              {{maxMessage}}
+              {{maxMessage | translate}}
           </mat-error>
       </ng-container>
   `
@@ -76,22 +76,22 @@ export class ValidationMessageComponent implements OnInit {
   }
 
   get requiredMessage(): string {
-    return (this.elementModel as InputUIElement).requiredWarnMessage || 'Eingabe erforderlich';
+    return (this.elementModel as InputUIElement).requiredWarnMessage || 'inputRequired';
   }
 
   get minLengthMessage(): string {
-    return (this.elementModel as TextFieldElement).minWarnMessage || 'Eingabe zu kurz';
+    return (this.elementModel as TextFieldElement).minWarnMessage || 'inputTooShort';
   }
 
   get maxLengthMessage(): string {
-    return (this.elementModel as TextFieldElement).maxWarnMessage || 'Eingabe zu lang';
+    return (this.elementModel as TextFieldElement).maxWarnMessage || 'inputTooLong';
   }
 
   get minMessage(): string {
-    return (this.elementModel as NumberFieldElement).minWarnMessage || 'Wert zu klein';
+    return (this.elementModel as NumberFieldElement).minWarnMessage || 'valueTooSmall';
   }
 
   get maxMessage(): string {
-    return (this.elementModel as NumberFieldElement).maxWarnMessage || 'Wert zu groß';
+    return (this.elementModel as NumberFieldElement).maxWarnMessage || 'valueTooBig';
   }
 }