Updated client view
parent
5962c2e051
commit
ddcf5fcc8c
|
|
@ -218,17 +218,75 @@ mat-card {
|
||||||
.classroom-grid {
|
.classroom-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 16px; /* Espacio entre elementos */
|
gap: 16px;
|
||||||
justify-content: flex-start; /* Alinea los elementos a la izquierda */
|
justify-content: flex-start; /* Opcional: para alinear a la izquierda */
|
||||||
}
|
}
|
||||||
|
|
||||||
.classroom-item {
|
.classroom-item {
|
||||||
flex: 0 1 calc(16.66% - 16px); /* 6 columnas (para pantallas grandes) */
|
flex: 0 1 calc(16.66% - 16px); /* 6 columnas */
|
||||||
box-sizing: border-box; /* Incluye padding y borde en el cálculo del ancho */
|
max-width: calc(16.66% - 16px);
|
||||||
|
text-align: center;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.classroom-card {
|
.classroom-pc {
|
||||||
width: 100%; /* Asegura que el card ocupe todo el espacio del item */
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-image {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-details {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-name {
|
||||||
|
font-weight: bold;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-ip,
|
||||||
|
.client-mac {
|
||||||
|
color: #666;
|
||||||
|
font-size: 10px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-actions {
|
||||||
|
margin-top: 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-og-live {
|
||||||
|
border: 2px solid #4caf50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-busy {
|
||||||
|
border: 2px solid #ff9800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-off {
|
||||||
|
border: 2px solid #f44336;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-linux {
|
||||||
|
border: 2px solid #9c27b0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pc-windows {
|
||||||
|
border: 2px solid #2196f3;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pantallas medianas: 4 columnas */
|
/* Pantallas medianas: 4 columnas */
|
||||||
|
|
@ -261,33 +319,3 @@ mat-card {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-og-live {
|
|
||||||
background-color: #4caf50;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-busy {
|
|
||||||
background-color: #f44336;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-windows {
|
|
||||||
background-color: #2196f3;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-linux {
|
|
||||||
background-color: #9c27b0;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-macos {
|
|
||||||
background-color: #ff9800;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-off {
|
|
||||||
background-color: #9e9e9e;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -111,32 +111,32 @@
|
||||||
<!-- Mostrar cuadrícula si es un aula -->
|
<!-- Mostrar cuadrícula si es un aula -->
|
||||||
<div *ngIf="selectedDetail?.type === 'classroom'" class="classroom-grid">
|
<div *ngIf="selectedDetail?.type === 'classroom'" class="classroom-grid">
|
||||||
<div *ngFor="let pc of selectedDetail.clients" class="classroom-item">
|
<div *ngFor="let pc of selectedDetail.clients" class="classroom-item">
|
||||||
<mat-card class="classroom-card" [ngClass]="{
|
<div class="classroom-pc" [ngClass]="{
|
||||||
'card-og-live': pc.status === 'og-live',
|
'pc-og-live': pc.status === 'og-live',
|
||||||
'card-busy': pc.status === 'busy',
|
'pc-busy': pc.status === 'busy',
|
||||||
'card-windows': pc.status === 'windows' || pc.status === 'windows-session',
|
'pc-windows': pc.status === 'windows' || pc.status === 'windows-session',
|
||||||
'card-linux': pc.status === 'linux' || pc.status === 'linux-session',
|
'pc-linux': pc.status === 'linux' || pc.status === 'linux-session',
|
||||||
'card-macos': pc.status === 'macos',
|
'pc-macos': pc.status === 'macos',
|
||||||
'card-off': pc.status === 'off'
|
'pc-off': pc.status === 'off'
|
||||||
}">
|
}">
|
||||||
<mat-card-header>
|
<img mat-card-image src="assets/images/client.png" alt="PC Icon" class="pc-image">
|
||||||
<mat-card-title class="client-name">{{ pc.name }}</mat-card-title>
|
<div class="pc-details">
|
||||||
</mat-card-header>
|
<span class="client-name">{{ pc.name }}</span>
|
||||||
<mat-card-content>
|
<span class="client-ip">{{ pc.ip }}</span>
|
||||||
<p class="client-text">{{ pc.ip }}</p>
|
<span class="client-mac">{{ pc.mac }}</span>
|
||||||
<p class="client-text">{{ pc.mac }}</p>
|
</div>
|
||||||
</mat-card-content>
|
<div class="pc-actions">
|
||||||
<mat-card-actions align="end">
|
|
||||||
<button mat-icon-button color="primary" (click)="onEditClick($event, 'client', pc.uuid)">
|
<button mat-icon-button color="primary" (click)="onEditClick($event, 'client', pc.uuid)">
|
||||||
<mat-icon>edit</mat-icon>
|
<mat-icon>edit</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
<button mat-icon-button color="warn" (click)="onDeleteClick($event, pc.uuid, pc.name, 'client')">
|
<button mat-icon-button color="warn" (click)="onDeleteClick($event, pc.uuid, pc.name, 'client')">
|
||||||
<mat-icon>delete</mat-icon>
|
<mat-icon>delete</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</mat-card-actions>
|
|
||||||
</mat-card>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue