thingsboard/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html

<!--

    Copyright © 2016-2021 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.

-->
<mat-tab-group class="tb-widget-config tb-absolute-fill" [(selectedIndex)]="selectedTab">
  <mat-tab label="{{ 'widget-config.data' | translate }}" *ngIf="widgetType !== widgetTypes.static">
    <div [formGroup]="dataSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px">
      <div *ngIf="widgetType === widgetTypes.timeseries || widgetType === widgetTypes.alarm" fxFlex="100"
           fxLayout.xs="column" fxLayoutGap="8px" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxLayoutGap="8px" fxFlex.gt-xs>
          <mat-checkbox formControlName="useDashboardTimewindow">
            {{ 'widget-config.use-dashboard-timewindow' | translate }}
          </mat-checkbox>
          <mat-checkbox formControlName="displayTimewindow">
            {{ 'widget-config.display-timewindow' | translate }}
          </mat-checkbox>
        </div>
        <section fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-lg="column" fxLayoutAlign.lt-lg="center start"
                 fxFlex.gt-xs style="margin-bottom: 16px;">
          <span [ngClass]="{'tb-disabled-label': dataSettings.get('useDashboardTimewindow').value}" translate
                style="padding-right: 8px;">widget-config.timewindow</span>
          <tb-timewindow asButton="true"
                         isEdit="true"
                         aggregation="{{ widgetType === widgetTypes.timeseries }}"
                         fxFlex formControlName="timewindow"></tb-timewindow>
        </section>
      </div>
      <div *ngIf="widgetType === widgetTypes.alarm" fxLayout="column" fxLayoutAlign="center">
        <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
             fxLayoutGap="8px">
          <mat-form-field fxFlex class="mat-block" floatLabel="always">
            <mat-label translate>alarm.alarm-status-list</mat-label>
            <mat-select formControlName="alarmStatusList" multiple
                        placeholder="{{ !dataSettings.get('alarmStatusList').value?.length ? ('alarm.any-status' | translate) : '' }}">
              <mat-option *ngFor="let searchStatus of alarmSearchStatuses" [value]="searchStatus">
                {{ alarmSearchStatusTranslationMap.get(searchStatus) | translate }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field fxFlex class="mat-block" floatLabel="always">
            <mat-label translate>alarm.alarm-severity-list</mat-label>
            <mat-select formControlName="alarmSeverityList" multiple
                        placeholder="{{ !dataSettings.get('alarmSeverityList').value?.length ? ('alarm.any-severity' | translate) : '' }}">
              <mat-option *ngFor="let alarmSeverity of alarmSeverities" [value]="alarmSeverity">
                {{ alarmSeverityTranslationMap.get(alarmSeverityEnum[alarmSeverity]) | translate }}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
        <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
             fxLayoutGap="8px">
          <mat-form-field fxFlex class="mat-block" floatLabel="always">
            <mat-label translate>alarm.alarm-type-list</mat-label>
            <mat-chip-list #alarmTypeChipList formControlName="alarmTypeList">
              <mat-chip *ngFor="let type of alarmTypeList()" [selectable]="true"
              [removable]="true" (removed)="removeAlarmType(type)">
              {{type}}
              <mat-icon matChipRemove>cancel</mat-icon>
              </mat-chip>
              <input placeholder="{{ !dataSettings.get('alarmTypeList').value?.length ? ('alarm.any-type' | translate) : '' }}"
                     [matChipInputFor]="alarmTypeChipList"
                     [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                     matChipInputAddOnBlur
                     (matChipInputTokenEnd)="addAlarmType($event)">
            </mat-chip-list>
          </mat-form-field>
          <mat-checkbox fxFlex formControlName="searchPropagatedAlarms">
            {{ 'alarm.search-propagated-alarms' | translate }}
          </mat-checkbox>
        </div>
      </div>
      <mat-expansion-panel class="tb-datasources" *ngIf="widgetType !== widgetTypes.rpc &&
                                  widgetType !== widgetTypes.alarm &&
                                  modelValue?.isDataEnabled" [expanded]="true">
        <mat-expansion-panel-header>
          <mat-panel-title fxLayout="column">
            <div class="tb-panel-title" translate>widget-config.datasources</div>
            <div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1"
                 class="tb-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div *ngIf="datasourcesFormArray().length === 0; else datasourcesTemplate">
              <span translate fxLayoutAlign="center center"
                    class="tb-prompt">datasource.add-datasource-prompt</span>
        </div>
        <ng-template #datasourcesTemplate>
          <div fxFlex fxLayout="row" fxLayoutAlign="start center">
            <span style="width: 60px;"></span>
            <div fxFlex fxLayout="row" fxLayoutAlign="start center"
                 style="padding: 0 0 0 10px; margin: 5px;">
              <span translate style="min-width: 120px;">widget-config.datasource-type</span>
              <span fxHide fxShow.gt-sm translate fxFlex
                    style="padding-left: 10px;">widget-config.datasource-parameters</span>
              <span style="min-width: 40px;"></span>
            </div>
          </div>
          <div style="overflow: auto; padding-bottom: 15px;">
            <mat-list dndDropzone dndEffectAllowed="move"
                      (dndDrop)="onDatasourceDrop($event)"
                      [dndDisableIf]="disabled" formArrayName="datasources">
              <mat-list-item dndPlaceholderRef
                             class="dndPlaceholder">
              </mat-list-item>
              <mat-list-item *ngFor="let datasourceControl of datasourcesFormArray().controls; let $index = index;"
                             [dndDraggable]="datasourceControl.value"
                             (dndMoved)="dndDatasourceMoved($index)"
                             [dndDisableIf]="disabled"
                             dndEffectAllowed="move">
                <div fxFlex fxLayout="row" fxLayoutAlign="start center">
                  <div style="width: 60px;">
                    <button *ngIf="!disabled" mat-icon-button color="primary"
                            class="handle"
                            style="min-width: 40px; margin: 0"
                            dndHandle
                            matTooltip="{{ 'action.drag' | translate }}"
                            matTooltipPosition="above">
                      <mat-icon>drag_handle</mat-icon>
                    </button>
                    <span>{{$index + 1}}.</span>
                  </div>
                  <div class="mat-elevation-z4" fxFlex
                       fxLayout="row"
                       fxLayoutAlign="start center"
                       style="padding: 0 0 0 10px; margin: 5px;">
                    <section fxFlex
                             fxLayout="column"
                             fxLayoutAlign="center"
                             fxLayout.gt-sm="row"
                             fxLayoutAlign.gt-sm="start center">
                      <mat-form-field class="tb-datasource-type">
                        <mat-select [formControl]="datasourceControl.get('type')">
                          <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
                            {{ datasourceTypesTranslations.get(datasourceType) | translate }}
                          </mat-option>
                        </mat-select>
                      </mat-form-field>
                      <section fxLayout="column" class="tb-datasource" [ngSwitch]="datasourceControl.get('type').value">
                        <ng-template [ngSwitchCase]="datasourceType.function">
                          <mat-form-field floatLabel="always"
                                          class="tb-datasource-name" style="min-width: 200px;">
                            <mat-label></mat-label>
                            <input matInput
                                   placeholder="{{ 'datasource.label' | translate }}"
                                   [formControl]="datasourceControl.get('name')">
                          </mat-form-field>
                        </ng-template>
                        <ng-template [ngSwitchCase]="datasourceControl.get('type').value === datasourceType.entity ||
                                                 datasourceControl.get('type').value === datasourceType.entityCount ? datasourceControl.get('type').value : ''">
                          <tb-entity-alias-select
                            [showLabel]="true"
                            [tbRequired]="true"
                            [aliasController]="aliasController"
                            [formControl]="datasourceControl.get('entityAliasId')"
                            [callbacks]="widgetConfigCallbacks">
                          </tb-entity-alias-select>
                          <tb-filter-select
                            [showLabel]="true"
                            [aliasController]="aliasController"
                            [formControl]="datasourceControl.get('filterId')"
                            [callbacks]="widgetConfigCallbacks">
                          </tb-filter-select>
                          <mat-form-field *ngIf="datasourceControl.get('type').value === datasourceType.entityCount"
                                          floatLabel="always"
                                          class="tb-datasource-name no-border-top" style="min-width: 200px;">
                            <mat-label></mat-label>
                            <input matInput
                                   placeholder="{{ 'datasource.label' | translate }}"
                                   [formControl]="datasourceControl.get('name')">
                          </mat-form-field>
                        </ng-template>
                      </section>
                      <tb-data-keys class="tb-data-keys" fxFlex
                                    [widgetType]="widgetType"
                                    [datasourceType]="datasourceControl.get('type').value"
                                    [maxDataKeys]="modelValue?.typeParameters?.maxDataKeys"
                                    [optDataKeys]="modelValue?.typeParameters?.dataKeysOptional"
                                    [aliasController]="aliasController"
                                    [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
                                    [callbacks]="widgetConfigCallbacks"
                                    [entityAliasId]="datasourceControl.get('entityAliasId').value"
                                    [formControl]="datasourceControl.get('dataKeys')">
                      </tb-data-keys>
                    </section>
                    <button [disabled]="isLoading$ | async"
                            type="button"
                            mat-icon-button color="primary"
                            style="min-width: 40px;"
                            (click)="removeDatasource($index)"
                            matTooltip="{{ 'widget-config.remove-datasource' | translate }}"
                            matTooltipPosition="above">
                      <mat-icon>close</mat-icon>
                    </button>
                  </div>
                </div>
              </mat-list-item>
            </mat-list>
          </div>
        </ng-template>
        <div fxFlex fxLayout="row" fxLayoutAlign="start center">
          <button [disabled]="isLoading$ | async"
                  type="button"
                  mat-raised-button color="primary"
                  [fxShow]="modelValue?.typeParameters &&
                            (modelValue?.typeParameters.maxDatasources == -1 || datasourcesFormArray().controls.length < modelValue?.typeParameters.maxDatasources)"
                  (click)="addDatasource()"
                  matTooltip="{{ 'widget-config.add-datasource' | translate }}"
                  matTooltipPosition="above">
            <mat-icon>add</mat-icon>
            <span translate>action.add</span>
          </button>
        </div>
      </mat-expansion-panel>
      <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.rpc &&
                                  modelValue?.isDataEnabled" [expanded]="true">
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ 'widget-config.target-device' | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div [formGroup]="targetDeviceSettings" style="padding: 0 5px;">
          <tb-entity-alias-select fxFlex
            [tbRequired]="!widgetEditMode"
            [aliasController]="aliasController"
            [allowedEntityTypes]="[entityTypes.DEVICE]"
            [callbacks]="widgetConfigCallbacks"
            formControlName="targetDeviceAliasId">
          </tb-entity-alias-select>
        </div>
      </mat-expansion-panel>
      <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.alarm &&
                                  modelValue?.isDataEnabled" [expanded]="true">
        <mat-expansion-panel-header>
          <mat-panel-title>
            {{ 'widget-config.alarm-source' | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div [formGroup]="alarmSourceSettings" style="padding: 0 5px;">
          <section fxFlex
                   fxLayout="column"
                   fxLayoutAlign="center"
                   fxLayout.gt-sm="row"
                   fxLayoutAlign.gt-sm="start center">
            <mat-form-field class="tb-datasource-type">
              <mat-select formControlName="type">
                <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
                  {{ datasourceTypesTranslations.get(datasourceType) | translate }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <section class="tb-datasource" [ngSwitch]="alarmSourceSettings.get('type').value">
              <ng-template [ngSwitchCase]="datasourceType.entity">
                <tb-entity-alias-select
                  [showLabel]="true"
                  [tbRequired]="alarmSourceSettings.get('type').value === datasourceType.entity"
                  [aliasController]="aliasController"
                  formControlName="entityAliasId"
                  [callbacks]="widgetConfigCallbacks">
                </tb-entity-alias-select>
                <tb-filter-select
                  [showLabel]="true"
                  [aliasController]="aliasController"
                  formControlName="filterId"
                  [callbacks]="widgetConfigCallbacks">
                </tb-filter-select>
              </ng-template>
            </section>
            <tb-data-keys class="tb-data-keys" fxFlex
                          [widgetType]="widgetType"
                          [datasourceType]="alarmSourceSettings.get('type').value"
                          [aliasController]="aliasController"
                          [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
                          [callbacks]="widgetConfigCallbacks"
                          [entityAliasId]="alarmSourceSettings.get('entityAliasId').value"
                          formControlName="dataKeys">
            </tb-data-keys>
          </section>
        </div>
      </mat-expansion-panel>
    </div>
    <div [formGroup]="widgetSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title translate>widget-config.data-settings</mat-panel-title>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>
          <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
               fxLayoutGap="8px">
            <mat-form-field fxFlex>
              <mat-label translate>widget-config.units</mat-label>
              <input matInput formControlName="units">
            </mat-form-field>
            <mat-form-field fxFlex>
              <mat-label translate>widget-config.decimals</mat-label>
              <input matInput formControlName="decimals" type="number" min="0" max="15" step="1">
            </mat-form-field>
          </div>
        </ng-template>
      </mat-expansion-panel>
    </div>
  </mat-tab>
  <mat-tab label="{{ 'widget-config.settings' | translate }}">
    <div class="mat-content mat-padding" fxLayout="column">
      <div [formGroup]="widgetSettings" fxLayout="column">
        <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
          <legend class="group-title" translate>widget-config.title</legend>
          <mat-slide-toggle formControlName="showTitle">
            {{ 'widget-config.display-title' | translate }}
          </mat-slide-toggle>
          <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
               fxLayoutGap="8px">
            <mat-form-field fxFlex>
              <mat-label translate>widget-config.title</mat-label>
              <input matInput formControlName="title">
            </mat-form-field>
            <mat-form-field fxFlex>
              <mat-label translate>widget-config.title-tooltip</mat-label>
              <input matInput formControlName="titleTooltip">
            </mat-form-field>
          </div>
          <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
            <legend class="group-title" translate>widget-config.title-icon</legend>
            <mat-slide-toggle formControlName="showTitleIcon">
              {{ 'widget-config.display-icon' | translate }}
            </mat-slide-toggle>
            <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row wrap" fxLayoutAlign="start center"
                 fxLayoutGap="8px">
              <tb-material-icon-select fxFlex
                                       formControlName="titleIcon">
              </tb-material-icon-select>
              <tb-color-input fxFlex
                              label="{{'widget-config.icon-color' | translate}}"
                              icon="format_color_fill"
                              openOnInput
                              formControlName="iconColor">
              </tb-color-input>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.icon-size</mat-label>
                <input matInput formControlName="iconSize">
              </mat-form-field>
            </div>
          </fieldset>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header>
              <mat-panel-description fxLayoutAlign="end" translate>
                widget-config.advanced-settings
              </mat-panel-description>
            </mat-expansion-panel-header>
              <ng-template matExpansionPanelContent>
                <tb-json-object-edit
                  [editorStyle]="{minHeight: '100px'}"
                  required
                  label="{{ 'widget-config.title-style' | translate }}"
                  formControlName="titleStyle"
                ></tb-json-object-edit>
              </ng-template>
          </mat-expansion-panel>
        </fieldset>
        <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
          <legend class="group-title" translate>widget-config.widget-style</legend>
          <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-md="row" fxLayoutAlign.gt-md="start center"
               fxFlex="100%" fxLayoutGap="8px">
            <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
                 fxLayoutGap="8px" fxFlex.gt-md>
              <tb-color-input fxFlex
                              label="{{'widget-config.background-color' | translate}}"
                              icon="format_color_fill"
                              openOnInput
                              formControlName="backgroundColor">
              </tb-color-input>
              <tb-color-input fxFlex
                              label="{{'widget-config.text-color' | translate}}"
                              icon="format_color_fill"
                              openOnInput
                              formControlName="color">
              </tb-color-input>
            </div>
            <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
                 fxLayoutGap="8px" fxFlex.gt-md>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.padding</mat-label>
                <input matInput formControlName="padding">
              </mat-form-field>
              <mat-form-field fxFlex>
                <mat-label translate>widget-config.margin</mat-label>
                <input matInput formControlName="margin">
              </mat-form-field>
            </div>
          </div>
          <mat-slide-toggle formControlName="dropShadow">
            {{ 'widget-config.drop-shadow' | translate }}
          </mat-slide-toggle>
          <mat-slide-toggle formControlName="enableFullscreen">
            {{ 'widget-config.enable-fullscreen' | translate }}
          </mat-slide-toggle>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header>
              <mat-panel-description fxLayoutAlign="end" translate>
                widget-config.advanced-settings
              </mat-panel-description>
            </mat-expansion-panel-header>
            <ng-template matExpansionPanelContent>
              <tb-json-object-edit
                [editorStyle]="{minHeight: '100px'}"
                required
                label="{{ 'widget-config.widget-style' | translate }}"
                formControlName="widgetStyle"
              ></tb-json-object-edit>
            </ng-template>
          </mat-expansion-panel>
        </fieldset>
        <fieldset class="fields-group fields-group-slider" fxLayout="column" fxLayoutGap="8px">
          <legend class="group-title" translate>widget-config.legend</legend>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header fxLayout="row wrap">
              <mat-panel-title>
                <mat-slide-toggle formControlName="showLegend" (click)="$event.stopPropagation()" fxLayoutAlign="center">
                  {{ 'widget-config.display-legend' | 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>
              <tb-legend-config formControlName="legendConfig"></tb-legend-config>
            </ng-template>
          </mat-expansion-panel>
        </fieldset>
        <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider" fxLayout="column" fxLayoutGap="8px">
          <legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
          <mat-expansion-panel class="tb-settings">
            <mat-expansion-panel-header>
              <mat-panel-title>
                <mat-slide-toggle formControlName="mobileHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
                  {{ 'widget-config.mobile-hide' | 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>
              <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
                   fxLayoutGap="8px">
                <mat-form-field fxFlex>
                  <mat-label translate>widget-config.order</mat-label>
                  <input matInput formControlName="mobileOrder" type="number" step="1">
                </mat-form-field>
                <mat-form-field fxFlex>
                  <mat-label translate>widget-config.height</mat-label>
                  <input matInput formControlName="mobileHeight" type="number" min="1" max="10" step="1">
                </mat-form-field>
              </div>
            </ng-template>
          </mat-expansion-panel>
        </fieldset>
      </div>
    </div>
  </mat-tab>
  <mat-tab *ngIf="displayAdvanced()" label="{{ 'widget-config.advanced' | translate }}">
    <div [formGroup]="advancedSettings" class="mat-content mat-padding tb-advanced-widget-config"
         fxLayout="column">
        <tb-json-form
          formControlName="settings">
        </tb-json-form>
    </div>
  </mat-tab>
  <mat-tab label="{{ 'widget-config.actions' | translate }}" [formGroup]="actionsSettings">
    <tb-manage-widget-actions
      [callbacks]="widgetConfigCallbacks"
      [widgetType] = "modelValue.widgetType"
      formControlName="actionsData">
    </tb-manage-widget-actions>
  </mat-tab>
</mat-tab-group>