简柏林 / thingskit · Commits

Commit ad68aa6d48ec29e4ac8e541e1e3b03f2655e1f44

Authored by Vladyslav_Prykhodko
1 parent 1b2a2591

UI: Refactoring device profile transport LwM2M

Inline Side-by-side
Showing 8 changed files with 237 additions and 236 deletions
... ... @@ -15,112 +15,107 @@
15 15 limitations under the License.
16 16
17 17 -->
18   -<section [formGroup]="serverFormGroup" style="min-width: 400px;">
19   - <div class="mat-padding">
20   - <div fxLayout="column">
21   - <div fxLayout="row" fxLayoutGap="8px">
22   - <mat-form-field class="mat-block">
23   - <mat-label>{{ 'device-profile.lwm2m.mode' | translate }}</mat-label>
24   - <mat-select formControlName="securityMode">
25   - <mat-option *ngFor="let securityMode of securityConfigLwM2MTypes"
26   - [value]="securityMode">
27   - {{ credentialTypeLwM2MNamesMap.get(securityConfigLwM2MType[securityMode]) }}
28   - </mat-option>
29   - </mat-select>
30   - </mat-form-field>
31   - <mat-form-field class="mat-block">
32   - <mat-label>{{ 'device-profile.lwm2m.server-host' | translate }}</mat-label>
33   - <input matInput type="text" formControlName="host" required
34   - matTooltip="{{'device-profile.lwm2m.server-host-tip' | translate}}"
35   - matTooltipPosition="above">
36   - <mat-error *ngIf="serverFormGroup.get('host').hasError('required')">
37   - {{ 'device-profile.lwm2m.server-host' | translate }}
38   - <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
39   - </mat-error>
40   - </mat-form-field>
41   - <mat-form-field class="mat-block">
42   - <mat-label>{{ 'device-profile.lwm2m.server-port' | translate }}</mat-label>
43   - <input matInput type="number" formControlName="port" required
44   - matTooltip="{{'device-profile.lwm2m.server-port-tip' | translate}}"
45   - matTooltipPosition="above">
46   - <mat-error *ngIf="serverFormGroup.get('port').hasError('required')">
47   - {{ 'device-profile.lwm2m.server-port' | translate }}
48   - <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
49   - </mat-error>
50   - </mat-form-field>
51   - <mat-form-field class="mat-block">
52   - <mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
53   - <input matInput type="number" formControlName="serverId" required
54   - matTooltip="{{'device-profile.lwm2m.short-id-tip' | translate}}"
55   - matTooltipPosition="above">
56   - <mat-error *ngIf="serverFormGroup.get('serverId').hasError('required')">
57   - {{ 'device-profile.lwm2m.short-id' | translate }}
58   - <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
59   - </mat-error>
60   - </mat-form-field>
61   - </div>
62   - </div>
63   - <div fxLayout="column">
64   - <div fxLayout="row" fxLayoutGap="10px">
65   - <mat-form-field class="mat-block">
66   - <mat-label>{{ 'device-profile.lwm2m.client-hold-off-time' | translate }}</mat-label>
67   - <input matInput type="number" formControlName="clientHoldOffTime" required
68   - matTooltip="{{'device-profile.lwm2m.client-hold-off-time-tip' | translate}}"
69   - matTooltipPosition="above">
70   - <mat-error *ngIf="serverFormGroup.get('clientHoldOffTime').hasError('required')">
71   - {{ 'device-profile.lwm2m.client-hold-off-time' | translate }}
72   - <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
73   - </mat-error>
74   - </mat-form-field>
75   - <mat-form-field class="mat-block">
76   - <mat-label>{{ 'device-profile.lwm2m.bootstrap-server-account-timeout' | translate }}</mat-label>
77   - <input matInput type="number" formControlName="bootstrapServerAccountTimeout" required
78   - matTooltip="{{'device-profile.lwm2m.bootstrap-server-account-timeout-tip' | translate}}"
79   - matTooltipPosition="above">
80   - <mat-error *ngIf="serverFormGroup.get('bootstrapServerAccountTimeout').hasError('required')">
81   - {{ 'device-profile.lwm2m.bootstrap-server-account-timeout' | translate }}
82   - <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
83   - </mat-error>
84   - </mat-form-field>
85   - <mat-checkbox formControlName="bootstrapServerIs" color="primary">
86   - {{ 'device-profile.lwm2m.bootstrap-server' | translate }}
87   - </mat-checkbox>
88   - </div>
89   - <div *ngIf="serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK ||
90   - serverFormGroup.get('securityMode').value === securityConfigLwM2MType.X509">
91   - <mat-form-field class="mat-block">
92   - <mat-label>{{ 'device-profile.lwm2m.server-public-key' | translate }}</mat-label>
93   - <textarea matInput
94   - #serverPublicKey
95   - maxlength="{{lenMaxServerPublicKey}}"
96   - cdkTextareaAutosize
97   - cdkAutosizeMinRows="1"
98   - cols="1" required
99   - style="overflow:hidden"
100   - formControlName="serverPublicKey"
101   - matTooltip="{{'device-profile.lwm2m.server-public-key-tip' | translate}}"
102   - ></textarea>
103   - <mat-hint align="end">{{serverPublicKey.value?.length || 0}}/{{lenMaxServerPublicKey}}</mat-hint>
104   - <mat-error *ngIf="serverFormGroup.get('serverPublicKey').hasError('required')">
105   - {{ 'device-profile.lwm2m.server-public-key' | translate }}
106   - <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
107   - </mat-error>
108   - <mat-error *ngIf="serverFormGroup.get('serverPublicKey').hasError('pattern') &&
109   - (serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK ||
110   - serverFormGroup.get('securityMode').value === securityConfigLwM2MType.X509)">
111   - {{ 'device-profile.lwm2m.server-public-key' | translate }}
112   - <strong>{{ 'device-profile.lwm2m.pattern_hex_dec' | translate: {
113   - count: 0} }}</strong>
114   - </mat-error>
115   - <mat-error *ngIf="(serverFormGroup.get('serverPublicKey').hasError('maxlength') ||
116   - serverFormGroup.get('serverPublicKey').hasError('minlength')) &&
117   - serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK">
118   - {{ 'device-profile.lwm2m.server-public-key' | translate }}
119   - <strong>{{ 'device-profile.lwm2m.pattern_hex_dec' | translate: {
120   - count: lenMaxServerPublicKey } }}</strong>
121   - </mat-error>
122   - </mat-form-field>
123   - </div>
124   - </div>
  18 +<section [formGroup]="serverFormGroup">
  19 + <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
  20 + <mat-form-field fxFlex>
  21 + <mat-label>{{ 'device-profile.lwm2m.mode' | translate }}</mat-label>
  22 + <mat-select formControlName="securityMode">
  23 + <mat-option *ngFor="let securityMode of securityConfigLwM2MTypes"
  24 + [value]="securityMode">
  25 + {{ credentialTypeLwM2MNamesMap.get(securityConfigLwM2MType[securityMode]) }}
  26 + </mat-option>
  27 + </mat-select>
  28 + </mat-form-field>
  29 + <mat-form-field fxFlex>
  30 + <mat-label>{{ 'device-profile.lwm2m.server-host' | translate }}</mat-label>
  31 + <input matInput type="text" formControlName="host" required
  32 + matTooltip="{{'device-profile.lwm2m.server-host-tip' | translate}}"
  33 + matTooltipPosition="above">
  34 + <mat-error *ngIf="serverFormGroup.get('host').hasError('required')">
  35 + {{ 'device-profile.lwm2m.server-host' | translate }}
  36 + <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
  37 + </mat-error>
  38 + </mat-form-field>
  39 + <mat-form-field fxFlex>
  40 + <mat-label>{{ 'device-profile.lwm2m.server-port' | translate }}</mat-label>
  41 + <input matInput type="number" formControlName="port" required
  42 + matTooltip="{{'device-profile.lwm2m.server-port-tip' | translate}}"
  43 + matTooltipPosition="above">
  44 + <mat-error *ngIf="serverFormGroup.get('port').hasError('required')">
  45 + {{ 'device-profile.lwm2m.server-port' | translate }}
  46 + <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
  47 + </mat-error>
  48 + </mat-form-field>
  49 + <mat-form-field fxFlex>
  50 + <mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
  51 + <input matInput type="number" formControlName="serverId" required
  52 + matTooltip="{{'device-profile.lwm2m.short-id-tip' | translate}}"
  53 + matTooltipPosition="above">
  54 + <mat-error *ngIf="serverFormGroup.get('serverId').hasError('required')">
  55 + {{ 'device-profile.lwm2m.short-id' | translate }}
  56 + <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
  57 + </mat-error>
  58 + </mat-form-field>
  59 + </div>
  60 + <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
  61 + <mat-form-field fxFlex>
  62 + <mat-label>{{ 'device-profile.lwm2m.client-hold-off-time' | translate }}</mat-label>
  63 + <input matInput type="number" formControlName="clientHoldOffTime" required
  64 + matTooltip="{{'device-profile.lwm2m.client-hold-off-time-tip' | translate}}"
  65 + matTooltipPosition="above">
  66 + <mat-error *ngIf="serverFormGroup.get('clientHoldOffTime').hasError('required')">
  67 + {{ 'device-profile.lwm2m.client-hold-off-time' | translate }}
  68 + <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
  69 + </mat-error>
  70 + </mat-form-field>
  71 + <mat-form-field fxFlex>
  72 + <mat-label>{{ 'device-profile.lwm2m.bootstrap-server-account-timeout' | translate }}</mat-label>
  73 + <input matInput type="number" formControlName="bootstrapServerAccountTimeout" required
  74 + matTooltip="{{'device-profile.lwm2m.bootstrap-server-account-timeout-tip' | translate}}"
  75 + matTooltipPosition="above">
  76 + <mat-error *ngIf="serverFormGroup.get('bootstrapServerAccountTimeout').hasError('required')">
  77 + {{ 'device-profile.lwm2m.bootstrap-server-account-timeout' | translate }}
  78 + <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
  79 + </mat-error>
  80 + </mat-form-field>
  81 + <mat-checkbox fxFlex formControlName="bootstrapServerIs" color="primary">
  82 + {{ 'device-profile.lwm2m.bootstrap-server' | translate }}
  83 + </mat-checkbox>
  84 + <div fxFlex></div>
  85 + </div>
  86 + <div *ngIf="serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK ||
  87 + serverFormGroup.get('securityMode').value === securityConfigLwM2MType.X509">
  88 + <mat-form-field class="mat-block">
  89 + <mat-label>{{ 'device-profile.lwm2m.server-public-key' | translate }}</mat-label>
  90 + <textarea matInput
  91 + #serverPublicKey
  92 + maxlength="{{lenMaxServerPublicKey}}"
  93 + cdkTextareaAutosize
  94 + cdkAutosizeMinRows="1"
  95 + cols="1" required
  96 + style="overflow:hidden"
  97 + formControlName="serverPublicKey"
  98 + matTooltip="{{'device-profile.lwm2m.server-public-key-tip' | translate}}"
  99 + ></textarea>
  100 + <mat-hint align="end">{{serverPublicKey.value?.length || 0}}/{{lenMaxServerPublicKey}}</mat-hint>
  101 + <mat-error *ngIf="serverFormGroup.get('serverPublicKey').hasError('required')">
  102 + {{ 'device-profile.lwm2m.server-public-key' | translate }}
  103 + <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
  104 + </mat-error>
  105 + <mat-error *ngIf="serverFormGroup.get('serverPublicKey').hasError('pattern') &&
  106 + (serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK ||
  107 + serverFormGroup.get('securityMode').value === securityConfigLwM2MType.X509)">
  108 + {{ 'device-profile.lwm2m.server-public-key' | translate }}
  109 + <strong>{{ 'device-profile.lwm2m.pattern_hex_dec' | translate: {
  110 + count: 0} }}</strong>
  111 + </mat-error>
  112 + <mat-error *ngIf="(serverFormGroup.get('serverPublicKey').hasError('maxlength') ||
  113 + serverFormGroup.get('serverPublicKey').hasError('minlength')) &&
  114 + serverFormGroup.get('securityMode').value === securityConfigLwM2MType.RPK">
  115 + {{ 'device-profile.lwm2m.server-public-key' | translate }}
  116 + <strong>{{ 'device-profile.lwm2m.pattern_hex_dec' | translate: {
  117 + count: lenMaxServerPublicKey } }}</strong>
  118 + </mat-error>
  119 + </mat-form-field>
