From 61c926e0c114c136be70ad34da52658ce2caebb7 Mon Sep 17 00:00:00 2001
From: cpoder <cyril.poder@gmail.com>
Date: Thu, 14 Mar 2024 10:09:49 +0100
Subject: [PATCH] put undefined default value for enum instead of null +
 revamped command UI

---
 web/lora-package/package.json                 |   5 +-
 .../src/devices/devices.component.html        | 331 +++++-------------
 .../src/devices/devices.component.ts          |   2 +-
 .../src/devices/panel-wrapper.component.ts    |  28 +-
 .../src/onboarding/codecs/select.type.ts      |   1 -
 5 files changed, 118 insertions(+), 249 deletions(-)

diff --git a/web/lora-package/package.json b/web/lora-package/package.json
index 68ac82d0d..c285ad56d 100644
--- a/web/lora-package/package.json
+++ b/web/lora-package/package.json
@@ -8,7 +8,10 @@
     "deploy": "c8ycli deploy",
     "postinstall": "ngcc"
   },
-  "keywords": [],
+  "keywords": [
+    "Cumulocity",
+    "Plugin"
+  ],
   "author": "",
   "license": "Apache",
   "dependencies": {
diff --git a/web/lora-package/src/devices/devices.component.html b/web/lora-package/src/devices/devices.component.html
index 20c2780f3..99e971bef 100644
--- a/web/lora-package/src/devices/devices.component.html
+++ b/web/lora-package/src/devices/devices.component.html
@@ -10,19 +10,11 @@ <h4 class="card-title">{{ "Configure device codec" | translate }}</h4>
         <c8y-form-group class="col-sm-12">
           <div class="c8y-select-wrapper">
             <label for="model">Type:</label>
-            <select
-              class="form-control"
-              [(ngModel)]="codec"
-              (change)="loadModels(codec)"
-              required
-            >
+            <select class="form-control" [(ngModel)]="codec" (change)="loadModels(codec)" required>
               <option [ngValue]="undefined" [disabled]="true">
                 Please select a type
               </option>
-              <option
-                *ngFor="let codec of codecService.codecs"
-                [value]="codec.lora_codec_DeviceCodecRepresentation.id"
-              >
+              <option *ngFor="let codec of codecService.codecs" [value]="codec.lora_codec_DeviceCodecRepresentation.id">
                 {{ codec.lora_codec_DeviceCodecRepresentation.name }}
               </option>
             </select>
@@ -42,24 +34,13 @@ <h4 class="card-title">{{ "Configure device codec" | translate }}</h4>
           </div>
         </c8y-form-group>
         <c8y-form-group class="col-sm-12">
-          <label class="c8y-checkbox"
-            ><input
-              class="form-control"
-              type="checkbox"
-              [(ngModel)]="useGatewayPosition"
-              name="useGatewayPosition"
-            /><span></span>Use gateway position</label
-          >
+          <label class="c8y-checkbox"><input class="form-control" type="checkbox" [(ngModel)]="useGatewayPosition"
+              name="useGatewayPosition" /><span></span>Use gateway position</label>
         </c8y-form-group>
       </div>
       <div class="card-footer">
         <div class="form-group">
-          <button
-            type="button"
-            (click)="updateDeviceCodec()"
-            class="btn btn-primary"
-            [disabled]="!codecChanged"
-          >
+          <button type="button" (click)="updateDeviceCodec()" class="btn btn-primary" [disabled]="!codecChanged">
             Update device codec
           </button>
         </div>
@@ -74,23 +55,13 @@ <h4 class="card-title">Codec options</h4>
       <div class="card-block">
         <div class="form-group">
           <label class="c8y-switch">
-            <input
-              type="checkbox"
-              checked="checked"
-              [(ngModel)]="debugMode"
-              (change)="switchDebugMode()"
-            />
+            <input type="checkbox" checked="checked" [(ngModel)]="debugMode" (change)="switchDebugMode()" />
             <span></span> Enable debug mode
           </label>
         </div>
         <div class="form-group">
           <label class="c8y-switch">
-            <input
-              type="checkbox"
-              checked="checked"
-              [(ngModel)]="storeLast"
-              (change)="switchStoreLast()"
-            />
+            <input type="checkbox" checked="checked" [(ngModel)]="storeLast" (change)="switchStoreLast()" />
             <span></span> Store last measurements on device
           </label>
         </div>
@@ -108,16 +79,11 @@ <h4 class="card-title">{{ "Unprocessed payloads" | translate }}</h4>
       </div>
       <div class="card-footer">
         <div class="form-group">
-          <button
-            type="button"
-            (click)="processPayloads()"
-            class="btn btn-primary"
-            [disabled]="
+          <button type="button" (click)="processPayloads()" class="btn btn-primary" [disabled]="
               !unprocessedPayloads ||
               !device.codec ||
               unprocessedPayloads?.length == 0
-            "
-          >
+            ">
             Process unprocessed payloads
           </button>
         </div>
@@ -130,53 +96,34 @@ <h4 class="card-title">{{ "Unprocessed payloads" | translate }}</h4>
         <h4 class="card-title">{{ "LNS Connector" | translate }}</h4>
       </div>
       <div class="card-block">
-        <c8y-form-group
-          [hasError]="
+        <c8y-form-group [hasError]="
             instanceSelect.invalid &&
             (instanceSelect.dirty || instanceSelect.touched)
-          "
-        >
+          ">
           <div class="c8y-select-wrapper">
             <label for="instanceSelect">LoRa network server connectors:</label>
-            <select
-              class="form-control"
-              name="instanceSelect"
-              #instanceSelect="ngModel"
-              [(ngModel)]="selectedLnsConnectorId"
-              (change)="loadProperties(instanceSelect.value)"
-            >
+            <select class="form-control" name="instanceSelect" #instanceSelect="ngModel"
+              [(ngModel)]="selectedLnsConnectorId" (change)="loadProperties(instanceSelect.value)">
               <option [ngValue]="undefined" [disabled]="true">
                 Please select a connector
               </option>
-              <option
-                *ngFor="let instance of lnsService.lnsInstances"
-                [value]="instance.id"
-              >
+              <option *ngFor="let instance of lnsService.lnsInstances" [value]="instance.id">
                 {{ instance.name }} -
                 {{ lnsService.proxyMap[instance.lnsType].name }}
               </option>
             </select>
           </div>
-          <c8y-messages
-            *ngIf="
+          <c8y-messages *ngIf="
               instanceSelect.invalid &&
               (instanceSelect.dirty || instanceSelect.touched)
-            "
-          >
-            <c8y-message name="required" *ngIf="instanceSelect.errors?.required"
-              >The connector is required
+            ">
+            <c8y-message name="required" *ngIf="instanceSelect.errors?.required">The connector is required
             </c8y-message>
           </c8y-messages>
         </c8y-form-group>
         <c8y-form-group class="col-sm-6">
           <label for="appEUI">App EUI:</label>
-          <input
-            class="form-control"
-            #appEUI="ngModel"
-            name="appEUI"
-            [(ngModel)]="device.appEUI"
-            maxlength="16"
-          />
+          <input class="form-control" #appEUI="ngModel" name="appEUI" [(ngModel)]="device.appEUI" maxlength="16" />
           <span id="devEUI" class="help-block">
             64 bits hex number that uniquely identifies the application. Will be
             randomly generated if not provided.
@@ -184,14 +131,8 @@ <h4 class="card-title">{{ "LNS Connector" | translate }}</h4>
         </c8y-form-group>
         <c8y-form-group class="col-sm-6">
           <label for="appKey">App Key:</label>
-          <input
-            class="form-control"
-            #appKey="ngModel"
-            name="appKey"
-            [(ngModel)]="device.appKey"
-            aria-describedby="appKey"
-            maxlength="32"
-          />
+          <input class="form-control" #appKey="ngModel" name="appKey" [(ngModel)]="device.appKey"
+            aria-describedby="appKey" maxlength="32" />
           <span id="appKey" class="help-block">
             128 bits hex number used to encrypt communication. Will be randomly
             generated if not provided.
@@ -199,90 +140,41 @@ <h4 class="card-title">{{ "LNS Connector" | translate }}</h4>
         </c8y-form-group>
         <div *ngIf="properties !== undefined">
           <div *ngFor="let property of properties" class="col-sm-6">
-            <c8y-form-group
-              *ngIf="property.type === 'STRING' || property.type === 'TEXT'"
-            >
+            <c8y-form-group *ngIf="property.type === 'STRING' || property.type === 'TEXT'">
               <label for="{{ property.name }}">{{ property.label }}:</label>
-              <input
-                class="form-control"
-                [(ngModel)]="
+              <input class="form-control" [(ngModel)]="
                   deviceProvisioningAdditionalProperties[property.name]
-                "
-                name="{{ property.name }}"
-                #{{property.name}}="ngModel"
-                ngModel
-                required
-              />
+                " name="{{ property.name }}" #{{property.name}}="ngModel" ngModel required />
             </c8y-form-group>
             <c8y-form-group *ngIf="property.type === 'PASSWORD'">
               <label for="{{ property.name }}">{{ property.label }}:</label>
-              <input
-                class="form-control"
-                type="password"
-                [(ngModel)]="
+              <input class="form-control" type="password" [(ngModel)]="
                   deviceProvisioningAdditionalProperties[property.name]
-                "
-                name="{{ property.name }}"
-                #{{property.name}}="ngModel"
-                ngModel
-                required
-              />
+                " name="{{ property.name }}" #{{property.name}}="ngModel" ngModel required />
             </c8y-form-group>
             <c8y-form-group *ngIf="property.type === 'NUMBER'">
               <label for="{{ property.name }}">{{ property.label }}:</label>
-              <input
-                class="form-control"
-                type="number"
-                step="0.1"
-                [(ngModel)]="
+              <input class="form-control" type="number" step="0.1" [(ngModel)]="
                   deviceProvisioningAdditionalProperties[property.name]
-                "
-                name="{{ property.name }}"
-                #{{property.name}}="ngModel"
-                ngModel
-                required
-              />
+                " name="{{ property.name }}" #{{property.name}}="ngModel" ngModel required />
             </c8y-form-group>
             <c8y-form-group *ngIf="property.type === 'INTEGER'">
               <label for="{{ property.name }}">{{ property.label }}:</label>
-              <input
-                class="form-control"
-                type="number"
-                [(ngModel)]="
+              <input class="form-control" type="number" [(ngModel)]="
                   deviceProvisioningAdditionalProperties[property.name]
-                "
-                name="{{ property.name }}"
-                #{{property.name}}="ngModel"
-                ngModel
-                required
-              />
+                " name="{{ property.name }}" #{{property.name}}="ngModel" ngModel required />
             </c8y-form-group>
             <c8y-form-group *ngIf="property.type === 'BOOLEAN'">
-              <label class="c8y-checkbox"
-                ><input
-                  type="checkbox"
-                  [(ngModel)]="
+              <label class="c8y-checkbox"><input type="checkbox" [(ngModel)]="
                     deviceProvisioningAdditionalProperties[property.name]
-                  "
-                  name="{{ property.name }}"
-                  #{{property.name}}="ngModel"
-                  ngModel
-                  required
-                /><span></span>{{ property.label }}</label
-              >
+                  " name="{{ property.name }}" #{{property.name}}="ngModel" ngModel required /><span></span>{{
+                property.label }}</label>
             </c8y-form-group>
             <c8y-form-group *ngIf="property.type === 'LIST'">
               <label for="{{ property.name }}">{{ property.label }}:</label>
