From 876979346423d91387695326abb7d0b66289a9aa Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Wed, 17 Jul 2024 16:15:51 +0200
Subject: [PATCH 1/5] New clients room position

---
 ogWebconsole/src/app/app.module.ts            | 119 +++++++++---------
 .../classroom-view.component.css              |  10 +-
 .../classroom-view.component.html             |   7 +-
 .../classroom-view.component.ts               | 101 ++++++++++++++-
 4 files changed, 167 insertions(+), 70 deletions(-)

diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index d60b118..a58f336 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -13,8 +13,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import { CustomInterceptor } from './services/custom.interceptor';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
-import {MatToolbarModule} from '@angular/material/toolbar';
-import {MatIconModule} from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -26,37 +26,37 @@ import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import { UsersComponent } from './components/pages/admin/users/users/users.component';
 import { RolesComponent } from './components/pages/admin/roles/roles/roles.component';
-import {MatTableModule} from '@angular/material/table';
-import {MatDialogModule} from '@angular/material/dialog';
+import { MatTableModule } from '@angular/material/table';
+import { MatDialogModule } from '@angular/material/dialog';
 import { DeleteUserModalComponent } from './components/pages/admin/users/users/delete-user-modal/delete-user-modal.component';
 import { AddUserModalComponent } from './components/pages/admin/users/users/add-user-modal/add-user-modal.component';
-import {MatSelectModule} from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
 import { EditUserModalComponent } from './components/pages/admin/users/users/edit-user-modal/edit-user-modal.component';
 import { AddRoleModalComponent } from './components/pages/admin/roles/roles/add-role-modal/add-role-modal.component';
 import { DeleteRoleModalComponent } from './components/pages/admin/roles/roles/delete-role-modal/delete-role-modal.component';
 import { ChangePasswordModalComponent } from './components/pages/admin/users/users/change-password-modal/change-password-modal.component';
 import { GroupsComponent } from './components/groups/groups.component';
-import {MatDividerModule} from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
 import { CreateOrganizationalUnitComponent } from './components/groups/organizational-units/create-organizational-unit/create-organizational-unit.component';
-import {MatStepperModule} from '@angular/material/stepper';
+import { MatStepperModule } from '@angular/material/stepper';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { CreateClientComponent } from './components/groups/clients/create-client/create-client.component';
 import { DeleteModalComponent } from './components/groups/delete-modal/delete-modal.component';
 import { EditOrganizationalUnitComponent } from './components/groups/organizational-units/edit-organizational-unit/edit-organizational-unit.component';
 import { EditClientComponent } from './components/groups/clients/edit-client/edit-client.component';
 import { ClassroomViewComponent } from './components/groups/classroom-view/classroom-view.component';
-import {MatProgressSpinner} from "@angular/material/progress-spinner";
-import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
-import {MatAutocomplete} from "@angular/material/autocomplete";
-import {MatChip, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule} from "@angular/material/chips";
+import { MatProgressSpinner } from "@angular/material/progress-spinner";
+import { MatMenu, MatMenuItem, MatMenuTrigger } from "@angular/material/menu";
+import { MatAutocomplete } from "@angular/material/autocomplete";
+import { MatChip, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule } from "@angular/material/chips";
 import { ClientViewComponent } from './components/groups/client-view/client-view.component';
-import {MatTab, MatTabGroup} from "@angular/material/tabs";
-import {MatTooltip} from "@angular/material/tooltip";
+import { MatTab, MatTabGroup } from "@angular/material/tabs";
+import { MatTooltip } from "@angular/material/tooltip";
 import { DeleteGroupsModalComponent } from './components/groups/delete-groups-modal/delete-groups-modal.component';
-
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ToastrModule } from 'ngx-toastr';
 import { ShowOrganizationalUnitComponent } from './components/groups/organizational-units/show-organizational-unit/show-organizational-unit.component';
