简柏林 / thingskit · Commits

Commit c1823ff1e2b7ecc72faeefb49d300f0a3fcaf430

Authored by Vladyslav_Prykhodko
1 parent e196150d

UI: Refactoring widget settings

Inline Side-by-side
Showing 4 changed files with 269 additions and 280 deletions
@@ -38,9 +38,6 @@ @@ -38,9 +38,6 @@
38 </mat-form-field> 38 </mat-form-field>
39 </div> 39 </div>
40 <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row wrap" fxLayoutAlign="space-between center" fxLayoutGap="8px"> 40 <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row wrap" fxLayoutAlign="space-between center" fxLayoutGap="8px">
41 - <mat-checkbox formControlName="sortDataKeys" fxFlex="48">  
42 - {{ 'legend.sort-legend' | translate }}  
43 - </mat-checkbox>  
44 <mat-checkbox formControlName="showMin" fxFlex="48"> 41 <mat-checkbox formControlName="showMin" fxFlex="48">
45 {{ 'legend.show-min' | translate }} 42 {{ 'legend.show-min' | translate }}
46 </mat-checkbox> 43 </mat-checkbox>
@@ -53,5 +50,8 @@ @@ -53,5 +50,8 @@
53 <mat-checkbox formControlName="showTotal" fxFlex="48"> 50 <mat-checkbox formControlName="showTotal" fxFlex="48">
54 {{ 'legend.show-total' | translate }} 51 {{ 'legend.show-total' | translate }}
55 </mat-checkbox> 52 </mat-checkbox>
  53 + <mat-checkbox formControlName="sortDataKeys" fxFlex="48">
  54 + {{ 'legend.sort-legend' | translate }}
  55 + </mat-checkbox>
