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>
  </mat-tab>
  <mat-tab label="{{ 'widget-config.settings' | translate }}">
    <div class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px">
      <div [formGroup]="widgetSettings" fxLayout="column" fxLayoutGap="8px">
        <span translate>widget-config.general-settings</span>
        <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center">
          <div fxLayout="column" fxLayoutAlign="center" fxFlex.sm="40%" fxFlex.gt-sm="30%">
            <mat-form-field fxFlex class="mat-block">
              <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>
          <div fxFlex [fxShow]="widgetSettings.get('showTitle').value">
            <tb-json-object-edit
              [editorStyle]="{minHeight: '100px'}"
              required
              label="{{ 'widget-config.title-style' | translate }}"
              formControlName="titleStyle"
            ></tb-json-object-edit>
          </div>
        </div>
        <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>
            <mat-checkbox fxFlex formControlName="showTitleIcon">
              {{ 'widget-config.display-icon' | translate }}
            </mat-checkbox>
            <tb-material-icon-select fxFlex
              formControlName="titleIcon">
            </tb-material-icon-select>
          </div>
          <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
               fxLayoutGap="8px" fxFlex.gt-md>
            <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>
        </div>
        <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
             fxLayoutGap="8px">
          <div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="8px" fxFlex.sm="40%" fxFlex.gt-sm="30%">
            <mat-checkbox formControlName="showTitle">
              {{ 'widget-config.display-title' | translate }}
            </mat-checkbox>
            <mat-checkbox formControlName="dropShadow">
              {{ 'widget-config.drop-shadow' | translate }}
            </mat-checkbox>
            <mat-checkbox formControlName="enableFullscreen">
              {{ 'widget-config.enable-fullscreen' | translate }}
            </mat-checkbox>
          </div>
          <div fxFlex>
            <tb-json-object-edit
              [editorStyle]="{minHeight: '100px'}"
              required
              label="{{ 'widget-config.widget-style' | translate }}"
              formControlName="widgetStyle"
            ></tb-json-object-edit>
          </div>
        </div>
        <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>
        <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>
        <div [fxShow]="widgetType === widgetTypes.timeseries || widgetType === widgetTypes.latest"
             fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
             fxLayoutGap="8px" fxFlex="100%">
          <mat-checkbox fxFlex.gt-xs formControlName="showLegend">
            {{ 'widget-config.display-legend' | translate }}
          </mat-checkbox>
          <section fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" style="margin-bottom: 16px;">
            <tb-legend-config formControlName="legendConfig">
            </tb-legend-config>
          </section>
        </div>
      </div>
      <div [formGroup]="layoutSettings" fxLayout="column" fxLayoutGap="8px">
        <span translate>widget-config.mobile-mode-settings</span>
        <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>
      </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>