Roadmap features: Mqtt broker/subscriber support

src/app/applications/bulk-import/bulk-import.component.ts

@@ -9,7 +9,6 @@ import {
 import { IoTDeviceService } from '@applications/iot-devices/iot-device.service';
 import { faDownload, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { TranslateService } from '@ngx-translate/core';
-import { OrganizationAccessScope } from '@shared/enums/access-scopes';
 import { ErrorMessageService } from '@shared/error-message.service';
 import { splitList } from '@shared/helpers/array.helper';
 import { Download } from '@shared/helpers/download.helper';
@@ -20,7 +19,7 @@ import { Papa } from 'ngx-papaparse';
 import { Observable, Subject } from 'rxjs';
 import { takeWhile } from 'rxjs/operators';
 import { BulkImport } from './bulk-import.model';
-import { BulkMapping } from './bulkMapping';
+import { BulkMapping } from './bulk-mapping';
 
 @Component({
   selector: 'app-bulk-import',

src/app/applications/bulk-import/bulkMapping.ts → src/app/applications/bulk-import/bulk-mapping.ts

@@ -16,7 +16,6 @@ export class BulkMapping {
       default:
         break;
     }
-    //return new IotDevice();
   }
 
   private lorawanMapper(data: any, applicationId): IotDevice {
@@ -53,13 +52,13 @@ export class BulkMapping {
   private mqttBrokerMapper(data: any, applicationId: number) {
     const newDevice = this.baseMapper(data, applicationId);
     newDevice.mqttBrokerSettings = {
+      authenticationType: data.authenticationType,
       caCertificate: undefined,
       deviceCertificate: undefined,
       deviceCertificateKey: undefined,
       mqttPort: undefined,
       mqttURL: undefined,
       mqtttopicname: undefined,
-      authenticationType: data.authenticationType,
       mqttusername: data.mqttusername,
       mqttpassword: data.mqttpassword,
     };
@@ -74,10 +73,10 @@ export class BulkMapping {
       caCertificate: this.base64Decode(data.caCertificate),
       deviceCertificate: this.base64Decode(data.deviceCertificate),
       deviceCertificateKey: this.base64Decode(data.deviceCertificateKey),
-      mqttPort: data.mqttPort,
+      mqttPort: data.mqttPort ? Number(data.mqttPort) : undefined,
       mqttURL: data.mqttURL,
-      mqttpassword: data.mqttpassword,
       mqtttopicname: data.mqtttopicname,
+      mqttpassword: data.mqttpassword,
       mqttusername: data.mqttusername,
     };
     newDevice.type = DeviceType.MQTT_SUBSCRIBER;
@@ -110,7 +109,7 @@ export class BulkMapping {
       receivedMessagesMetadata: undefined,
       metadata: undefined,
       apiKey: undefined,
-      id: data.id ? data.id : undefined,
+      id: undefined,
       createdAt: undefined,
       updatedAt: undefined,
       applicationId: applicationId,

src/app/applications/iot-devices/iot-device-detail/iot-device-detail-generic/iot-device-detail-generic.component.html

@@ -9,16 +9,8 @@ <h3>{{ 'IOTDEVICE.DETAIL' | translate }}</h3>
             <mat-divider></mat-divider>
               <div class="d-flex align-items-center">
                 <p class="mr-1"><strong>{{ 'IOT-TABLE.BATTERY' | translate }}</strong></p>
-                <app-batteri-status *ngIf="device.type === DeviceType.LORAWAN; else noBatteryStatus" [color]="batteryStatusColor"
+                <app-batteri-status [color]="batteryStatusColor"
                                     [percentage]="batteryStatusPercentage"></app-batteri-status>
-                <ng-template #noBatteryStatus>
-                  <div>
-                    <p>{{ 'IOTDEVICE-TABLE-ROW.NOT-SUPPORTED-SHORT' | translate }}</p>
-                  </div>
-                </ng-template>
-                <ng-template #notAvailable>
-                  <span>{{'IOTDEVICE-TABLE-ROW.NOT-AVAILABLE' | translate}}</span>
-                </ng-template>
               </div>
             </ng-template>
             <mat-divider></mat-divider>
@@ -34,7 +26,7 @@ <h3>{{ 'IOTDEVICE.DETAIL' | translate }}</h3>
             <ng-container *ngIf="device.type === DeviceType.SIGFOX && device.sigfoxSettings">
                 <app-iot-device-detail-sigfox [device]="device"></app-iot-device-detail-sigfox>
             </ng-container>
-            <ng-container  *ngIf="device.type === DeviceType.GENERIC_HTTP">
+            <ng-container *ngIf="device.type === DeviceType.GENERIC_HTTP">
                 <mat-divider></mat-divider>
                 <p>
                     <strong>{{ 'IOTDEVICE.GENERIC_HTTP.APIKEY' | translate }}</strong>

src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-broker/iot-device-details-mqtt-broker.component.html

@@ -2,20 +2,22 @@
 <p><strong>{{ 'IOTDEVICE.MQTT.PORT' | translate }}</strong>{{ device.mqttBrokerSettings.mqttPort }}</p>
 <p><strong>{{ 'IOTDEVICE.MQTT.TOPIC_NAME' | translate }}</strong>{{device.mqttBrokerSettings.mqtttopicname}}</p>
 
-<ng-container *ngIf="device.mqttBrokerSettings.authenticationType === AuthenticationType.PASSWORD; else certificate">
+<ng-container *ngIf="device.mqttBrokerSettings.authenticationType === AuthenticationType.PASSWORD">
   <p><strong>{{ 'QUESTION.MQTT.USERNAME-LABEL' | translate }}</strong>{{ device.mqttBrokerSettings.mqttusername }}</p>
-  <!--  <p><strong>{{ 'QUESTION.MQTT.PASSWORD-LABEL' | translate }}</strong>{{ device.mqttBrokerSettings.mqttPassword }}</p>-->
 </ng-container>
-<ng-template #certificate>
   <p><strong>{{ 'QUESTION.MQTT.CA-CERTIFICATE' | translate }}</strong>
     <button [cdkCopyToClipboard]="device.mqttBrokerSettings.caCertificate" class="btn">{{ 'IOTDEVICE.MQTT.COPY-TO-CLIPBOARD' | translate }}</button>
-    <textarea class="form-control" [readOnly]="true">{{ device.mqttBrokerSettings.caCertificate }}</textarea></p>
+    <button class="btn ml-2" (click)="downloadCaCertificate(device.mqttBrokerSettings.caCertificate, 'ca.crt')">{{ 'IOTDEVICE.MQTT.DOWNLOAD' | translate }}</button>
+    <textarea class="form-control mt-1" [readOnly]="true">{{ device.mqttBrokerSettings.caCertificate }}</textarea></p>
+<ng-container *ngIf="device.mqttBrokerSettings.authenticationType === AuthenticationType.CERTIFICATE">
   <p><strong>{{ 'QUESTION.MQTT.DEVICE-CERTIFICATE' | translate }}</strong>
     <button [cdkCopyToClipboard]="device.mqttBrokerSettings.deviceCertificate" class="btn">{{ 'IOTDEVICE.MQTT.COPY-TO-CLIPBOARD' | translate }}</button>
-    <textarea class="form-control" [readOnly]="true">{{ device.mqttBrokerSettings.deviceCertificate }}</textarea>
+    <button class="btn ml-2" (click)="downloadCaCertificate(device.mqttBrokerSettings.deviceCertificate,  device.name +'.crt')">{{ 'IOTDEVICE.MQTT.DOWNLOAD' | translate }}</button>
+    <textarea class="form-control mt-1" [readOnly]="true">{{ device.mqttBrokerSettings.deviceCertificate }}</textarea>
   </p>
   <p><strong>{{ 'QUESTION.MQTT.DEVICE-CERTIFICATE-KEY' | translate }}</strong>
     <button [cdkCopyToClipboard]="device.mqttBrokerSettings.deviceCertificateKey" class="btn">{{ 'IOTDEVICE.MQTT.COPY-TO-CLIPBOARD' | translate }}</button>
-    <textarea class="form-control" [readOnly]="true">{{ device.mqttBrokerSettings.deviceCertificateKey }}</textarea>
+    <button class="btn ml-2" (click)="downloadCaCertificate(device.mqttBrokerSettings.deviceCertificateKey, device.name + '.key')">{{ 'IOTDEVICE.MQTT.DOWNLOAD' | translate }}</button>
+    <textarea class="form-control mt-1" [readOnly]="true">{{ device.mqttBrokerSettings.deviceCertificateKey }}</textarea>
   </p>
-</ng-template>
+</ng-container>

src/app/applications/iot-devices/iot-device-detail/iot-device-details-mqtt-broker/iot-device-details-mqtt-broker.component.ts

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { IotDevice } from '@applications/iot-devices/iot-device.model';
 import { AuthenticationType } from '@shared/enums/authentication-type';
+import { simpleDownload } from '@shared/helpers/download.helper';
 
 @Component({
   selector: 'app-iot-device-details-mqtt-broker',
@@ -15,4 +16,8 @@ export class IotDeviceDetailsMqttBrokerComponent implements OnInit {
   ngOnInit(): void {}
 
   protected readonly AuthenticationType = AuthenticationType;
+
+  downloadCaCertificate(caCertificate: string, filename: string) {
+    simpleDownload(caCertificate, filename);
+  }
 }

src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.html

@@ -16,36 +16,35 @@
          [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('type'), 'is-valid' : formFailedSubmit && !errorFields.includes('type')}">
       <div class="form-check-inline radio-image">
         <label class="form-check-label d-flex flex-column-reverse">
-          <input attr.aria-label="LoRaWAN" type="radio" name="type" value="LORAWAN" class="form-check-input" required
-                 [(ngModel)]="iotDevice.type" [attr.disabled]="editmode ? '' : null">
+          <input attr.aria-label="LoRaWAN" type="checkbox" name="LORAWAN" class="form-check-input" required
+                [attr.disabled]="editmode ? '' : null" (change)="isChecked($event)" [checked]="iotDevice.type.toString().includes('LORAWAN')">
           <div class="image-container">
             <img src="assets/images/lora.png" alt="LoRaWAN">
           </div>
         </label>
       </div>
       <div class="form-check-inline radio-image">
         <label class="form-check-label d-flex flex-column-reverse">
-          <input attr.aria-label="{{'GEN.HTTP' | translate}}" type="radio" name="type" value="GENERIC_HTTP"
-                 class="form-check-input" required [(ngModel)]="iotDevice.type" [attr.disabled]="editmode ? '' : null">
+          <input attr.aria-label="{{'GEN.HTTP' | translate}}" type="checkbox" name="GENERIC_HTTP"
+                 class="form-check-input" required [attr.disabled]="editmode ? '' : null" (change)="isChecked($event)" [checked]="iotDevice.type.toString().includes('GENERIC_HTTP')">
           <div class="image-container">
             <app-dynamic-img [altText]="'GEN.HTTP' | translate" [image]="'iot'"></app-dynamic-img>
           </div>
         </label>
       </div>
       <div class="form-check-inline radio-image">
         <label class="form-check-label d-flex flex-column-reverse">
-          <input attr.aria-label="MQTT Broker" type="radio" name="type" value="MQTT" required
-                 [checked]="true"
-                 class="form-check-input" [(ngModel)]="iotDevice.type" [attr.disabled]="editmode ? '' : null">
+          <input attr.aria-label="MQTT" type="checkbox" name="MQTT" required
+                 class="form-check-input" [attr.disabled]="editmode ? '' : null" (change)="isChecked($event)" [checked]="iotDevice.type.toString().includes('MQTT')">
           <div class="image-container">
             <img src="assets/images/logo_mqtt.png" alt="MQTT">
           </div>
         </label>
       </div>
       <div class="form-check-inline radio-image">
         <label class="form-check-label d-flex flex-column-reverse">
-          <input attr.aria-label="Sigfox" type="radio" name="type" value="SIGFOX" class="form-check-input" required
-                 [(ngModel)]="iotDevice.type" [attr.disabled]="editmode ? '' : null">
+          <input attr.aria-label="Sigfox" type="checkbox" name="SIGFOX" class="form-check-input" required
+                 [attr.disabled]="editmode ? '' : null" (change)="isChecked($event)" [checked]="iotDevice.type.toString().includes('SIGFOX')">
           <div class="image-container">
             <img src="assets/images/Sigfox_Logo.png" alt="Sigfox">
           </div>

src/app/applications/iot-devices/iot-device-edit/iot-device-edit.component.ts

@@ -50,7 +50,6 @@ export class IotDeviceEditComponent implements OnInit, OnDestroy {
   public OTAA = true;
   metadataTags: { key?: string; value?: string }[] = [];
   errorMetadataFieldId: string | undefined;
-  public console = console;
   public deviceSubscription: Subscription;
   private applicationsSubscription: Subscription;
   private serviceProfilesSubscription: Subscription;
@@ -129,6 +128,17 @@ export class IotDeviceEditComponent implements OnInit, OnDestroy {
       });
   }
 
+  isChecked(event) {
+    if (event.target.checked) {
+      this.iotDevice.type = event.target.name;
+    } else if (
+      !event.target.checked &&
+      this.iotDevice.type.toString().includes(event.target.name)
+    ) {
+      event.target.checked = true;
+    }
+  }
+
   getDevice(id: number): void {
     this.deviceSubscription = this.iotDeviceService
       .getIoTDevice(id)
@@ -311,8 +321,14 @@ export class IotDeviceEditComponent implements OnInit, OnDestroy {
 
   postIoTDevice() {
     this.iotDeviceService.createIoTDevice(this.iotDevice).subscribe(
-      () => {
-        this.router.navigate(['applications/', this.iotDevice.applicationId]);
+      (response: IotDevice) => {
+        this.router.navigate([
+          'applications/' +
+            this.iotDevice.applicationId +
+            '/iot-device/' +
+            response.id +
+            '/details',
+        ]);
       },
       (error: HttpErrorResponse) => {
         this.handleError(error);

src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.html

@@ -1,9 +1,8 @@
 <div class="form-group mt-3 col-12">
-  <label class="form-label" for="autheticationType">{{'QUESTION.MQTT.AUTHENTICATIONTYPE' | translate}}*</label>
+  <label class="form-label" for="authenticationType">{{'QUESTION.MQTT.AUTHENTICATIONTYPE' | translate}}*</label>
   <select
-    id="autheticationType" class="form-select" name="autheticationType"
+    id="authenticationType" class="form-select" name="authenticationType"
     [(ngModel)]="settings.authenticationType"
-    [disabled]="editMode"
     [value]="settings.authenticationType"
   >
     <option *ngFor="let type of AuthenticationType | keyvalue" [value]="type.key">
@@ -30,7 +29,6 @@
       name="username"
       [placeholder]="'QUESTION.MQTT.USERNAME-PLACEHOLDER' | translate"
       required
-      [disabled]="editMode"
       [(ngModel)]="settings.mqttusername"
       [ngClass]="{
           'is-invalid': formFailedSubmit && errorFields.includes('mqttusername'),
@@ -49,15 +47,14 @@
       matTooltipHideDelay="2000">
     </fa-icon>
     <input
-      [type]="editMode ? 'password' : 'text'"
+      type="text"
       class="form-control"
       id="password"
       name="password"
       [placeholder]="'QUESTION.MQTT.PASSWORD-PLACEHOLDER' | translate"
       required
       datatype=""
       [(ngModel)]="settings.mqttpassword"
-      [disabled]="editMode"
       [ngClass]="{
           'is-invalid': formFailedSubmit && errorFields.includes('mqttpassword'),
           'is-valid': formFailedSubmit && !errorFields.includes('mqttpassword')

src/app/applications/iot-devices/iot-device-edit/mqtt-device-edit/mqtt-authentication-select/mqtt-authentication-select.component.ts

@@ -1,7 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { AuthenticationType } from '@shared/enums/authentication-type';
 import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
-import { IotDevice } from '@applications/iot-devices/iot-device.model';
 import { MqttSharedSettings } from '@shared/models/mqtt-shared-settings.model';
 
 @Component({