diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html index 9f170dff8c..11e0d6abc2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html @@ -76,6 +76,14 @@
widgets.gauge.max-value-short
+ + warning + diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts index c3850db5ee..bb0eae4faf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.ts @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, ValidationErrors, ValidatorFn } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; @@ -109,7 +109,7 @@ export class DigitalSimpleGaugeBasicConfigComponent extends BasicWidgetConfigCom showMinMax: [settings.showMinMax, []], minValue: [settings.minValue, []], - maxValue: [settings.maxValue, []], + maxValue: [settings.maxValue, [this.maxValueValidation()]], minMaxFont: [settings.minMaxFont, []], minMaxColor: [settings.minMaxFont?.color, []], @@ -182,11 +182,29 @@ export class DigitalSimpleGaugeBasicConfigComponent extends BasicWidgetConfigCom return this.widgetConfig; } + private maxValueValidation(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const value: string = control.value; + if (value) { + if (value < control.parent?.get('minValue').value) { + return {maxValue: true}; + } + } + return null; + }; + } + protected validatorTriggers(): string[] { - return ['gaugeType', 'showValue', 'showTitle', 'showMinMax']; + return ['gaugeType', 'showValue', 'showTitle', 'showMinMax', 'minValue']; } protected updateValidators(emitEvent: boolean, trigger?: string) { + if (trigger === 'minValue') { + this.simpleGaugeWidgetConfigForm.get('maxValue').updateValueAndValidity({emitEvent: true}); + this.simpleGaugeWidgetConfigForm.get('maxValue').markAsTouched({onlySelf: true}); + return; + } + const isDonut = this.simpleGaugeWidgetConfigForm.get('gaugeType').value === this.digitalGaugeType.donut; if (isDonut) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html index 62cacf0730..173d2102d6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html @@ -65,6 +65,14 @@
widgets.gauge.max-value-short
+ + warning + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts index 5a4289a8d2..5de1b77b18 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts @@ -16,7 +16,14 @@ import { Datasource, WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; import { Component } from '@angular/core'; -import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { + AbstractControl, + UntypedFormArray, + UntypedFormBuilder, + UntypedFormGroup, ValidationErrors, + ValidatorFn, + Validators +} from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { GaugeType } from '@home/components/widget/lib/canvas-digital-gauge'; @@ -167,7 +174,7 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent donutStartAngle: [settings.donutStartAngle, []], showMinMax: [settings.showMinMax, []], minValue: [settings.minValue, []], - maxValue: [settings.maxValue, []], + maxValue: [settings.maxValue, [this.maxValueValidation()]], minMaxFont: [settings.minMaxFont, []], minMaxColor: [settings.minMaxFont.color, []], @@ -206,6 +213,18 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent }); } + private maxValueValidation(): ValidatorFn { + return (control: AbstractControl): ValidationErrors | null => { + const value: string = control.value; + if (value) { + if (value < control.parent?.get('minValue').value) { + return {maxValue: true}; + } + } + return null; + }; + } + protected prepareOutputSettings(settings) { const barColor: ColorSettings = this.digitalGaugeWidgetSettingsForm.get('barColor').value; @@ -230,10 +249,15 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent } protected validatorTriggers(): string[] { - return ['gaugeType', 'showTitle', 'showUnitTitle', 'showValue', 'showMinMax', 'showTimestamp', 'showTicks', 'animation']; + return ['gaugeType', 'showTitle', 'showUnitTitle', 'showValue', 'showMinMax', 'showTimestamp', 'showTicks', 'animation', 'minValue']; } - protected updateValidators(emitEvent: boolean) { + protected updateValidators(emitEvent: boolean, trigger: string) { + if (trigger === 'minValue') { + this.digitalGaugeWidgetSettingsForm.get('maxValue').updateValueAndValidity({emitEvent: true}); + this.digitalGaugeWidgetSettingsForm.get('maxValue').markAsTouched({onlySelf: true}); + return; + } const gaugeType: GaugeType = this.digitalGaugeWidgetSettingsForm.get('gaugeType').value; const showTitle: boolean = this.digitalGaugeWidgetSettingsForm.get('showTitle').value; const showUnitTitle: boolean = this.digitalGaugeWidgetSettingsForm.get('showUnitTitle').value; diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 9a3db843db..a35e41c7b8 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -6282,7 +6282,8 @@ "min-and-max-value": "Min and max value", "min-and-max-label": "Min and max label", "font": "Font", - "tick-width-and-color": "Tick width and color" + "tick-width-and-color": "Tick width and color", + "min-max-validation-text": "Max value must be bigger than min value" }, "gpio": { "pin": "Pin",