56 </div> 56 </div>
57 </form> 57 </form>
@@ -14,14 +14,7 @@ @@ -14,14 +14,7 @@
14 /// limitations under the License. 14 /// limitations under the License.
15 /// 15 ///
16 16
17 -import {  
18 - Component,  
19 - forwardRef,  
20 - Input,  
21 - OnDestroy,  
22 - OnInit,  
23 - ViewContainerRef  
24 -} from '@angular/core'; 17 +import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
25 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; 18 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
26 import { isDefined } from '@core/utils'; 19 import { isDefined } from '@core/utils';
27 import { 20 import {
@@ -32,6 +25,7 @@ import { @@ -32,6 +25,7 @@ import {
32 legendPositionTranslationMap 25 legendPositionTranslationMap
33 } from '@shared/models/widget.models'; 26 } from '@shared/models/widget.models';
34 import { Subscription } from 'rxjs'; 27 import { Subscription } from 'rxjs';
  28 +
35 // @dynamic 29 // @dynamic
36 @Component({ 30 @Component({
37 selector: 'tb-legend-config', 31 selector: 'tb-legend-config',
@@ -49,7 +43,6 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc @@ -49,7 +43,6 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
49 43
50 @Input() disabled: boolean; 44 @Input() disabled: boolean;
51 45
52 - legendSettings: LegendConfig;  
53 legendConfigForm: FormGroup; 46 legendConfigForm: FormGroup;
54 legendDirection = LegendDirection; 47 legendDirection = LegendDirection;
55 legendDirections = Object.keys(LegendDirection); 48 legendDirections = Object.keys(LegendDirection);
@@ -58,12 +51,11 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc @@ -58,12 +51,11 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
58 legendPositions = Object.keys(LegendPosition); 51 legendPositions = Object.keys(LegendPosition);
59 legendPositionTranslations = legendPositionTranslationMap; 52 legendPositionTranslations = legendPositionTranslationMap;
60 53
61 - legendSettingsChangesSubscription: Subscription;  
62 - 54 + private legendSettingsFormChanges$: Subscription;
  55 + private legendSettingsFormDirectionChanges$: Subscription;
63 private propagateChange = (_: any) => {}; 56 private propagateChange = (_: any) => {};
64 57
65 - constructor(public fb: FormBuilder,  
66 - public viewContainerRef: ViewContainerRef) { 58 + constructor(private fb: FormBuilder) {
67 } 59 }
68 60
69 ngOnInit(): void { 61 ngOnInit(): void {
@@ -76,9 +68,13 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc @@ -76,9 +68,13 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
76 showAvg: [null, []], 68 showAvg: [null, []],
77 showTotal: [null, []] 69 showTotal: [null, []]
78 }); 70 });
79 - this.legendConfigForm.get('direction').valueChanges.subscribe((direction: LegendDirection) => {  
80 - this.onDirectionChanged(direction);  
81 - }); 71 + this.legendSettingsFormDirectionChanges$ = this.legendConfigForm.get('direction').valueChanges
  72 + .subscribe((direction: LegendDirection) => {
  73 + this.onDirectionChanged(direction);
  74 + });
  75 + this.legendSettingsFormChanges$ = this.legendConfigForm.valueChanges.subscribe(
  76 + () => this.legendConfigUpdated()
  77 + );
82 } 78 }
83 79
84 private onDirectionChanged(direction: LegendDirection) { 80 private onDirectionChanged(direction: LegendDirection) {
@@ -93,7 +89,14 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc @@ -93,7 +89,14 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
93 } 89 }
94 90
95 ngOnDestroy(): void { 91 ngOnDestroy(): void {
96 - this.removeChangeSubscriptions(); 92 + if (this.legendSettingsFormDirectionChanges$) {
  93 + this.legendSettingsFormDirectionChanges$.unsubscribe();
  94 + this.legendSettingsFormDirectionChanges$ = null;
  95 + }
  96 + if (this.legendSettingsFormChanges$) {
  97 + this.legendSettingsFormChanges$.unsubscribe();
  98 + this.legendSettingsFormChanges$ = null;
  99 + }
97 } 100 }
98 101
99 registerOnChange(fn: any): void { 102 registerOnChange(fn: any): void {
@@ -112,39 +115,22 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc @@ -112,39 +115,22 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
112 } 115 }
113 } 116 }
114 117
115 - private removeChangeSubscriptions() {  
116 - if (this.legendSettingsChangesSubscription) {  
117 - this.legendSettingsChangesSubscription.unsubscribe();  
118 - this.legendSettingsChangesSubscription = null;  
119 - }  
120 - }  
121 -  
122 - private createChangeSubscriptions() {  
123 - this.legendSettingsChangesSubscription = this.legendConfigForm.valueChanges.subscribe(  
124 - () => this.legendConfigUpdated()  
125 - );  
126 - }  
127 -  
128 - writeValue(obj: LegendConfig): void {  
129 - this.legendSettings = obj;  
130 - this.removeChangeSubscriptions();  
131 - if (this.legendSettings) { 118 + writeValue(legendConfig: LegendConfig): void {
  119 + if (legendConfig) {
132 this.legendConfigForm.patchValue({ 120 this.legendConfigForm.patchValue({
133 - direction: this.legendSettings.direction,  
134 - position: this.legendSettings.position,  
135 - sortDataKeys: isDefined(this.legendSettings.sortDataKeys) ? this.legendSettings.sortDataKeys : false,  
136 - showMin: isDefined(this.legendSettings.showMin) ? this.legendSettings.showMin : false,  
137 - showMax: isDefined(this.legendSettings.showMax) ? this.legendSettings.showMax : false,  
138 - showAvg: isDefined(this.legendSettings.showAvg) ? this.legendSettings.showAvg : false,  
139 - showTotal: isDefined(this.legendSettings.showTotal) ? this.legendSettings.showTotal : false  
140 - }); 121 + direction: legendConfig.direction,
  122 + position: legendConfig.position,
  123 + sortDataKeys: isDefined(legendConfig.sortDataKeys) ? legendConfig.sortDataKeys : false,
  124 + showMin: isDefined(legendConfig.showMin) ? legendConfig.showMin : false,
  125 + showMax: isDefined(legendConfig.showMax) ? legendConfig.showMax : false,
  126 + showAvg: isDefined(legendConfig.showAvg) ? legendConfig.showAvg : false,
  127 + showTotal: isDefined(legendConfig.showTotal) ? legendConfig.showTotal : false
  128 + }, {emitEvent: false});
141 } 129 }
142 - this.onDirectionChanged(this.legendSettings.direction);  
143 - this.createChangeSubscriptions(); 130 + this.onDirectionChanged(legendConfig.direction);
144 } 131 }
145 132
146 private legendConfigUpdated() { 133 private legendConfigUpdated() {
147 - this.legendSettings = this.legendConfigForm.value;  
148 - this.propagateChange(this.legendSettings); 134 + this.propagateChange(this.legendConfigForm.value);
149 } 135 }
150 } 136 }
@@ -82,241 +82,241 @@ @@ -82,241 +82,241 @@
82 </mat-checkbox> 82 </mat-checkbox>
83 </div> 83 </div>
84 </div> 84 </div>
85 - <mat-expansion-panel class="tb-datasources" *ngIf="widgetType !== widgetTypes.rpc &&  
86 - widgetType !== widgetTypes.alarm &&  
87 - modelValue?.isDataEnabled" [expanded]="true">  
88 - <mat-expansion-panel-header>  
89 - <mat-panel-title fxLayout="column">  
90 - <div class="tb-panel-title" translate>widget-config.datasources</div>  
91 - <div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1"  
92 - class="tb-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div>  
93 - </mat-panel-title>  
94 - </mat-expansion-panel-header>  
95 - <div *ngIf="datasourcesFormArray().length === 0; else datasourcesTemplate">  
96 - <span translate fxLayoutAlign="center center"  
97 - class="tb-prompt">datasource.add-datasource-prompt</span>  
98 - </div>  
99 - <ng-template #datasourcesTemplate>  
100 - <div fxFlex fxLayout="row" fxLayoutAlign="start center">  
101 - <span style="width: 60px;"></span>  
102 - <div fxFlex fxLayout="row" fxLayoutAlign="start center"  
103 - style="padding: 0 0 0 10px; margin: 5px;">  
104 - <span translate style="min-width: 120px;">widget-config.datasource-type</span>  
105 - <span fxHide fxShow.gt-sm translate fxFlex  
106 - style="padding-left: 10px;">widget-config.datasource-parameters</span>  
107 - <span style="min-width: 40px;"></span>  
108 - </div> 85 + <mat-accordion multi>
  86 + <mat-expansion-panel class="tb-datasources" *ngIf="widgetType !== widgetTypes.rpc &&
  87 + widgetType !== widgetTypes.alarm &&
  88 + modelValue?.isDataEnabled" [expanded]="true">
  89 + <mat-expansion-panel-header>
  90 + <mat-panel-title fxLayout="column">
  91 + <div class="tb-panel-title" translate>widget-config.datasources</div>
  92 + <div *ngIf="modelValue?.typeParameters && modelValue?.typeParameters.maxDatasources > -1"
  93 + class="tb-panel-hint">{{ 'widget-config.maximum-datasources' | translate:{count: modelValue?.typeParameters.maxDatasources} }}</div>
  94 + </mat-panel-title>
  95 + </mat-expansion-panel-header>
  96 + <div *ngIf="datasourcesFormArray().length === 0; else datasourcesTemplate">
  97 + <span translate fxLayoutAlign="center center"
  98 + class="tb-prompt">datasource.add-datasource-prompt</span>
