diff --git a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.scss b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.scss
index 7d01f41cb5..1664dafb7f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/config/data-keys.component.scss
@@ -49,7 +49,7 @@
padding: 3px;
height: 24px;
cursor: move;
- mat-icon {
+ .mat-icon {
pointer-events: none;
}
}
@@ -65,9 +65,11 @@
font-weight: normal;
font-size: 14px;
line-height: 20px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ &.tb-chip-text {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
.mat-icon.tb-datakey-icon {
margin-right: 4px;
margin-left: 4px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.component.ts
index cc482bfd4e..bf2144cdfd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.component.ts
@@ -44,6 +44,7 @@ import { widgetSettingsComponentsMap } from '@home/components/widget/lib/setting
import { Dashboard } from '@shared/models/dashboard.models';
import { WidgetService } from '@core/http/widget.service';
import { IAliasController } from '@core/api/widget-api.models';
+import { WidgetConfigComponentData } from '@home/models/widget-component.models';
@Component({
selector: 'tb-widget-settings',
@@ -73,6 +74,9 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On
@Input()
widget: Widget;
+ @Input()
+ widgetConfig: WidgetConfigComponentData;
+
private settingsDirective: string;
definedDirectiveError: string;
@@ -126,6 +130,11 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On
this.definedSettingsComponent.aliasController = this.aliasController;
}
}
+ if (propName === 'widgetConfig') {
+ if (this.definedSettingsComponent) {
+ this.definedSettingsComponent.widgetConfig = this.widgetConfig;
+ }
+ }
}
}
}
@@ -214,6 +223,7 @@ export class WidgetSettingsComponent implements ControlValueAccessor, OnInit, On
this.definedSettingsComponent.aliasController = this.aliasController;
this.definedSettingsComponent.dashboard = this.dashboard;
this.definedSettingsComponent.widget = this.widget;
+ this.definedSettingsComponent.widgetConfig = this.widgetConfig;
this.definedSettingsComponent.functionScopeVariables = this.widgetService.getWidgetScopeVariables();
this.changeSubscription = this.definedSettingsComponent.settingsChanged.subscribe((settings) => {
this.updateModel(settings);
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.models.ts b/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.models.ts
index 34f2ac464b..0fa061de72 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/widget-settings.models.ts
@@ -276,6 +276,14 @@ export enum BackgroundType {
color = 'color'
}
+export const backgroundTypeTranslations = new Map
(
+ [
+ [BackgroundType.image, 'widgets.background.background-type-image'],
+ [BackgroundType.imageUrl, 'widgets.background.background-type-image-url'],
+ [BackgroundType.color, 'widgets.background.background-type-color']
+ ]
+);
+
export interface OverlaySettings {
enabled: boolean;
color: string;
@@ -313,11 +321,13 @@ export const backgroundStyle = (background: BackgroundSettings): ComponentStyle
};
} else {
const imageUrl = background.type === BackgroundType.image ? background.imageBase64 : background.imageUrl;
- return {
- background: `url(${imageUrl}) no-repeat`,
- backgroundSize: 'cover',
- backgroundPosition: '50% 50%'
- };
+ if (imageUrl) {
+ return {
+ background: `url(${imageUrl}) no-repeat 50% 50% / cover`
+ };
+ } else {
+ return {};
+ }
}
};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.scss
index f5844d8aac..9b2d35e030 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/edges-overview-widget.component.scss
@@ -71,7 +71,7 @@
background-size: 18px 18px;
}
- mat-icon.node-icon {
+ .mat-icon.node-icon {
width: 22px;
min-width: 22px;
height: 22px;
@@ -109,7 +109,7 @@
background-size: 24px 24px;
}
- mat-icon.node-icon {
+ .mat-icon.node-icon {
width: 40px;
min-width: 40px;
height: 40px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.component.scss
index 6731690b0b..426d81b723 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.component.scss
@@ -64,7 +64,7 @@
background-size: 18px 18px;
}
- mat-icon.node-icon {
+ .mat-icon.node-icon {
width: 22px;
min-width: 22px;
height: 22px;
@@ -102,7 +102,7 @@
background-size: 24px 24px;
}
- mat-icon.node-icon {
+ .mat-icon.node-icon {
width: 40px;
min-width: 40px;
height: 40px;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss
index a04f82dce7..b9c3e034a7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/navigation-card-widget.component.scss
@@ -31,7 +31,7 @@
display: flex;
flex-direction: column;
align-items: center;
- mat-icon {
+ .mat-icon {
margin: auto !important;
}
span.mdc-button__label {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
new file mode 100644
index 0000000000..423c727a8d
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.html
@@ -0,0 +1,89 @@
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
new file mode 100644
index 0000000000..6f76546ac1
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/value-card-widget-settings.component.ts
@@ -0,0 +1,200 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+/// http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, Injector } from '@angular/core';
+import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
+import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import {
+ valueCardDefaultSettings,
+ ValueCardLayout, valueCardLayoutImages,
+ valueCardLayouts, valueCardLayoutTranslations
+} from '@home/components/widget/lib/cards/value-card-widget.models';
+import { formatValue, isDefinedAndNotNull } from '@core/utils';
+import { WidgetConfigComponentData } from '@home/models/widget-component.models';
+import {
+ DateFormatProcessor,
+ DateFormatSettings,
+ getLabel
+} from '@home/components/widget/config/widget-settings.models';
+
+@Component({
+ selector: 'tb-value-card-widget-settings',
+ templateUrl: './value-card-widget-settings.component.html',
+ styleUrls: []
+})
+export class ValueCardWidgetSettingsComponent extends WidgetSettingsComponent {
+
+ valueCardLayouts: ValueCardLayout[] = [];
+
+ valueCardLayoutTranslationMap = valueCardLayoutTranslations;
+ valueCardLayoutImageMap = valueCardLayoutImages;
+
+ horizontal = false;
+
+ valueCardWidgetSettingsForm: UntypedFormGroup;
+
+ valuePreviewFn = this._valuePreviewFn.bind(this);
+
+ datePreviewFn = this._datePreviewFn.bind(this);
+
+
+ get label(): string {
+ return getLabel(this.widgetConfig.config.datasources);
+ }
+
+ get dateEnabled(): boolean {
+ const layout: ValueCardLayout = this.valueCardWidgetSettingsForm.get('layout').value;
+ return ![ValueCardLayout.vertical, ValueCardLayout.simplified].includes(layout);
+ }
+
+ get iconEnabled(): boolean {
+ const layout: ValueCardLayout = this.valueCardWidgetSettingsForm.get('layout').value;
+ return layout !== ValueCardLayout.simplified;
+ }
+
+ constructor(protected store: Store,
+ private $injector: Injector,
+ private fb: UntypedFormBuilder) {
+ super(store);
+ }
+
+ protected settingsForm(): UntypedFormGroup {
+ return this.valueCardWidgetSettingsForm;
+ }
+
+ protected onWidgetConfigSet(widgetConfig: WidgetConfigComponentData) {
+ const params = widgetConfig.typeParameters as any;
+ this.horizontal = isDefinedAndNotNull(params.horizontal) ? params.horizontal : false;
+ this.valueCardLayouts = valueCardLayouts(this.horizontal);
+ }
+
+ protected defaultSettings(): WidgetSettings {
+ return valueCardDefaultSettings(this.horizontal);
+ }
+
+ protected onSettingsSet(settings: WidgetSettings) {
+ this.valueCardWidgetSettingsForm = this.fb.group({
+ layout: [settings.layout, []],
+
+ showLabel: [settings.showLabel, []],
+ labelFont: [settings.labelFont, []],
+ labelColor: [settings.labelColor, []],
+
+ showIcon: [settings.showIcon, []],
+ iconSize: [settings.iconSize, [Validators.min(0)]],
+ iconSizeUnit: [settings.iconSizeUnit, []],
+ icon: [settings.icon, []],
+ iconColor: [settings.iconColor, []],
+
+ valueFont: [settings.valueFont, []],
+ valueColor: [settings.valueColor, []],
+
+ showDate: [settings.showDate, []],
+ dateFormat: [settings.dateFormat, []],
+ dateFont: [settings.dateFont, []],
+ dateColor: [settings.dateColor, []],
+
+ background: [settings.background, []]
+ });
+ }
+
+ protected validatorTriggers(): string[] {
+ return ['layout', 'showLabel', 'showIcon', 'showDate'];
+ }
+
+ protected updateValidators(emitEvent: boolean) {
+ const layout: ValueCardLayout = this.valueCardWidgetSettingsForm.get('layout').value;
+ const showLabel: boolean = this.valueCardWidgetSettingsForm.get('showLabel').value;
+ const showIcon: boolean = this.valueCardWidgetSettingsForm.get('showIcon').value;
+ const showDate: boolean = this.valueCardWidgetSettingsForm.get('showDate').value;
+
+ const dateEnabled = ![ValueCardLayout.vertical, ValueCardLayout.simplified].includes(layout);
+ const iconEnabled = layout !== ValueCardLayout.simplified;
+
+ if (showLabel) {
+ this.valueCardWidgetSettingsForm.get('labelFont').enable();
+ this.valueCardWidgetSettingsForm.get('labelColor').enable();
+ } else {
+ this.valueCardWidgetSettingsForm.get('labelFont').disable();
+ this.valueCardWidgetSettingsForm.get('labelColor').disable();
+ }
+
+ if (iconEnabled) {
+ this.valueCardWidgetSettingsForm.get('showIcon').enable({emitEvent: false});
+ if (showIcon) {
+ this.valueCardWidgetSettingsForm.get('iconSize').enable();
+ this.valueCardWidgetSettingsForm.get('iconSizeUnit').enable();
+ this.valueCardWidgetSettingsForm.get('icon').enable();
+ this.valueCardWidgetSettingsForm.get('iconColor').enable();
+ } else {
+ this.valueCardWidgetSettingsForm.get('iconSize').disable();
+ this.valueCardWidgetSettingsForm.get('iconSizeUnit').disable();
+ this.valueCardWidgetSettingsForm.get('icon').disable();
+ this.valueCardWidgetSettingsForm.get('iconColor').disable();
+ }
+ } else {
+ this.valueCardWidgetSettingsForm.get('showIcon').disable({emitEvent: false});
+ this.valueCardWidgetSettingsForm.get('iconSize').disable();
+ this.valueCardWidgetSettingsForm.get('iconSizeUnit').disable();
+ this.valueCardWidgetSettingsForm.get('icon').disable();
+ this.valueCardWidgetSettingsForm.get('iconColor').disable();
+ }
+
+ if (dateEnabled) {
+ this.valueCardWidgetSettingsForm.get('showDate').enable({emitEvent: false});
+ if (showDate) {
+ this.valueCardWidgetSettingsForm.get('dateFormat').enable();
+ this.valueCardWidgetSettingsForm.get('dateFont').enable();
+ this.valueCardWidgetSettingsForm.get('dateColor').enable();
+ } else {
+ this.valueCardWidgetSettingsForm.get('dateFormat').disable();
+ this.valueCardWidgetSettingsForm.get('dateFont').disable();
+ this.valueCardWidgetSettingsForm.get('dateColor').disable();
+ }
+ } else {
+ this.valueCardWidgetSettingsForm.get('showDate').disable({emitEvent: false});
+ this.valueCardWidgetSettingsForm.get('dateFormat').disable();
+ this.valueCardWidgetSettingsForm.get('dateFont').disable();
+ this.valueCardWidgetSettingsForm.get('dateColor').disable();
+ }
+ this.valueCardWidgetSettingsForm.get('showIcon').updateValueAndValidity({emitEvent: false});
+ this.valueCardWidgetSettingsForm.get('showDate').updateValueAndValidity({emitEvent: false});
+ this.valueCardWidgetSettingsForm.get('labelFont').updateValueAndValidity({emitEvent});
+ this.valueCardWidgetSettingsForm.get('labelColor').updateValueAndValidity({emitEvent});
+ this.valueCardWidgetSettingsForm.get('iconSize').updateValueAndValidity({emitEvent});
+ this.valueCardWidgetSettingsForm.get('iconSizeUnit').updateValueAndValidity({emitEvent});
+ this.valueCardWidgetSettingsForm.get('icon').updateValueAndValidity({emitEvent});
+ this.valueCardWidgetSettingsForm.get('iconColor').updateValueAndValidity({emitEvent});
+ this.valueCardWidgetSettingsForm.get('dateFormat').updateValueAndValidity({emitEvent});
+ this.valueCardWidgetSettingsForm.get('dateFont').updateValueAndValidity({emitEvent});
+ this.valueCardWidgetSettingsForm.get('dateColor').updateValueAndValidity({emitEvent});
+ }
+
+ private _valuePreviewFn(): string {
+ const units: string = this.widgetConfig.config.units;
+ const decimals: number = this.widgetConfig.config.decimals;
+ return formatValue(22, decimals, units, true);
+ }
+
+ private _datePreviewFn(): string {
+ const dateFormat: DateFormatSettings = this.valueCardWidgetSettingsForm.get('dateFormat').value;
+ const processor = DateFormatProcessor.fromSettings(this.$injector, dateFormat);
+ processor.update(Date.now());
+ return processor.formatted;
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
new file mode 100644
index 0000000000..ca5d4bc8b9
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/background-settings-panel.component.html
@@ -0,0 +1,87 @@
+
+
+
widgets.background.background-settings
+
+
+
+
+ widgets.background.preview
+
+
+
+
+
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
index 6601aa96db..43b54884ec 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@@ -19,7 +19,6 @@
[fullscreenBackgroundStyle]="dashboardStyle"
[fullscreenBackgroundImage]="backgroundImage"
(fullscreenChanged)="onFullscreenChanged($event)"
- fxLayout="column"
class="tb-widget"
[ngClass]="{
'tb-highlighted': isHighlighted(widget),
@@ -32,8 +31,11 @@
(mousedown)="onMouseDown($event)"
(click)="onClicked($event)"
(contextmenu)="onContextMenu($event)">
-