-              <select
-                [(ngModel)]="
+              <select [(ngModel)]="
                   deviceProvisioningAdditionalProperties[property.name]
-                "
-                class="form-control"
-                name="{{ property.name }}"
-                #{{property.name}}="ngModel"
-                ngModel
-                required
-              >
+                " class="form-control" name="{{ property.name }}" #{{property.name}}="ngModel" ngModel required>
                 <option [ngValue]="undefined" [disabled]="true">
                   Please select {{ property.name }}
                 </option>
@@ -296,11 +188,7 @@ <h4 class="card-title">{{ "LNS Connector" | translate }}</h4>
       </div>
       <div class="card-footer">
         <div class="form-group">
-          <button
-            type="button"
-            (click)="updateConnector()"
-            class="btn btn-primary"
-          >
+          <button type="button" (click)="updateConnector()" class="btn btn-primary">
             Update connector
           </button>
         </div>
@@ -309,100 +197,71 @@ <h4 class="card-title">{{ "LNS Connector" | translate }}</h4>
   </div>
 </div>
 
-<div class="row">
-  <div class="card col-sm-12">
-    <div class="card-header separator">
-      <h4 class="card-title">
-        {{ "Send a command to the device" | translate }}
-      </h4>
-    </div>
-    <div class="card-block">
-      <div class="col-sm-12">
-        <div class="c8y-select-wrapper">
-          <label for="model">Command:</label>
-          <select
-            class="form-control"
-            [(ngModel)]="commandChoice"
-            (change)="resetModel()"
-          >
-            <option [value]="empty" [disabled]="true">
-              Please select a command
-            </option>
-            <option
-              *ngFor="let command of commands | keyvalue"
-              [value]="command.value?.id"
-            >
-              {{ command.value?.name }}
-            </option>
-          </select>
-        </div>
-      </div>
-      <div class="col-sm-12">
-        <form [formGroup]="form" *ngIf="fields">
-          <formly-form
-            [model]="parameterValues"
-            [fields]="fields[commandChoice]"
-            [options]="options"
-            [form]="form"
-          ></formly-form>
-        </form>
+<div class="card col-sm-12">
+  <div class="card-header separator">
+    <h4 class="card-title">
+      {{ "Send a command to the device" | translate }}
+    </h4>
+  </div>
+  <div class="card-block">
+    <div class="col-sm-12">
+      <div class="c8y-select-wrapper">
+        <label for="model">Command:</label>
+        <select class="form-control" [(ngModel)]="commandChoice" (change)="resetModel()">
+          <option [value]="empty" [disabled]="true">
+            Please select a command
+          </option>
+          <option *ngFor="let command of commands | keyvalue" [value]="command.value?.id">
+            {{ command.value?.name }}
+          </option>
+        </select>
       </div>
     </div>