-import {MatGridList} from "@angular/material/grid-list";
+import { MatGridList } from "@angular/material/grid-list";
 import { TreeViewComponent } from './components/groups/tree-view/tree-view.component';
 import {
   MatNestedTreeNode,
@@ -68,37 +68,38 @@ import {
 } from "@angular/material/tree";
 import { LegendComponent } from './components/groups/legend/legend.component';
 
-@NgModule({ declarations: [
-        AppComponent,
-        AuthLayoutComponent,
-        MainLayoutComponent,
-        HeaderComponent,
-        SidebarComponent,
-        LoginComponent,
-        AdminComponent,
-        MainLayoutComponent,
-        UsersComponent,
-        RolesComponent,
-        DeleteUserModalComponent,
-        AddUserModalComponent,
-        EditUserModalComponent,
-        AddRoleModalComponent,
-        DeleteRoleModalComponent,
-        ChangePasswordModalComponent,
-        GroupsComponent,
-        CreateOrganizationalUnitComponent,
-        CreateClientComponent,
-        DeleteModalComponent,
-        EditOrganizationalUnitComponent,
-        EditClientComponent,
-        ClassroomViewComponent,
-        ClientViewComponent,
-        DeleteGroupsModalComponent,
-        ShowOrganizationalUnitComponent,
-        TreeViewComponent,
-        LegendComponent
-    ],
-    bootstrap: [AppComponent],
+@NgModule({
+  declarations: [
+    AppComponent,
+    AuthLayoutComponent,
+    MainLayoutComponent,
+    HeaderComponent,
+    SidebarComponent,
+    LoginComponent,
+    AdminComponent,
+    MainLayoutComponent,
+    UsersComponent,
+    RolesComponent,
+    DeleteUserModalComponent,
+    AddUserModalComponent,
+    EditUserModalComponent,
+    AddRoleModalComponent,
+    DeleteRoleModalComponent,
+    ChangePasswordModalComponent,
+    GroupsComponent,
+    CreateOrganizationalUnitComponent,
+    CreateClientComponent,
+    DeleteModalComponent,
+    EditOrganizationalUnitComponent,
+    EditClientComponent,
+    ClassroomViewComponent,
+    ClientViewComponent,
+    DeleteGroupsModalComponent,
+    ShowOrganizationalUnitComponent,
+    TreeViewComponent,
+    LegendComponent
+  ],
+  bootstrap: [AppComponent],
   imports: [BrowserModule,
     AppRoutingModule,
     FormsModule,
@@ -118,6 +119,7 @@ import { LegendComponent } from './components/groups/legend/legend.component';
     MatSelectModule,
     MatDividerModule,
     MatStepperModule,
+    DragDropModule,
     MatSlideToggleModule, MatMenu, MatMenuTrigger, MatMenuItem, MatAutocomplete, MatChipListbox, MatChipOption, MatChipSet, MatChipsModule, MatChip, MatProgressSpinner, MatTabGroup, MatTab, MatTooltip,
     ToastrModule.forRoot(
       {
@@ -130,16 +132,17 @@ import { LegendComponent } from './components/groups/legend/legend.component';
       }
     ), MatGridList, MatTree, MatTreeNode, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeDef, MatTreeNodePadding, MatTreeNodeOutlet
   ],
-    schemas: [
-      CUSTOM_ELEMENTS_SCHEMA,
-    ],
-    providers: [
-        {
-            provide: HTTP_INTERCEPTORS,
-            useClass: CustomInterceptor,
-            multi: true
-        },
-        provideAnimationsAsync(),
-        provideHttpClient(withInterceptorsFromDi())
-    ], })
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA,
+  ],
+  providers: [
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: CustomInterceptor,
+      multi: true
+    },
+    provideAnimationsAsync(),
+    provideHttpClient(withInterceptorsFromDi())
+  ],
+})
 export class AppModule { }
diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
index a03bf1c..b2fddeb 100644
--- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
+++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
@@ -3,6 +3,8 @@
   flex-wrap: wrap;
   gap: 10px;
   min-height: 43vh;
