Internationalization and several fixes

src/app/components/dialogs/room-create/room-create.component.html

@@ -2,8 +2,8 @@
   <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
     <mat-form-field>
       <input (keypress)="resetEmptyInputs()" matInput #longRoomName class="input-block" type="text"
-             placeholder="Room name" maxlength="50" [(ngModel)]="longName" name="roomName"/>
-      <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
+             placeholder="{{ 'session.session-name' | translate}}" maxlength="50" [(ngModel)]="longName" name="roomName"/>
+      <mat-hint align="start" *ngIf="!emptyInputs"><strong>{{ 'session.max-ls' | translate}}</strong></mat-hint>
       <mat-hint align="end" *ngIf="!emptyInputs">{{longRoomName.value.length}} / 50</mat-hint>
       <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>
       <button mat-button *ngIf="longName" matSuffix mat-icon-button aria-label="Clear" (click)="longName=''">
@@ -12,15 +12,15 @@
     </mat-form-field>
     <mat-form-field>
       <textarea (keypress)="resetEmptyInputs()" matInput #description type="text"
-             placeholder="Description" maxlength="255" name="description"></textarea>
-      <mat-hint align="start" *ngIf="!emptyInputs"><strong>Max. letters / signs:</strong></mat-hint>
+             placeholder="{{ 'session.description' | translate}}" maxlength="255" name="description"></textarea>
+      <mat-hint align="start" *ngIf="!emptyInputs"><strong>{{ 'session.max-ls' | translate}}</strong></mat-hint>
       <mat-hint align="end" *ngIf="!emptyInputs">{{description.value.length}} / 255</mat-hint>
       <mat-hint align="start" *ngIf="emptyInputs"><strong>Input is required</strong></mat-hint>
       <button mat-button *ngIf="shortName" matSuffix mat-icon-button aria-label="Clear" (click)="shortName=''">
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
-    <button mat-raised-button color="primary" type="submit">Create room
+    <button mat-raised-button color="primary" type="submit">{{ 'session.create-session' | translate}}
     </button>
   </div>
 </form>

src/app/components/fragments/content-choice-creator/content-choice-creator.component.html

 <form (ngSubmit)="submitContent(subject.value, body.value)" fxLayout="column" fxLayoutGap="20px">
   <mat-form-field class="input-block">
-    <input matInput #subject [(ngModel)]="content.subject" placeholder="Subject" name="subject">
+    <input matInput #subject [(ngModel)]="content.subject" placeholder="{{ 'content.subject' | translate }}" name="subject">
   </mat-form-field>
   <app-markdown-toolbar textareaId="content-choice-body"></app-markdown-toolbar>
   <mat-form-field class="input-block">
-    <textarea matInput #body id="content-choice-body" [(ngModel)]="content.body" placeholder="Body" name="body"
+    <textarea matInput #body id="content-choice-body" [(ngModel)]="content.body" placeholder="{{ 'content.body' | translate }}" name="body"
               matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="8"></textarea>
   </mat-form-field>
   <markdown [data]="content.body"></markdown>
@@ -22,7 +22,7 @@
   <mat-table #table [dataSource]="displayAnswers">
 
     <ng-container matColumnDef="label">
-      <mat-header-cell *matHeaderCellDef>Answer</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef>{{ 'content.answer' | translate }}</mat-header-cell>
       <mat-cell *matCellDef="let answer">
         <!-- ToDo: Check ngModel -->
         <mat-checkbox color="primary" (click)="switchValue(answer.answerOption.label)" [(ngModel)]="answer.correct"
@@ -33,7 +33,7 @@
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef>{{ 'content.actions' | translate }}</mat-header-cell>
       <mat-cell *matCellDef="let answer">
         <button mat-icon-button
                 (click)="openAnswerModificationDialog($event, answer.answerOption.label, answer.correct)"
@@ -53,16 +53,16 @@
 
   <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="50px">
     <mat-form-field class="input-block">
-      <input matInput #answerLabel [(ngModel)]="newAnswerOptionLabel" placeholder="Answer" name="answer">
+      <input matInput #answerLabel [(ngModel)]="newAnswerOptionLabel" placeholder="{{ 'content.answer' | translate }}" name="answer">
     </mat-form-field>
     <button mat-button type="button" (click)="addAnswer($event); answerLabel.value = '';">
-      Add Answer
+      {{ 'content.add-answer' | translate }}
     </button>
   </div>
 
   <div *ngIf="!editDialogMode" fxLayout="row" fxLayoutAlign="center" fxLayoutGap="50px">
