refs #2709. Updated UX clients module in deploy image assistant
parent
b2ba664767
commit
8c41df80fe
|
|
@ -144,31 +144,102 @@ mat-form-field {
|
|||
.client-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
border: 2px solid #e9ecef;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
/* asegurar ancho consistente con bordes */
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.client-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
border-color: #667eea;
|
||||
border-color: #b3c2ff;
|
||||
}
|
||||
|
||||
/* Cliente seleccionado: vuelve el degradado del card */
|
||||
.selected-client {
|
||||
background: linear-gradient(135deg, #8fa1f0 0%, #9b7bc8 100%);
|
||||
color: white;
|
||||
border-color: #667eea;
|
||||
background: linear-gradient(135deg, rgba(143, 161, 240, 0.6) 0%, rgba(155, 123, 200, 0.6) 100%);
|
||||
color: #1f2937;
|
||||
border-color: #e9ecef;
|
||||
}
|
||||
|
||||
.selected-client .client-name,
|
||||
.selected-client .client-ip {
|
||||
color: white;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* Estilo del separador sobre fondo degradado */
|
||||
.selected-client mat-divider {
|
||||
margin: 12px 0;
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
/* Área del selector de modelo: siempre visible y clickeable */
|
||||
.model-selector {
|
||||
background: #ffffff;
|
||||
border: 2px solid #e9ecef;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.model-selector:hover {
|
||||
background: #f3f6ff;
|
||||
border-color: #b3c2ff;
|
||||
box-shadow: 0 1px 8px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
/* Asegurar buen contraste del texto del radio */
|
||||
::ng-deep .model-selector .mat-radio-label,
|
||||
::ng-deep .model-selector .mat-radio-label-content {
|
||||
color: #2c3e50 !important;
|
||||
}
|
||||
|
||||
/* Color del radio para destacarlo sobre el fondo blanco o degradado */
|
||||
::ng-deep .model-selector .mat-radio-outer-circle {
|
||||
border-color: #667eea !important;
|
||||
}
|
||||
|
||||
::ng-deep .model-selector .mat-radio-inner-circle {
|
||||
background-color: #667eea !important;
|
||||
}
|
||||
|
||||
/* Limpieza: eliminar iconos anteriores si quedaron */
|
||||
.selected-client::after { content: none; }
|
||||
.selected-client mat-radio-group.mat-radio-group-selected::after { content: none; }
|
||||
|
||||
/* Dejar el grupo de radio sin estilos especiales acoplados al estado del card */
|
||||
.selected-client mat-radio-group { background: transparent; border: 0; padding: 0; margin-top: 0; box-shadow: none; position: static; }
|
||||
|
||||
/* Estilos específicos para Angular Material usando ::ng-deep */
|
||||
::ng-deep .selected-client mat-radio-group .mat-radio-button {
|
||||
color: #2c3e50 !important;
|
||||
}
|
||||
|
||||
::ng-deep .selected-client mat-radio-group .mat-radio-label {
|
||||
color: #2c3e50 !important;
|
||||
}
|
||||
|
||||
::ng-deep .selected-client mat-radio-group .mat-radio-label-content {
|
||||
color: #2c3e50 !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
::ng-deep .selected-client mat-radio-group .mat-radio-outer-circle {
|
||||
border-color: #667eea !important;
|
||||
}
|
||||
|
||||
::ng-deep .selected-client mat-radio-group .mat-radio-inner-circle {
|
||||
background-color: #667eea !important;
|
||||
}
|
||||
|
||||
.client-image {
|
||||
|
|
@ -183,7 +254,7 @@ mat-form-field {
|
|||
|
||||
.client-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 2px;
|
||||
display: block;
|
||||
|
|
@ -588,4 +659,55 @@ table {
|
|||
border: 1px dashed #dee2e6;
|
||||
}
|
||||
|
||||
/* Unir visualmente card y selector: bordes y radios */
|
||||
.client-card {
|
||||
border-radius: 10px 10px 0 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Mantener en hover también sin borde inferior */
|
||||
.client-card:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.model-selector {
|
||||
border-radius: 0 0 10px 10px;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Cuando el card esté seleccionado, usar mismo borde en el selector para efecto de bloque único */
|
||||
.selected-client {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.selected-client + .model-selector {
|
||||
border-left: 2px solid #e9ecef;
|
||||
border-right: 2px solid #e9ecef;
|
||||
border-bottom: 2px solid #e9ecef;
|
||||
border-top: none;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
/* Leyenda explicativa de la sección */
|
||||
.section-hint {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
margin: 8px 0 12px 0;
|
||||
background: #f7faff;
|
||||
border: 1px solid #e2e8ff;
|
||||
border-radius: 8px;
|
||||
color: #334155;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.section-hint mat-icon {
|
||||
color: #667eea;
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,13 @@
|
|||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div class="section-hint" (click)="$event.stopPropagation()">
|
||||
<mat-icon>info</mat-icon>
|
||||
<span>
|
||||
Puedes marcar o desmarcar un cliente haciendo clic en el área del ordenador. Además, selecciona con "Modelo" el equipo que actuará como modelo.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="button-row">
|
||||
<button class="action-button" (click)="toggleSelectAll()">
|
||||
{{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
|
||||
|
|
@ -55,7 +62,7 @@
|
|||
<div class="clients-grid">
|
||||
<div *ngFor="let client of clientData" class="client-item">
|
||||
<div class="client-card"
|
||||
(click)="client.status === 'og-live' && toggleClientSelection(client)"
|
||||
(click)="toggleClientSelection(client)"
|
||||
[ngClass]="{'selected-client': client.selected}"
|
||||
[matTooltip]="getPartitionsTooltip(client)"
|
||||
matTooltipPosition="above"
|
||||
|
|
@ -71,12 +78,12 @@
|
|||
<span class="client-ip">{{ client.ip }}</span>
|
||||
<span class="client-ip">{{ client.mac }}</span>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
</div>
|
||||
|
||||
<mat-radio-group [(ngModel)]="selectedModelClient" (change)="loadPartitions(selectedModelClient)">
|
||||
<div class="model-selector" (click)="$event.stopPropagation()">
|
||||
<mat-radio-group [(ngModel)]="selectedModelClient" (change)="onModelSelected(selectedModelClient)">
|
||||
<mat-radio-button [value]="client"
|
||||
color="primary"
|
||||
[disabled]="!client.selected"
|
||||
(click)="$event.stopPropagation()">
|
||||
Modelo
|
||||
</mat-radio-button>
|
||||
|
|
|
|||
|
|
@ -178,6 +178,13 @@ export class DeployImageComponent implements OnInit{
|
|||
return this.selectedMethod === method;
|
||||
}
|
||||
|
||||
onModelSelected(client: any) {
|
||||
this.loadPartitions(client);
|
||||
setTimeout(() => {
|
||||
this.scrollToPartitionSection();
|
||||
}, 200);
|
||||
}
|
||||
|
||||
toggleClientSelection(client: any) {
|
||||
client.selected = !client.selected;
|
||||
this.updateSelectedClients();
|
||||
|
|
@ -185,7 +192,7 @@ export class DeployImageComponent implements OnInit{
|
|||
|
||||
updateSelectedClients() {
|
||||
this.selectedClients = this.clientData.filter(
|
||||
(client: { selected: boolean; state: string }) => client.selected && client.state === "og-live"
|
||||
(client: { selected: boolean; state: string }) => client.selected
|
||||
);
|
||||
|
||||
if (!this.selectedClients.includes(this.selectedModelClient)) {
|
||||
|
|
@ -205,34 +212,29 @@ export class DeployImageComponent implements OnInit{
|
|||
}
|
||||
|
||||
loadPartitions(client: any) {
|
||||
if (client.selected) {
|
||||
this.http.get(`${this.baseUrl}${client.uuid}`).subscribe(
|
||||
(fullClientData: any) => {
|
||||
this.filteredPartitions = fullClientData.partitions;
|
||||
this.selectedRepository = fullClientData.repository ?? null;
|
||||
this.http.get(`${this.baseUrl}${client.uuid}`).subscribe(
|
||||
(fullClientData: any) => {
|
||||
this.filteredPartitions = fullClientData.partitions;
|
||||
this.selectedRepository = fullClientData.repository ?? null;
|
||||
|
||||
if (fullClientData.partitions) {
|
||||
this.filteredPartitions = fullClientData.partitions.filter((partition: any) => {
|
||||
return partition.partitionNumber !== 0;
|
||||
});
|
||||
this.p2pMode = fullClientData.organizationalUnit?.networkSettings?.p2pMode;
|
||||
this.p2pTime = fullClientData.organizationalUnit?.networkSettings?.p2pTime;
|
||||
this.mcastSpeed = fullClientData.organizationalUnit?.networkSettings?.mcastSpeed;
|
||||
this.mcastMode = fullClientData.organizationalUnit?.networkSettings?.mcastMode;
|
||||
this.mcastPort = fullClientData.organizationalUnit?.networkSettings?.mcastPort;
|
||||
this.mcastIp = fullClientData.organizationalUnit?.networkSettings?.mcastIp;
|
||||
}
|
||||
|
||||
this.loadImages();
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error al cargar las particiones:', error);
|
||||
if (fullClientData.partitions) {
|
||||
this.filteredPartitions = fullClientData.partitions.filter((partition: any) => {
|
||||
return partition.partitionNumber !== 0;
|
||||
});
|
||||
this.p2pMode = fullClientData.organizationalUnit?.networkSettings?.p2pMode;
|
||||
this.p2pTime = fullClientData.organizationalUnit?.networkSettings?.p2pTime;
|
||||
this.mcastSpeed = fullClientData.organizationalUnit?.networkSettings?.mcastSpeed;
|
||||
this.mcastMode = fullClientData.organizationalUnit?.networkSettings?.mcastMode;
|
||||
this.mcastPort = fullClientData.organizationalUnit?.networkSettings?.mcastPort;
|
||||
this.mcastIp = fullClientData.organizationalUnit?.networkSettings?.mcastIp;
|
||||
}
|
||||
);
|
||||
} else {
|
||||
this.selectedClients = this.selectedClients.filter(c => c.uuid !== client.uuid);
|
||||
this.filteredPartitions = [];
|
||||
}
|
||||
|
||||
this.loadImages();
|
||||
},
|
||||
(error) => {
|
||||
console.error('Error al cargar las particiones:', error);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue