opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

develop #37

Merged
maranda merged 5 commits from develop into main 2025-08-28 10:41:33 +02:00
Conversation 0 Commits 5 Files Changed 9
9 changed files with 367 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -1,4 +1,12 @@
# Changelog # 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 ## [0.20.0] - 2025-08-25
### Added ### Added
- Se ha añadido un nuevo boton en "Trazas" para marcar la misma como completada cuando se requiera. - Se ha añadido un nuevo boton en "Trazas" para marcar la misma como completada cuando se requiera.

138
ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.css
View File

@ -144,31 +144,102 @@ mat-form-field {
.client-card { .client-card {
background: white; background: white;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 2px solid #e9ecef;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
padding: 12px; padding: 12px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
border: 2px solid transparent; /* asegurar ancho consistente con bordes */
width: 100%;
box-sizing: border-box;
} }
.client-card:hover { .client-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); 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 { .selected-client {
background: linear-gradient(135deg, #8fa1f0 0%, #9b7bc8 100%); background: linear-gradient(135deg, rgba(143, 161, 240, 0.6) 0%, rgba(155, 123, 200, 0.6) 100%);
color: white; color: #1f2937;
border-color: #667eea; border-color: #e9ecef;
} }
.selected-client .client-name, .selected-client .client-name,
.selected-client .client-ip { .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 { .client-image {
@ -183,7 +254,7 @@ mat-form-field {
.client-name { .client-name {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 500;
color: #2c3e50; color: #2c3e50;
margin-bottom: 2px; margin-bottom: 2px;
display: block; display: block;
@ -588,4 +659,55 @@ table {
border: 1px dashed #dee2e6; 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;
}

15
ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.html
View File

@ -46,6 +46,13 @@
</mat-panel-description> </mat-panel-description>
</mat-expansion-panel-header> </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"> <div class="button-row">
<button class="action-button" (click)="toggleSelectAll()"> <button class="action-button" (click)="toggleSelectAll()">
{{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }} {{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
@ -55,7 +62,7 @@
<div class="clients-grid"> <div class="clients-grid">
<div *ngFor="let client of clientData" class="client-item"> <div *ngFor="let client of clientData" class="client-item">
<div class="client-card" <div class="client-card"
(click)="client.status === 'og-live' && toggleClientSelection(client)" (click)="toggleClientSelection(client)"
[ngClass]="{'selected-client': client.selected}" [ngClass]="{'selected-client': client.selected}"
[matTooltip]="getPartitionsTooltip(client)" [matTooltip]="getPartitionsTooltip(client)"
matTooltipPosition="above" matTooltipPosition="above"
@ -71,12 +78,12 @@
<span class="client-ip">{{ client.ip }}</span> <span class="client-ip">{{ client.ip }}</span>
<span class="client-ip">{{ client.mac }}</span> <span class="client-ip">{{ client.mac }}</span>
</div> </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" <mat-radio-button [value]="client"
color="primary" color="primary"
[disabled]="!client.selected"
(click)="$event.stopPropagation()"> (click)="$event.stopPropagation()">
Modelo Modelo
</mat-radio-button> </mat-radio-button>

56
ogWebconsole/src/app/components/groups/components/client-main-view/deploy-image/deploy-image.component.ts
View File

@ -178,6 +178,13 @@ export class DeployImageComponent implements OnInit{
return this.selectedMethod === method; return this.selectedMethod === method;
} }
onModelSelected(client: any) {
this.loadPartitions(client);
setTimeout(() => {
this.scrollToPartitionSection();
}, 200);
}
toggleClientSelection(client: any) { toggleClientSelection(client: any) {
client.selected = !client.selected; client.selected = !client.selected;
this.updateSelectedClients(); this.updateSelectedClients();
@ -185,7 +192,7 @@ export class DeployImageComponent implements OnInit{
updateSelectedClients() { updateSelectedClients() {
this.selectedClients = this.clientData.filter( 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)) { if (!this.selectedClients.includes(this.selectedModelClient)) {
@ -205,34 +212,29 @@ export class DeployImageComponent implements OnInit{
} }
loadPartitions(client: any) { loadPartitions(client: any) {
if (client.selected) { this.http.get(`${this.baseUrl}${client.uuid}`).subscribe(
this.http.get(`${this.baseUrl}${client.uuid}`).subscribe( (fullClientData: any) => {
(fullClientData: any) => { this.filteredPartitions = fullClientData.partitions;
this.filteredPartitions = fullClientData.partitions; this.selectedRepository = fullClientData.repository ?? null;
this.selectedRepository = fullClientData.repository ?? null;
if (fullClientData.partitions) { if (fullClientData.partitions) {
this.filteredPartitions = fullClientData.partitions.filter((partition: any) => { this.filteredPartitions = fullClientData.partitions.filter((partition: any) => {
return partition.partitionNumber !== 0; return partition.partitionNumber !== 0;
}); });
this.p2pMode = fullClientData.organizationalUnit?.networkSettings?.p2pMode; this.p2pMode = fullClientData.organizationalUnit?.networkSettings?.p2pMode;
this.p2pTime = fullClientData.organizationalUnit?.networkSettings?.p2pTime; this.p2pTime = fullClientData.organizationalUnit?.networkSettings?.p2pTime;
this.mcastSpeed = fullClientData.organizationalUnit?.networkSettings?.mcastSpeed; this.mcastSpeed = fullClientData.organizationalUnit?.networkSettings?.mcastSpeed;
this.mcastMode = fullClientData.organizationalUnit?.networkSettings?.mcastMode; this.mcastMode = fullClientData.organizationalUnit?.networkSettings?.mcastMode;
this.mcastPort = fullClientData.organizationalUnit?.networkSettings?.mcastPort; this.mcastPort = fullClientData.organizationalUnit?.networkSettings?.mcastPort;
this.mcastIp = fullClientData.organizationalUnit?.networkSettings?.mcastIp; this.mcastIp = fullClientData.organizationalUnit?.networkSettings?.mcastIp;
}
this.loadImages();
},
(error) => {
console.error('Error al cargar las particiones:', error);
} }
);
} else { this.loadImages();
this.selectedClients = this.selectedClients.filter(c => c.uuid !== client.uuid); },
this.filteredPartitions = []; (error) => {
} console.error('Error al cargar las particiones:', error);
}
);
} }

110
ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css
View File

@ -1,4 +1,3 @@
/* ===== ESTILOS PRINCIPALES ===== */
.partition-assistant { .partition-assistant {
padding: 32px; padding: 32px;
margin: 20px; margin: 20px;
@ -8,7 +7,6 @@
border: 1px solid #bbdefb; border: 1px solid #bbdefb;
} }
/* ===== HEADER ===== */
.header-container { .header-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -37,7 +35,6 @@
font-weight: 400; font-weight: 400;
} }
/* ===== DESTINATION BADGE ===== */
.destination-info { .destination-info {
margin-top: 12px; margin-top: 12px;
} }
@ -88,7 +85,6 @@
color: #0d47a1; color: #0d47a1;
} }
/* ===== BOTONES ===== */
.button-row { .button-row {
display: flex; display: flex;
gap: 12px; gap: 12px;
@ -124,7 +120,6 @@
gap: 30px; gap: 30px;
} }
/* ===== SELECTOR DE DISCO ===== */
.disk-selector-card { .disk-selector-card {
padding: 32px; padding: 32px;
margin: 20px; margin: 20px;
@ -240,7 +235,6 @@
font-weight: 500; font-weight: 500;
} }
/* Información de selección */
.selection-info { .selection-info {
display: flex; display: flex;
align-items: center; align-items: center;
@ -278,7 +272,6 @@
color: #388e3c; color: #388e3c;
} }
/* Mensaje cuando no hay discos */
.no-disks-message { .no-disks-message {
display: flex; display: flex;
align-items: center; align-items: center;
@ -314,7 +307,6 @@
color: #f57c00; color: #f57c00;
} }
/* ===== INFO BADGES ===== */
.info-badge { .info-badge {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -359,7 +351,6 @@
color: #1b5e20; color: #1b5e20;
} }
/* Badge específico para firmware */
.info-badge:first-of-type { .info-badge:first-of-type {
background: #e3f2fd; background: #e3f2fd;
border-color: #bbdefb; border-color: #bbdefb;
@ -377,7 +368,6 @@
color: #0d47a1; color: #0d47a1;
} }
/* Badge específico para tabla de particiones */
.info-badge:last-of-type { .info-badge:last-of-type {
background: #fff3e0; background: #fff3e0;
border-color: #ffcc02; border-color: #ffcc02;
@ -395,7 +385,6 @@
color: #e65100; color: #e65100;
} }
/* ===== SELECTOR DE CLIENTES ===== */
.select-container { .select-container {
margin-top: 20px; margin-top: 20px;
align-items: center; align-items: center;
@ -432,7 +421,6 @@
align-items: center; align-items: center;
} }
/* Grid de clientes */
.clients-grid { .clients-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
@ -446,7 +434,6 @@
.client-card { .client-card {
background: #ffffff; background: #ffffff;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
padding: 8px; padding: 8px;
@ -483,7 +470,7 @@
.client-name { .client-name {
font-size: 0.9em; font-size: 0.9em;
font-weight: 600; font-weight: 500;
color: #333; color: #333;
margin-bottom: 5px; margin-bottom: 5px;
white-space: nowrap; white-space: nowrap;
@ -509,7 +496,6 @@
border-radius: 4px; border-radius: 4px;
} }
/* ===== LAYOUT PRINCIPAL ===== */
.row { .row {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -526,7 +512,6 @@
border: none; border: none;
} }
/* ===== INFORMACIÓN DEL DISCO ===== */
.disk-space-info-container { .disk-space-info-container {
margin: 24px 0; margin: 24px 0;
background: none; background: none;
@ -591,7 +576,6 @@
color: #212529; color: #212529;
} }
/* Barra de uso del disco */
.disk-usage-bar { .disk-usage-bar {
margin-top: 16px; margin-top: 16px;
} }
@ -620,7 +604,6 @@
text-align: center; text-align: center;
} }
/* ===== TABLA DE PARTICIONES ===== */
.partition-table { .partition-table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
@ -672,7 +655,6 @@
background-color: #c82333; background-color: #c82333;
} }
/* ===== GRÁFICA ===== */
.chart-container { .chart-container {
flex: 0 0 35%; flex: 0 0 35%;
max-width: 35%; max-width: 35%;
@ -727,7 +709,6 @@
margin: 5px 0 !important; margin: 5px 0 !important;
} }
/* ===== LAYOUT PRINCIPAL ===== */
.partition-layout { .partition-layout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -735,7 +716,6 @@
margin-top: 20px; margin-top: 20px;
} }
/* ===== BARRA DE PROGRESO DE PARTICIONES ===== */
.partition-progress-container { .partition-progress-container {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
@ -869,7 +849,6 @@
opacity: 0.9; opacity: 0.9;
} }
/* ===== LEYENDA DE PARTICIONES ===== */
.partition-legend { .partition-legend {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -938,7 +917,6 @@
border: 1px solid #e9ecef; border: 1px solid #e9ecef;
} }
/* ===== TABLA MAT-TABLE ===== */
.table-container { .table-container {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
@ -984,7 +962,6 @@
background: #f8f9fa; background: #f8f9fa;
} }
/* Campos compactos para la tabla */
.compact-form-field { .compact-form-field {
width: 100%; width: 100%;
margin: 0; margin: 0;
@ -1014,7 +991,6 @@
border-width: 1px; border-width: 1px;
} }
/* Estilos para inputs y selects compactos */
.compact-form-field input, .compact-form-field input,
.compact-form-field .mat-select { .compact-form-field .mat-select {
line-height: 1.2; line-height: 1.2;
@ -1024,7 +1000,6 @@
color: #333; color: #333;
} }
/* Reducir el padding de las celdas de la tabla */
.partition-mat-table .mat-cell { .partition-mat-table .mat-cell {
padding: 6px 6px; padding: 6px 6px;
vertical-align: middle; vertical-align: middle;
@ -1034,30 +1009,25 @@
padding: 10px 6px; padding: 10px 6px;
} }
/* Hacer los inputs más pequeños */
.compact-form-field .mat-form-field-infix { .compact-form-field .mat-form-field-infix {
padding: 2px 0; padding: 2px 0;
min-height: 20px; min-height: 20px;
} }
/* Ajustar el tamaño de los selects */
.compact-form-field .mat-select-trigger { .compact-form-field .mat-select-trigger {
height: 20px; height: 20px;
} }
/* Ajustar el tamaño de los inputs numéricos */
.compact-form-field input[type="number"] { .compact-form-field input[type="number"] {
padding: 2px 6px; padding: 2px 6px;
} }
/* Reducir el espacio del wrapper del form field */
.compact-form-field .mat-form-field-wrapper { .compact-form-field .mat-form-field-wrapper {
padding-bottom: 0; padding-bottom: 0;
margin: 0; margin: 0;
line-height: 1.2; line-height: 1.2;
} }
/* Ajustar el espacio del outline */
.compact-form-field .mat-form-field-outline { .compact-form-field .mat-form-field-outline {
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -1069,12 +1039,10 @@
border-width: 1px; border-width: 1px;
} }
/* Checkbox en la tabla */
.partition-mat-table .mat-checkbox { .partition-mat-table .mat-checkbox {
margin: 0; margin: 0;
} }
/* Botón de eliminar */
.partition-mat-table .mat-icon-button { .partition-mat-table .mat-icon-button {
width: 32px; width: 32px;
height: 32px; height: 32px;
@ -1371,6 +1339,82 @@
to { transform: rotate(360deg); } 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; }

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

@ -42,6 +42,13 @@
</mat-panel-description> </mat-panel-description>
</mat-expansion-panel-header> </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"> <div class="button-row">
<button class="action-button" (click)="toggleSelectAll()"> <button class="action-button" (click)="toggleSelectAll()">
{{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }} {{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}
@ -67,17 +74,18 @@
<span class="client-ip">{{ client.ip }}</span> <span class="client-ip">{{ client.ip }}</span>
<span class="client-ip">{{ client.mac }}</span> <span class="client-ip">{{ client.mac }}</span>
</div> </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" <mat-radio-button [value]="client"
color="primary" color="primary"
[disabled]="!client.selected"
(click)="$event.stopPropagation()"> (click)="$event.stopPropagation()">
Modelo Modelo
</mat-radio-button> </mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div> </div>
</div> </div>
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>
@ -85,7 +93,7 @@
<mat-dialog-content> <mat-dialog-content>
<div class="disk-selector-card"> <div class="disk-selector-card" id="disk-selector">
<div class="card-header"> <div class="card-header">
<mat-icon class="card-icon">storage</mat-icon> <mat-icon class="card-icon">storage</mat-icon>
<div class="card-title"> <div class="card-title">

17
ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts
View File

@ -198,6 +198,13 @@ export class PartitionAssistantComponent implements OnInit, AfterViewInit, OnDes
); );
} }
onModelSelected(client: any) {
this.loadPartitions(client);
setTimeout(() => {
this.scrollToDiskSelector();
}, 200);
}
get runScriptTitle(): string { get runScriptTitle(): string {
const ctx = this.runScriptContext; const ctx = this.runScriptContext;
if (!ctx) { if (!ctx) {
@ -697,6 +704,16 @@ export class PartitionAssistantComponent implements OnInit, AfterViewInit, OnDes
}, 100); }, 100);
} }
scrollToDiskSelector() {
const diskSelector = document.getElementById('disk-selector');
if (diskSelector) {
diskSelector.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
scrollToExecuteButton() { scrollToExecuteButton() {
console.log('scrollToExecuteButton llamado'); console.log('scrollToExecuteButton llamado');

111
ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.css
View File

@ -293,66 +293,55 @@ table {
position: relative; 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 { .client-card {
background: white; background: white;
border-radius: 8px; border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 2px solid #e9ecef;
overflow: hidden;
position: relative;
padding: 12px; padding: 12px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
border: 2px solid transparent; width: 100%;
box-sizing: border-box;
overflow: hidden;
position: relative;
} }
.client-card:hover { .client-card:hover {
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
border-color: #667eea; border-color: #b3c2ff;
}
.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;
} }
/* Selección del cliente */
.selected-client { .selected-client {
background: linear-gradient(135deg, #8fa1f0 0%, #9b7bc8 100%); background: linear-gradient(135deg, rgba(143, 161, 240, 0.6) 0%, rgba(155, 123, 200, 0.6) 100%);
color: white; color: #1f2937;
border-color: #667eea; border-color: #e9ecef;
} }
.selected-client .client-name, .selected-client .client-name,
.selected-client .client-ip { .selected-client .client-ip { color: #1f2937; }
color: white;
}
::ng-deep .mat-expansion-panel { ::ng-deep .mat-expansion-panel {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important; 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 { ::ng-deep .update-chip.mat-mdc-chip-selected {
background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important; background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
color: white !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;
} }

19
ogWebconsole/src/app/components/groups/components/client-main-view/run-script-assistant/run-script-assistant.component.html
View File

@ -5,9 +5,15 @@
<h2> <h2>
{{ 'runScript' | translate }} {{ 'runScript' | translate }}
</h2> </h2>
<h4> <div class="destination-info">
{{ runScriptTitle }} <div class="destination-badge">
</h4> <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>
<div class="button-row"> <div class="button-row">
<button class="action-button" [disabled]="selectedClients.length < 1 || (commandType === 'existing' && !selectedScript) || (commandType === 'new' && !newScript.trim()) || loading" (click)="save()">Ejecutar</button> <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-panel-description>
</mat-expansion-panel-header> </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"> <div class="button-row">
<button class="action-button" (click)="toggleSelectAll()"> <button class="action-button" (click)="toggleSelectAll()">
{{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }} {{ allSelected ? 'Desmarcar todos' : 'Marcar todos' }}