|
|
@ -106,6 +106,7 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
private volume: number; |
|
|
private volume: number; |
|
|
private tooltipContent: string; |
|
|
private tooltipContent: string; |
|
|
private widgetUnits: string; |
|
|
private widgetUnits: string; |
|
|
|
|
|
private volumeUnits: string; |
|
|
|
|
|
|
|
|
private capacityUnits = Object.values(CapacityUnits); |
|
|
private capacityUnits = Object.values(CapacityUnits); |
|
|
|
|
|
|
|
|
@ -128,7 +129,7 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
|
|
|
|
|
|
this.getData().subscribe(data => { |
|
|
this.getData().subscribe(data => { |
|
|
if (data) { |
|
|
if (data) { |
|
|
const { svg, volume, units } = data; |
|
|
const { svg, volume, units, volumeUnits } = data; |
|
|
if (svg && isNotEmptyStr(svg) && this.liquidLevelContent.nativeElement) { |
|
|
if (svg && isNotEmptyStr(svg) && this.liquidLevelContent.nativeElement) { |
|
|
const jQueryContainerElement = $(this.liquidLevelContent.nativeElement); |
|
|
const jQueryContainerElement = $(this.liquidLevelContent.nativeElement); |
|
|
jQueryContainerElement.html(svg); |
|
|
jQueryContainerElement.html(svg); |
|
|
@ -145,6 +146,10 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
this.volume = Number(volume); |
|
|
this.volume = Number(volume); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (volumeUnits) { |
|
|
|
|
|
this.volumeUnits = volumeUnits; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
if (units) { |
|
|
if (units) { |
|
|
this.widgetUnits = units; |
|
|
this.widgetUnits = units; |
|
|
} |
|
|
} |
|
|
@ -164,7 +169,7 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
this.tooltipDateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.tooltipDateFormat); |
|
|
this.tooltipDateFormat = DateFormatProcessor.fromSettings(this.ctx.$injector, this.settings.tooltipDateFormat); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private getData(): Observable<{ svg: string; volume: number; units: string }> { |
|
|
private getData(): Observable<{ svg: string; volume: number; units: string; volumeUnits: string}> { |
|
|
if (this.ctx.datasources?.length) { |
|
|
if (this.ctx.datasources?.length) { |
|
|
const entityId: EntityId = { |
|
|
const entityId: EntityId = { |
|
|
entityType: this.ctx.datasources[0].entityType, |
|
|
entityType: this.ctx.datasources[0].entityType, |
|
|
@ -308,7 +313,7 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
.pipe(map(attributes => { |
|
|
.pipe(map(attributes => { |
|
|
const shape = extractValue<Shapes>(attributes, this.settings.shapeAttributeName); |
|
|
const shape = extractValue<Shapes>(attributes, this.settings.shapeAttributeName); |
|
|
if (!shape || !svgMapping.has(shape)) { |
|
|
if (!shape || !svgMapping.has(shape)) { |
|
|
this.createdErrorMgs(this.settings.shapeAttributeName, isUndefinedOrNull(shape) || isEmptyStr(shape)); |
|
|
this.createdErrorMsg(this.settings.shapeAttributeName, isUndefinedOrNull(shape) || isEmptyStr(shape)); |
|
|
return this.settings.selectedShape; |
|
|
return this.settings.selectedShape; |
|
|
} |
|
|
} |
|
|
return shape; |
|
|
return shape; |
|
|
@ -318,12 +323,15 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
return of(this.settings.selectedShape); |
|
|
return of(this.settings.selectedShape); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private getTankersParams(entityId: EntityId): Observable<{ volume: number; units: string }> { |
|
|
private getTankersParams(entityId: EntityId): Observable<{ volume: number; units: string; volumeUnits: string }> { |
|
|
const isVolumeStatic = this.settings.layout !== LevelCardLayout.absolute |
|
|
const isVolumeStatic = this.settings.layout !== LevelCardLayout.absolute |
|
|
&& this.settings.datasourceUnits === CapacityUnits.percent |
|
|
&& this.settings.datasourceUnits === CapacityUnits.percent |
|
|
|| this.settings.volumeSource === LiquidWidgetDataSourceType.static; |
|
|
|| this.settings.volumeSource === LiquidWidgetDataSourceType.static; |
|
|
const isUnitStatic = this.settings.layout !== LevelCardLayout.absolute || |
|
|
const isUnitStatic = this.settings.layout !== LevelCardLayout.absolute || |
|
|
this.settings.widgetUnitsSource === LiquidWidgetDataSourceType.static; |
|
|
this.settings.widgetUnitsSource === LiquidWidgetDataSourceType.static; |
|
|
|
|
|
const isVolumeUnitStatic = this.settings.layout !== LevelCardLayout.absolute |
|
|
|
|
|
&& this.settings.datasourceUnits === CapacityUnits.percent |
|
|
|
|
|
|| this.settings.volumeUnitsSource === LiquidWidgetDataSourceType.static; |
|
|
|
|
|
|
|
|
const attributeKeys: string[] = []; |
|
|
const attributeKeys: string[] = []; |
|
|
|
|
|
|
|
|
@ -335,20 +343,29 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
attributeKeys.push(this.settings.widgetUnitsAttributeName); |
|
|
attributeKeys.push(this.settings.widgetUnitsAttributeName); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (!isVolumeUnitStatic) { |
|
|
|
|
|
attributeKeys.push(this.settings.volumeUnitsAttributeName); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
if (!attributeKeys.length || entityId.id === NULL_UUID) { |
|
|
if (!attributeKeys.length || entityId.id === NULL_UUID) { |
|
|
return of({ |
|
|
return of({ |
|
|
volume: this.settings.volumeConstant, |
|
|
volume: this.settings.volumeConstant, |
|
|
|
|
|
volumeUnits: this.settings.volumeUnits, |
|
|
units: this.settings.units |
|
|
units: this.settings.units |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return this.ctx.attributeService.getEntityAttributes(entityId, null, attributeKeys).pipe( |
|
|
return this.ctx.attributeService.getEntityAttributes(entityId, null, attributeKeys).pipe( |
|
|
map(attributes => { |
|
|
map(attributes => { |
|
|
let volume = isVolumeStatic ? this.settings.volumeConstant : extractValue<number>(attributes, this.settings.volumeAttributeName); |
|
|
let volume = isVolumeStatic ? this.settings.volumeConstant : |
|
|
let units = isUnitStatic ? this.settings.units : extractValue<string>(attributes, this.settings.widgetUnitsAttributeName); |
|
|
extractValue<number>(attributes, this.settings.volumeAttributeName); |
|
|
|
|
|
let volumeUnits = isVolumeUnitStatic ? this.settings.volumeUnits : |
|
|
|
|
|
extractValue<string>(attributes, this.settings.volumeUnitsAttributeName); |
|
|
|
|
|
let units = isUnitStatic ? this.settings.units : |
|
|
|
|
|
extractValue<string>(attributes, this.settings.widgetUnitsAttributeName); |
|
|
|
|
|
|
|
|
if (!isVolumeStatic && (!volume || !isNumeric(volume) || volume < 0.1)) { |
|
|
if (!isVolumeStatic && (!volume || !isNumeric(volume) || volume < 0.1)) { |
|
|
this.createdErrorMgs(this.settings.volumeAttributeName, isUndefinedOrNull(volume) || isEmptyStr(volume)); |
|
|
this.createdErrorMsg(this.settings.volumeAttributeName, isUndefinedOrNull(volume) || isEmptyStr(volume)); |
|
|
volume = this.settings.volumeConstant; |
|
|
volume = this.settings.volumeConstant; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -358,20 +375,33 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
units = this.capacityUnits.find(unit => unit.normalize() === normalizeUnits); |
|
|
units = this.capacityUnits.find(unit => unit.normalize() === normalizeUnits); |
|
|
} |
|
|
} |
|
|
if (isUndefinedOrNull(units) || !isNotEmptyStr(units)) { |
|
|
if (isUndefinedOrNull(units) || !isNotEmptyStr(units)) { |
|
|
this.createdErrorMgs(this.settings.widgetUnitsAttributeName, isUndefinedOrNull(units) || isEmptyStr(units)); |
|
|
this.createdErrorMsg(this.settings.widgetUnitsAttributeName, isUndefinedOrNull(units) || isEmptyStr(units)); |
|
|
units = this.settings.units; |
|
|
units = this.settings.units; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (!isVolumeUnitStatic) { |
|
|
|
|
|
if (isNotEmptyStr(volumeUnits)) { |
|
|
|
|
|
const normalizeUnits = volumeUnits.normalize().trim(); |
|
|
|
|
|
volumeUnits = this.capacityUnits.find(unit => unit.normalize() === normalizeUnits); |
|
|
|
|
|
} |
|
|
|
|
|
if (isUndefinedOrNull(volumeUnits) || !isNotEmptyStr(volumeUnits)) { |
|
|
|
|
|
this.createdErrorMsg(this.settings.widgetUnitsAttributeName, |
|
|
|
|
|
isUndefinedOrNull(volumeUnits) || isEmptyStr(volumeUnits)); |
|
|
|
|
|
volumeUnits = this.settings.volumeUnits; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
return { |
|
|
return { |
|
|
volume, |
|
|
volume, |
|
|
|
|
|
volumeUnits, |
|
|
units |
|
|
units |
|
|
}; |
|
|
}; |
|
|
}) |
|
|
}) |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
private createdErrorMgs(attributeName: string, isEmpty = false) { |
|
|
private createdErrorMsg(attributeName: string, isEmpty = false) { |
|
|
if (isEmpty) { |
|
|
if (isEmpty) { |
|
|
this.errorsMsg.push(this.translate.instant('widgets.liquid-level-card.attribute-key-not-set', {attributeName})); |
|
|
this.errorsMsg.push(this.translate.instant('widgets.liquid-level-card.attribute-key-not-set', {attributeName})); |
|
|
} else { |
|
|
} else { |
|
|
@ -474,9 +504,14 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (this.settings.layout === LevelCardLayout.absolute) { |
|
|
if (this.settings.layout === LevelCardLayout.absolute) { |
|
|
const volumeInLiters: number = convertLiters(this.volume, this.settings.volumeUnits as CapacityUnits, ConversionType.to); |
|
|
let volume: number | string; |
|
|
const volume = convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from) |
|
|
if (this.widgetUnits !== CapacityUnits.percent) { |
|
|
.toFixed(this.settings.decimals || 0); |
|
|
const volumeInLiters: number = convertLiters(this.volume, this.volumeUnits as CapacityUnits, ConversionType.to); |
|
|
|
|
|
volume = convertLiters(volumeInLiters, this.widgetUnits as CapacityUnits, ConversionType.from) |
|
|
|
|
|
.toFixed(this.settings.decimals || 0); |
|
|
|
|
|
} else { |
|
|
|
|
|
volume = this.volume.toFixed(this.settings.decimals || 0); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const volumeTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.volumeFont), |
|
|
const volumeTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.volumeFont), |
|
|
color: this.settings.volumeColor}); |
|
|
color: this.settings.volumeColor}); |
|
|
@ -553,7 +588,7 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
private convertInputData(value: any): number { |
|
|
private convertInputData(value: any): number { |
|
|
if (this.settings.datasourceUnits !== CapacityUnits.percent) { |
|
|
if (this.settings.datasourceUnits !== CapacityUnits.percent) { |
|
|
return (convertLiters(Number(value), this.settings.datasourceUnits, ConversionType.to) / |
|
|
return (convertLiters(Number(value), this.settings.datasourceUnits, ConversionType.to) / |
|
|
convertLiters(this.volume, this.settings.volumeUnits, ConversionType.to)) * 100; |
|
|
convertLiters(this.volume, this.volumeUnits as CapacityUnits, ConversionType.to)) * 100; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return Number(value); |
|
|
return Number(value); |
|
|
@ -561,7 +596,7 @@ export class LiquidLevelWidgetComponent implements OnInit { |
|
|
|
|
|
|
|
|
private convertOutputData(value: number): number { |
|
|
private convertOutputData(value: number): number { |
|
|
if (this.widgetUnits !== CapacityUnits.percent) { |
|
|
if (this.widgetUnits !== CapacityUnits.percent) { |
|
|
return convertLiters(this.volume * (value / 100), this.settings.volumeUnits, ConversionType.to); |
|
|
return convertLiters(this.volume * (value / 100), this.volumeUnits as CapacityUnits, ConversionType.to); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
return value; |
|
|
return value; |
|
|
|
Igor Kulikov
3 years ago
GitHub