125 120 </div>
126 121 </section>
... ...
... ... @@ -15,12 +15,12 @@
15 15 limitations under the License.
16 16
17 17 -->
18   -<section style="padding-bottom: 16px; margin: 0" mat-dialog-content>
  18 +<section style="padding-bottom: 16px; margin: 0">
19 19 <mat-tab-group dynamicHeight>
20 20 <mat-tab label="{{ 'device-profile.lwm2m.model-tab' | translate }}">
21 21 <ng-template matTabContent>
22 22 <section [formGroup]="lwm2mDeviceProfileFormGroup">
23   - <div *ngIf="false" class="mat-padding" style="padding-bottom: 0px">
  23 + <div *ngIf="false" class="mat-padding" style="padding-bottom: 0">
24 24 <mat-form-field class="mat-block">
25 25 <mat-label>{{ 'device-profile.lwm2m.client-only-observe-after-connect-label' | translate }}</mat-label>
26 26 <mat-select formControlName="clientOnlyObserveAfterConnect"
... ... @@ -34,20 +34,16 @@
34 34 </mat-select>
35 35 </mat-form-field>
36 36 </div>
37   - <div class="mat-padding" style="padding-top: 0">
38   - <tb-profile-lwm2m-object-list
39   - (addList)="addObjectsList($event)"
40   - (removeList)="removeObjectsList($event)"
41   - [required]="required"
42   - formControlName="objectIds">
43   - </tb-profile-lwm2m-object-list>
44   - </div>
45   - <div class="mat-padding">
46   - <tb-profile-lwm2m-observe-attr-telemetry
47   - [required]="required"
48   - formControlName="observeAttrTelemetry">
49   - </tb-profile-lwm2m-observe-attr-telemetry>
50   - </div>
  37 + <tb-profile-lwm2m-object-list
  38 + (addList)="addObjectsList($event)"
  39 + (removeList)="removeObjectsList($event)"
  40 + [required]="required"
  41 + formControlName="objectIds">
  42 + </tb-profile-lwm2m-object-list>
  43 + <tb-profile-lwm2m-observe-attr-telemetry
  44 + [required]="required"
  45 + formControlName="observeAttrTelemetry">
  46 + </tb-profile-lwm2m-observe-attr-telemetry>
