ghostfolio/apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

<div mat-dialog-title>{{ data.rule.name }}</div>

<div class="py-3" mat-dialog-content>
  @if (
    data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
  ) {
    <div class="w-100">
      <h6 class="mb-0">
        <ng-container i18n>Threshold range</ng-container>:
        @if (data.rule.configuration.threshold.unit === '%') {
          {{ data.settings.thresholdMin | percent: '1.2-2' }}
        } @else {
          {{ data.settings.thresholdMin }}
        }
        -
        @if (data.rule.configuration.threshold.unit === '%') {
          {{ data.settings.thresholdMax | percent: '1.2-2' }}
        } @else {
          {{ data.settings.thresholdMax }}
        }
      </h6>
      <div class="align-items-center d-flex w-100">
        @if (data.rule.configuration.threshold.unit === '%') {
          <label>{{
            data.rule.configuration.threshold.min | percent: '1.2-2'
          }}</label>
        } @else {
          <label>{{ data.rule.configuration.threshold.min }}</label>
        }
        <mat-slider
          class="flex-grow-1"
          [max]="data.rule.configuration.threshold.max"
          [min]="data.rule.configuration.threshold.min"
          [step]="data.rule.configuration.threshold.step"
        >
          <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
          <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
        </mat-slider>
        @if (data.rule.configuration.threshold.unit === '%') {
          <label>{{
            data.rule.configuration.threshold.max | percent: '1.2-2'
          }}</label>
        } @else {
          <label>{{ data.rule.configuration.threshold.max }}</label>
        }
      </div>
    </div>
  } @else {
    <div
      class="w-100"
      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
    >
      <h6 class="mb-0">
        <ng-container i18n>Threshold Min</ng-container>:
        @if (data.rule.configuration.threshold.unit === '%') {
          {{ data.settings.thresholdMin | percent: '1.2-2' }}
        } @else {
          {{ data.settings.thresholdMin }}
        }
      </h6>
      <div class="align-items-center d-flex w-100">
        @if (data.rule.configuration.threshold.unit === '%') {
          <label>{{
            data.rule.configuration.threshold.min | percent: '1.2-2'
          }}</label>
        } @else {
          <label>{{ data.rule.configuration.threshold.min }}</label>
        }
        <mat-slider
          class="flex-grow-1"
          name="thresholdMin"
          [max]="data.rule.configuration.threshold.max"
          [min]="data.rule.configuration.threshold.min"
          [step]="data.rule.configuration.threshold.step"
        >
          <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
        </mat-slider>
        @if (data.rule.configuration.threshold.unit === '%') {
          <label>{{
            data.rule.configuration.threshold.max | percent: '1.2-2'
          }}</label>
        } @else {
          <label>{{ data.rule.configuration.threshold.max }}</label>
        }
      </div>
    </div>
    <div
      class="w-100"
      [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
    >
      <h6 class="mb-0">
        <ng-container i18n>Threshold Max</ng-container>:
        @if (data.rule.configuration.threshold.unit === '%') {
          {{ data.settings.thresholdMax | percent: '1.2-2' }}
        } @else {
          {{ data.settings.thresholdMax }}
        }
      </h6>
      <div class="align-items-center d-flex w-100">
        @if (data.rule.configuration.threshold.unit === '%') {
          <label>{{
            data.rule.configuration.threshold.min | percent: '1.2-2'
          }}</label>
        } @else {
          <label>{{ data.rule.configuration.threshold.min }}</label>
        }
        <mat-slider
          class="flex-grow-1"
          name="thresholdMax"
          [max]="data.rule.configuration.threshold.max"
          [min]="data.rule.configuration.threshold.min"
          [step]="data.rule.configuration.threshold.step"
        >
          <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
        </mat-slider>
        @if (data.rule.configuration.threshold.unit === '%') {
          <label>{{
            data.rule.configuration.threshold.max | percent: '1.2-2'
          }}</label>
        } @else {
          <label>{{ data.rule.configuration.threshold.max }}</label>
        }
      </div>
    </div>
  }
</div>

<div align="end" mat-dialog-actions>
  <button i18n mat-button (click)="dialogRef.close()">Close</button>
  <button
    color="primary"
    mat-flat-button
    (click)="dialogRef.close(data.settings)"
  >
    <ng-container i18n>Save</ng-container>
  </button>
</div>