简柏林 / thingskit · Commits

Commit 0117330be12b4faf9794d065f6fb4e99e332b845

Authored by Igor Kulikov
Committed by GitHub
2 parents 77d5e6c4 b19bcdfe

Merge pull request #3889 from vvlladd28/improvement/show-many/alarm0rules 

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,87 +33,91 @@
33 </button> 33 </button>
34 </div> 34 </div>
35 </mat-expansion-panel-header> 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 </mat-form-field> 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 </div> 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 </div> 121 </div>
118 - </div> 122 + </ng-template>
119 </mat-expansion-panel> 123 </mat-expansion-panel>
@@ -91,10 +91,12 @@ @@ -91,10 +91,12 @@
91 <div translate>device-profile.profile-configuration</div> 91 <div translate>device-profile.profile-configuration</div>
92 </mat-panel-title> 92 </mat-panel-title>
93 </mat-expansion-panel-header> 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 </mat-expansion-panel> 100 </mat-expansion-panel>
99 <mat-expansion-panel *ngIf="displayTransportConfiguration" [expanded]="true"> 101 <mat-expansion-panel *ngIf="displayTransportConfiguration" [expanded]="true">
100 <mat-expansion-panel-header> 102 <mat-expansion-panel-header>
@@ -102,10 +104,12 @@ @@ -102,10 +104,12 @@
102 <div translate>device-profile.transport-configuration</div> 104 <div translate>device-profile.transport-configuration</div>
103 </mat-panel-title> 105 </mat-panel-title>
104 </mat-expansion-panel-header> 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 </mat-expansion-panel> 113 </mat-expansion-panel>
110 <mat-expansion-panel [expanded]="false"> 114 <mat-expansion-panel [expanded]="false">
111 <mat-expansion-panel-header> 115 <mat-expansion-panel-header>
@@ -115,10 +119,12 @@ @@ -115,10 +119,12 @@
115 entityForm.get('profileData.alarms').value.length : 0} }}</div> 119 entityForm.get('profileData.alarms').value.length : 0} }}</div>
116 </mat-panel-title> 120 </mat-panel-title>
117 </mat-expansion-panel-header> 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 </mat-expansion-panel> 128 </mat-expansion-panel>
123 <mat-expansion-panel [expanded]="true"> 129 <mat-expansion-panel [expanded]="true">
124 <mat-expansion-panel-header> 130 <mat-expansion-panel-header>
@@ -126,9 +132,11 @@ @@ -126,9 +132,11 @@
126 <div translate>device-profile.device-provisioning</div> 132 <div translate>device-profile.device-provisioning</div>
127 </mat-panel-title> 133 </mat-panel-title>
128 </mat-expansion-panel-header> 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 </mat-expansion-panel> 140 </mat-expansion-panel>
133 </mat-accordion> 141 </mat-accordion>
134 </div> 142 </div>
@@ -22,9 +22,11 @@ @@ -22,9 +22,11 @@
22 <div translate>tenant-profile.profile-configuration</div> 22 <div translate>tenant-profile.profile-configuration</div>
23 </mat-panel-title> 23 </mat-panel-title>
24 </mat-expansion-panel-header> 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 </mat-expansion-panel> 31 </mat-expansion-panel>
30 </form> 32 </form>