|
|
@ -15,7 +15,7 @@ |
|
|
///
|
|
|
///
|
|
|
|
|
|
|
|
|
import { ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core'; |
|
|
import { ChangeDetectorRef, Component, Injector, ViewChild } from '@angular/core'; |
|
|
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
|
|
import { Store } from '@ngrx/store'; |
|
|
import { Store } from '@ngrx/store'; |
|
|
import { AppState } from '@core/core.state'; |
|
|
import { AppState } from '@core/core.state'; |
|
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
|
|
import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; |
|
|
@ -48,11 +48,13 @@ import { |
|
|
LevelCardLayout, |
|
|
LevelCardLayout, |
|
|
levelCardLayoutTranslations, |
|
|
levelCardLayoutTranslations, |
|
|
LevelCardWidgetSettings, |
|
|
LevelCardWidgetSettings, |
|
|
LevelSelectOptions, |
|
|
LiquidWidgetDataSourceType, |
|
|
|
|
|
LiquidWidgetDataSourceTypeTranslations, |
|
|
loadSvgShapesMapping, |
|
|
loadSvgShapesMapping, |
|
|
optionsFilter, |
|
|
optionsFilter, |
|
|
Shapes, |
|
|
Shapes, |
|
|
shapesTranslations |
|
|
ShapesTranslations, |
|
|
|
|
|
updatedFormSettingsValidators |
|
|
} from '@home/components/widget/lib/indicator/liquid-level-widget.models'; |
|
|
} from '@home/components/widget/lib/indicator/liquid-level-widget.models'; |
|
|
import { UnitsType } from '@shared/models/unit.models'; |
|
|
import { UnitsType } from '@shared/models/unit.models'; |
|
|
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; |
|
|
import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; |
|
|
@ -73,7 +75,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
|
|
|
|
|
|
@ViewChild('shapesImageCardsSelect', { static: false }) shapesImageCardsSelect: ImageCardsSelectComponent; |
|
|
@ViewChild('shapesImageCardsSelect', { static: false }) shapesImageCardsSelect: ImageCardsSelectComponent; |
|
|
|
|
|
|
|
|
public get datasource(): Datasource { |
|
|
private get datasource(): Datasource { |
|
|
if (this.widgetConfig.config.datasources && this.widgetConfig.config.datasources) { |
|
|
if (this.widgetConfig.config.datasources && this.widgetConfig.config.datasources) { |
|
|
return this.widgetConfig.config.datasources[0]; |
|
|
return this.widgetConfig.config.datasources[0]; |
|
|
} else { |
|
|
} else { |
|
|
@ -93,12 +95,6 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
return !(datasourceUnits === CapacityUnits.percent && units === CapacityUnits.percent); |
|
|
return !(datasourceUnits === CapacityUnits.percent && units === CapacityUnits.percent); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public get widgetUnitsInput(): boolean { |
|
|
|
|
|
const layout: LevelCardLayout = this.levelCardWidgetConfigForm.get('layout').value; |
|
|
|
|
|
|
|
|
|
|
|
return layout === LevelCardLayout.absolute; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
public get displayTimewindowConfig(): boolean { |
|
|
public get displayTimewindowConfig(): boolean { |
|
|
const datasources = this.levelCardWidgetConfigForm.get('datasources').value; |
|
|
const datasources = this.levelCardWidgetConfigForm.get('datasources').value; |
|
|
return datasourcesHasAggregation(datasources); |
|
|
return datasourcesHasAggregation(datasources); |
|
|
@ -109,22 +105,21 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
return datasourcesHasOnlyComparisonAggregation(datasources); |
|
|
return datasourcesHasOnlyComparisonAggregation(datasources); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
levelCardLayouts = LevelCardLayout; |
|
|
LevelCardLayout = LevelCardLayout; |
|
|
|
|
|
LevelCardLayouts = Object.values(LevelCardLayout) as LevelCardLayout[]; |
|
|
shapes: Shapes[] = []; |
|
|
LevelCardLayoutTranslationMap = levelCardLayoutTranslations; |
|
|
|
|
|
|
|
|
levelOptions = LevelSelectOptions; |
|
|
DataSourceType = LiquidWidgetDataSourceType; |
|
|
|
|
|
DataSourceTypes = Object.values(LiquidWidgetDataSourceType) as LiquidWidgetDataSourceType[]; |
|
|
|
|
|
DataSourceTypeTranslations = LiquidWidgetDataSourceTypeTranslations; |
|
|
|
|
|
|
|
|
shapeSelectOptions = LevelSelectOptions; |
|
|
shapes = Object.values(Shapes) as Shapes[]; |
|
|
|
|
|
|
|
|
levelCardLayoutTranslationMap = levelCardLayoutTranslations; |
|
|
|
|
|
|
|
|
|
|
|
shapesTranslationMap = shapesTranslations; |
|
|
|
|
|
shapesImageMap: Map<Shapes, string> = new Map(); |
|
|
shapesImageMap: Map<Shapes, string> = new Map(); |
|
|
|
|
|
ShapesTranslationMap = ShapesTranslations; |
|
|
|
|
|
|
|
|
unitsType = UnitsType; |
|
|
unitsType = UnitsType; |
|
|
|
|
|
|
|
|
levelCardWidgetConfigForm: UntypedFormGroup; |
|
|
levelCardWidgetConfigForm: FormGroup; |
|
|
|
|
|
|
|
|
valuePreviewFn = this._valuePreviewFn.bind(this); |
|
|
valuePreviewFn = this._valuePreviewFn.bind(this); |
|
|
|
|
|
|
|
|
@ -134,35 +129,30 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
|
|
|
|
|
|
datePreviewFn = this._datePreviewFn.bind(this); |
|
|
datePreviewFn = this._datePreviewFn.bind(this); |
|
|
|
|
|
|
|
|
keySearchText: string; |
|
|
private keySearchText: string; |
|
|
|
|
|
private latestKeySearchTextResult: Array<string>; |
|
|
latestKeySearchTextResult: Array<string>; |
|
|
|
|
|
|
|
|
|
|
|
datasources: Array<Datasource>; |
|
|
|
|
|
|
|
|
|
|
|
functionTypeKeys: Array<DataKey> = []; |
|
|
|
|
|
|
|
|
|
|
|
lastKeysId: string; |
|
|
private functionTypeKeys: Array<DataKey> = []; |
|
|
|
|
|
|
|
|
lastFetchedKeys: Array<DataKey>; |
|
|
private lastKeysId: string; |
|
|
|
|
|
private lastFetchedKeys: Array<DataKey>; |
|
|
|
|
|
|
|
|
constructor(protected store: Store<AppState>, |
|
|
constructor(protected store: Store<AppState>, |
|
|
protected widgetConfigComponent: WidgetConfigComponent, |
|
|
protected widgetConfigComponent: WidgetConfigComponent, |
|
|
private cd: ChangeDetectorRef, |
|
|
private cd: ChangeDetectorRef, |
|
|
private $injector: Injector, |
|
|
private $injector: Injector, |
|
|
private fb: UntypedFormBuilder, |
|
|
private fb: FormBuilder, |
|
|
private resourcesService: ResourcesService, |
|
|
private resourcesService: ResourcesService, |
|
|
private sanitizer: DomSanitizer, |
|
|
private sanitizer: DomSanitizer, |
|
|
private utils: UtilsService) { |
|
|
private utils: UtilsService) { |
|
|
super(store, widgetConfigComponent); |
|
|
super(store, widgetConfigComponent); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
protected configForm(): UntypedFormGroup { |
|
|
protected configForm(): FormGroup { |
|
|
return this.levelCardWidgetConfigForm; |
|
|
return this.levelCardWidgetConfigForm; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
protected setupConfig(widgetConfig: WidgetConfigComponentData) { |
|
|
protected setupConfig(widgetConfig: WidgetConfigComponentData) { |
|
|
this.shapes = Object.values(Shapes); |
|
|
|
|
|
this.createSvgShapesMapping(); |
|
|
this.createSvgShapesMapping(); |
|
|
|
|
|
|
|
|
for (const type of this.utils.getPredefinedFunctionsList()) { |
|
|
for (const type of this.utils.getPredefinedFunctionsList()) { |
|
|
@ -179,29 +169,30 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
|
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
|
|
const settings: LevelCardWidgetSettings = {...configData.config, ...levelCardDefaultSettings(), ...(configData.config.settings || {})}; |
|
|
const settings: LevelCardWidgetSettings = {...levelCardDefaultSettings, ...(configData.config.settings || {})}; |
|
|
const iconSize = resolveCssSize(configData.config.iconSize); |
|
|
const iconSize = resolveCssSize(configData.config.iconSize); |
|
|
|
|
|
|
|
|
this.levelCardWidgetConfigForm = this.fb.group({ |
|
|
this.levelCardWidgetConfigForm = this.fb.group({ |
|
|
timewindowConfig: [getTimewindowConfig(configData.config), []], |
|
|
timewindowConfig: [getTimewindowConfig(configData.config), []], |
|
|
datasources: [configData.config.datasources, []], |
|
|
datasources: [configData.config.datasources, []], |
|
|
|
|
|
|
|
|
|
|
|
layout: [settings.layout, []], |
|
|
tankSelectionType: [settings.tankSelectionType, []], |
|
|
tankSelectionType: [settings.tankSelectionType, []], |
|
|
selectedShape: [settings.selectedShape, [Validators.required]], |
|
|
selectedShape: [settings.selectedShape, [Validators.required]], |
|
|
shapeAttributeName: [settings.shapeAttributeName, [Validators.required]], |
|
|
shapeAttributeName: [settings.shapeAttributeName, [Validators.required]], |
|
|
tankColor: [settings.tankColor, []], |
|
|
tankColor: [settings.tankColor, []], |
|
|
datasourceUnits: [settings.datasourceUnits, [Validators.required]], |
|
|
datasourceUnits: [settings.datasourceUnits, [Validators.required]], |
|
|
|
|
|
|
|
|
layout: [settings.layout, []], |
|
|
|
|
|
showTitle: [configData.config.showTitle, []], |
|
|
showTitle: [configData.config.showTitle, []], |
|
|
title: [settings.title, []], |
|
|
title: [configData.config.title, []], |
|
|
titleFont: [settings.titleFont, []], |
|
|
titleFont: [configData.config.titleFont, []], |
|
|
titleColor: [settings.titleColor, []], |
|
|
titleColor: [configData.config.titleColor, []], |
|
|
showTitleIcon: [configData.config.showTitleIcon, []], |
|
|
showTitleIcon: [configData.config.showTitleIcon, []], |
|
|
iconSize: [iconSize[0], [Validators.min(0)]], |
|
|
iconSize: [iconSize[0], [Validators.min(0)]], |
|
|
iconSizeUnit: [iconSize[1], []], |
|
|
iconSizeUnit: [iconSize[1], []], |
|
|
titleIcon: [settings.titleIcon, []], |
|
|
titleIcon: [configData.config.titleIcon, []], |
|
|
iconColor: [settings.iconColor, []], |
|
|
iconColor: [configData.config.iconColor, []], |
|
|
|
|
|
|
|
|
volumeSource: [settings.volumeSource, []], |
|
|
volumeSource: [settings.volumeSource, []], |
|
|
volumeConstant: [settings.volumeConstant, [Validators.required]], |
|
|
volumeConstant: [settings.volumeConstant, [Validators.required]], |
|
|
volumeAttributeName: [settings.volumeAttributeName, [Validators.required]], |
|
|
volumeAttributeName: [settings.volumeAttributeName, [Validators.required]], |
|
|
@ -211,7 +202,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
units: [settings.units, [Validators.required]], |
|
|
units: [settings.units, [Validators.required]], |
|
|
widgetUnitsSource: [settings.widgetUnitsSource, [Validators.required]], |
|
|
widgetUnitsSource: [settings.widgetUnitsSource, [Validators.required]], |
|
|
widgetUnitsAttributeName: [settings.widgetUnitsAttributeName, [Validators.required]], |
|
|
widgetUnitsAttributeName: [settings.widgetUnitsAttributeName, [Validators.required]], |
|
|
decimals: [settings.decimals, []], |
|
|
decimals: [configData.config.decimals, []], |
|
|
liquidColor: [settings.liquidColor, []], |
|
|
liquidColor: [settings.liquidColor, []], |
|
|
valueFont: [settings.valueFont, []], |
|
|
valueFont: [settings.valueFont, []], |
|
|
valueColor: [settings.valueColor, []], |
|
|
valueColor: [settings.valueColor, []], |
|
|
@ -229,7 +220,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []], |
|
|
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []], |
|
|
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []], |
|
|
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []], |
|
|
|
|
|
|
|
|
backgroundColor: [settings.backgroundColor, []], |
|
|
background: [settings.background], |
|
|
cardButtons: [this.getCardButtons(configData.config), []], |
|
|
cardButtons: [this.getCardButtons(configData.config), []], |
|
|
borderRadius: [configData.config.borderRadius, []], |
|
|
borderRadius: [configData.config.borderRadius, []], |
|
|
|
|
|
|
|
|
@ -246,23 +237,28 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig); |
|
|
setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig); |
|
|
this.widgetConfig.config.datasources = config.datasources; |
|
|
this.widgetConfig.config.datasources = config.datasources; |
|
|
|
|
|
|
|
|
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
|
|
|
|
|
|
|
|
|
|
|
this.widgetConfig.config.settings.tankSelectionType = config.tankSelectionType; |
|
|
|
|
|
this.widgetConfig.config.settings.selectedShape = config.selectedShape; |
|
|
|
|
|
this.widgetConfig.config.settings.shapeAttributeName = config.shapeAttributeName; |
|
|
|
|
|
this.widgetConfig.config.settings.tankColor = config.tankColor; |
|
|
|
|
|
this.widgetConfig.config.settings.datasourceUnits = config.datasourceUnits; |
|
|
|
|
|
|
|
|
|
|
|
this.widgetConfig.config.settings.layout = config.layout; |
|
|
|
|
|
this.widgetConfig.config.showTitle = config.showTitle; |
|
|
this.widgetConfig.config.showTitle = config.showTitle; |
|
|
this.widgetConfig.config.title = config.title; |
|
|
this.widgetConfig.config.title = config.title; |
|
|
this.widgetConfig.config.titleFont = config.titleFont; |
|
|
this.widgetConfig.config.titleFont = config.titleFont; |
|
|
this.widgetConfig.config.titleColor = config.titleColor; |
|
|
this.widgetConfig.config.titleColor = config.titleColor; |
|
|
|
|
|
|
|
|
this.widgetConfig.config.showTitleIcon = config.showTitleIcon; |
|
|
this.widgetConfig.config.showTitleIcon = config.showTitleIcon; |
|
|
this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit); |
|
|
this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit); |
|
|
this.widgetConfig.config.titleIcon = config.titleIcon; |
|
|
this.widgetConfig.config.titleIcon = config.titleIcon; |
|
|
this.widgetConfig.config.iconColor = config.iconColor; |
|
|
this.widgetConfig.config.iconColor = config.iconColor; |
|
|
|
|
|
|
|
|
|
|
|
this.widgetConfig.config.decimals = config.decimals; |
|
|
|
|
|
|
|
|
|
|
|
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
|
|
|
|
|
|
|
|
|
|
|
this.widgetConfig.config.settings.layout = config.layout; |
|
|
|
|
|
|
|
|
|
|
|
this.widgetConfig.config.settings.tankSelectionType = config.tankSelectionType; |
|
|
|
|
|
this.widgetConfig.config.settings.selectedShape = config.selectedShape; |
|
|
|
|
|
this.widgetConfig.config.settings.shapeAttributeName = config.shapeAttributeName; |
|
|
|
|
|
this.widgetConfig.config.settings.tankColor = config.tankColor; |
|
|
|
|
|
this.widgetConfig.config.settings.datasourceUnits = config.datasourceUnits; |
|
|
|
|
|
|
|
|
this.widgetConfig.config.settings.volumeSource = config.volumeSource; |
|
|
this.widgetConfig.config.settings.volumeSource = config.volumeSource; |
|
|
this.widgetConfig.config.settings.volumeConstant = config.volumeConstant; |
|
|
this.widgetConfig.config.settings.volumeConstant = config.volumeConstant; |
|
|
this.widgetConfig.config.settings.volumeAttributeName = config.volumeAttributeName; |
|
|
this.widgetConfig.config.settings.volumeAttributeName = config.volumeAttributeName; |
|
|
@ -272,7 +268,6 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
this.widgetConfig.config.settings.units = config.units; |
|
|
this.widgetConfig.config.settings.units = config.units; |
|
|
this.widgetConfig.config.settings.widgetUnitsSource = config.widgetUnitsSource; |
|
|
this.widgetConfig.config.settings.widgetUnitsSource = config.widgetUnitsSource; |
|
|
this.widgetConfig.config.settings.widgetUnitsAttributeName = config.widgetUnitsAttributeName; |
|
|
this.widgetConfig.config.settings.widgetUnitsAttributeName = config.widgetUnitsAttributeName; |
|
|
this.widgetConfig.config.decimals = config.decimals; |
|
|
|
|
|
this.widgetConfig.config.settings.liquidColor = config.liquidColor; |
|
|
this.widgetConfig.config.settings.liquidColor = config.liquidColor; |
|
|
this.widgetConfig.config.settings.valueFont = config.valueFont; |
|
|
this.widgetConfig.config.settings.valueFont = config.valueFont; |
|
|
this.widgetConfig.config.settings.valueColor = config.valueColor; |
|
|
this.widgetConfig.config.settings.valueColor = config.valueColor; |
|
|
@ -290,7 +285,7 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor; |
|
|
this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor; |
|
|
this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur; |
|
|
this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur; |
|
|
|
|
|
|
|
|
this.widgetConfig.config.backgroundColor = config.backgroundColor; |
|
|
this.widgetConfig.config.settings.background = config.background; |
|
|
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
|
|
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
|
|
this.widgetConfig.config.borderRadius = config.borderRadius; |
|
|
this.widgetConfig.config.borderRadius = config.borderRadius; |
|
|
|
|
|
|
|
|
@ -310,84 +305,16 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
|
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
|
|
const emitEventFields = []; |
|
|
updatedFormSettingsValidators(this.levelCardWidgetConfigForm); |
|
|
|
|
|
|
|
|
const datasourceUnits: string = this.levelCardWidgetConfigForm.get('datasourceUnits').value; |
|
|
const showTitleIcon: boolean = this.levelCardWidgetConfigForm.get('showTitleIcon').value; |
|
|
const layout: LevelCardLayout = this.levelCardWidgetConfigForm.get('layout').value; |
|
|
|
|
|
const showTitleIcon: AbstractControl<boolean> = this.levelCardWidgetConfigForm.get('showTitleIcon'); |
|
|
|
|
|
const showTitle: boolean = this.levelCardWidgetConfigForm.get('showTitle').value; |
|
|
const showTitle: boolean = this.levelCardWidgetConfigForm.get('showTitle').value; |
|
|
const volumeSource: AbstractControl<LevelSelectOptions> = this.levelCardWidgetConfigForm.get('volumeSource'); |
|
|
if (showTitle) { |
|
|
const units: AbstractControl<string> = this.levelCardWidgetConfigForm.get('units'); |
|
|
this.levelCardWidgetConfigForm.get('title').enable({emitEvent: false}); |
|
|
const tooltipUnits: AbstractControl<string> = this.levelCardWidgetConfigForm.get('tooltipUnits'); |
|
|
this.levelCardWidgetConfigForm.get('titleFont').enable({emitEvent: false}); |
|
|
const widgetUnitsSource: AbstractControl<LevelSelectOptions> = this.levelCardWidgetConfigForm.get('widgetUnitsSource'); |
|
|
this.levelCardWidgetConfigForm.get('titleColor').enable({emitEvent: false}); |
|
|
const showTooltipLevel: AbstractControl<boolean> = this.levelCardWidgetConfigForm.get('showTooltipLevel'); |
|
|
this.levelCardWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false}); |
|
|
const showTooltipDate: AbstractControl<boolean> = this.levelCardWidgetConfigForm.get('showTooltipDate'); |
|
|
if (showTitleIcon) { |
|
|
const showTooltip: boolean = this.levelCardWidgetConfigForm.get('showTooltip').value; |
|
|
|
|
|
|
|
|
|
|
|
if (trigger === 'tankSelectionType') { |
|
|
|
|
|
const tankSelectionType: LevelSelectOptions = this.levelCardWidgetConfigForm.get('tankSelectionType').value; |
|
|
|
|
|
if (tankSelectionType === LevelSelectOptions.static) { |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('selectedShape').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('shapeAttributeName').disable({emitEvent: false}); |
|
|
|
|
|
} else { |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('selectedShape').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('shapeAttributeName').enable({emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
emitEventFields.push('selectedShape', 'shapeAttributeName'); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (trigger === 'datasourceUnits' || trigger === 'layout' || trigger === 'units') { |
|
|
|
|
|
if ( |
|
|
|
|
|
datasourceUnits === CapacityUnits.percent && |
|
|
|
|
|
layout !== LevelCardLayout.absolute && |
|
|
|
|
|
(!units?.value || units?.value === CapacityUnits.percent) |
|
|
|
|
|
) { |
|
|
|
|
|
volumeSource.disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeConstant').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeAttributeName').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeUnits').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeFont').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeColor').disable({emitEvent: false}); |
|
|
|
|
|
} else { |
|
|
|
|
|
volumeSource.enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeConstant').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeAttributeName').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeUnits').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeFont').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeColor').enable({emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
emitEventFields.push('volumeSource', 'volumeConstant', 'volumeAttributeName', 'volumeFont', 'volumeColor', 'volumeUnits'); |
|
|
|
|
|
} else if (trigger === 'volumeSource') { |
|
|
|
|
|
if((datasourceUnits !== CapacityUnits.percent) || |
|
|
|
|
|
(layout === LevelCardLayout.absolute && units?.value !== CapacityUnits.percent)) { |
|
|
|
|
|
if (volumeSource.value === LevelSelectOptions.static) { |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeConstant').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeAttributeName').disable({emitEvent: false}); |
|
|
|
|
|
} else { |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeConstant').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('volumeAttributeName').enable({emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
emitEventFields.push('volumeConstant', 'volumeAttributeName'); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (trigger === 'showTitle' || !trigger) { |
|
|
|
|
|
if (showTitle) { |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('title').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('titleFont').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('titleColor').enable({emitEvent: false}); |
|
|
|
|
|
showTitleIcon.enable({emitEvent: false}); |
|
|
|
|
|
} else { |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('title').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('titleFont').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('titleColor').disable({emitEvent: false}); |
|
|
|
|
|
showTitleIcon.disable({emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
emitEventFields.push('title', 'titleFont', 'titleColor', 'showTitleIcon'); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (trigger === 'showTitleIcon' || !trigger) { |
|
|
|
|
|
if (showTitleIcon?.value && !showTitleIcon.disabled && showTitle) { |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('titleIcon').enable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('titleIcon').enable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('iconColor').enable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('iconColor').enable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('iconSize').enable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('iconSize').enable({emitEvent: false}); |
|
|
@ -398,104 +325,15 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon |
|
|
this.levelCardWidgetConfigForm.get('iconSize').disable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('iconSize').disable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('iconSizeUnit').disable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('iconSizeUnit').disable({emitEvent: false}); |
|
|
} |
|
|
} |
|
|
emitEventFields.push('titleIcon', 'iconColor', 'iconSize', 'iconSizeUnit'); |
|
|
} else { |
|
|
} |
|
|
this.levelCardWidgetConfigForm.get('title').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('titleFont').disable({emitEvent: false}); |
|
|
if (trigger === 'showTooltip') { |
|
|
this.levelCardWidgetConfigForm.get('titleColor').disable({emitEvent: false}); |
|
|
if (showTooltip) { |
|
|
this.levelCardWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false}); |
|
|
showTooltipLevel.enable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('titleIcon').disable({emitEvent: false}); |
|
|
showTooltipDate.enable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('iconColor').disable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('tooltipBackgroundColor').enable(); |
|
|
this.levelCardWidgetConfigForm.get('iconSize').disable({emitEvent: false}); |
|
|
this.levelCardWidgetConfigForm.get('tooltipBackgroundBlur').enable(); |
|
|
this.levelCardWidgetConfigForm.get('iconSizeUnit').disable({emitEvent: false}); |
|
|
} else { |
|
|
|
|
|
showTooltipLevel.disable({emitEvent: false}); |
|
|
|
|
|
showTooltipDate.disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipBackgroundColor').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipBackgroundBlur').disable({emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
emitEventFields.push('showTooltipLevel', 'showTooltipDate', 'tooltipBackgroundColor', 'tooltipBackgroundBlur'); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (trigger === 'showTooltipLevel') { |
|
|
|
|
|
if (showTooltipLevel?.value && !showTooltipLevel.disabled) { |
|
|
|
|
|
tooltipUnits.enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipLevelDecimals').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipLevelFont').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipLevelColor').enable({emitEvent: false}); |
|
|
|
|
|
} else { |
|
|
|
|
|
tooltipUnits.disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipLevelDecimals').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipLevelFont').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipLevelColor').disable({emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
emitEventFields.push('tooltipUnits', 'tooltipLevelDecimals', 'tooltipLevelFont', 'tooltipLevelColor'); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (trigger === 'showTooltipDate') { |
|
|
|
|
|
if (showTooltipDate?.value && !showTooltipDate.disabled) { |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipDateFormat').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipDateFont').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipDateColor').enable({emitEvent: false}); |
|
|
|
|
|
} else { |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipDateFormat').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipDateFont').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('tooltipDateColor').disable({emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
emitEventFields.push('tooltipDateFormat', 'tooltipDateFont', 'tooltipDateColor'); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (trigger === 'layout' || trigger === 'datasourceUnits') { |
|
|
|
|
|
if (layout === LevelCardLayout.simple) { |
|
|
|
|
|
units.disable({emitEvent: false}); |
|
|
|
|
|
tooltipUnits.disable({emitEvent: false}); |
|
|
|
|
|
widgetUnitsSource.setValue(LevelSelectOptions.static, {emitEvent: false}); |
|
|
|
|
|
widgetUnitsSource.disable({emitEvent: false}); |
|
|
|
|
|
|
|
|
|
|
|
this.levelCardWidgetConfigForm.get('decimals').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('valueFont').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('valueColor').disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('widgetUnitsAttributeName').disable({emitEvent: false}); |
|
|
|
|
|
} else if (layout === LevelCardLayout.percentage) { |
|
|
|
|
|
if (units.value !== CapacityUnits.percent) { |
|
|
|
|
|
units.setValue(CapacityUnits.percent, {emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
widgetUnitsSource.setValue(LevelSelectOptions.static, {emitEvent: false}); |
|
|
|
|
|
units.disable({emitEvent: false}); |
|
|
|
|
|
widgetUnitsSource.disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('widgetUnitsAttributeName').disable({emitEvent: false}); |
|
|
|
|
|
|
|
|
|
|
|
if (tooltipUnits.value !== CapacityUnits.percent) { |
|
|
|
|
|
tooltipUnits.setValue(CapacityUnits.percent, {emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
tooltipUnits.disable({emitEvent: false}); |
|
|
|
|
|
} else { |
|
|
|
|
|
units.enable({emitEvent: false}); |
|
|
|
|
|
tooltipUnits.enable({emitEvent: false}); |
|
|
|
|
|
widgetUnitsSource.enable({emitEvent: false}); |
|
|
|
|
|
|
|
|
|
|
|
this.levelCardWidgetConfigForm.get('decimals').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('valueFont').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('valueColor').enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('widgetUnitsAttributeName').enable({emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
emitEventFields.push('units', 'tooltipUnits', 'decimals', 'valueFont', 'valueColor', 'widgetUnitsSource', 'widgetUnitsAttributeName'); |
|
|
|
|
|
} else if (trigger === 'widgetUnitsSource') { |
|
|
|
|
|
if (layout !== LevelCardLayout.percentage) { |
|
|
|
|
|
if (widgetUnitsSource.value === LevelSelectOptions.static) { |
|
|
|
|
|
units.enable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('widgetUnitsAttributeName').disable({emitEvent: false}); |
|
|
|
|
|
} else { |
|
|
|
|
|
units.disable({emitEvent: false}); |
|
|
|
|
|
this.levelCardWidgetConfigForm.get('widgetUnitsAttributeName').enable({emitEvent: false}); |
|
|
|
|
|
} |
|
|
|
|
|
emitEventFields.push('units', 'widgetUnitsAttributeName'); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
for (const controlKey in this.levelCardWidgetConfigForm.controls) { |
|
|
|
|
|
if (emitEventFields.includes(controlKey)) { |
|
|
|
|
|
this.levelCardWidgetConfigForm.controls[controlKey].updateValueAndValidity({emitEvent}); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
Vladyslav_Prykhodko
3 years ago