From b3d74adce84c59abae8d5782b89a9c196abd0503 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 22 Apr 2024 12:59:29 +0300 Subject: [PATCH] UI: Status widget: Implement advanced settings. --- .../system/widget_types/status_widget.json | 2 +- .../lib/indicator/status-widget.component.ts | 1 + .../status-widget-settings.component.html | 82 +++++++++++++++++++ .../status-widget-settings.component.ts | 79 ++++++++++++++++++ .../lib/settings/widget-settings.module.ts | 12 ++- 5 files changed, 172 insertions(+), 4 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts diff --git a/application/src/main/data/json/system/widget_types/status_widget.json b/application/src/main/data/json/system/widget_types/status_widget.json index 8431091ac5..97dc721c0f 100644 --- a/application/src/main/data/json/system/widget_types/status_widget.json +++ b/application/src/main/data/json/system/widget_types/status_widget.json @@ -14,7 +14,7 @@ "controllerScript": "self.onInit = function() {\n self.ctx.$scope.actionWidget.onInit();\n}\n\nself.typeParameters = function() {\n return {\n previewWidth: '180px',\n previewHeight: '180px',\n embedTitlePanel: true,\n displayRpcMessageToast: false\n };\n};\n\nself.onDestroy = function() {\n}\n", "settingsSchema": "", "dataKeySettingsSchema": "{}\n", - "settingsDirective": "", + "settingsDirective": "tb-status-widget-settings", "hasBasicMode": true, "basicModeDirective": "tb-status-widget-basic-config", "defaultConfig": "{\"showTitle\":false,\"backgroundColor\":\"rgba(0, 0, 0, 0)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"0px\",\"settings\":{},\"title\":\"Status widget\",\"dropShadow\":true,\"enableFullscreen\":false,\"widgetStyle\":{},\"actions\":{},\"widgetCss\":\"\",\"noDataDisplayMessage\":\"\",\"titleFont\":{\"size\":16,\"sizeUnit\":\"px\",\"family\":\"Roboto\",\"weight\":\"500\",\"style\":null,\"lineHeight\":\"1.6\"},\"showTitleIcon\":false,\"titleTooltip\":\"\",\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"pageSize\":1024,\"titleIcon\":\"mdi:lightbulb-outline\",\"iconColor\":\"rgba(0, 0, 0, 0.87)\",\"iconSize\":\"24px\",\"configMode\":\"basic\",\"targetDevice\":null,\"titleColor\":null,\"borderRadius\":null}" diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts index 13b2324bf7..5b59b0210f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/status-widget.component.ts @@ -180,6 +180,7 @@ export class StatusWidgetComponent extends private onDisabled(value: boolean): void { const newDisabled = !!value; if (this.disabled !== newDisabled) { + this.disabled = newDisabled; this.updateDisabledState(this.disabled); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html new file mode 100644 index 0000000000..180340881d --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.html @@ -0,0 +1,82 @@ + + +
+
widgets.status-widget.behavior
+
+
widgets.rpc-state.initial-state
+ +
+
+
widgets.rpc-state.disabled-state
+ +
+
+
+
widget-config.appearance
+ + + {{ statusWidgetLayoutTranslationMap.get(layout) | translate }} + + +
+
+
+
widget-config.card-style
+ + {{ 'widgets.status-widget.on' | translate }} + {{ 'widgets.status-widget.off' | translate }} + +
+ + + + +
+ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts new file mode 100644 index 0000000000..03da985a0e --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/status-widget-settings.component.ts @@ -0,0 +1,79 @@ +/// +/// Copyright © 2016-2024 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 { TargetDevice, WidgetSettings, WidgetSettingsComponent, widgetType } from '@shared/models/widget.models'; +import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { + statusWidgetDefaultSettings, + statusWidgetLayoutImages, + statusWidgetLayouts, + statusWidgetLayoutTranslations +} from '@home/components/widget/lib/indicator/status-widget.models'; +import { ValueType } from '@shared/models/constants'; + +@Component({ + selector: 'tb-status-widget-settings', + templateUrl: './status-widget-settings.component.html', + styleUrls: ['./../widget-settings.scss'], +}) +export class StatusWidgetSettingsComponent extends WidgetSettingsComponent { + + get targetDevice(): TargetDevice { + return this.widgetConfig?.config?.targetDevice; + } + + get widgetType(): widgetType { + return this.widgetConfig?.widgetType; + } + + statusWidgetLayouts = statusWidgetLayouts; + + statusWidgetLayoutTranslationMap = statusWidgetLayoutTranslations; + statusWidgetLayoutImageMap = statusWidgetLayoutImages; + + valueType = ValueType; + + statusWidgetSettingsForm: UntypedFormGroup; + + cardStyleMode = 'on'; + + constructor(protected store: Store, + private $injector: Injector, + private fb: UntypedFormBuilder) { + super(store); + } + + protected settingsForm(): UntypedFormGroup { + return this.statusWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return {...statusWidgetDefaultSettings}; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.statusWidgetSettingsForm = this.fb.group({ + initialState: [settings.initialState, []], + disabledState: [settings.disabledState, []], + layout: [settings.layout, []], + onState: [settings.onState, []], + offState: [settings.offState, []] + }); + } +} 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 5b83f859e1..a5f9084968 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 @@ -342,6 +342,9 @@ import { import { TimeSeriesChartWidgetSettingsComponent } from '@home/components/widget/lib/settings/chart/time-series-chart-widget-settings.component'; +import { + StatusWidgetSettingsComponent +} from '@home/components/widget/lib/settings/indicator/status-widget-settings.component'; @NgModule({ declarations: [ @@ -464,7 +467,8 @@ import { TimeSeriesChartKeySettingsComponent, TimeSeriesChartLineSettingsComponent, TimeSeriesChartBarSettingsComponent, - TimeSeriesChartWidgetSettingsComponent + TimeSeriesChartWidgetSettingsComponent, + StatusWidgetSettingsComponent ], imports: [ CommonModule, @@ -592,7 +596,8 @@ import { TimeSeriesChartKeySettingsComponent, TimeSeriesChartLineSettingsComponent, TimeSeriesChartBarSettingsComponent, - TimeSeriesChartWidgetSettingsComponent + TimeSeriesChartWidgetSettingsComponent, + StatusWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -685,5 +690,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type