link the WeightClassInterface to the settings

The settings for font color and the maximum number of words per
weight class were linked to the ts file and the interface.
Furthermore, texts and translations were adjusted.

package.json

@@ -47,7 +47,7 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.1102.11",
+    "@angular-devkit/build-angular": "^0.901.15",
     "@angular-eslint/builder": "4.2.0",
     "@angular-eslint/eslint-plugin": "4.2.0",
     "@angular-eslint/eslint-plugin-template": "4.2.0",

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.html

@@ -99,21 +99,21 @@
         <div class="input-row" fxLayout="column" fxLayoutGap="5px">
           <div fxLayout="row" fxLayoutGap="5px">
             <mat-form-field fxFlex="100%">
-              <mat-label>{{'tag-cloud-config.background' | translate}}</mat-label>
-              <input matInput [value]="cloudParameters.backgroundColor" [colorPicker]="cloudParameters.backgroundColor"
-                     (colorPickerChange)="backgroundColorChanged($event)" class="custom-color-picker" />
-              <p matTooltip="{{'tag-cloud-config.background-tooltip' | translate}}" class="custom-color-picker-text">
+              <mat-label>{{'tag-cloud-config.weight-color' | translate}}</mat-label>
+              <input matInput [value]="weightClass.tagColor" [colorPicker]="weightClass.tagColor"
+                     (colorPickerChange)="weightColorChanged(weightClasses.indexOf(weightClass), $event)" class="custom-color-picker" />
+              <p matTooltip="{{'tag-cloud-config.weight-color-tooltip' | translate}}" class="custom-color-picker-text">
                 {{'tag-cloud-config.select-color' | translate}}</p>
             </mat-form-field>
-            <div fxFlex="35px" class="color-box" [style.background]="cloudParameters.backgroundColor"></div>
+            <div fxFlex="35px" class="color-box" [style.background]="weightClass.tagColor"></div>
           </div>
         </div>
       </div>
       <div class="input-row" fxLayout="column" fxLayoutGap="5px">
-        <mat-label class="label-text">{{'tag-cloud-config.hover-delay' | translate}}</mat-label>
-        <mat-slider [value]="cloudParameters.hoverDelay" min="0" max="2" step="0.1"
-                    [(ngModel)]="cloudParameters.hoverDelay" [ngModelOptions]="{standalone: true}" (change)="valueChanged()"
-                    [thumbLabel]="true" matTooltip="{{'tag-cloud-config.hover-delay-tooltip' | translate}}"></mat-slider>
+        <mat-label class="label-text">{{'tag-cloud-config.weight-number' | translate}}</mat-label>
+        <mat-slider [value]="weightClass.maxTagNumber" min="0" max="30" step="1"
+                    [(ngModel)]="weightClass.maxTagNumber" [ngModelOptions]="{standalone: true}" (change)="maxNumberOfWordsChanged()"
+                    [thumbLabel]="true" matTooltip="{{'tag-cloud-config.weight-number-tooltip' | translate}}"></mat-slider>
       </div>
     </div>
   </div>

src/app/components/shared/_dialogs/cloud-configuration/cloud-configuration.component.ts

@@ -78,4 +78,11 @@ export class CloudConfigurationComponent implements OnInit{
     this.extendedView = !this.extendedView;
   }
 
+  weightColorChanged(index: number, event: string): void {
+    this.weightClasses[index].tagColor = event;
+  }
+
+  maxNumberOfWordsChanged(): void {
+    //TODO: implement something
+  }
 }

src/assets/i18n/creator/de.json

@@ -360,6 +360,10 @@
 
     "weight-class-settings": "Gewichtsklassen Einstellungen",
     "weight-class": "Gewichtsklasse",
-    "back-btn": "Zurück"
+    "back-btn": "Zurück",
+    "weight-color": "Schriftfarbe",
+    "weight-number": "max. Anzahl Schlüsselwörter",
+    "weight-color-tooltip": "Auswahl der Schriftfarbe",
+    "weight-number-tooltip": "maximale Anzahl der Schlüsselwörter festlegen"
   }
 }

src/assets/i18n/creator/en.json

@@ -361,6 +361,10 @@
 
     "weight-class-settings": "Weight-classes settings",
     "weight-class": "Weight class",
-    "back-btn": "Back"
+    "back-btn": "Back",
+    "weight-color": "Font color",
+    "weight-number": "max. number of keywords",
+    "weight-color-tooltip": "select font-color",
+    "weight-number-tooltip": "select maximal number of keywords"
   }
 }

src/assets/i18n/participant/de.json

@@ -280,6 +280,10 @@
     "extended-btn": "Gewichtsklassen",
     "back-btn": "Zurück",
     "weight-class-settings": "Gewichtsklassen Einstellungen",
-    "weight-class": "Gewichtsklasse"
+    "weight-class": "Gewichtsklasse",
+    "weight-color": "Schriftfarbe",
+    "weight-number": "max. Anzahl Schlüsselwörter",
+    "weight-color-tooltip": "Auswahl der Schriftfarbe",
+    "weight-number-tooltip": "maximale Anzahl der Schlüsselwörter festlegen"
   }
 }

src/assets/i18n/participant/en.json

@@ -285,6 +285,10 @@
     "extended-btn": "Weight classes",
     "weight-class-settings": "Weight-classes settings",
     "weight-class": "Weight class",
-    "back-btn": "Back"
+    "back-btn": "Back",
+    "weight-color": "Font color",
+    "weight-number": "max. number of keywords",
+    "weight-color-tooltip": "select font-color",
+    "wieght-number-tooltip": "select maximal number of keywords"
   }
 }