UI: Add date range navigator widget settings form
This commit is contained in:
		
							parent
							
								
									9d8504de4b
								
							
						
					
					
						commit
						3e7d3625cb
					
				@ -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\":{}}"
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
@ -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>
 | 
			
		||||
@ -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});
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
}
 | 
			
		||||
@ -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
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
@ -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",
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user