fieldcalc-frontend/src/app/calculator/calculator.component.html

<div [hidden]="!isVisible()" class="card mainpanel">
  <hs-panel-header name="adjuster" [title]="'CALCULATOR.panelHeader' | translate">
    <extra-buttons>
      <!-- LOADER -->
      <div class="spinner-border spinner spinner-sm mx-2" role="status"
        title="{{ 'CALCULATOR.loading' | translate }}..." *ngIf="calcService.lpisLoading">
        <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
      </div>
    </extra-buttons>
  </hs-panel-header>
  <div class="card-body">
    <div class="p-2 center-block">
      <!-- FIELD & INDEX SELECTION PART -->
      <div *ngIf="!noFieldSelected(); else noField">
        <p *ngIf="data.selectedFieldsProperties.length === 1; else moreFields">
          {{ 'CALCULATOR.selectedField' | translate}} {{data.selectedFieldsProperties[0]?.['id_dpb'] ?? '?'}}
        </p>
        <ng-template #moreFields>
          <p>
            {{ 'CALCULATOR.selectedFields' | translate}}
            <span *ngFor="let props of data.selectedFieldsProperties; last as isLast">
              {{props?.['id_dpb'] ?? '?'}}<ng-container *ngIf="!isLast">,</ng-container>
            </span>
          </p>
        </ng-template>
      </div>
      <ng-template #noField>
        <div>
          <p class="p-1 text-info">{{ 'CALCULATOR.selectField' | translate}}</p>
          <p class="p-1 text-warning" *ngIf="!lpisWfsVisible"><i class="icon-warning-sign"></i>&nbsp;{{ 'CALCULATOR.zoomIn' | translate}}</p>
        </div>
      </ng-template>
      <div>
        <p class="p-1 text-info">{{ 'CALCULATOR.selectMore' | translate}}</p>
      </div>
      <div>
        {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectQuantiles', {quantileCount:
        calcService.quantileCount})}}:&emsp;
        <input type="range" min="2" max="10" step="1" [(ngModel)]="calcService.quantileCount">
      </div>
      <div>
        {{ 'CALCULATOR.selectBlur' | translate}}:&emsp;{{calcService.blurValue}}&nbsp;px <span
          *ngIf="calcService.blurValue === 0">({{ 'CALCULATOR.blurNone' | translate}})</span>
        <input type="range" min="{{calcService.BLUR_MIN_VALUE}}" max="{{calcService.BLUR_MAX_VALUE}}" step="1"
          [(ngModel)]="calcService.blurValue">
      </div>
      <div>
        {{ 'CALCULATOR.selectIndex' | translate}}:&emsp;
        <select class="form-select" [(ngModel)]="data.selectedProduct" (ngModelChange)="resetDate()">
          <option *ngFor="let product of calcService.AVAILABLE_PRODUCTS" [ngValue]="product">{{product}}</option>
        </select>
      </div>
      <div class="d-flex">
        <div>
          <button type="button" class="btn btn-primary btn-lg" (click)="getDates()"
            [disabled]="noFieldSelected() || noProductSelected()">{{ 'CALCULATOR.getDates' | translate}}</button>
        </div>
        <!-- LOADER -->
        <div class="spinner-border spinner mx-2" role="status" *ngIf="calcService.datesLoading" aria-hidden="true">
          <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
        </div>
      </div>
      <!-- DATE SELECTION PART -->
      <div [hidden]="noDates()">
        {{ 'CALCULATOR.selectDate' | translate}}:&emsp;
        <select class="form-select" [(ngModel)]="calcService.selectedDate" (ngModelChange)="updateRangeSlider($event)">
          <option *ngFor="let date of calcService.availableDates" [ngValue]="date">{{date}}</option>
        </select>
        <!-- TODO: date-picker instead of select -->
        <fc-date-range-slider [values]="calcService.availableDates"></fc-date-range-slider>
      </div>
      <div class="d-flex" *ngIf="!noDates()">
        <button type="button" class="btn btn-primary btn-lg" (click)="getZones()" [disabled]="noDateSelected()">{{
          'CALCULATOR.getZones' | translate }}</button>
        <!-- LOADER -->
        <div class="spinner-border spinner mx-2" role="status" *ngIf="calcService.zonesLoading" aria-hidden="true">
          <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
        </div>
      </div>
    </div>
  </div>
</div>