opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New clients room position save data

pull/5/head
Alvaro Puente Mella 2024-07-18 15:54:13 +02:00
parent 8769793464
commit 81cef1fd97
2 changed files with 38 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html
View File

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

116
ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts
View File

@ -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);
});
});
});
});
}
}