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

<div [hidden]="!isVisible()" class="card mainpanel">
  <hs-panel-header name="adjuster" [title]="'CALCULATOR.panelHeader' | translate"></hs-panel-header>
  <div class="card-body">
    <div class="p-2 center-block">
      <!-- FIELD & INDEX SELECTION PART -->
      <div>
        {{ 'CALCULATOR.selectIndex' | translate}}:&emsp;
        <select class="form-select" [(ngModel)]="data.selectedProduct">
          <option *ngFor="let product of calcService.availableProducts" [ngValue]="product">{{product}}</option>
        </select>
      </div>
      <div>
        <button type="button" class="btn btn-primary btn-lg" (click)="getDates()"
          [disabled]="noFieldSelected() || noProductSelected()">{{ 'CALCULATOR.getDates' | translate}}</button>
      </div>
      <!-- LOADER -->
      <div [hidden]="!calcService.datesLoading" aria-hidden="true">
        <p class="card-text placeholder-glow">
          <span class="placeholder col-6"></span>
        </p>
        <a href="#" tabindex="-1" class="btn btn-primary btn-lg disabled placeholder col-6"></a>
      </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 [hidden]="noDates()">
        <button type="button" class="btn btn-primary btn-lg" (click)="getZones()"
          [disabled]="noDateSelected()">{{ 'CALCULATOR.getZones' | translate }}</button>
      </div>
    </div>
  </div>
</div>