diff --git a/src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.html b/src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.html new file mode 100644 index 00000000..ba1515b2 --- /dev/null +++ b/src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.html @@ -0,0 +1,27 @@ + + + + + {{ 'IOTDEVICE.LATEST-DATAPACKAGES' | translate }} + + + + + + + {{ i + 1 }} + + + + + {{ metadata.sentTime | tableDatePipe }} + + + + diff --git a/src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.scss b/src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.scss new file mode 100644 index 00000000..618f3711 --- /dev/null +++ b/src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.scss @@ -0,0 +1,4 @@ +.timestamps-container { + display: flex; +} + diff --git a/src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.ts b/src/app/applications/iot-devices/iot-device-detail/data-packages-timestamp/data-packages-timestamp.component.ts new file mode 100644 index 00000000..708d1334 --- /dev/null +++ b/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' + ); + } + } +} diff --git a/src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.html b/src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.html index 6e5b25b2..2d26149c 100644 --- a/src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.html +++ b/src/app/applications/iot-devices/iot-device-detail/iot-device-detail.component.html @@ -12,8 +12,18 @@ + + + + + + + + {{ 'IOTDEVICE.NO-DATAPACKAGE' | translate }} + + @@ -35,4 +45,4 @@ - \ No newline at end of file + diff --git a/src/app/applications/iot-devices/iot-devices.module.ts b/src/app/applications/iot-devices/iot-devices.module.ts index 19d4f08b..30573b62 100644 --- a/src/app/applications/iot-devices/iot-devices.module.ts +++ b/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, diff --git a/src/app/shared/helpers/array.helper.ts b/src/app/shared/helpers/array.helper.ts index 779ffa89..425074d9 100644 --- a/src/app/shared/helpers/array.helper.ts +++ b/src/app/shared/helpers/array.helper.ts @@ -9,3 +9,20 @@ export const splitList = ( return dataBatches; }; + +export const sortBy = ( + 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(); +}; diff --git a/src/app/shared/pipes/pipes.module.ts b/src/app/shared/pipes/pipes.module.ts index c5aacc28..e8c6d675 100644 --- a/src/app/shared/pipes/pipes.module.ts +++ b/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 {} diff --git a/src/app/shared/pipes/sort-by.pipe.ts b/src/app/shared/pipes/sort-by.pipe.ts new file mode 100644 index 00000000..8f7a75fb --- /dev/null +++ b/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::'asc'" + * ``` + */ + transform( + value: T[], + column: keyof T, + order: 'asc' | 'desc' = 'asc' + ): T[] { + return sortBy(value, column, order); + } +} diff --git a/src/assets/i18n/da.json b/src/assets/i18n/da.json index ff0293ac..b947132c 100644 --- a/src/assets/i18n/da.json +++ b/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": {
+ {{ 'IOTDEVICE.LATEST-DATAPACKAGES' | translate }} +
+ {{ i + 1 }} +
+ {{ metadata.sentTime | tableDatePipe }} +
+ {{ 'IOTDEVICE.NO-DATAPACKAGE' | translate }} +