Flex layout replacements. Switch to tailwind.css.
This commit is contained in:
Igor Kulikov
parent
1bdf49574d
commit
78dd5bdcfe
@ -16,9 +16,10 @@
|
||||
|
||||
-->
|
||||
<div class="tb-custom-action-pretty" tb-fullscreen [fullscreen]="fullscreen">
|
||||
<div fxLayout="row" fxLayoutAlign="end center" class="tb-action-expand-button" [ngClass]="{'tb-fullscreen-editor': fullscreen}">
|
||||
<div class="tb-action-expand-button flex flex-row items-center justify-end" [class.tb-fullscreen-editor]="fullscreen">
|
||||
<button *ngIf="!fullscreen"
|
||||
mat-icon-button fxHide.lt-md
|
||||
class="lt-md:!hidden"
|
||||
mat-icon-button
|
||||
matTooltip="{{ 'widget.toggle-fullscreen' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="fullscreen = true">
|
||||
@ -33,14 +34,14 @@
|
||||
<span translate>widget.toggle-fullscreen</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="tb-custom-action-editor" [ngClass]="{'tb-fullscreen-editor': fullscreen}">
|
||||
<div class="tb-custom-action-editor" [class.tb-fullscreen-editor]="fullscreen">
|
||||
<div *ngIf="!fullscreen; else fullscreenEditor">
|
||||
<tb-custom-action-pretty-resources-tabs [hasCustomFunction]="true"
|
||||
[action]="action" (actionUpdated)="onActionUpdated($event ? true : false)">
|
||||
</tb-custom-action-pretty-resources-tabs>
|
||||
</div>
|
||||
<ng-template #fullscreenEditor>
|
||||
<div class="tb-fullscreen-panel tb-layout-fill" fxLayout="row">
|
||||
<div class="tb-fullscreen-panel tb-layout-fill flex flex-row">
|
||||
<div #leftPanel class="tb-split tb-content">
|
||||
<tb-custom-action-pretty-resources-tabs [hasCustomFunction]="false"
|
||||
[action]="action" (actionUpdated)="onActionUpdated($event ? true : false)">
|
||||
|
||||
@ -19,10 +19,9 @@
|
||||
<mat-tab label="{{ 'widget.resources' | translate }}" style="width: 100%; height: 100%;">
|
||||
<div class="tb-custom-action-editor-container" style="background-color: #fff;">
|
||||
<div class="mat-padding">
|
||||
<div fxFlex fxLayout="row"
|
||||
fxLayoutAlign="start center"
|
||||
<div class="flex flex-1 flex-row items-center justify-start"
|
||||
*ngFor="let resource of action.customResources; let i = index" style="padding-top: 10px;">
|
||||
<tb-resource-autocomplete fxFlex class="mat-block"
|
||||
<tb-resource-autocomplete class="mat-block flex-1"
|
||||
subscriptSizing="dynamic"
|
||||
hideRequiredMarker required
|
||||
[allowAutocomplete]="resource.isModule"
|
||||
|
||||
@ -6,9 +6,9 @@
|
||||
<!-- -->
|
||||
<!--<form #editEntityForm="ngForm" [formGroup]="editEntityFormGroup"-->
|
||||
<!-- (ngSubmit)="save()" class="edit-entity-form">-->
|
||||
<!-- <mat-toolbar fxLayout="row" color="primary">-->
|
||||
<!-- <mat-toolbar class="flex flex-row" color="primary">-->
|
||||
<!-- <h2>Edit {{entityType.toLowerCase()}} {{entityName}}</h2>-->
|
||||
<!-- <span fxFlex></span>-->
|
||||
<!-- <span class="flex-1"></span>-->
|
||||
<!-- <button mat-icon-button (click)="cancel()" type="button">-->
|
||||
<!-- <mat-icon class="material-icons">close</mat-icon>-->
|
||||
<!-- </button>-->
|
||||
@ -16,57 +16,57 @@
|
||||
<!-- <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
|
||||
<!-- </mat-progress-bar>-->
|
||||
<!-- <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
|
||||
<!-- <div mat-dialog-content fxLayout="column">-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <div mat-dialog-content class="flex flex-col">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Entity Name</mat-label>-->
|
||||
<!-- <input matInput formControlName="entityName" required readonly="">-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Entity Label</mat-label>-->
|
||||
<!-- <input matInput formControlName="entityLabel">-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Entity Type</mat-label>-->
|
||||
<!-- <input matInput formControlName="entityType" readonly>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Type</mat-label>-->
|
||||
<!-- <input matInput formControlName="type" readonly>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div formGroupName="attributes" fxLayout="column">-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <div formGroupName="attributes" class="flex flex-col">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Latitude</mat-label>-->
|
||||
<!-- <input type="number" step="any" matInput formControlName="latitude">-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Longitude</mat-label>-->
|
||||
<!-- <input type="number" step="any" matInput formControlName="longitude">-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Address</mat-label>-->
|
||||
<!-- <input matInput formControlName="address">-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Owner</mat-label>-->
|
||||
<!-- <input matInput formControlName="owner">-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Integer Value</mat-label>-->
|
||||
<!-- <input type="number" step="1" matInput formControlName="number">-->
|
||||
<!-- <mat-error *ngIf="editEntityFormGroup.get('attributes.number').hasError('pattern')">-->
|
||||
<!-- Invalid integer value.-->
|
||||
<!-- </mat-error>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
|
||||
<!-- <div class="boolean-value-input flex flex-1 flex-col items-start justify-center">-->
|
||||
<!-- <label class="checkbox-label">Boolean Value</label>-->
|
||||
<!-- <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
|
||||
<!-- {{ (editEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}-->
|
||||
@ -76,12 +76,12 @@
|
||||
<!-- </div>-->
|
||||
<!-- <div class="relations-list old-relations">-->
|
||||
<!-- <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
|
||||
<!-- <div class="body" [fxShow]="oldRelations().length">-->
|
||||
<!-- <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="oldRelations" -->
|
||||
<!-- <div class="body" [class.!hidden]="!oldRelations().length">-->
|
||||
<!-- <div class="row flex flex-row items-center justify-start" formArrayName="oldRelations" -->
|
||||
<!-- *ngFor="let relation of oldRelations().controls; let i = index;">-->
|
||||
<!-- <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
|
||||
<!-- <div fxFlex fxLayout="column">-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
|
||||
<!-- <div class="flex flex-1 flex-col">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block" style="min-width: 100px;">-->
|
||||
<!-- <mat-label>Direction</mat-label>-->
|
||||
<!-- <mat-select formControlName="direction" name="direction">-->
|
||||
@ -94,20 +94,20 @@
|
||||
<!-- </mat-error>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <tb-relation-type-autocomplete-->
|
||||
<!-- fxFlex class="mat-block"-->
|
||||
<!-- class="mat-block flex-1"-->
|
||||
<!-- formControlName="relationType"-->
|
||||
<!-- required="true">-->
|
||||
<!-- </tb-relation-type-autocomplete>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="row" fxLayout.xs="column">-->
|
||||
<!-- <div class="flex flex-row xs:flex-col">-->
|
||||
<!-- <tb-entity-select-->
|
||||
<!-- fxFlex class="mat-block"-->
|
||||
<!-- class="mat-block flex-1"-->
|
||||
<!-- required="true"-->
|
||||
<!-- formControlName="relatedEntity">-->
|
||||
<!-- </tb-entity-select>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="column" fxLayoutAlign="center center">-->
|
||||
<!-- <div class="flex flex-col items-center justify-center">-->
|
||||
<!-- <button mat-icon-button color="primary"-->
|
||||
<!-- aria-label="Remove"-->
|
||||
<!-- type="button"-->
|
||||
@ -123,11 +123,11 @@
|
||||
<!-- </div>-->
|
||||
<!-- <div class="relations-list">-->
|
||||
<!-- <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">New Relations</div>-->
|
||||
<!-- <div class="body" [fxShow]="relations().length">-->
|
||||
<!-- <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
|
||||
<!-- <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
|
||||
<!-- <div fxFlex fxLayout="column">-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <div class="body" [class.!hidden]="!relations().length">-->
|
||||
<!-- <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
|
||||
<!-- <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
|
||||
<!-- <div class="flex flex-1 flex-col">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block" style="min-width: 100px;">-->
|
||||
<!-- <mat-label>Direction</mat-label>-->
|
||||
<!-- <mat-select formControlName="direction" name="direction">-->
|
||||
@ -140,20 +140,20 @@
|
||||
<!-- </mat-error>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <tb-relation-type-autocomplete-->
|
||||
<!-- fxFlex class="mat-block"-->
|
||||
<!-- class="mat-block flex-1"-->
|
||||
<!-- formControlName="relationType"-->
|
||||
<!-- [required]="true">-->
|
||||
<!-- </tb-relation-type-autocomplete>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="row" fxLayout.xs="column">-->
|
||||
<!-- <div class="flex flex-row xs:flex-col">-->
|
||||
<!-- <tb-entity-select-->
|
||||
<!-- fxFlex class="mat-block"-->
|
||||
<!-- class="mat-block flex-1"-->
|
||||
<!-- [required]="true"-->
|
||||
<!-- formControlName="relatedEntity">-->
|
||||
<!-- </tb-entity-select>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="column" fxLayoutAlign="center center">-->
|
||||
<!-- <div class="flex flex-col items-center justify-center">-->
|
||||
<!-- <button mat-icon-button color="primary"-->
|
||||
<!-- aria-label="Remove"-->
|
||||
<!-- type="button"-->
|
||||
@ -177,7 +177,7 @@
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
|
||||
<!-- <div mat-dialog-actions class="flex flex-row items-center justify-end">-->
|
||||
<!-- <button mat-button color="primary"-->
|
||||
<!-- type="button"-->
|
||||
<!-- [disabled]="(isLoading$ | async)"-->
|
||||
@ -198,9 +198,9 @@
|
||||
<!---->
|
||||
<!--<form #addEntityForm="ngForm" [formGroup]="addEntityFormGroup"-->
|
||||
<!-- (ngSubmit)="save()" class="add-entity-form">-->
|
||||
<!-- <mat-toolbar fxLayout="row" color="primary">-->
|
||||
<!-- <mat-toolbar class="flex flex-row" color="primary">-->
|
||||
<!-- <h2>Add entity</h2>-->
|
||||
<!-- <span fxFlex></span>-->
|
||||
<!-- <span class="flex-1"></span>-->
|
||||
<!-- <button mat-icon-button (click)="cancel()" type="button">-->
|
||||
<!-- <mat-icon class="material-icons">close</mat-icon>-->
|
||||
<!-- </button>-->
|
||||
@ -208,21 +208,21 @@
|
||||
<!-- <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">-->
|
||||
<!-- </mat-progress-bar>-->
|
||||
<!-- <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>-->
|
||||
<!-- <div mat-dialog-content fxLayout="column">-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <div mat-dialog-content class="flex flex-col">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Entity Name</mat-label>-->
|
||||
<!-- <input matInput formControlName="entityName" required>-->
|
||||
<!-- <mat-error *ngIf="addEntityFormGroup.get('entityName').hasError('required')">-->
|
||||
<!-- Entity name is required.-->
|
||||
<!-- </mat-error>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Entity Label</mat-label>-->
|
||||
<!-- <input matInput formControlName="entityLabel" >-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <tb-entity-type-select-->
|
||||
<!-- class="mat-block"-->
|
||||
<!-- formControlName="entityType"-->
|
||||
@ -230,50 +230,50 @@
|
||||
<!-- [allowedEntityTypes]="allowedEntityTypes"-->
|
||||
<!-- ></tb-entity-type-select>-->
|
||||
<!-- <tb-entity-subtype-autocomplete-->
|
||||
<!-- fxFlex *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
|
||||
<!-- class="mat-block"-->
|
||||
<!-- *ngIf="addEntityFormGroup.get('entityType').value == 'ASSET'"-->
|
||||
<!-- class="mat-block flex-1"-->
|
||||
<!-- formControlName="type"-->
|
||||
<!-- [required]="true"-->
|
||||
<!-- [entityType]="'ASSET'"-->
|
||||
<!-- ></tb-entity-subtype-autocomplete>-->
|
||||
<!-- <tb-entity-subtype-autocomplete-->
|
||||
<!-- fxFlex *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
|
||||
<!-- class="mat-block"-->
|
||||
<!-- *ngIf="addEntityFormGroup.get('entityType').value != 'ASSET'"-->
|
||||
<!-- class="mat-block flex-1"-->
|
||||
<!-- formControlName="type"-->
|
||||
<!-- [required]="true"-->
|
||||
<!-- [entityType]="'DEVICE'"-->
|
||||
<!-- ></tb-entity-subtype-autocomplete>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div formGroupName="attributes" fxLayout="column">-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <div formGroupName="attributes" class="flex flex-col">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Latitude</mat-label>-->
|
||||
<!-- <input type="number" step="any" matInput formControlName="latitude">-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Longitude</mat-label>-->
|
||||
<!-- <input type="number" step="any" matInput formControlName="longitude">-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Address</mat-label>-->
|
||||
<!-- <input matInput formControlName="address">-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Owner</mat-label>-->
|
||||
<!-- <input matInput formControlName="owner">-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <mat-form-field fxFlex class="mat-block">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block flex-1">-->
|
||||
<!-- <mat-label>Integer Value</mat-label>-->
|
||||
<!-- <input type="number" step="1" matInput formControlName="number">-->
|
||||
<!-- <mat-error *ngIf="addEntityFormGroup.get('attributes.number').hasError('pattern')">-->
|
||||
<!-- Invalid integer value.-->
|
||||
<!-- </mat-error>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <div class="boolean-value-input" fxLayout="column" fxLayoutAlign="center start" fxFlex>-->
|
||||
<!-- <div class="boolean-value-input flex flex-1 flex-col items-center justify-start">-->
|
||||
<!-- <label class="checkbox-label">Boolean Value</label>-->
|
||||
<!-- <mat-checkbox formControlName="booleanValue" style="margin-bottom: 40px;">-->
|
||||
<!-- {{ (addEntityFormGroup.get('attributes.booleanValue').value ? "value.true" : "value.false") | translate }}-->
|
||||
@ -283,11 +283,11 @@
|
||||
<!-- </div>-->
|
||||
<!-- <div class="relations-list">-->
|
||||
<!-- <div class="mat-body-1" style="padding-bottom: 10px; color: rgba(0,0,0,0.57);">Relations</div>-->
|
||||
<!-- <div class="body" [fxShow]="relations().length">-->
|
||||
<!-- <div class="row" fxLayout="row" fxLayoutAlign="start center" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
|
||||
<!-- <div [formGroupName]="i" class="mat-elevation-z2" fxFlex fxLayout="row" style="padding: 5px 0 5px 5px;">-->
|
||||
<!-- <div fxFlex fxLayout="column">-->
|
||||
<!-- <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column" fxLayoutGap.xs="0">-->
|
||||
<!-- <div class="body" [class.!hidden]="!relations().length">-->
|
||||
<!-- <div class="row flex flex-row items-center justify-start" formArrayName="relations" *ngFor="let relation of relations().controls; let i = index;">-->
|
||||
<!-- <div [formGroupName]="i" class="mat-elevation-z2 flex flex-1 flex-row" style="padding: 5px 0 5px 5px;">-->
|
||||
<!-- <div class="flex flex-1 flex-col">-->
|
||||
<!-- <div class="flex flex-row gap-2 xs:flex-col xs:gap-0">-->
|
||||
<!-- <mat-form-field class="mat-block" style="min-width: 100px;">-->
|
||||
<!-- <mat-label>Direction</mat-label>-->
|
||||
<!-- <mat-select formControlName="direction" name="direction">-->
|
||||
@ -300,20 +300,20 @@
|
||||
<!-- </mat-error>-->
|
||||
<!-- </mat-form-field>-->
|
||||
<!-- <tb-relation-type-autocomplete-->
|
||||
<!-- fxFlex class="mat-block"-->
|
||||
<!-- class="mat-block flex-1"-->
|
||||
<!-- formControlName="relationType"-->
|
||||
<!-- [required]="true">-->
|
||||
<!-- </tb-relation-type-autocomplete>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="row" fxLayout.xs="column">-->
|
||||
<!-- <div class="flex flex-row xs:flex-col">-->
|
||||
<!-- <tb-entity-select-->
|
||||
<!-- fxFlex class="mat-block"-->
|
||||
<!-- class="mat-block flex-1"-->
|
||||
<!-- [required]="true"-->
|
||||
<!-- formControlName="relatedEntity">-->
|
||||
<!-- </tb-entity-select>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div fxLayout="column" fxLayoutAlign="center center">-->
|
||||
<!-- <div class="flex flex-col items-center justify-center">-->
|
||||
<!-- <button mat-icon-button color="primary"-->
|
||||
<!-- aria-label="Remove"-->
|
||||
<!-- type="button"-->
|
||||
@ -337,7 +337,7 @@
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">-->
|
||||
<!-- <div mat-dialog-actions class="flex flex-row items-center justify-end">-->
|
||||
<!-- <button mat-button color="primary"-->
|
||||
<!-- type="button"-->
|
||||
<!-- [disabled]="(isLoading$ | async)"-->
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width" >{{ 'widgets.value-action.attribute-key' | translate }}*</div>
|
||||
<tb-device-key-autocomplete
|
||||
fxFlex
|
||||
class="flex-1"
|
||||
formControlName="key"
|
||||
required
|
||||
requiredText="widgets.value-action.attribute-key-required"
|
||||
@ -91,7 +91,7 @@
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width" >{{ 'widgets.value-action.time-series-key' | translate }}*</div>
|
||||
<tb-device-key-autocomplete
|
||||
fxFlex
|
||||
class="flex-1"
|
||||
formControlName="key"
|
||||
required
|
||||
requiredText="widgets.value-action.time-series-key-required"
|
||||
@ -108,7 +108,7 @@
|
||||
class="tb-form-panel stroked" formGroupName="dataToValue">
|
||||
<div class="tb-form-row no-padding no-border column-xs">
|
||||
<div class="fixed-title-width" translate>widgets.value-action.action-result-converter</div>
|
||||
<tb-toggle-select fxFlex formControlName="type">
|
||||
<tb-toggle-select class="flex-1" formControlName="type">
|
||||
<tb-toggle-option [value]="dataToValueType.NONE">{{ 'widgets.value-action.converter-none' | translate }}</tb-toggle-option>
|
||||
<tb-toggle-option [value]="dataToValueType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
|
||||
</tb-toggle-select>
|
||||
@ -124,7 +124,7 @@
|
||||
<div *ngIf="valueType === ValueType.BOOLEAN" class="tb-form-row align-start no-gap column-xs">
|
||||
<div class="fixed-title-width fixed-title-height">{{ 'widgets.value-action.state-when-result-is' | translate:{state: stateLabel} }}</div>
|
||||
<tb-value-input
|
||||
fxFlex
|
||||
class="flex-1"
|
||||
[valueType]="(getValueSettingsFormGroup.get('action').value === getValueAction.GET_DASHBOARD_STATE &&
|
||||
getValueSettingsFormGroup.get('dataToValue').get('type').value === dataToValueType.NONE) ? ValueType.STRING : null"
|
||||
layout="column"
|
||||
@ -135,10 +135,10 @@
|
||||
<div *ngIf="getValueSettingsFormGroup.get('action').value === getValueAction.EXECUTE_RPC"
|
||||
class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
|
||||
<mat-expansion-panel class="tb-settings no-padding">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description fxLayoutAlign="end center" translate>
|
||||
<mat-panel-description class="flex items-center justify-end" translate>
|
||||
widget-config.advanced-settings
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
@ -163,10 +163,9 @@
|
||||
<mat-expansion-panel class="tb-settings"
|
||||
[expanded]="getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
|
||||
[disabled]="!getValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle class="mat-slide" formControlName="requestPersistent" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
<mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
|
||||
{{ 'widgets.value-action.request-persistent' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<div class="tb-form-panel no-padding no-border" [formGroup]="mobileActionFormGroup">
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width">{{ 'widget-action.mobile.action-type' | translate }}*</div>
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select required formControlName="type" placeholder="{{ 'widget-action.mobile.select-action-type' | translate }}">
|
||||
<mat-option *ngFor="let actionType of mobileActionTypes" [value]="actionType">
|
||||
{{ mobileActionTypeTranslations.get(mobileActionType[actionType]) | translate }}
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width" >{{ 'widgets.value-action.attribute-key' | translate }}*</div>
|
||||
<tb-device-key-autocomplete
|
||||
fxFlex
|
||||
class="flex-1"
|
||||
formControlName="key"
|
||||
required
|
||||
requiredText="widgets.value-action.attribute-key-required"
|
||||
@ -79,7 +79,7 @@
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width" >{{ 'widgets.value-action.time-series-key' | translate }}*</div>
|
||||
<tb-device-key-autocomplete
|
||||
fxFlex
|
||||
class="flex-1"
|
||||
formControlName="key"
|
||||
required
|
||||
requiredText="widgets.value-action.time-series-key-required"
|
||||
@ -96,7 +96,7 @@
|
||||
<div class="tb-form-row no-padding no-border column-xs">
|
||||
<div class="fixed-title-width">{{ (setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC ?
|
||||
'widgets.value-action.parameters' : 'widgets.value-action.value') | translate }}</div>
|
||||
<tb-toggle-select fxFlex formControlName="type">
|
||||
<tb-toggle-select class="flex-1" formControlName="type">
|
||||
<tb-toggle-option *ngIf="valueType !== ValueType.BOOLEAN" [value]="valueToDataType.VALUE">{{ 'widgets.value-action.converter-value' | translate }}</tb-toggle-option>
|
||||
<tb-toggle-option *ngIf="valueType === ValueType.BOOLEAN" [value]="valueToDataType.CONSTANT">{{ 'widgets.value-action.converter-constant' | translate }}</tb-toggle-option>
|
||||
<tb-toggle-option [value]="valueToDataType.FUNCTION">{{ 'widgets.value-action.converter-function' | translate }}</tb-toggle-option>
|
||||
@ -105,7 +105,7 @@
|
||||
</tb-toggle-select>
|
||||
</div>
|
||||
<tb-value-input *ngIf="setValueSettingsFormGroup.get('valueToData').get('type').value === valueToDataType.CONSTANT"
|
||||
fxFlex
|
||||
class="flex-1"
|
||||
[layout]="{
|
||||
layout: 'row',
|
||||
breakpoints: {xs: 'column'}
|
||||
@ -124,10 +124,10 @@
|
||||
<div *ngIf="setValueSettingsFormGroup.get('action').value === setValueAction.EXECUTE_RPC"
|
||||
class="tb-form-panel no-border tb-slide-toggle" formGroupName="executeRpc">
|
||||
<mat-expansion-panel class="tb-settings no-padding">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description fxLayoutAlign="end center" translate>
|
||||
<mat-panel-description class="flex items-center justify-end" translate>
|
||||
widget-config.advanced-settings
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
@ -152,10 +152,9 @@
|
||||
<mat-expansion-panel class="tb-settings"
|
||||
[expanded]="setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value"
|
||||
[disabled]="!setValueSettingsFormGroup.get('executeRpc').get('requestPersistent').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle class="mat-slide" formControlName="requestPersistent" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
<mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="requestPersistent" (click)="$event.stopPropagation()">
|
||||
{{ 'widgets.value-action.request-persistent' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
<div class="tb-form-panel no-padding no-border" [formGroup]="widgetActionFormGroup">
|
||||
<div class="tb-form-row">
|
||||
<div translate>widget-config.action</div>
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select required formControlName="type" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<mat-option *ngFor="let actionType of widgetActionTypes" [value]="actionType">
|
||||
{{ widgetActionTypeTranslations.get(widgetActionType[actionType]) | translate }}
|
||||
@ -30,7 +30,7 @@
|
||||
<ng-template [ngSwitchCase]="widgetActionType.openDashboard">
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width">{{ 'widget-action.target-dashboard' | translate }}*</div>
|
||||
<tb-dashboard-autocomplete fxFlex
|
||||
<tb-dashboard-autocomplete class="flex-1"
|
||||
formControlName="targetDashboardId"
|
||||
required
|
||||
requiredText="widget-action.target-dashboard-required"
|
||||
@ -49,7 +49,7 @@
|
||||
<span>{{ 'widget-action.target-dashboard-state' | translate }}</span>
|
||||
<span *ngIf="widgetActionFormGroup.get('type').value === widgetActionType.openDashboardState">*</span>
|
||||
</div>
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic"
|
||||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"
|
||||
[class.tb-suffix-absolute]="!actionTypeFormGroup.get('targetDashboardStateId').value">
|
||||
<input matInput type="text" placeholder="{{ 'widget-action.target-dashboard-state' | translate }}"
|
||||
#dashboardStateInput
|
||||
@ -85,7 +85,7 @@
|
||||
<ng-template [ngSwitchCase]="widgetActionType.openURL">
|
||||
<div class="tb-form-row">
|
||||
<div class="tb-required">{{ 'widget-action.URL' | translate }}</div>
|
||||
<mat-form-field fxFlex style="margin-left: 9px" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-form-field class="flex-1" style="margin-left: 9px" appearance="outline" subscriptSizing="dynamic">
|
||||
<input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="url">
|
||||
<mat-icon matSuffix
|
||||
matTooltipPosition="above"
|
||||
@ -127,7 +127,7 @@
|
||||
</div>
|
||||
<div class="tb-form-row" *ngIf="actionTypeFormGroup.get('setEntityId').value">
|
||||
<div class="fixed-title-width">{{ 'alias.state-entity-parameter-name' | translate }}</div>
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<input matInput
|
||||
placeholder="{{ 'alias.default-entity-parameter-name' | translate }}"
|
||||
formControlName="stateEntityParamName">
|
||||
@ -138,7 +138,7 @@
|
||||
widgetActionFormGroup.get('type').value : ''">
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width">{{ 'widget-action.state-display-type' | translate }}</div>
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="stateDisplayType">
|
||||
<mat-option *ngFor="let displayType of allStateDisplayTypes" [value]="displayType">
|
||||
{{ stateDisplayTypeName(displayType) }}
|
||||
@ -150,7 +150,7 @@
|
||||
<ng-template [ngSwitchCase]="'separateDialog'">
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width">{{ 'widget-action.dialog-title' | translate }}</div>
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<input matInput placeholder="{{ 'widget-config.set' | translate }}" formControlName="dialogTitle">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
@ -191,7 +191,7 @@
|
||||
<ng-template [ngSwitchCase]="'popover'">
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width">{{ 'widget-action.popover-preferred-placement' | translate }}</div>
|
||||
<mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="popoverPreferredPlacement">
|
||||
<mat-option *ngFor="let placement of allPopoverPlacements" [value]="placement">
|
||||
{{ popoverPlacementName(placement) }}
|
||||
|
||||
@ -45,11 +45,11 @@
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
|
||||
{{ 'widgets.button.icon' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
|
||||
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
|
||||
<tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
|
||||
<tb-material-icon-select asBoxInput
|
||||
iconClearButton
|
||||
formControlName="icon">
|
||||
@ -62,15 +62,15 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.button.color-palette' | translate }}</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-3">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.button.main</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="mainColor">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider vertical></mat-divider>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.button.background</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="backgroundColor">
|
||||
@ -80,7 +80,7 @@
|
||||
</div>
|
||||
<div class="tb-form-panel stroked" formGroupName="customStyle">
|
||||
<mat-expansion-panel class="tb-settings">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<div class="tb-form-panel-title" translate>widgets.button.custom-styles</div>
|
||||
</mat-panel-title>
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-menu>
|
||||
<span fxFlex></span>
|
||||
<span class="flex-1"></span>
|
||||
<button mat-button
|
||||
color="primary"
|
||||
type="button"
|
||||
|
||||
@ -19,10 +19,9 @@
|
||||
<div class="tb-form-panel tb-slide-toggle">
|
||||
<mat-expansion-panel class="tb-settings" [(expanded)]="settingsExpanded"
|
||||
[disabled]="!animationSettingsFormGroup.get('animation').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle class="mat-slide" formControlName="animation" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
<mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="animation" (click)="$event.stopPropagation()">
|
||||
{{ 'widgets.chart.animation.animation' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
|
||||
@ -46,8 +46,8 @@
|
||||
{{ 'widgets.chart.bar.label' | translate }}
|
||||
</div>
|
||||
</mat-slide-toggle>
|
||||
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
|
||||
<div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="labelPosition">
|
||||
<mat-option *ngFor="let position of chartLabelPositions" [value]="position">
|
||||
{{ chartLabelPositionTranslations.get(position) | translate }}
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<ng-container *ngIf="fillSettingsFormGroup.get('type').value === ChartFillType.gradient" formGroupName="gradient">
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div translate>widgets.chart.gradient-stops</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div class="tb-small-label" translate>widgets.chart.gradient-start</div>
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="start" min="0" max="100" step="1"
|
||||
|
||||
@ -19,10 +19,9 @@
|
||||
<div class="tb-form-panel stroked tb-slide-toggle">
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="alwaysExpanded || settingsExpanded"
|
||||
[disabled]="alwaysExpanded || !axisSettingsFormGroup.get('show').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle class="mat-slide" formControlName="show" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
<mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="show" (click)="$event.stopPropagation()">
|
||||
{{ 'widgets.time-series-chart.axis.show' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
@ -30,7 +29,7 @@
|
||||
<ng-template matExpansionPanelContent>
|
||||
<div class="tb-form-row column-xs">
|
||||
<div class="fixed-title-width" translate>widgets.time-series-chart.axis.label</div>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
@ -69,7 +68,7 @@
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row">
|
||||
<tb-js-func fxFlex
|
||||
<tb-js-func class="flex-1"
|
||||
formControlName="ticksGenerator"
|
||||
[globalVariables]="functionScopeVariables"
|
||||
[functionArgs]="['extent']"
|
||||
@ -82,7 +81,7 @@
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTickLabels">
|
||||
<div translate>widgets.time-series-chart.axis.tick-labels</div>
|
||||
</mat-slide-toggle>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<tb-auto-date-format-settings *ngIf="axisType === 'xAxis'"
|
||||
formControlName="ticksFormat"
|
||||
[defaultValues]="defaultXAxisTicksFormat">
|
||||
@ -100,7 +99,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="axisType === 'yAxis' && advanced" class="tb-form-row no-border">
|
||||
<tb-js-func fxFlex
|
||||
<tb-js-func class="flex-1"
|
||||
formControlName="ticksFormatter"
|
||||
[globalVariables]="functionScopeVariables"
|
||||
[functionArgs]="['value']"
|
||||
@ -162,7 +161,7 @@
|
||||
<div *ngIf="axisType === 'yAxis'" class="tb-form-panel no-border no-padding-top">
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div translate>widgets.chart.chart-axis.scale</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div class="tb-small-label" translate>widgets.chart.chart-axis.scale-min</div>
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="min"
|
||||
|
||||
@ -19,10 +19,9 @@
|
||||
<div class="tb-form-panel stroked tb-slide-toggle">
|
||||
<mat-expansion-panel class="tb-settings" [(expanded)]="settingsExpanded"
|
||||
[disabled]="!gridSettingsFormGroup.get('show').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle class="mat-slide" formControlName="show" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
<mat-slide-toggle class="mat-slide flex items-stretch justify-center" formControlName="show" (click)="$event.stopPropagation()">
|
||||
{{ 'widgets.time-series-chart.grid.grid' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
@ -37,7 +36,7 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between">
|
||||
<div>{{ 'widgets.time-series-chart.grid.border' | translate }}</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="borderWidth" type="number" min="0" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<span matSuffix>px</span>
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
<tb-value-input
|
||||
*ngIf="stateFormGroup.get('sourceType').value === TimeSeriesChartStateSourceType.constant"
|
||||
formControlName="sourceValue"
|
||||
fxFlex
|
||||
class="flex-1"
|
||||
[layout]="{
|
||||
layout: 'column',
|
||||
breakpoints: {'gt-sm': 'row'}
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
</div>
|
||||
<div *ngIf="statesFormArray().controls.length; else noStates" class="tb-form-table-body">
|
||||
<div *ngFor="let stateControl of statesFormArray().controls; trackBy: trackByState; let $index = index; let $last = last">
|
||||
<tb-time-series-chart-state-row fxFlex
|
||||
<tb-time-series-chart-state-row class="flex-1"
|
||||
[formControl]="stateControl"
|
||||
(stateRemoved)="removeState($index)">
|
||||
</tb-time-series-chart-state-row>
|
||||
@ -42,6 +42,5 @@
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #noStates>
|
||||
<span fxLayoutAlign="center center"
|
||||
class="tb-prompt">{{ 'widgets.time-series-chart.state.no-states' | translate }}</span>
|
||||
<span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.state.no-states' | translate }}</span>
|
||||
</ng-template>
|
||||
|
||||
@ -44,8 +44,8 @@
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showLabel">
|
||||
{{ 'widgets.time-series-chart.threshold.label' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
|
||||
<div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="labelPosition">
|
||||
<mat-option *ngFor="let position of timeSeriesThresholdLabelPositions" [value]="position">
|
||||
{{ timeSeriesThresholdLabelPositionTranslations.get(position) | translate }}
|
||||
@ -101,7 +101,7 @@
|
||||
<div class="tb-form-row column-xs">
|
||||
<div translate>widgets.time-series-chart.threshold.start-symbol</div>
|
||||
<div class="tb-flex row flex-end">
|
||||
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="startSymbol">
|
||||
<mat-option *ngFor="let shape of chartShapes" [value]="shape">
|
||||
{{ chartShapeTranslations.get(shape) | translate }}
|
||||
@ -118,7 +118,7 @@
|
||||
<div class="tb-form-row column-xs">
|
||||
<div translate>widgets.time-series-chart.threshold.end-symbol</div>
|
||||
<div class="tb-flex row flex-end">
|
||||
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="endSymbol">
|
||||
<mat-option *ngFor="let shape of chartShapes" [value]="shape">
|
||||
{{ chartShapeTranslations.get(shape) | translate }}
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
</div>
|
||||
<div *ngIf="thresholdsFormArray().controls.length; else noThresholds" class="tb-form-table-body">
|
||||
<div *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold; let $index = index; let $last = last">
|
||||
<tb-time-series-chart-threshold-row fxFlex
|
||||
<tb-time-series-chart-threshold-row class="flex-1"
|
||||
[formControl]="thresholdControl"
|
||||
[hideYAxis]="hideYAxis"
|
||||
[yAxisIds]="yAxisIds"
|
||||
@ -46,6 +46,5 @@
|
||||
</div>
|
||||
</div>
|
||||
<ng-template #noThresholds>
|
||||
<span fxLayoutAlign="center center"
|
||||
class="tb-prompt">{{ 'widgets.time-series-chart.threshold.no-thresholds' | translate }}</span>
|
||||
<span class="tb-prompt flex items-center justify-center">{{ 'widgets.time-series-chart.threshold.no-thresholds' | translate }}</span>
|
||||
</ng-template>
|
||||
|
||||
@ -36,17 +36,17 @@
|
||||
<div cdkDrag [cdkDragDisabled]="!dragEnabled"
|
||||
class="tb-draggable-form-table-row"
|
||||
*ngFor="let axisControl of axesFormArray().controls; trackBy: trackByAxis; let $index = index;">
|
||||
<tb-time-series-chart-y-axis-row fxFlex
|
||||
<tb-time-series-chart-y-axis-row class="flex-1"
|
||||
[formControl]="axisControl"
|
||||
[advanced]="advanced"
|
||||
(axisRemoved)="removeAxis($index)">
|
||||
</tb-time-series-chart-y-axis-row>
|
||||
<div class="tb-form-table-row-cell-buttons">
|
||||
<button fxHide.lt-lg
|
||||
<button class="lt-lg:!hidden"
|
||||
[class.tb-hidden]="!dragEnabled"
|
||||
mat-icon-button
|
||||
type="button"
|
||||
cdkDragHandle
|
||||
[ngClass]="{'tb-hidden': !dragEnabled}"
|
||||
matTooltip="{{ 'action.drag' | translate }}"
|
||||
matTooltipPosition="above">
|
||||
<mat-icon>drag_indicator</mat-icon>
|
||||
|
||||
@ -16,8 +16,8 @@
|
||||
|
||||
-->
|
||||
<div class="tb-form-panel" [class.stroked]="stroked" [formGroup]="barWidthSettingsFormGroup">
|
||||
<div fxLayout="row" fxLayoutAlign="space-between center">
|
||||
<div fxFlex translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div>
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<div class="flex-1" translate>widgets.time-series-chart.no-aggregation-bar-width-strategy</div>
|
||||
<tb-toggle-select formControlName="strategy" selectMediaBreakpoint="xs">
|
||||
<tb-toggle-option *ngFor="let strategy of timeSeriesChartNoAggregationBarWidthStrategies" [value]="strategy">
|
||||
{{ timeSeriesChartNoAggregationBarWidthStrategyTranslations.get(strategy) | translate }}
|
||||
@ -46,8 +46,8 @@
|
||||
<ng-template #barWidth let-label="label" let-formGroup="formGroup">
|
||||
<div class="tb-form-row space-between column-lt-md" [formGroup]="formGroup">
|
||||
<div translate>{{ label }}</div>
|
||||
<div fxLayout="row" fxFlex.lt-md fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-form-field class="medium-width" fxFlex.lt-md appearance="outline" subscriptSizing="dynamic">
|
||||
<div class="flex lt-md:flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field class="medium-width lt-md:flex-1" appearance="outline" subscriptSizing="dynamic">
|
||||
<mat-select formControlName="relative">
|
||||
<mat-select-trigger>
|
||||
{{ (formGroup.get('relative').value ?
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
|
||||
{{ 'widgets.status-widget.label' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
@ -33,7 +33,7 @@
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showStatus">
|
||||
{{ 'widgets.status-widget.status' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="status" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
@ -46,11 +46,11 @@
|
||||
<div class="fixed-title-width">
|
||||
{{ 'widgets.status-widget.icon' | translate }}
|
||||
</div>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
|
||||
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
|
||||
<tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
|
||||
<tb-material-icon-select asBoxInput
|
||||
formControlName="icon">
|
||||
</tb-material-icon-select>
|
||||
@ -58,24 +58,24 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between" [class]="{'column-xs': layout === StatusWidgetLayout.icon, 'column-lt-md': layout !== StatusWidgetLayout.icon}">
|
||||
<div>{{ 'widgets.status-widget.color-palette' | translate }}</div>
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center"
|
||||
[fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'"
|
||||
style="gap: 12px;">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row flex-wrap items-center justify-start gap-3 lt-sm:justify-between"
|
||||
[class.lt-md:justify-start]="layout === StatusWidgetLayout.icon"
|
||||
[class.lt-md:justify-between]="layout !== StatusWidgetLayout.icon">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}" translate>widgets.status-widget.primary</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="primaryColor">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical fxHide.lt-md></mat-divider>
|
||||
<div *ngIf="layout !== StatusWidgetLayout.icon" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical class="lt-md:!hidden"></mat-divider>
|
||||
<div *ngIf="layout !== StatusWidgetLayout.icon" class="flex flex-row items-center justify-start gap-2">
|
||||
<div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="secondaryColor">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider vertical fxHide.lt-sm [fxHide.lt-md]="layout !== StatusWidgetLayout.icon"></mat-divider>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-divider vertical class="lt-sm:!hidden" [class.lt-md:!hidden]="layout !== StatusWidgetLayout.icon"></mat-divider>
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.status-widget.background</div>
|
||||
<tb-background-settings formControlName="background">
|
||||
</tb-background-settings>
|
||||
@ -84,24 +84,24 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between" [class]="{'column-xs': layout === StatusWidgetLayout.icon, 'column-lt-md': layout !== StatusWidgetLayout.icon}">
|
||||
<div>{{ 'widgets.status-widget.disabled-color-palette' | translate }}</div>
|
||||
<div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center"
|
||||
[fxLayoutAlign.lt-md]="layout !== StatusWidgetLayout.icon ? 'space-between center': 'start center'"
|
||||
style="gap: 12px;">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row flex-wrap items-center justify-start gap-3 lt-sm:justify-between"
|
||||
[class.lt-md:justify-start]="layout === StatusWidgetLayout.icon"
|
||||
[class.lt-md:justify-between]="layout !== StatusWidgetLayout.icon">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div tb-hint-tooltip-icon="{{'widgets.status-widget.primary-color-hint' | translate}}" translate>widgets.status-widget.primary</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="primaryColorDisabled">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical fxHide.lt-md></mat-divider>
|
||||
<div *ngIf="layout !== StatusWidgetLayout.icon" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-divider *ngIf="layout !== StatusWidgetLayout.icon" vertical class="lt-md:!hidden"></mat-divider>
|
||||
<div *ngIf="layout !== StatusWidgetLayout.icon" class="flex flex-row items-center justify-start gap-2">
|
||||
<div tb-hint-tooltip-icon="{{'widgets.status-widget.secondary-color-hint' | translate}}" translate>widgets.status-widget.secondary</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="secondaryColorDisabled">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider vertical fxHide.lt-sm [fxHide.lt-md]="layout !== StatusWidgetLayout.icon"></mat-divider>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-divider vertical class="lt-sm:!hidden" [class.lt-md:!hidden]="layout !== StatusWidgetLayout.icon"></mat-divider>
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.status-widget.background</div>
|
||||
<tb-background-settings formControlName="backgroundDisabled">
|
||||
</tb-background-settings>
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<ng-container *ngFor="let behaviorGroup of behaviorGroups">
|
||||
<div *ngIf="behaviorGroup.title" class="tb-form-panel stroked">
|
||||
<mat-expansion-panel class="tb-settings" expanded>
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<div class="tb-form-panel-title">{{ behaviorGroup.title | customTranslate }}</div>
|
||||
</mat-panel-title>
|
||||
@ -36,7 +36,7 @@
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div [fxShow]="propertyRows?.length || appearanceProperties.children.length" class="tb-form-panel" formGroupName="properties">
|
||||
<div [class.!hidden]="!propertyRows?.length && !appearanceProperties.children.length" class="tb-form-panel" formGroupName="properties">
|
||||
<div class="tb-form-panel-title" translate>widget-config.appearance</div>
|
||||
<div #appearanceProperties><ng-content select=".tb-scada-symbol-appearance-properties"></ng-content></div>
|
||||
<div *ngFor="let propertyRow of propertyRows" class="tb-form-row space-between flex-wrap overflow-auto" [class]="propertyRow.rowClass">
|
||||
@ -49,7 +49,7 @@
|
||||
<div *ngIf="property.subLabel" class="tb-small-label">{{ property.subLabel | customTranslate }}</div>
|
||||
<mat-form-field *ngIf="property.type === ScadaSymbolPropertyType.text" [class]="property.fieldClass" appearance="outline" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="{{ property.id }}" [required]="property.required" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
|
||||
<div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
|
||||
</mat-form-field>
|
||||
<tb-color-input *ngIf="property.type === ScadaSymbolPropertyType.color"
|
||||
[required]="property.required"
|
||||
@ -67,7 +67,7 @@
|
||||
<input matInput formControlName="{{ property.id }}" [required]="property.required"
|
||||
[min]="property.min" [max]="property.max" [step]="property.step"
|
||||
type="number" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<div fxHide.lt-md matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
|
||||
<div class="lt-md:!hidden" matSuffix *ngIf="property.fieldSuffix">{{ property.fieldSuffix | customTranslate }}</div>
|
||||
</mat-form-field>
|
||||
<tb-font-settings *ngIf="property.type === ScadaSymbolPropertyType.font"
|
||||
[class]="property.fieldClass"
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<mat-form-field fxFlex [appearance]="inlineField ? 'outline': 'fill'"
|
||||
<mat-form-field class="flex-1" [appearance]="inlineField ? 'outline': 'fill'"
|
||||
[subscriptSizing]="inlineField ? 'dynamic' : 'fixed'"
|
||||
[class]="{'tb-inline-field': inlineField, 'flex': inlineField,
|
||||
'tb-suffix-absolute': (inlineField && !deviceKeyFormGroup.get('key').value)}"
|
||||
|
||||
@ -15,61 +15,61 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="knobControlWidgetSettingsForm" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="knobControlWidgetSettingsForm">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.common-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.knob-title</mat-label>
|
||||
<input matInput formControlName="title">
|
||||
</mat-form-field>
|
||||
</fieldset>
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.value-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.initial-value</mat-label>
|
||||
<input matInput type="number" formControlName="initialValue">
|
||||
</mat-form-field>
|
||||
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<section class="flex flex-row xs:flex-col gt-xs:gap-2">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.min-value</mat-label>
|
||||
<input required matInput type="number" formControlName="minValue">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.max-value</mat-label>
|
||||
<input required matInput type="number" formControlName="maxValue">
|
||||
</mat-form-field>
|
||||
</section>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.get-value-method</mat-label>
|
||||
<input required matInput formControlName="getValueMethod">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.set-value-method</mat-label>
|
||||
<input required matInput formControlName="setValueMethod">
|
||||
</mat-form-field>
|
||||
</fieldset>
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.request-timeout</mat-label>
|
||||
<input required matInput type="number" min="0" formControlName="requestTimeout">
|
||||
</mat-form-field>
|
||||
<fieldset class="fields-group fields-group-slider">
|
||||
<legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="knobControlWidgetSettingsForm.get('requestPersistent').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
class="flex items-stretch justify-center">
|
||||
{{ 'widgets.rpc.request-persistent' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
|
||||
<mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
|
||||
widget-config.advanced-settings
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
|
||||
<input matInput type="number" min="1000" formControlName="persistentPollingInterval">
|
||||
</mat-form-field>
|
||||
|
||||
@ -15,14 +15,14 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="ledIndicatorWidgetSettingsForm" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="ledIndicatorWidgetSettingsForm">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.common-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.led-title</mat-label>
|
||||
<input matInput formControlName="title">
|
||||
</mat-form-field>
|
||||
<tb-color-input fxFlex
|
||||
<tb-color-input class="flex-1"
|
||||
formControlName="ledColor"
|
||||
icon="format_color_fill"
|
||||
label="{{ 'widgets.rpc.led-color' | translate }}" openOnInput colorClearButton>
|
||||
@ -38,7 +38,7 @@
|
||||
<mat-slide-toggle formControlName="performCheckStatus" class="slide-block">
|
||||
{{ 'widgets.rpc.perform-rpc-status-check' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<mat-form-field [fxShow]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" fxFlex class="mat-block">
|
||||
<mat-form-field [class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.retrieve-led-status-value-method</mat-label>
|
||||
<mat-select formControlName="retrieveValueMethod">
|
||||
<mat-option [value]="'attribute'">
|
||||
@ -49,8 +49,8 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<tb-device-key-autocomplete fxFlex
|
||||
[fxShow]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value"
|
||||
<tb-device-key-autocomplete class="flex-1"
|
||||
[class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value"
|
||||
[aliasController]="aliasController"
|
||||
[targetDevice]="targetDevice"
|
||||
[keyType]="ledIndicatorWidgetSettingsForm.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries"
|
||||
@ -59,7 +59,7 @@
|
||||
required
|
||||
formControlName="valueAttribute">
|
||||
</tb-device-key-autocomplete>
|
||||
<mat-form-field [fxShow]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" fxFlex class="mat-block">
|
||||
<mat-form-field [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="flex-1 mat-block">
|
||||
<mat-label translate>widgets.rpc.check-status-method</mat-label>
|
||||
<input required matInput formControlName="checkStatusMethod">
|
||||
</mat-form-field>
|
||||
@ -71,28 +71,28 @@
|
||||
</tb-js-func>
|
||||
</fieldset>
|
||||
</fieldset>
|
||||
<fieldset [fxShow]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="fields-group">
|
||||
<fieldset [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.request-timeout</mat-label>
|
||||
<input matInput type="number" min="0" formControlName="requestTimeout">
|
||||
</mat-form-field>
|
||||
<fieldset class="fields-group fields-group-slider">
|
||||
<legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="ledIndicatorWidgetSettingsForm.get('requestPersistent').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
class="flex items-stretch justify-center">
|
||||
{{ 'widgets.rpc.request-persistent' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
|
||||
<mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
|
||||
widget-config.advanced-settings
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
|
||||
<input matInput type="number" min="1000" formControlName="persistentPollingInterval">
|
||||
</mat-form-field>
|
||||
|
||||
@ -15,16 +15,16 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="persistentTableWidgetSettingsForm" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="persistentTableWidgetSettingsForm">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.persistent-table.general-settings</legend>
|
||||
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
|
||||
<section fxLayout="column" fxFlex>
|
||||
<section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
|
||||
<section class="flex flex-1 flex-col">
|
||||
<mat-checkbox formControlName="enableFilter">
|
||||
{{ 'widgets.persistent-table.enable-filter' | translate }}
|
||||
</mat-checkbox>
|
||||
</section>
|
||||
<section fxLayout="column" fxFlex>
|
||||
<section class="flex flex-1 flex-col">
|
||||
<mat-checkbox formControlName="enableStickyHeader">
|
||||
{{ 'widgets.persistent-table.enable-sticky-header' | translate }}
|
||||
</mat-checkbox>
|
||||
@ -33,8 +33,8 @@
|
||||
</mat-checkbox>
|
||||
</section>
|
||||
</section>
|
||||
<section fxLayout="column" fxLayoutGap.gt-xs="8px">
|
||||
<mat-slide-toggle fxFlex formControlName="displayDetails">
|
||||
<section class="flex flex-col gt-xs:gap-2">
|
||||
<mat-slide-toggle class="flex-1" formControlName="displayDetails">
|
||||
{{ 'widgets.persistent-table.display-request-details' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<mat-slide-toggle formControlName="allowSendRequest">
|
||||
@ -43,16 +43,16 @@
|
||||
<mat-slide-toggle formControlName="allowDelete">
|
||||
{{ 'widgets.persistent-table.allow-delete-request' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap="8px" fxLayoutAlign.gt-xs="start center">
|
||||
<mat-slide-toggle fxFlex formControlName="displayPagination">
|
||||
<section class="flex flex-col gap-2 gt-xs:flex-row gt-xs:items-center gt-xs:justify-start">
|
||||
<mat-slide-toggle class="flex-1" formControlName="displayPagination">
|
||||
{{ 'widgets.table.display-pagination' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.table.default-page-size</mat-label>
|
||||
<input matInput type="number" min="1" step="1" formControlName="defaultPageSize">
|
||||
</mat-form-field>
|
||||
</section>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.table.default-sort-order</mat-label>
|
||||
<input matInput formControlName="defaultSortOrder">
|
||||
</mat-form-field>
|
||||
@ -60,7 +60,7 @@
|
||||
</fieldset>
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.persistent-table.columns-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.persistent-table.display-columns</mat-label>
|
||||
<mat-chip-grid #columnsChipList class="tb-drop-list"
|
||||
required
|
||||
|
||||
@ -15,10 +15,10 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="roundSwitchWidgetSettingsForm" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="roundSwitchWidgetSettingsForm">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.common-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.switch-title</mat-label>
|
||||
<input matInput formControlName="title">
|
||||
</mat-form-field>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="rpcButtonStyleFormGroup" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="rpcButtonStyleFormGroup">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.button-style</legend>
|
||||
<mat-slide-toggle formControlName="isRaised" class="slide-block">
|
||||
@ -24,13 +24,13 @@
|
||||
<mat-slide-toggle formControlName="isPrimary" class="slide-block">
|
||||
{{ 'widgets.rpc.button-primary' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
|
||||
<tb-color-input fxFlex
|
||||
<section class="flex flex-row xs:flex-col gt-xs:gap-2">
|
||||
<tb-color-input class="flex-1"
|
||||
formControlName="textColor"
|
||||
icon="format_color_fill"
|
||||
label="{{ 'widgets.rpc.button-text-color' | translate }}" openOnInput colorClearButton>
|
||||
</tb-color-input>
|
||||
<tb-color-input fxFlex
|
||||
<tb-color-input class="flex-1"
|
||||
formControlName="bgColor"
|
||||
icon="format_color_fill"
|
||||
label="{{ 'widgets.rpc.button-background-color' | translate }}" openOnInput colorClearButton>
|
||||
|
||||
@ -15,10 +15,10 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="rpcShellWidgetSettingsForm" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="rpcShellWidgetSettingsForm">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.request-timeout</mat-label>
|
||||
<input required matInput type="number" min="0" formControlName="requestTimeout">
|
||||
</mat-form-field>
|
||||
|
||||
@ -15,29 +15,29 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="rpcTerminalWidgetSettingsForm" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="rpcTerminalWidgetSettingsForm">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.request-timeout</mat-label>
|
||||
<input required matInput type="number" min="0" formControlName="requestTimeout">
|
||||
</mat-form-field>
|
||||
<fieldset class="fields-group fields-group-slider">
|
||||
<legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="rpcTerminalWidgetSettingsForm.get('requestPersistent').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
class="flex items-stretch justify-center">
|
||||
{{ 'widgets.rpc.request-persistent' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
|
||||
<mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
|
||||
widget-config.advanced-settings
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
|
||||
<input matInput type="number" min="1000" formControlName="persistentPollingInterval">
|
||||
</mat-form-field>
|
||||
|
||||
@ -15,14 +15,14 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="sendRpcWidgetSettingsForm" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="sendRpcWidgetSettingsForm">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.common-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.widget-title</mat-label>
|
||||
<input matInput formControlName="title">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.button-label</mat-label>
|
||||
<input matInput formControlName="buttonText">
|
||||
</mat-form-field>
|
||||
@ -32,7 +32,7 @@
|
||||
<mat-checkbox formControlName="oneWayElseTwoWay">
|
||||
{{ 'widgets.rpc.is-one-way-command' | translate }}
|
||||
</mat-checkbox>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.rpc-method</mat-label>
|
||||
<input matInput formControlName="methodName">
|
||||
</mat-form-field>
|
||||
@ -42,7 +42,7 @@
|
||||
validateOnChange
|
||||
formControlName="methodParams">
|
||||
</tb-json-content>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.request-timeout</mat-label>
|
||||
<input matInput type="number" min="0" formControlName="requestTimeout">
|
||||
</mat-form-field>
|
||||
@ -52,19 +52,19 @@
|
||||
<fieldset class="fields-group fields-group-slider">
|
||||
<legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="sendRpcWidgetSettingsForm.get('requestPersistent').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
class="flex items-stretch justify-center">
|
||||
{{ 'widgets.rpc.request-persistent' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
|
||||
<mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
|
||||
widget-config.advanced-settings
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
|
||||
<input matInput type="number" min="1000" formControlName="persistentPollingInterval">
|
||||
</mat-form-field>
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<div class="tb-form-panel-title" translate>widgets.single-switch.behavior</div>
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.initial-state-hint' | translate}}" translate>widgets.rpc-state.initial-state</div>
|
||||
<tb-get-value-action-settings fxFlex
|
||||
<tb-get-value-action-settings class="flex-1"
|
||||
panelTitle="{{ 'widgets.rpc-state.initial-state' | translate }}"
|
||||
[valueType]="valueType.BOOLEAN"
|
||||
trueLabel="{{ 'widgets.rpc-state.on' | translate }}"
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between">
|
||||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-on-hint' | translate}}" translate>widgets.rpc-state.turn-on</div>
|
||||
<tb-set-value-action-settings fxFlex
|
||||
<tb-set-value-action-settings class="flex-1"
|
||||
panelTitle="{{ 'widgets.rpc-state.turn-on' | translate }}"
|
||||
[aliasController]="aliasController"
|
||||
[targetDevice]="targetDevice"
|
||||
@ -42,7 +42,7 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between">
|
||||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.turn-off-hint' | translate}}" translate>widgets.rpc-state.turn-off</div>
|
||||
<tb-set-value-action-settings fxFlex
|
||||
<tb-set-value-action-settings class="flex-1"
|
||||
panelTitle="{{ 'widgets.rpc-state.turn-off' | translate }}"
|
||||
[aliasController]="aliasController"
|
||||
[targetDevice]="targetDevice"
|
||||
@ -51,7 +51,7 @@
|
||||
</div>
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
|
||||
<tb-get-value-action-settings fxFlex
|
||||
<tb-get-value-action-settings class="flex-1"
|
||||
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
|
||||
[valueType]="valueType.BOOLEAN"
|
||||
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
|
||||
@ -85,7 +85,7 @@
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showLabel">
|
||||
{{ 'widgets.single-switch.label' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
@ -102,11 +102,11 @@
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon">
|
||||
{{ 'widgets.single-switch.icon' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
|
||||
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select>
|
||||
<tb-css-unit-select class="flex-1" formControlName="iconSizeUnit"></tb-css-unit-select>
|
||||
<tb-material-icon-select asBoxInput
|
||||
iconClearButton
|
||||
[color]="singleSwitchWidgetSettingsForm.get('iconColor').value?.color"
|
||||
@ -134,22 +134,22 @@
|
||||
<div class="tb-form-panel-title" translate>widgets.single-switch.switch</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.single-switch.switch-color' | translate }}</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-3 lt-sm:justify-between">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.single-switch.on</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="switchColorOn">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider vertical fxHide.lt-sm></mat-divider>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-divider vertical class="lt-sm:!hidden"></mat-divider>
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.single-switch.off</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="switchColorOff">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider vertical fxHide.lt-sm></mat-divider>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-divider vertical class="lt-sm:!hidden"></mat-divider>
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.single-switch.disabled</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="switchColorDisabled">
|
||||
@ -159,22 +159,22 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.single-switch.tumbler-color' | translate }}</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutAlign.lt-sm="space-between center" fxLayoutGap="12px">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-3 lt-sm:justify-between">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.single-switch.on</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="tumblerColorOn">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider vertical fxHide.lt-sm></mat-divider>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-divider vertical class="lt-sm:!hidden"></mat-divider>
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.single-switch.off</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="tumblerColorOff">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider vertical fxHide.lt-sm></mat-divider>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<mat-divider vertical class="lt-sm:!hidden"></mat-divider>
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.single-switch.disabled</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="tumblerColorDisabled">
|
||||
@ -186,7 +186,7 @@
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOnLabel">
|
||||
{{ 'widgets.single-switch.on-label' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="onLabel" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
@ -203,7 +203,7 @@
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showOffLabel">
|
||||
{{ 'widgets.single-switch.off-label' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="offLabel" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
|
||||
@ -15,15 +15,15 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="slideToggleWidgetSettingsForm" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="slideToggleWidgetSettingsForm">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.common-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.slide-toggle-label</mat-label>
|
||||
<input matInput formControlName="title">
|
||||
</mat-form-field>
|
||||
<section fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<section class="flex flex-row xs:flex-col gt-xs:gap-2">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.label-position</mat-label>
|
||||
<mat-select formControlName="labelPosition">
|
||||
<mat-option [value]="'before'">
|
||||
@ -34,7 +34,7 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.slider-color</mat-label>
|
||||
<mat-select formControlName="sliderColor">
|
||||
<mat-option [value]="'primary'">
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
<div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.initial-value-hint' | translate}}" translate>widgets.slider.initial-value</div>
|
||||
<tb-get-value-action-settings fxFlex
|
||||
<tb-get-value-action-settings class="flex-1"
|
||||
panelTitle="{{ 'widgets.slider.initial-value' | translate }}"
|
||||
[valueType]="valueType.DOUBLE"
|
||||
[aliasController]="aliasController"
|
||||
@ -30,7 +30,7 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between">
|
||||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.slider.on-value-change-hint' | translate}}" translate>widgets.slider.on-value-change</div>
|
||||
<tb-set-value-action-settings fxFlex
|
||||
<tb-set-value-action-settings class="flex-1"
|
||||
panelTitle="{{ 'widgets.slider.on-value-change' | translate }}"
|
||||
[valueType]="valueType.DOUBLE"
|
||||
[aliasController]="aliasController"
|
||||
@ -40,7 +40,7 @@
|
||||
</div>
|
||||
<div class="tb-form-row">
|
||||
<div class="fixed-title-width" tb-hint-tooltip-icon="{{'widgets.rpc-state.disabled-state-hint' | translate}}" translate>widgets.rpc-state.disabled-state</div>
|
||||
<tb-get-value-action-settings fxFlex
|
||||
<tb-get-value-action-settings class="flex-1"
|
||||
panelTitle="{{ 'widgets.rpc-state.disabled-state' | translate }}"
|
||||
[valueType]="valueType.BOOLEAN"
|
||||
stateLabel="{{ 'widgets.rpc-state.disabled' | translate }}"
|
||||
@ -88,11 +88,11 @@
|
||||
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showValue">
|
||||
{{ 'widgets.slider.value' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<tb-unit-input class="flex" formControlName="valueUnits"></tb-unit-input>
|
||||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="valueDecimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
<div matSuffix fxHide.lt-md translate>widget-config.decimals-suffix</div>
|
||||
<div matSuffix class="lt-md:!hidden" translate>widget-config.decimals-suffix</div>
|
||||
</mat-form-field>
|
||||
<tb-font-settings formControlName="valueFont"
|
||||
[previewText]="valuePreviewFn">
|
||||
@ -105,7 +105,7 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.slider.range' | translate }}</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div class="tb-small-label" translate>widgets.slider.min</div>
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="tickMin" type="number" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
@ -120,7 +120,7 @@
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTicks">
|
||||
{{ 'widgets.slider.range-ticks' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<tb-font-settings formControlName="ticksFont"
|
||||
previewText="100">
|
||||
</tb-font-settings>
|
||||
@ -134,7 +134,7 @@
|
||||
<mat-slide-toggle class="mat-slide" formControlName="showTickMarks">
|
||||
{{ 'widgets.slider.tick-marks' | translate }}
|
||||
</mat-slide-toggle>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
|
||||
<input matInput formControlName="tickMarksCount" type="number" min="2"
|
||||
step="1" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
@ -146,15 +146,15 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.slider.colors' | translate }}</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-3">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.slider.main</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="mainColor">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider vertical></mat-divider>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.slider.background</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="backgroundColor">
|
||||
@ -164,15 +164,15 @@
|
||||
</div>
|
||||
<div class="tb-form-row space-between column-xs">
|
||||
<div>{{ 'widgets.rpc-state.disabled-state' | translate }}</div>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="12px">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-3">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.slider.main</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="mainColorDisabled">
|
||||
</tb-color-input>
|
||||
</div>
|
||||
<mat-divider vertical></mat-divider>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-row items-center justify-start gap-2">
|
||||
<div translate>widgets.slider.background</div>
|
||||
<tb-color-input asBoxInput
|
||||
formControlName="backgroundColorDisabled">
|
||||
@ -185,11 +185,11 @@
|
||||
<div class="fixed-title-width">
|
||||
{{ 'widgets.slider.left-icon' | translate }}
|
||||
</div>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
|
||||
<input matInput type="number" min="0" formControlName="leftIconSize" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
<tb-css-unit-select fxFlex formControlName="leftIconSizeUnit"></tb-css-unit-select>
|
||||
<tb-css-unit-select class="flex-1" formControlName="leftIconSizeUnit"></tb-css-unit-select>
|
||||
<tb-material-icon-select asBoxInput
|
||||
[color]="sliderWidgetSettingsForm.get('leftIconColor').value"
|
||||
formControlName="leftIcon">
|
||||
@ -204,11 +204,11 @@
|
||||
<div class="fixed-title-width">
|
||||
{{ 'widgets.slider.right-icon' | translate }}
|
||||
</div>
|
||||
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
|
||||
<div class="flex flex-1 flex-row items-center justify-start gap-2">
|
||||
<mat-form-field appearance="outline" class="number flex" subscriptSizing="dynamic">
|
||||
<input matInput type="number" min="0" formControlName="rightIconSize" placeholder="{{ 'widget-config.set' | translate }}">
|
||||
</mat-form-field>
|
||||
<tb-css-unit-select fxFlex formControlName="rightIconSizeUnit"></tb-css-unit-select>
|
||||
<tb-css-unit-select class="flex-1" formControlName="rightIconSizeUnit"></tb-css-unit-select>
|
||||
<tb-material-icon-select asBoxInput
|
||||
[color]="sliderWidgetSettingsForm.get('rightIconColor').value"
|
||||
formControlName="rightIcon">
|
||||
|
||||
@ -15,10 +15,10 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="switchControlWidgetSettingsForm" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="switchControlWidgetSettingsForm">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.common-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.switch-title</mat-label>
|
||||
<input matInput formControlName="title">
|
||||
</mat-form-field>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="switchRpcSettingsFormGroup" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="switchRpcSettingsFormGroup">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.value-settings</legend>
|
||||
<mat-checkbox formControlName="initialValue">
|
||||
@ -23,7 +23,7 @@
|
||||
</mat-checkbox>
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.retrieve-value-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.retrieve-value-method</mat-label>
|
||||
<mat-select formControlName="retrieveValueMethod">
|
||||
<mat-option [value]="'none'">
|
||||
@ -40,20 +40,20 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<tb-device-key-autocomplete fxFlex
|
||||
[fxShow]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'attribute' ||
|
||||
switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'timeseries'"
|
||||
<tb-device-key-autocomplete class="flex-1"
|
||||
[class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'attribute' &&
|
||||
switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'timeseries'"
|
||||
[aliasController]="aliasController"
|
||||
[targetDevice]="targetDevice"
|
||||
[keyType]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries"
|
||||
required
|
||||
formControlName="valueKey">
|
||||
</tb-device-key-autocomplete>
|
||||
<mat-form-field [fxShow]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'rpc'" fxFlex class="mat-block">
|
||||
<mat-form-field [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'rpc'" class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.get-value-method</mat-label>
|
||||
<input required matInput formControlName="getValueMethod">
|
||||
</mat-form-field>
|
||||
<tb-js-func [fxHide]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'none'"
|
||||
<tb-js-func [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'none'"
|
||||
formControlName="parseValueFunction"
|
||||
[globalVariables]="functionScopeVariables"
|
||||
[functionArgs]="['data']"
|
||||
@ -63,7 +63,7 @@
|
||||
</fieldset>
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.update-value-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.set-value-method</mat-label>
|
||||
<input required matInput formControlName="setValueMethod">
|
||||
</mat-form-field>
|
||||
@ -78,26 +78,26 @@
|
||||
</fieldset>
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.request-timeout</mat-label>
|
||||
<input matInput type="number" min="0" formControlName="requestTimeout">
|
||||
</mat-form-field>
|
||||
<fieldset class="fields-group fields-group-slider">
|
||||
<legend class="group-title" translate>widgets.rpc.persistent-rpc-settings</legend>
|
||||
<mat-expansion-panel class="tb-settings" [expanded]="switchRpcSettingsFormGroup.get('requestPersistent').value">
|
||||
<mat-expansion-panel-header fxLayout="row wrap">
|
||||
<mat-expansion-panel-header class="flex flex-row flex-wrap">
|
||||
<mat-panel-title>
|
||||
<mat-slide-toggle formControlName="requestPersistent" (click)="$event.stopPropagation()"
|
||||
fxLayoutAlign="center">
|
||||
class="flex items-stretch justify-center">
|
||||
{{ 'widgets.rpc.request-persistent' | translate }}
|
||||
</mat-slide-toggle>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
|
||||
<mat-panel-description class="flex items-center justify-end xs:!hidden" translate>
|
||||
widget-config.advanced-settings
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<ng-template matExpansionPanelContent>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
|
||||
<input matInput type="number" min="1000" formControlName="persistentPollingInterval">
|
||||
</mat-form-field>
|
||||
|
||||
@ -15,18 +15,18 @@
|
||||
limitations under the License.
|
||||
|
||||
-->
|
||||
<section class="tb-widget-settings" [formGroup]="updateDeviceAttributeWidgetSettingsForm" fxLayout="column">
|
||||
<section class="tb-widget-settings flex flex-col" [formGroup]="updateDeviceAttributeWidgetSettingsForm">
|
||||
<fieldset class="fields-group">
|
||||
<legend class="group-title" translate>widgets.rpc.common-settings</legend>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.widget-title</mat-label>
|
||||
<input matInput formControlName="title">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.button-label</mat-label>
|
||||
<input matInput formControlName="buttonText">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex class="mat-block">
|
||||
<mat-form-field class="mat-block flex-1">
|
||||
<mat-label translate>widgets.rpc.device-attribute-scope</mat-label>
|
||||
<mat-select formControlName="entityAttributeType">
|
||||
<mat-option [value]="'SERVER_SCOPE'">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user