UI: Add CoAP device transport power mode setting

5 years ago · c173eef6d7
3 changed files with 118 additions and 18 deletions
--- a/ui-ngx/src/app/modules/home/pages/device/data/coap-device-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/data/coap-device-transport-configuration.component.html
@ -15,10 +15,49 @@
    limitations under the License.

 -->
-<form [formGroup]="coapDeviceTransportConfigurationFormGroup" style="padding-bottom: 16px;">
-  <!--tb-json-object-edit
-    [required]="required"
-    label="{{ 'device-profile.transport-type-coap' | translate }}"
-    formControlName="configuration">
-  </tb-json-object-edit-->
+<form [formGroup]="coapDeviceTransportForm" style="padding-bottom: 16px;">
+  <mat-form-field class="mat-block" fxFlex>
+    <mat-label translate>device-profile.power-saving-mode</mat-label>
+    <mat-select formControlName="powerMode">
+      <mat-option [value]="null">{{ "device-profile.power-saving-mode-type.default" | translate }}</mat-option>
+      <mat-option *ngFor="let powerMod of powerMods" [value]="powerMod">
+        {{ powerModeTranslationMap.get(powerMod) | translate }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <section class="mat-block" fxFlex *ngIf="coapDeviceTransportForm.get('powerMode').value === 'E_DRX'">
+    <mat-form-field class="mat-block" fxFlex>
+      <mat-label>{{ 'device-profile.edrx-cycle' | translate }}</mat-label>
+      <input matInput type="number" min="0" formControlName="edrxCycle" required>
+      <mat-error *ngIf="coapDeviceTransportForm.get('edrxCycle').hasError('required')">
+        {{ 'device-profile.edrx-cycle-required' | translate }}
+      </mat-error>
+      <mat-error *ngIf="coapDeviceTransportForm.get('edrxCycle').hasError('pattern') ||
+                                        coapDeviceTransportForm.get('edrxCycle').hasError('min')">
+        {{ 'device-profile.edrx-cycle-pattern' | translate }}
+      </mat-error>
+    </mat-form-field>
+    <mat-form-field class="mat-block" fxFlex>
+      <mat-label>{{ 'device-profile.paging-transmission-window' | translate }}</mat-label>
+      <input matInput type="number" min="0" formControlName="pagingTransmissionWindow" required>
+      <mat-error *ngIf="coapDeviceTransportForm.get('pagingTransmissionWindow').hasError('required')">
+        {{ 'device-profile.paging-transmission-window-required' | translate }}
+      </mat-error>
+      <mat-error *ngIf="coapDeviceTransportForm.get('pagingTransmissionWindow').hasError('pattern') ||
+                                        coapDeviceTransportForm.get('pagingTransmissionWindow').hasError('min')">
+        {{ 'device-profile.paging-transmission-window-pattern' | translate }}
+      </mat-error>
+    </mat-form-field>
+  </section>
+  <mat-form-field class="mat-block" fxFlex *ngIf="coapDeviceTransportForm.get('powerMode').value === 'PSM'">
+    <mat-label>{{ 'device-profile.psm-activity-timer' | translate }}</mat-label>
+    <input matInput type="number" min="0" formControlName="psmActivityTimer" required>
+    <mat-error *ngIf="coapDeviceTransportForm.get('psmActivityTimer').hasError('required')">
+      {{ 'device-profile.psm-activity-timer-required' | translate }}
+    </mat-error>
+    <mat-error *ngIf="coapDeviceTransportForm.get('psmActivityTimer').hasError('pattern') ||
+                                        coapDeviceTransportForm.get('psmActivityTimer').hasError('min')">
+      {{ 'device-profile.psm-activity-timer-pattern' | translate }}
+    </mat-error>
+  </mat-form-field>
 </form>
--- a/ui-ngx/src/app/modules/home/pages/device/data/coap-device-transport-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/data/coap-device-transport-configuration.component.ts
@ -14,7 +14,7 @@
 /// limitations under the License.
 ///

-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
@ -24,6 +24,10 @@ import {
  DeviceTransportConfiguration,
  DeviceTransportType
 } from '@shared/models/device.models';
+import { PowerMode, PowerModeTranslationMap } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { isDefinedAndNotNull } from '@core/utils';

@Component({
  selector: 'tb-coap-device-transport-configuration',
@ -35,9 +39,12 @@ import {
    multi: true
  }]
 })