+  height: 1000px;
+  border: 3px solid black;
 }
 
 .classroom-group {
@@ -26,7 +28,7 @@ mat-card {
 
 .proyector-image {
   width: auto;
-  height: 100px; /* Ajusta la altura según sea necesario */
+  height: 100px; 
 }
 
 .client-info {
@@ -37,8 +39,8 @@ mat-card {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: rgba(0, 0, 0, 0); /* Fondo semitransparente para el texto */
-  color: black; /* Color del texto */
+  background-color: rgba(0, 0, 0, 0); 
+  color: black; 
   text-align: center;
   padding: 10px;
   box-sizing: border-box;
@@ -121,7 +123,7 @@ mat-chip {
   align-items: center;
   justify-content: center;
   text-align: center;
-  margin-right: 20px; /* Espacio entre la pizarra y el proyector */
+  margin-right: 20px; 
 }
 
 .misc-clients {
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 617043b..7edb861 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
@@ -2,11 +2,12 @@
   <mat-card *ngFor="let group of groupedClients" class="classroom-group">
     <mat-card-title>Clientes dentro de: {{ group.organizationalUnitName }}</mat-card-title>
     <div class="misc-clients">
-      <div class="classroom-board">Pizarra digital</div>
-      <img mat-card-image src="assets/images/proyector.png" alt="Proyector" class="proyector-image"/>
+      <div class="classroom-board" cdkDrag cdkDragBoundary=".classroom">Pizarra digital</div>
+      <img mat-card-image src="assets/images/proyector.png" alt="Proyector" class="proyector-image" cdkDrag cdkDragBoundary=".classroom"/>
     </div>
     <div *ngFor="let row of group.clientRows" class="client-row">
-      <div class="client-container" *ngFor="let client of row">
+      <div class="client-container" *ngFor="let client of row" 
+           cdkDrag [cdkDragFreeDragPosition]="client.dragPosition" (cdkDragMoved)="onDragMoved($event)" cdkDragBoundary=".classroom">
         <div class="client-box" (click)="handleClientClick(client)">
           <mat-card appearance="outlined">
             <div class="client-image-container">
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 4689922..e70d9f3 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,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
-import {MatDialog} from "@angular/material/dialog";
-import {ClientViewComponent} from "../client-view/client-view.component";
+import { MatDialog } from '@angular/material/dialog';
+import { ClientViewComponent } from "../client-view/client-view.component";
+import { CdkDragEnd, CdkDragMove } from '@angular/cdk/drag-drop';
 
 interface GroupedClients {
   organizationalUnitName: string;
@@ -21,10 +22,12 @@ export class ClassroomViewComponent implements OnInit {
 
   ngOnInit(): void {
     this.groupClientsByOrganizationalUnit();
+    this.initializeClientPositions();
   }
 
   ngOnChanges(): void {
     this.groupClientsByOrganizationalUnit();
+    this.initializeClientPositions();
   }
 
   groupClientsByOrganizationalUnit(): void {
@@ -37,10 +40,92 @@ 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
+          },
+        ]
+      ]
+    }]
+  }
+
+  initializeClientPositions(): void {
+    this.groupedClients.forEach(group => {
+      group.clientRows.forEach(row => {
+        row.forEach(client => {
+          const position = JSON.parse(client.position);
+          client.dragPosition = { x: position.x, y: position.y };
+        });
+      });
+    });
   }
 
   chunkArray(arr: any[], chunkSize: number): any[][] {
@@ -52,6 +137,12 @@ export class ClassroomViewComponent implements OnInit {
   }
 
   handleClientClick(client: any): void {
-    const dialogRef = this.dialog.open(ClientViewComponent, { data: { client }, width: '800px', height:'700px'});
+    const dialogRef = this.dialog.open(ClientViewComponent, { data: { client }, width: '800px', height:'700px' });
+  }
+
+  onDragMoved(event: CdkDragMove<any>): void {
+    console.log('Elemento movido:', event.source.element.nativeElement);
+    console.log('Posición actual:', event.pointerPosition);
+    console.log('Posición relativa:', event.distance);
   }
 }

From 81cef1fd97a2c6472ea0b884ee0cca38ae63ec32 Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Thu, 18 Jul 2024 15:54:13 +0200
Subject: [PATCH 2/5] 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 @@
+<button mat-flat-button color="primary" (click)="saveDisposition()">Guardar disposición</button>
 <div class="classroom">
   <mat-card *ngFor="let group of groupedClients" class="classroom-group">
     <mat-card-title>Clientes dentro de: {{ group.organizationalUnitName }}</mat-card-title>
@@ -7,8 +8,8 @@
     </div>
     <div *ngFor="let row of group.clientRows" class="client-row">
       <div class="client-container" *ngFor="let client of row" 
-           cdkDrag [cdkDragFreeDragPosition]="client.dragPosition" (cdkDragMoved)="onDragMoved($event)" cdkDragBoundary=".classroom">
-        <div class="client-box" (click)="handleClientClick(client)">
+           cdkDrag [cdkDragFreeDragPosition]="client.dragPosition" (cdkDragMoved)="onDragMoved($event, client)" cdkDragBoundary=".classroom">
+        <div class="client-box" (dblclick)="handleClientClick(client)">
           <mat-card appearance="outlined">
             <div class="client-image-container">
               <img mat-card-image src="assets/images/client.png" alt="Client" class="client-image"/>
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<any>): void {
-    console.log('Elemento movido:', event.source.element.nativeElement);
+  onDragMoved(event: CdkDragMove<any>, 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);
+          });
+        });
+      });
+    });
   }
 }

