dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactoring

Browse Source
This commit is contained in:
Artem Dzhereleiko 2025-04-04 11:16:36 +03:00
parent 8c8485d7a7
commit 3c50ab1d5e
2 changed files with 29 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
View File

@ -102,30 +102,36 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
{ {
type: [this.colorSettings?.type || ColorType.constant, []], type: [this.colorSettings?.type || ColorType.constant, []],
color: [this.colorSettings?.color, []], color: [this.colorSettings?.color, []],
gradient: [{value: this.colorSettings?.gradient || defaultGradient(this.minValue, this.maxValue), disabled: this.colorSettings?.type !== ColorType.gradient}, []], gradient: [this.colorSettings?.gradient || defaultGradient(this.minValue, this.maxValue), []],
rangeList: [{value: this.colorSettings?.rangeList || defaultRange(), disabled: this.colorSettings?.type !== ColorType.range}, []], rangeList: [this.colorSettings?.rangeList || defaultRange(), []],
colorFunction: [{value: this.colorSettings?.colorFunction, disabled: this.colorSettings?.type !== ColorType.function}, []] colorFunction: [this.colorSettings?.colorFunction, []]
} }
); );
this.colorSettingsFormGroup.get('type').valueChanges.pipe( this.colorSettingsFormGroup.get('type').valueChanges.pipe(
takeUntilDestroyed(this.destroyRef) takeUntilDestroyed(this.destroyRef)
).subscribe((type: ColorType) => { ).subscribe(() => {
this.colorSettingsFormGroup.get('gradient').disable({emitEvent: false}); this.updateValidators();
this.colorSettingsFormGroup.get('rangeList').disable({emitEvent: false});
this.colorSettingsFormGroup.get('colorFunction').disable({emitEvent: false});
switch (type) {
case ColorType.gradient:
this.colorSettingsFormGroup.get('gradient').enable({emitEvent: false});
break;
case ColorType.range:
this.colorSettingsFormGroup.get('rangeList').enable({emitEvent: false});
break;
case ColorType.function:
this.colorSettingsFormGroup.get('colorFunction').enable({emitEvent: false});
break;
}
setTimeout(() => {this.popover?.updatePosition();}, 0); setTimeout(() => {this.popover?.updatePosition();}, 0);
}); });
this.updateValidators();
}
updateValidators() {
const type: ColorType = this.colorSettingsFormGroup.get('type').value;
this.colorSettingsFormGroup.get('gradient').disable({emitEvent: false});
this.colorSettingsFormGroup.get('rangeList').disable({emitEvent: false});
this.colorSettingsFormGroup.get('colorFunction').disable({emitEvent: false});
switch (type) {
case ColorType.gradient:
this.colorSettingsFormGroup.get('gradient').enable({emitEvent: false});
break;
case ColorType.range:
this.colorSettingsFormGroup.get('rangeList').enable({emitEvent: false});
break;
case ColorType.function:
this.colorSettingsFormGroup.get('colorFunction').enable({emitEvent: false});
break;
}
} }
copyColorSettings(comp: ColorSettingsComponent) { copyColorSettings(comp: ColorSettingsComponent) {
@ -145,7 +151,7 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
} }
applyColorSettings() { applyColorSettings() {
const colorSettings: ColorSettings = {...this.colorSettings, ...this.colorSettingsFormGroup.value}; const colorSettings: ColorSettings = this.colorSettingsFormGroup.getRawValue();
this.colorSettingsApplied.emit(colorSettings); this.colorSettingsApplied.emit(colorSettings);
} }

8
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/data-layer-color-settings-panel.component.ts
View File

@ -82,9 +82,9 @@ export class DataLayerColorSettingsPanelComponent extends PageComponent implemen
{ {
type: [this.colorSettings?.type || DataLayerColorType.constant, []], type: [this.colorSettings?.type || DataLayerColorType.constant, []],
color: [this.colorSettings?.color, []], color: [this.colorSettings?.color, []],
rangeKey: [{value: this.colorSettings?.rangeKey, disabled: this.colorSettings.type !== DataLayerColorType.range}, [Validators.required]], rangeKey: [this.colorSettings?.rangeKey, [Validators.required]],
range: [{value: this.colorSettings?.range, disabled: this.colorSettings.type !== DataLayerColorType.range}, []], range: [this.colorSettings?.range, []],
colorFunction: [{value: this.colorSettings?.colorFunction, disabled: this.colorSettings.type !== DataLayerColorType.function}, []] colorFunction: [this.colorSettings?.colorFunction, []]
} }
); );
this.colorSettingsFormGroup.get('type').valueChanges.pipe( this.colorSettingsFormGroup.get('type').valueChanges.pipe(
@ -101,7 +101,7 @@ export class DataLayerColorSettingsPanelComponent extends PageComponent implemen
} }
applyColorSettings() { applyColorSettings() {
const colorSettings: DataLayerColorSettings = {...this.colorSettings ,...this.colorSettingsFormGroup.value}; const colorSettings: DataLayerColorSettings = this.colorSettingsFormGroup.getRawValue();
this.colorSettingsApplied.emit(colorSettings); this.colorSettingsApplied.emit(colorSettings);
} }