Merge remote-tracking branch 'origin/stage' into feature/1284_application-metadata

# Conflicts:
#	src/assets/i18n/da.json

Author: AramAlsabti

package-lock.json

@@ -63,7 +63,7 @@
     "eslint": "^7.3.1",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~5.0.0",
+    "karma": "~5.0.9",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-jasmine": "~3.0.1",

package.json

@@ -7,8 +7,8 @@
       {{errorMessage | translate}}
     </div>
 
-    <table mat-table [dataSource]="data" class="example-table" matSort matSortActive="created" matSortDisableClear
-      matSortDirection="desc">
+    <table mat-table [dataSource]="data" class="example-table" matSort matSortActive="name" matSortDisableClear
+      matSortDirection="asc">
 
       <!-- Name Column -->
       <ng-container matColumnDef="name">

src/app/applications/applications-list/applications-table/applications-table.component.html

@@ -0,0 +1,27 @@
+<mat-expansion-panel class="my-2 mx-3">
+  <mat-expansion-panel-header>
+    <mat-panel-title>
+      <p>
+        <strong>{{ 'IOTDEVICE.LATEST-DATAPACKAGES' | translate }}</strong>
+      </p>
+    </mat-panel-title>
+  </mat-expansion-panel-header>
+  <div class="timestamps-container">
+    <div>
+      <p *ngFor="
+          let metadata of sortedMetadata;
+          let i = index
+        ">
+        <strong>{{ i + 1 }}</strong>
+      </p>
+    </div>
+    <div>
+      <p *ngFor="
+          let metadata of sortedMetadata;
+          let i = index
+        ">
+        {{ metadata.sentTime | tableDatePipe }}
+      </p>
+    </div>
+  </div>
+</mat-expansion-panel>

src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.html

@@ -0,0 +1,4 @@
+.timestamps-container {
+  display: flex;
+}
+

src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.scss

@@ -0,0 +1,35 @@
+import {
+  Component,
+  Input,
+  OnChanges,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
+import { sortBy } from '@shared/helpers/array.helper';
+import { ReceivedMessageMetadata } from '@shared/models/received-message-metadata.model';
+
+@Component({
+  selector: 'app-data-packages-timestamp',
+  templateUrl: './data-packages-timestamp.component.html',
+  styleUrls: ['./data-packages-timestamp.component.scss'],
+})
+export class DataPackagesTimestampComponent implements OnInit, OnChanges {
+  @Input() receivedMessagesMetadata: ReceivedMessageMetadata[] = [];
+  sortedMetadata: ReceivedMessageMetadata[] = [];
+
+  ngOnInit(): void {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { receivedMessagesMetadata } = changes;
+    if (
+      receivedMessagesMetadata.currentValue !==
+      receivedMessagesMetadata.previousValue
+    ) {
+      this.sortedMetadata = sortBy(
+        receivedMessagesMetadata.currentValue,
+        'sentTime',
+        'desc'
+      );
+    }
+  }
+}

src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.ts

@@ -40,6 +40,13 @@ <h3>{{ 'IOTDEVICE.DETAIL' | translate }}</h3>
                     {{ 'IOTDEVICE.NOCOMMENT' | translate}}
                 </ng-template>
             </p>
+            <ng-container *ngIf="metadataTags.length">
+              <mat-divider></mat-divider>
+              <p *ngFor="let tag of metadataTags">
+                <strong>{{ tag.key }}</strong>
+                <span>{{ tag.value }}</span>
+            </p>
+            </ng-container>
         </div>
     </div>
     <div class="col-md-6 d-flex align-items-stretch">
@@ -72,4 +79,4 @@ <h3>{{ 'IOTDEVICE.LOCATION' | translate }}</h3>
             </p>
         </div>
     </div>
-</div>
+</div>

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

@@ -1,22 +1,29 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output } from '@angular/core';
+import { Location } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  OnInit,
+  SimpleChanges,
+} from '@angular/core';
 import { IotDevice } from '@applications/iot-devices/iot-device.model';
 import { IoTDeviceService } from '@applications/iot-devices/iot-device.service';
 import { TranslateService } from '@ngx-translate/core';
-import { Location } from '@angular/common';
-import { DeviceType } from '@shared/enums/device-type';
-import { MatDialog } from '@angular/material/dialog';
-import { DeleteDialogComponent } from '@shared/components/delete-dialog/delete-dialog.component';
-import { Subscription } from 'rxjs';
-import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dialog.service';
+import { jsonToList } from '@shared/helpers/json.helper';
+import { KeyValue } from '@shared/types/tuple.type';
 
 @Component({
   selector: 'app-iot-device-detail-generic',
   templateUrl: './iot-device-detail-generic.component.html',
-  styleUrls: ['./iot-device-detail-generic.component.scss']
+  styleUrls: ['./iot-device-detail-generic.component.scss'],
 })
