moved device ids and increased dialog width for edit device; fix #SNR…

…GY-3219, #SNRGY-3246
SENERGY-Platform · Apr 12, 2024 · da7c04c · da7c04c
1 parent 06b2148
commit da7c04c
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 36 deletions.
diff --git a/src/app/modules/devices/device-instances/device-instances.component.ts b/src/app/modules/devices/device-instances/device-instances.component.ts
@@ -306,7 +306,7 @@ export class DeviceInstancesComponent implements OnInit, AfterViewInit {
     }
 
     showInfoOfDevice(device: DeviceInstancesModel): void {
-        this.deviceInstancesDialogService.openDeviceServiceDialog(device.device_type.id, device.id);
+        this.deviceInstancesDialogService.openDeviceServiceDialog(device);
     }
 
     editDevice(device: DeviceInstancesModel): void {

diff --git a/src/app/modules/devices/device-instances/dialogs/device-instances-edit-dialog.component.html b/src/app/modules/devices/device-instances/dialogs/device-instances-edit-dialog.component.html
@@ -18,29 +18,6 @@ <h2 mat-dialog-title>Edit Device</h2>
 
 <mat-dialog-content>
     <form class="form">
-        <div *ngIf="false">
-            <mat-form-field class="full-width" color="accent">
-                <mat-label>ID</mat-label>
-                <input matInput placeholder="ID" disabled value="{{device.id}}">
-            </mat-form-field>
-            <mat-form-field class="full-width" color="accent">
-                <mat-label>Short ID</mat-label>
-                <input matInput placeholder="ShortID" disabled value="{{getShortId(device.id)}}">
-            </mat-form-field>
-            <mat-form-field class="full-width" color="accent">
-                <mat-label>Devicetype ID</mat-label>
-                <input matInput placeholder="Devicetype ID" disabled value="{{device.device_type.id}}">
-            </mat-form-field>
-            <mat-form-field class="full-width" color="accent">
-                <mat-label>Devicetype Name</mat-label>
-                <input matInput placeholder="Devicetype Name" disabled value="{{device.device_type.name}}">
-            </mat-form-field>
-            <mat-form-field class="full-width" color="accent">
-                <mat-label>Origin Name</mat-label>
-                <input matInput placeholder="Origin Name" [(ngModel)]="device.name" disabled [ngModelOptions]="{standalone: true}">
-            </mat-form-field>
-        </div>
-
         <div *ngIf="userHasUpdateDisplayNameAuthorization">
             <mat-form-field class="full-width" color="accent">
                 <mat-label>Display Name</mat-label>

diff --git a/src/app/modules/devices/device-instances/dialogs/device-instances-edit-dialog.component.ts b/src/app/modules/devices/device-instances/dialogs/device-instances-edit-dialog.component.ts
@@ -39,7 +39,6 @@ export class DeviceInstancesEditDialogComponent implements OnInit {
 
     constructor(
         private dialogRef: MatDialogRef<DeviceInstancesEditDialogComponent>,
-        private deviceInstancesService: DeviceInstancesService,
         private deviceTypeService: DeviceTypeService,
 
         @Inject(MAT_DIALOG_DATA) private data: {
@@ -77,10 +76,6 @@ export class DeviceInstancesEditDialogComponent implements OnInit {
 
     ngOnInit() {}
 
-    getShortId(id: string): string {
-        return this.deviceInstancesService.convertToShortId(id);
-    }
-
     close(): void {
         this.dialogRef.close();
     }

diff --git a/...pp/modules/devices/device-instances/dialogs/device-instances-service-dialog.component.css b/...pp/modules/devices/device-instances/dialogs/device-instances-service-dialog.component.css
@@ -25,3 +25,12 @@
 ::ng-deep .example-custom-date-class {
     background:rgba(0,0,0,.38)!important;
 }
+
+#id-container {
+    display: flex;
+    justify-content: space-between;
+}
+
+#id-container mat-form-field {
+    width: 18%;
+}
diff --git a/...p/modules/devices/device-instances/dialogs/device-instances-service-dialog.component.html b/...p/modules/devices/device-instances/dialogs/device-instances-service-dialog.component.html
@@ -22,6 +22,29 @@
 </div>
 
 <mat-dialog-content>
+    <div id="id-container">
+        <mat-form-field class="full-width" color="accent">
+            <mat-label>ID</mat-label>
+            <input matInput placeholder="ID" disabled value="{{device.id}}">
+        </mat-form-field>
+        <mat-form-field class="full-width" color="accent">
+            <mat-label>Short ID</mat-label>
+            <input matInput placeholder="ShortID" disabled value="{{getShortId(device.id)}}">
+        </mat-form-field>
+        <mat-form-field class="full-width" color="accent">
+            <mat-label>Devicetype ID</mat-label>
+            <input matInput placeholder="Devicetype ID" disabled value="{{device.device_type.id}}">
+        </mat-form-field>
+        <mat-form-field class="full-width" color="accent">
+            <mat-label>Devicetype Name</mat-label>
+            <input matInput placeholder="Devicetype Name" disabled value="{{device.device_type.name}}">
+        </mat-form-field>
+        <mat-form-field class="full-width" color="accent">
+            <mat-label>Origin Name</mat-label>
+            <input matInput placeholder="Origin Name" [(ngModel)]="device.name" disabled [ngModelOptions]="{standalone: true}">
+        </mat-form-field>
+    </div>
+
     <mat-accordion>
         <mat-expansion-panel *ngFor="let service of services; let i = index" [expanded]="services.length === 1">
             <mat-expansion-panel-header>

diff --git a/...app/modules/devices/device-instances/dialogs/device-instances-service-dialog.component.ts b/...app/modules/devices/device-instances/dialogs/device-instances-service-dialog.component.ts
@@ -30,6 +30,8 @@ import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
 import {environment} from '../../../../../environments/environment';
 import {AuthorizationService} from '../../../../core/services/authorization.service';
 import {ErrorHandlerService} from '../../../../core/services/error-handler.service';
+import { DeviceInstancesModel } from '../shared/device-instances.model';
+import { DeviceInstancesService } from '../shared/device-instances.service';
 
 @Component({
     templateUrl: './device-instances-service-dialog.component.html',
@@ -49,7 +51,7 @@ export class DeviceInstancesServiceDialogComponent implements OnInit {
         from: [{value: new Date(new Date().setHours(new Date().getTimezoneOffset() / -60, 0, 0, 0)), disabled: true}],
         to: [{value: new Date(new Date().setHours(new Date().getTimezoneOffset() / -60, 0, 0, 0)), disabled: true}],
     });
-    deviceId = '';
+    device: DeviceInstancesModel;
     descriptions: string[][];
     availability: { serviceId: string; from?: Date; to?: Date; groupType?: string; groupTime?: string }[] = [];
     availabilityControl = new FormControl<{
@@ -60,7 +62,7 @@ export class DeviceInstancesServiceDialogComponent implements OnInit {
     constructor(
         private dialogRef: MatDialogRef<DeviceInstancesServiceDialogComponent>,
         @Inject(MAT_DIALOG_DATA) data: {
-            deviceId: string;
+            device: DeviceInstancesModel;
             services: DeviceTypeServiceModel[];
             lastValueElements: LastValuesRequestElementTimescaleModel[];
             deviceType: DeviceTypeModel;
@@ -71,12 +73,13 @@ export class DeviceInstancesServiceDialogComponent implements OnInit {
         private fb: FormBuilder,
         private errorHandlerService: ErrorHandlerService,
         private authorizationService: AuthorizationService,
+        private deviceInstancesService: DeviceInstancesService
     ) {
         this.services = data.services;
         this.lastValueElements = data.lastValueElements;
         this.deviceType = data.deviceType;
         this.serviceOutputCounts = data.serviceOutputCounts;
-        this.deviceId = data.deviceId;
+        this.device = data.device;
         this.descriptions = data.descriptions;
     }
 
@@ -105,7 +108,7 @@ export class DeviceInstancesServiceDialogComponent implements OnInit {
                 counter += this.serviceOutputCounts[serviceIndex];
             });
         });
-        this.exportDataService.getTimescaleDataAvailability(this.deviceId).subscribe(availability => {
+        this.exportDataService.getTimescaleDataAvailability(this.device.id).subscribe(availability => {
             this.availability = availability;
         });
     }
@@ -123,7 +126,7 @@ export class DeviceInstancesServiceDialogComponent implements OnInit {
         const token = await this.authorizationService.getToken();
         const f = await fetch(environment.timescaleAPIURL + '/prepare-download?query=' + JSON.stringify({
             serviceId: this.services[i].id,
-            deviceId: this.deviceId,
+            deviceId: this.device.id,
             columns,
             time: {
                 start: fromIso,
@@ -204,4 +207,8 @@ export class DeviceInstancesServiceDialogComponent implements OnInit {
     }): boolean {
         return a.groupTime === b.groupTime && a.groupType === b.groupType;
     }
+
+    getShortId(id: string): string {
+        return this.deviceInstancesService.convertToShortId(id);
+    }
 }
diff --git a/src/app/modules/devices/device-instances/shared/device-instances-dialog.service.ts b/src/app/modules/devices/device-instances/shared/device-instances-dialog.service.ts
@@ -60,8 +60,10 @@ export class DeviceInstancesDialogService {
         return editDialogRef.afterClosed();
     }
 
-    openDeviceServiceDialog(deviceTypeId: string, deviceId: string): void {
+    openDeviceServiceDialog(device: DeviceInstancesModel): void {
         const obs: Observable<any>[] = [];
+        const deviceTypeId = device.device_type.id;
+        const deviceId = device.id;
         obs.push(this.deviceTypeService.getMeasuringFunctions());
         obs.push(this.deviceTypeService.getAspectNodesWithMeasuringFunction());
         obs.push(this.deviceTypeService.getLeafCharacteristics());
@@ -117,7 +119,7 @@ export class DeviceInstancesDialogService {
             dialogConfig.minWidth = '650px';
             if (deviceType) {
                 dialogConfig.data = {
-                    deviceId,
+                    device,
                     services: deviceType.services,
                     lastValueElements,
                     deviceType,
@@ -135,6 +137,7 @@ export class DeviceInstancesDialogService {
             display_name: string;
         }
         const dialogConfig = new MatDialogConfig();
+        dialogConfig.width = "50vh";
         dialogConfig.disableClose = false;
         dialogConfig.data = {
             device: JSON.parse(JSON.stringify(device)), // create copy of object