From 800b73db61e6c7be8f90710a4958afc69af7c926 Mon Sep 17 00:00:00 2001 From: apuente Date: Tue, 15 Oct 2024 14:33:38 +0200 Subject: [PATCH] refs #917 New client view component and partition assistant component --- .../client-main-view.component.css | 44 +++++++++-- .../client-main-view.component.html | 53 ++++++++----- .../client-main-view.component.ts | 75 +++++++++++++++---- .../partition-assistant.component.css | 3 +- .../partition-assistant.component.html | 7 +- .../partition-assistant.component.ts | 2 +- .../client-tab-view.component.ts | 10 ++- .../client-view/client-view.component.ts | 2 +- 8 files changed, 146 insertions(+), 50 deletions(-) diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css index 20d5e0a..b523616 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css @@ -1,6 +1,6 @@ - /* Header - Title and Icon */ + .client-header { display: flex; align-items: center; @@ -12,12 +12,12 @@ } .client-icon { - flex-shrink: 0; /* Prevent shrinking of the icon */ + flex-shrink: 0; margin-right: 20px; display: flex; align-items: center; justify-content: center; - min-width: 120px; /* Ensure the icon has enough space */ + min-width: 120px; min-height: 120px; } @@ -37,11 +37,45 @@ color: #666; } - /* Information Section */ .client-info { + margin: 20px 0; + } + + .info-section { + margin-bottom: 30px; + } + + .two-column-table { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; + margin-top: 15px; + } + + .table-row { + display: flex; + justify-content: space-between; + padding: 10px; + border-bottom: 1px solid #e0e0e0; + } + + .column.property { + font-weight: bold; + text-align: left; + width: 45%; + } + + .column.value { + text-align: right; + width: 45%; + } + + .mat-tab-group { + min-height: 400px; + } + + .mat-tab-body-wrapper { + min-height: inherit; } .info-section { @@ -49,6 +83,7 @@ padding: 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + height: auto; } .info-section h2 { @@ -62,7 +97,6 @@ margin: 5px 0; } - /* Disk Usage Section */ .disk-usage { display: flex; align-items: center; diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html index 434135d..9ce7f65 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html @@ -1,22 +1,36 @@ -
-
- computer -
-
-

{{ clientData?.name }}

-

UUID: {{ clientData?.uuid }}

-

IP: {{ clientData?.ip }}

-
-
-
-

Información General

-

MAC: {{ clientData?.mac }}

-

Número de serie: {{ clientData?.serialNumber }}

-

Unidad Organizativa

-

{{ clientData?.organizationalUnit?.name }}

+ + + +
+
+
{{ clientData?.property }}
+
{{ clientData?.value }}
+
+
+ + + +
+
+
{{ clientData?.property }}
+
{{ clientData?.value }}
+
+
+ + + +
+
+
{{ clientData?.property }}
+
{{ clientData?.value }}
+
+
+ + +
@@ -40,12 +54,13 @@

Usado: 75% (375GB)

Total: 500GB

