简柏林 / thingskit · Commits

Commit b19bcdfe9a3b0eae6409654a4a7a92597767b8b1

Authored by Vladyslav_Prykhodko
1 parent 4c4ec36b

UI: Improvement time rendering profiles seated too many parameters

Inline Side-by-side
Showing 3 changed files with 113 additions and 99 deletions
... ... @@ -33,87 +33,91 @@
33 33 </button>
34 34 </div>
35 35 </mat-expansion-panel-header>
36   - <div fxLayout="column" fxLayoutGap="0.5em">
37   - <mat-divider></mat-divider>
38   - <mat-form-field fxFlex floatLabel="always">
39   - <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
40   - <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
41   - <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
42   - {{ 'device-profile.alarm-type-required' | translate }}
43   - </mat-error>
44   - <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('unique')">
45   - {{ 'device-profile.alarm-type-unique' | translate }}
46   - </mat-error>
47   - </mat-form-field>
48   - </div>
49   - <mat-expansion-panel class="advanced-settings" [expanded]="false">
50   - <mat-expansion-panel-header>
51   - <mat-panel-title>
52   - <div fxFlex fxLayout="row" fxLayoutAlign="end center">
53   - <div class="tb-small" translate>device-profile.advanced-settings</div>
54   - </div>
55   - </mat-panel-title>
56   - </mat-expansion-panel-header>
57   - <mat-checkbox formControlName="propagate" style="display: block; padding-bottom: 16px;">
58   - {{ 'device-profile.propagate-alarm' | translate }}
59   - </mat-checkbox>
60   - <section *ngIf="alarmFormGroup.get('propagate').value === true" style="padding-bottom: 1em;">
61   - <mat-form-field floatLabel="always" class="mat-block">
62   - <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
63   - <mat-chip-list #relationTypesChipList [disabled]="disabled">
64   - <mat-chip
65   - *ngFor="let key of alarmFormGroup.get('propagateRelationTypes').value;"
66   - (removed)="removeRelationType(key)">
67   - {{key}}
68   - <mat-icon matChipRemove>close</mat-icon>
69   - </mat-chip>
70   - <input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
71   - style="max-width: 200px;"
72   - [matChipInputFor]="relationTypesChipList"
73   - [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
74   - (matChipInputTokenEnd)="addRelationType($event)"
75   - [matChipInputAddOnBlur]="true">
76   - </mat-chip-list>
77   - <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
  36 + <ng-template matExpansionPanelContent>
  37 + <div fxLayout="column" fxLayoutGap="0.5em">
  38 + <mat-divider></mat-divider>
  39 + <mat-form-field fxFlex floatLabel="always">
  40 + <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
  41 + <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
  42 + <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
  43 + {{ 'device-profile.alarm-type-required' | translate }}
  44 + </mat-error>
  45 + <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('unique')">
  46 + {{ 'device-profile.alarm-type-unique' | translate }}
  47 + </mat-error>
78 48 </mat-form-field>
79   - </section>
80   - </mat-expansion-panel>
81   - <div fxFlex fxLayout="column">
82   - <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
83   - <tb-create-alarm-rules formControlName="createRules"
84   - style="padding-bottom: 16px;"
85   - [deviceProfileId]="deviceProfileId">
86   - </tb-create-alarm-rules>
87   - <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
88   - <div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
89   - [fxShow]="alarmFormGroup.get('clearRule').value"
90   - style="padding-bottom: 8px;">
91   - <div class="clear-alarm-rule" fxFlex fxLayout="row">
92   - <tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
93   - </tb-alarm-rule>
94   - </div>
95   - <button *ngIf="!disabled"
96   - mat-icon-button color="primary" style="min-width: 40px;"
97   - type="button"
98   - (click)="removeClearAlarmRule()"
99   - matTooltip="{{ 'action.remove' | translate }}"
100   - matTooltipPosition="above">
101   - <mat-icon>remove_circle_outline</mat-icon>
102   - </button>
103 49 </div>
104   - <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
105   - <span translate fxLayoutAlign="center center" style="margin: 16px 0"
106   - class="tb-prompt">device-profile.no-clear-alarm-rule</span>
107   - </div>
108   - <div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
109   - <button mat-stroked-button color="primary"
110   - type="button"
111   - (click)="addClearAlarmRule()"
112   - matTooltip="{{ 'device-profile.add-clear-alarm-rule' | translate }}"
113   - matTooltipPosition="above">
114   - <mat-icon class="button-icon">add_circle_outline</mat-icon>
115   - {{ 'device-profile.add-clear-alarm-rule' | translate }}
116   - </button>
  50 + <mat-expansion-panel class="advanced-settings" [expanded]="false">
  51 + <mat-expansion-panel-header>
  52 + <mat-panel-title>
  53 + <div fxFlex fxLayout="row" fxLayoutAlign="end center">
  54 + <div class="tb-small" translate>device-profile.advanced-settings</div>
  55 + </div>
  56 + </mat-panel-title>
  57 + </mat-expansion-panel-header>
  58 + <ng-template matExpansionPanelContent>
  59 + <mat-checkbox formControlName="propagate" style="display: block; padding-bottom: 16px;">
  60 + {{ 'device-profile.propagate-alarm' | translate }}
  61 + </mat-checkbox>
  62 + <section *ngIf="alarmFormGroup.get('propagate').value === true" style="padding-bottom: 1em;">
  63 + <mat-form-field floatLabel="always" class="mat-block">
  64 + <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
  65 + <mat-chip-list #relationTypesChipList [disabled]="disabled">
  66 + <mat-chip
  67 + *ngFor="let key of alarmFormGroup.get('propagateRelationTypes').value;"
  68 + (removed)="removeRelationType(key)">
  69 + {{key}}
  70 + <mat-icon matChipRemove>close</mat-icon>
  71 + </mat-chip>
  72 + <input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
  73 + style="max-width: 200px;"
  74 + [matChipInputFor]="relationTypesChipList"
  75 + [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
  76 + (matChipInputTokenEnd)="addRelationType($event)"
  77 + [matChipInputAddOnBlur]="true">
  78 + </mat-chip-list>
  79 + <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
  80 + </mat-form-field>
  81 + </section>
  82 + </ng-template>
  83 + </mat-expansion-panel>
  84 + <div fxFlex fxLayout="column">
  85 + <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
  86 + <tb-create-alarm-rules formControlName="createRules"
  87 + style="padding-bottom: 16px;"
  88 + [deviceProfileId]="deviceProfileId">
  89 + </tb-create-alarm-rules>
  90 + <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.clear-alarm-rule</div>
  91 + <div fxLayout="row" fxLayoutGap="8px;" fxLayoutAlign="start center"
  92 + [fxShow]="alarmFormGroup.get('clearRule').value"
  93 + style="padding-bottom: 8px;">
  94 + <div class="clear-alarm-rule" fxFlex fxLayout="row">
  95 + <tb-alarm-rule formControlName="clearRule" fxFlex [deviceProfileId]="deviceProfileId">
  96 + </tb-alarm-rule>
  97 + </div>
  98 + <button *ngIf="!disabled"
  99 + mat-icon-button color="primary" style="min-width: 40px;"
  100 + type="button"
  101 + (click)="removeClearAlarmRule()"
  102 + matTooltip="{{ 'action.remove' | translate }}"
  103 + matTooltipPosition="above">
  104 + <mat-icon>remove_circle_outline</mat-icon>
  105 + </button>
  106 + </div>
  107 + <div *ngIf="disabled && !alarmFormGroup.get('clearRule').value">
  108 + <span translate fxLayoutAlign="center center" style="margin: 16px 0"
  109 + class="tb-prompt">device-profile.no-clear-alarm-rule</span>
  110 + </div>
  111 + <div *ngIf="!disabled" [fxShow]="!alarmFormGroup.get('clearRule').value">
  112 + <button mat-stroked-button color="primary"
  113 + type="button"
  114 + (click)="addClearAlarmRule()"
  115 + matTooltip="{{ 'device-profile.add-clear-alarm-rule' | translate }}"
  116 + matTooltipPosition="above">
  117 + <mat-icon class="button-icon">add_circle_outline</mat-icon>
  118 + {{ 'device-profile.add-clear-alarm-rule' | translate }}
  119 + </button>
  120 + </div>
117 121 </div>
118   - </div>
  122 + </ng-template>
119 123 </mat-expansion-panel>
... ...
... ... @@ -91,10 +91,12 @@
91 91 <div translate>device-profile.profile-configuration</div>
92 92 </mat-panel-title>
93 93 </mat-expansion-panel-header>
94   - <tb-device-profile-configuration
95   - formControlName="configuration"
96   - required>
97   - </tb-device-profile-configuration>
  94 + <ng-template matExpansionPanelContent>
  95 + <tb-device-profile-configuration
  96 + formControlName="configuration"
  97 + required>
  98 + </tb-device-profile-configuration>
  99 + </ng-template>
98 100 </mat-expansion-panel>
99 101 <mat-expansion-panel *ngIf="displayTransportConfiguration" [expanded]="true">
100 102 <mat-expansion-panel-header>
... ... @@ -102,10 +104,12 @@
102 104 <div translate>device-profile.transport-configuration</div>
103 105 </mat-panel-title>
104 106 </mat-expansion-panel-header>
105   - <tb-device-profile-transport-configuration
106   - formControlName="transportConfiguration"
107   - required>
108   - </tb-device-profile-transport-configuration>
  107 + <ng-template matExpansionPanelContent>
  108 + <tb-device-profile-transport-configuration
  109 + formControlName="transportConfiguration"
  110 + required>
  111 + </tb-device-profile-transport-configuration>
  112 + </ng-template>
109 113 </mat-expansion-panel>
110 114 <mat-expansion-panel [expanded]="false">
111 115 <mat-expansion-panel-header>
... ... @@ -115,10 +119,12 @@
115 119 entityForm.get('profileData.alarms').value.length : 0} }}</div>
116 120 </mat-panel-title>
117 121 </mat-expansion-panel-header>
118   - <tb-device-profile-alarms
119   - formControlName="alarms"
120   - [deviceProfileId]="deviceProfileId">
121   - </tb-device-profile-alarms>
  122 + <ng-template matExpansionPanelContent>
  123 + <tb-device-profile-alarms
  124 + formControlName="alarms"
  125 + [deviceProfileId]="deviceProfileId">
  126 + </tb-device-profile-alarms>
  127 + </ng-template>