From 6845936ac652674008cf480da5b66f7f081cadc0 Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Fri, 19 Jul 2024 13:59:03 +0200
Subject: [PATCH 3/5] Clasroom view in dialog component

---
 ogWebconsole/src/app/app.module.ts               |  4 +++-
 .../classroom-view/classroom-view.component.css  |  7 +++++--
 .../classroom-view/classroom-view.component.html |  2 +-
 .../classroom-view/classroom-view.component.ts   |  8 +++-----
 .../app/components/groups/groups.component.html  |  3 ++-
 .../app/components/groups/groups.component.ts    | 16 ++++++++++++++++
 6 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts
index a58f336..7d2e8fd 100644
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@@ -67,6 +67,7 @@ import {
   MatTreeNodeToggle
 } from "@angular/material/tree";
 import { LegendComponent } from './components/groups/legend/legend.component';
+import { ClassroomViewDialogComponent } from './components/groups/classroom-view/classroom-view-modal';
 
 @NgModule({
   declarations: [
@@ -97,7 +98,8 @@ import { LegendComponent } from './components/groups/legend/legend.component';
     DeleteGroupsModalComponent,
     ShowOrganizationalUnitComponent,
     TreeViewComponent,
-    LegendComponent
+    LegendComponent,
+    ClassroomViewDialogComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,
diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
index b2fddeb..d84a043 100644
--- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
+++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
@@ -2,8 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
-  min-height: 43vh;
-  height: 1000px;
+  height: 90%;
   border: 3px solid black;
 }
 
@@ -132,3 +131,7 @@ mat-chip {
   justify-content: center;
   margin-bottom: 25px;
 }
+
+button{
+  margin-bottom: 10px;
+}
\ No newline at end of file
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 833d99f..0cd7f3a 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,7 +1,7 @@
 <button mat-flat-button color="primary" (click)="saveDisposition()">Guardar disposición</button>
 <div class="classroom">
   <mat-card *ngFor="let group of groupedClients" class="classroom-group">
-    <mat-card-title>Clientes dentro de: {{ group.organizationalUnitName }}</mat-card-title>
+    <mat-card-title>{{ group.organizationalUnitName }}</mat-card-title>
     <div class="misc-clients">
       <div class="classroom-board" cdkDrag cdkDragBoundary=".classroom">Pizarra digital</div>
       <img mat-card-image src="assets/images/proyector.png" alt="Proyector" class="proyector-image" cdkDrag cdkDragBoundary=".classroom"/>
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 3af2bf7..9c97921 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
@@ -20,6 +20,7 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
   groupedClients: GroupedClients[] = [];
 
   constructor(public dialog: MatDialog, private http: HttpClient) {}
+  
 
   ngOnInit(): void {
     this.groupClientsByOrganizationalUnit();
@@ -52,12 +53,13 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
     this.groupedClients.forEach(group => {
       group.clientRows.forEach(row => {
         row.forEach(client => {
-          const position = client.position; // Ya es un objeto, no necesita JSON.parse
+          const position = client.position || { x: 0, y: 0 };
           client.dragPosition = { x: position.x, y: position.y };
         });
       });
     });
   }
+  
 
   chunkArray(arr: any[], chunkSize: number): any[][] {
     const chunks = [];
@@ -75,10 +77,6 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
     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:', dragPosition); */
   }
 
   saveDisposition(): void {
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 541d2cc..5e5f2b7 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -3,6 +3,7 @@
   <div class="groups-button-row">
     <button mat-flat-button color="primary" (click)="addOU($event)">Nueva Unidad Organizativa</button>
     <button mat-flat-button color="primary" (click)="addClient($event)">Nuevo Cliente</button>
+    <button mat-flat-button color="primary" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'">Plano de aula</button>
     <button mat-raised-button (click)="openBottomSheet()">Leyenda</button>
   </div>
 </div>
@@ -142,5 +143,5 @@
     </mat-card-content>
   </mat-card>
 
-  <app-classroom-view class="card classroom-view" [clients]="clientsData" [pcInTable]="5"></app-classroom-view>
+  <!-- <app-classroom-view class="card classroom-view" [clients]="clientsData" [pcInTable]="5"></app-classroom-view> -->
 </div>
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index e68d3d6..c68ba3d 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -13,6 +13,8 @@ import {ToastrService} from "ngx-toastr";
 import {TreeViewComponent} from "./tree-view/tree-view.component";
 import {MatBottomSheet} from "@angular/material/bottom-sheet";
 import {LegendComponent} from "./legend/legend.component";
+import { ClassroomViewComponent } from './classroom-view/classroom-view.component';
+import { ClassroomViewDialogComponent } from './classroom-view/classroom-view-modal';
 
 @Component({
   selector: 'app-groups',
@@ -251,4 +253,18 @@ constructor(
   openBottomSheet(): void {
     this._bottomSheet.open(LegendComponent);
   }
+
+  roomMap(): void {
+    if (this.selectedDetail && this.selectedDetail.type === 'classroom') {
+      const dialogRef = this.dialog.open(ClassroomViewDialogComponent, {
+        width: '90vw',
+        height: '90vh',
+        data: { clients: this.clientsData }
+      });
+
+      dialogRef.afterClosed().subscribe(result => {
+        console.log('The dialog was closed');
+      });
+    }
+  }
 }

From 0ad9f8d08cf2439647d2b92c26ba580c5200da16 Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Fri, 19 Jul 2024 13:59:13 +0200
Subject: [PATCH 4/5] Clasroom view in dialog component

---
 .../classroom-view/classroom-view-modal.ts    | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)
 create mode 100644 ogWebconsole/src/app/components/groups/classroom-view/classroom-view-modal.ts

diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view-modal.ts b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view-modal.ts
new file mode 100644
index 0000000..e699c20
--- /dev/null
+++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view-modal.ts
@@ -0,0 +1,22 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-classroom-view-dialog',
+  template: `
+    <h2 mat-dialog-title>Plano de Aula</h2>
+    <mat-dialog-content>
+      <app-classroom-view [clients]="data.clients"></app-classroom-view>
+    </mat-dialog-content>
+  `,
+  styles: [`
+    mat-dialog-content {
+      overflow: hidden;
+    }
+  `]
+})
+export class ClassroomViewDialogComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+  
+}

From c35a58d7f515e52c1a8d3fec2de1ddec162b83ba Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Mon, 22 Jul 2024 15:08:44 +0200
Subject: [PATCH 5/5] Clasroom map new location

---
 .../groups/classroom-view/classroom-view-modal.ts | 15 ++++++++++++++-
 .../classroom-view/classroom-view.component.css   |  4 ++--
 .../classroom-view/classroom-view.component.html  |  4 ++--
 .../classroom-view/classroom-view.component.ts    | 13 ++++++++++++-
 .../app/components/groups/groups.component.css    | 10 ++++++++++
 .../app/components/groups/groups.component.html   |  6 +++++-
 6 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view-modal.ts b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view-modal.ts
index e699c20..760c666 100644
--- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view-modal.ts
+++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view-modal.ts
@@ -4,7 +4,7 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 @Component({
   selector: 'app-classroom-view-dialog',
   template: `
-    <h2 mat-dialog-title>Plano de Aula</h2>
+  <h2 mat-dialog-title>Plano de {{ classroomName }}</h2>
     <mat-dialog-content>
       <app-classroom-view [clients]="data.clients"></app-classroom-view>
     </mat-dialog-content>
@@ -16,7 +16,20 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
   `]
 })
 export class ClassroomViewDialogComponent {
+  classroomName: string | undefined;
+
   constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
+    console.log('ClassroomViewDialogComponent');
+    console.log(data);
   }