- - -
+
+
+
+
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts index db8bb0e..d9db89f 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts @@ -1,5 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; +interface ClientInfo { + property: string; + value: any; +} @Component({ selector: 'app-client-main-view', @@ -9,11 +13,17 @@ import { HttpClient } from '@angular/common/http'; export class ClientMainViewComponent implements OnInit { baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; clientUuid: string; - clientData: any; + clientData: any = {}; isPartitionAssistantVisible: boolean = false; isBootImageVisible: boolean = false; - isGeneralInfoVisible: boolean = true; - isDiskUsageVisible: boolean = true; + isGeneralInfoVisible: boolean = true; + isDiskUsageVisible: boolean = true; + + displayedColumns: string[] = ['property', 'value']; + + generalData: ClientInfo[] = []; + networkData: ClientInfo[] = []; + classroomData: ClientInfo[] = []; constructor(private http: HttpClient) { const url = window.location.href; @@ -22,27 +32,62 @@ export class ClientMainViewComponent implements OnInit { } ngOnInit() { - this.loadClientData(); + this.clientData = history.state.clientData + this.updateGeneralData(); + this.updateNetworkData(); + this.updateClassroomData(); } - loadClientData() { - this.http.get(`${this.baseUrl}/clients/${this.clientUuid}`).subscribe( - data => { - this.clientData = data; - }, - error => { - console.error('Error loading client data:', error); - } - ); + updateGeneralData() { + this.generalData = [ + { property: 'Nombre', value: this.clientData?.name || '' }, + { property: 'Uuid', value: this.clientData?.uuid || '' }, + { property: 'IP', value: this.clientData?.ip || '' }, + { property: 'MAC', value: this.clientData?.mac || '' }, + { property: 'Nº de serie', value: this.clientData?.serialNumber || '' }, + { property: 'Netiface', value: this.clientData?.netiface || '' }, + { property: 'Perfil hardware', value: this.clientData?.hardwareProfile?.description || '' }, + { property: 'Menú', value: this.clientData?.menu?.description || '' }, + { property: 'Fecha de creación', value: this.clientData?.createdAt || '' }, + { property: 'Creado por', value: this.clientData?.createdBy || '' } + ]; + } + updateNetworkData() { + this.networkData = [ + { property: 'Perfil hardware', value: this.clientData?.hardwareProfile?.description || '' }, + { property: 'Subred', value: this.clientData?.subnet || '' }, + { property: 'OGlive', value: '' }, + { property: 'Autoexec', value: '' }, + { property: 'Repositorio', value: '' }, + { property: 'Validación', value: this.clientData?.organizationalUnit?.networkSettings?.validation || '' }, + { property: 'Fecha de creación', value: this.clientData?.createdAt || '' }, + { property: 'Creado por', value: this.clientData?.createdBy || '' } + ]; + } + + updateClassroomData() { + this.classroomData = [ + { property: 'Url servidor proxy', value: this.clientData?.organizationalUnit?.networkSettings?.proxy || '' }, + { property: 'IP DNS', value: this.clientData?.organizationalUnit?.networkSettings?.dns || '' }, + { property: 'Máscara de red', value: this.clientData?.organizationalUnit?.networkSettings?.netmask || '' }, + { property: 'Router', value: this.clientData?.organizationalUnit?.networkSettings?.router || '' }, + { property: 'NTP', value: this.clientData?.organizationalUnit?.networkSettings?.ntp || '' }, + { property: 'Modo p2p', value: this.clientData?.organizationalUnit?.networkSettings?.p2pMode || '' }, + { property: 'Tiempo p2p', value: this.clientData?.organizationalUnit?.networkSettings?.p2pTime || '' }, + { property: 'IP multicast', value: this.clientData?.organizationalUnit?.networkSettings?.mcastIp || '' }, + { property: 'Modo multicast', value: this.clientData?.organizationalUnit?.networkSettings?.mcastMode || '' }, + { property: 'Puerto multicast', value: this.clientData?.organizationalUnit?.networkSettings?.mcastPort || '' }, + { property: 'Velocidad multicast', value: this.clientData?.organizationalUnit?.networkSettings?.mcastSpeed || '' }, + { property: 'Perfil hardware', value: this.clientData?.organizationalUnit?.networkSettings?.hardwareProfile?.description || '' } + ]; } togglePartitionAssistant() { this.isPartitionAssistantVisible = !this.isPartitionAssistantVisible; + } showBootImage() { this.isPartitionAssistantVisible = false; } - - } diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css index dc57c03..a7a02c7 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css @@ -13,8 +13,7 @@ display: flex; margin: 10px 0; height: 30px; - border: 1px solid #ccc; - background-color: #c5c5c5; + border: 1px solid #000000; } .partition-segment { diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html index c0e7d4f..47a2809 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html @@ -10,7 +10,6 @@ Tamaño: {{ totalDiskSize }} GB
-
- + - @@ -62,8 +60,7 @@
{{ errorMessage }}
-
- +
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts index bec7d80..ed7a11c 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts @@ -34,7 +34,7 @@ export class PartitionAssistantComponent { type: 'NTFS', sizeBytes: 0, format: false, - color: '#cccccc', + color: '#' + Math.floor(Math.random() * 16777215).toString(16), percentage: 0 }); } else { diff --git a/ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.ts b/ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.ts index 9ab9a30..823350f 100644 --- a/ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.ts @@ -12,6 +12,8 @@ import {DeleteModalComponent} from "../../../../shared/delete_modal/delete-modal import { throwError } from 'rxjs'; import { catchError } from 'rxjs/operators'; import {ClientViewComponent} from "../../shared/client-view/client-view.component"; +import { Router } from '@angular/router'; + @Component({ selector: 'app-client-tab-view', templateUrl: './client-tab-view.component.html', @@ -74,7 +76,8 @@ export class ClientTabViewComponent { private dataService: DataService, public dialog: MatDialog, private toastService: ToastrService, - private http: HttpClient + private http: HttpClient, + private router: Router ) {} ngOnInit(): void { @@ -131,7 +134,10 @@ export class ClientTabViewComponent { handleClientClick(event: MouseEvent, client: any): void { event.stopPropagation(); - const dialogRef = this.dialog.open(ClientViewComponent, { data: { client }, width: '800px', height:'700px' }); + /* const dialogRef = this.dialog.open(ClientViewComponent, { data: { client }, width: '800px', height:'700px' }); */ + + this.router.navigate(['client', client.uuid], { state: { clientData: client } }); + } resetFilters() { diff --git a/ogWebconsole/src/app/components/groups/shared/client-view/client-view.component.ts b/ogWebconsole/src/app/components/groups/shared/client-view/client-view.component.ts index b2fa4d0..4193b44 100644 --- a/ogWebconsole/src/app/components/groups/shared/client-view/client-view.component.ts +++ b/ogWebconsole/src/app/components/groups/shared/client-view/client-view.component.ts @@ -54,7 +54,7 @@ export class ClientViewComponent { constructor( private dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode + @Inject(MAT_DIALOG_DATA) public data: any ) { }