✨ show extra legend in simple-adjuster

resolves #24

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

@@ -3,11 +3,17 @@
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/forms";
 
+hr {border: 1px solid $primary;}
+
 .center-block {
   text-align: center;
   margin-bottom: 1em;
 }
 
+.cluster-id {
+  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }

src/adjuster/adjuster-legend.service.ts

@@ -27,17 +27,22 @@ export class AdjusterLegendService {
     '#b15928',
   ];
   serviceUrl: string;
+  staticIndexLegend: any[];
+
   constructor(public adjusterPresetsService: AdjusterPresetsService) {
     this.serviceUrl = this.adjusterPresetsService.serviceBaseUrl + 'georeport/';
+    this.staticIndexLegend = [...Array(50).keys()].map((num) => {
+      return perc2color(num / 50);
+    });
   }
 
   createIndexLegend(): FakeLegend {
     return [
-      {color: perc2color(0), name: '0 %'},
-      {color: perc2color(0.25), name: '25 %'},
-      {color: perc2color(0.5), name: '50 %'},
-      {color: perc2color(0.75), name: '75 %'},
-      {color: perc2color(1), name: '100 %'},
+      {color: perc2color(1), name: 'best'},
+      {color: perc2color(0.75), name: 'good'},
+      {color: perc2color(0.5), name: 'mediocre'},
+      {color: perc2color(0.25), name: 'bad'},
+      {color: perc2color(0), name: 'worst'},
     ];
   }
 

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

@@ -7,7 +7,7 @@
           <button type="button" class="btn btn-primary btn-lg" (click)="adjusterService.apply()"
             [disabled]="adjusterService.isInProcess() || adjUIService.noDataSelected() || adjUIService.noOperationSelected() ">{{'ADJUSTER.calculate' | translateHs: {app: 'default'} }}</button>
         </div>
-        <div class="exclusive ps-xs-1 ps-3">
+        <div class="exclusive 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)="selectIndex()"></button>
@@ -16,7 +16,7 @@
           </label>
           <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.indexDescription' | translateHs: {app: 'default'} }}</p>
         </div>
-        <div class="exclusive ps-xs-1 ps-3">
+        <div class="exclusive 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)="selectClusters()"></button>
@@ -43,7 +43,6 @@
         <option *ngFor="let problem of adjusterPresetsService.getActiveRoleProblems()" [ngValue]="problem">{{adjUIService.getLabelInCurrentLang(problem.labels)}}</option>
       </select>
     </div>
-    <hr>
     <div class="pt-3 center-block">
       <button type="button" class="btn btn-primary btn-sm" [disabled]="adjusterService.isInProcess()"
         (click)="hsLayoutService.setMainPanel('adjuster-advanced', 'default');$event.preventDefault();">
@@ -52,6 +51,30 @@
       </button>
     </div>
     <hr>
+    <div *ngIf="adjusterService.allowIndex; else clusterLegend" 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>
+    <ng-template #clusterLegend>
+      <p class="lead">{{ 'ADJUSTER.clusterLegend' | translateHs: {app: 'default'} }}</p>
+      <div class="container pb-2">
+        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
+          <div *ngFor="let color of adjusterLegendService.colorPalette; 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>
+    </ng-template>
+    <hr>
     <div class="pt-3 center-block" [hidden]="adjusterService.isInProcess()">
       {{'ADJUSTER.layerManagerLink1' | translateHs: {app: 'default'} }}<br>
       {{'ADJUSTER.layerManagerLink2' | translateHs: {app: 'default'} }} <a href="" (click)="hsLayoutService.setMainPanel('layermanager', 'default');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translateHs: {app: 'default'} }}</a>

src/adjuster/adjuster-simple-panel/adjuster-simple-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';
 import {AdjusterUIService} from '../adjuster-ui.service';
@@ -21,6 +22,7 @@ export class AdjusterSimplePanelComponent extends HsPanelBaseComponent {
 
   constructor(
     public adjUIService: AdjusterUIService,
+    public adjusterLegendService: AdjusterLegendService,
     public adjusterPresetsService: AdjusterPresetsService,
     public adjusterService: AdjusterService,
     public hsLayoutService: HsLayoutService

src/translations.json

@@ -10,10 +10,14 @@
       "calcAttractivity": "Počítám atraktivitu",
       "calcClusters": "Počítám shluky",
       "classifyBySchema": "Klasifikovat faktory dle schématu",
+      "clusterLegend": "Barvy shluků",
       "clusters": "Shluky",
       "clustersDescription": "Skupiny podobných regionů",
       "index": "Index",
+      "index0": "nejméně atraktivní",
+      "index100": "nejvíce atraktivní",
       "indexDescription": "Žebříček atraktivity",
+      "indexLegend": "Stupnice atraktivity",
       "layerManagerLink1": "Vrstvy můžete prozkoumat",
       "layerManagerLink2": "ve",
       "layerManagerLinkLMName": "Správci vrstev",
@@ -46,10 +50,14 @@
       "calcAttractivity": "Calculating attractivity",
       "calcClusters": "Calculating clusters",
       "classifyBySchema": "Classify factors by schema",
+      "clusterLegend": "Cluster colours",
       "clusters": "Clusters",
       "clustersDescription": "Groups of similar regions",
       "index": "Index",
+      "index0": "least attractive",
+      "index100": "most attractive",
       "indexDescription": "Ranking of attractivness",
+      "indexLegend": "Attractiveness scale",
       "layerManagerLink1": "You can investigate the layers",
       "layerManagerLink2": "in the",
       "layerManagerLinkLMName": "Layer Manager",