From 81cef1fd97a2c6472ea0b884ee0cca38ae63ec32 Mon Sep 17 00:00:00 2001 From: apuente Date: Thu, 18 Jul 2024 15:54:13 +0200 Subject: [PATCH] New clients room position save data --- .../classroom-view.component.html | 5 +- .../classroom-view.component.ts | 116 ++++++------------ 2 files changed, 38 insertions(+), 83 deletions(-) diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html index 7edb861..833d99f 100644 --- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html +++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html @@ -1,3 +1,4 @@ +
Clientes dentro de: {{ group.organizationalUnitName }} @@ -7,8 +8,8 @@
-
+ cdkDrag [cdkDragFreeDragPosition]="client.dragPosition" (cdkDragMoved)="onDragMoved($event, client)" cdkDragBoundary=".classroom"> +
Client diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts index e70d9f3..3af2bf7 100644 --- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts +++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts @@ -1,7 +1,8 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, Input, OnInit, OnChanges } from '@angular/core'; import { MatDialog } from '@angular/material/dialog'; import { ClientViewComponent } from "../client-view/client-view.component"; -import { CdkDragEnd, CdkDragMove } from '@angular/cdk/drag-drop'; +import { CdkDragMove } from '@angular/cdk/drag-drop'; +import { HttpClient } from '@angular/common/http'; interface GroupedClients { organizationalUnitName: string; @@ -13,12 +14,12 @@ interface GroupedClients { templateUrl: './classroom-view.component.html', styleUrls: ['./classroom-view.component.css'] }) -export class ClassroomViewComponent implements OnInit { +export class ClassroomViewComponent implements OnInit, OnChanges { @Input() clients: any[] = []; @Input() pcInTable: number = 5; groupedClients: GroupedClients[] = []; - constructor(public dialog: MatDialog) {} + constructor(public dialog: MatDialog, private http: HttpClient) {} ngOnInit(): void { this.groupClientsByOrganizationalUnit(); @@ -40,88 +41,18 @@ export class ClassroomViewComponent implements OnInit { return acc; }, {}); - /* this.groupedClients = Object.keys(grouped).map(ouName => ({ + this.groupedClients = Object.keys(grouped).map(ouName => ({ organizationalUnitName: ouName, clientRows: this.chunkArray(grouped[ouName], this.pcInTable) - })); */ - - this.groupedClients = [{ - "organizationalUnitName": "Aula01", - "clientRows": [ - [ - { - "@id": "/clients/0190b603-3e40-7256-90dd-ea04b4ea0e41", - "@type": "Client", - "name": "PC1", - "position": `{"x": -165, "y": -93}`, - "type": "client", - "ip": "127.0.0.1", - "mac": "00:00:00:00:1", - "serialNumber": "1", - "netiface": "eth0", - "netDriver": "generic", - "organizationalUnit": { - "@id": "/organizational-units/0190b602-35f2-7026-a42a-cc310ed07921", - "@type": "OrganizationalUnit", - "name": "Aula01", - "type": "classroom", - "networkSettings": { - "@id": "/network-settings/0190b602-35f2-7026-a42a-cc310f5c8648", - "@type": "NetworkSettings", - "validation": false, - "uuid": "0190b602-35f2-7026-a42a-cc310f5c8648", - "id": 2 - }, - "uuid": "0190b602-35f2-7026-a42a-cc310ed07921", - "id": 2 - }, - "partitions": [], - "createdAt": "2024-07-15T10:49:44+00:00", - "createdBy": "ogadmin", - "uuid": "0190b603-3e40-7256-90dd-ea04b4ea0e41", - "id": 1 - }, - { - "@id": "/clients/0190b603-e73e-7033-bba1-309d4672f581", - "@type": "Client", - "name": "PC2", - "position": `{"x": -65, "y": 55}`, - "type": "client", - "ip": "123.0.0.2", - "mac": "00:00:00:00:2", - "serialNumber": "2", - "netiface": "eth0", - "organizationalUnit": { - "@id": "/organizational-units/0190b602-35f2-7026-a42a-cc310ed07921", - "@type": "OrganizationalUnit", - "name": "Aula01", - "type": "classroom", - "networkSettings": { - "@id": "/network-settings/0190b602-35f2-7026-a42a-cc310f5c8648", - "@type": "NetworkSettings", - "validation": false, - "uuid": "0190b602-35f2-7026-a42a-cc310f5c8648", - "id": 2 - }, - "uuid": "0190b602-35f2-7026-a42a-cc310ed07921", - "id": 2 - }, - "partitions": [], - "createdAt": "2024-07-15T10:50:27+00:00", - "createdBy": "ogadmin", - "uuid": "0190b603-e73e-7033-bba1-309d4672f581", - "id": 2 - }, - ] - ] - }] + })); + console.log(this.groupedClients); } initializeClientPositions(): void { this.groupedClients.forEach(group => { group.clientRows.forEach(row => { row.forEach(client => { - const position = JSON.parse(client.position); + const position = client.position; // Ya es un objeto, no necesita JSON.parse client.dragPosition = { x: position.x, y: position.y }; }); }); @@ -140,9 +71,32 @@ export class ClassroomViewComponent implements OnInit { const dialogRef = this.dialog.open(ClientViewComponent, { data: { client }, width: '800px', height:'700px' }); } - onDragMoved(event: CdkDragMove): void { - console.log('Elemento movido:', event.source.element.nativeElement); + onDragMoved(event: CdkDragMove, client: any): void { + const dragPosition = event.source.getFreeDragPosition() + client.position.x = dragPosition.x; + client.position.y = dragPosition.y; + console.log("el drag", event.source.getFreeDragPosition().x) + /* console.log('Elemento movido:', event.source.element.nativeElement); console.log('Posición actual:', event.pointerPosition); - console.log('Posición relativa:', event.distance); + console.log('Posición relativa:', dragPosition); */ + } + + saveDisposition(): void { + this.groupedClients.forEach(group => { + group.clientRows.forEach(row => { + row.forEach(client => { + const url = `http://127.0.0.1:8080/clients/${client.uuid}`; + const payload = { + name: client.name, + position: client.position + }; + this.http.patch(url, payload).subscribe(response => { + console.log('Cliente actualizado:', response); + }, error => { + console.error('Error al actualizar cliente:', error); + }); + }); + }); + }); } }