51 47 </section>
52 48 </ng-template>
53 49 </mat-tab>
... ... @@ -58,94 +54,73 @@
58 54 <mat-accordion multi="true" class="mat-body-1">
59 55 <mat-expansion-panel>
60 56 <mat-expansion-panel-header>
61   - <mat-panel-title>
62   - <div class="tb-panel-title">{{ 'device-profile.lwm2m.servers' | translate | uppercase }}</div>
63   - </mat-panel-title>
  57 + <mat-panel-title>{{ 'device-profile.lwm2m.servers' | translate }}</mat-panel-title>
64 58 </mat-expansion-panel-header>
65 59 <ng-template matExpansionPanelContent>
66   - <div fxLayout="column">
67   - <div fxLayout="row" fxLayoutGap="8px">
68   - <mat-form-field fxFlex>
69   - <mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
70   - <input matInput type="number" formControlName="shortId" required>
71   - <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('shortId').hasError('required')">
72   - {{ 'device-profile.lwm2m.short-id' | translate }}
73   - <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
74   - </mat-error>
75   - </mat-form-field>
76   - <mat-form-field fxFlex>
77   - <mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
78   - <input matInput type="number" formControlName="lifetime" required>
79   - <mat-error
80   - *ngIf="lwm2mDeviceProfileFormGroup.get('lifetime').hasError('required')">
81   - {{ 'device-profile.lwm2m.lifetime' | translate }}
82   - <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
83   - </mat-error>
84   - </mat-form-field>
85   - <mat-form-field fxFlex>
86   - <mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
87   - <input matInput type="number" formControlName="defaultMinPeriod" required>
88   - <mat-error
89   - *ngIf="lwm2mDeviceProfileFormGroup.get('defaultMinPeriod').hasError('required')">
90   - {{ 'device-profile.lwm2m.default-min-period' | translate }}
91   - <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
92   - </mat-error>
93   - </mat-form-field>
94   - </div>
95   - <div fxLayout="row" fxLayoutGap="8px">
96   - <mat-form-field class="mat-block" fxFlex="100">
97   - <mat-label>{{ 'device-profile.lwm2m.binding' | translate }}</mat-label>
98   - <mat-select formControlName="binding">
99   - <mat-option *ngFor="let bindingMode of bindingModeTypes"
100   - [value]="bindingMode">
101   - {{ bindingModeTypeNamesMap.get(bindingModeType[bindingMode]) }}
102   - </mat-option>
103   - </mat-select>
104   - </mat-form-field>
105   - </div>
106   - <div>
107   - <mat-checkbox formControlName="notifIfDisabled" color="primary">
108   - {{ 'device-profile.lwm2m.notif-if-disabled' | translate }}
109   - </mat-checkbox>
110   - </div>
  60 + <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px" fxLayoutGap.xs="0px">
  61 + <mat-form-field fxFlex>
  62 + <mat-label>{{ 'device-profile.lwm2m.short-id' | translate }}</mat-label>
  63 + <input matInput type="number" formControlName="shortId" required>
  64 + <mat-error *ngIf="lwm2mDeviceProfileFormGroup.get('shortId').hasError('required')">
  65 + {{ 'device-profile.lwm2m.short-id' | translate }}
  66 + <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
  67 + </mat-error>
  68 + </mat-form-field>
  69 + <mat-form-field fxFlex>
  70 + <mat-label>{{ 'device-profile.lwm2m.lifetime' | translate }}</mat-label>
  71 + <input matInput type="number" formControlName="lifetime" required>
  72 + <mat-error
  73 + *ngIf="lwm2mDeviceProfileFormGroup.get('lifetime').hasError('required')">
  74 + {{ 'device-profile.lwm2m.lifetime' | translate }}
  75 + <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
  76 + </mat-error>
  77 + </mat-form-field>
  78 + <mat-form-field fxFlex>
  79 + <mat-label>{{ 'device-profile.lwm2m.default-min-period' | translate }}</mat-label>
  80 + <input matInput type="number" formControlName="defaultMinPeriod" required>
  81 + <mat-error
  82 + *ngIf="lwm2mDeviceProfileFormGroup.get('defaultMinPeriod').hasError('required')">
  83 + {{ 'device-profile.lwm2m.default-min-period' | translate }}
  84 + <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
  85 + </mat-error>
  86 + </mat-form-field>
