polirural-attractiveness-clustering/src/adjuster/adjuster-advanced-panel.component.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" [ngClass]="adjusterService.allowIndex ? 'fw-bold' : 'fw-normal'">
            {{'ADJUSTER.index' | translate}}
          </label>
          <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.indexDescription' | translate}}</p>
        </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" [ngClass]="adjusterService.allowClusters ? 'fw-bold' : 'fw-normal'">
            {{'ADJUSTER.clusters' | translate}}
          </label>
          <p class="text-secondary text-justify fst-italic">{{'ADJUSTER.clustersDescription' | translate}}</p>
        </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 class="p-2 center-block">
      {{'ADJUSTER.myRoleIs' | translate}}:&emsp;
      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeRole" (ngModelChange)="adjusterPresetsService.pickProblem($event)">
        <option *ngFor="let role of adjusterPresetsService.roles" [ngValue]="role">{{getLabelInCurrentLang(role.labels)}}</option>
      </select>
      {{'ADJUSTER.myProblemIs' | translate}}:&emsp;
      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeProblem" (ngModelChange)="adjusterPresetsService.applyProblem($event)">
        <option *ngFor="let problem of adjusterPresetsService.getActiveRoleProblems()" [ngValue]="problem">{{getLabelInCurrentLang(problem.labels)}}</option>
      </select>
    </div>
    <div class="pt-3 center-block">
      <button type="button" class="btn btn-primary btn-sm" [disabled]="adjusterService.isInProcess()"
        (click)="hsLayoutService.setMainPanel('adjuster-simple');$event.preventDefault();">
        <span class="glyphicon cursor-pointer" class="icon-chevron-left"></span>
        {{'ADJUSTER.simple' | translate}}
      </button>
    </div>
    <!--button class="btn btn-light btn-sm" aria-expanded="false" aria-controls="advancedOptions" (click)="showAdvancedOptions = !showAdvancedOptions">
      <span class="glyphicon cursor-pointer" [ngClass]="showAdvancedOptions ? 'icon-chevron-down' : 'icon-chevron-right'"></span>
      {{'ADJUSTER.moreOpts' | translate}}
    </button-->
    <div class="p-2 center-block">
      {{'ADJUSTER.classifyBySchema' | translate}}:&emsp;
      <select class="form-select" [(ngModel)]="adjusterPresetsService.activeSchema" (ngModelChange)="adjusterPresetsService.changeSchema($event)">
        <option *ngFor="let schema of adjusterPresetsService.schemas" [ngValue]="schema">{{getLabelInCurrentLang(schema.labels)}}</option>
      </select>
    </div>
    <div *ngFor="let factor of adjusterService.factors">
      <pra-dataset-list [factor]="factor" *ngIf="hasDatasets(factor)"></pra-dataset-list>
    </div>
    <hr>
    <!--form role="form" class="pt-3 form" [hidden]="!adjusterService.clustersLoaded()">
      <div class="form-group">
        <div class="input-group">
          <label class="text-center">Display clusters calculated by method</label>
          <div>
            <select class="form-control" [(ngModel)]="method" (ngModelChange)="selectMethod()" name="method"
              [value]="method">
              <option *ngFor="let method of adjusterService.methods" [value]="method.codename">{{method.name}}
              </option>
            </select>
          </div>
        </div>
        <small class="text-justify text-info">REMEMBER: Not all clustering methods will provide meaningful results. Always
          take the output with a grain of salt.</small>
      </div>
    </form-->
    <hr>
    <div class="pt-3 center-block" [hidden]="adjusterService.isInProcess()">
      {{'ADJUSTER.layerManagerLink1' | translate}}<br>
      {{'ADJUSTER.layerManagerLink2' | translate}} <a href="" (click)="hsLayoutService.setMainPanel('layermanager');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translate}}</a>
    </div>
  </div>
</div>