UI: Add date range navigator widget settings form

This commit is contained in:
Igor Kulikov 2022-04-27 15:00:45 +03:00
parent 9d8504de4b
commit 3e7d3625cb
5 changed files with 298 additions and 4 deletions

View File

@ -19,8 +19,9 @@
"templateHtml": "<tb-date-range-navigator-widget [ctx]=\"ctx\"></tb-date-range-navigator-widget>",
"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\":{}}"
}
}

View File

@ -0,0 +1,146 @@
<!--
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.
-->
<section class="tb-widget-settings" [formGroup]="dateRangeNavigatorWidgetSettingsForm" fxLayout="column">
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.date-range-navigator.date-range-picker-settings</legend>
<mat-expansion-panel class="tb-settings" [expanded]="!dateRangeNavigatorWidgetSettingsForm.get('hidePicker').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="hidePicker" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widgets.date-range-navigator.hide-date-range-picker' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<section fxLayout="column" fxFlex>
<mat-checkbox formControlName="onePanel" style="margin-bottom: 16px;">
{{ 'widgets.date-range-navigator.picker-one-panel' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="autoConfirm" style="margin-bottom: 16px;">
{{ 'widgets.date-range-navigator.picker-auto-confirm' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="showTemplate" style="margin-bottom: 16px;">
{{ 'widgets.date-range-navigator.picker-show-template' | translate }}
</mat-checkbox>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.date-range-navigator.first-day-of-week</mat-label>
<input matInput type="number" min="1" max="7" step="1" formControlName="firstDayOfWeek">
</mat-form-field>
</section>
</ng-template>
</mat-expansion-panel>
</fieldset>
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.date-range-navigator.interval-settings</legend>
<mat-expansion-panel class="tb-settings" [expanded]="!dateRangeNavigatorWidgetSettingsForm.get('hideInterval').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="hideInterval" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widgets.date-range-navigator.hide-interval' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.date-range-navigator.initial-interval</mat-label>
<mat-select formControlName="initialInterval">
<mat-option [value]="'hour'">
{{ 'widgets.date-range-navigator.interval-hour' | translate }}
</mat-option>
<mat-option [value]="'day'">
{{ 'widgets.date-range-navigator.interval-day' | translate }}
</mat-option>
<mat-option [value]="'week'">
{{ 'widgets.date-range-navigator.interval-week' | translate }}
</mat-option>
<mat-option [value]="'twoWeeks'">
{{ 'widgets.date-range-navigator.interval-two-weeks' | translate }}
</mat-option>
<mat-option [value]="'month'">
{{ 'widgets.date-range-navigator.interval-month' | translate }}
</mat-option>
<mat-option [value]="'threeMonths'">
{{ 'widgets.date-range-navigator.interval-three-months' | translate }}
</mat-option>
<mat-option [value]="'sixMonths'">
{{ 'widgets.date-range-navigator.interval-six-months' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-template>
</mat-expansion-panel>
</fieldset>
<fieldset class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.date-range-navigator.step-settings</legend>
<mat-expansion-panel class="tb-settings" [expanded]="!dateRangeNavigatorWidgetSettingsForm.get('hideStepSize').value">
<mat-expansion-panel-header fxLayout="row wrap">
<mat-panel-title>
<mat-slide-toggle formControlName="hideStepSize" (click)="$event.stopPropagation()"
fxLayoutAlign="center">
{{ 'widgets.date-range-navigator.hide-step-size' | translate }}
</mat-slide-toggle>
</mat-panel-title>
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
widget-config.advanced-settings
</mat-panel-description>
</mat-expansion-panel-header>
<ng-template matExpansionPanelContent>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.date-range-navigator.initial-step-size</mat-label>
<mat-select formControlName="stepSize">
<mat-option [value]="'hour'">
{{ 'widgets.date-range-navigator.interval-hour' | translate }}
</mat-option>
<mat-option [value]="'day'">
{{ 'widgets.date-range-navigator.interval-day' | translate }}
</mat-option>
<mat-option [value]="'week'">
{{ 'widgets.date-range-navigator.interval-week' | translate }}
</mat-option>
<mat-option [value]="'twoWeeks'">
{{ 'widgets.date-range-navigator.interval-two-weeks' | translate }}
</mat-option>
<mat-option [value]="'month'">
{{ 'widgets.date-range-navigator.interval-month' | translate }}
</mat-option>
<mat-option [value]="'threeMonths'">
{{ 'widgets.date-range-navigator.interval-three-months' | translate }}
</mat-option>
<mat-option [value]="'sixMonths'">
{{ 'widgets.date-range-navigator.interval-six-months' | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</ng-template>
</mat-expansion-panel>
</fieldset>
<mat-slide-toggle formControlName="hideLabels" class="slide-block">
{{ 'widgets.date-range-navigator.hide-labels' | translate }}
</mat-slide-toggle>
<mat-slide-toggle formControlName="useSessionStorage" class="slide-block">
{{ 'widgets.date-range-navigator.use-session-storage' | translate }}
</mat-slide-toggle>
</section>

View File

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

View File

@ -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<IWidgetSettingsCo
'tb-led-indicator-widget-settings': LedIndicatorWidgetSettingsComponent,
'tb-knob-control-widget-settings': KnobControlWidgetSettingsComponent,
'tb-rpc-terminal-widget-settings': RpcTerminalWidgetSettingsComponent,
'tb-rpc-shell-widget-settings': RpcShellWidgetSettingsComponent
'tb-rpc-shell-widget-settings': RpcShellWidgetSettingsComponent,
'tb-date-range-navigator-widget-settings': DateRangeNavigatorWidgetSettingsComponent
};

View File

@ -3301,6 +3301,27 @@
"sync-parent-state-params": "Sync state params with parent dashboard"
},
"date-range-navigator": {
"date-range-picker-settings": "Date range picker settings",
"hide-date-range-picker": "Hide date range picker",
"picker-one-panel": "Date range picker one panel",
"picker-auto-confirm": "Date range picker auto confirm",
"picker-show-template": "Date range picker show template",
"first-day-of-week": "First day of the week",
"interval-settings": "Interval settings",
"hide-interval": "Hide interval",
"initial-interval": "Initial interval",
"interval-hour": "Hour",
"interval-day": "Day",
"interval-week": "Week",
"interval-two-weeks": "2 weeks",
"interval-month": "Month",
"interval-three-months": "3 months",
"interval-six-months": "6 months",
"step-settings": "Step settings",
"hide-step-size": "Hide step size",
"initial-step-size": "Initial step size",
"hide-labels": "Hide labels",
"use-session-storage": "Use session storage",
"localizationMap": {
"Sun": "Sun",
"Mon": "Mon",