111 87 </div>
  88 + <mat-form-field class="mat-block">
  89 + <mat-label>{{ 'device-profile.lwm2m.binding' | translate }}</mat-label>
  90 + <mat-select formControlName="binding">
  91 + <mat-option *ngFor="let bindingMode of bindingModeTypes"
  92 + [value]="bindingMode">
  93 + {{ bindingModeTypeNamesMap.get(bindingModeType[bindingMode]) }}
  94 + </mat-option>
  95 + </mat-select>
  96 + </mat-form-field>
  97 + <mat-checkbox formControlName="notifIfDisabled" color="primary">
  98 + {{ 'device-profile.lwm2m.notif-if-disabled' | translate }}
  99 + </mat-checkbox>
112 100 </ng-template>
113 101 </mat-expansion-panel>
114   - </mat-accordion>
115   - <mat-accordion multi="true" class="mat-body-1">
116 102 <mat-expansion-panel>
117 103 <mat-expansion-panel-header>
118   - <mat-panel-title>
119   - <div
120   - class="tb-panel-title">{{ 'device-profile.lwm2m.bootstrap-server' | translate | uppercase }}</div>
121   - </mat-panel-title>
  104 + <mat-panel-title>{{ 'device-profile.lwm2m.bootstrap-server' | translate }}</mat-panel-title>
