Show latest iot device metadata

Author: AramAlsabti

src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.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.scss

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

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataPackagesTimestampComponent } from './data-packages-timestamp.component';
+
+describe('DataPackagesTimestampComponent', () => {
+  let component: DataPackagesTimestampComponent;
+  let fixture: ComponentFixture<DataPackagesTimestampComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DataPackagesTimestampComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DataPackagesTimestampComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -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/iot-device-detail.component.html

@@ -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-devices.module.ts

@@ -19,6 +19,7 @@ import { PipesModule } from '@shared/pipes/pipes.module';
 import { DeviceModelComponent } from './iot-device-detail/device-model/device-model.component';
 import { MonacoEditorModule } from 'ngx-monaco-editor';
 import { DataPackageComponent } from './iot-device-detail/data-package/data-package.component';
+import { DataPackagesTimestampComponent } from './iot-device-detail/data-packages-timestamp/data-packages-timestamp.component';
 
 @NgModule({
     declarations: [
@@ -32,7 +33,8 @@ import { DataPackageComponent } from './iot-device-detail/data-package/data-pack
         DownlinkComponent,
         DownlinkDialogComponent,
         DeviceModelComponent,
-        DataPackageComponent
+        DataPackageComponent,
+        DataPackagesTimestampComponent,
     ],
     exports: [
         IotDevicesTableComponent,

src/app/shared/helpers/array.helper.ts

@@ -9,3 +9,20 @@ export const splitList = <T extends unknown>(
 
   return dataBatches;
 };
+
+export const sortBy = <T>(
+  value: T[],
+  column: keyof T,
+  order: 'asc' | 'desc' = 'asc'
+): T[] => {
+  if (!value?.length) {
+    return value;
+  }
+
+  const copy = value.slice();
+  copy.sort((a, b) =>
+    a[column] === b[column] ? 0 : a[column] > b[column] ? 1 : -1
+  );
+
+  return order === 'asc' ? copy : copy.reverse();
+};

src/app/shared/pipes/pipes.module.ts

@@ -6,6 +6,7 @@ import { isGlobalAdminPipe } from './is-global-admin.pipe';
 import { CreatedUpdatedByPipe } from './created-updated-by.pipe';
 import { CustomDatePipe, CustomTableDatePipe } from './custom-date.pipe';
 import { FilterDevicesPipe } from './filter-devices.pipe';
+import { SortByPipe } from './sort-by.pipe';
 
 @NgModule({
   declarations: [
@@ -16,6 +17,7 @@ import { FilterDevicesPipe } from './filter-devices.pipe';
     CustomTableDatePipe,
     CreatedUpdatedByPipe,
     FilterDevicesPipe,
+    SortByPipe
   ],
   imports: [CommonModule],
   exports: [
@@ -26,6 +28,7 @@ import { FilterDevicesPipe } from './filter-devices.pipe';
     CustomTableDatePipe,
     CreatedUpdatedByPipe,
     FilterDevicesPipe,
+    SortByPipe
   ],
 })
 export class PipesModule {}

src/app/shared/pipes/sort-by.pipe.ts

@@ -0,0 +1,19 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { sortBy } from '@shared/helpers/array.helper';
+
+@Pipe({ name: 'sortBy' })
+export class SortByPipe implements PipeTransform {
+  /**
+   * Example:
+   * ```
+   * *ngFor="let c of arrayOfObjects | sortBy:<propertyName>:'asc'"
+   * ```
+   */
+  transform<T>(
+    value: T[],
+    column: keyof T,
+    order: 'asc' | 'desc' = 'asc'
+  ): T[] {
+    return sortBy(value, column, order);
+  }
+}

src/assets/i18n/da.json

@@ -172,7 +172,7 @@
     "AUTHORIZATIONHEADER": "Authorization header",
     "NO-AUTHORIZATIONHEADER": "Ingen Authorization header angivet",
     "ADD-TO-OPENDATADK": "Send data til OpenDataDK",
-    "OPENDATA-DK": "OpenDataDK", 
+    "OPENDATA-DK": "OpenDataDK",
     "NO-OPENDATA-DK": "Der er ikke oprettet nogen datadeling med Open Data DK endnu",
     "HTTP_PUSH": "HTTP Push",
     "FIWARE": "FIWARE"
@@ -677,6 +677,7 @@
     },
     "LORAWANSETUP": "LoRaWAN specifik opsætning",
     "LATEST-DATAPACKAGE": "Seneste datapakke sendt fra enheden:",
+    "LATEST-DATAPACKAGES": "Seneste modtagelser af datapakker (nyeste først):",
     "NO-DATAPACKAGE": "Der er ikke modtaget nogle datapakker",
     "DATAPACKAGE": "Datapakke",
     "LORA": {