rural-attractiveness-africa/src/adjuster/adjuster.directive.html

<div [hidden]="!isVisible()" class="card mainpanel">
  <hs-panel-header name="adjuster" [title]="'ADJUSTER.adjustFactors' | translate"></hs-panel-header>
  <div class="card-body">
    <div class="p-2 center-block">
      <button type="button" class="btn btn-primary" (click)="adjusterService.apply()"
        [disabled]="adjusterService.isInProcess() || noDataSelected()">{{'ADJUSTER.calculate' | translate}}</button>
      <div class="text-warning pt-2" [hidden]="!noDataSelected() || errorMsg">{{'ADJUSTER.noDataSelectedMsg' | translate}}</div>
      <div class="text-danger pt-2" [hidden]="!errorMsg">{{'ADJUSTER.serverError' | translate}}: {{errorMsg}}</div>
    </div>
    <div *ngFor="let factor of adjusterService.factors; let datasetlistVisible = false">
      <div class="d-flex flex-row">
        <div class="p-2 flex-grow-1">
          <span class="glyphicon cursor-pointer"
            [ngClass]="datasetlistVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
            (click)="datasetlistVisible = !datasetlistVisible"></span>
          <label class="pl-2 cursor-pointer" (click)="datasetlistVisible = !datasetlistVisible">{{factor.name}}</label>
        </div>
        <div class="p-2">{{(factor.weight * 100).toFixed(0)}}&nbsp;%</div>
      </div>
      <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">
          <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
            [ngClass]="dataset.included ? 'hs-checkmark' : 'hs-uncheckmark'"
            (click)="dataset.included = !dataset.included;$event.stopPropagation()"></button>
          <!-- commented because we do not have descriptions yet -->
          <!--span class="glyphicon cursor-pointer text-secondary"
            [ngClass]="descriptionVisible ? 'icon-chevron-down' : 'icon-chevron-right'"
            (click)="descriptionVisible = !descriptionVisible"></span-->
          <!--label class="pl-2 cursor-pointer text-secondary"
            (click)="descriptionVisible = !descriptionVisible">{{dataset.name}}</label-->
            <label class="pl-2 text-secondary">{{dataset.name}}</label>
          <div class="p-2 mb-2 text-justify text-info" [hidden]="!descriptionVisible">
            {{dataset.desc}}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>