-    <div class="card-footer">
-      <div class="form-group">
-        <button
-          [disabled]="!form.valid"
-          type="button"
-          (click)="preview(commandChoice, parameterValues)"
-          class="btn btn-primary"
-        >
-          Preview command
-        </button>
-        <button
-          [disabled]="!form.valid"
-          type="button"
-          (click)="send(commandChoice, parameterValues)"
-          class="btn btn-primary"
-        >
-          Send command
-        </button>
-      </div>
+    <div class="col-sm-12 card-block">
+      <form [formGroup]="form" *ngIf="fields">
+        <formly-form [model]="parameterValues" [fields]="fields[commandChoice]" [options]="options"
+          [form]="form"></formly-form>
+      </form>
     </div>
   </div>
-  <div
-    class="card col-sm-12"
-    *ngIf="previewCommand !== undefined && previewCommand.success"
-  >
-    <div class="card-header separator">
-      <h4 class="card-title">{{ "Preview" | translate }}</h4>
-    </div>
-    <div class="card-block">
-      <div class="col-sm-12">fPort: {{ previewCommand.response.fport }}</div>
-      <div class="col-sm-12" style="overflow-wrap: break-word">
-        Payload: {{ previewCommand.response.payload }}
-      </div>
+  <div class="card-footer">
+    <div class="form-group">
+      <button [disabled]="!form.valid" type="button" (click)="preview(commandChoice, parameterValues)"
+        class="btn btn-primary">
+        Preview command
+      </button>
+      <button [disabled]="!form.valid" type="button" (click)="send(commandChoice, parameterValues)"
+        class="btn btn-primary">
+        Send command
+      </button>
     </div>
   </div>
