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 2024-06-07 14:59:09 +03:00
parent 487c0e4989
commit fd7f91d948
4 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
View File

@ -162,10 +162,10 @@ export const backwardCompatibilityTicks = (ticksValue: AttributeSourceProperty[]
return ticks; return ticks;
}; };
export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaugeSettings, keyColor?: string) => { export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaugeSettings, defaultColor?: string) => {
if (settings.barColor) { if (settings.barColor) {
if (!settings.barColor.color) { if (!settings.barColor.color) {
settings.barColor.color = keyColor; settings.barColor.color = defaultColor;
} }
if (isDefinedAndNotNull(settings.barColor.gradient)) { if (isDefinedAndNotNull(settings.barColor.gradient)) {
settings.barColor.gradient.minValue = settings.minValue; settings.barColor.gradient.minValue = settings.minValue;
@ -174,7 +174,7 @@ export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaug
settings.barColor.gradient = defaultGradient(settings.minValue, settings.maxValue); settings.barColor.gradient = defaultGradient(settings.minValue, settings.maxValue);
} }
} else { } else {
settings.barColor = constantColor(keyColor); settings.barColor = constantColor(defaultColor);
if (settings.fixedLevelColors?.length) { if (settings.fixedLevelColors?.length) {
settings.barColor.rangeList = { settings.barColor.rangeList = {
advancedMode: settings.useFixedLevelColor, advancedMode: settings.useFixedLevelColor,

15
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core'; import { Component, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
import { import {
AbstractControl, AbstractControl,
ControlValueAccessor, ControlValueAccessor,
@ -62,7 +62,8 @@ export function advancedRangeValidator(control: AbstractControl): ValidationErro
useExisting: forwardRef(() => ColorRangeListComponent), useExisting: forwardRef(() => ColorRangeListComponent),
multi: true multi: true
} }
] ],
encapsulation: ViewEncapsulation.None
}) })
export class ColorRangeListComponent implements OnInit, ControlValueAccessor, OnDestroy { export class ColorRangeListComponent implements OnInit, ControlValueAccessor, OnDestroy {
@ -110,7 +111,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
).subscribe(() => this.updateModel()); ).subscribe(() => this.updateModel());
this.colorRangeListFormGroup.get('advancedMode').valueChanges.pipe( this.colorRangeListFormGroup.get('advancedMode').valueChanges.pipe(
takeUntil(this.destroy$) takeUntil(this.destroy$)
).subscribe(() => setTimeout(() => {this.popover?.updatePosition();}, 0)); ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
} }
ngOnDestroy() { ngOnDestroy() {
@ -174,7 +175,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
public removeAdvancedRange(index: number) { public removeAdvancedRange(index: number) {
(this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray).removeAt(index); (this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray).removeAt(index);
setTimeout(() => {this.popover?.updatePosition();}, 0); Promise.resolve().then(() => this.popover?.updatePosition());
} }
get advancedRangeFormArray(): UntypedFormArray { get advancedRangeFormArray(): UntypedFormArray {
@ -188,7 +189,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
removeRange(index: number) { removeRange(index: number) {
this.rangeListFormArray.removeAt(index); this.rangeListFormArray.removeAt(index);
this.colorRangeListFormGroup.markAsDirty(); this.colorRangeListFormGroup.markAsDirty();
setTimeout(() => {this.popover?.updatePosition();}, 0); Promise.resolve().then(() => this.popover?.updatePosition());
} }
rangeDrop(event: CdkDragDrop<string[]>, range: string) { rangeDrop(event: CdkDragDrop<string[]>, range: string) {
@ -211,7 +212,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
const advancedRangeColorsArray = this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray; const advancedRangeColorsArray = this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray;
const advancedRangeColorControl = this.fb.control(advancedRange, [advancedRangeValidator]); const advancedRangeColorControl = this.fb.control(advancedRange, [advancedRangeValidator]);
advancedRangeColorsArray.push(advancedRangeColorControl); advancedRangeColorsArray.push(advancedRangeColorControl);
setTimeout(() => {this.popover?.updatePosition();}, 0); Promise.resolve().then(() => this.popover?.updatePosition());
} }
addRange() { addRange() {
@ -223,7 +224,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
}; };
this.rangeListFormArray.push(this.colorRangeControl(newRange)); this.rangeListFormArray.push(this.colorRangeControl(newRange));
this.colorRangeListFormGroup.markAsDirty(); this.colorRangeListFormGroup.markAsDirty();
setTimeout(() => {this.popover?.updatePosition();}, 0); Promise.resolve().then(() => this.popover?.updatePosition());
} }
} }

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

@ -20,7 +20,8 @@ import {
ColorSettings, ColorSettings,
ColorType, ColorType,
colorTypeTranslations, colorTypeTranslations,
defaultGradient, defaultRange defaultGradient,
defaultRange
} from '@shared/models/widget-settings.models'; } from '@shared/models/widget-settings.models';
import { TbPopoverComponent } from '@shared/components/popover.component'; import { TbPopoverComponent } from '@shared/components/popover.component';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
@ -107,7 +108,7 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
} }
); );
this.colorSettingsFormGroup.get('type').valueChanges.subscribe(() => { this.colorSettingsFormGroup.get('type').valueChanges.subscribe(() => {
setTimeout(() => {this.popover?.updatePosition();}, 0); Promise.resolve().then(() => this.popover?.updatePosition());
}); });
} }

6
ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts
View File

@ -119,7 +119,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
).subscribe(() => this.updateModel()); ).subscribe(() => this.updateModel());
this.gradientFormGroup.get('advancedMode').valueChanges.pipe( this.gradientFormGroup.get('advancedMode').valueChanges.pipe(
takeUntil(this.destroy$) takeUntil(this.destroy$)
).subscribe(() => setTimeout(() => {this.popover?.updatePosition();}, 0)); ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
} }
ngOnDestroy() { ngOnDestroy() {
@ -233,7 +233,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
this.gradientListFormArray.removeAt(index); this.gradientListFormArray.removeAt(index);
} }
this.gradientFormGroup.markAsDirty(); this.gradientFormGroup.markAsDirty();
setTimeout(() => {this.popover?.updatePosition();}, 0); Promise.resolve().then(() => this.popover?.updatePosition());
} }
gradientDrop(event: CdkDragDrop<string[]>, advanced = false) { gradientDrop(event: CdkDragDrop<string[]>, advanced = false) {
@ -252,7 +252,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
this.gradientListFormArray.push(this.colorGradientControl('rgba(0,0,0,0.87)')); this.gradientListFormArray.push(this.colorGradientControl('rgba(0,0,0,0.87)'));
} }
this.gradientFormGroup.markAsDirty(); this.gradientFormGroup.markAsDirty();
setTimeout(() => {this.popover?.updatePosition();}, 0); Promise.resolve().then(() => this.popover?.updatePosition());
} }
updateModel() { updateModel() {