122 105 </mat-expansion-panel-header>
123 106 <ng-template matExpansionPanelContent>
124   - <div class="mat-padding">
125   - <tb-profile-lwm2m-device-config-server
126   - [required]="required"
127   - formControlName="bootstrapServer"
128   - [bootstrapServerIs]=true>
129   - </tb-profile-lwm2m-device-config-server>
130   - </div>
  107 + <tb-profile-lwm2m-device-config-server
  108 + [required]="required"
  109 + formControlName="bootstrapServer"
  110 + [bootstrapServerIs]=true>
  111 + </tb-profile-lwm2m-device-config-server>
131 112 </ng-template>
132 113 </mat-expansion-panel>
133   - </mat-accordion>
134   - <mat-accordion multi="true" class="mat-body-1">
135 114 <mat-expansion-panel>
136 115 <mat-expansion-panel-header>
137   - <mat-panel-title>
138   - <div class="tb-panel-title">{{ 'device-profile.lwm2m.lwm2m-server' | translate | uppercase }}</div>
139   - </mat-panel-title>
  116 + <mat-panel-title>{{ 'device-profile.lwm2m.lwm2m-server' | translate }}</mat-panel-title>
140 117 </mat-expansion-panel-header>
141 118 <ng-template matExpansionPanelContent>
142   - <div class="mat-padding">
143   - <tb-profile-lwm2m-device-config-server
144   - [required]="required"
145   - formControlName="lwm2mServer"
146   - [bootstrapServerIs]=false>
147   - </tb-profile-lwm2m-device-config-server>
148   - </div>
  119 + <tb-profile-lwm2m-device-config-server
  120 + [required]="required"
  121 + formControlName="lwm2mServer"
  122 + [bootstrapServerIs]=false>
  123 + </tb-profile-lwm2m-device-config-server>
149 124 </ng-template>
150 125 </mat-expansion-panel>
151 126 </mat-accordion>
... ...
... ... @@ -15,7 +15,7 @@
15 15 ///
16 16
17 17 import { DeviceProfileTransportConfiguration } from '@shared/models/device.models';
18   -import { Component, forwardRef, Input } from '@angular/core';
  18 +import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
