🚸 calculate only on button click

src/adjuster/adjuster.directive.html

@@ -2,7 +2,11 @@
   <hs-panel-header name="adjuster" [title]="'ADJUSTER.adjustFactors' | translate"></hs-panel-header>
   <div class="card-body">
     <div class="p-2 center-block">
-      <!-- PLACEHOLDER -->
+      <button type="button" class="btn btn-primary" (click)="adjusterService.apply()"
+        [disabled]="adjusterService.isInProcess() || noDataSelected()">Calculate</button>
+      <div class="text-warning pt-2" [hidden]="!noDataSelected() || errorMsg">Select at least one dataset and set at least one
+        factor's weight to a non-zero value.</div>
+      <div class="text-danger pt-2" [hidden]="!errorMsg">Server error: {{errorMsg}}</div>
     </div>
     <div *ngFor="let factor of adjusterService.factors; let datasetlistVisible = false">
       <div class="d-flex flex-row">
@@ -14,7 +18,7 @@
         </div>
         <div class="p-2">{{(factor.weight * 100).toFixed(0)}}&nbsp;%</div>
       </div>
-      <input type="range" class="custom-range" (change)="adjusterService.apply()" [(ngModel)]="factor.weight" min="0"
+      <input type="range" class="custom-range" [(ngModel)]="factor.weight" min="0"
         max="1.0" step="0.05">
       <div [hidden]="!datasetlistVisible">
         <div *ngFor="let dataset of factor.datasets; let descriptionVisible = false">

src/adjuster/adjuster.service.ts

@@ -4,7 +4,6 @@ import {Injectable} from '@angular/core';
 import {HsLayerManagerService} from 'hslayers-ng/components/layermanager';
 import {HsUtilsService} from 'hslayers-ng/components/utils/utils.service';
 
-// import attractivity from '../Attractivity.json';
 import {obce, osmLayer} from '../app.config';
 
 @Injectable({providedIn: 'root'})
@@ -13,6 +12,8 @@ export class AdjusterService {
   //nutsCodeRecordRelations = {};
   //attractivity;
   factors: any = [];
+  private _clusteringInProcess: boolean;
+  private _raiInProcess: boolean;
 
   constructor(
     public hsLayerManagerService: HsLayerManagerService,
@@ -23,6 +24,8 @@ export class AdjusterService {
       window.location.hostname === 'localhost'
         ? 'https://jmacura.ml/ws/' // 'http://localhost:3000/'
         : 'https://publish.lesprojekt.cz/nodejs/';
+    this._raiInProcess = false;
+    this._clusteringInProcess = false;
   }
 
   /**
@@ -31,6 +34,7 @@ export class AdjusterService {
    */
   apply(): void {
     const f = () => {
+      this._raiInProcess = true;
       this.$http
         .post(this.serviceBaseUrl + 'scores/cz', {
           factors: this.factors.map((f) => {
@@ -116,16 +120,19 @@ export class AdjusterService {
             });*/
           });
           console.timeEnd('forEachObce');
+          this._raiInProcess = false;
         })
         .catch((error) => {
           console.warn(`Error obtaining data from ${this.serviceBaseUrl}.`);
           console.log(error);
+          this._raiInProcess = false;
         });
     };
     this.hsUtilsService.debounce(f, 300, false, this)();
   }
 
   init(): void {
+    this._raiInProcess = true;
     this.$http
       .get(this.serviceBaseUrl + 'datasets/cz')
       .toPromise()
@@ -143,6 +150,7 @@ export class AdjusterService {
             .map((ds) => {
               return {
                 name: ds.Name,
+                desc: ds.Description,
                 included: true,
               };
             });
@@ -153,6 +161,14 @@ export class AdjusterService {
       .catch((error) => {
         console.warn(`Web service at ${this.serviceBaseUrl} unavailable!`);
         console.log(error);
+        this._raiInProcess = false;
       });
   }
+
+  /**
+   * @returns {boolean} true if clustering or index processing is in process, false otherwise
+   */
+  isInProcess(): boolean {
+    return this._clusteringInProcess || this._raiInProcess;
+  }
 }