-  <ng-template #errorModal>
-    <div class="modal-header">
-      <h4 id="dialog-name" class="modal-title pull-left">
-        <span class="label label-danger">Error</span>
-      </h4>
-    </div>
-    <div class="modal-body">
-      An error occurred while parsing the command: {{ previewCommand.response
-      }}<br />
-      Cause: {{ previewCommand.message }}<br />
-    </div>
-    <div class="modal-footer">
-      <button
-        class="btn btn-default"
-        (click)="errorModalRef.hide()"
-        translate=""
-        ng-reflect-translate=""
-      >
-        Close
-      </button>
+</div>
+<div class="card col-sm-12" *ngIf="previewCommand !== undefined && previewCommand.success">
+  <div class="card-header separator">
+    <h4 class="card-title">{{ "Preview" | translate }}</h4>
+  </div>
+  <div class="card-block">
+    <div class="col-sm-12">fPort: {{ previewCommand.response.fport }}</div>
+    <div class="col-sm-12" style="overflow-wrap: break-word">
+      Payload: {{ previewCommand.response.payload }}
     </div>
-  </ng-template>
+  </div>
 </div>
+<ng-template #errorModal>
+  <div class="modal-header">
+    <h4 id="dialog-name" class="modal-title pull-left">
+      <span class="label label-danger">Error</span>
+    </h4>
+  </div>
+  <div class="modal-body">
+    An error occurred while parsing the command: {{ previewCommand.response
+    }}<br />
+    Cause: {{ previewCommand.message }}<br />
+  </div>
+  <div class="modal-footer">
+    <button class="btn btn-default" (click)="errorModalRef.hide()" translate="" ng-reflect-translate="">
+      Close
+    </button>
+  </div>
+</ng-template>
\ No newline at end of file
diff --git a/web/lora-package/src/devices/devices.component.ts b/web/lora-package/src/devices/devices.component.ts
index 4fe50ed63..cf44354da 100644
--- a/web/lora-package/src/devices/devices.component.ts
+++ b/web/lora-package/src/devices/devices.component.ts
@@ -155,7 +155,7 @@ export class DevicesComponent implements OnInit {
         field.templateOptions.options = element.value.map((e) => {
           return { label: e, value: e };
         });
-        field.defaultValue = null;
+        field.defaultValue = undefined;
         break;
       case ParamType.GROUP:
         if (element.dependsOnParam) {
diff --git a/web/lora-package/src/devices/panel-wrapper.component.ts b/web/lora-package/src/devices/panel-wrapper.component.ts
index d363697ec..2dcd6860b 100644
--- a/web/lora-package/src/devices/panel-wrapper.component.ts
+++ b/web/lora-package/src/devices/panel-wrapper.component.ts
@@ -1,16 +1,24 @@
-import { Component } from '@angular/core';
-import { FieldWrapper } from '@ngx-formly/core';
+import { Component } from "@angular/core";
+import { FieldWrapper } from "@ngx-formly/core";
 
 @Component({
-  selector: 'formly-wrapper-panel',
+  selector: "formly-wrapper-panel",
   template: `
-    <div class="card">
-      <h3 class="card-header">{{ to.label }}</h3>
-      <div class="card-body">
-        <ng-container #fieldComponent></ng-container>
+    <fieldset class="c8y-fieldset schema-form-fieldset">
+      <legend *ngIf="to.label">{{ to.label }}</legend>
+      <p *ngIf="to.description">{{ to.description }}</p>
+      <div
+        class="alert alert-danger"
+        role="alert"
+        *ngIf="showError && formControl.errors"
+      >
+        <formly-validation-message [field]="field"></formly-validation-message>
       </div>
-    </div>
+      <formly-field
+        *ngFor="let f of field.fieldGroup"
+        [field]="f"
+      ></formly-field>
+    </fieldset>
   `,
 })
-export class PanelWrapperComponent extends FieldWrapper {
-}
\ No newline at end of file
+export class PanelWrapperComponent extends FieldWrapper {}
diff --git a/web/lora-package/src/onboarding/codecs/select.type.ts b/web/lora-package/src/onboarding/codecs/select.type.ts
index 5e14816e6..8e90e7b47 100644
--- a/web/lora-package/src/onboarding/codecs/select.type.ts
+++ b/web/lora-package/src/onboarding/codecs/select.type.ts
@@ -7,7 +7,6 @@ import { FieldType, FormlyFieldConfig } from "@ngx-formly/core";
     <c8y-wrapper-form-field>
       <div class="form-group">
         <div class="c8y-select-wrapper">
-          <label [for]="field.key">{{ field.templateOptions?.label }}</label>
           <select
             class="form-control"
             [formControl]="formControl"