rural-attractiveness-cz/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">
      <div class="d-flex flex-row">
        <div>
          <button type="button" class="btn btn-primary btn-lg" (click)="adjusterService.apply()"
            [disabled]="adjusterService.isInProcess() || noDataSelected() || noOperationSelected() ">{{'ADJUSTER.calculate' | translate}}</button>
        </div>
        <div>
          <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
            [ngClass]="adjusterService.allowIndex ? 'hs-checkmark' : 'hs-uncheckmark'"
            (click)="adjusterService.allowIndex = !adjusterService.allowIndex; $event.stopPropagation()"></button>
          <label class="pl-2 text-secondary">{{'ADJUSTER.index' | translate}}</label>
        </div>
        <div>
          <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
            [ngClass]="adjusterService.allowClusters ? 'hs-checkmark' : 'hs-uncheckmark'"
            (click)="adjusterService.allowClusters = !adjusterService.allowClusters; $event.stopPropagation()"></button>
            <label class="pl-2 text-secondary">{{'ADJUSTER.clusters' | translate}}</label>
        </div>
      </div>
      <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 class="p-2 center-block" [hidden]="!adjusterService.allowClusters">
      <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translate}}: {{adjusterService.numberOfClusters}}</div>
      <input type="range" class="custom-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
    </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>
    <hr>
    <div class="pt-3 center-block" [hidden]="!adjusterService.clustersLoaded()">
      {{'ADJUSTER.layerManagerLink1' | translate}}<br>
      {{'ADJUSTER.layerManagerLink2' | translate}} <a href="" (click)="hsLayoutService.setMainPanel('layermanager');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translate}}</a>
    </div>
  </div>
</div>