-export class IotDeviceDetailGenericComponent implements OnInit, OnChanges, OnDestroy {
+export class IotDeviceDetailGenericComponent
+  implements OnInit, OnChanges, OnDestroy {
   batteryStatusColor = 'green';
   batteryStatusPercentage: number;
+  metadataTags: KeyValue[] = [];
   @Input() device: IotDevice;
   @Input() latitude = 0;
   @Input() longitude = 0;
@@ -27,16 +34,21 @@ export class IotDeviceDetailGenericComponent implements OnInit, OnChanges, OnDes
   constructor(
     private translate: TranslateService,
     public iotDeviceService: IoTDeviceService,
-    private location: Location,
+    private location: Location
+  ) {}
 
-  ) { }
-
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
-  ngOnChanges(): void {
+  ngOnChanges(changes: SimpleChanges): void {
     this.batteryStatusPercentage = this.getBatteryProcentage();
 
+    if (
+      changes?.device?.previousValue?.metadata !==
+        changes?.device?.currentValue?.metadata &&
+      this.device.metadata
+    ) {
+      this.metadataTags = jsonToList(this.device.metadata);
+    }
   }
 
   routeBack(): void {
@@ -48,19 +60,19 @@ export class IotDeviceDetailGenericComponent implements OnInit, OnChanges, OnDes
       latitude: this.latitude,
       draggable: false,
       editEnabled: false,
-      useGeolocation: false
+      useGeolocation: false,
     };
   }
 
   getBatteryProcentage(): number {
-    if (this.device?.lorawanSettings?.deviceStatusBattery === this.CHIRPSTACK_BATTERY_NOT_AVAILIBLE) {
+    if (
+      this.device?.lorawanSettings?.deviceStatusBattery ===
+      this.CHIRPSTACK_BATTERY_NOT_AVAILIBLE
+    ) {
       return null;
     }
     return Math.round(this.device?.lorawanSettings?.deviceStatusBattery);
   }
 
-  ngOnDestroy(): void {
-
-  }
-
+  ngOnDestroy(): void {}
 }

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

@@ -12,8 +12,18 @@
                     <!-- Datapackage, Downlink, API Key -->
                     <mat-tab-group animationDuration="200ms">
                         <mat-tab label="{{'IOTDEVICE.DETAIL-TAB' | translate}}">
+                          <ng-container *ngIf="device.latestReceivedMessage; else noSentTime">
                             <app-data-package [latestReceivedMessage]="device.latestReceivedMessage">
                             </app-data-package>
+                            <mat-divider></mat-divider>
+                            <app-data-packages-timestamp [receivedMessagesMetadata]="device.receivedMessagesMetadata">
+                            </app-data-packages-timestamp>
+                          </ng-container>
+                          <ng-template #noSentTime>
+                            <p class="my-2 mx-3">
+                              {{ 'IOTDEVICE.NO-DATAPACKAGE' | translate }}
+                            </p>
+                          </ng-template>
                         </mat-tab>
                         <mat-tab label="{{'IOTDEVICE.DOWNLINK-TAB' | translate}}" *ngIf="canStartDownlink">
                             <app-downlink [device]="device" [errorMessages]="errorMessages"></app-downlink>
@@ -35,4 +45,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

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

@@ -123,8 +123,7 @@ <h3>{{'IOTDEVICE.LORAWANSETUP' | translate}}</h3>
         <label class="form-label" for="serviceProfileID">{{'QUESTION.CHOOSE-SERVICEPROFILE' | translate}}</label>*
         <select id="serviceProfileID" class="form-select" name="serviceProfileID"
           [(ngModel)]="iotDevice.lorawanSettings.serviceProfileID" required
-          [value]="iotDevice.lorawanSettings.serviceProfileID"
-          [disabled]="editmode"
+          [value]="iotDevice.lorawanSettings.serviceProfileID" [disabled]="editmode"
           [ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('serviceProfileID'), 'is-valid' : formFailedSubmit && !errorFields.includes('serviceProfileID')}">
           <option *ngFor="let serviceProfile of serviceProfiles" [value]="serviceProfile.id"
             [selected]="serviceProfile.id === iotDevice.lorawanSettings.serviceProfileID">
@@ -181,8 +180,8 @@ <h3>{{'QUESTION.ABP' | translate}}</h3>
         </div>
 
         <div class="form-group mt-5">
-          <label class="form-label"
-            for="applicationSessionKey">{{'QUESTION.APPLICATIONSESSIONKEY' | translate}}*</label>
+          <label class="form-label" for="applicationSessionKey">{{'QUESTION.APPLICATIONSESSIONKEY' |
+            translate}}*</label>
           <input type="text" id="applicationSessionKey" name="applicationSessionKey" maxLength="32"
             [placeholder]="'QUESTION.APPLICATIONSESSIONKEY-PLACEHOLDER' | translate" class="form-control"
             [(ngModel)]="iotDevice.lorawanSettings.applicationSessionKey"
@@ -222,8 +221,13 @@ <h3>{{'QUESTION.ABP' | translate}}</h3>
     </app-sigfox-device-edit>
   </ng-container>
 
+  <div class="mt-5 row">
+    <h3>{{ "QUESTION.METADATA" | translate}}</h3>
+    <app-form-key-value-list [(tags)]="metadataTags" [errorFieldId]="errorMetadataFieldId">
+    </app-form-key-value-list>
+  </div>
   <div class="form-group mt-5">
     <button (click)="routeBack()" class="btn btn-secondary" type="button">{{ 'GEN.CANCEL' | translate}}</button>
     <button class="btn btn-primary ml-2" type="submit">{{ 'GEN.SAVE' | translate }}</button>
   </div>
-</form>
+</form>