Add board and minnor fix

ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css

@@ -12,6 +12,48 @@
 
 mat-card {
   width: 150px;
+  position: relative; 
+}
+
+.client-image-container {
+  position: relative; 
+}
+
+.client-image {
+  width: 100%;
+  height: auto;
+}
+
+.proyector-image {
+  width: auto;
+  height: 100px; /* Ajusta la altura según sea necesario */
+}
+
+.client-info {
+  position: absolute; 
+  top: 20px;
+  left: 5px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(0, 0, 0, 0); /* Fondo semitransparente para el texto */
+  color: black; /* Color del texto */
+  text-align: center;
+  padding: 10px;
+  box-sizing: border-box;
+}
+
+.client-name {
+  font-size: medium;
+  font-weight: bold;
+}
+
+.client-details {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: small;
 }
 
 mat-chip {
@@ -19,13 +61,6 @@ mat-chip {
   font-size: small;
 }
 
-
-mat-card-title {
-  display: flex;
-  justify-content: space-between;
-  margin: 10px;
-  font-size: medium;
-}
 .client-row {
   display: flex;
   justify-content: center;
@@ -76,3 +111,22 @@ mat-card-title {
 .form-field {
   width: 100%;
 }
+
+.classroom-board {
+  width: 250px;
+  height: 120px;
+  background-color: black;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  margin-right: 20px; /* Espacio entre la pizarra y el proyector */
+}
+
+.misc-clients {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 25px;
+}

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

@@ -1,19 +1,23 @@
 <div class="classroom">
   <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>
     <div *ngFor="let row of group.clientRows" class="client-row">
       <div class="client-container" *ngFor="let client of row">
         <div class="client-box" (click)="handleClientClick(client)">
           <mat-card appearance="outlined">
-            <mat-card-header>
-              <mat-card-title>{{ client.name }}</mat-card-title>
-            </mat-card-header>
-            <mat-card-content>
-              <mat-chip-set >
-                <mat-chip mat-basic-chip>{{ client.ip }}</mat-chip>
-                <mat-chip mat-basic-chip>{{ client.mac }}</mat-chip>
-              </mat-chip-set>
-            </mat-card-content>
+            <div class="client-image-container">
+              <img mat-card-image src="assets/images/client.png" alt="Client" class="client-image"/>
+              <div class="client-info">
+                <div class="client-name">{{ client.name }}</div>
+                <div class="client-details">
+                  <span>{{ client.ip }}</span>
+                </div>
+              </div>
+            </div>
           </mat-card>
         </div>
       </div>

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

@@ -1,11 +1,5 @@
-// src/app/classroom-view/classroom-view.component.ts
-
 import { Component, Input, OnInit } from '@angular/core';
-import {
-  ChangePasswordModalComponent
-} from "../../pages/admin/users/users/change-password-modal/change-password-modal.component";
 import {MatDialog} from "@angular/material/dialog";
-import {CreateClientComponent} from "../clients/create-client/create-client.component";
 import {ClientViewComponent} from "../client-view/client-view.component";
 
 interface GroupedClients {
@@ -43,7 +37,6 @@ export class ClassroomViewComponent implements OnInit {
       return acc;
     }, {});
 
-    console.log(grouped)
     this.groupedClients = Object.keys(grouped).map(ouName => ({
       organizationalUnitName: ouName,
       clientRows: this.chunkArray(grouped[ouName], this.pcInTable)

ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.css

@@ -53,3 +53,8 @@ mat-option .unit-path {
   align-items: center;
   justify-content: center;
 }
+
+.create-client-container {
+  position: relative;
+  height: 90vh;
+}

ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.html

@@ -1,3 +1,4 @@
+<div class="create-client-container">
 <h1 mat-dialog-title>Añadir Cliente</h1>
 <div class="mat-dialog-content" [ngClass]="{'loading': loading}">
   <mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
@@ -65,3 +66,4 @@
   <button mat-button (click)="onNoClick()">Cancelar</button>
   <button mat-button [disabled]="!clientForm.valid" (click)="onSubmit()">Añadir</button>
 </div>
+</div>