[editor] Add i18n translations for StateVariables and VisibilityRules

projects/editor/src/app/components/dialogs/state-variables-dialog/state-variable-editor.component.html

 <div class="fx-row-start-stretch fx-gap-10">
   <mat-form-field>
-    <mat-label>Id</mat-label>
+    <mat-label>{{'stateVariableId' | translate}}</mat-label>
     <input matInput
-           placeholder="Id"
+           [placeholder]="'stateVariableId' | translate"
            [(ngModel)]="stateVariable.id"
            (ngModelChange)="stateVariableChange.emit(stateVariable)">
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Wert</mat-label>
+    <mat-label>{{'stateVariableValue' | translate}}</mat-label>
     <input matInput
-           placeholder="Initialwert"
+           [placeholder]="'stateVariableValue' | translate"
            [(ngModel)]="stateVariable.value"
            (ngModelChange)="stateVariableChange.emit(stateVariable)">
   </mat-form-field>

projects/editor/src/app/components/dialogs/state-variables-dialog/state-variables-dialog.component.html

-<h1 mat-dialog-title>Player-Variablen bearbeiten</h1>
+<h1 mat-dialog-title>{{'manageStateVariables' | translate}}</h1>
 <div mat-dialog-content class="fx-colum-start-stretch fx-gap-20">
   <div class="fx-row-end-stretch">
     <button mat-icon-button
@@ -24,10 +24,10 @@
 <div mat-dialog-actions>
   <button mat-button
           mat-dialog-close>
-    Abbrechen
+    {{'cancel' | translate }}
   </button>
   <button mat-button
           [mat-dialog-close]="stateVariables">
-    Speichern
+    {{'save' | translate }}
   </button>
 </div>

projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rule-editor.component.html

 <div class="fx-row-start-stretch fx-gap-10">
   <mat-form-field>
-    <mat-label>Id</mat-label>
+    <mat-label>{{'section.controlId' | translate}}</mat-label>
     <mat-select [(ngModel)]="visibilityRule.id"
                 (ngModelChange)="visibilityRuleChange.emit(visibilityRule)">
       <mat-option *ngFor="let id of controlIds"
@@ -11,7 +11,7 @@
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Operator</mat-label>
+    <mat-label>{{'section.operator' | translate}}</mat-label>
     <mat-select [(ngModel)]="visibilityRule.operator"
                 (ngModelChange)="visibilityRuleChange.emit(visibilityRule)">
       <mat-option *ngFor="let operator of VisibilityRule.operators"
@@ -22,9 +22,9 @@
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Wert</mat-label>
+    <mat-label>{{'section.value' | translate}}</mat-label>
     <input matInput
-           placeholder="Wert"
+           [placeholder]="'section.value' | translate"
            [(ngModel)]="visibilityRule.value"
            (ngModelChange)="visibilityRuleChange.emit(visibilityRule)">
   </mat-form-field>

projects/editor/src/app/components/dialogs/visibility-rules-dialog/visibility-rules-dialog.component.html

-<h1 mat-dialog-title>Regeln zur Sichtbarkeit</h1>
+<h1 mat-dialog-title>{{'section.manageVisibilityRules' | translate}}</h1>
 <div mat-dialog-content class="fx-colum-start-stretch fx-gap-20">
   <ng-container *ngIf="controlIds.length">
     <div class="fx-row-end-stretch">
@@ -12,21 +12,21 @@
     <div *ngIf="visibilityRules.length"
          class="fx-row-start-stretch fx-gap-10">
       <mat-form-field >
-        <mat-label>Verzögerung in ms</mat-label>
+        <mat-label>{{'section.visibilityDelay' | translate}}</mat-label>
         <input matInput
                type="number"
                step="1000"
-               placeholder="Verzögerung in ms"
+               [placeholder]="'section.visibilityDelay' | translate"
                [(ngModel)]="visibilityDelay">
       </mat-form-field>
       <mat-checkbox
         [(ngModel)]="animatedVisibility">
-        Scrollen beim Anzeigen
+        {{'section.animatedVisibility' | translate}}
       </mat-checkbox>
     </div>
   </ng-container>
 
