New clients room position

ogWebconsole/src/app/app.module.ts

@@ -53,7 +53,7 @@ import { ClientViewComponent } from './components/groups/client-view/client-view
 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";
@@ -68,7 +68,8 @@ import {
 } from "@angular/material/tree";
 import { LegendComponent } from './components/groups/legend/legend.component';
 
-@NgModule({ declarations: [
+@NgModule({
+  declarations: [
     AppComponent,
     AuthLayoutComponent,
     MainLayoutComponent,
@@ -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(
       {
@@ -141,5 +143,6 @@ import { LegendComponent } from './components/groups/legend/legend.component';
     },
     provideAnimationsAsync(),
     provideHttpClient(withInterceptorsFromDi())
-    ], })
+  ],
+})
 export class AppModule { }

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 {

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">

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 { 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[][] {
@@ -54,4 +139,10 @@ export class ClassroomViewComponent implements OnInit {
   handleClientClick(client: any): void {
     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);
+  }
 }