You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

144 lines
4.9 KiB

<div mat-dialog-title>{{ data.categoryName }} › {{ data.rule.name }}</div>
<form class="d-flex flex-column h-100" [formGroup]="form" (ngSubmit)="onSave()">
<div class="py-3" mat-dialog-content>
@if (
data.rule.configuration.thresholdMin &&
data.rule.configuration.thresholdMax
) {
<div class="w-100">
<h6 class="d-flex mb-0">
<ng-container i18n>Threshold range</ng-container>:
<gf-value
class="ml-1"
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="form.value.thresholdMin"
/>
<span class="mx-1">-</span>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="form.value.thresholdMax"
/>
</h6>
<div class="align-items-center d-flex w-100">
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.min"
/>
<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 formControlName="thresholdMin" matSliderStartThumb />
<input formControlName="thresholdMax" matSliderEndThumb />
</mat-slider>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.max"
/>
</div>
</div>
} @else {
<div
class="w-100"
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
>
<h6 class="d-flex mb-0">
<ng-container i18n>Threshold Min</ng-container>:
<gf-value
class="ml-1"
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="form.value.thresholdMin"
/>
</h6>
<div class="align-items-center d-flex w-100">
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.min"
/>
<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 formControlName="thresholdMin" matSliderThumb />
</mat-slider>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.max"
/>
</div>
</div>
<div
class="w-100"
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
>
<h6 class="d-flex mb-0">
<ng-container i18n>Threshold Max</ng-container>:
<gf-value
class="ml-1"
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="form.value.thresholdMax"
/>
</h6>
<div class="align-items-center d-flex w-100">
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.min"
/>
<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 formControlName="thresholdMax" matSliderThumb />
</mat-slider>
<gf-value
[isPercent]="data.rule.configuration.threshold.unit === '%'"
[locale]="data.locale"
[precision]="2"
[value]="data.rule.configuration.threshold.max"
/>
</div>
</div>
}
</div>
<div align="end" mat-dialog-actions>
<button i18n mat-button type="button" (click)="dialogRef.close()">
Close
</button>
<button
color="primary"
mat-flat-button
type="submit"
[disabled]="!(form.dirty && form.valid)"
>
<ng-container i18n>Save</ng-container>
</button>
</div>
</form>