|
|
@ -15,10 +15,12 @@ |
|
|
limitations under the License. |
|
|
limitations under the License. |
|
|
|
|
|
|
|
|
--> |
|
|
--> |
|
|
<mat-tab-group class="tb-datakey-config" [ngClass]="{'tb-headless': !displayAdvanced}"> |
|
|
<div class="tb-datakey-config" *ngIf="dataKeyConfigMode === dataKeyConfigModes.general; else advanced" |
|
|
<mat-tab [formGroup]="dataKeyFormGroup" label="{{ 'datakey.settings' | translate }}"> |
|
|
[formGroup]="dataKeyFormGroup"> |
|
|
<div class="mat-padding settings" fxLayout="column"> |
|
|
<div class="mat-padding" fxLayout="column" style="gap: 16px;"> |
|
|
<mat-form-field class="mat-block" *ngIf="modelValue.type !== dataKeyTypes.function"> |
|
|
<div class="tb-widget-config-panel"> |
|
|
|
|
|
<div class="tb-widget-config-panel-title" translate>datakey.general</div> |
|
|
|
|
|
<mat-form-field *ngIf="modelValue.type !== dataKeyTypes.function" subscriptSizing="dynamic"> |
|
|
<mat-label>{{ 'entity.key' | translate }}</mat-label> |
|
|
<mat-label>{{ 'entity.key' | translate }}</mat-label> |
|
|
<input matInput type="text" placeholder="{{ 'entity.key-name' | translate }}" |
|
|
<input matInput type="text" placeholder="{{ 'entity.key-name' | translate }}" |
|
|
#keyInput |
|
|
#keyInput |
|
|
@ -39,31 +41,35 @@ |
|
|
</mat-option> |
|
|
</mat-option> |
|
|
</mat-autocomplete> |
|
|
</mat-autocomplete> |
|
|
</mat-form-field> |
|
|
</mat-form-field> |
|
|
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start center" fxLayoutAlign.xs fxLayoutGap="8px"> |
|
|
<mat-form-field *ngIf="!hideDataKeyLabel" subscriptSizing="dynamic"> |
|
|
<mat-form-field *ngIf="!hideDataKeyLabel" fxFlex class="mat-block"> |
|
|
<mat-label translate>datakey.label</mat-label> |
|
|
<mat-label translate>datakey.label</mat-label> |
|
|
<input matInput formControlName="label" required> |
|
|
<input matInput formControlName="label" required> |
|
|
</mat-form-field> |
|
|
</mat-form-field> |
|
|
<ng-container *ngIf="modelValue.type !== dataKeyTypes.alarm"> |
|
|
<tb-color-input *ngIf="!hideDataKeyColor" fxFlex |
|
|
<div class="tb-widget-config-row space-between" *ngIf="!hideDataKeyUnits"> |
|
|
required |
|
|
<div translate>widget-config.units-short</div> |
|
|
label="{{'datakey.color' | translate}}" |
|
|
<tb-widget-units |
|
|
icon="format_color_fill" |
|
|
formControlName="units"> |
|
|
openOnInput |
|
|
</tb-widget-units> |
|
|
formControlName="color"> |
|
|
</div> |
|
|
</tb-color-input> |
|
|
<div class="tb-widget-config-row space-between" *ngIf="!hideDataKeyDecimals"> |
|
|
</div> |
|
|
<div translate>widget-config.decimals-short</div> |
|
|
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="start center" fxLayoutAlign.xs fxLayoutGap="8px" *ngIf="modelValue.type !== dataKeyTypes.alarm"> |
|
|
<mat-form-field appearance="outline" class="center number" subscriptSizing="dynamic"> |
|
|
<mat-form-field *ngIf="!hideDataKeyUnits" fxFlex> |
|
|
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
|
|
<mat-label translate>datakey.units</mat-label> |
|
|
</mat-form-field> |
|
|
<input matInput formControlName="units"> |
|
|
</div> |
|
|
</mat-form-field> |
|
|
</ng-container> |
|
|
<mat-form-field *ngIf="!hideDataKeyDecimals" fxFlex> |
|
|
<div class="tb-widget-config-row space-between same-padding" *ngIf="!hideDataKeyColor"> |
|
|
<mat-label translate>datakey.decimals</mat-label> |
|
|
<div>{{ 'datakey.color' | translate }}</div> |
|
|
<input matInput formControlName="decimals" type="number" min="0" max="15" step="1"> |
|
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px"> |
|
|
</mat-form-field> |
|
|
<mat-divider vertical></mat-divider> |
|
|
|
|
|
<tb-color-input asBoxInput |
|
|
|
|
|
formControlName="color"> |
|
|
|
|
|
</tb-color-input> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<section *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries" fxLayout="column"> |
|
|
<ng-container *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries"> |
|
|
<mat-form-field> |
|
|
<mat-form-field subscriptSizing="dynamic"> |
|
|
<mat-label translate>datakey.aggregation</mat-label> |
|
|
<mat-label translate>datakey.aggregation</mat-label> |
|
|
<mat-select formControlName="aggregationType" style="min-width: 150px;"> |
|
|
<mat-select formControlName="aggregationType" style="min-width: 150px;"> |
|
|
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation"> |
|
|
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation"> |
|
|
@ -80,7 +86,7 @@ |
|
|
<fieldset *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" class="fields-group fields-group-slider"> |
|
|
<fieldset *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" class="fields-group fields-group-slider"> |
|
|
<legend class="group-title" translate>datakey.delta-calculation</legend> |
|
|
<legend class="group-title" translate>datakey.delta-calculation</legend> |
|
|
<mat-expansion-panel class="tb-settings comparison" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value"> |
|
|
<mat-expansion-panel class="tb-settings comparison" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value"> |
|
|
<mat-expansion-panel-header fxLayout="row wrap"> |
|
|
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width"> |
|
|
<mat-panel-title fxLayout="column" fxLayoutAlign="center start"> |
|
|
<mat-panel-title fxLayout="column" fxLayoutAlign="center start"> |
|
|
<mat-slide-toggle formControlName="comparisonEnabled" (click)="$event.stopPropagation()"> |
|
|
<mat-slide-toggle formControlName="comparisonEnabled" (click)="$event.stopPropagation()"> |
|
|
{{ 'datakey.enable-delta-calculation' | translate }} |
|
|
{{ 'datakey.enable-delta-calculation' | translate }} |
|
|
@ -129,42 +135,54 @@ |
|
|
</ng-template> |
|
|
</ng-template> |
|
|
</mat-expansion-panel> |
|
|
</mat-expansion-panel> |
|
|
</fieldset> |
|
|
</fieldset> |
|
|
</section> |
|
|
</ng-container> |
|
|
<section fxLayout="column" *ngIf="modelValue.type === dataKeyTypes.function"> |
|
|
<section fxLayout="column" *ngIf="modelValue.type === dataKeyTypes.function"> |
|
|
<span translate>datakey.data-generation-func</span> |
|
|
<span translate>datakey.data-generation-func</span> |
|
|
<br/> |
|
|
<br/> |
|
|
<tb-js-func #funcBodyEdit |
|
|
<tb-js-func #funcBodyEdit |
|
|
[functionArgs]="['time', 'prevValue']" |
|
|
[functionArgs]="['time', 'prevValue']" |
|
|
[globalVariables]="functionScopeVariables" |
|
|
|
|
|
[validationArgs]="[[1, 1],[1, '1']]" |
|
|
|
|
|
resultType="any" |
|
|
|
|
|
helpId="widget/config/datakey_generation_fn" |
|
|
|
|
|
formControlName="funcBody"> |
|
|
|
|
|
</tb-js-func> |
|
|
|
|
|
</section> |
|
|
|
|
|
<section fxLayout="column" *ngIf="(modelValue.type === dataKeyTypes.timeseries || modelValue.type === dataKeyTypes.attribute || modelValue.type === dataKeyTypes.count) && showPostProcessing"> |
|
|
|
|
|
<mat-checkbox formControlName="usePostProcessing"> |
|
|
|
|
|
{{ 'datakey.use-data-post-processing-func' | translate }} |
|
|
|
|
|
</mat-checkbox> |
|
|
|
|
|
<tb-js-func *ngIf="dataKeyFormGroup.get('usePostProcessing').value" #postFuncBodyEdit |
|
|
|
|
|
[functionArgs]="['time', 'value', 'prevValue', 'timePrev', 'prevOrigValue']" |
|
|
|
|
|
[globalVariables]="functionScopeVariables" |
|
|
[globalVariables]="functionScopeVariables" |
|
|
[validationArgs]="[[1, 1, 1, 1, 1],[1, '1', '1', 1, '1']]" |
|
|
[validationArgs]="[[1, 1],[1, '1']]" |
|
|
resultType="any" |
|
|
resultType="any" |
|
|
helpId="widget/config/datakey_postprocess_fn" |
|
|
helpId="widget/config/datakey_generation_fn" |
|
|
formControlName="postFuncBody"> |
|
|
formControlName="funcBody"> |
|
|
</tb-js-func> |
|
|
</tb-js-func> |
|
|
<label *ngIf="dataKeyFormGroup.get('usePostProcessing').value" class="tb-title" style="margin-left: 15px;"> |
|
|
|
|
|
time - {{ 'datakey.time-description' | translate }}<br/> |
|
|
|
|
|
value - {{ 'datakey.value-description' | translate }}<br/> |
|
|
|
|
|
prevValue - {{ 'datakey.prev-value-description' | translate }}<br/> |
|
|
|
|
|
timePrev - {{ 'datakey.time-prev-description' | translate }}<br/> |
|
|
|
|
|
prevOrigValue - {{ 'datakey.prev-orig-value-description' | translate }} |
|
|
|
|
|
</label> |
|
|
|
|
|
</section> |
|
|
</section> |
|
|
</div> |
|
|
</div> |
|
|
</mat-tab> |
|
|
<div class="tb-widget-config-panel tb-slide-toggle" |
|
|
<mat-tab [formGroup]="dataKeySettingsFormGroup" label="{{ 'datakey.advanced' | translate }}" *ngIf="displayAdvanced"> |
|
|
*ngIf="(modelValue.type === dataKeyTypes.timeseries || modelValue.type === dataKeyTypes.attribute || modelValue.type === dataKeyTypes.count) && showPostProcessing"> |
|
|
|
|
|
<mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('usePostProcessing').value" [disabled]="!dataKeyFormGroup.get('usePostProcessing').value"> |
|
|
|
|
|
<mat-expansion-panel-header fxLayout="row wrap"> |
|
|
|
|
|
<mat-panel-title> |
|
|
|
|
|
<mat-slide-toggle class="mat-slide" formControlName="usePostProcessing" (click)="$event.stopPropagation()" |
|
|
|
|
|
fxLayoutAlign="center"> |
|
|
|
|
|
{{ 'datakey.use-data-post-processing-func' | translate }} |
|
|
|
|
|
</mat-slide-toggle> |
|
|
|
|
|
</mat-panel-title> |
|
|
|
|
|
</mat-expansion-panel-header> |
|
|
|
|
|
<ng-template matExpansionPanelContent> |
|
|
|
|
|
<tb-js-func *ngIf="dataKeyFormGroup.get('usePostProcessing').value" #postFuncBodyEdit |
|
|
|
|
|
[functionArgs]="['time', 'value', 'prevValue', 'timePrev', 'prevOrigValue']" |
|
|
|
|
|
[globalVariables]="functionScopeVariables" |
|
|
|
|
|
[validationArgs]="[[1, 1, 1, 1, 1],[1, '1', '1', 1, '1']]" |
|
|
|
|
|
resultType="any" |
|
|
|
|
|
helpId="widget/config/datakey_postprocess_fn" |
|
|
|
|
|
formControlName="postFuncBody"> |
|
|
|
|
|
</tb-js-func> |
|
|
|
|
|
<label *ngIf="dataKeyFormGroup.get('usePostProcessing').value" class="tb-title" style="margin-left: 15px;"> |
|
|
|
|
|
time - {{ 'datakey.time-description' | translate }}<br/> |
|
|
|
|
|
value - {{ 'datakey.value-description' | translate }}<br/> |
|
|
|
|
|
prevValue - {{ 'datakey.prev-value-description' | translate }}<br/> |
|
|
|
|
|
timePrev - {{ 'datakey.time-prev-description' | translate }}<br/> |
|
|
|
|
|
prevOrigValue - {{ 'datakey.prev-orig-value-description' | translate }} |
|
|
|
|
|
</label> |
|
|
|
|
|
</ng-template> |
|
|
|
|
|
</mat-expansion-panel> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<ng-template #advanced> |
|
|
|
|
|
<div class="tb-datakey-config" [formGroup]="dataKeySettingsFormGroup"> |
|
|
<div class="mat-padding" fxLayout="column"> |
|
|
<div class="mat-padding" fxLayout="column"> |
|
|
<tb-widget-settings |
|
|
<tb-widget-settings |
|
|
[dashboard]="dashboard" |
|
|
[dashboard]="dashboard" |
|
|
@ -173,5 +191,5 @@ |
|
|
formControlName="settings"> |
|
|
formControlName="settings"> |
|
|
</tb-widget-settings> |
|
|
</tb-widget-settings> |
|
|
</div> |
|
|
</div> |
|
|
</mat-tab> |
|
|
</div> |
|
|
</mat-tab-group> |
|
|
</ng-template> |
|
|
|
Igor Kulikov
3 years ago