19 19 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
20 20 import { coerceBooleanProperty } from '@angular/cdk/coercion';
21 21 import {
... ... @@ -39,6 +39,8 @@ import { deepClone, isDefinedAndNotNull, isEmpty, isUndefined } from '@core/util
39 39 import { JsonArray, JsonObject } from '@angular/compiler-cli/ngcc/src/packages/entry_point';
40 40 import { Direction } from '@shared/models/page/sort-order';
41 41 import _ from 'lodash';
  42 +import { Subject } from 'rxjs';
  43 +import { takeUntil } from 'rxjs/operators';
42 44
43 45 @Component({
44 46 selector: 'tb-profile-lwm2m-device-transport-configuration',
... ... @@ -49,11 +51,12 @@ import _ from 'lodash';
49 51 multi: true
50 52 }]
51 53 })
52   -export class Lwm2mDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, Validators {
  54 +export class Lwm2mDeviceProfileTransportConfigurationComponent implements ControlValueAccessor, Validators, OnDestroy {
53 55
54 56 private configurationValue: Lwm2mProfileConfigModels;
55 57 private requiredValue: boolean;
56 58 private disabled = false;
  59 + private destroy$ = new Subject();
57 60
58 61 bindingModeType = BINDING_MODE;
59 62 bindingModeTypes = Object.keys(BINDING_MODE);
... ... @@ -87,17 +90,21 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
87 90 lifetime: [null, Validators.required],
88 91 defaultMinPeriod: [null, Validators.required],
89 92 notifIfDisabled: [true, []],
90   - binding:[],
  93 + binding: [],
91 94 bootstrapServer: [null, Validators.required],
92 95 lwm2mServer: [null, Validators.required],
93 96 });
94 97 this.lwm2mDeviceConfigFormGroup = this.fb.group({
95 98 configurationJson: [null, Validators.required]
96 99 });
97   - this.lwm2mDeviceProfileFormGroup.valueChanges.subscribe((value) => {
  100 + this.lwm2mDeviceProfileFormGroup.valueChanges.pipe(
  101 + takeUntil(this.destroy$)
  102 + ).subscribe((value) => {
98 103 this.updateDeviceProfileValue(value);
99 104 });
100   - this.lwm2mDeviceConfigFormGroup.valueChanges.subscribe(() => {
  105 + this.lwm2mDeviceConfigFormGroup.valueChanges.pipe(
  106 + takeUntil(this.destroy$)
  107 + ).subscribe(() => {
101 108 this.updateModel();
102 109 });
103 110 this.sortFunction = this.sortObjectKeyPathJson;
... ... @@ -110,6 +117,11 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
110 117 registerOnTouched(fn: any): void {
111 118 }
112 119
  120 + ngOnDestroy() {
  121 + this.destroy$.next();
  122 + this.destroy$.complete();
  123 + }
  124 +
113 125 setDisabledState(isDisabled: boolean): void {
114 126 this.disabled = isDisabled;
115 127 if (isDisabled) {
... ... @@ -122,11 +134,17 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
122 134 }
123 135
124 136 writeValue(value: Lwm2mProfileConfigModels | null): void {
125   - this.configurationValue = (Object.keys(value).length === 0) ? getDefaultProfileConfig() : value;
126   - this.lwm2mDeviceConfigFormGroup.patchValue({
127   - configurationJson: this.configurationValue
128   - }, {emitEvent: false});
129   - this.initWriteValue();
  137 + if (isDefinedAndNotNull(value)) {
  138 + if (Object.keys(value).length !== 0 && (value?.clientLwM2mSettings || value?.observeAttr || value?.bootstrap)) {
  139 + this.configurationValue = value;
  140 + } else {
  141 + this.configurationValue = getDefaultProfileConfig();
  142 + }
  143 + this.lwm2mDeviceConfigFormGroup.patchValue({
  144 + configurationJson: this.configurationValue
  145 + }, {emitEvent: false});
  146 + this.initWriteValue();
  147 + }
130 148 }
131 149
132 150 private initWriteValue = (): void => {
... ... @@ -252,7 +270,7 @@ export class Lwm2mDeviceProfileTransportConfigurationComponent implements Contro
252 270 instanceUpdate.id = instanceId;
253 271 instanceUpdate.resources.forEach(resource => {
254 272 resource.keyName = _.camelCase(resource.name + instanceUpdate.id);
255   - })
  273 + });
256 274 return instanceUpdate;
257 275 }
258 276
... ...
... ... @@ -15,10 +15,19 @@
15 15 ///
16 16
17 17 import { Component, ElementRef, EventEmitter, forwardRef, Input, OnInit, Output, ViewChild } from '@angular/core';
18   -import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
  18 +import {
  19 + ControlValueAccessor,
  20 + FormBuilder,
  21 + FormGroup,
  22 + NG_VALIDATORS,
  23 + NG_VALUE_ACCESSOR,
  24 + ValidationErrors,
  25 + Validator,
  26 + Validators
  27 +} from '@angular/forms';
19 28 import { coerceBooleanProperty } from '@angular/cdk/coercion';
20 29 import { Observable } from 'rxjs';
21   -import { filter, map, mergeMap, publishReplay, refCount, tap } from 'rxjs/operators';
  30 +import { distinctUntilChanged, filter, mergeMap, share, tap } from 'rxjs/operators';
22 31 import { ModelValue, ObjectLwM2M, PAGE_SIZE_LIMIT } from './lwm2m-profile-config.models';
23 32 import { DeviceProfileService } from '@core/http/device-profile.service';
24 33 import { Direction } from '@shared/models/page/sort-order';
... ... @@ -33,13 +42,18 @@ import { PageLink } from '@shared/models/page/page-link';
33 42 provide: NG_VALUE_ACCESSOR,
34 43 useExisting: forwardRef(() => Lwm2mObjectListComponent),
35 44 multi: true
36   - }]
  45 + },
  46 + {
  47 + provide: NG_VALIDATORS,
  48 + useExisting: forwardRef(() => Lwm2mObjectListComponent),
  49 + multi: true
  50 + }
  51 + ]
