495 lines
28 KiB
HTML
495 lines
28 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2023 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 mat-stretch-tabs="false" 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="displayTimewindowConfig()" fxFlex="100"
|
|
fxLayout.xs="column" fxLayoutGap.gt-xs="8px" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center">
|
|
<div fxLayout="column" 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>
|
|
<span [ngClass]="{'tb-disabled-label': dataSettings.get('useDashboardTimewindow').value}" translate
|
|
style="padding-right: 8px;">widget-config.timewindow</span>
|
|
<tb-timewindow asButton="true"
|
|
isEdit="true"
|
|
alwaysDisplayTypePrefix
|
|
[historyOnly]="onlyHistoryTimewindow()"
|
|
quickIntervalOnly="{{ widgetType === widgetTypes.latest }}"
|
|
aggregation="{{ widgetType === widgetTypes.timeseries }}"
|
|
fxFlex formControlName="timewindow"></tb-timewindow>
|
|
</section>
|
|
</div>
|
|
<div *ngIf="widgetType === widgetTypes.alarm" fxLayout="column" fxLayoutAlign="center">
|
|
<tb-alarm-filter-config buttonMode="false" formControlName="alarmFilterConfig"></tb-alarm-filter-config>
|
|
</div>
|
|
<mat-accordion multi>
|
|
<mat-expansion-panel (opened)="extensionPanelIsOpen(true)" (closed)="extensionPanelIsOpen(false)" class="tb-datasources" *ngIf="widgetType !== widgetTypes.rpc &&
|
|
widgetType !== widgetTypes.alarm &&
|
|
modelValue?.isDataEnabled" [expanded]="true">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title fxLayout="row">
|
|
<div 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>
|
|
</div>
|
|
<mat-icon *ngIf = '(datasourceError.length > 0 || !datasourcesFormArray().valid) && !openExtensionPanel'
|
|
style = "color: red; font-size: 18px; margin-left: 5px;">
|
|
report_gmailerrorred
|
|
</mat-icon>
|
|
</mat-panel-title>
|
|
<mat-panel-description *ngIf = "timeseriesKeyError">
|
|
<mat-error >{{ 'widget-config.timeseries-key-error' | translate }}</mat-error>
|
|
</mat-panel-description>
|
|
</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: 68px;"></span>
|
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center"
|
|
style="padding: 0 0 0 10px; margin: 5px;">
|
|
<span translate style="min-width: 160px;">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 class="tb-drop-list"
|
|
cdkDropList
|
|
cdkDropListOrientation="vertical"
|
|
(cdkDropListDropped)="onDatasourceDrop($event)"
|
|
[cdkDropListDisabled]="disabled"
|
|
formArrayName="datasources">
|
|
<mat-list-item *ngFor="let datasourceControl of datasourcesFormArray().controls; let $index = index;"
|
|
class="tb-datasource-list-item tb-draggable" cdkDrag
|
|
[cdkDragDisabled]="disabled">
|
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center">
|
|
<div fxLayout="row" fxLayoutAlign="start center" style="width: 68px;">
|
|
<button *ngIf="!disabled" mat-icon-button color="primary"
|
|
class="handle"
|
|
style="min-width: 40px; margin: 0"
|
|
cdkDragHandle
|
|
matTooltip="{{ 'action.drag' | translate }}"
|
|
matTooltipPosition="above">
|
|
<mat-icon>drag_handle</mat-icon>
|
|
</button>
|
|
<span>{{$index + 1}}.</span>
|
|
</div>
|
|
<div class="mat-elevation-z4 tb-datasource-params" fxFlex>
|
|
<div fxFlex
|
|
fxLayout="row"
|
|
fxLayoutAlign="start center">
|
|
<section class="tb-datasource-section">
|
|
<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 fxFlex>
|
|
<mat-label translate>datasource.label</mat-label>
|
|
<input matInput
|
|
[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 === datasourceType.alarmCount ? datasourceControl.get('type').value : ''">
|
|
<tb-alarm-filter-config *ngIf="datasourceControl.get('type').value === datasourceType.alarmCount"
|
|
propagatedFilter="false"
|
|
style="height: 56px; margin-bottom: 8px;"
|
|
[formControl]="datasourceControl.get('alarmFilterConfig')"></tb-alarm-filter-config>
|
|
<tb-entity-alias-select
|
|
*ngIf="datasourceControl.get('type').value !== datasourceType.alarmCount"
|
|
[showLabel]="true"
|
|
[tbRequired]="true"
|
|
[aliasController]="aliasController"
|
|
[formControl]="datasourceControl.get('entityAliasId')"
|
|
[callbacks]="widgetConfigCallbacks">
|
|
</tb-entity-alias-select>
|
|
<tb-filter-select
|
|
*ngIf="datasourceControl.get('type').value !== datasourceType.alarmCount"
|
|
[showLabel]="true"
|
|
[aliasController]="aliasController"
|
|
[formControl]="datasourceControl.get('filterId')"
|
|
[callbacks]="widgetConfigCallbacks">
|
|
</tb-filter-select>
|
|
<mat-form-field *ngIf="[datasourceType.entityCount, datasourceType.alarmCount].includes(datasourceControl.get('type').value)"
|
|
fxFlex>
|
|
<input matInput
|
|
placeholder="{{ 'datasource.label' | translate }}"
|
|
[formControl]="datasourceControl.get('name')">
|
|
</mat-form-field>
|
|
</ng-template>
|
|
</section>
|
|
<section fxLayout="column" fxLayoutAlign="stretch" fxFlex>
|
|
<tb-data-keys class="tb-data-keys" fxFlex
|
|
[widgetType]="widgetType"
|
|
[datasourceType]="datasourceControl.get('type').value"
|
|
[maxDataKeys]="modelValue?.typeParameters?.maxDataKeys"
|
|
[optDataKeys]="dataKeysOptional(datasourceControl.value)"
|
|
[aliasController]="aliasController"
|
|
[datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
|
|
[dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective"
|
|
[dashboard]="dashboard"
|
|
[widget]="widget"
|
|
[callbacks]="widgetConfigCallbacks"
|
|
[entityAliasId]="datasourceControl.get('entityAliasId').value"
|
|
[formControl]="datasourceControl.get('dataKeys')">
|
|
</tb-data-keys>
|
|
<tb-data-keys *ngIf="widgetType === widgetTypes.timeseries &&
|
|
modelValue?.typeParameters?.hasAdditionalLatestDataKeys" class="tb-data-keys" fxFlex
|
|
[widgetType]="widgetTypes.latest"
|
|
[datasourceType]="datasourceControl.get('type').value"
|
|
[optDataKeys]="true"
|
|
[aliasController]="aliasController"
|
|
[datakeySettingsSchema]="modelValue?.latestDataKeySettingsSchema"
|
|
[dataKeySettingsDirective]="modelValue?.latestDataKeySettingsDirective"
|
|
[dashboard]="dashboard"
|
|
[widget]="widget"
|
|
[callbacks]="widgetConfigCallbacks"
|
|
[entityAliasId]="datasourceControl.get('entityAliasId').value"
|
|
[formControl]="datasourceControl.get('latestDataKeys')">
|
|
</tb-data-keys>
|
|
</section>
|
|
</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>
|
|
<tb-error class="tb-datasource-error" [error]="datasourceError[$index] ? datasourceError[$index] : ''"></tb-error>
|
|
</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 class="tb-datasource-params" [formGroup]="alarmSourceSettings">
|
|
<section class="tb-datasource-section">
|
|
<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"
|
|
[dataKeySettingsDirective]="modelValue?.dataKeySettingsDirective"
|
|
[dashboard]="dashboard"
|
|
[widget]="widget"
|
|
[callbacks]="widgetConfigCallbacks"
|
|
[entityAliasId]="alarmSourceSettings.get('entityAliasId').value"
|
|
formControlName="dataKeys">
|
|
</tb-data-keys>
|
|
</section>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
<mat-expansion-panel [formGroup]="widgetSettings">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title translate>widget-config.data-settings</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<ng-template matExpansionPanelContent>
|
|
<div fxLayout="row" *ngIf="widgetType !== widgetTypes.rpc &&
|
|
widgetType !== widgetTypes.alarm &&
|
|
modelValue?.isDataEnabled && !modelValue?.typeParameters?.singleEntity">
|
|
<mat-form-field fxFlex>
|
|
<mat-label translate>widget-config.data-page-size</mat-label>
|
|
<input matInput formControlName="pageSize" type="number" min="1" step="1">
|
|
</mat-form-field>
|
|
</div>
|
|
<div fxLayout.xs="column" fxLayout="row" 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 fxLayout="row">
|
|
<mat-form-field fxFlex>
|
|
<mat-label translate>widget-config.no-data-display-message</mat-label>
|
|
<input matInput formControlName="noDataDisplayMessage">
|
|
</mat-form-field>
|
|
</div>
|
|
</ng-template>
|
|
</mat-expansion-panel>
|
|
</mat-accordion>
|
|
</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">
|
|
<legend class="group-title" translate>widget-config.title</legend>
|
|
<mat-slide-toggle class="mat-slide" formControlName="showTitle">
|
|
{{ 'widget-config.display-title' | translate }}
|
|
</mat-slide-toggle>
|
|
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="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" fxLayoutGap.gt-xs="8px" style="margin: 0">
|
|
<legend class="group-title" translate>widget-config.title-icon</legend>
|
|
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon">
|
|
{{ 'widget-config.display-icon' | translate }}
|
|
</mat-slide-toggle>
|
|
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="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">
|
|
<legend class="group-title" translate>widget-config.widget-style</legend>
|
|
<div fxLayout="column" fxLayout.gt-md="row wrap" fxFlex fxLayoutGap.gt-xs="8px" class="tb-widget-style">
|
|
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
|
|
<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" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
|
|
<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 class="slide-block" formControlName="dropShadow">
|
|
{{ 'widget-config.drop-shadow' | translate }}
|
|
</mat-slide-toggle>
|
|
<mat-slide-toggle class="slide-block" 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>
|
|
<tb-css
|
|
label="{{ 'widget-config.widget-css' | translate }}"
|
|
formControlName="widgetCss"
|
|
></tb-css>
|
|
</ng-template>
|
|
</mat-expansion-panel>
|
|
</fieldset>
|
|
<fieldset class="fields-group fields-group-slider" *ngIf="showLegendFieldset">
|
|
<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">
|
|
<legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
|
|
<mat-expansion-panel class="tb-settings">
|
|
<mat-expansion-panel-header style="height: fit-content;">
|
|
<mat-panel-title fxLayout.xs="column" fxLayoutAlign.xs="center start" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex="70">
|
|
<mat-slide-toggle formControlName="mobileHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
|
|
{{ 'widget-config.mobile-hide' | translate }}
|
|
</mat-slide-toggle>
|
|
<mat-slide-toggle formControlName="desktopHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
|
|
{{ 'widget-config.desktop-hide' | translate }}
|
|
</mat-slide-toggle>
|
|
</mat-panel-title>
|
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate fxFlex="30">
|
|
widget-config.advanced-settings
|
|
</mat-panel-description>
|
|
</mat-expansion-panel-header>
|
|
<ng-template matExpansionPanelContent>
|
|
<div fxLayout.xs="column" fxLayout="row" fxLayoutGap.gt-xs="8px" fxFlex>
|
|
<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" 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-widget-settings
|
|
[aliasController]="aliasController"
|
|
[dashboard]="dashboard"
|
|
[widget]="widget"
|
|
formControlName="settings">
|
|
</tb-widget-settings>
|
|
</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>
|