109 </div> 99 </div>
110 - <div style="overflow: auto; padding-bottom: 15px;">  
111 - <mat-list dndDropzone dndEffectAllowed="move"  
112 - (dndDrop)="onDatasourceDrop($event)"  
113 - [dndDisableIf]="disabled" formArrayName="datasources">  
114 - <mat-list-item dndPlaceholderRef  
115 - class="dndPlaceholder">  
116 - </mat-list-item>  
117 - <mat-list-item *ngFor="let datasourceControl of datasourcesFormArray().controls; let $index = index;"  
118 - [dndDraggable]="datasourceControl.value"  
119 - (dndMoved)="dndDatasourceMoved($index)"  
120 - [dndDisableIf]="disabled"  
121 - dndEffectAllowed="move">  
122 - <div fxFlex fxLayout="row" fxLayoutAlign="start center">  
123 - <div style="width: 60px;">  
124 - <button *ngIf="!disabled" mat-icon-button color="primary"  
125 - class="handle"  
126 - style="min-width: 40px; margin: 0"  
127 - dndHandle  
128 - matTooltip="{{ 'action.drag' | translate }}"  
129 - matTooltipPosition="above">  
130 - <mat-icon>drag_handle</mat-icon>  
131 - </button>  
132 - <span>{{$index + 1}}.</span>  
133 - </div>  
134 - <div class="mat-elevation-z4" fxFlex  
135 - fxLayout="row"  
136 - fxLayoutAlign="start center"  
137 - style="padding: 0 0 0 10px; margin: 5px;">  
138 - <section fxFlex  
139 - fxLayout="column"  
140 - fxLayoutAlign="center"  
141 - fxLayout.gt-sm="row"  
142 - fxLayoutAlign.gt-sm="start center">  
143 - <mat-form-field class="tb-datasource-type">  
144 - <mat-select [formControl]="datasourceControl.get('type')">  
145 - <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">  
146 - {{ datasourceTypesTranslations.get(datasourceType) | translate }}  
147 - </mat-option>  
148 - </mat-select>  
149 - </mat-form-field>  
150 - <section fxLayout="column" class="tb-datasource" [ngSwitch]="datasourceControl.get('type').value">  
151 - <ng-template [ngSwitchCase]="datasourceType.function">  
152 - <mat-form-field floatLabel="always"  
153 - class="tb-datasource-name" style="min-width: 200px;">  
154 - <mat-label></mat-label>  
155 - <input matInput  
156 - placeholder="{{ 'datasource.label' | translate }}"  
157 - [formControl]="datasourceControl.get('name')">  
158 - </mat-form-field>  
159 - </ng-template>  
160 - <ng-template [ngSwitchCase]="datasourceControl.get('type').value === datasourceType.entity ||  
161 - datasourceControl.get('type').value === datasourceType.entityCount ? datasourceControl.get('type').value : ''">  
162 - <tb-entity-alias-select  
163 - [showLabel]="true"  
164 - [tbRequired]="true"  
165 - [aliasController]="aliasController"  
166 - [formControl]="datasourceControl.get('entityAliasId')"  
167 - [callbacks]="widgetConfigCallbacks">  
168 - </tb-entity-alias-select>  
169 - <tb-filter-select  
170 - [showLabel]="true"  
171 - [aliasController]="aliasController"  
172 - [formControl]="datasourceControl.get('filterId')"  
173 - [callbacks]="widgetConfigCallbacks">  
174 - </tb-filter-select>  
175 - <mat-form-field *ngIf="datasourceControl.get('type').value === datasourceType.entityCount"  
176 - floatLabel="always"  
177 - class="tb-datasource-name no-border-top" style="min-width: 200px;">  
178 - <mat-label></mat-label>  
179 - <input matInput  
180 - placeholder="{{ 'datasource.label' | translate }}"  
181 - [formControl]="datasourceControl.get('name')">  
182 - </mat-form-field>  
183 - </ng-template> 100 + <ng-template #datasourcesTemplate>
  101 + <div fxFlex fxLayout="row" fxLayoutAlign="start center">
  102 + <span style="width: 60px;"></span>
  103 + <div fxFlex fxLayout="row" fxLayoutAlign="start center"
  104 + style="padding: 0 0 0 10px; margin: 5px;">
  105 + <span translate style="min-width: 120px;">widget-config.datasource-type</span>
  106 + <span fxHide fxShow.gt-sm translate fxFlex
  107 + style="padding-left: 10px;">widget-config.datasource-parameters</span>
  108 + <span style="min-width: 40px;"></span>
  109 + </div>
  110 + </div>
  111 + <div style="overflow: auto; padding-bottom: 15px;">
  112 + <mat-list dndDropzone dndEffectAllowed="move"
  113 + (dndDrop)="onDatasourceDrop($event)"
  114 + [dndDisableIf]="disabled" formArrayName="datasources">
  115 + <mat-list-item dndPlaceholderRef
  116 + class="dndPlaceholder">
  117 + </mat-list-item>
  118 + <mat-list-item *ngFor="let datasourceControl of datasourcesFormArray().controls; let $index = index;"
  119 + [dndDraggable]="datasourceControl.value"
  120 + (dndMoved)="dndDatasourceMoved($index)"
  121 + [dndDisableIf]="disabled"
  122 + dndEffectAllowed="move">
  123 + <div fxFlex fxLayout="row" fxLayoutAlign="start center">
  124 + <div style="width: 60px;">
  125 + <button *ngIf="!disabled" mat-icon-button color="primary"
  126 + class="handle"
  127 + style="min-width: 40px; margin: 0"
  128 + dndHandle
  129 + matTooltip="{{ 'action.drag' | translate }}"
  130 + matTooltipPosition="above">
  131 + <mat-icon>drag_handle</mat-icon>
  132 + </button>
  133 + <span>{{$index + 1}}.</span>
  134 + </div>
  135 + <div class="mat-elevation-z4" fxFlex
  136 + fxLayout="row"
  137 + fxLayoutAlign="start center"
  138 + style="padding: 0 0 0 10px; margin: 5px;">
  139 + <section fxFlex
  140 + fxLayout="column"
  141 + fxLayoutAlign="center"
  142 + fxLayout.gt-sm="row"
  143 + fxLayoutAlign.gt-sm="start center">
  144 + <mat-form-field class="tb-datasource-type">
  145 + <mat-select [formControl]="datasourceControl.get('type')">
  146 + <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
  147 + {{ datasourceTypesTranslations.get(datasourceType) | translate }}
  148 + </mat-option>
  149 + </mat-select>
  150 + </mat-form-field>
  151 + <section fxLayout="column" class="tb-datasource" [ngSwitch]="datasourceControl.get('type').value">
  152 + <ng-template [ngSwitchCase]="datasourceType.function">
  153 + <mat-form-field floatLabel="always"
  154 + class="tb-datasource-name" style="min-width: 200px;">
  155 + <mat-label></mat-label>
  156 + <input matInput
  157 + placeholder="{{ 'datasource.label' | translate }}"
  158 + [formControl]="datasourceControl.get('name')">
  159 + </mat-form-field>
  160 + </ng-template>
  161 + <ng-template [ngSwitchCase]="datasourceControl.get('type').value === datasourceType.entity ||
  162 + datasourceControl.get('type').value === datasourceType.entityCount ? datasourceControl.get('type').value : ''">
  163 + <tb-entity-alias-select
  164 + [showLabel]="true"
  165 + [tbRequired]="true"
  166 + [aliasController]="aliasController"
  167 + [formControl]="datasourceControl.get('entityAliasId')"
  168 + [callbacks]="widgetConfigCallbacks">
  169 + </tb-entity-alias-select>
  170 + <tb-filter-select
  171 + [showLabel]="true"
  172 + [aliasController]="aliasController"
  173 + [formControl]="datasourceControl.get('filterId')"
  174 + [callbacks]="widgetConfigCallbacks">
  175 + </tb-filter-select>
  176 + <mat-form-field *ngIf="datasourceControl.get('type').value === datasourceType.entityCount"
  177 + floatLabel="always"
  178 + class="tb-datasource-name no-border-top" style="min-width: 200px;">
  179 + <mat-label></mat-label>
  180 + <input matInput
  181 + placeholder="{{ 'datasource.label' | translate }}"
  182 + [formControl]="datasourceControl.get('name')">
  183 + </mat-form-field>
  184 + </ng-template>
  185 + </section>
  186 + <tb-data-keys class="tb-data-keys" fxFlex
  187 + [widgetType]="widgetType"
  188 + [datasourceType]="datasourceControl.get('type').value"
  189 + [maxDataKeys]="modelValue?.typeParameters?.maxDataKeys"
  190 + [optDataKeys]="modelValue?.typeParameters?.dataKeysOptional"
  191 + [aliasController]="aliasController"
  192 + [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
  193 + [callbacks]="widgetConfigCallbacks"
  194 + [entityAliasId]="datasourceControl.get('entityAliasId').value"
  195 + [formControl]="datasourceControl.get('dataKeys')">
  196 + </tb-data-keys>
184 </section> 197 </section>
185 - <tb-data-keys class="tb-data-keys" fxFlex  
186 - [widgetType]="widgetType"  
187 - [datasourceType]="datasourceControl.get('type').value"  
188 - [maxDataKeys]="modelValue?.typeParameters?.maxDataKeys"  
189 - [optDataKeys]="modelValue?.typeParameters?.dataKeysOptional"  
190 - [aliasController]="aliasController"  
191 - [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"  
192 - [callbacks]="widgetConfigCallbacks"  
193 - [entityAliasId]="datasourceControl.get('entityAliasId').value"  
194 - [formControl]="datasourceControl.get('dataKeys')">  
195 - </tb-data-keys>  
196 - </section>  
197 - <button [disabled]="isLoading$ | async"  
198 - type="button"  
199 - mat-icon-button color="primary"  
200 - style="min-width: 40px;"  
201 - (click)="removeDatasource($index)"  
202 - matTooltip="{{ 'widget-config.remove-datasource' | translate }}"  
203 - matTooltipPosition="above">  
204 - <mat-icon>close</mat-icon>  
205 - </button> 198 + <button [disabled]="isLoading$ | async"
  199 + type="button"
  200 + mat-icon-button color="primary"
  201 + style="min-width: 40px;"
  202 + (click)="removeDatasource($index)"
  203 + matTooltip="{{ 'widget-config.remove-datasource' | translate }}"
  204 + matTooltipPosition="above">
  205 + <mat-icon>close</mat-icon>
  206 + </button>
  207 + </div>
206 </div> 208 </div>
207 - </div>  
208 - </mat-list-item>  
209 - </mat-list> 209 + </mat-list-item>
  210 + </mat-list>
  211 + </div>
  212 + </ng-template>
  213 + <div fxFlex fxLayout="row" fxLayoutAlign="start center">
  214 + <button [disabled]="isLoading$ | async"
  215 + type="button"
  216 + mat-raised-button color="primary"
  217 + [fxShow]="modelValue?.typeParameters &&
  218 + (modelValue?.typeParameters.maxDatasources == -1 || datasourcesFormArray().controls.length < modelValue?.typeParameters.maxDatasources)"
  219 + (click)="addDatasource()"
  220 + matTooltip="{{ 'widget-config.add-datasource' | translate }}"
  221 + matTooltipPosition="above">
  222 + <mat-icon>add</mat-icon>
  223 + <span translate>action.add</span>
  224 + </button>
210 </div> 225 </div>
211 - </ng-template>  
212 - <div fxFlex fxLayout="row" fxLayoutAlign="start center">  
213 - <button [disabled]="isLoading$ | async"  
214 - type="button"  
215 - mat-raised-button color="primary"  
216 - [fxShow]="modelValue?.typeParameters &&  
217 - (modelValue?.typeParameters.maxDatasources == -1 || datasourcesFormArray().controls.length < modelValue?.typeParameters.maxDatasources)"  
218 - (click)="addDatasource()"  
219 - matTooltip="{{ 'widget-config.add-datasource' | translate }}"  
220 - matTooltipPosition="above">  
221 - <mat-icon>add</mat-icon>  
222 - <span translate>action.add</span>  
223 - </button>  
224 - </div>  
225 - </mat-expansion-panel>  
226 - <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.rpc &&  
227 - modelValue?.isDataEnabled" [expanded]="true">  
228 - <mat-expansion-panel-header>  
229 - <mat-panel-title>  
230 - {{ 'widget-config.target-device' | translate }}  
231 - </mat-panel-title>  
232 - </mat-expansion-panel-header>  
233 - <div [formGroup]="targetDeviceSettings" style="padding: 0 5px;">  
234 - <tb-entity-alias-select fxFlex  
235 - [tbRequired]="!widgetEditMode"  
236 - [aliasController]="aliasController"  
237 - [allowedEntityTypes]="[entityTypes.DEVICE]"  
238 - [callbacks]="widgetConfigCallbacks"  
239 - formControlName="targetDeviceAliasId">  
240 - </tb-entity-alias-select>  
241 - </div>  
242 - </mat-expansion-panel>  
243 - <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.alarm &&  
244 - modelValue?.isDataEnabled" [expanded]="true">  
245 - <mat-expansion-panel-header>  
246 - <mat-panel-title>  
247 - {{ 'widget-config.alarm-source' | translate }}  
248 - </mat-panel-title>  
249 - </mat-expansion-panel-header>  
250 - <div [formGroup]="alarmSourceSettings" style="padding: 0 5px;">  
251 - <section fxFlex  
252 - fxLayout="column"  
253 - fxLayoutAlign="center"  
254 - fxLayout.gt-sm="row"  
255 - fxLayoutAlign.gt-sm="start center">  
256 - <mat-form-field class="tb-datasource-type">  
257 - <mat-select formControlName="type">  
258 - <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">  
259 - {{ datasourceTypesTranslations.get(datasourceType) | translate }}  
260 - </mat-option>  
261 - </mat-select>  
262 - </mat-form-field>  
263 - <section class="tb-datasource" [ngSwitch]="alarmSourceSettings.get('type').value">  
264 - <ng-template [ngSwitchCase]="datasourceType.entity">  
265 - <tb-entity-alias-select  
266 - [showLabel]="true"  
267 - [tbRequired]="alarmSourceSettings.get('type').value === datasourceType.entity"  
268 - [aliasController]="aliasController"  
269 - formControlName="entityAliasId"  
270 - [callbacks]="widgetConfigCallbacks">  
271 - </tb-entity-alias-select>  
272 - <tb-filter-select  
273 - [showLabel]="true"  
274 - [aliasController]="aliasController"  
275 - formControlName="filterId"  
276 - [callbacks]="widgetConfigCallbacks">  
277 - </tb-filter-select>  
278 - </ng-template> 226 + </mat-expansion-panel>
  227 + <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.rpc &&
  228 + modelValue?.isDataEnabled" [expanded]="true">
  229 + <mat-expansion-panel-header>
  230 + <mat-panel-title>
  231 + {{ 'widget-config.target-device' | translate }}
  232 + </mat-panel-title>
  233 + </mat-expansion-panel-header>
  234 + <div [formGroup]="targetDeviceSettings" style="padding: 0 5px;">
  235 + <tb-entity-alias-select fxFlex
  236 + [tbRequired]="!widgetEditMode"
  237 + [aliasController]="aliasController"
  238 + [allowedEntityTypes]="[entityTypes.DEVICE]"
  239 + [callbacks]="widgetConfigCallbacks"
  240 + formControlName="targetDeviceAliasId">
  241 + </tb-entity-alias-select>
  242 + </div>
  243 + </mat-expansion-panel>
  244 + <mat-expansion-panel class="tb-datasources" *ngIf="widgetType === widgetTypes.alarm &&
  245 + modelValue?.isDataEnabled" [expanded]="true">
  246 + <mat-expansion-panel-header>
  247 + <mat-panel-title>
  248 + {{ 'widget-config.alarm-source' | translate }}
  249 + </mat-panel-title>
  250 + </mat-expansion-panel-header>
  251 + <div [formGroup]="alarmSourceSettings" style="padding: 0 5px;">
  252 + <section fxFlex
  253 + fxLayout="column"
  254 + fxLayoutAlign="center"
  255 + fxLayout.gt-sm="row"
  256 + fxLayoutAlign.gt-sm="start center">
  257 + <mat-form-field class="tb-datasource-type">
  258 + <mat-select formControlName="type">
  259 + <mat-option *ngFor="let datasourceType of datasourceTypes" [value]="datasourceType">
  260 + {{ datasourceTypesTranslations.get(datasourceType) | translate }}
  261 + </mat-option>
  262 + </mat-select>
  263 + </mat-form-field>
  264 + <section class="tb-datasource" [ngSwitch]="alarmSourceSettings.get('type').value">
  265 + <ng-template [ngSwitchCase]="datasourceType.entity">
  266 + <tb-entity-alias-select
  267 + [showLabel]="true"
  268 + [tbRequired]="alarmSourceSettings.get('type').value === datasourceType.entity"
  269 + [aliasController]="aliasController"
  270 + formControlName="entityAliasId"
  271 + [callbacks]="widgetConfigCallbacks">
  272 + </tb-entity-alias-select>
  273 + <tb-filter-select
  274 + [showLabel]="true"
  275 + [aliasController]="aliasController"
  276 + formControlName="filterId"
  277 + [callbacks]="widgetConfigCallbacks">
  278 + </tb-filter-select>
  279 + </ng-template>
  280 + </section>
  281 + <tb-data-keys class="tb-data-keys" fxFlex
  282 + [widgetType]="widgetType"
  283 + [datasourceType]="alarmSourceSettings.get('type').value"
  284 + [aliasController]="aliasController"
  285 + [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"
  286 + [callbacks]="widgetConfigCallbacks"
  287 + [entityAliasId]="alarmSourceSettings.get('entityAliasId').value"
  288 + formControlName="dataKeys">
  289 + </tb-data-keys>
279 </section> 290 </section>
280 - <tb-data-keys class="tb-data-keys" fxFlex  
281 - [widgetType]="widgetType"  
282 - [datasourceType]="alarmSourceSettings.get('type').value"  
283 - [aliasController]="aliasController"  
284 - [datakeySettingsSchema]="modelValue?.dataKeySettingsSchema"  
285 - [callbacks]="widgetConfigCallbacks"  
286 - [entityAliasId]="alarmSourceSettings.get('entityAliasId').value"  
287 - formControlName="dataKeys">  
288 - </tb-data-keys>  
289 - </section>  
290 - </div>  
291 - </mat-expansion-panel>  
292 - </div>  
293 - <div [formGroup]="widgetSettings" class="mat-content mat-padding" fxLayout="column" fxLayoutGap="8px">  
294 - <mat-expansion-panel>  
295 - <mat-expansion-panel-header>  
296 - <mat-panel-title translate>widget-config.data-settings</mat-panel-title>  
297 - </mat-expansion-panel-header>  
298 - <ng-template matExpansionPanelContent>  
299 - <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"  
300 - fxLayoutGap="8px">  
301 - <mat-form-field fxFlex>  
302 - <mat-label translate>widget-config.units</mat-label>  
303 - <input matInput formControlName="units">  
304 - </mat-form-field>  
305 - <mat-form-field fxFlex>  
306 - <mat-label translate>widget-config.decimals</mat-label>  
307 - <input matInput formControlName="decimals" type="number" min="0" max="15" step="1">  
308 - </mat-form-field>  
309 </div> 291 </div>
310 - </ng-template>  
311 - </mat-expansion-panel> 292 + </mat-expansion-panel>
  293 + <mat-expansion-panel [formGroup]="widgetSettings">
  294 + <mat-expansion-panel-header>
  295 + <mat-panel-title translate>widget-config.data-settings</mat-panel-title>
  296 + </mat-expansion-panel-header>
  297 + <ng-template matExpansionPanelContent>
  298 + <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
  299 + fxLayoutGap="8px">
  300 + <mat-form-field fxFlex>
  301 + <mat-label translate>widget-config.units</mat-label>
  302 + <input matInput formControlName="units">
  303 + </mat-form-field>
  304 + <mat-form-field fxFlex>
  305 + <mat-label translate>widget-config.decimals</mat-label>
  306 + <input matInput formControlName="decimals" type="number" min="0" max="15" step="1">
  307 + </mat-form-field>
  308 + </div>
  309 + </ng-template>
  310 + </mat-expansion-panel>
  311 + </mat-accordion>
312 </div> 312 </div>
313 </mat-tab> 313 </mat-tab>
314 <mat-tab label="{{ 'widget-config.settings' | translate }}"> 314 <mat-tab label="{{ 'widget-config.settings' | translate }}">
315 <div class="mat-content mat-padding" fxLayout="column"> 315 <div class="mat-content mat-padding" fxLayout="column">
316 <div [formGroup]="widgetSettings" fxLayout="column"> 316 <div [formGroup]="widgetSettings" fxLayout="column">
317 - <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px"> 317 + <fieldset class="fields-group" fxLayout="column">
318 <legend class="group-title" translate>widget-config.title</legend> 318 <legend class="group-title" translate>widget-config.title</legend>
319 - <mat-slide-toggle formControlName="showTitle"> 319 + <mat-slide-toggle formControlName="showTitle" style="margin: 8px 0">
320 {{ 'widget-config.display-title' | translate }} 320 {{ 'widget-config.display-title' | translate }}
321 </mat-slide-toggle> 321 </mat-slide-toggle>
322 <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center" 322 <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
@@ -330,7 +330,7 @@ @@ -330,7 +330,7 @@
330 <input matInput formControlName="titleTooltip"> 330 <input matInput formControlName="titleTooltip">
331 </mat-form-field> 331 </mat-form-field>
332 </div> 332 </div>
333 - <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px"> 333 + <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px" style="margin: 0">
334 <legend class="group-title" translate>widget-config.title-icon</legend> 334 <legend class="group-title" translate>widget-config.title-icon</legend>
335 <mat-slide-toggle formControlName="showTitleIcon"> 335 <mat-slide-toggle formControlName="showTitleIcon">
336 {{ 'widget-config.display-icon' | translate }} 336 {{ 'widget-config.display-icon' | translate }}
@@ -368,10 +368,10 @@ @@ -368,10 +368,10 @@
368 </ng-template> 368 </ng-template>
369 </mat-expansion-panel> 369 </mat-expansion-panel>
370 </fieldset> 370 </fieldset>
371 - <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px"> 371 + <fieldset class="fields-group" fxLayout="column">
372 <legend class="group-title" translate>widget-config.widget-style</legend> 372 <legend class="group-title" translate>widget-config.widget-style</legend>
373 <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-md="row" fxLayoutAlign.gt-md="start center" 373 <div fxLayout="column" fxLayoutAlign="center" fxLayout.gt-md="row" fxLayoutAlign.gt-md="start center"
374 - fxFlex="100%" fxLayoutGap="8px"> 374 + fxFlex="100%" fxLayoutGap="8px" class="tb-widget-style">
375 <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center" 375 <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
376 fxLayoutGap="8px" fxFlex.gt-md> 376 fxLayoutGap="8px" fxFlex.gt-md>
377 <tb-color-input fxFlex 377 <tb-color-input fxFlex
@@ -399,7 +399,7 @@ @@ -399,7 +399,7 @@
399 </mat-form-field> 399 </mat-form-field>
400 </div> 400 </div>
401 </div> 401 </div>
402 - <mat-slide-toggle formControlName="dropShadow"> 402 + <mat-slide-toggle formControlName="dropShadow" style="margin-bottom: 8px">
403 {{ 'widget-config.drop-shadow' | translate }} 403 {{ 'widget-config.drop-shadow' | translate }}
404 </mat-slide-toggle> 404 </mat-slide-toggle>
405 <mat-slide-toggle formControlName="enableFullscreen"> 405 <mat-slide-toggle formControlName="enableFullscreen">
@@ -421,7 +421,7 @@ @@ -421,7 +421,7 @@
421 </ng-template> 421 </ng-template>
422 </mat-expansion-panel> 422 </mat-expansion-panel>
423 </fieldset> 423 </fieldset>
424 - <fieldset class="fields-group fields-group-slider" fxLayout="column" fxLayoutGap="8px"> 424 + <fieldset class="fields-group fields-group-slider" fxLayout="column">
425 <legend class="group-title" translate>widget-config.legend</legend> 425 <legend class="group-title" translate>widget-config.legend</legend>
426 <mat-expansion-panel class="tb-settings"> 426 <mat-expansion-panel class="tb-settings">
427 <mat-expansion-panel-header fxLayout="row wrap"> 427 <mat-expansion-panel-header fxLayout="row wrap">
@@ -439,7 +439,7 @@ @@ -439,7 +439,7 @@
439 </ng-template> 439 </ng-template>
440 </mat-expansion-panel> 440 </mat-expansion-panel>
441 </fieldset> 441 </fieldset>
442 - <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider" fxLayout="column" fxLayoutGap="8px"> 442 + <fieldset [formGroup]="layoutSettings" class="fields-group fields-group-slider" fxLayout="column">
443 <legend class="group-title" translate>widget-config.mobile-mode-settings</legend> 443 <legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
444 <mat-expansion-panel class="tb-settings"> 444 <mat-expansion-panel class="tb-settings">
445 <mat-expansion-panel-header> 445 <mat-expansion-panel-header>
@@ -85,6 +85,9 @@ @@ -85,6 +85,9 @@
85 padding: 0 16px 8px; 85 padding: 0 16px 8px;
86 } 86 }
87 } 87 }
  88 + .tb-widget-style {
  89 + margin-top: 16px;
  90 + }
88 } 91 }
89 } 92 }
90 93
@@ -128,10 +131,10 @@ @@ -128,10 +131,10 @@
128 align-items: center; 131 align-items: center;
129 } 132 }
130 .mat-expansion-panel-body{ 133 .mat-expansion-panel-body{
131 - padding: 0 0 16px; 134 + padding: 0;
132 } 135 }
133 .tb-json-object-panel { 136 .tb-json-object-panel {
134 - margin: 0; 137 + margin: 0 0 8px;
135 } 138 }
136 .mat-checkbox-layout { 139 .mat-checkbox-layout {
137 margin: 5px 0; 140 margin: 5px 0;