37 52 })
38   -export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, Validators {
  53 +export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, Validator {
39 54
40 55 private requiredValue: boolean;
41 56 private dirty = false;
42   - private lw2mModels: Observable<Array<ObjectLwM2M>>;
43 57 private modelValue: Array<string> = [];
44 58
45 59 lwm2mListFormGroup: FormGroup;
... ... @@ -78,8 +92,8 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
78 92 }
79 93
80 94 private updateValidators = (): void => {
81   - this.lwm2mListFormGroup.get('objectLwm2m').setValidators(this.required ? [Validators.required] : []);
82   - this.lwm2mListFormGroup.get('objectLwm2m').updateValueAndValidity();
  95 + this.lwm2mListFormGroup.get('objectsList').setValidators(this.required ? [Validators.required] : []);
  96 + this.lwm2mListFormGroup.get('objectsList').updateValueAndValidity();
83 97 }
84 98
85 99 registerOnChange(fn: any): void {
... ... @@ -92,6 +106,7 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
92 106 ngOnInit() {
93 107 this.filteredObjectsList = this.lwm2mListFormGroup.get('objectLwm2m').valueChanges
94 108 .pipe(
  109 + distinctUntilChanged(),
95 110 tap((value) => {
96 111 if (value && typeof value !== 'string') {
97 112 this.add(value);
... ... @@ -100,7 +115,8 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
100 115 }
101 116 }),
102 117 filter(searchText => isString(searchText)),
103   - mergeMap(searchText => this.fetchListObjects(searchText))
  118 + mergeMap(searchText => this.fetchListObjects(searchText)),
  119 + share()
104 120 );
105 121 }
106 122
... ... @@ -131,6 +147,12 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
131 147 }
132 148 }
133 149
  150 + validate(): ValidationErrors | null {
  151 + return this.lwm2mListFormGroup.valid ? null : {
  152 + lwm2mListObj: false
  153 + };
  154 + }
  155 +
