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

UI: liquid level widget additions and refactoring after review

Browse Source
This commit is contained in:
Dmitriymush 2023-10-25 10:01:14 +03:00
parent 0bab29c8ec
commit 40581d598a
18 changed files with 77 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
application/src/main/data/json/system/widget_types/horizontal_2_1_elliptical_tank.json
View File

@ -11,7 +11,7 @@
"resources": [],
"templateHtml": "<tb-liquid-level-widget \n [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
"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",

2
application/src/main/data/json/system/widget_types/horizontal_capsule_tank.json
View File

@ -11,7 +11,7 @@
"resources": [],
"templateHtml": "<tb-liquid-level-widget \n [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
"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",

2
application/src/main/data/json/system/widget_types/horizontal_cylinder_tank.json
View File

@ -11,7 +11,7 @@
"resources": [],
"templateHtml": "<tb-liquid-level-widget \n [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
"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",

2
application/src/main/data/json/system/widget_types/horizontal_dish_ends_tank.json
View File

@ -11,7 +11,7 @@
"resources": [],
"templateHtml": "<tb-liquid-level-widget \n [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
"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",

2
application/src/main/data/json/system/widget_types/horizontal_ellipse_tank.json
View File

@ -11,7 +11,7 @@
"resources": [],
"templateHtml": "<tb-liquid-level-widget \n [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
"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",

2
application/src/main/data/json/system/widget_types/horizontal_oval_tank.json
View File

@ -11,7 +11,7 @@
"resources": [],
"templateHtml": "<tb-liquid-level-widget \n [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
"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",

2
application/src/main/data/json/system/widget_types/rectangle_tank.json
View File

@ -11,7 +11,7 @@
"resources": [],
"templateHtml": "<tb-liquid-level-widget \n [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
"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",

2
application/src/main/data/json/system/widget_types/vertical_capsule_tank.json
View File

@ -11,7 +11,7 @@
"resources": [],
"templateHtml": "<tb-liquid-level-widget \n [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
"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",

2
application/src/main/data/json/system/widget_types/vertical_cylinder_tank.json
View File

@ -11,7 +11,7 @@
"resources": [],
"templateHtml": "<tb-liquid-level-widget \n [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
"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",

2
application/src/main/data/json/system/widget_types/vertical_oval_tank.json
View File

@ -11,7 +11,7 @@
"resources": [],
"templateHtml": "<tb-liquid-level-widget \n [ctx]=\"ctx\">\n</tb-liquid-level-widget>",
"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",

2
ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts
View File

@ -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: [

16
ui-ngx/src/app/modules/home/components/widget/config/basic/cards/liquid-level-card-basic-config.component.html → ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.html
View File

@ -199,12 +199,12 @@
<div class="tb-form-panel-title" translate>widgets.liquid-level-card.color-and-font</div>
<div class="tb-form-row space-between">
<div class="fixed-title-width" translate>widgets.liquid-level-card.tank-color</div>
<tb-color-settings formControlName="tankColor">
<tb-color-settings formControlName="tankColor" settingsKey="{{'widgets.liquid-level-card.tank-color' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row space-between">
<div class="fixed-title-width" translate>widgets.liquid-level-card.liquid-color</div>
<tb-color-settings formControlName="liquidColor">
<tb-color-settings formControlName="liquidColor" settingsKey="{{'widgets.liquid-level-card.liquid-color' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row space-between"
@ -218,7 +218,7 @@
<tb-font-settings formControlName="valueFont"
[previewText]="valuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="valueColor">
<tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.liquid-level-card.value' | translate }}">
</tb-color-settings>
</div>
</div>
@ -228,7 +228,7 @@
<tb-font-settings formControlName="volumeFont"
[previewText]="totalVolumeValuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="volumeColor">
<tb-color-settings formControlName="volumeColor" settingsKey="{{'widgets.liquid-level-card.total-volume' | translate }}">
</tb-color-settings>
</div>
</div>
@ -236,7 +236,7 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBackgroundOverlay">
{{ 'widgets.liquid-level-card.background-overlay' | translate }}
</mat-slide-toggle>
<tb-color-settings formControlName="backgroundOverlayColor">
<tb-color-settings formControlName="backgroundOverlayColor" settingsKey="{{'widgets.liquid-level-card.background-overlay' | translate }}">
</tb-color-settings>
</div>
</div>
@ -270,7 +270,7 @@
<tb-font-settings formControlName="tooltipLevelFont"
[previewText]="tooltipValuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="tooltipLevelColor">
<tb-color-settings formControlName="tooltipLevelColor" settingsKey="{{'widgets.liquid-level-card.background-overlay' | translate }}">
</tb-color-settings>
</div>
</div>
@ -283,13 +283,13 @@
<tb-font-settings formControlName="tooltipDateFont"
[previewText]="datePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="tooltipDateColor">
<tb-color-settings formControlName="tooltipDateColor" settingsKey="{{'widgets.value-card.date' | translate }}">
</tb-color-settings>
</div>
</div>
<div class="tb-form-row space-between">
<div class="fixed-title-width" translate>widgets.liquid-level-card.tooltip-background</div>
<tb-color-settings formControlName="tooltipBackgroundColor">
<tb-color-settings formControlName="tooltipBackgroundColor" settingsKey="{{'widgets.liquid-level-card.tooltip-background' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row space-between">

23
ui-ngx/src/app/modules/home/components/widget/config/basic/cards/liquid-level-card-basic-config.component.ts → ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/liquid-level-card-basic-config.component.ts
View File

@ -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});

