简柏林 / 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 38 </mat-form-field>
39 39 </div>
40 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 41 <mat-checkbox formControlName="showMin" fxFlex="48">
45 42 {{ 'legend.show-min' | translate }}
46 43 </mat-checkbox>
... ... @@ -53,5 +50,8 @@
53 50 <mat-checkbox formControlName="showTotal" fxFlex="48">
54 51 {{ 'legend.show-total' | translate }}
55 52 </mat-checkbox>
  53 + <mat-checkbox formControlName="sortDataKeys" fxFlex="48">
  54 + {{ 'legend.sort-legend' | translate }}
  55 + </mat-checkbox>
56 56 </div>
57 57 </form>
... ...
... ... @@ -14,14 +14,7 @@
14 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 18 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
26 19 import { isDefined } from '@core/utils';
27 20 import {
... ... @@ -32,6 +25,7 @@ import {
32 25 legendPositionTranslationMap
33 26 } from '@shared/models/widget.models';
34 27 import { Subscription } from 'rxjs';
  28 +
35 29 // @dynamic
36 30 @Component({
37 31 selector: 'tb-legend-config',
... ... @@ -49,7 +43,6 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
49 43
50 44 @Input() disabled: boolean;
51 45
52   - legendSettings: LegendConfig;
53 46 legendConfigForm: FormGroup;
54 47 legendDirection = LegendDirection;
55 48 legendDirections = Object.keys(LegendDirection);
... ... @@ -58,12 +51,11 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
58 51 legendPositions = Object.keys(LegendPosition);
59 52 legendPositionTranslations = legendPositionTranslationMap;
60 53
61   - legendSettingsChangesSubscription: Subscription;
62   -
  54 + private legendSettingsFormChanges$: Subscription;
  55 + private legendSettingsFormDirectionChanges$: Subscription;
63 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 61 ngOnInit(): void {
... ... @@ -76,9 +68,13 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
76 68 showAvg: [null, []],
77 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 80 private onDirectionChanged(direction: LegendDirection) {
... ... @@ -93,7 +89,14 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
93 89 }
94 90
95 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 102 registerOnChange(fn: any): void {
... ... @@ -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 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 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 82 </mat-checkbox>
83 83 </div>
84 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 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 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 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 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 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 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 312 </div>
313 313 </mat-tab>
314 314 <mat-tab label="{{ 'widget-config.settings' | translate }}">
315 315 <div class="mat-content mat-padding" fxLayout="column">
316 316 <div [formGroup]="widgetSettings" fxLayout="column">
317   - <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
  317 + <fieldset class="fields-group" fxLayout="column">
318 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 320 {{ 'widget-config.display-title' | translate }}
321 321 </mat-slide-toggle>
322 322 <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
... ... @@ -330,7 +330,7 @@
330 330 <input matInput formControlName="titleTooltip">
331 331 </mat-form-field>
332 332 </div>
333   - <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
  333 + <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px" style="margin: 0">
334 334 <legend class="group-title" translate>widget-config.title-icon</legend>
335 335 <mat-slide-toggle formControlName="showTitleIcon">
336 336 {{ 'widget-config.display-icon' | translate }}
... ... @@ -368,10 +368,10 @@
368 368 </ng-template>
369 369 </mat-expansion-panel>
370 370 </fieldset>
371   - <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
  371 + <fieldset class="fields-group" fxLayout="column">
372 372 <legend class="group-title" translate>widget-config.widget-style</legend>
373 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 375 <div fxLayout.xs="column" fxLayoutAlign.xs="center" fxLayout="row" fxLayoutAlign="start center"
376 376 fxLayoutGap="8px" fxFlex.gt-md>
377 377 <tb-color-input fxFlex
... ... @@ -399,7 +399,7 @@
399 399 </mat-form-field>
400 400 </div>
401 401 </div>
402   - <mat-slide-toggle formControlName="dropShadow">
  402 + <mat-slide-toggle formControlName="dropShadow" style="margin-bottom: 8px">
403 403 {{ 'widget-config.drop-shadow' | translate }}
404 404 </mat-slide-toggle>
405 405 <mat-slide-toggle formControlName="enableFullscreen">
... ... @@ -421,7 +421,7 @@
421 421 </ng-template>
422 422 </mat-expansion-panel>
423 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 425 <legend class="group-title" translate>widget-config.legend</legend>
426 426 <mat-expansion-panel class="tb-settings">
427 427 <mat-expansion-panel-header fxLayout="row wrap">
... ... @@ -439,7 +439,7 @@
439 439 </ng-template>
440 440 </mat-expansion-panel>
441 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 443 <legend class="group-title" translate>widget-config.mobile-mode-settings</legend>
444 444 <mat-expansion-panel class="tb-settings">
445 445 <mat-expansion-panel-header>
... ...
... ... @@ -85,6 +85,9 @@
85 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 131 align-items: center;
129 132 }
130 133 .mat-expansion-panel-body{
131   - padding: 0 0 16px;
  134 + padding: 0;
132 135 }
133 136 .tb-json-object-panel {
134   - margin: 0;
  137 + margin: 0 0 8px;
135 138 }
136 139 .mat-checkbox-layout {
137 140 margin: 5px 0;
... ...