- 
+
Pizarra digital
-
+ Pizarra digital
+
-
-
@@ -142,5 +147,5 @@
-
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');
+ });
+ }
+ }
}
+
+
@@ -24,3 +25,4 @@
+
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..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
@@ -1,6 +1,9 @@
-import { Component, Input, OnInit } from '@angular/core';
-import {MatDialog} from "@angular/material/dialog";
-import {ClientViewComponent} from "../client-view/client-view.component";
+import { Component, Input, OnInit, OnChanges } from '@angular/core';
+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;
@@ -12,19 +15,23 @@ 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, private toastService: ToastrService) {}
+
ngOnInit(): void {
this.groupClientsByOrganizationalUnit();
+ this.initializeClientPositions();
}
ngOnChanges(): void {
this.groupClientsByOrganizationalUnit();
+ this.initializeClientPositions();
}
groupClientsByOrganizationalUnit(): void {
@@ -41,8 +48,21 @@ export class ClassroomViewComponent implements OnInit {
organizationalUnitName: ouName,
clientRows: this.chunkArray(grouped[ouName], this.pcInTable)
}));
+ console.log(this.groupedClients);
}
+ initializeClientPositions(): void {
+ this.groupedClients.forEach(group => {
+ group.clientRows.forEach(row => {
+ row.forEach(client => {
+ const position = client.position || { x: 0, y: 0 };
+ client.dragPosition = { x: position.x, y: position.y };
+ });
+ });
+ });
+ }
+
+
chunkArray(arr: any[], chunkSize: number): any[][] {
const chunks = [];
for (let i = 0; i < arr.length; i += chunkSize) {
@@ -52,6 +72,40 @@ 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, client: any): void {
+ const dragPosition = event.source.getFreeDragPosition()
+ client.position.x = dragPosition.x;
+ client.position.y = dragPosition.y;
+ }
+
+ 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);
+ 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 541d2cc..8226e41 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -4,7 +4,12 @@
+
+
+
@@ -24,3 +25,4 @@
+
+