-    <button mat-raised-button type="submit" color="primary">Submit</button>
-    <button mat-raised-button (click)="reset($event)" color="primary">Reset</button>
+    <button mat-raised-button type="submit" color="primary">{{ 'content.create' | translate }}</button>
+    <button mat-raised-button (click)="reset($event)" color="primary">{{ 'content.reset' | translate }}</button>
     <button mat-raised-button *ngIf="lastDeletedDisplayAnswer" (click)="recoverDeletedAnswer($event)" color="primary">
       Undo
       deletion

src/app/components/fragments/content-likert-creator/content-likert-creator.component.html

 <form (ngSubmit)="submitContent()">
   <mat-form-field class="input-block">
-    <input matInput #subject [(ngModel)]="content.subject" placeholder="Subject" name="subject">
+    <input matInput #subject [(ngModel)]="content.subject" placeholder="{{ 'content.subject' | translate }}" name="subject">
   </mat-form-field>
   <mat-form-field class="input-block">
-    <textarea matInput #body [(ngModel)]="content.body" placeholder="Body" name="body"></textarea>
+    <textarea matInput #body [(ngModel)]="content.body" placeholder="{{ 'content.body' | translate }}" name="body"></textarea>
   </mat-form-field>
   <mat-divider></mat-divider>
 
@@ -21,7 +21,7 @@
     <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
   </mat-table>
   <div *ngIf="!editDialogMode">
-    <button mat-raised-button type="submit" color="primary">Submit</button>
+    <button mat-raised-button type="submit" color="primary">{{ 'content.create' | translate }}</button>
   </div>
   <div *ngIf="editDialogMode">
     <button mat-raised-button (click)="editDialogClose($event,'edit')" color="primary">Update</button>

src/app/components/fragments/content-text-creator/content-text-creator.component.html

 <form (ngSubmit)="submitContent(subject.value, body.value, group.value)">
   <mat-form-field class="input-block">
-    <input matInput #subject [(ngModel)]="content.subject" placeholder="Subject" name="subject">
+    <input matInput #subject [(ngModel)]="content.subject" placeholder="{{'content.subject' | translate}}" name="subject">
   </mat-form-field>
   <app-markdown-toolbar textareaId="content-text-body"></app-markdown-toolbar>
   <mat-form-field class="input-block">
-    <textarea matInput #body id="content-text-body" [(ngModel)]="content.body" placeholder="Body" name="body"
+    <textarea matInput #body id="content-text-body" [(ngModel)]="content.body" placeholder="{{'content.body' | translate}}" name="body"
               matTextareaAutosize matAutosizeMinRows="3" matAutosizeMaxRows="8"></textarea>
   </mat-form-field>
   <markdown [data]="content.body"></markdown>
   <mat-form-field>
     <input matInput #group matInput [formControl]="myControl" [matAutocomplete]="auto"
-           value={{lastCollection}} placeholder="Collection"/>
+           value={{lastCollection}} placeholder="{{'content.collection' | translate}}"/>
     <mat-autocomplete #auto="matAutocomplete">
       <mat-option *ngFor="let collection of filteredOptions | async" [value]="collection">
         {{collection}}
@@ -18,7 +18,7 @@
     </mat-autocomplete>
   </mat-form-field>
   <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px" *ngIf="!editDialogMode">
-    <button mat-raised-button type="submit" color="primary">Submit</button>
+    <button mat-raised-button type="submit" color="primary">{{'content.create' | translate}}</button>
   </div>
   <div *ngIf="editDialogMode">
     <button mat-raised-button (click)="editDialogClose($event,'edit')" color="primary">Update</button>

src/app/components/fragments/content-text-creator/content-text-creator.component.ts

@@ -67,7 +67,7 @@ export class ContentTextCreatorComponent implements OnInit {
   resetAfterSubmit() {
     this.content.subject = '';
     this.content.body = '';
-    this.notificationService.show('Content submitted. Ready for creation of new content.');
+    this.notificationService.show('Frage erstellt.');
   }
 
   submitContent(subject: string, body: string, group: string) {
@@ -81,7 +81,7 @@ export class ContentTextCreatorComponent implements OnInit {
       [group],
     )).subscribe();
     if (this.content.body.valueOf() === '' || this.content.body.valueOf() === '') {
-      this.notificationService.show('No empty fields allowed. Please check subject and body.');
+      this.notificationService.show('Keine leeren Felder erlaubt. Bitte kontrollieren sie Thema und Inhalt.');
       return;
     }
     sessionStorage.setItem('collection', group);

src/app/components/fragments/content-text-participant/content-text-participant.component.html

@@ -3,13 +3,13 @@
   <markdown [data]="content.body"></markdown>
   <mat-divider></mat-divider>
   <mat-form-field class="input-block">
-    <textarea matInput [(ngModel)]="textAnswer" name="answer" #answer placeholder="Your answer"></textarea>
+    <textarea matInput [(ngModel)]="textAnswer" name="answer" #answer placeholder="{{ 'answer.your-answer' | translate }}"></textarea>
   </mat-form-field>
   <div fxLayout fxLayoutGap="5px" fxAlign="row">
-    <button mat-raised-button type="submit" color="primary">Submit</button>
-    <button mat-raised-button (click)="abstain($event)" color="primary">Abstain</button>
+    <button mat-raised-button type="submit" color="primary">{{ 'answer.submit' | translate }}</button>
+    <button mat-raised-button (click)="abstain($event)" color="primary">{{ 'answer.abstain' | translate }}</button>
     <mat-chip-list *ngIf="isAnswerSent">
-      <mat-chip color="primary" selected="true">Answer sent</mat-chip>
+      <mat-chip color="primary" selected="true">{{ 'answer.sent' | translate }}</mat-chip>
     </mat-chip-list>
   </div>
 </form>

src/app/components/fragments/content-yes-no-creator/content-yes-no-creator.component.html

 <form (ngSubmit)="submitContent()">
   <mat-form-field class="input-block">
-    <input matInput #subject [(ngModel)]="content.subject" placeholder="Subject" name="subject">
+    <input matInput #subject [(ngModel)]="content.subject" placeholder="{{ 'content.subject' | translate }}" name="subject">
   </mat-form-field>
   <mat-form-field class="input-block">
-    <textarea matInput #body [(ngModel)]="content.body" placeholder="Body" name="body"></textarea>
+    <textarea matInput #body [(ngModel)]="content.body" placeholder="{{ 'content.body' | translate }}" name="body"></textarea>
   </mat-form-field>
   <mat-divider></mat-divider>
 
   <mat-table #table [dataSource]="displayAnswers">
 
     <ng-container matColumnDef="label">
-      <mat-header-cell *matHeaderCellDef>Answer</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef>{{ 'content.answer' | translate }}</mat-header-cell>
       <mat-cell *matCellDef="let answer">
         <!-- ToDo: Check ngModel -->
         <mat-checkbox (click)="setCorrect($event ,answer.answerOption.label)" color="primary" [(ngModel)]="answer.correct" [checked]="answer.correct"
@@ -24,7 +24,7 @@
   </mat-table>
   <mat-divider></mat-divider>
   <div *ngIf="!editDialogMode">
-    <button mat-raised-button type="submit" color="primary">Submit</button>
+    <button mat-raised-button type="submit" color="primary">{{ 'content.create' | translate }}</button>
   </div>
   <div *ngIf="editDialogMode">
     <button mat-raised-button (click)="editDialogClose($event,'edit')" color="primary">Update</button>

src/app/components/fragments/content-yes-no-creator/content-yes-no-creator.component.ts

@@ -17,8 +17,8 @@ import { ContentDeleteComponent } from '../../dialogs/content-delete/content-del
 })
 export class ContentYesNoCreatorComponent implements OnInit {
   answerLabels = [
-    'yes',
-    'no'
+    'Ja',
+    'Nein'
   ];
   content: ContentChoice = new ContentChoice(
     '0',

src/app/components/fragments/header/header.component.html

@@ -23,7 +23,7 @@
     </mat-menu>
     <button *ngIf="user" mat-button [matMenuTriggerFor]="appMenu">
       <mat-icon>account_box</mat-icon>
-      <span *ngIf="user.isGuest; else elseBlock">Guest</span>
+      <span *ngIf="user.isGuest; else elseBlock">{{ 'header.guest' | translate }}</span>
       <ng-template #elseBlock>{{user.loginId}}</ng-template>
     </button>
   </mat-toolbar-row>

src/app/components/fragments/header/header.component.ts

@@ -21,7 +21,7 @@ export class HeaderComponent implements OnInit {
               public router: Router,
               private translationService: TranslateService) {
 
-    translationService.setDefaultLang('en');
+    translationService.setDefaultLang('de');
   }
 
   ngOnInit() {

src/app/components/fragments/login/login.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/cor
 import { AuthenticationService } from '../../../services/http/authentication.service';
 import { Router } from '@angular/router';
 import { NotificationService } from '../../../services/util/notification.service';
-import { ErrorStateMatcher, MatDialog} from '@angular/material';
+import { ErrorStateMatcher, MatDialog } from '@angular/material';
 import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
 import { UserRole } from '../../../models/user-roles.enum';
 import { TranslateService } from '@ngx-translate/core';
@@ -93,7 +93,9 @@ export class LoginComponent implements OnInit, OnChanges {
 
   private checkLogin(loginSuccessful: string) {
     if (loginSuccessful === 'true') {
-      this.notificationService.show('Login successful!');
+      this.translationService.get('login.login-successful').subscribe(message => {
+        this.notificationService.show(message);
+      });
       if (this.role === UserRole.CREATOR) {
         this.router.navigate(['creator']);
       } else {

src/app/components/fragments/room-join/room-join.component.html

 <form (ngSubmit)="joinRoom(roomId.value)">
     <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="10px">
       <mat-form-field class="input-block">
-        <input matInput #roomId placeholder="Room-Id" [formControl]="roomFormControl"
+        <input matInput #roomId placeholder="{{ 'home-page.session-id' | translate}}" [formControl]="roomFormControl"
                [errorStateMatcher]="matcher" maxlength="8"/>
         <mat-hint align="end">{{roomId.value.length}} / 8</mat-hint>
-        <mat-error *ngIf="roomFormControl.hasError('required')">Please enter a room-id.</mat-error>
-        <mat-error *ngIf="roomFormControl.hasError('minlength')">A room-id has exactly 8 digits.</mat-error>
+        <mat-error *ngIf="roomFormControl.hasError('required')">{{ 'home-page.please-enter' | translate}}</mat-error>
+        <mat-error *ngIf="roomFormControl.hasError('minlength')">{{ 'home-page.exactly-8' | translate}}</mat-error>
       </mat-form-field>
       <button mat-fab color="primary" type="submit">
         <mat-icon>input</mat-icon>
       </button>
     </div>
 </form>
-<button mat-button color="primary" (click)="joinDemo()">Join demo room <mat-icon>lightbulb_outline</mat-icon></button>
+<button mat-button color="primary" (click)="joinDemo()">{{ 'home-page.join-demo-session' | translate}}<mat-icon>lightbulb_outline</mat-icon></button>

src/app/components/pages/comment-create-page/comment-create-page.component.html

@@ -2,15 +2,14 @@
   <div fxLayout="row" fxLayoutAlign="center">
     <form>
       <mat-form-field class="input-block">
-        <input matInput #commentSubject type="text" maxlength="24" placeholder="Choose a title">
+        <input matInput #commentSubject type="text" maxlength="24" placeholder="{{ 'comment-page.enter-title' | translate}}">
       </mat-form-field>
       <mat-form-field class="input-block">
         <input matInput #commentBody>
-        <textarea matInput placeholder="Add your comment"></textarea>
+        <textarea matInput></textarea>
       </mat-form-field>
-
-      <button mat-raised-button color="primary" (click)="goBack()">Back</button>
-      <button mat-raised-button color="primary" (click)="send(commentSubject.value, commentBody.value)">Send</button>
+      <button mat-raised-button color="primary" (click)="goBack()">{{ 'comment-page.back' | translate}}</button>
+      <button mat-raised-button color="primary" (click)="send(commentSubject.value, commentBody.value)">{{ 'comment-page.send' | translate}}</button>
     </form>
   </div>
   <div fxLayout="row" fxLayoutAlign="center">

src/app/components/pages/comment-create-page/comment-create-page.component.scss

@@ -9,3 +9,7 @@ app-comment-list {
   width: 100%;
   max-width: 800px;
 }
+
+button {
+  margin-right: 20px;
+}

src/app/components/pages/content-carousel-page/content-carousel-page.component.html

 <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
   <div fxLayout="row" fxLayoutAlign="center">
     <mat-tab-group>
-
       <mat-tab *ngFor="let content of contents" label="{{content.subject}}">
         <app-content-choice-participant [content]="content"
                                         *ngIf="content.format === ContentType.CHOICE"></app-content-choice-participant>

src/app/components/pages/content-create-page/content-create-page.component.html

@@ -16,7 +16,7 @@
           <app-content-likert-creator></app-content-likert-creator>
         </div>
       </mat-tab>
-      <mat-tab label="Yes / No">
+      <mat-tab label="{{ 'content.yes' | translate }} / {{ 'content.no' | translate }}">
         <div class="tab-container">
           <app-content-yes-no-creator></app-content-yes-no-creator>
         </div>

src/app/components/pages/home-creator-page/home-creator-page.component.html

 <div fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px" fxFill>
   <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
-    <button mat-raised-button color="primary" (click)="openCreateRoomDialog()">Neuen Raum erstellen</button>
+    <button mat-raised-button color="primary" (click)="openCreateRoomDialog()">{{ 'home-page.create-session' | translate }}</button>
   </div>
   <div fxLayout="row" fxLayoutAlign="center">
     <app-room-list></app-room-list>

src/app/components/pages/room-creator-page/room-creator-page.component.html

@@ -19,31 +19,31 @@
         </p>
       </mat-card-content>
       <mat-divider></mat-divider>
-      <mat-divider></mat-divider>
       <mat-card-actions>
-        <button mat-button color="primary" matTooltip="Create new content"
+        <button mat-button color="primary" fxFlex="33%"
                 routerLink="/creator/room/{{ room.shortId }}/create-content">
-          Create content
+          {{ 'room-page.create-content' | translate }}
         </button>
-        <button mat-button color="primary" matTooltip="See room comments"
+        <button mat-button color="primary" fxFlex="33%"
                 routerLink="/creator/room/{{ room.shortId }}/comments">
-          Comments
+          {{ 'room-page.comments' | translate }}
         </button>
-        <button mat-button color="primary" matTooltip="See feedback"
+        <button mat-button color="primary" fxFlex="33%"
                 routerLink="/creator/room/{{ room.shortId }}/feedback-barometer">
-          Feedback barometer
+          {{ 'room-page.live-feedback' | translate }}
         </button>
-        <button mat-button color="primary" matTooltip="See answer statistics"
+        <button mat-button color="primary" fxFlex="33%"
                 routerLink="/creator/room/{{ room.shortId }}/statistics">
-          Answer statistics
+          {{ 'room-page.answer-statistics' | translate }}
         </button>
-        <button *ngIf="!modify" (click)="showEditDialog()" mat-button color="primary">
-          Edit room
+        <button *ngIf="!modify" fxFlex="33%" (click)="showEditDialog()" mat-button color="primary">
+          {{ 'room-page.edit-room' | translate }}
         </button>
-        <button mat-button color="warn" (click)="openDeletionRoomDialog()">
-          Delete room
+        <button mat-button color="warn" fxFlex="33%" (click)="openDeletionRoomDialog()">
+          {{ 'room-page.delete-room' | translate }}
         </button>
       </mat-card-actions>
+      <mat-divider></mat-divider>
       <app-content-groups *ngIf="room" [contentGroups]="room.contentGroups"></app-content-groups>
     </mat-card>
     <div *ngIf="!isLoading && !room">Error: room could not be found!</div>

src/app/components/pages/room-creator-page/room-creator-page.component.scss

@@ -4,4 +4,5 @@ mat-card {
 
 mat-card-content > :first-child {
   margin-top: 16px;
+  margin-bottom: 16px;
 }

src/app/components/pages/room-participant-page/room-participant-page.component.html

@@ -15,24 +15,24 @@
       <mat-divider></mat-divider>
       <mat-grid-list cols="2" rowHeight="2:1">
         <mat-grid-tile>
-          <button mat-icon-button color="primary" matTooltip="Create comment"
+          <button mat-icon-button color="primary" matTooltip="{{ 'room-page.create-comment' | translate}}"
                   routerLink="/participant/room/{{ room.id }}/create-comment">
             <mat-icon>question_answer</mat-icon>
           </button>
         </mat-grid-tile>
         <mat-grid-tile>
-          <button mat-icon-button color="primary" matTooltip="Give feedback"
+          <button mat-icon-button color="primary" matTooltip="{{ 'room-page.give-feedback' | translate}}"
                   routerLink="/participant/room/{{ room.id }}/feedback-barometer">
             <mat-icon>thumbs_up_down</mat-icon>
           </button>
         </mat-grid-tile>
       </mat-grid-list>
       <mat-nav-list>
-        <mat-list-item matTooltip="See room comments">
-          Comments
+        <mat-list-item>
+          {{ 'room-page.comments' | translate }}
         </mat-list-item>
-        <mat-list-item matTooltip="Join question round">
-          Learn
+        <mat-list-item>
+          {{ 'room-page.learn' | translate }}
         </mat-list-item>
         <app-content-groups *ngIf="room" [contentGroups]="room.contentGroups"></app-content-groups>
       </mat-nav-list>