134 156 private add(object: ObjectLwM2M): void {
135 157 if (isDefinedAndNotNull(this.modelValue) && this.modelValue.indexOf(object.keyId) === -1) {
136 158 this.modelValue.push(object.keyId);
... ... @@ -157,23 +179,13 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
157 179 return object ? object.name : undefined;
158 180 }
159 181
160   - private fetchListObjects = (searchText?: string): Observable<Array<ObjectLwM2M>> => {
  182 + private fetchListObjects = (searchText: string): Observable<Array<ObjectLwM2M>> => {
161 183 this.searchText = searchText;
162   - return this.getLwM2mModelsPage().pipe(
163   - map(objectLwM2Ms => objectLwM2Ms)
164   - );
165   - }
166   -
167   - private getLwM2mModelsPage(): Observable<Array<ObjectLwM2M>> {
168 184 const pageLink = new PageLink(PAGE_SIZE_LIMIT, 0, this.searchText, {
169 185 property: 'id',
170 186 direction: Direction.ASC
171 187 });
172   - this.lw2mModels = this.deviceProfileService.getLwm2mObjectsPage(pageLink).pipe(
173   - publishReplay(1),
174   - refCount()
175   - );
176   - return this.lw2mModels;
  188 + return this.deviceProfileService.getLwm2mObjectsPage(pageLink);
177 189 }
178 190
179 191 onFocus = (): void => {
... ... @@ -183,10 +195,9 @@ export class Lwm2mObjectListComponent implements ControlValueAccessor, OnInit, V
183 195 }
184 196 }
185 197
186   - private clear = (value: string = ''): void => {
187   - this.objectInput.nativeElement.value = value;
  198 + private clear = (): void => {
188 199 this.searchText = '';
189   - this.lwm2mListFormGroup.get('objectLwm2m').patchValue(value);
  200 + this.lwm2mListFormGroup.get('objectLwm2m').patchValue(null);
190 201 setTimeout(() => {
191 202 this.objectInput.nativeElement.blur();
192 203 this.objectInput.nativeElement.focus();
... ...
... ... @@ -15,7 +15,7 @@
15 15 limitations under the License.
16 16
17 17 -->
18   -<section [formGroup]="resourceFormGroup" class="mat-padding">
  18 +<section [formGroup]="resourceFormGroup">
19 19 <div fxLayout="row" fxFill formArrayName="resources"
20 20 *ngFor="let resourceLwM2M of resourceFormArray.controls; let i = index; trackBy: trackByParams">
21 21 <div class="vertical-padding" fxLayout="column" fxFill [formGroupName]="i">
... ... @@ -46,14 +46,14 @@
46 46 </div>
47 47 <div fxFlex="10" fxLayoutAlign="center center">
48 48 <mat-checkbox formControlName="attribute" color="warn"
49   - [checked]="updateObserve(i)"
  49 + (change)="updateObserve(i)"
50 50 matTooltip="{{'device-profile.lwm2m.is-attr-tip' | translate}}"
51 51 matTooltipPosition="above">
52 52 </mat-checkbox>
53 53 </div>
54 54 <div fxFlex="10" fxLayoutAlign="center center">
55 55 <mat-checkbox formControlName="telemetry" color="primary"
56   - [checked]="updateObserve(i)"
  56 + (change)="updateObserve(i)"
57 57 matTooltip="{{'device-profile.lwm2m.is-telemetry-tip' | translate}}"
58 58 matTooltipPosition="above">
59 59 </mat-checkbox>
... ...
... ... @@ -16,7 +16,7 @@
16 16
17 17 -->
18 18 <section [formGroup]="observeAttrTelemetryFormGroup">
19   - <mat-accordion multi="true" class="mat-body-1" formArrayName="clientLwM2M">
  19 + <mat-accordion multi="true" formArrayName="clientLwM2M">
20 20 <mat-expansion-panel
21 21 *ngFor="let objectLwM2M of clientLwM2MFormArray.controls; let i = index;"
22 22 [formGroupName]="i">
... ...
... ... @@ -24,6 +24,9 @@
24 24 }
25 25
26 26 :host{
  27 + section {
  28 + padding: 2px;
  29 + }
27 30 .instance-list {
28 31 mat-expansion-panel-header {
29 32 color: inherit;
... ...
... ... @@ -64,7 +64,7 @@ export const BINDING_MODE_NAMES = new Map<BINDING_MODE, string>(
64 64 [BINDING_MODE.UQ, 'UQ: UDP connection in queue mode'],
65 65 [BINDING_MODE.US, 'US: both UDP and SMS connections active, both in standard mode'],
66 66 [BINDING_MODE.UQS, 'UQS: both UDP and SMS connections active; UDP in queue mode, SMS in standard mode'],
67   - [BINDING_MODE.T,'T: TCP connection in standard mode'],
  67 + [BINDING_MODE.T, 'T: TCP connection in standard mode'],
68 68 [BINDING_MODE.TQ, 'TQ: TCP connection in queue mode'],
69 69 [BINDING_MODE.TS, 'TS: both TCP and SMS connections active, both in standard mode'],
70 70 [BINDING_MODE.TQS, 'TQS: both TCP and SMS connections active; TCP in queue mode, SMS in standard mode'],
... ... @@ -162,7 +162,6 @@ export interface Lwm2mProfileConfigModels {
162 162 clientLwM2mSettings: ClientLwM2mSettings;
163 163 observeAttr: ObservableAttributes;
164 164 bootstrap: BootstrapSecurityConfig;
165   -
166 165 }
167 166
168 167 export interface ClientLwM2mSettings {
... ...