|
|
@ -16,12 +16,12 @@ |
|
|
|
|
|
|
|
|
--> |
|
|
--> |
|
|
<mat-tab-group [ngClass]="{'tb-headless': (widgetType === widgetTypes.static && !displayAdvanced())}" |
|
|
<mat-tab-group [ngClass]="{'tb-headless': (widgetType === widgetTypes.static && !displayAdvanced())}" |
|
|
fxFlex class="tb-widget-config tb-absolute-fill" [(selectedIndex)]="selectedTab"> |
|
|
class="tb-widget-config tb-absolute-fill" [(selectedIndex)]="selectedTab"> |
|
|
<mat-tab label="{{ 'widget-config.data' | translate }}" [fxShow]="widgetType !== widgetTypes.static"> |
|
|
<mat-tab label="{{ 'widget-config.data' | translate }}" [fxShow]="widgetType !== widgetTypes.static"> |
|
|
<div [formGroup]="dataSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px"> |
|
|
<div [formGroup]="dataSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px"> |
|
|
<div *ngIf="widgetType === widgetTypes.timeseries || widgetType === widgetTypes.alarm" |
|
|
<div *ngIf="widgetType === widgetTypes.timeseries || widgetType === widgetTypes.alarm" fxFlex="100" |
|
|
fxLayout="column" fxLayoutGap="8px" fxLayoutAlign="center" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center"> |
|
|
fxLayout.xs="column" fxLayoutGap="8px" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"> |
|
|
<div fxLayout="column" fxLayoutGap="8px" fxFlex> |
|
|
<div fxLayout="column" fxLayoutGap="8px" fxFlex.gt-xs> |
|
|
<mat-checkbox formControlName="useDashboardTimewindow"> |
|
|
<mat-checkbox formControlName="useDashboardTimewindow"> |
|
|
{{ 'widget-config.use-dashboard-timewindow' | translate }} |
|
|
{{ 'widget-config.use-dashboard-timewindow' | translate }} |
|
|
</mat-checkbox> |
|
|
</mat-checkbox> |
|
|
@ -29,8 +29,10 @@ |
|
|
{{ 'widget-config.display-timewindow' | translate }} |
|
|
{{ 'widget-config.display-timewindow' | translate }} |
|
|
</mat-checkbox> |
|
|
</mat-checkbox> |
|
|
</div> |
|
|
</div> |
|
|
<section fxFlex fxLayout="row" fxLayoutAlign="start center" style="margin-bottom: 16px;"> |
|
|
<section fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-lg="column" fxLayoutAlign.lt-lg="center start" |
|
|
<span [ngClass]="{'tb-disabled-label': dataSettings.get('useDashboardTimewindow').value}" translate style="padding-right: 8px;">widget-config.timewindow</span> |
|
|
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" |
|
|
<tb-timewindow asButton="true" |
|
|
isEdit="true" |
|
|
isEdit="true" |
|
|
aggregation="{{ widgetType === widgetTypes.timeseries }}" |
|
|
aggregation="{{ widgetType === widgetTypes.timeseries }}" |
|
|
@ -38,10 +40,11 @@ |
|
|
</section> |
|
|
</section> |
|
|
</div> |
|
|
</div> |
|
|
<div *ngIf="widgetType === widgetTypes.alarm" fxLayout="column" fxLayoutAlign="center"> |
|
|
<div *ngIf="widgetType === widgetTypes.alarm" fxLayout="column" fxLayoutAlign="center"> |
|
|
<div fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" fxLayoutGap="8px"> |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" |
|
|
|
|
|
fxLayoutGap="8px"> |
|
|
<mat-form-field fxFlex class="mat-block"> |
|
|
<mat-form-field fxFlex class="mat-block"> |
|
|
<mat-label translate>alarm.alarm-status</mat-label> |
|
|
<mat-label translate>alarm.alarm-status</mat-label> |
|
|
<mat-select matInput formControlName="alarmSearchStatus"> |
|
|
<mat-select formControlName="alarmSearchStatus"> |
|
|
<mat-option *ngFor="let searchStatus of alarmSearchStatuses" [value]="searchStatus"> |
|
|
<mat-option *ngFor="let searchStatus of alarmSearchStatuses" [value]="searchStatus"> |
|
|
{{ ('alarm.search-status.' + searchStatus) | translate }} |
|
|
{{ ('alarm.search-status.' + searchStatus) | translate }} |
|
|
</mat-option> |
|
|
</mat-option> |
|
|
@ -61,7 +64,8 @@ |
|
|
</mat-error> |
|
|
</mat-error> |
|
|
</mat-form-field> |
|
|
</mat-form-field> |
|
|
</div> |
|
|
</div> |
|
|
<div fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" fxLayoutGap="8px"> |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center" |
|
|
|
|
|
fxLayoutGap="8px"> |
|
|
<mat-form-field fxFlex class="mat-block"> |
|
|
<mat-form-field fxFlex class="mat-block"> |
|
|
<mat-label translate>alarm.max-count-load</mat-label> |
|
|
<mat-label translate>alarm.max-count-load</mat-label> |
|
|
<input matInput required |
|
|
<input matInput required |
|
|
@ -100,7 +104,7 @@ |
|
|
<mat-panel-title fxLayout="column"> |
|
|
<mat-panel-title fxLayout="column"> |
|
|
<div class="tb-panel-title" translate>widget-config.datasources</div> |
|
|
<div class="tb-panel-title" translate>widget-config.datasources</div> |
|
|
<div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1" |
|
|
<div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1" |
|
|
class="tb-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div> |
|
|
class="tb-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div> |
|
|
</mat-panel-title> |
|
|
</mat-panel-title> |
|
|
</mat-expansion-panel-header> |
|
|
</mat-expansion-panel-header> |
|
|
<div *ngIf="datasourcesFormArray().length === 0; else datasourcesTemplate"> |
|
|
<div *ngIf="datasourcesFormArray().length === 0; else datasourcesTemplate"> |
|
|
@ -133,7 +137,7 @@ |
|
|
fxLayout.gt-sm="row" |
|
|
fxLayout.gt-sm="row" |
|
|
fxLayoutAlign.gt-sm="start center"> |
|
|
fxLayoutAlign.gt-sm="start center"> |
|
|
<mat-form-field class="tb-datasource-type"> |
|
|
<mat-form-field class="tb-datasource-type"> |
|
|
<mat-select matInput formControlName="type"> |
|
|
<mat-select formControlName="type"> |
|
|
<mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType"> |
|
|
<mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType"> |
|
|
{{ datasourceTypesTranslations.get(datasourceType) | translate }} |
|
|
{{ datasourceTypesTranslations.get(datasourceType) | translate }} |
|
|
</mat-option> |
|
|
</mat-option> |
|
|
@ -172,7 +176,7 @@ |
|
|
</section> |
|
|
</section> |
|
|
<button [disabled]="isLoading$ | async" |
|
|
<button [disabled]="isLoading$ | async" |
|
|
type="button" |
|
|
type="button" |
|
|
mat-button mat-icon-button color="primary" |
|
|
mat-icon-button color="primary" |
|
|
style="min-width: 40px;" |
|
|
style="min-width: 40px;" |
|
|
(click)="removeDatasource($index)" |
|
|
(click)="removeDatasource($index)" |
|
|
matTooltip="{{ 'widget-config.remove-datasource' | translate }}" |
|
|
matTooltip="{{ 'widget-config.remove-datasource' | translate }}" |
|
|
@ -186,7 +190,7 @@ |
|
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> |
|
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> |
|
|
<button [disabled]="isLoading$ | async" |
|
|
<button [disabled]="isLoading$ | async" |
|
|
type="button" |
|
|
type="button" |
|
|
mat-button mat-raised-button color="primary" |
|
|
mat-raised-button color="primary" |
|
|
[fxShow]="modelValue?.typeParameters && |
|
|
[fxShow]="modelValue?.typeParameters && |
|
|
(modelValue?.typeParameters.maxDatasources == -1 || datasourcesFormArray().controls.length < modelValue?.typeParameters.maxDatasources)" |
|
|
(modelValue?.typeParameters.maxDatasources == -1 || datasourcesFormArray().controls.length < modelValue?.typeParameters.maxDatasources)" |
|
|
(click)="addDatasource()" |
|
|
(click)="addDatasource()" |
|
|
@ -228,7 +232,7 @@ |
|
|
fxLayout.gt-sm="row" |
|
|
fxLayout.gt-sm="row" |
|
|
fxLayoutAlign.gt-sm="start center"> |
|
|
fxLayoutAlign.gt-sm="start center"> |
|
|
<mat-form-field class="tb-datasource-type"> |
|
|
<mat-form-field class="tb-datasource-type"> |
|
|
<mat-select matInput formControlName="type"> |
|
|
<mat-select formControlName="type"> |
|
|
<mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType"> |
|
|
<mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType"> |
|
|
{{ datasourceTypesTranslations.get(datasourceType) | translate }} |
|
|
{{ datasourceTypesTranslations.get(datasourceType) | translate }} |
|
|
</mat-option> |
|
|
</mat-option> |
|
|
@ -268,15 +272,20 @@ |
|
|
</div> |
|
|
</div> |
|
|
</mat-tab> |
|
|
</mat-tab> |
|
|
<mat-tab label="{{ 'widget-config.settings' | translate }}"> |
|
|
<mat-tab label="{{ 'widget-config.settings' | translate }}"> |
|
|
<div class="mat-content mat-padding" |
|
|
<div class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px"> |
|
|
fxLayout="column" fxLayoutGap="8px"> |
|
|
|
|
|
<div [formGroup]="widgetSettings" fxLayout="column" fxLayoutGap="8px"> |
|
|
<div [formGroup]="widgetSettings" fxLayout="column" fxLayoutGap="8px"> |
|
|
<span translate>widget-config.general-settings</span> |
|
|
<span translate>widget-config.general-settings</span> |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center"> |
|
|
<div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"> |
|
|
<mat-form-field fxFlex class="mat-block"> |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxFlex.sm="40%" fxFlex.gt-sm="30%"> |
|
|
<mat-label translate>widget-config.title</mat-label> |
|
|
<mat-form-field fxFlex class="mat-block"> |
|
|
<input matInput formControlName="title"> |
|
|
<mat-label translate>widget-config.title</mat-label> |
|
|
</mat-form-field> |
|
|
<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"> |
|
|
<div fxFlex [fxShow]="widgetSettings.get('showTitle').value"> |
|
|
<tb-json-object-edit |
|
|
<tb-json-object-edit |
|
|
[editorStyle]="{minHeight: '100px'}" |
|
|
[editorStyle]="{minHeight: '100px'}" |
|
|
@ -286,46 +295,40 @@ |
|
|
></tb-json-object-edit> |
|
|
></tb-json-object-edit> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-md="row" fxLayoutAlign.gt-md="start center" fxFlex="100%" |
|
|
fxLayoutGap="8px"> |
|
|
fxLayoutGap="8px"> |
|
|
<div fxLayout="row" fxFlex> |
|
|
<div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center" |
|
|
<mat-checkbox formControlName="showTitleIcon"> |
|
|
fxLayoutGap="8px" fxFlex.gt-md> |
|
|
|
|
|
<mat-checkbox fxFlex formControlName="showTitleIcon"> |
|
|
{{ 'widget-config.display-icon' | translate }} |
|
|
{{ 'widget-config.display-icon' | translate }} |
|
|
</mat-checkbox> |
|
|
</mat-checkbox> |
|
|
</div> |
|
|
<tb-material-icon-select fxFlex |
|
|
<div fxFlex> |
|
|
|
|
|
<tb-material-icon-select |
|
|
|
|
|
formControlName="titleIcon"> |
|
|
formControlName="titleIcon"> |
|
|
</tb-material-icon-select> |
|
|
</tb-material-icon-select> |
|
|
</div> |
|
|
</div> |
|
|
<tb-color-input fxFlex |
|
|
<div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center" |
|
|
label="{{'widget-config.icon-color' | translate}}" |
|
|
fxLayoutGap="8px" fxFlex.gt-md> |
|
|
icon="format_color_fill" |
|
|
<tb-color-input fxFlex |
|
|
openOnInput |
|
|
label="{{'widget-config.icon-color' | translate}}" |
|
|
formControlName="iconColor"> |
|
|
icon="format_color_fill" |
|
|
</tb-color-input> |
|
|
openOnInput |
|
|
<mat-form-field fxFlex> |
|
|
formControlName="iconColor"> |
|
|
<mat-label translate>widget-config.icon-size</mat-label> |
|
|
</tb-color-input> |
|
|
<input matInput formControlName="iconSize"> |
|
|
<mat-form-field fxFlex> |
|
|
</mat-form-field> |
|
|
<mat-label translate>widget-config.icon-size</mat-label> |
|
|
<mat-form-field fxFlex> |
|
|
<input matInput formControlName="iconSize"> |
|
|
<mat-label translate>widget-config.title-tooltip</mat-label> |
|
|
</mat-form-field> |
|
|
<input matInput formControlName="titleTooltip"> |
|
|
</div> |
|
|
</mat-form-field> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" |
|
|
<div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center" |
|
|
fxLayoutGap="8px"> |
|
|
fxLayoutGap="8px"> |
|
|
<div fxLayout="row"> |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="8px" fxFlex.sm="40%" fxFlex.gt-sm="30%"> |
|
|
<mat-checkbox formControlName="showTitle"> |
|
|
<mat-checkbox formControlName="showTitle"> |
|
|
{{ 'widget-config.display-title' | translate }} |
|
|
{{ 'widget-config.display-title' | translate }} |
|
|
</mat-checkbox> |
|
|
</mat-checkbox> |
|
|
</div> |
|
|
|
|
|
<div fxLayout="row"> |
|
|
|
|
|
<mat-checkbox formControlName="dropShadow"> |
|
|
<mat-checkbox formControlName="dropShadow"> |
|
|
{{ 'widget-config.drop-shadow' | translate }} |
|
|
{{ 'widget-config.drop-shadow' | translate }} |
|
|
</mat-checkbox> |
|
|
</mat-checkbox> |
|
|
</div> |
|
|
|
|
|
<div fxLayout="row"> |
|
|
|
|
|
<mat-checkbox formControlName="enableFullscreen"> |
|
|
<mat-checkbox formControlName="enableFullscreen"> |
|
|
{{ 'widget-config.enable-fullscreen' | translate }} |
|
|
{{ 'widget-config.enable-fullscreen' | translate }} |
|
|
</mat-checkbox> |
|
|
</mat-checkbox> |
|
|
@ -339,30 +342,36 @@ |
|
|
></tb-json-object-edit> |
|
|
></tb-json-object-edit> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-md="row" fxLayoutAlign.gt-md="start center" |
|
|
fxLayoutGap="8px"> |
|
|
fxFlex="100%" fxLayoutGap="8px"> |
|
|
<tb-color-input fxFlex |
|
|
<div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center" |
|
|
label="{{'widget-config.background-color' | translate}}" |
|
|
fxLayoutGap="8px" fxFlex.gt-md> |
|
|
icon="format_color_fill" |
|
|
<tb-color-input fxFlex |
|
|
openOnInput |
|
|
label="{{'widget-config.background-color' | translate}}" |
|
|
formControlName="backgroundColor"> |
|
|
icon="format_color_fill" |
|
|
</tb-color-input> |
|
|
openOnInput |
|
|
<tb-color-input fxFlex |
|
|
formControlName="backgroundColor"> |
|
|
label="{{'widget-config.text-color' | translate}}" |
|
|
</tb-color-input> |
|
|
icon="format_color_fill" |
|
|
<tb-color-input fxFlex |
|
|
openOnInput |
|
|
label="{{'widget-config.text-color' | translate}}" |
|
|
formControlName="color"> |
|
|
icon="format_color_fill" |
|
|
</tb-color-input> |
|
|
openOnInput |
|
|
<mat-form-field fxFlex> |
|
|
formControlName="color"> |
|
|
<mat-label translate>widget-config.padding</mat-label> |
|
|
</tb-color-input> |
|
|
<input matInput formControlName="padding"> |
|
|
</div> |
|
|
</mat-form-field> |
|
|
<div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center" |
|
|
<mat-form-field fxFlex> |
|
|
fxLayoutGap="8px" fxFlex.gt-md> |
|
|
<mat-label translate>widget-config.margin</mat-label> |
|
|
<mat-form-field fxFlex> |
|
|
<input matInput formControlName="margin"> |
|
|
<mat-label translate>widget-config.padding</mat-label> |
|
|
</mat-form-field> |
|
|
<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> |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" |
|
|
<div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center" |
|
|
fxLayoutGap="8px"> |
|
|
fxLayoutGap="8px"> |
|
|
<mat-form-field fxFlex> |
|
|
<mat-form-field fxFlex> |
|
|
<mat-label translate>widget-config.units</mat-label> |
|
|
<mat-label translate>widget-config.units</mat-label> |
|
|
@ -373,14 +382,13 @@ |
|
|
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1"> |
|
|
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1"> |
|
|
</mat-form-field> |
|
|
</mat-form-field> |
|
|
</div> |
|
|
</div> |
|
|
<div [fxShow]="widgetType === widgetTypes.timeseries || |
|
|
<div [fxShow]="widgetType === widgetTypes.timeseries || widgetType === widgetTypes.latest" |
|
|
widgetType === widgetTypes.latest" |
|
|
fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center" |
|
|
fxLayout="column" fxLayoutAlign="center" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" |
|
|
fxLayoutGap="8px" fxFlex="100%"> |
|
|
fxLayoutGap="8px"> |
|
|
<mat-checkbox fxFlex.gt-xs formControlName="showLegend"> |
|
|
<mat-checkbox fxFlex formControlName="showLegend"> |
|
|
|
|
|
{{ 'widget-config.display-legend' | translate }} |
|
|
{{ 'widget-config.display-legend' | translate }} |
|
|
</mat-checkbox> |
|
|
</mat-checkbox> |
|
|
<section fxFlex fxLayout="row" fxLayoutAlign="start center" style="margin-bottom: 16px;"> |
|
|
<section fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" style="margin-bottom: 16px;"> |
|
|
<tb-legend-config formControlName="legendConfig"> |
|
|
<tb-legend-config formControlName="legendConfig"> |
|
|
</tb-legend-config> |
|
|
</tb-legend-config> |
|
|
</section> |
|
|
</section> |
|
|
@ -388,7 +396,7 @@ |
|
|
</div> |
|
|
</div> |
|
|
<div [formGroup]="layoutSettings" fxLayout="column" fxLayoutGap="8px"> |
|
|
<div [formGroup]="layoutSettings" fxLayout="column" fxLayoutGap="8px"> |
|
|
<span translate>widget-config.mobile-mode-settings</span> |
|
|
<span translate>widget-config.mobile-mode-settings</span> |
|
|
<div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" |
|
|
<div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center" |
|
|
fxLayoutGap="8px"> |
|
|
fxLayoutGap="8px"> |
|
|
<mat-form-field fxFlex> |
|
|
<mat-form-field fxFlex> |
|
|
<mat-label translate>widget-config.order</mat-label> |
|
|
<mat-label translate>widget-config.order</mat-label> |
|
|
|
Adsumus
7 years ago