Feature/iot 118 move device

src/app/applications/iot-devices/iot-device-change-application-dialog/iot-device-change-application-dialog.component.html

@@ -0,0 +1,114 @@
+<div class="iot-device-change-application-dialog">
+  <h1 mat-dialog-title>{{ "IOTDEVICE.CHANGE-APPLICATION.TITLE" | translate }}</h1>
+  <div mat-dialog-content>
+    <label class="form-label" for="organizationSelect">{{
+        "IOTDEVICE.CHANGE-APPLICATION.CHOOSE-ORGANIZATION" | translate
+      }}</label>
+    <mat-select
+      (selectionChange)="onOrganizationChange()"
+      [(value)]="iotDeviceUpdate.organizationId"
+      [compareWith]="compare"
+      class="form-control"
+      id="organizationSelect"
+      panelClass="overflow-x-hidden"
+    >
+      <mat-option *ngFor="let organization of organizations | async" [value]="organization.id">
+        {{ organization.name }}
+      </mat-option>
+    </mat-select>
+    <label class="form-label" for="organizationSelect">{{
+        "IOTDEVICE.CHANGE-APPLICATION.CHOOSE-APPLICATION" | translate
+      }}</label>
+    <mat-select
+      (selectionChange)="onApplicationChange()"
+      [(value)]="iotDeviceUpdate.applicationId"
+      [compareWith]="compare"
+      class="form-control"
+      id="applicationSelect"
+      panelClass="overflow-x-hidden"
+    >
+      <mat-option *ngFor="let application of filteredApplications | async" [value]="application.id">
+        {{ application.name }}
+      </mat-option>
+    </mat-select>
+    <label class="form-label" for="organizationSelect">{{
+        "IOTDEVICE.CHANGE-APPLICATION.CHOOSE-DEVICE-MODEL" | translate
+      }}</label>
+    <mat-select
+      [(value)]="iotDeviceUpdate.deviceModelId"
+      [compareWith]="compare"
+      class="form-control"
+      id="deviceModelSelect"
+      panelClass="overflow-x-hidden"
+    >
+      <mat-option [value]="0">
+        {{ "QUESTION.DEVICE-MODEL-SELECT-NON" | translate }}
+      </mat-option>
+      <mat-option *ngFor="let deviceModel of deviceModels" [value]="deviceModel.id">
+        {{ deviceModel.body.name }}
+      </mat-option>
+    </mat-select>
+  </div>
+
+  <div class="container row" class="mt-3" mat-dialog-content>
+    <a (click)="addRow()" class="btn btn-secondary my-2 mb-3 mt-3">{{
+        "IOTDEVICE.CHANGE-APPLICATION.CHOOSE-DATA-TARGET" | translate
+      }}</a>
+    <ng-container *ngIf="payloadDecoders && iotDeviceUpdate.dataTargetToPayloadDecoderIds?.length > 0">
+      <table class="table table-striped table-bordered">
+        <tbody>
+        <tr
+          *ngFor="let element of iotDeviceUpdate.dataTargetToPayloadDecoderIds; let i = index"
+          [attr.data-index]="i"
+        >
+          <td>
+            <div class="row">
+              <mat-form-field appearance="fill">
+                <mat-label>{{ "IOTDEVICE.CHANGE-APPLICATION.ADD-DATA-TARGET" | translate }}</mat-label>
+                <mat-select [(value)]="element.dataTargetId" name="dataTarget">
+                  <mat-option *ngFor="let dataTarget of dataTargets" [value]="dataTarget.id">{{
+                      dataTarget.name
+                    }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </td>
+          <td>
+            <div class="row">
+              <mat-form-field appearance="fill">
+                <mat-label>{{ "QUESTION.DATATARGET.SELECT-PAYLOADDECODER" | translate }}</mat-label>
+                <mat-select [(value)]="element.payloadDecoderId" matNativeControl name="payloadDecoder">
+                  <mat-option [value]="0">
+                    {{ "QUESTION.DATATARGET.NO-PAYLOAD-DECODER-SELECTED" | translate }}
+                  </mat-option>
+                  <mat-option *ngFor="let payloadDecoder of payloadDecoders" [value]="payloadDecoder.id">
+                    {{ payloadDecoder.name }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </td>
+          <td>
+            <a (click)="deleteRow(i)">
+              <div class="text-center m-2">
+                <fa-icon [icon]="faTimesCircle"></fa-icon>
+                <p>{{ "DATATARGET.DELETE" | translate }}</p>
+              </div>
+            </a>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </ng-container>
+  </div>
+
+  <div class="d-flex flex-row mat-dialog-actions" mat-dialog-actions>
+    <button (click)="onSubmit()" class="btn btn-primary">
+      {{ "GEN.SAVE" | translate }}
+    </button>
+    <button [mat-dialog-close]="false" class="btn btn-secondary ml-2" mat-dialog-close>
+      {{ "GEN.CANCEL" | translate }}
+    </button>
+  </div>
+</div>

src/app/applications/iot-devices/iot-device-change-application-dialog/iot-device-change-application-dialog.component.scss

@@ -0,0 +1,8 @@
+.iot-device-change-application-dialog {
+  width: 50vw;
+}
+
+.mat-dialog-actions {
+  margin-left: 13px;
+  margin-bottom: 13px;
+}

src/app/applications/iot-devices/iot-device-change-application-dialog/iot-device-change-application-dialog.component.ts

@@ -0,0 +1,213 @@
+import { Component, Inject, OnDestroy, OnInit } from "@angular/core";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { MatSnackBar } from "@angular/material/snack-bar";
+import { Organisation } from "@app/admin/organisation/organisation.model";
+import { OrganisationService } from "@app/admin/organisation/organisation.service";
+import { DeviceModelService } from "@app/device-model/device-model.service";
+import { DeviceModel } from "@app/device-model/device.model";
+import { Application } from "@applications/application.model";
+import { ApplicationService } from "@applications/application.service";
+import { TranslateService } from "@ngx-translate/core";
+import { IoTDeviceApplicationDialogModel } from "@shared/models/dialog.model";
+import { ReplaySubject } from "rxjs";
+import { IotDevice, UpdateIoTDeviceApplication } from "../iot-device.model";
+import { IoTDeviceService } from "../iot-device.service";
+import { PayloadDecoder, PayloadDecoderMappedResponse } from "@payload-decoder/payload-decoder.model";
+import { PayloadDecoderService } from "@payload-decoder/payload-decoder.service";
+import { DatatargetService } from "@applications/datatarget/datatarget.service";
+import { Datatarget } from "@applications/datatarget/datatarget.model";
+import { PayloadDeviceDatatargetService } from "@payload-decoder/payload-device-datatarget.service";
+import { faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+
+@Component({
+  selector: "app-iot-device-change-application-dialog",
+  templateUrl: "./iot-device-change-application-dialog.component.html",
+  styleUrls: ["./iot-device-change-application-dialog.component.scss"],
+})
+export class IoTDeviceChangeApplicationDialogComponent implements OnInit, OnDestroy {
+  public iotDevice: IotDevice;
+  public iotDeviceUpdate: UpdateIoTDeviceApplication;
+  public organizations: ReplaySubject<Organisation[]> = new ReplaySubject<Organisation[]>(1);
+  public applications: Application[];
+  public filteredApplications: ReplaySubject<Application[]> = new ReplaySubject<Application[]>(1);
+  public deviceModels: DeviceModel[];
+  public devices: IotDevice[] = [];
+  public payloadDecoders: PayloadDecoder[] = [];
+  public dataTargets: Datatarget[] = [];
+  faTimesCircle = faTimesCircle;
+  private subscriptions = [];
+
+  constructor(
+    private iotDeviceService: IoTDeviceService,
+    private applicationService: ApplicationService,
+    public translate: TranslateService,
+    private organizationService: OrganisationService,
+    private deviceModelService: DeviceModelService,
+    private payloadDecoderService: PayloadDecoderService,
+    private dateTargetService: DatatargetService,
+    private payloadDeviceDatatargetService: PayloadDeviceDatatargetService,
+    private snackBar: MatSnackBar,
+    private dialog: MatDialogRef<IoTDeviceChangeApplicationDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public dialogModel: IoTDeviceApplicationDialogModel
+  ) {}
+
+  ngOnInit(): void {
+    this.translate.use("da");
+    this.iotDeviceUpdate = {
+      deviceModelId: this.dialogModel.deviceId,
+      applicationId: 0,
+      organizationId: 0,
+      dataTargetToPayloadDecoderIds: [],
+    };
+
+    this.getIoTDeviceAndDefaultData(this.dialogModel.deviceId);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(s => s?.unsubscribe());
+  }
+
+  getIoTDeviceAndDefaultData(id: number): void {
+    const iotDevicesSubscription = this.iotDeviceService.getIoTDevice(id).subscribe((iotDevice: IotDevice) => {
+      this.iotDevice = iotDevice;
+      this.getOrganizations();
+      this.getApplications();
+      this.getPayloadDecoders();
+
+      this.getDataTargets(this.iotDevice.application.id);
+      this.getDeviceModels(this.iotDevice.application.belongsTo.id);
+
+      this.iotDeviceUpdate.deviceModelId = this.iotDevice.deviceModel.id;
+      this.iotDeviceUpdate.applicationId = this.iotDevice.application.id;
+      this.iotDeviceUpdate.organizationId = this.iotDevice.application.belongsTo.id;
+
+      this.getIoTDeviceCurrentDataTargetsAndPayloadDecoders(this.dialogModel.deviceId);
+    });
+
+    this.subscriptions.push(iotDevicesSubscription);
+  }
+
+  getIoTDeviceCurrentDataTargetsAndPayloadDecoders(id: number): void {
+    const payloadDeviceDatatargetSubscription = this.payloadDeviceDatatargetService
+      .getByIoTDevice(id)
+      .subscribe(dataTargetsAndPayloadDecoders => {
+        const dataTargetsAndPayloadIds = dataTargetsAndPayloadDecoders.data.map(val => {
+          return { dataTargetId: val.dataTarget.id, payloadDecoderId: val.payloadDecoder?.id };
+        });
+        this.iotDeviceUpdate.dataTargetToPayloadDecoderIds.push(...dataTargetsAndPayloadIds);
+      });
+
+    this.subscriptions.push(payloadDeviceDatatargetSubscription);
+  }
+
+  getOrganizations() {
+    const organizationsSubscription = this.organizationService.getMultipleWithApplicationAdmin().subscribe(res => {
+      this.organizations.next(res.data.slice());
+    });
+
+    this.subscriptions.push(organizationsSubscription);
+  }
+
+  getApplications(): void {
+    const applicationsSubscription = this.applicationService
+      .getApplications(1000, 0, "asc", "id")
+      .subscribe(applicationData => {
+        this.applications = applicationData.data;
+        this.filteredApplications.next(
+          this.applications.filter(app => app.belongsTo.id === this.iotDevice.application.belongsTo.id)
+        );
+      });
+
+    this.subscriptions.push(applicationsSubscription);
+  }
+
+  getPayloadDecoders() {
+    const payloadDecoderSubscription = this.payloadDecoderService
+      .getMultiple(1000, 0, "id", "ASC")
+      .subscribe((response: PayloadDecoderMappedResponse) => {
+        this.payloadDecoders = response.data.sort((a, b) => a.name.localeCompare(b.name, "en", { numeric: true }));
+      });
+
+    this.subscriptions.push(payloadDecoderSubscription);
+  }
+
+  getDataTargets(applicationId: number) {
+    const dataTargetSubscription = this.dateTargetService
+      .getByApplicationId(1000, 0, applicationId)
+      .subscribe(response => {
+        this.dataTargets = response.data;
+      });
+
+    this.subscriptions.push(dataTargetSubscription);
+  }
+
+  getDeviceModels(organizationId: number) {
+    const deviceModelSubscription = this.deviceModelService
+      .getMultiple(1000, 0, "asc", "id", organizationId)
+      .subscribe(res => {
+        this.deviceModels = res.data.sort((a, b) => a.body.name.localeCompare(b.body.name, "en", { numeric: true }));
+      });
+
+    this.subscriptions.push(deviceModelSubscription);
+  }
+
+  public addRow() {
+    this.iotDeviceUpdate.dataTargetToPayloadDecoderIds.push({
+      dataTargetId: null,
+      payloadDecoderId: null,
+    });
+  }
+
+  public deleteRow(index) {
+    this.iotDeviceUpdate.dataTargetToPayloadDecoderIds.splice(index, 1);
+  }
+
+  onOrganizationChange() {
+    this.filteredApplications.next(
+      this.applications.filter(app => app.belongsTo.id === this.iotDeviceUpdate.organizationId)
+    );
+    this.iotDeviceUpdate.applicationId = 0;
+    this.iotDeviceUpdate.deviceModelId = 0;
+    this.iotDeviceUpdate.dataTargetToPayloadDecoderIds = [];
+    this.dataTargets = [];
+    this.getDeviceModels(this.iotDeviceUpdate.organizationId);
+  }
+
+  onApplicationChange() {
+    this.getDataTargets(this.iotDeviceUpdate.applicationId);
+    this.iotDeviceUpdate.dataTargetToPayloadDecoderIds = [];
+  }
+
+  public compare(o1: any, o2: any): boolean {
+    return o1 === o2;
+  }
+
+  onSubmit() {
+    if (
+      !this.iotDeviceUpdate.applicationId ||
+      !this.iotDeviceUpdate.organizationId ||
+      this.iotDeviceUpdate.deviceModelId == null ||
+      this.iotDeviceUpdate.dataTargetToPayloadDecoderIds.some(val => !val.dataTargetId)
+    )
+      return;
+
+    const iotDevicesSubscription = this.iotDeviceService
+      .changeIoTDeviceApplication(this.iotDevice.id, this.iotDeviceUpdate)
+      .subscribe(savedIoTDevice => {
+        this.snackBar.open(
+          this.translate.instant("IOTDEVICE.CHANGE-APPLICATION.SNACKBAR-SAVED", {
+            deviceName: savedIoTDevice.name,
+            applicationName: savedIoTDevice.application.name,
+          }),
+          this.translate.instant("DIALOG.OK"),
+          {
+            duration: 10000,
+          }
+        );
+        this.dialog.close(true);
+        this.snackBar._openedSnackBarRef.afterDismissed().subscribe(() => location.reload());
+      });
+
+    this.subscriptions.push(iotDevicesSubscription);
+  }
+}