Commit 29b9682ff1b107fc4cce29553d3894a569d7fdc8

Authored by Vladyslav Prykhodko
1 parent 16022521

UI: Added device profile show settings in edit mode

... ... @@ -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,
... ...