38
ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.component.ts
View File

@ -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<HTMLElement>;
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);
}

9
ui-ngx/src/app/modules/home/components/widget/lib/indicator/liquid-level-widget.models.ts
View File

@ -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},

16
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/liquid-level-card-widget-settings.component.html → ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.html
View File

@ -158,12 +158,12 @@
<div class="tb-form-panel-title" translate>widgets.liquid-level-card.color-and-font</div>
<div class="tb-form-row space-between">
<div class="fixed-title-width" translate>widgets.liquid-level-card.tank-color</div>
<tb-color-settings formControlName="tankColor">
<tb-color-settings formControlName="tankColor" settingsKey="{{'widgets.liquid-level-card.tank-color' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row space-between">
<div class="fixed-title-width" translate>widgets.liquid-level-card.liquid-color</div>
<tb-color-settings formControlName="liquidColor">
<tb-color-settings formControlName="liquidColor" settingsKey="{{'widgets.liquid-level-card.liquid-color' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row space-between"
@ -173,7 +173,7 @@
<tb-font-settings formControlName="valueFont"
[previewText]="valuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="valueColor">
<tb-color-settings formControlName="valueColor" settingsKey="{{'widgets.liquid-level-card.value' | translate }}">
</tb-color-settings>
</div>
</div>
@ -183,7 +183,7 @@
<tb-font-settings formControlName="volumeFont"
[previewText]="totalVolumeValuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="volumeColor">
<tb-color-settings formControlName="volumeColor" settingsKey="{{'widgets.liquid-level-card.total-volume' | translate }}">
</tb-color-settings>
</div>
</div>
@ -191,7 +191,7 @@
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showBackgroundOverlay">
{{ 'widgets.liquid-level-card.background-overlay' | translate }}
</mat-slide-toggle>
<tb-color-settings formControlName="backgroundOverlayColor">
<tb-color-settings formControlName="backgroundOverlayColor" settingsKey="{{'widgets.liquid-level-card.background-overlay' | translate }}">
</tb-color-settings>
</div>
</div>
@ -225,7 +225,7 @@
<tb-font-settings formControlName="tooltipLevelFont"
[previewText]="tooltipValuePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="tooltipLevelColor">
<tb-color-settings formControlName="tooltipLevelColor" settingsKey="{{'widgets.liquid-level-card.level' | translate }}">
</tb-color-settings>
</div>
</div>
@ -238,13 +238,13 @@
<tb-font-settings formControlName="tooltipDateFont"
[previewText]="datePreviewFn">
</tb-font-settings>
<tb-color-settings formControlName="tooltipDateColor">
<tb-color-settings formControlName="tooltipDateColor" settingsKey="{{'widgets.value-card.date' | translate }}">
</tb-color-settings>
</div>
</div>
<div class="tb-form-row space-between">
<div class="fixed-title-width" translate>widgets.liquid-level-card.tooltip-background</div>
<tb-color-settings formControlName="tooltipBackgroundColor">
<tb-color-settings formControlName="tooltipBackgroundColor" settingsKey="{{'widgets.liquid-level-card.tooltip-background' | translate }}">
</tb-color-settings>
</div>
<div class="tb-form-row space-between">

20
ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/liquid-level-card-widget-settings.component.ts → ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/liquid-level-card-widget-settings.component.ts
View File

@ -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});

2
ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
View File

@ -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: [