diff --git a/application/src/main/data/json/system/widget_bundles/date.json b/application/src/main/data/json/system/widget_bundles/date.json index b137f66c9d..dc868235df 100644 --- a/application/src/main/data/json/system/widget_bundles/date.json +++ b/application/src/main/data/json/system/widget_bundles/date.json @@ -19,8 +19,9 @@ "templateHtml": "", "templateCss": "", "controllerScript": "self.onInit = function() {\n}\n", - "settingsSchema": "{\n \"schema\": {\n \"type\": \"object\",\n \"title\": \"Settings\",\n \"properties\": {\n \"hidePicker\": {\n \"title\": \"Hide date range picker\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"onePanel\": {\n \"title\": \"Date range picker one panel\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"autoConfirm\": {\n \"title\": \"Date range picker auto confirm\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"showTemplate\": {\n \"title\": \"Date range picker show template\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"firstDayOfWeek\": {\n \"title\": \"First day of the week\",\n \"type\": \"number\",\n \"default\": 1\n },\n \"hideInterval\": {\n \"title\": \"Hide interval\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"initialInterval\": {\n\t\t\t\t\"title\": \"Initial interval\",\n\t\t\t\t\"type\": \"string\",\n\t\t\t\t\"default\": \"week\"\n\t\t\t},\n \"hideStepSize\": {\n \"title\": \"Hide step size\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"stepSize\": {\n\t\t\t\t\"title\": \"Initial step size\",\n\t\t\t\t\"type\": \"string\",\n\t\t\t\t\"default\": \"day\"\n\t\t\t},\n \"hideLabels\": {\n \"title\": \"Hide labels\",\n \"type\": \"boolean\",\n \"default\": false\n },\n \"useSessionStorage\": {\n \"title\": \"Use session storage\",\n \"type\": \"boolean\",\n \"default\": true\n }\n }\n },\n \"form\": [\n \"hidePicker\",\n\t\t\"onePanel\",\n\t\t\"autoConfirm\",\n\t\t\"showTemplate\",\n\t\t\"firstDayOfWeek\",\n \"hideInterval\",\n {\n\t\t\t\"key\": \"initialInterval\",\n\t\t\t\"type\": \"rc-select\",\n\t\t\t\"multiple\": false,\n\t\t\t\"items\": [\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"hour\",\n\t\t\t\t\t\"label\": \"Hour\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"day\",\n\t\t\t\t\t\"label\": \"Day\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"week\",\n\t\t\t\t\t\"label\": \"Week\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"twoWeeks\",\n\t\t\t\t\t\"label\": \"2 weeks\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"month\",\n\t\t\t\t\t\"label\": \"Month\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"threeMonths\",\n\t\t\t\t\t\"label\": \"3 months\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"sixMonths\",\n\t\t\t\t\t\"label\": \"6 months\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n \"hideStepSize\",\n {\n\t\t\t\"key\": \"stepSize\",\n\t\t\t\"type\": \"rc-select\",\n\t\t\t\"multiple\": false,\n\t\t\t\"items\": [\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"hour\",\n\t\t\t\t\t\"label\": \"Hour\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"day\",\n\t\t\t\t\t\"label\": \"Day\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"week\",\n\t\t\t\t\t\"label\": \"Week\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"twoWeeks\",\n\t\t\t\t\t\"label\": \"2 weeks\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"month\",\n\t\t\t\t\t\"label\": \"Month\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"threeMonths\",\n\t\t\t\t\t\"label\": \"3 months\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"value\": \"sixMonths\",\n\t\t\t\t\t\"label\": \"6 months\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t\"hideLabels\",\n\t\t\"useSessionStorage\"\n ]\n}", + "settingsSchema": "", "dataKeySettingsSchema": "{}\n", + "settingsDirective": "tb-date-range-navigator-widget-settings", "defaultConfig": "{\"datasources\":[{\"type\":\"static\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"defaultInterval\":\"week\",\"stepSize\":\"day\"},\"title\":\"Date-range-navigator\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{}}" } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html new file mode 100644 index 0000000000..519ef6bafa --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html @@ -0,0 +1,146 @@ + +
+
+ widgets.date-range-navigator.date-range-picker-settings + + + + + {{ 'widgets.date-range-navigator.hide-date-range-picker' | translate }} + + + + widget-config.advanced-settings + + + +
+ + {{ 'widgets.date-range-navigator.picker-one-panel' | translate }} + + + {{ 'widgets.date-range-navigator.picker-auto-confirm' | translate }} + + + {{ 'widgets.date-range-navigator.picker-show-template' | translate }} + + + widgets.date-range-navigator.first-day-of-week + + +
+ + +
+
+ widgets.date-range-navigator.interval-settings + + + + + {{ 'widgets.date-range-navigator.hide-interval' | translate }} + + + + widget-config.advanced-settings + + + + + widgets.date-range-navigator.initial-interval + + + {{ 'widgets.date-range-navigator.interval-hour' | translate }} + + + {{ 'widgets.date-range-navigator.interval-day' | translate }} + + + {{ 'widgets.date-range-navigator.interval-week' | translate }} + + + {{ 'widgets.date-range-navigator.interval-two-weeks' | translate }} + + + {{ 'widgets.date-range-navigator.interval-month' | translate }} + + + {{ 'widgets.date-range-navigator.interval-three-months' | translate }} + + + {{ 'widgets.date-range-navigator.interval-six-months' | translate }} + + + + + +
+
+ widgets.date-range-navigator.step-settings + + + + + {{ 'widgets.date-range-navigator.hide-step-size' | translate }} + + + + widget-config.advanced-settings + + + + + widgets.date-range-navigator.initial-step-size + + + {{ 'widgets.date-range-navigator.interval-hour' | translate }} + + + {{ 'widgets.date-range-navigator.interval-day' | translate }} + + + {{ 'widgets.date-range-navigator.interval-week' | translate }} + + + {{ 'widgets.date-range-navigator.interval-two-weeks' | translate }} + + + {{ 'widgets.date-range-navigator.interval-month' | translate }} + + + {{ 'widgets.date-range-navigator.interval-three-months' | translate }} + + + {{ 'widgets.date-range-navigator.interval-six-months' | translate }} + + + + + +
+ + {{ 'widgets.date-range-navigator.hide-labels' | translate }} + + + {{ 'widgets.date-range-navigator.use-session-storage' | translate }} + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.ts new file mode 100644 index 0000000000..b218fd7004 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.ts @@ -0,0 +1,120 @@ +/// +/// 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, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; + +@Component({ + selector: 'tb-date-range-navigator-widget-settings', + templateUrl: './date-range-navigator-widget-settings.component.html', + styleUrls: ['./../widget-settings.scss'] +}) +export class DateRangeNavigatorWidgetSettingsComponent extends WidgetSettingsComponent { + + dateRangeNavigatorWidgetSettingsForm: FormGroup; + + constructor(protected store: Store, + private fb: FormBuilder) { + super(store); + } + + protected settingsForm(): FormGroup { + return this.dateRangeNavigatorWidgetSettingsForm; + } + + protected defaultSettings(): WidgetSettings { + return { + hidePicker: false, + onePanel: false, + autoConfirm: false, + showTemplate: false, + firstDayOfWeek: 1, + hideInterval: false, + initialInterval: 'week', + hideStepSize: false, + stepSize: 'day', + hideLabels: false, + useSessionStorage: true + }; + } + + protected onSettingsSet(settings: WidgetSettings) { + this.dateRangeNavigatorWidgetSettingsForm = this.fb.group({ + + // Date range picker settings + + hidePicker: [settings.hidePicker, []], + onePanel: [settings.onePanel, []], + autoConfirm: [settings.autoConfirm, []], + showTemplate: [settings.showTemplate, []], + firstDayOfWeek: [settings.firstDayOfWeek, [Validators.min(1), Validators.max(7)]], + + // Interval settings + + hideInterval: [settings.hideInterval, []], + initialInterval: [settings.initialInterval, []], + + // Step settings + + hideStepSize: [settings.hideStepSize, []], + stepSize: [settings.stepSize, []], + + hideLabels: [settings.hideLabels, []], + useSessionStorage: [settings.useSessionStorage, []], + }); + } + + protected validatorTriggers(): string[] { + return ['hidePicker', 'hideInterval', 'hideStepSize']; + } + + protected updateValidators(emitEvent: boolean) { + const hidePicker: boolean = this.dateRangeNavigatorWidgetSettingsForm.get('hidePicker').value; + const hideInterval: boolean = this.dateRangeNavigatorWidgetSettingsForm.get('hideInterval').value; + const hideStepSize: boolean = this.dateRangeNavigatorWidgetSettingsForm.get('hideStepSize').value; + if (hidePicker) { + this.dateRangeNavigatorWidgetSettingsForm.get('onePanel').disable(); + this.dateRangeNavigatorWidgetSettingsForm.get('autoConfirm').disable(); + this.dateRangeNavigatorWidgetSettingsForm.get('showTemplate').disable(); + this.dateRangeNavigatorWidgetSettingsForm.get('firstDayOfWeek').disable(); + } else { + this.dateRangeNavigatorWidgetSettingsForm.get('onePanel').enable(); + this.dateRangeNavigatorWidgetSettingsForm.get('autoConfirm').enable(); + this.dateRangeNavigatorWidgetSettingsForm.get('showTemplate').enable(); + this.dateRangeNavigatorWidgetSettingsForm.get('firstDayOfWeek').enable(); + } + if (hideInterval) { + this.dateRangeNavigatorWidgetSettingsForm.get('initialInterval').disable(); + } else { + this.dateRangeNavigatorWidgetSettingsForm.get('initialInterval').enable(); + } + if (hideStepSize) { + this.dateRangeNavigatorWidgetSettingsForm.get('stepSize').disable(); + } else { + this.dateRangeNavigatorWidgetSettingsForm.get('stepSize').enable(); + } + this.dateRangeNavigatorWidgetSettingsForm.get('onePanel').updateValueAndValidity({emitEvent}); + this.dateRangeNavigatorWidgetSettingsForm.get('autoConfirm').updateValueAndValidity({emitEvent}); + this.dateRangeNavigatorWidgetSettingsForm.get('showTemplate').updateValueAndValidity({emitEvent}); + this.dateRangeNavigatorWidgetSettingsForm.get('firstDayOfWeek').updateValueAndValidity({emitEvent}); + this.dateRangeNavigatorWidgetSettingsForm.get('initialInterval').updateValueAndValidity({emitEvent}); + this.dateRangeNavigatorWidgetSettingsForm.get('stepSize').updateValueAndValidity({emitEvent}); + } + +} 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 c7b3948427..6dd8000b80 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 @@ -141,6 +141,9 @@ import { import { RpcShellWidgetSettingsComponent } from '@home/components/widget/lib/settings/control/rpc-shell-widget-settings.component'; +import { + DateRangeNavigatorWidgetSettingsComponent +} from '@home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component'; @NgModule({ declarations: [ @@ -193,7 +196,8 @@ import { LedIndicatorWidgetSettingsComponent, KnobControlWidgetSettingsComponent, RpcTerminalWidgetSettingsComponent, - RpcShellWidgetSettingsComponent + RpcShellWidgetSettingsComponent, + DateRangeNavigatorWidgetSettingsComponent ], imports: [ CommonModule, @@ -250,7 +254,8 @@ import { LedIndicatorWidgetSettingsComponent, KnobControlWidgetSettingsComponent, RpcTerminalWidgetSettingsComponent, - RpcShellWidgetSettingsComponent + RpcShellWidgetSettingsComponent, + DateRangeNavigatorWidgetSettingsComponent ] }) export class WidgetSettingsModule { @@ -293,5 +298,6 @@ export const widgetSettingsComponentsMap: {[key: string]: Type