refs #917 New client view component and partition assistant component

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;

ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html

@@ -1,22 +1,36 @@
-<div class="client-header">
-  <div class="client-icon">
-    <mat-icon class="icon-pc">computer</mat-icon>
-  </div>
-  <div class="client-title">
-    <h1>{{ clientData?.name }}</h1>
-    <p><strong>UUID:</strong> {{ clientData?.uuid }}</p>
-    <p><strong>IP:</strong> {{ clientData?.ip }}</p>
-  </div>
-</div>
-
 <div class="client-info">
   <!-- Información General -->
   <div class="info-section">
-    <h2 *ngIf="isGeneralInfoVisible">Información General</h2>
+    <mat-tab-group dynamicHeight>
-    <p *ngIf="isGeneralInfoVisible"><strong>MAC:</strong> {{ clientData?.mac }}</p>
+
-    <p *ngIf="isGeneralInfoVisible"><strong>Número de serie:</strong> {{ clientData?.serialNumber }}</p>
+      <mat-tab label="Datos generales">
-    <h2 *ngIf="isGeneralInfoVisible">Unidad Organizativa</h2>
+        <div class="two-column-table">
-    <p *ngIf="isGeneralInfoVisible">{{ clientData?.organizationalUnit?.name }}</p>
+          <div class="table-row" *ngFor="let clientData of generalData">
+            <div class="column property">{{ clientData?.property }}</div>
+            <div class="column value">{{ clientData?.value }}</div>
+          </div>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Propiedades de red">
+        <div class="two-column-table">
+          <div class="table-row" *ngFor="let clientData of networkData">
+            <div class="column property">{{ clientData?.property }}</div>
+            <div class="column value">{{ clientData?.value }}</div>
+          </div>
+        </div>
+      </mat-tab>
+
+      <mat-tab label="Propiedades del aula">
+        <div class="two-column-table">
+          <div class="table-row" *ngFor="let clientData of classroomData">
+            <div class="column property">{{ clientData?.property }}</div>
+            <div class="column value">{{ clientData?.value }}</div>
+          </div>
+        </div>
+      </mat-tab>
+
+    </mat-tab-group>
   </div>
 
   <!-- Uso del Espacio en Disco -->
@@ -40,12 +54,13 @@
       <p>Usado: 75% (375GB)</p>
       <p>Total: 500GB</p>
     </div>
-  </div>
-</div>
 
-<div class="buttons-row">
+    <div class="buttons-row">
   <button mat-flat-button color="primary" (click)="togglePartitionAssistant()">Asistente a particionado</button>
   <button mat-flat-button color="primary" (click)="showBootImage()">Restaurar imagen</button>
+</div>
+  </div>
+
 </div>
 
 <div class="assistants-container" *ngIf="isPartitionAssistantVisible">

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,12 +13,18 @@ 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;
 
+  displayedColumns: string[] = ['property', 'value'];
+
+  generalData: ClientInfo[] = [];
+  networkData: ClientInfo[] = [];
+  classroomData: ClientInfo[] = [];
+
   constructor(private http: HttpClient) {
     const url = window.location.href;
     const segments = url.split('/');
@@ -22,27 +32,62 @@ export class ClientMainViewComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.loadClientData();
+    this.clientData = history.state.clientData
+    this.updateGeneralData();
+    this.updateNetworkData();
+    this.updateClassroomData();
   }
 
-  loadClientData() {
+  updateGeneralData() {
-    this.http.get(`${this.baseUrl}/clients/${this.clientUuid}`).subscribe(
+    this.generalData = [
-      data => {
+      { property: 'Nombre', value: this.clientData?.name || '' },
-        this.clientData = data;
+      { property: 'Uuid', value: this.clientData?.uuid || '' },
-      },
+      { property: 'IP', value: this.clientData?.ip || '' },
-      error => {
+      { property: 'MAC', value: this.clientData?.mac || '' },
-        console.error('Error loading client data:', error);
+      { 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;
   }
-
-  
 }

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;
+  border: 1px solid #000000;
-  background-color: #c5c5c5;
 }
 
 .partition-segment {

ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html

@@ -10,7 +10,6 @@
     <span class="disk-size">Tamaño: {{ totalDiskSize }} GB</span>
   </div>
 
-  <!-- Barra visual de particiones -->
   <div class="partition-bar">
     <div
       *ngFor="let partition of partitions"
@@ -21,9 +20,8 @@
     </div>
   </div>
 
-  <button mat-button (click)="addPartition()">Añadir</button>
+  <button mat-button (click)="addPartition()">Añadir +</button>
 
-  <!-- Tabla de particiones (simplificada) -->
   <table class="partition-table">
     <thead>
       <tr>
@@ -62,8 +60,7 @@
   </table>
   <div *ngIf="errorMessage" class="error-message">{{ errorMessage }}</div>
 
-  <!-- Solo el botón de Guardar -->
   <div class="actions">
-    <button mat-button (click)="save()">Guardar</button>
+    <button mat-flat-button color="primary" (click)="save()">Guardar</button>
   </div>
 </div>

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 {

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() {

ogWebconsole/src/app/components/groups/shared/client-view/client-view.component.ts

@@ -54,7 +54,7 @@ export class ClientViewComponent {
 
   constructor(
     private dialogRef: MatDialogRef<ClientViewComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: any // Inject data for edit mode
+    @Inject(MAT_DIALOG_DATA) public data: any 
   ) {
   }