+  ngOnInit() {
+    if (this.data.clients && this.data.clients.length > 0) {
+      this.classroomName = this.data.clients[0].organizationalUnit.name;
+    } else {
+      this.classroomName = 'N/A';
+    }
+  }
+
+  
   
 }
diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
index d84a043..de8a3a0 100644
--- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
+++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
@@ -132,6 +132,6 @@ mat-chip {
   margin-bottom: 25px;
 }
 
-button{
-  margin-bottom: 10px;
+.saveDisposition-btn{
+  margin-top: 10px;
 }
\ No newline at end of file
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 0cd7f3a..8f75087 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,7 +1,6 @@
-<button mat-flat-button color="primary" (click)="saveDisposition()">Guardar disposición</button>
+
 <div class="classroom">
   <mat-card *ngFor="let group of groupedClients" class="classroom-group">
-    <mat-card-title>{{ group.organizationalUnitName }}</mat-card-title>
     <div class="misc-clients">
       <div class="classroom-board" cdkDrag cdkDragBoundary=".classroom">Pizarra digital</div>
       <img mat-card-image src="assets/images/proyector.png" alt="Proyector" class="proyector-image" cdkDrag cdkDragBoundary=".classroom"/>
@@ -26,3 +25,4 @@
     </div>
   </mat-card>
 </div>
+<button mat-flat-button class="saveDisposition-btn" color="primary" (click)="saveDisposition()">Guardar disposición</button>
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 9c97921..0889dc2 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
@@ -3,6 +3,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ClientViewComponent } from "../client-view/client-view.component";
 import { CdkDragMove } from '@angular/cdk/drag-drop';
 import { HttpClient } from '@angular/common/http';
