diff --git a/application/src/main/data/json/system/widget_types/horizontal_2_1_elliptical_tank.json b/application/src/main/data/json/system/widget_types/horizontal_2_1_elliptical_tank.json index d97129d861..c582d90811 100644 --- a/application/src/main/data/json/system/widget_types/horizontal_2_1_elliptical_tank.json +++ b/application/src/main/data/json/system/widget_types/horizontal_2_1_elliptical_tank.json @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.onInit();\n }\n}\n\nself.onDataUpdated = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.update();\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-liquid-level-card-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/horizontal_capsule_tank.json b/application/src/main/data/json/system/widget_types/horizontal_capsule_tank.json index b15e34a0b0..19f3bb6cee 100644 --- a/application/src/main/data/json/system/widget_types/horizontal_capsule_tank.json +++ b/application/src/main/data/json/system/widget_types/horizontal_capsule_tank.json @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.onInit();\n }\n}\n\nself.onDataUpdated = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.update();\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-liquid-level-card-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/horizontal_cylinder_tank.json b/application/src/main/data/json/system/widget_types/horizontal_cylinder_tank.json index 2ca6913435..44fd1603ed 100644 --- a/application/src/main/data/json/system/widget_types/horizontal_cylinder_tank.json +++ b/application/src/main/data/json/system/widget_types/horizontal_cylinder_tank.json @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.onInit();\n }\n}\n\nself.onDataUpdated = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.update();\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-liquid-level-card-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/horizontal_dish_ends_tank.json b/application/src/main/data/json/system/widget_types/horizontal_dish_ends_tank.json index b947e3404c..f788eadb75 100644 --- a/application/src/main/data/json/system/widget_types/horizontal_dish_ends_tank.json +++ b/application/src/main/data/json/system/widget_types/horizontal_dish_ends_tank.json @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.onInit();\n }\n}\n\nself.onDataUpdated = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.update();\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-liquid-level-card-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/horizontal_ellipse_tank.json b/application/src/main/data/json/system/widget_types/horizontal_ellipse_tank.json index 869d3be02d..2b780548b6 100644 --- a/application/src/main/data/json/system/widget_types/horizontal_ellipse_tank.json +++ b/application/src/main/data/json/system/widget_types/horizontal_ellipse_tank.json @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.onInit();\n }\n}\n\nself.onDataUpdated = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.update();\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-liquid-level-card-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/horizontal_oval_tank.json b/application/src/main/data/json/system/widget_types/horizontal_oval_tank.json index 1d452cb8db..b175499013 100644 --- a/application/src/main/data/json/system/widget_types/horizontal_oval_tank.json +++ b/application/src/main/data/json/system/widget_types/horizontal_oval_tank.json @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.onInit();\n }\n}\n\nself.onDataUpdated = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.update();\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-liquid-level-card-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/rectangle_tank.json b/application/src/main/data/json/system/widget_types/rectangle_tank.json index ffe611aab7..6a60de4751 100644 --- a/application/src/main/data/json/system/widget_types/rectangle_tank.json +++ b/application/src/main/data/json/system/widget_types/rectangle_tank.json @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.onInit();\n }\n}\n\nself.onDataUpdated = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.update();\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-liquid-level-card-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/vertical_capsule_tank.json b/application/src/main/data/json/system/widget_types/vertical_capsule_tank.json index 74d6ae5d73..79e77839c0 100644 --- a/application/src/main/data/json/system/widget_types/vertical_capsule_tank.json +++ b/application/src/main/data/json/system/widget_types/vertical_capsule_tank.json @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.onInit();\n }\n}\n\nself.onDataUpdated = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.update();\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-liquid-level-card-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/vertical_cylinder_tank.json b/application/src/main/data/json/system/widget_types/vertical_cylinder_tank.json index e11080654f..7d2fbf27c3 100644 --- a/application/src/main/data/json/system/widget_types/vertical_cylinder_tank.json +++ b/application/src/main/data/json/system/widget_types/vertical_cylinder_tank.json @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.onInit();\n }\n}\n\nself.onDataUpdated = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.update();\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-liquid-level-card-widget-settings", diff --git a/application/src/main/data/json/system/widget_types/vertical_oval_tank.json b/application/src/main/data/json/system/widget_types/vertical_oval_tank.json index 162c8cf552..dab3fc7eb2 100644 --- a/application/src/main/data/json/system/widget_types/vertical_oval_tank.json +++ b/application/src/main/data/json/system/widget_types/vertical_oval_tank.json @@ -11,7 +11,7 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.onInit();\n }\n}\n\nself.onDataUpdated = function() {\n if (self.ctx.$scope.liquidLevelWidget) {\n self.ctx.$scope.liquidLevelWidget.update();\n }\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", + "controllerScript": "self.onInit = function() {\n}\n\nself.onDataUpdated = function() {\n self.ctx.$scope.liquidLevelWidget.update();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n};\n\nself.onDestroy = function() {\n}\n\nself.actionSources = function() { \n return { \n 'cardClick': {\n name: 'widget-action.card-click',\n multiple: false \n } \n };\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-liquid-level-card-widget-settings", diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts index f2e90279ee..3c42ec7c15 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts @@ -72,7 +72,7 @@ import { } from '@home/components/widget/config/basic/cards/progress-bar-basic-config.component'; import { LiquidLevelCardBasicConfigComponent -} from '@home/components/widget/config/basic/cards/liquid-level-card-basic-config.component'; +} from '@home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component'; @NgModule({ declarations: [ diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/liquid-level-card-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html similarity index 95% rename from ui-ngx/src/app/modules/home/components/widget/config/basic/cards/liquid-level-card-basic-config.component.html rename to ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html index 37463350c8..8a9f8e5d26 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/liquid-level-card-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html @@ -199,12 +199,12 @@
widgets.liquid-level-card.color-and-font
widgets.liquid-level-card.tank-color
- +
widgets.liquid-level-card.liquid-color
- +
- +
@@ -228,7 +228,7 @@ - + @@ -236,7 +236,7 @@ {{ 'widgets.liquid-level-card.background-overlay' | translate }} - + @@ -270,7 +270,7 @@ - + @@ -283,13 +283,13 @@ - +
widgets.liquid-level-card.tooltip-background
- +
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/liquid-level-card-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts similarity index 97% rename from ui-ngx/src/app/modules/home/components/widget/config/basic/cards/liquid-level-card-basic-config.component.ts rename to ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts index 807c3cb60a..4282d999d4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/liquid-level-card-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts @@ -60,7 +60,6 @@ import { ImageCardsSelectComponent } from '@home/components/widget/lib/settings/ import { map, share, tap } from 'rxjs/operators'; import { Observable, of, ReplaySubject } from 'rxjs'; import { ResourcesService } from '@core/services/resources.service'; -import { UnitInputComponent } from '@shared/components/unit-input.component'; import { UtilsService } from '@core/services/utils.service'; @Component({ @@ -74,8 +73,6 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon @ViewChild('shapesImageCardsSelect', { static: false }) shapesImageCardsSelect: ImageCardsSelectComponent; - @ViewChild('widgetUnits', { static: false }) widgetUnits: UnitInputComponent; - public get datasource(): Datasource { if (this.widgetConfig.config.datasources && this.widgetConfig.config.datasources) { return this.widgetConfig.config.datasources[0]; @@ -88,18 +85,18 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon const datasourceUnits = this.levelCardWidgetConfigForm.get('datasourceUnits').value; const layout: LevelCardLayout = this.levelCardWidgetConfigForm.get('layout').value; const units = this.levelCardWidgetConfigForm.get('units').value; - return !(datasourceUnits === CapacityUnits.percent && layout !== LevelCardLayout.absolute - || (datasourceUnits === CapacityUnits.percent && units === CapacityUnits.percent)); + + if (layout === LevelCardLayout.absolute) { + return true; + } + + return !(datasourceUnits === CapacityUnits.percent && units === CapacityUnits.percent); } public get widgetUnitsInput(): boolean { const layout: LevelCardLayout = this.levelCardWidgetConfigForm.get('layout').value; - if (layout === LevelCardLayout.absolute) { - const datasourceUnits = this.levelCardWidgetConfigForm.get('datasourceUnits').value; - return !(datasourceUnits === CapacityUnits.percent); - } - return false; + return layout === LevelCardLayout.absolute; } public get displayTimewindowConfig(): boolean { @@ -343,8 +340,10 @@ export class LiquidLevelCardBasicConfigComponent extends BasicWidgetConfigCompon } if (trigger === 'datasourceUnits' || trigger === 'layout' || trigger === 'units') { - if (datasourceUnits === CapacityUnits.percent && (layout !== LevelCardLayout.absolute) - || (datasourceUnits === CapacityUnits.percent && units?.value === CapacityUnits.percent) + if ( + datasourceUnits === CapacityUnits.percent && + layout !== LevelCardLayout.absolute && + (!units?.value || units?.value === CapacityUnits.percent) ) { volumeSource.disable({emitEvent: false}); this.levelCardWidgetConfigForm.get('volumeConstant').disable({emitEvent: false}); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts index 4e54e0c125..35266a241b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts @@ -44,7 +44,7 @@ import { } from '@shared/models/widget-settings.models'; import { ResourcesService } from '@core/services/resources.service'; import { NULL_UUID } from '@shared/models/id/has-uuid'; -import { Component, Input, OnInit } from '@angular/core'; +import { Component, ElementRef, Host, HostBinding, Input, OnInit } from '@angular/core'; import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; @@ -54,6 +54,9 @@ import ITooltipsterInstance = JQueryTooltipster.ITooltipsterInstance; }) export class LiquidLevelWidgetComponent implements OnInit { + @HostBinding('style.width') width = '100%'; + @HostBinding('style.height') height = '100%'; + @Input() ctx: WidgetContext; @@ -93,22 +96,21 @@ export class LiquidLevelWidgetComponent implements OnInit { widgetUnits: string; - constructor() { + constructor(@Host() private elementRef: ElementRef) { } ngOnInit(): void { this.ctx.$scope.liquidLevelWidget = this; this.settings = {...levelCardDefaultSettings(), ...this.ctx.widgetConfig, ...this.ctx.settings}; this.declareStyles(); - } - public onInit() { this.getData().subscribe(data => { if (data) { const { svg, volume, units } = data; - if (svg && isString(svg) && this.ctx.$container) { - this.ctx.$container.html(svg); - this.svg = this.ctx.$container.find('svg'); + if (svg && isString(svg) && this.elementRef.nativeElement) { + const jQueryContainerElement = $(this.elementRef.nativeElement); + jQueryContainerElement.html(svg); + this.svg = jQueryContainerElement.find('svg'); this.svg.on('click', this.cardClick.bind(this)); this.createSVG(); this.createValueElement(); @@ -247,9 +249,10 @@ export class LiquidLevelWidgetComponent implements OnInit { } private createValueElement(): void { - const containerOverlay = this.ctx.$container.find('.container-overlay'); - const percentageOverlay = this.ctx.$container.find('.percentage-overlay'); - const absoluteOverlay = this.ctx.$container.find('.absolute-overlay'); + const jQueryContainerElement = $(this.elementRef.nativeElement); + const containerOverlay = jQueryContainerElement.find('.container-overlay'); + const percentageOverlay = jQueryContainerElement.find('.percentage-overlay'); + const absoluteOverlay = jQueryContainerElement.find('.absolute-overlay'); if (this.settings.layout === LevelCardLayout.absolute) { this.overlayContainer = absoluteOverlay; @@ -350,8 +353,9 @@ export class LiquidLevelWidgetComponent implements OnInit { private updateLevel(newY: number, percentage: number): void { this.liquidColor.update(percentage); - const fill = this.ctx.$container.find('.tb-liquid-fill'); - const surfaces = this.ctx.$container.find('.tb-liquid-surface'); + const jQueryContainerElement = $(this.elementRef.nativeElement); + const fill = jQueryContainerElement.find('.tb-liquid-fill'); + const surfaces = jQueryContainerElement.find('.tb-liquid-surface'); const surfacePositionAttr = this.shape !== Shapes.vCylinder ? 'y' : 'cy'; const animationSpeed = 500; @@ -377,8 +381,9 @@ export class LiquidLevelWidgetComponent implements OnInit { } private updateShapeColor(value: number): void { - const shapeStrokes = this.ctx.$container.find('.tb-shape-stroke'); - const shapeFill = this.ctx.$container.find('.tb-shape-fill'); + const jQueryContainerElement = $(this.elementRef.nativeElement); + const shapeStrokes = jQueryContainerElement.find('.tb-shape-stroke'); + const shapeFill = jQueryContainerElement.find('.tb-shape-fill'); this.tankColor.update(value); shapeStrokes.each((index, element) => { @@ -393,6 +398,7 @@ export class LiquidLevelWidgetComponent implements OnInit { private updateValueElement(data: number, percentage: number): void { let content: string; let container: JQuery; + const jQueryContainerElement = $(this.elementRef.nativeElement); const value = convertLiters(data, this.widgetUnits as CapacityUnits, ConversionType.from) .toFixed(this.settings.decimals || 0); @@ -412,12 +418,12 @@ export class LiquidLevelWidgetComponent implements OnInit { const volumeTextStyle = cssTextFromInlineStyle({...inlineTextStyle(this.settings.volumeFont), color: this.volumeColor.color}); - container = this.ctx.$container.find('.absolute-value-container'); + container = jQueryContainerElement.find('.absolute-value-container'); content = createAbsoluteLayout({inputValue: value, volume}, {valueStyle: valueTextStyle, volumeStyle: volumeTextStyle}, this.widgetUnits); } else if (this.settings.layout === LevelCardLayout.percentage) { - container = this.ctx.$container.find('.percentage-value-container'); + container = jQueryContainerElement.find('.percentage-value-container'); content = createPercentLayout(value, valueTextStyle); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts index 5b51b2f277..a8cc7d2a29 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts @@ -369,13 +369,14 @@ export const valueContainerStyleDefaults = cssTextFromInlineStyle({ 'align-items': 'center', 'align-content': 'center', 'justify-content': 'center', + 'font-family': 'Roboto, Helvetica Neue, sans-serif' }); -export const valueTextStyleDefaults = 'letterSpacing: normal; font-style: normal; font-weight: 500; line-height: 100%;' + - ' font-size: 24px; font-family: Roboto; color: #000000DE'; +export const valueTextStyleDefaults = 'letter-spacing: normal; font-style: normal; font-weight: 500; line-height: 100%;' + + ' font-size: 24px; font-family: Roboto, Helvetica Neue, sans-serif; color: #000000DE'; -export const volumeTextStyleDefaults = 'letterSpacing: normal; font-style: normal; font-weight: 500;' + - ' line-height: 100%; font-size: 14px; font-family: Roboto; color: rgba(0, 0, 0, 0.18)'; +export const volumeTextStyleDefaults = 'letter-spacing: normal; font-style: normal; font-weight: 500;' + + ' line-height: 100%; font-size: 14px; font-family: Roboto, Helvetica Neue, sans-serif; color: rgba(0, 0, 0, 0.18)'; export const createAbsoluteLayout = (values?: {inputValue: number | string; volume: number | string}, styles?: {valueStyle: string; volumeStyle: string}, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/liquid-level-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html similarity index 94% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/liquid-level-card-widget-settings.component.html rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html index 30fd2abaea..94ef1b1e20 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/liquid-level-card-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html @@ -158,12 +158,12 @@
widgets.liquid-level-card.color-and-font
widgets.liquid-level-card.tank-color
- +
widgets.liquid-level-card.liquid-color
- +
- +
@@ -183,7 +183,7 @@ - + @@ -191,7 +191,7 @@ {{ 'widgets.liquid-level-card.background-overlay' | translate }} - + @@ -225,7 +225,7 @@ - + @@ -238,13 +238,13 @@ - +
widgets.liquid-level-card.tooltip-background
- +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/liquid-level-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts similarity index 97% rename from ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/liquid-level-card-widget-settings.component.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts index f90aac8205..23088aac81 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/liquid-level-card-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts @@ -67,18 +67,18 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon const datasourceUnits = this.levelCardWidgetSettingsForm.get('datasourceUnits').value; const layout: LevelCardLayout = this.levelCardWidgetSettingsForm.get('layout').value; const widgetUnits = this.levelCardWidgetSettingsForm.get('units').value; - return !(datasourceUnits === CapacityUnits.percent && layout !== LevelCardLayout.absolute - || (datasourceUnits === CapacityUnits.percent && widgetUnits === CapacityUnits.percent)); + + if (layout === LevelCardLayout.absolute) { + return true; + } + + return !(datasourceUnits === CapacityUnits.percent && widgetUnits === CapacityUnits.percent); } public get widgetUnitsInput(): boolean { const layout: LevelCardLayout = this.levelCardWidgetSettingsForm.get('layout').value; - if (layout === LevelCardLayout.absolute) { - const datasourceUnits = this.levelCardWidgetSettingsForm.get('datasourceUnits').value; - return !(datasourceUnits === CapacityUnits.percent); - } - return false; + return layout === LevelCardLayout.absolute; } public get datasource(): Datasource { @@ -239,8 +239,10 @@ export class LiquidLevelCardWidgetSettingsComponent extends WidgetSettingsCompon } if (trigger === 'datasourceUnits' || trigger === 'layout' || trigger === 'units') { - if (datasourceUnits === CapacityUnits.percent && (layout !== LevelCardLayout.absolute) - || (datasourceUnits === CapacityUnits.percent && widgetUnits?.value === CapacityUnits.percent) + if ( + datasourceUnits === CapacityUnits.percent && + layout !== LevelCardLayout.absolute && + (!widgetUnits?.value || widgetUnits?.value === CapacityUnits.percent) ) { volumeSource.disable({emitEvent: false}); this.levelCardWidgetSettingsForm.get('volumeConstant').disable({emitEvent: false}); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 7048c15c86..93749fadb5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -302,7 +302,7 @@ import { } from '@home/components/widget/lib/settings/cards/progress-bar-widget-settings.component'; import { LiquidLevelCardWidgetSettingsComponent -} from '@home/components/widget/lib/settings/cards/liquid-level-card-widget-settings.component'; +} from '@home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component'; @NgModule({ declarations: [