-export class CoapDeviceTransportConfigurationComponent implements ControlValueAccessor, OnInit {
+export class CoapDeviceTransportConfigurationComponent implements ControlValueAccessor, OnInit, OnDestroy {

-  coapDeviceTransportConfigurationFormGroup: FormGroup;
+  coapDeviceTransportForm: FormGroup;
+
+  powerMods = Object.values(PowerMode);
+  powerModeTranslationMap = PowerModeTranslationMap;

  private requiredValue: boolean;
  get required(): boolean {
@ -51,6 +58,7 @@ export class CoapDeviceTransportConfigurationComponent implements ControlValueAc
  @Input()
  disabled: boolean;

+  private destroy$ = new Subject();
  private propagateChange = (v: any) => { };

  constructor(private store: Store<AppState>,
@ -65,33 +73,82 @@ export class CoapDeviceTransportConfigurationComponent implements ControlValueAc
  }

  ngOnInit() {
-    this.coapDeviceTransportConfigurationFormGroup = this.fb.group({
-      configuration: [null, Validators.required]
+    this.coapDeviceTransportForm = this.fb.group({
+      powerMode: [null],
+      edrxCycle: [{disabled: true, value: 0}, [Validators.required, Validators.min(0), Validators.pattern('[0-9]*')]],
+      psmActivityTimer: [{disabled: true, value: 0}, [Validators.required, Validators.min(0), Validators.pattern('[0-9]*')]],
+      pagingTransmissionWindow: [{disabled: true, value: 0}, [Validators.required, Validators.min(0), Validators.pattern('[0-9]*')]]
+    });
+    this.coapDeviceTransportForm.get('powerMode').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((powerMode: PowerMode) => {
+      if (powerMode === PowerMode.E_DRX) {
+        this.coapDeviceTransportForm.get('edrxCycle').enable({emitEvent: false});
+        this.coapDeviceTransportForm.get('pagingTransmissionWindow').enable({emitEvent: false});
+        this.disablePSKMode();
+      } else if (powerMode === PowerMode.PSM) {
+        this.coapDeviceTransportForm.get('psmActivityTimer').enable({emitEvent: false});
+        this.disableEdrxMode();
+      } else {
+        this.disableEdrxMode();
+        this.disablePSKMode();
+      }
    });
-    this.coapDeviceTransportConfigurationFormGroup.valueChanges.subscribe(() => {
+    this.coapDeviceTransportForm.valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(() => {
      this.updateModel();
    });
  }

+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
    if (this.disabled) {
-      this.coapDeviceTransportConfigurationFormGroup.disable({emitEvent: false});
+      this.coapDeviceTransportForm.disable({emitEvent: false});
    } else {
-      this.coapDeviceTransportConfigurationFormGroup.enable({emitEvent: false});
+      this.coapDeviceTransportForm.enable({emitEvent: false});
    }
  }

  writeValue(value: CoapDeviceTransportConfiguration | null): void {
-    this.coapDeviceTransportConfigurationFormGroup.patchValue({configuration: value}, {emitEvent: false});
+    if (isDefinedAndNotNull(value)) {
+      this.coapDeviceTransportForm.patchValue(value, {emitEvent: false});
+    } else {
+      this.coapDeviceTransportForm.patchValue({
+        powerMode: null,
+        edrxCycle: 0,
+        psmActivityTimer: 0,
+        pagingTransmissionWindow: 0
+      }, {emitEvent: false});
+    }
+    if (!this.disabled) {
+      this.coapDeviceTransportForm.get('powerMode').updateValueAndValidity({onlySelf: true});
+    }
  }

  private updateModel() {
    let configuration: DeviceTransportConfiguration = null;
-    if (this.coapDeviceTransportConfigurationFormGroup.valid) {
-      configuration = this.coapDeviceTransportConfigurationFormGroup.getRawValue().configuration;
+    if (this.coapDeviceTransportForm.valid) {
+      configuration = this.coapDeviceTransportForm.value;
      configuration.type = DeviceTransportType.COAP;
    }
    this.propagateChange(configuration);
  }
+
+  private disablePSKMode() {
+    this.coapDeviceTransportForm.get('psmActivityTimer').disable({emitEvent: false});
+    this.coapDeviceTransportForm.get('psmActivityTimer').reset(0, {emitEvent: false});
+  }
+
+  private disableEdrxMode() {
+    this.coapDeviceTransportForm.get('edrxCycle').disable({emitEvent: false});
+    this.coapDeviceTransportForm.get('edrxCycle').reset(0, {emitEvent: false});
+    this.coapDeviceTransportForm.get('pagingTransmissionWindow').disable({emitEvent: false});
+    this.coapDeviceTransportForm.get('pagingTransmissionWindow').reset(0, {emitEvent: false});
+  }
 }
--- a/ui-ngx/src/app/shared/models/device.models.ts
+++ b/ui-ngx/src/app/shared/models/device.models.ts
@ -208,7 +208,7 @@ export const deviceTransportTypeConfigurationInfoMap = new Map<DeviceTransportTy
      DeviceTransportType.COAP,
      {
        hasProfileConfiguration: true,
-        hasDeviceConfiguration: false,
+        hasDeviceConfiguration: true,
      }
    ],
    [
@ -570,6 +570,10 @@ export interface MqttDeviceTransportConfiguration {
 }

 export interface CoapDeviceTransportConfiguration {
+  powerMode?: PowerMode | null;
+  edrxCycle?: number;
+  pagingTransmissionWindow?: number;
+  psmActivityTimer?: number;
  [key: string]: any;
 }