✨ add legends also to advanced adjuster

src/adjuster/adjuster-advanced-panel/adjuster-advanced-panel.component.html

@@ -7,7 +7,7 @@
           <button type="button" class="btn btn-primary btn-lg" (click)="adjusterService.apply()"
             [disabled]="adjusterService.isInProcess() || noDataSelected() || noOperationSelected() ">{{'ADJUSTER.calculate' | translateHs: {app: 'default'} }}</button>
         </div>
-        <div>
+        <div class="ps-1 ps-sm-3">
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
             [ngClass]="adjusterService.allowIndex ? 'hs-checkmark' : 'hs-uncheckmark'"
             (click)="adjusterService.allowIndex = !adjusterService.allowIndex; $event.stopPropagation()"></button>
@@ -16,7 +16,7 @@
           </label>
           <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.indexDescription' | translateHs: {app: 'default'} }}</p>
         </div>
-        <div>
+        <div class="ps-1 ps-sm-3">
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
             [ngClass]="adjusterService.allowClusters ? 'hs-checkmark' : 'hs-uncheckmark'"
             (click)="adjusterService.allowClusters = !adjusterService.allowClusters; $event.stopPropagation()"></button>
@@ -34,11 +34,11 @@
       <input type="range" class="form-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
     </div>
     <div class="p-2 center-block">
-      {{'ADJUSTER.myRoleIs' | translateHs: {app: 'default'} }}:&emsp;
-      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeRole" (ngModelChange)="adjusterPresetsService.pickProblem($event)">
+      <p class="my-1">{{'ADJUSTER.myRoleIs' | translateHs: {app: 'default'} }}:&emsp;</p>
+      <select class="form-select mb-1 mb-sm-2" [(ngModel)]="adjusterPresetsService.activeRole" (ngModelChange)="adjusterPresetsService.pickProblem($event)">
         <option *ngFor="let role of adjusterPresetsService.roles" [ngValue]="role">{{getLabelInCurrentLang(role.labels)}}</option>
       </select>
-      {{'ADJUSTER.myProblemIs' | translateHs: {app: 'default'} }}:&emsp;
+      <p class="my-1">{{'ADJUSTER.myProblemIs' | translateHs: {app: 'default'} }}:&emsp;</p>
       <select class="form-select" [(ngModel)]="adjusterPresetsService.activeProblem" (ngModelChange)="adjusterPresetsService.applyProblem($event)">
         <option *ngFor="let problem of adjusterPresetsService.getActiveRoleProblems()" [ngValue]="problem">{{getLabelInCurrentLang(problem.labels)}}</option>
       </select>
@@ -64,7 +64,31 @@
       <pra-dataset-list [factor]="factor" *ngIf="hasDatasets(factor)"></pra-dataset-list>
     </div>
     <hr>
-    <!--form role="form" class="pt-3 form" [hidden]="!adjusterService.clustersLoaded()">
+    <div [hidden]="!adjusterService.allowIndex" class="pb-2">
+      <p class="lead">{{ 'ADJUSTER.indexLegend' | translateHs: {app: 'default'} }}</p>
+      <div class="d-flex pb-1">
+        <div *ngFor="let category of adjusterLegendService.staticIndexLegend" class="flex-grow-1">
+          <div [ngStyle]="{'background-color': category}">&nbsp;</div>
+        </div>
+      </div>
+      <div class="d-flex">
+        <div class="flex-grow-1 text-start">{{ 'ADJUSTER.index0' | translateHs: {app: 'default'} }}</div>
+        <div class="flex-grow-1">&nbsp;</div>
+        <div class="flex-grow-1 text-end">{{ 'ADJUSTER.index100' | translateHs: {app: 'default'} }}</div>
+      </div>
+    </div>
+    <div [hidden]="!adjusterService.allowClusters" class="pb-2">
+      <p class="lead">{{ 'ADJUSTER.clusterLegend' | translateHs: {app: 'default'} }}</p>
+      <div class="container">
+        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
+          <div *ngFor="let color of adjusterLegendService.staticClusterLegend; let i = index" class="col">
+            <div style="background-color: {{color}}" class="cluster-id text-center p-1 py-sm-3 my-1 my-sm-2">#{{i+1}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--hr>
+    <form role="form" class="pt-3 form" [hidden]="!adjusterService.clustersLoaded()">
       <div class="form-group">
         <div class="input-group">
           <label class="text-center">Display clusters calculated by method</label>

src/adjuster/adjuster-advanced-panel/adjuster-advanced-panel.component.ts

@@ -2,6 +2,7 @@ import {Component, ViewRef} from '@angular/core';
 
 import {HsLayoutService, HsPanelBaseComponent} from 'hslayers-ng';
 
+import {AdjusterLegendService} from '../adjuster-legend.service';
 import {AdjusterPresetsService} from '../adjuster-presets.service';
 import {AdjusterService} from '../adjuster.service';
 
@@ -20,6 +21,7 @@ export class AdjusterAdvancedPanelComponent extends HsPanelBaseComponent {
 
   constructor(
     public adjusterService: AdjusterService,
+    public adjusterLegendService: AdjusterLegendService,
     public adjusterPresetsService: AdjusterPresetsService,
     public hsLayoutService: HsLayoutService
   ) {

src/adjuster/adjuster-simple-panel/adjuster-simple-panel.component.html

@@ -34,11 +34,11 @@
       <input type="range" class="form-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
     </div>
     <div class="p-2 center-block">
-      {{'ADJUSTER.myRoleIs' | translateHs: {app: 'default'} }}:&emsp;
-      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeRole" (ngModelChange)="adjusterPresetsService.pickProblem($event)">
+      <p class="my-1">{{'ADJUSTER.myRoleIs' | translateHs: {app: 'default'} }}:&emsp;</p>
+      <select class="form-select mb-1 mb-sm-2" [(ngModel)]="adjusterPresetsService.activeRole" (ngModelChange)="adjusterPresetsService.pickProblem($event)">
         <option *ngFor="let role of adjusterPresetsService.roles" [ngValue]="role">{{adjUIService.getLabelInCurrentLang(role.labels)}}</option>
       </select>
-      {{'ADJUSTER.myProblemIs' | translateHs: {app: 'default'} }}:&emsp;
+      <p class="my-1">{{'ADJUSTER.myProblemIs' | translateHs: {app: 'default'} }}:&emsp;</p>
       <select class="form-select" [(ngModel)]="adjusterPresetsService.activeProblem" (ngModelChange)="adjusterPresetsService.applyProblem($event)">
         <option *ngFor="let problem of adjusterPresetsService.getActiveRoleProblems()" [ngValue]="problem">{{adjUIService.getLabelInCurrentLang(problem.labels)}}</option>
       </select>