commit
5803a14076
|
|
@ -1,4 +1,12 @@
|
|||
# Changelog
|
||||
## [0.20.1] - 2025-08-28
|
||||
### Improved
|
||||
- Se ha mejorado la UX de los asistentes.
|
||||
|
||||
### Fixed
|
||||
- Se han corredigo errores en la seccion clientes de los asistentes.
|
||||
|
||||
---
|
||||
## [0.20.0] - 2025-08-25
|
||||
### Added
|
||||
- Se ha añadido un nuevo boton en "Trazas" para marcar la misma como completada cuando se requiera.
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/* ===== ESTILOS PRINCIPALES ===== */
|
||||
.partition-assistant {
|
||||
padding: 32px;
|
||||
margin: 20px;
|
||||
|
|
@ -8,7 +7,6 @@
|
|||
border: 1px solid #bbdefb;
|
||||
}
|
||||
|
||||
/* ===== HEADER ===== */
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -37,7 +35,6 @@
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* ===== DESTINATION BADGE ===== */
|
||||
.destination-info {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
|
@ -88,7 +85,6 @@
|
|||
color: #0d47a1;
|
||||
}
|
||||
|
||||
/* ===== BOTONES ===== */
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
|
@ -124,7 +120,6 @@
|
|||
gap: 30px;
|
||||
}
|
||||
|
||||
/* ===== SELECTOR DE DISCO ===== */
|
||||
.disk-selector-card {
|
||||
padding: 32px;
|
||||
margin: 20px;
|
||||
|
|
@ -240,7 +235,6 @@
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Información de selección */
|
||||
.selection-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -278,7 +272,6 @@
|
|||
color: #388e3c;
|
||||
}
|
||||
|
||||
/* Mensaje cuando no hay discos */
|
||||
.no-disks-message {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -314,7 +307,6 @@
|
|||
color: #f57c00;
|
||||
}
|
||||
|
||||
/* ===== INFO BADGES ===== */
|
||||
.info-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -359,7 +351,6 @@
|
|||
color: #1b5e20;
|
||||
}
|
||||
|
||||
/* Badge específico para firmware */
|
||||
.info-badge:first-of-type {
|
||||
background: #e3f2fd;
|
||||
border-color: #bbdefb;
|
||||
|
|
@ -377,7 +368,6 @@
|
|||
color: #0d47a1;
|
||||
}
|
||||
|
||||
/* Badge específico para tabla de particiones */
|
||||
.info-badge:last-of-type {
|
||||
background: #fff3e0;
|
||||
border-color: #ffcc02;
|
||||
|
|
@ -395,7 +385,6 @@
|
|||
color: #e65100;
|
||||
}
|
||||
|
||||
/* ===== SELECTOR DE CLIENTES ===== */
|
||||
.select-container {
|
||||
margin-top: 20px;
|
||||
align-items: center;
|
||||
|
|
@ -432,7 +421,6 @@
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
/* Grid de clientes */
|
||||
.clients-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
|
|
@ -446,7 +434,6 @@
|
|||
.client-card {
|
||||
background: #ffffff;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
|
|
@ -483,7 +470,7 @@
|
|||
|
||||
.client-name {
|
||||
font-size: 0.9em;
|
||||
font-weight: 600;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
white-space: nowrap;
|
||||
|
|
@ -509,7 +496,6 @@
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ===== LAYOUT PRINCIPAL ===== */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -526,7 +512,6 @@
|
|||
border: none;
|
||||
}
|
||||
|
||||
/* ===== INFORMACIÓN DEL DISCO ===== */
|
||||
.disk-space-info-container {
|
||||
margin: 24px 0;
|
||||
background: none;
|
||||
|
|
@ -591,7 +576,6 @@
|
|||
color: #212529;
|
||||
}
|
||||
|
||||
/* Barra de uso del disco */
|
||||
.disk-usage-bar {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
|
@ -620,7 +604,6 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* ===== TABLA DE PARTICIONES ===== */
|
||||
.partition-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -672,7 +655,6 @@
|
|||
background-color: #c82333;
|
||||
}
|
||||
|
||||
/* ===== GRÁFICA ===== */
|
||||
.chart-container {
|
||||
flex: 0 0 35%;
|
||||
max-width: 35%;
|
||||
|
|
@ -727,7 +709,6 @@
|
|||
margin: 5px 0 !important;
|
||||
}
|
||||
|
||||
/* ===== LAYOUT PRINCIPAL ===== */
|
||||
.partition-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -735,7 +716,6 @@
|
|||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* ===== BARRA DE PROGRESO DE PARTICIONES ===== */
|
||||
.partition-progress-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
|
|
@ -869,7 +849,6 @@
|
|||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* ===== LEYENDA DE PARTICIONES ===== */
|
||||
.partition-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -938,7 +917,6 @@
|
|||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
/* ===== TABLA MAT-TABLE ===== */
|
||||
.table-container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
|
|
@ -984,7 +962,6 @@
|
|||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
/* Campos compactos para la tabla */
|
||||
.compact-form-field {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
|
@ -1014,7 +991,6 @@
|
|||
border-width: 1px;
|
||||
}
|
||||
|
||||
/* Estilos para inputs y selects compactos */
|
||||
.compact-form-field input,
|
||||
.compact-form-field .mat-select {
|
||||
line-height: 1.2;
|
||||
|
|
@ -1024,7 +1000,6 @@
|
|||
color: #333;
|
||||
}
|
||||
|
||||
/* Reducir el padding de las celdas de la tabla */
|
||||
.partition-mat-table .mat-cell {
|
||||
padding: 6px 6px;
|
||||
vertical-align: middle;
|
||||
|
|
@ -1034,30 +1009,25 @@
|
|||
padding: 10px 6px;
|
||||
}
|
||||
|
||||
/* Hacer los inputs más pequeños */
|
||||
.compact-form-field .mat-form-field-infix {
|
||||
padding: 2px 0;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
/* Ajustar el tamaño de los selects */
|
||||
.compact-form-field .mat-select-trigger {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* Ajustar el tamaño de los inputs numéricos */
|
||||
.compact-form-field input[type="number"] {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
/* Reducir el espacio del wrapper del form field */
|
||||
.compact-form-field .mat-form-field-wrapper {
|
||||
padding-bottom: 0;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* Ajustar el espacio del outline */
|
||||
.compact-form-field .mat-form-field-outline {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -1069,12 +1039,10 @@
|
|||
border-width: 1px;
|
||||
}
|
||||
|
||||
/* Checkbox en la tabla */
|
||||
.partition-mat-table .mat-checkbox {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Botón de eliminar */
|
||||
.partition-mat-table .mat-icon-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
@ -1371,6 +1339,82 @@
|
|||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.client-card {
|
||||
background: white;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border: 2px solid #e9ecef;
|
||||
border-bottom: none;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.selected-client {
|
||||
background: linear-gradient(135deg, rgba(143, 161, 240, 0.6) 0%, rgba(155, 123, 200, 0.6) 100%);
|
||||
color: #1f2937;
|
||||
border-color: #e9ecef;
|
||||
border-bottom: none;
|
||||
}
|
||||
.selected-client .client-name,
|
||||
.selected-client .client-ip {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.model-selector {
|
||||
background: #ffffff;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 0 0 10px 10px;
|
||||
border-top: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Radios y labels del radio button */
|
||||
::ng-deep .model-selector .mat-radio-label,
|
||||
::ng-deep .model-selector .mat-radio-label-content { color: #2c3e50 !important; }
|
||||
::ng-deep .model-selector .mat-radio-outer-circle { border-color: #667eea !important; }
|
||||
::ng-deep .model-selector .mat-radio-inner-circle { background-color: #667eea !important; }
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -42,6 +42,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' }}
|
||||
|
|
@ -67,17 +74,18 @@
|
|||
<span class="client-ip">{{ client.ip }}</span>
|
||||
<span class="client-ip">{{ client.mac }}</span>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-radio-group [(ngModel)]="selectedModelClient" (change)="loadPartitions(selectedModelClient)">
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</mat-radio-group>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
|
|
@ -85,7 +93,7 @@
|
|||
|
||||
|
||||
<mat-dialog-content>
|
||||
<div class="disk-selector-card">
|
||||
<div class="disk-selector-card" id="disk-selector">
|
||||
<div class="card-header">
|
||||
<mat-icon class="card-icon">storage</mat-icon>
|
||||
<div class="card-title">
|
||||
|
|
|
|||
|
|
@ -198,6 +198,13 @@ export class PartitionAssistantComponent implements OnInit, AfterViewInit, OnDes
|
|||
);
|
||||
}
|
||||
|
||||
onModelSelected(client: any) {
|
||||
this.loadPartitions(client);
|
||||
setTimeout(() => {
|
||||
this.scrollToDiskSelector();
|
||||
}, 200);
|
||||
}
|
||||
|
||||
get runScriptTitle(): string {
|
||||
const ctx = this.runScriptContext;
|
||||
if (!ctx) {
|
||||
|
|
@ -697,6 +704,16 @@ export class PartitionAssistantComponent implements OnInit, AfterViewInit, OnDes
|
|||
}, 100);
|
||||
}
|
||||
|
||||
scrollToDiskSelector() {
|
||||
const diskSelector = document.getElementById('disk-selector');
|
||||
if (diskSelector) {
|
||||
diskSelector.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
scrollToExecuteButton() {
|
||||
console.log('scrollToExecuteButton llamado');
|
||||
|
||||
|
|
|
|||
|
|
@ -293,66 +293,55 @@ table {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
/* === Estética unificada (igual a deploy-image) === */
|
||||
/* Leyenda explicativa */
|
||||
.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;
|
||||
}
|
||||
|
||||
/* Tarjeta base */
|
||||
.client-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
border: 2px solid #e9ecef;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.client-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.client-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.client-details {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.client-name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 2px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.client-ip {
|
||||
font-size: 10px;
|
||||
color: #6c757d;
|
||||
display: block;
|
||||
margin-bottom: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-color: #b3c2ff;
|
||||
}
|
||||
|
||||
/* Selección del cliente */
|
||||
.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;
|
||||
}
|
||||
.selected-client .client-ip { color: #1f2937; }
|
||||
|
||||
::ng-deep .mat-expansion-panel {
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
|
||||
|
|
@ -512,4 +501,36 @@ mat-spinner {
|
|||
::ng-deep .update-chip.mat-mdc-chip-selected {
|
||||
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Elementos internos de la tarjeta */
|
||||
.client-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.client-details {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.client-name {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 2px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.client-ip {
|
||||
font-size: 10px;
|
||||
color: #6c757d;
|
||||
display: block;
|
||||
margin-bottom: 1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -5,9 +5,15 @@
|
|||
<h2>
|
||||
{{ 'runScript' | translate }}
|
||||
</h2>
|
||||
<h4>
|
||||
{{ runScriptTitle }}
|
||||
</h4>
|
||||
<div class="destination-info">
|
||||
<div class="destination-badge">
|
||||
<mat-icon class="destination-icon">cloud_download</mat-icon>
|
||||
<div class="destination-content">
|
||||
<span class="destination-label">Destino</span>
|
||||
<span class="destination-value">{{ runScriptTitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-row">
|
||||
<button class="action-button" [disabled]="selectedClients.length < 1 || (commandType === 'existing' && !selectedScript) || (commandType === 'new' && !newScript.trim()) || loading" (click)="save()">Ejecutar</button>
|
||||
|
|
@ -31,6 +37,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.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="button-row">
|
||||
<button class="action-button" (click)="toggleSelectAll()">
|
||||
{{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue