[editor] Use translation service for toolbar and unit-view

Other components will follow.

projects/editor/src/app/toolbar/toolbar.component.html

 <mat-toolbar>
   <button mat-raised-button (click)="load()">
-    {{'loadUnit' | translate}}
+    {{'toolbar.loadUnit' | translate}}
     <mat-icon>file_upload</mat-icon>
   </button>
   <button mat-raised-button (click)="save()">
-    {{'saveUnit' | translate}}
+    {{'toolbar.saveUnit' | translate}}
     <mat-icon>file_download</mat-icon>
   </button>
 </mat-toolbar>

projects/editor/src/app/unit-view/unit-view.component.html

 <div [style.height.%]="100">
   <button class="drawer-button show-elements-button" (click)="toolbox_drawer.toggle()">
     <span>
-      ELEMENTE
+      {{'elements' | translate | uppercase}}
     </span>
   </button>
 
@@ -21,10 +21,10 @@
             <mat-icon class="page-alwaysVisible-icon">assignment</mat-icon>
             </ng-container>
             <ng-container *ngIf="!page.alwaysVisible && unit.pages[0].alwaysVisible === false">
-              Seite {{i + 1}}
+              {{'page' | translate }} {{i + 1}}
             </ng-container>
             <ng-container *ngIf="!page.alwaysVisible && unit.pages[0].alwaysVisible === true">
-              Seite {{i}}
+              {{'page' | translate }} {{i}}
             </ng-container>
 
             <button mat-icon-button class="menu-button" [matMenuTriggerFor]="pageMenu">
@@ -34,39 +34,39 @@
               <button *ngIf="!page.alwaysVisible"
                       mat-menu-item (click)="movePage(page,'up')">
                 <mat-icon>west</mat-icon>
-                <span>nach vorn</span>
+                <span>{{'forward' | translate }}</span>
               </button>
               <button *ngIf="!page.alwaysVisible"
                       mat-menu-item (click)="movePage(page, 'down')">
                 <mat-icon>east</mat-icon>
-                <span>nach hinten</span>
+                <span>{{'backward' | translate }}</span>
               </button>
               <button mat-menu-item (click)="deletePage(page)">
                 <mat-icon>delete</mat-icon>
-                <span>Löschen</span>
+                <span>{{'delete' | translate }}</span>
               </button>
               <mat-divider></mat-divider>
               <mat-checkbox class="menuItem" [checked]="page.hasMaxWidth"
                             (click)="$any($event).stopPropagation()"
                             (change)="updateModel(page, 'hasMaxWidth', $any($event.source).checked)">
-                Maximalbreite
+                {{'maxWidth' | translate }}
               </mat-checkbox>
               <mat-form-field *ngIf="page.hasMaxWidth" class="menuItem" appearance="fill">
-                <mat-label>Maximalbreite</mat-label>
+                <mat-label>{{'maxWidth' | translate }}</mat-label>
                 <input matInput type="number" min="0" #maxWidth="ngModel"
                        [ngModel]="page.maxWidth"
                        (click)="$any($event).stopPropagation()"
                        (ngModelChange)="updateModel(page,'maxWidth', $event, maxWidth.valid)">
               </mat-form-field>
               <mat-form-field class="menuItem" appearance="fill">
-                <mat-label>Randbreite</mat-label>
+                <mat-label>{{'marginWidth' | translate }}</mat-label>
                 <input matInput type="number" min="0" #margin="ngModel"
                        [ngModel]="page.margin"
                        (click)="$any($event).stopPropagation()"
                        (ngModelChange)="updateModel(page,'margin', $event, margin.valid)">
               </mat-form-field>
               <mat-form-field class="menuItem" appearance="fill">
-                <mat-label>Hintergrundfarbe</mat-label>
+                <mat-label>{{'backgroundColor' | translate }}</mat-label>
                 <input matInput type="color"
                        [value]="page.backgroundColor"
                        (change)="updateModel(page,'backgroundColor', $any($event.target).value)">
@@ -76,25 +76,22 @@
                             [ngModel]="page.alwaysVisible"
                             (click)="$any($event).stopPropagation()"
                             (change)="updateModel(page, 'alwaysVisible', $any($event.source).checked)">
-                Immer angezeigt
+                {{'alwaysVisible' | translate }}
               </mat-checkbox>
               <mat-form-field *ngIf="page.alwaysVisible" class="menuItem" appearance="fill">
-                <mat-label>Position</mat-label>
+                <mat-label>{{'position' | translate }}</mat-label>
                 <mat-select [value]="page.alwaysVisiblePagePosition"
                             (click)="$any($event).stopPropagation()"
                             (selectionChange)="updateModel(page, 'alwaysVisiblePagePosition', $event.value)">
-                  <mat-option *ngFor="let option of [{displayValue: 'links', value: 'left'},
-                                               {displayValue: 'rechts', value: 'right'},
-                                               {displayValue: 'oben', value: 'top'},
-                                               {displayValue: 'unten', value: 'bottom'}]"
-                              [value]="option.value">
-                    {{option.displayValue}}
+                  <mat-option *ngFor="let option of ['left', 'right', 'top', 'bottom']"
+                              [value]="option">
+                    {{option | translate}}
                   </mat-option>
                 </mat-select>
               </mat-form-field>
               <mat-form-field class="menuItem" appearance="fill"
                               *ngIf="page.alwaysVisible">
-                <mat-label>Seitenverhältnis (in Prozent)</mat-label>
+                <mat-label>{{'alwaysVisibleAspectRatio' | translate }}</mat-label>
                 <input matInput type="number" min="0" max="100"
                        [ngModel]="page.alwaysVisibleAspectRatio"
                        (click)="$any($event).stopPropagation()"
@@ -122,7 +119,7 @@
 
   <button class="drawer-button show-properties-button" (click)="properties_drawer.toggle()">
     <span>
-      EIGENSCHAFTEN
+      {{'properties' | translate | uppercase}}
     </span>
   </button>
 </div>

projects/editor/src/app/unit-view/unit-view.component.ts

 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { UpperCasePipe } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { UnitService } from '../unit.service';

projects/editor/src/assets/i18n/de.json

 {
-  "loadUnit": "Unit laden",
-  "saveUnit": "Unit speichern",
+  "elements": "Elemente",
+  "properties": "Eigenschaften",
+  "page": "Seite",
+  "forward": "nach vorn",
+  "backward": "nach hinten",
+  "delete": "Löschen",
+  "maxWidth": "Maximalbreite",
+  "marginWidth": "Randbreite",
+  "backgroundColor": "Hintergrundfarbe",
+  "alwaysVisible": "Immer angezeigt",
+  "position": "Position",
+  "alwaysVisibleAspectRatio": "Seitenverhältnis (in Prozent)",
+  "left": "Links",
+  "right": "Rechts",
+  "top": "Oben",
+  "bottom": "Unten",
+  "toolbar": {
+    "loadUnit": "Unit laden",
+    "saveUnit": "Unit speichern"
+  },
   "player": {
     "autoStart": "Autostart",
     "loop": "Wiederholt abspielen",