122 128 </mat-expansion-panel>
123 129 <mat-expansion-panel [expanded]="true">
124 130 <mat-expansion-panel-header>
... ... @@ -126,9 +132,11 @@
126 132 <div translate>device-profile.device-provisioning</div>
127 133 </mat-panel-title>
128 134 </mat-expansion-panel-header>
129   - <tb-device-profile-provision-configuration
130   - formControlName="provisionConfiguration">
131   - </tb-device-profile-provision-configuration>
  135 + <ng-template matExpansionPanelContent>
  136 + <tb-device-profile-provision-configuration
  137 + formControlName="provisionConfiguration">
  138 + </tb-device-profile-provision-configuration>
  139 + </ng-template>
132 140 </mat-expansion-panel>
133 141 </mat-accordion>
134 142 </div>
... ...
... ... @@ -22,9 +22,11 @@
22 22 <div translate>tenant-profile.profile-configuration</div>
23 23 </mat-panel-title>
24 24 </mat-expansion-panel-header>
25   - <tb-tenant-profile-configuration
26   - formControlName="configuration"
27   - required>
28   - </tb-tenant-profile-configuration>
  25 + <ng-template matExpansionPanelContent>
  26 + <tb-tenant-profile-configuration
  27 + formControlName="configuration"
  28 + required>
  29 + </tb-tenant-profile-configuration>
  30 + </ng-template>
29 31 </mat-expansion-panel>
30 32 </form>
... ...