polirural-attractiveness-clustering/src/adjuster/adjuster.directive.html

<div class="card card-default mainpanel">
  <hs.layout.panel-header panel-name="adjuster" panel-title="'Adjust factors'||translate"></hs.layout.panel-header>
  <style>
    .weather-table>tbody>tr>td,
    .table-condensed>tbody>tr>th,
    .table-condensed>tfoot>tr>td,
    .table-condensed>tfoot>tr>th,
    .table-condensed>thead>tr>td,
    .table-condensed>thead>tr>th {
      padding: 2px;
    }
  </style>
  <div class="card-body">
    <button type="button" class="btn btn-primary" ng-click="PraAdjusterService.apply()" ng-disabled="PraAdjusterService.isClusteringInProcess()">Calculate clusters</button>
    <div class="card-body">
      <div ng-repeat="factor in PraAdjusterService.factors">
        <div class="d-flex flex-row">
          <div class="p-2 flex-grow-1">
            <label>{{factor.name}}</label>
          </div>
          <div class="p-2">{{(factor.weight * 100).toFixed(0)}}&nbsp;%</div>
        </div>
        <input type="range" class="custom-range" ng-model="factor.weight" min="0"
          max="1.0" step="0.05">
        <span class="glyphicon" ng-class="datasetlistVisible ? 'icon-chevron-left' : 'icon-chevron-right'"
          ng-click="datasetlistVisible = !datasetlistVisible"></span>
        <div ng-init="datasetlistVisible = false" ng-show="datasetlistVisible">
          <div ng-repeat="dataset in factor.datasets">
            <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
              ng-click="dataset.included = !dataset.included;$event.stopPropagation()"
              ng-class="dataset.included ? 'hs-checkmark' : 'hs-uncheckmark'"></button>
            <label>{{dataset.name}}</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>