-  <p *ngIf="!controlIds.length">Bitte zuerst Elemente oder Player-Variablen anlegen</p>
+  <p *ngIf="!controlIds.length">{{'section.addElementsOrStateVariables' | translate}}</p>
 
   <div *ngFor="let rule of visibilityRules; let i = index"
        class="fx-row-start-stretch fx-gap-10">
@@ -44,11 +44,11 @@
 <div mat-dialog-actions>
   <button mat-button
           mat-dialog-close>
-    Abbrechen
+    {{'cancel' | translate}}
   </button>
   <button *ngIf="controlIds.length"
           mat-button
           [mat-dialog-close]="{visibilityRules, visibilityDelay, animatedVisibility:animatedVisibility}">
-    Speichern
+    {{'save' | translate}}
   </button>
 </div>

projects/editor/src/app/components/new-ui-element-panel/state-variables-button/show-state-variables-button.component.html

@@ -3,5 +3,5 @@
         color="accent"
         (click)="showStateVariablesDialog()">
   <mat-icon>integration_instructions</mat-icon>
-  <span>State Variables</span>
+  <span>{{'stateVariables' | translate}}</span>
 </button>

projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/button-properties/button-action-param-state-variable.component.html

 <div class="fx-column-start-stretch">
   <mat-form-field>
-    <mat-label>Id</mat-label>
+    <mat-label>{{'stateVariableId' | translate}}</mat-label>
     <mat-select [(ngModel)]="stateVariable.id"
                 (ngModelChange)="stateVariableChange.emit(stateVariable)">
       <mat-option *ngFor="let id of stateVariableIds"
@@ -11,9 +11,9 @@
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Wert</mat-label>
+    <mat-label>{{'stateVariableValue' | translate}}</mat-label>
     <input matInput
-           placeholder="Initialwert"
+           [placeholder]="'stateVariableValue' | translate"
            [(ngModel)]="stateVariable.value"
            (ngModelChange)="stateVariableChange.emit(stateVariable)">
   </mat-form-field>

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

@@ -30,6 +30,20 @@
   "auto": "oben",
   "center": "zentriert",
   "allowReplacement": "Verdrängen erlauben",
+  "stateVariable": "Statusvariable",
+  "stateVariables": "Statusvariablen",
+  "stateVariableValue": "Wert der Statusvariable",
+  "stateVariableId": "Id der Statusvariable",
+  "manageStateVariables": "Statusvariablen verwalten",
+  "section": {
+    "manageVisibilityRules": "Sichtbarkeit verwalten",
+    "animatedVisibility": "Scrollen beim Anzeigen",
+    "visibilityDelay": "Verzögerung der Anzeige",
+    "controlId": "Statusvariable/Element-ID",
+    "operator": "Operator",
+    "addElementsOrStateVariables": "Bitte zuerst Elemente oder Statusvariablen anlegen",
+    "value": "Wert"
+  },
   "toolbar": {
     "loadUnit": "Unit laden",
     "saveUnit": "Unit speichern"
@@ -102,6 +116,7 @@
     "unitNav": "Unitnavigation",
     "pageNav": "Seitennavigation",
     "highlightText": "Textabschnitt hervorheben",
+    "stateVariableChange": "Statusvariable ändern",
     "previous": "Vorherige Unit",
     "next": "Nächste Unit",
     "first": "Erste Unit",
@@ -283,9 +298,7 @@
     "width": "Breite",
     "fraction": "Anteile",
     "pixel": "Bildpunkte",
-    "percent": "Prozent",
-    "activeAfterID": "Sichtbar nach A/V-ID",
-    "activeAfterIdDelay": "Verzögerung der Sichtbarkeit"
+    "percent": "Prozent"
   },
   "Bitte kopierten Abschnitt einfügen": "Bitte kopierten Abschnitt einfügen",
   "Doppelte IDs festgestellt. Weiter mit neu generierten IDs?": "Doppelte IDs festgestellt. Weiter mit neu generierten IDs?",