+import { ToastrService } from 'ngx-toastr';
 
 interface GroupedClients {
   organizationalUnitName: string;
@@ -15,11 +16,12 @@ interface GroupedClients {
   styleUrls: ['./classroom-view.component.css']
 })
 export class ClassroomViewComponent implements OnInit, OnChanges {
+  
   @Input() clients: any[] = [];
   @Input() pcInTable: number = 5;
   groupedClients: GroupedClients[] = [];
 
-  constructor(public dialog: MatDialog, private http: HttpClient) {}
+  constructor(public dialog: MatDialog, private http: HttpClient, private toastService: ToastrService) {}
   
 
   ngOnInit(): void {
@@ -90,11 +92,20 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
           };
           this.http.patch(url, payload).subscribe(response => {
             console.log('Cliente actualizado:', response);
+            this.openSnackBar(false, 'Plano actualizado!');
           }, error => {
             console.error('Error al actualizar cliente:', error);
+            this.openSnackBar(true, error);
           });
         });
       });
     });
   }
+
+  openSnackBar(isError: boolean, message: string) {
+    if (isError) {
+      this.toastService.error(' Error al actualizar cliente: ' + message, 'Error');
+    } else
+      this.toastService.success('Cliente actualizado!', 'Éxito');
+  }
 }
diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 3ceb1dd..a406e9b 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -121,3 +121,13 @@ mat-spinner {
   margin: 0 auto;
   align-self: center;
 }
+
+
+.container { /* Asegúrate de que esta clase sea la del contenedor del botón */
+  display: flex;
+  justify-content: flex-end;
+}
+
+.roomMap-btn {
+}
+
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 5e5f2b7..8226e41 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -3,9 +3,13 @@
   <div class="groups-button-row">
     <button mat-flat-button color="primary" (click)="addOU($event)">Nueva Unidad Organizativa</button>
     <button mat-flat-button color="primary" (click)="addClient($event)">Nuevo Cliente</button>
-    <button mat-flat-button color="primary" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'">Plano de aula</button>
     <button mat-raised-button (click)="openBottomSheet()">Leyenda</button>
+
+    
   </div>
+  <div class="container">
+    <button mat-flat-button class="roomMap-btn" color="accent" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'">Plano de aula</button>
+</div>
 </div>
 <div class="search-container">
   <mat-form-field appearance="fill">