Commit 29b9682ff1b107fc4cce29553d3894a569d7fdc8
1 parent
16022521
UI: Added device profile show settings in edit mode
Showing
2 changed files
with
77 additions
and
0 deletions
... | ... | @@ -68,6 +68,65 @@ |
68 | 68 | <mat-label translate>device-profile.description</mat-label> |
69 | 69 | <textarea matInput formControlName="description" rows="2"></textarea> |
70 | 70 | </mat-form-field> |
71 | + <mat-form-field *ngIf="standalone" class="mat-block"> | |
72 | + <mat-label translate>device-profile.transport-type</mat-label> | |
73 | + <mat-select formControlName="transportType" required> | |
74 | + <mat-option *ngFor="let type of deviceTransportTypes" [value]="type"> | |
75 | + {{deviceTransportTypeTranslations.get(type) | translate}} | |
76 | + </mat-option> | |
77 | + </mat-select> | |
78 | + <mat-error *ngIf="entityForm.get('transportType').hasError('required')"> | |
79 | + {{ 'device-profile.transport-type-required' | translate }} | |
80 | + </mat-error> | |
81 | + </mat-form-field> | |
82 | + <div formGroupName="profileData" *ngIf="standalone" style="padding-bottom: 16px;"> | |
83 | + <mat-accordion multi="true"> | |
84 | + <mat-expansion-panel *ngIf="displayProfileConfiguration" [expanded]="true"> | |
85 | + <mat-expansion-panel-header> | |
86 | + <mat-panel-title> | |
87 | + <div translate>device-profile.profile-configuration</div> | |
88 | + </mat-panel-title> | |
89 | + </mat-expansion-panel-header> | |
90 | + <tb-device-profile-configuration | |
91 | + formControlName="configuration" | |
92 | + required> | |
93 | + </tb-device-profile-configuration> | |
94 | + </mat-expansion-panel> | |
95 | + <mat-expansion-panel *ngIf="displayTransportConfiguration" [expanded]="true"> | |
96 | + <mat-expansion-panel-header> | |
97 | + <mat-panel-title> | |
98 | + <div translate>device-profile.transport-configuration</div> | |
99 | + </mat-panel-title> | |
100 | + </mat-expansion-panel-header> | |
101 | + <tb-device-profile-transport-configuration | |
102 | + formControlName="transportConfiguration" | |
103 | + required> | |
104 | + </tb-device-profile-transport-configuration> | |
105 | + </mat-expansion-panel> | |
106 | + <mat-expansion-panel [expanded]="false"> | |
107 | + <mat-expansion-panel-header> | |
108 | + <mat-panel-title> | |
109 | + <div>{{'device-profile.alarm-rules-with-count' | translate: | |
110 | + {count: entityForm.get('profileData.alarms').value ? | |
111 | + entityForm.get('profileData.alarms').value.length : 0} }}</div> | |
112 | + </mat-panel-title> | |
113 | + </mat-expansion-panel-header> | |
114 | + <tb-device-profile-alarms | |
115 | + formControlName="alarms"> | |
116 | + </tb-device-profile-alarms> | |
117 | + </mat-expansion-panel> | |
118 | + <mat-expansion-panel [expanded]="true"> | |
119 | + <mat-expansion-panel-header> | |
120 | + <mat-panel-title> | |
121 | + <div translate>device-profile.device-provisioning</div> | |
122 | + </mat-panel-title> | |
123 | + </mat-expansion-panel-header> | |
124 | + <tb-device-profile-provision-configuration | |
125 | + formControlName="provisionConfiguration"> | |
126 | + </tb-device-profile-provision-configuration> | |
127 | + </mat-expansion-panel> | |
128 | + </mat-accordion> | |
129 | + </div> | |
71 | 130 | </fieldset> |
72 | 131 | </form> |
73 | 132 | </div> | ... | ... |
... | ... | @@ -28,10 +28,12 @@ import { |
28 | 28 | DeviceProfile, |
29 | 29 | DeviceProfileData, |
30 | 30 | DeviceProfileType, |
31 | + deviceProfileTypeConfigurationInfoMap, | |
31 | 32 | deviceProfileTypeTranslationMap, |
32 | 33 | DeviceProvisionConfiguration, |
33 | 34 | DeviceProvisionType, |
34 | 35 | DeviceTransportType, |
36 | + deviceTransportTypeConfigurationInfoMap, | |
35 | 37 | deviceTransportTypeTranslationMap |
36 | 38 | } from '@shared/models/device.models'; |
37 | 39 | import { EntityType } from '@shared/models/entity-type.models'; |
... | ... | @@ -57,6 +59,10 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> { |
57 | 59 | |
58 | 60 | deviceTransportTypeTranslations = deviceTransportTypeTranslationMap; |
59 | 61 | |
62 | + displayProfileConfiguration: boolean; | |
63 | + | |
64 | + displayTransportConfiguration: boolean; | |
65 | + | |
60 | 66 | constructor(protected store: Store<AppState>, |
61 | 67 | protected translate: TranslateService, |
62 | 68 | @Optional() @Inject('entity') protected entityValue: DeviceProfile, |
... | ... | @@ -74,6 +80,10 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> { |
74 | 80 | } |
75 | 81 | |
76 | 82 | buildForm(entity: DeviceProfile): FormGroup { |
83 | + this.displayProfileConfiguration = entity && entity.type && | |
84 | + deviceProfileTypeConfigurationInfoMap.get(entity.type).hasProfileConfiguration; | |
85 | + this.displayTransportConfiguration = entity && entity.transportType && | |
86 | + deviceTransportTypeConfigurationInfoMap.get(entity.transportType).hasProfileConfiguration; | |
77 | 87 | const deviceProvisionConfiguration: DeviceProvisionConfiguration = { |
78 | 88 | type: entity?.provisionType ? entity?.provisionType : DeviceProvisionType.DISABLED, |
79 | 89 | provisionDeviceKey: entity?.provisionDeviceKey, |
... | ... | @@ -116,6 +126,8 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> { |
116 | 126 | |
117 | 127 | private deviceProfileTypeChanged(form: FormGroup) { |
118 | 128 | const deviceProfileType: DeviceProfileType = form.get('type').value; |
129 | + this.displayProfileConfiguration = deviceProfileType && | |
130 | + deviceProfileTypeConfigurationInfoMap.get(deviceProfileType).hasProfileConfiguration; | |
119 | 131 | let profileData: DeviceProfileData = form.getRawValue().profileData; |
120 | 132 | if (!profileData) { |
121 | 133 | profileData = { |
... | ... | @@ -129,6 +141,8 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> { |
129 | 141 | |
130 | 142 | private deviceProfileTransportTypeChanged(form: FormGroup) { |
131 | 143 | const deviceTransportType: DeviceTransportType = form.get('transportType').value; |
144 | + this.displayTransportConfiguration = deviceTransportType && | |
145 | + deviceTransportTypeConfigurationInfoMap.get(deviceTransportType).hasProfileConfiguration; | |
132 | 146 | let profileData: DeviceProfileData = form.getRawValue().profileData; |
133 | 147 | if (!profileData) { |
134 | 148 | profileData = { |
... | ... | @@ -141,6 +155,10 @@ export class DeviceProfileComponent extends EntityComponent<DeviceProfile> { |
141 | 155 | } |
142 | 156 | |
143 | 157 | updateForm(entity: DeviceProfile) { |
158 | + this.displayProfileConfiguration = entity.type && | |
159 | + deviceProfileTypeConfigurationInfoMap.get(entity.type).hasProfileConfiguration; | |
160 | + this.displayTransportConfiguration = entity.transportType && | |
161 | + deviceTransportTypeConfigurationInfoMap.get(entity.transportType).hasProfileConfiguration; | |
144 | 162 | const deviceProvisionConfiguration: DeviceProvisionConfiguration = { |
145 | 163 | type: entity?.provisionType ? entity?.provisionType : DeviceProvisionType.DISABLED, |
146 | 164 | provisionDeviceKey: entity?.provisionDeviceKey, | ... | ... |