Feature/IoT_640 - downlink queue

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

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>{{ "IOTDEVICE.DOWNLINK.DIALOG-TITLE" | translate }}</h1>
+<h1 mat-dialog-title>{{ "IOTDEVICE.DOWNLINK.FLUSH-QUEUE" | translate }}</h1>
 <div mat-dialog-content>
   {{ "IOTDEVICE.DOWNLINK.DIALOG-MESSAGE" | translate }}
 </div>

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

@@ -1,7 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import { MatDialogRef } from "@angular/material/dialog";
 import { TranslateService } from "@ngx-translate/core";
-import { DownlinkComponent } from "../downlink.component";
+import { DownlinkComponent } from "../downlinks/downlink.component";
 
 @Component({
   selector: "app-downlink-dialog",

src/app/applications/iot-devices/iot-device-detail/downlink/downlink-queue-dto.ts

@@ -0,0 +1,9 @@
+export class DownlinkQueueDto {
+  fCntDown: number;
+  payload: string;
+  port: number;
+  sendAt: Date;
+  acknowledgedAt: Date;
+  acknowledged: boolean;
+  createdAt: Date;
+}

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

@@ -0,0 +1,145 @@
+<div *ngIf="device.type === 'LORAWAN'" class="jumbotron jumbotron--full-width">
+  <h3 class="headerStyle">{{ "IOTDEVICE.DOWNLINK.DOWNLINKQUEUE" | translate }}</h3>
+  <div class="mat-elevation-z8">
+    <table mat-table [dataSource]="downlinkQueue">
+      <div class="loading-shade" *ngIf="isLoadingResults">
+        <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
+      </div>
+      <!-- Created At Column -->
+      <ng-container matColumnDef="createdAt">
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "IOTDEVICE.CREATED" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.createdAt | dkTimeWithSeconds }}
+        </td>
+      </ng-container>
+
+      <!-- fCntDown Column -->
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef>{{ "USERS.STATUS" | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          {{ getStatus(element) }}
+        </td>
+      </ng-container>
+
+      <!-- Payload Column -->
+      <ng-container matColumnDef="payload">
+        <th mat-header-cell *matHeaderCellDef>{{ "IOTDEVICE.DOWNLINK.PAYLOADTITLE" | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.payload }}
+        </td>
+      </ng-container>
+
+      <!-- Port Column -->
+      <ng-container matColumnDef="port">
+        <th mat-header-cell *matHeaderCellDef>{{ "IOTDEVICE.MQTT.PORT" | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.port }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  </div>
+  <div class="mt-5 buttons">
+    <button (click)="handleFlushQueue()" class="btn btn-secondary" type="button">
+      {{ "IOTDEVICE.DOWNLINK.FLUSH-QUEUE" | translate }}
+    </button>
+
+    <button (click)="handleReload()" class="btn btn-secondary" type="button">
+      {{ "IOTDEVICE.DOWNLINK.RELOAD" | translate }}
+    </button>
+  </div>
+</div>
+
+<div *ngIf="device.type === 'LORAWAN'" class="jumbotron jumbotron--full-width">
+  <h3 class="headerStyle">{{ "IOTDEVICE.DOWNLINK.HISTORICQUEUE" | translate }}</h3>
+  <div class="mat-elevation-z8">
+    <table mat-table [dataSource]="downlinkHistoryQueue">
+      <div class="loading-shade" *ngIf="isLoadingResults">
+        <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
+      </div>
+      <!-- Created At Column -->
+      <ng-container matColumnDef="createdAt">
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "IOTDEVICE.CREATED" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.createdAt | dkTimeWithSeconds }}
+        </td>
+      </ng-container>
+
+      <!-- Send At Column -->
+      <ng-container matColumnDef="sendAt">
+        <th mat-header-cell *matHeaderCellDef>
+          {{ "IOTDEVICE.DOWNLINK.SENDAT" | translate }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.sendAt | dkTimeWithSeconds }}
+        </td>
+      </ng-container>
+
+      <!-- AcknowledgedAt Column -->
+      <ng-container matColumnDef="acknowledgedAt">
+        <th mat-header-cell *matHeaderCellDef>{{ "IOTDEVICE.DOWNLINK.RECEIVEDAT" | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          {{
+            element.acknowledgedAt
+              ? (element.acknowledgedAt | dkTimeWithSeconds)
+              : ("IOTDEVICE.DOWNLINK.NOT-RECEIVED" | translate)
+          }}
+        </td>
+      </ng-container>
+
+      <!-- fCntDown Column -->
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef>{{ "USERS.STATUS" | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          {{ getStatus(element) }}
+        </td>
+      </ng-container>
+
+      <!-- fCntDown Column -->
+      <ng-container matColumnDef="fCntDown">
+        <th mat-header-cell *matHeaderCellDef>{{ "IOTDEVICE.DOWNLINK.FRAMECOUNTER" | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.fCntDown }}
+        </td>
+      </ng-container>
+
+      <!-- Acknowledged Column -->
+      <ng-container matColumnDef="acknowledged">
+        <th mat-header-cell *matHeaderCellDef>{{ "IOTDEVICE.DOWNLINK.CONFIRMED" | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          {{ isAcknowledged(element) }}
+        </td>
+      </ng-container>
+
+      <!-- Payload Column -->
+      <ng-container matColumnDef="payload">
+        <th mat-header-cell *matHeaderCellDef>{{ "IOTDEVICE.DOWNLINK.PAYLOADTITLE" | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.payload }}
+        </td>
+      </ng-container>
+
+      <!-- Port Column -->
+      <ng-container matColumnDef="port">
+        <th mat-header-cell *matHeaderCellDef>{{ "IOTDEVICE.MQTT.PORT" | translate }}</th>
+        <td mat-cell *matCellDef="let element">
+          {{ element.port }}
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumnsHistory"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumnsHistory"></tr>
+    </table>
+  </div>
+  <div class="mt-5 buttons">
+    <button (click)="handleReload()" class="btn btn-secondary" type="button">
+      {{ "IOTDEVICE.DOWNLINK.RELOAD" | translate }}
+    </button>
+  </div>
+</div>

src/app/applications/iot-devices/iot-device-detail/downlink/downlink-tables/downlink-tables.component.scss

@@ -0,0 +1,8 @@
+.headerStyle {
+  margin-bottom: 50px !important;
+}
+
+.buttons {
+  gap: 10px;
+  display: flex;
+}

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

@@ -0,0 +1,130 @@
+import { HttpErrorResponse } from "@angular/common/http";
+import { Component, Input, OnInit } from "@angular/core";
+import { MatDialog } from "@angular/material/dialog";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { IotDevice } from "@applications/iot-devices/iot-device.model";
+import { TranslateService } from "@ngx-translate/core";
+import { DeviceType } from "@shared/enums/device-type";
+import { ErrorMessageService } from "@shared/error-message.service";
+import { DownlinkService } from "@shared/services/downlink.service";
+import { DownlinkDialogComponent } from "../downlink-dialog/downlink-dialog.component";
+import { DownlinkQueueDto } from "../downlink-queue-dto";
+
+@Component({
+  selector: "app-downlink-tables",
+  templateUrl: "./downlink-tables.component.html",
+  styleUrls: ["./downlink-tables.component.scss"],
+})
+export class DownlinkTablesComponent implements OnInit {
+  @Input() device: IotDevice;
+  @Input() errorMessages: string[];
+  @Input() downlinkQueue: DownlinkQueueDto[];
+  public downlinkHistoryQueue: DownlinkQueueDto[];
+  public isLoadingResults = false;
+  public displayedColumns: string[] = ["createdAt", "status", "payload", "port"];
+  public displayedColumnsHistory: string[] = [
+    "createdAt",
+    "sendAt",
+    "acknowledgedAt",
+    "status",
+    "fCntDown",
+    "acknowledged",
+    "payload",
+    "port",
+  ];
+
+  constructor(
+    private snackBar: MatSnackBar,
+    private translate: TranslateService,
+    private downlinkService: DownlinkService,
+    public dialog: MatDialog,
+    private errorMessageService: ErrorMessageService
+  ) {}
+
+  ngOnInit(): void {
+    this.errorMessages = [];
+
+    this.getDownlinksQueue();
+    this.getHistoricalDownlinksQueue();
+  }
+
+  getDownlinksQueue() {
+    this.isLoadingResults = true;
+    this.downlinkService.getDownlinkQueue(this.device.id).subscribe(
+      (response: DownlinkQueueDto[]) => {
+        this.downlinkQueue = response;
+        this.isLoadingResults = false;
+      },
+      error => {
+        this.handleError(error);
+        this.isLoadingResults = false;
+      }
+    );
+  }
+
+  getHistoricalDownlinksQueue() {
+    this.isLoadingResults = true;
+    this.downlinkService.getHistoricalDownlinkQueue(this.device.id).subscribe(
+      (response: DownlinkQueueDto[]) => {
+        this.downlinkHistoryQueue = response;
+        this.isLoadingResults = false;
+      },
+      error => {
+        this.handleError(error);
+        this.isLoadingResults = false;
+      }
+    );
+  }
+
+  handleReload() {
+    this.getDownlinksQueue();
+    this.getHistoricalDownlinksQueue();
+  }
+
+  handleFlushQueue() {
+    this.openDownlinkDialog();
+  }
+
+  private handleError(error: HttpErrorResponse) {
+    this.errorMessages = this.errorMessageService.handleErrorMessage(error);
+  }
+
+  openDownlinkDialog() {
+    const dialog = this.dialog.open(DownlinkDialogComponent, {});
+
+    dialog.afterClosed().subscribe(result => {
+      if (result === true) {
+        this.downlinkService.flushQueue(this.device.id).subscribe(
+          response => {
+            this.snackBar.open(
+              this.translate.instant("IOTDEVICE.DOWNLINK.QUEUE-FLUSHED"),
+              this.translate.instant("DIALOG.OK"),
+              {
+                duration: 10000,
+              }
+            );
+            this.getDownlinksQueue();
+          },
+          error => {
+            this.handleError(error);
+          }
+        );
+      }
+    });
+  }
+
+  getStatus(downlink: DownlinkQueueDto) {
+    if (!downlink.acknowledgedAt && !downlink.sendAt) {
+      return this.translate.instant("IOTDEVICE.DOWNLINK.IN-QUEUE");
+    }
+    if (downlink.acknowledgedAt) {
+      return this.translate.instant("IOTDEVICE.DOWNLINK.RECEIVEDAT");
+    }
+
+    return this.translate.instant("IOTDEVICE.DOWNLINK.SENDAT");
+  }
+
+  isAcknowledged(downlink: DownlinkQueueDto) {
+    return !downlink.acknowledged ? this.translate.instant("false") : this.translate.instant("true");
+  }
+}