From 5db8992e5246198d1631205fbb683c5c435a61b9 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Wed, 27 Apr 2022 16:25:27 +0300 Subject: [PATCH] UI: Add edge quick overview widget settings form --- .../system/widget_bundles/edge_widgets.json | 5 +- ...ck-overview-widget-settings.component.html | 22 ++++++++ ...uick-overview-widget-settings.component.ts | 52 +++++++++++++++++++ .../lib/settings/widget-settings.module.ts | 12 +++-- .../assets/locale/locale.constant-en_US.json | 3 ++ 5 files changed, 89 insertions(+), 5 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.ts diff --git a/application/src/main/data/json/system/widget_bundles/edge_widgets.json b/application/src/main/data/json/system/widget_bundles/edge_widgets.json index 4a5edfbde9..5d9c9526fa 100644 --- a/application/src/main/data/json/system/widget_bundles/edge_widgets.json +++ b/application/src/main/data/json/system/widget_bundles/edge_widgets.json @@ -19,10 +19,11 @@ "templateHtml": "\n", "templateCss": "", "controllerScript": "self.onInit = function() {\n};\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n dataKeysOptional: true\n };\n}\n\nself.onDestroy = function() {\n};\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"EdgeOverviewSettings\",\n \"properties\": {\n \"enableDefaultTitle\": {\n \"title\": \"Display default title\",\n \"type\": \"boolean\",\n \"default\": true\n }\n },\n \"required\": []\n },\n \"form\": [\n \"enableDefaultTitle\"\n ]\n}", + "settingsSchema": "", "dataKeySettingsSchema": "{}\n", + "settingsDirective": "tb-edge-quick-overview-widget-settings", "defaultConfig": "{\"timewindow\":{\"realtime\":{\"interval\":1000,\"timewindowMs\":86400000},\"aggregation\":{\"type\":\"NONE\",\"limit\":200}},\"showTitle\":true,\"showTitleIcon\":true,\"titleIcon\":\"router\",\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"4px\",\"settings\":{},\"title\":\"Edge Quick Overview\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400,\"padding\":\"5px 10px 5px 10px\"},\"useDashboardTimewindow\":false,\"showLegend\":false,\"datasources\":[{\"type\":\"function\",\"name\":\"Simulated\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Sin\",\"color\":\"#2196f3\",\"settings\":{\"columnWidth\":\"0px\",\"useCellStyleFunction\":false,\"cellStyleFunction\":\"\",\"useCellContentFunction\":false,\"cellContentFunction\":\"\"},\"_hash\":0.472295003170325,\"funcBody\":\"return Math.round(1000*Math.sin(time/5000));\"}]}],\"widgetStyle\":{},\"actions\":{}}" } } ] -} +} \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html new file mode 100644 index 0000000000..e2f403eb46 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.html @@ -0,0 +1,22 @@ + +
+ + {{ 'widgets.edge.display-default-title' | translate }} + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.ts new file mode 100644 index 0000000000..2d26f5e76d --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component.ts @@ -0,0 +1,52 @@ +/// +/// Copyright © 2016-2022 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 } from '@angular/core'; +import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-edge-quick-overview-widget-settings', + templateUrl: './edge-quick-overview-widget-settings.component.html', + styleUrls: ['./../widget-settings.scss'] +}) +export class EdgeQuickOverviewWidgetSettingsComponent extends WidgetSettingsComponent { + + edgeQuickOverviewWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.edgeQuickOverviewWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + enableDefaultTitle: true + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.edgeQuickOverviewWidgetSettingsForm = this.fb.group({ + enableDefaultTitle: [settings.enableDefaultTitle, []] + }); + } +} 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 6dd8000b80..f48749446b 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 @@ -144,6 +144,9 @@ import { import { DateRangeNavigatorWidgetSettingsComponent } from '@home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component'; +import { + EdgeQuickOverviewWidgetSettingsComponent +} from '@home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component'; @NgModule({ declarations: [ @@ -197,7 +200,8 @@ import { KnobControlWidgetSettingsComponent, RpcTerminalWidgetSettingsComponent, RpcShellWidgetSettingsComponent, - DateRangeNavigatorWidgetSettingsComponent + DateRangeNavigatorWidgetSettingsComponent, + EdgeQuickOverviewWidgetSettingsComponent ], imports: [ CommonModule, @@ -255,7 +259,8 @@ import { KnobControlWidgetSettingsComponent, RpcTerminalWidgetSettingsComponent, RpcShellWidgetSettingsComponent, - DateRangeNavigatorWidgetSettingsComponent + DateRangeNavigatorWidgetSettingsComponent, + EdgeQuickOverviewWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -299,5 +304,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type