302 lines
15 KiB
HTML
302 lines
15 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.
|
|
|
|
-->
|
|
<div class="tb-widget-config tb-absolute-fill">
|
|
<div class="tb-widget-config-header" *ngIf="!hideHeader">
|
|
<tb-toggle-header *ngIf="!hideToggleHeader && widgetConfigMode === widgetConfigModes.advanced" (valueChange)="selectedOption = $event" ignoreMdLgSize="true"
|
|
appearance="fill" [options]="headerOptions" [value]="selectedOption" name="widgetConfigHeader" useSelectOnMdLg="false">
|
|
</tb-toggle-header>
|
|
<ng-content select=".tb-widget-config-header-prefix"></ng-content>
|
|
<ng-content select=".tb-widget-config-header-suffix"></ng-content>
|
|
</div>
|
|
<div *ngIf="widgetConfigMode === widgetConfigModes.advanced; else basicMode" class="tb-widget-config-content">
|
|
<div *ngIf="widgetType !== widgetTypes.static" [fxShow]="selectedOption === 'data'" class="mat-content">
|
|
<ng-container *ngTemplateOutlet="data"></ng-container>
|
|
</div>
|
|
<div [fxShow]="selectedOption === 'appearance'" class="mat-content">
|
|
<ng-container *ngTemplateOutlet="appearance"></ng-container>
|
|
</div>
|
|
<div [fxShow]="selectedOption === 'card'" [formGroup]="widgetSettings" class="mat-content">
|
|
<div class="tb-widget-config-panel">
|
|
<div class="tb-widget-config-panel-title" translate>widget-config.card-title</div>
|
|
<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>
|
|
<div class="tb-widget-config-row space-between same-padding">
|
|
<mat-slide-toggle class="mat-slide" formControlName="showTitleIcon">
|
|
{{ 'widget-config.display-icon' | translate }}
|
|
</mat-slide-toggle>
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
|
|
<tb-material-icon-select asBoxInput
|
|
[color]="widgetSettings.get('iconColor').value"
|
|
formControlName="titleIcon">
|
|
</tb-material-icon-select>
|
|
<mat-form-field appearance="outline" subscriptSizing="dynamic" style="width: 60px;">
|
|
<input matInput formControlName="iconSize">
|
|
</mat-form-field>
|
|
<mat-divider vertical></mat-divider>
|
|
<tb-color-input asBoxInput
|
|
formControlName="iconColor">
|
|
</tb-color-input>
|
|
</div>
|
|
</div>
|
|
<mat-expansion-panel class="tb-settings">
|
|
<mat-expansion-panel-header expandedHeight="48px">
|
|
<mat-panel-description fxLayoutAlign="start" translate>
|
|
widget-config.advanced-title-style
|
|
</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>
|
|
</div>
|
|
<div class="tb-widget-config-panel">
|
|
<div class="tb-widget-config-panel-title" translate>widget-config.card-style</div>
|
|
<div class="tb-widget-config-row space-between same-padding">
|
|
<div>{{ 'widget-config.text' | translate }}</div>
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
|
|
<mat-divider vertical></mat-divider>
|
|
<tb-color-input asBoxInput
|
|
formControlName="color">
|
|
</tb-color-input>
|
|
</div>
|
|
</div>
|
|
<div class="tb-widget-config-row space-between same-padding">
|
|
<div>{{ 'widget-config.background' | translate }}</div>
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px">
|
|
<mat-divider vertical></mat-divider>
|
|
<tb-color-input asBoxInput
|
|
formControlName="backgroundColor">
|
|
</tb-color-input>
|
|
</div>
|
|
</div>
|
|
<div class="tb-widget-config-row space-between">
|
|
<div>{{ 'widget-config.padding' | translate }}</div>
|
|
<mat-form-field appearance="outline" class="center" subscriptSizing="dynamic">
|
|
<input matInput formControlName="padding" placeholder="{{ 'widget-config.set' | translate }}">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="tb-widget-config-row space-between">
|
|
<div>{{ 'widget-config.margin' | translate }}</div>
|
|
<mat-form-field appearance="outline" class="center" subscriptSizing="dynamic">
|
|
<input matInput formControlName="margin" placeholder="{{ 'widget-config.set' | translate }}">
|
|
</mat-form-field>
|
|
</div>
|
|
<mat-slide-toggle class="mat-slide slide-block" formControlName="dropShadow">
|
|
{{ 'widget-config.drop-shadow' | translate }}
|
|
</mat-slide-toggle>
|
|
<mat-expansion-panel class="tb-settings">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-description fxLayoutAlign="start" translate>
|
|
widget-config.advanced-widget-style
|
|
</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>
|
|
</div>
|
|
<div class="tb-widget-config-panel">
|
|
<div class="tb-widget-config-panel-title" translate>widget-config.card-buttons</div>
|
|
<mat-slide-toggle class="mat-slide slide-block" formControlName="enableFullscreen">
|
|
{{ 'widget-config.enable-fullscreen' | translate }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
</div>
|
|
<div [fxShow]="selectedOption === 'actions'" [formGroup]="actionsSettings" class="mat-content" style="height: 100%;">
|
|
<div class="tb-widget-config-panel" style="height: 100%;">
|
|
<tb-manage-widget-actions
|
|
[callbacks]="widgetConfigCallbacks"
|
|
[widgetType] = "modelValue.widgetType"
|
|
[actionSources]="modelValue.actionSources"
|
|
formControlName="actions">
|
|
</tb-manage-widget-actions>
|
|
</div>
|
|
</div>
|
|
<div [fxShow]="selectedOption === 'mobile'" [formGroup]="layoutSettings" class="mat-content">
|
|
<div class="tb-widget-config-panel">
|
|
<mat-slide-toggle class="mat-slide" formControlName="mobileHide">
|
|
{{ 'widget-config.mobile-hide' | translate }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<div class="tb-widget-config-panel">
|
|
<mat-slide-toggle class="mat-slide" formControlName="desktopHide">
|
|
{{ 'widget-config.desktop-hide' | translate }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<div class="tb-widget-config-panel">
|
|
<div class="tb-widget-config-row space-between">
|
|
<div translate>widget-config.order</div>
|
|
<mat-form-field appearance="outline" class="number center" subscriptSizing="dynamic">
|
|
<input matInput formControlName="mobileOrder" type="number" step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="tb-widget-config-row space-between">
|
|
<div translate>widget-config.height</div>
|
|
<mat-form-field appearance="outline" class="number center" subscriptSizing="dynamic">
|
|
<input matInput formControlName="mobileHeight" type="number" min="1" step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ng-template #basicMode>
|
|
<div class="tb-widget-config-content">
|
|
<div class="mat-content" *ngIf="hasBasicModeDirective; else basicModeContent">
|
|
<ng-container #basicModeContainer></ng-container>
|
|
<div class="tb-basic-mode-directive-error" *ngIf="basicModeDirectiveError">{{basicModeDirectiveError}}</div>
|
|
</div>
|
|
<ng-template #basicModeContent>
|
|
<div class="mat-content">
|
|
<ng-container *ngTemplateOutlet="data"></ng-container>
|
|
<ng-container *ngTemplateOutlet="appearance"></ng-container>
|
|
<ng-container [formGroup]="actionsSettings">
|
|
<tb-widget-actions-panel
|
|
formControlName="actions">
|
|
</tb-widget-actions-panel>
|
|
</ng-container>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #data>
|
|
<div *ngIf="displayTimewindowConfig" [formGroup]="dataSettings" class="tb-widget-config-panel">
|
|
<div fxLayout="row" fxLayoutAlign="space-between center">
|
|
<div class="tb-widget-config-panel-title" translate>timewindow.timewindow</div>
|
|
<tb-toggle-header (valueChange)="dataSettings.get('useDashboardTimewindow').patchValue($event)" ignoreMdLgSize="true"
|
|
[options]="[
|
|
{ name: translate.instant('widget-config.use-dashboard-timewindow'), value: true},
|
|
{ name: translate.instant('widget-config.use-widget-timewindow'), value: false}
|
|
]"
|
|
[value]="dataSettings.get('useDashboardTimewindow').value" name="useDashboardTimewindow" useSelectOnMdLg="false">
|
|
</tb-toggle-header>
|
|
</div>
|
|
<div class="tb-widget-config-row">
|
|
<tb-timewindow asButton="true"
|
|
strokedButton
|
|
isEdit="true"
|
|
alwaysDisplayTypePrefix
|
|
[historyOnly]="onlyHistoryTimewindow()"
|
|
quickIntervalOnly="{{ widgetType === widgetTypes.latest }}"
|
|
aggregation="{{ widgetType === widgetTypes.timeseries }}"
|
|
formControlName="timewindow"></tb-timewindow>
|
|
<mat-slide-toggle class="mat-slide" formControlName="displayTimewindow">
|
|
{{ 'widget-config.display-timewindow' | translate }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="widgetType === widgetTypes.alarm" [formGroup]="dataSettings" class="tb-widget-config-panel" fxLayout="column" fxLayoutAlign="center">
|
|
<tb-alarm-filter-config buttonMode="false" formControlName="alarmFilterConfig"></tb-alarm-filter-config>
|
|
</div>
|
|
<div *ngIf="widgetType !== widgetTypes.rpc &&
|
|
widgetType !== widgetTypes.alarm &&
|
|
modelValue?.isDataEnabled"
|
|
[formGroup]="dataSettings">
|
|
<tb-datasources
|
|
[configMode]="widgetConfigMode"
|
|
formControlName="datasources">
|
|
</tb-datasources>
|
|
</div>
|
|
<div class="tb-widget-config-panel" *ngIf="widgetType === widgetTypes.rpc &&
|
|
modelValue?.isDataEnabled">
|
|
<div class="tb-widget-config-panel-title" translate>widget-config.target-device</div>
|
|
<div [formGroup]="targetDeviceSettings">
|
|
<tb-entity-alias-select fxFlex
|
|
[tbRequired]="!widgetEditMode"
|
|
[aliasController]="aliasController"
|
|
[allowedEntityTypes]="[entityTypes.DEVICE]"
|
|
[callbacks]="widgetConfigCallbacks"
|
|
formControlName="targetDeviceAliasId">
|
|
</tb-entity-alias-select>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="widgetType === widgetTypes.alarm && modelValue?.isDataEnabled"
|
|
[formGroup]="dataSettings" class="tb-widget-config-panel" >
|
|
<div class="tb-widget-config-panel-title" translate>widget-config.alarm-source</div>
|
|
<tb-datasource
|
|
formControlName="alarmSource">
|
|
</tb-datasource>
|
|
</div>
|
|
<div *ngIf="displayLimits" class="tb-widget-config-panel" [formGroup]="widgetSettings">
|
|
<div class="tb-widget-config-panel-title" translate>widget-config.limits</div>
|
|
<div class="tb-widget-config-row space-between">
|
|
<div translate>widget-config.data-page-size</div>
|
|
<mat-form-field appearance="outline" class="center number" subscriptSizing="dynamic">
|
|
<input matInput formControlName="pageSize" type="number" min="1" step="1">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
<ng-template #appearance>
|
|
<div *ngIf="displayAppearanceDataSettings" class="tb-widget-config-panel" [formGroup]="widgetSettings">
|
|
<div class="tb-widget-config-panel-title" translate>widget-config.data-settings</div>
|
|
<div *ngIf="displayUnitsConfig" class="tb-widget-config-row space-between">
|
|
<div translate>widget-config.units</div>
|
|
<mat-form-field appearance="outline" class="center" subscriptSizing="dynamic">
|
|
<input matInput formControlName="units" placeholder="{{ 'widget-config.set' | translate }}">
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="displayUnitsConfig" class="tb-widget-config-row space-between">
|
|
<div translate>widget-config.decimals</div>
|
|
<mat-form-field appearance="outline" class="center number" subscriptSizing="dynamic">
|
|
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
|
</mat-form-field>
|
|
</div>
|
|
<div *ngIf="displayNoDataDisplayMessageConfig" class="tb-widget-config-row">
|
|
<div translate>widget-config.no-data-display-message</div>
|
|
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
|
|
<input matInput formControlName="noDataDisplayMessage" placeholder="{{ 'widget-config.set-message' | translate }}">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="displayAdvancedAppearance" style="height: 100%;" [formGroup]="advancedSettings">
|
|
<tb-widget-settings
|
|
[aliasController]="aliasController"
|
|
[dashboard]="dashboard"
|
|
[widget]="widget"
|
|
formControlName="settings">
|
|
</tb-widget-settings>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
|