From c173eef6d7b040a8fbb1a2ca153664557c914f6a Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 16 Jul 2021 15:31:54 +0300
Subject: [PATCH] UI: Add CoAP device transport power mode setting

---
 ...ice-transport-configuration.component.html | 51 ++++++++++--
 ...evice-transport-configuration.component.ts | 79 ++++++++++++++++---
 ui-ngx/src/app/shared/models/device.models.ts |  6 +-
 3 files changed, 118 insertions(+), 18 deletions(-)

diff --git 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
index c0f47c989f..5010726b5b 100644
--- 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>
diff --git 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
index b41d289f76..290bcac1d0 100644
--- 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});
+  }
 }
diff --git a/ui-ngx/src/app/shared/models/device.models.ts b/ui-ngx/src/app/shared/models/device.models.ts
index 8033aed095..7974483c39 100644
--- 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;
 }