topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Implement range slider in rule settings dialog

pull/4043/head
Amandee Ellawala 10 months ago
parent
95cb6dcb8d
commit
692780b710
1 changed files with 112 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 174
      apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

174
apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html
View File

@ -1,76 +1,126 @@
<div mat-dialog-title>{{ data.rule.name }}</div> <div mat-dialog-title>{{ data.rule.name }}</div>
<div class="py-3" mat-dialog-content> <div class="py-3" mat-dialog-content>
<div @if (
class="w-100" data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }" ) {
> <div
<h6 class="mb-0"> class="w-100"
<ng-container i18n>Threshold Min</ng-container>: [ngClass]="{
'd-none':
!data.rule.configuration.thresholdMin ||
!data.rule.configuration.thresholdMax
}"
>
<h6 class="mb-0">
<ng-container i18n>Threshold</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>
@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
[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 === '%') { @if (data.rule.configuration.threshold.unit === '%') {
{{ data.settings.thresholdMin | percent: '1.2-2' }} <label>{{
data.rule.configuration.threshold.max | percent: '1.2-2'
}}</label>
} @else { } @else {
{{ data.settings.thresholdMin }} <label>{{ data.rule.configuration.threshold.max }}</label>
} }
</h6> </div>
@if (data.rule.configuration.threshold.unit === '%') { } @else {
<label>{{ <div
data.rule.configuration.threshold.min | percent: '1.2-2' class="w-100"
}}</label> [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
} @else {
<label>{{ data.rule.configuration.threshold.min }}</label>
}
<mat-slider
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" /> <h6 class="mb-0">
</mat-slider> <ng-container i18n>Threshold Min</ng-container>:
@if (data.rule.configuration.threshold.unit === '%') { @if (data.rule.configuration.threshold.unit === '%') {
<label>{{ {{ data.settings.thresholdMin | percent: '1.2-2' }}
data.rule.configuration.threshold.max | percent: '1.2-2' } @else {
}}</label> {{ data.settings.thresholdMin }}
} @else { }
<label>{{ data.rule.configuration.threshold.max }}</label> </h6>
}
</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 === '%') { @if (data.rule.configuration.threshold.unit === '%') {
{{ data.settings.thresholdMax | percent: '1.2-2' }} <label>{{
data.rule.configuration.threshold.min | percent: '1.2-2'
}}</label>
} @else { } @else {
{{ data.settings.thresholdMax }} <label>{{ data.rule.configuration.threshold.min }}</label>
} }
</h6> <mat-slider
@if (data.rule.configuration.threshold.unit === '%') { name="thresholdMin"
<label>{{ [max]="data.rule.configuration.threshold.max"
data.rule.configuration.threshold.min | percent: '1.2-2' [min]="data.rule.configuration.threshold.min"
}}</label> [step]="data.rule.configuration.threshold.step"
} @else { >
<label>{{ data.rule.configuration.threshold.min }}</label> <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
} </mat-slider>
<mat-slider @if (data.rule.configuration.threshold.unit === '%') {
name="thresholdMax" <label>{{
[max]="data.rule.configuration.threshold.max" data.rule.configuration.threshold.max | percent: '1.2-2'
[min]="data.rule.configuration.threshold.min" }}</label>
[step]="data.rule.configuration.threshold.step" } @else {
<label>{{ data.rule.configuration.threshold.max }}</label>
}
</div>
<div
class="w-100"
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
> >
<input matSliderThumb [(ngModel)]="data.settings.thresholdMax" /> <h6 class="mb-0">
</mat-slider> <ng-container i18n>Threshold Max</ng-container>:
@if (data.rule.configuration.threshold.unit === '%') { @if (data.rule.configuration.threshold.unit === '%') {
<label>{{ {{ data.settings.thresholdMax | percent: '1.2-2' }}
data.rule.configuration.threshold.max | percent: '1.2-2' } @else {
}}</label> {{ data.settings.thresholdMax }}
} @else { }
<label>{{ data.rule.configuration.threshold.max }}</label> </h6>
} @if (data.rule.configuration.threshold.unit === '%') {
</div> <label>{{
data.rule.configuration.threshold.min | percent: '1.2-2'
}}</label>
} @else {
<label>{{ data.rule.configuration.threshold.min }}</label>
}
<mat-slider
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> <div align="end" mat-dialog-actions>

Write Preview
Loading…
Cancel
Save