From 91397bff1d738fc44a53ec8152596d5a9b9f9153 Mon Sep 17 00:00:00 2001 From: Manuel Aranda Date: Mon, 27 Apr 2026 11:29:13 +0200 Subject: [PATCH] Updated remote PC and bug status classrom --- .../global-status/global-status.component.css | 165 ++++++++++++------ .../global-status.component.html | 16 +- .../global-status/global-status.component.ts | 30 +++- .../manage-organizational-unit.component.html | 1 + .../manage-organizational-unit.component.ts | 3 + .../edit-image/edit-image.component.css | 4 + .../edit-image/edit-image.component.html | 3 + .../edit-image/edit-image.component.ts | 8 +- .../manage-repository.component.css | 1 + .../manage-repository.component.ts | 4 +- 10 files changed, 176 insertions(+), 59 deletions(-) diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.css b/ogWebconsole/src/app/components/global-status/global-status.component.css index 46d0462..cea6463 100644 --- a/ogWebconsole/src/app/components/global-status/global-status.component.css +++ b/ogWebconsole/src/app/components/global-status/global-status.component.css @@ -2,12 +2,13 @@ .welcome-header { background: #3f51b5; color: white; - padding: 2rem 2rem 1.5rem 2rem; + padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; - align-items: flex-start; + align-items: center; position: relative; overflow: hidden; + gap: 1rem; } .welcome-header::before { @@ -24,62 +25,119 @@ .welcome-content { display: flex; align-items: center; - gap: 1.5rem; + gap: 1rem; position: relative; z-index: 1; + min-width: 0; } .welcome-icon { background: rgba(255, 255, 255, 0.2); border-radius: 50%; - width: 60px; - height: 60px; + width: 46px; + height: 46px; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); + flex-shrink: 0; } .welcome-icon mat-icon { - font-size: 32px; - width: 32px; - height: 32px; + font-size: 26px; + width: 26px; + height: 26px; color: white; } .welcome-text { - flex: 1; + min-width: 0; } .welcome-title { - margin: 0 0 0.5rem 0; - font-size: 2rem; + margin: 0 0 0.2rem 0; + font-size: 1.5rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + white-space: nowrap; } .welcome-subtitle { - margin: 0 0 0.25rem 0; - font-size: 1.1rem; - font-weight: 500; - opacity: 0.95; -} - -.welcome-description { margin: 0; font-size: 0.9rem; - opacity: 0.8; + font-weight: 400; + opacity: 0.85; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .welcome-actions { display: flex; - gap: 0.5rem; + align-items: center; + gap: 0.75rem; position: relative; z-index: 1; + flex-shrink: 0; +} + +/* ===== PANEL DE VERSIONES ===== */ +.release-panel { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 0.4rem; +} + +.release-channel { + background: rgba(255, 255, 255, 0.25); + border: 1px solid rgba(255, 255, 255, 0.4); + padding: 0.15rem 0.6rem; + border-radius: 10px; + font-size: 0.65rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1px; + opacity: 0.95; +} + +.release-chips { + display: flex; + flex-wrap: wrap; + gap: 0.3rem; + justify-content: flex-end; + max-width: 320px; +} + +.release-chip { + display: flex; + align-items: center; + gap: 0.3rem; + background: rgba(0, 0, 0, 0.2); + border: 1px solid rgba(255, 255, 255, 0.2); + padding: 0.15rem 0.5rem; + border-radius: 8px; + cursor: default; + transition: background 0.2s ease; +} + +.release-chip:hover { + background: rgba(0, 0, 0, 0.35); +} + +.chip-name { + font-size: 0.65rem; + opacity: 0.8; + font-weight: 500; +} + +.chip-version { + font-size: 0.65rem; + font-weight: 700; + font-family: 'Courier New', monospace; } -.help-button, .refresh-button { background: rgba(255, 255, 255, 0.2) !important; color: white !important; @@ -88,7 +146,6 @@ transition: all 0.3s ease; } -.help-button:hover, .refresh-button:hover { background: rgba(255, 255, 255, 0.3) !important; transform: translateY(-2px); @@ -104,7 +161,7 @@ mat-dialog-content { } .main-content { - padding: 2rem; + padding: 1.25rem 1.5rem; } /* ===== SPINNER DE CARGA ===== */ @@ -143,19 +200,19 @@ mat-dialog-content { /* ===== RESUMEN DEL SISTEMA ===== */ .system-overview { display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 1.5rem; - margin-bottom: 2rem; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + margin-bottom: 1.25rem; } .overview-card { background: white; - border-radius: 16px; - padding: 1.5rem; + border-radius: 12px; + padding: 1rem; display: flex; align-items: center; - gap: 1rem; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + gap: 0.75rem; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); transition: all 0.3s ease; border: 1px solid rgba(0, 0, 0, 0.05); position: relative; @@ -202,8 +259,8 @@ mat-dialog-content { .overview-icon { background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; - width: 50px; - height: 50px; + width: 40px; + height: 40px; display: flex; align-items: center; justify-content: center; @@ -212,21 +269,21 @@ mat-dialog-content { .overview-icon mat-icon { color: white; - font-size: 24px; - width: 24px; - height: 24px; + font-size: 20px; + width: 20px; + height: 20px; } .overview-content h3 { - margin: 0 0 0.5rem 0; - font-size: 1.1rem; + margin: 0 0 0.3rem 0; + font-size: 0.95rem; font-weight: 600; color: #2c3e50; } .overview-content p { margin: 0; - font-size: 0.9rem; + font-size: 0.82rem; color: #6c757d; } @@ -447,23 +504,26 @@ mat-dialog-content { /* ===== RESPONSIVE ===== */ @media (max-width: 768px) { .welcome-header { - padding: 1.5rem 1rem 1rem 1rem; - flex-direction: column; - gap: 1rem; - text-align: center; - } - - .welcome-content { - flex-direction: column; - gap: 1rem; + padding: 1rem; + flex-wrap: wrap; + gap: 0.75rem; } .welcome-title { - font-size: 1.5rem; + font-size: 1.25rem; } .welcome-subtitle { - font-size: 1rem; + font-size: 0.8rem; + } + + .release-panel { + align-items: flex-start; + } + + .release-chips { + justify-content: flex-start; + max-width: 100%; } .main-content { @@ -471,12 +531,12 @@ mat-dialog-content { } .system-overview { - grid-template-columns: 1fr; - gap: 1rem; + grid-template-columns: repeat(2, 1fr); + gap: 0.75rem; } .overview-card { - padding: 1rem; + padding: 0.75rem; } .action-container { @@ -550,6 +610,7 @@ mat-dialog-content { .overview-card:nth-child(1) { animation-delay: 0.1s; } .overview-card:nth-child(2) { animation-delay: 0.2s; } .overview-card:nth-child(3) { animation-delay: 0.3s; } +.overview-card:nth-child(4) { animation-delay: 0.4s; } /* ===== ESTILOS GLOBALES DEL DIALOG ===== */ ::ng-deep .mat-dialog-container { diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.html b/ogWebconsole/src/app/components/global-status/global-status.component.html index 890bebe..3bece5e 100644 --- a/ogWebconsole/src/app/components/global-status/global-status.component.html +++ b/ogWebconsole/src/app/components/global-status/global-status.component.html @@ -6,10 +6,24 @@

{{ 'GlobalStatus' | translate }}

Bienvenido a la consola de administración de OpenGnsys

-

Estado general de todos los componentes de la plataforma

+ @if (releaseInfo) { +
+ @if (releaseChannel) { + {{ releaseChannel }} + } +
+ @for (pkg of releasePackages; track pkg.key) { + + {{ pkg.key }} + {{ pkg.value.split('~')[0] }} + + } +
+
+ } diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.ts b/ogWebconsole/src/app/components/global-status/global-status.component.ts index 20d3896..f12289a 100644 --- a/ogWebconsole/src/app/components/global-status/global-status.component.ts +++ b/ogWebconsole/src/app/components/global-status/global-status.component.ts @@ -31,7 +31,7 @@ export class GlobalStatusComponent implements OnInit { repositoryStatuses: { [key: string]: any } = {}; lastUpdateTime: string = ''; selectedRepositoryUuid: string = ''; - selectedSection: 'repositories' | 'ogboot' | 'dhcp' | 'ogcore' = 'repositories'; + selectedSection: 'repositories' | 'ogboot' | 'dhcp' | 'ogcore' = 'ogcore'; ogBootApiUrl: string; ogBootDiskUsage: any = {}; @@ -49,6 +49,9 @@ export class GlobalStatusComponent implements OnInit { ogCoreApiUrl: string; + releaseInfo: Record | null = null; + releaseLoading: boolean = false; + loadingOgBootOgLives: boolean = false; loadingOgBootServices: boolean = false; loadingOgBootDisk: boolean = false; @@ -75,6 +78,7 @@ export class GlobalStatusComponent implements OnInit { ngOnInit(): void { this.updateLastUpdateTime(); + this.loadReleaseInfo(); this.loadOgBootStatus(); this.loadDhcps(false); this.loadRepositories(false); @@ -84,6 +88,30 @@ export class GlobalStatusComponent implements OnInit { this.syncOgLives(); } + get releasePackages(): { key: string; value: string }[] { + if (!this.releaseInfo) return []; + return Object.entries(this.releaseInfo) + .filter(([key]) => key !== 'Versión instalada') + .map(([key, value]) => ({ key, value })); + } + + get releaseChannel(): string { + return this.releaseInfo?.['Versión instalada'] ?? ''; + } + + loadReleaseInfo(): void { + this.releaseLoading = true; + this.http.get>(`${this.baseUrl}/opengnsys/server/release`).subscribe({ + next: data => { + this.releaseInfo = data; + this.releaseLoading = false; + }, + error: () => { + this.releaseLoading = false; + } + }); + } + syncSubnets() { this.http.get(`${this.dhcpsApiUrl}?page=1&itemsPerPage=10`).subscribe(data => { const dhcps = data['hydra:member'] || []; diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html index ec3190c..8283850 100644 --- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html +++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.html @@ -68,6 +68,7 @@
{{ 'projectorAlt' | translate }} {{ 'boardToggle' | translate }} + {{ 'remotePcLabel' | translate }}
diff --git a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts index 8576dda..ae62a32 100644 --- a/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts +++ b/ogWebconsole/src/app/components/groups/shared/organizational-units/manage-organizational-unit/manage-organizational-unit.component.ts @@ -101,6 +101,7 @@ export class ManageOrganizationalUnitComponent implements OnInit { location: [null], projector: [false], board: [false], + remotePc: [false], capacity: [null, [Validators.required, Validators.min(0)]], remoteCalendar: [null] }); @@ -253,6 +254,7 @@ export class ManageOrganizationalUnitComponent implements OnInit { location: data.location, projector: data.projector, board: data.board, + remotePc: data.remotePc ?? false, capacity: data.capacity, remoteCalendar: data.remoteCalendar ? data.remoteCalendar['@id'] : null }); @@ -312,6 +314,7 @@ export class ManageOrganizationalUnitComponent implements OnInit { location: this.classroomInfoFormGroup.value.location, projector: this.classroomInfoFormGroup.value.projector, board: this.classroomInfoFormGroup.value.board, + remotePc: this.classroomInfoFormGroup.value.remotePc, capacity: this.classroomInfoFormGroup.value.capacity, }; diff --git a/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.css b/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.css index bdecbfa..1eaaeb6 100644 --- a/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.css +++ b/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.css @@ -37,3 +37,7 @@ mat-dialog-actions { .selected-item button { margin-left: 10px; } + +.toggle-field { + margin-top: 12px; +} diff --git a/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.html b/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.html index b065b64..64faac0 100644 --- a/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.html +++ b/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.html @@ -7,6 +7,9 @@ +
+ {{ 'remotePcLabel' | translate }} +
diff --git a/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.ts b/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.ts index f15c851..7665882 100644 --- a/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.ts +++ b/ogWebconsole/src/app/components/repositories/edit-image/edit-image.component.ts @@ -27,7 +27,8 @@ export class EditImageComponent implements OnInit{ ) { this.baseUrl = this.configService.apiUrl; this.imageForm = this.fb.group({ - description: [''] + description: [''], + remotePc: [false], }) } @@ -40,7 +41,8 @@ export class EditImageComponent implements OnInit{ this.http.get(`${this.baseUrl}${this.data.image['@id']}`).subscribe({ next: (response) => { this.imageForm.patchValue({ - description: response.description + description: response.description, + remotePc: response.remotePc ?? false, }); this.loading = false; }, @@ -54,7 +56,7 @@ export class EditImageComponent implements OnInit{ const payload = this.imageForm.value; this.http.put(`${this.baseUrl}${this.data.image['@id']}`, payload).subscribe({ - next: (response) => { + next: () => { this.toastService.success('Image updated successfully'); this.dialogRef.close(true); }, diff --git a/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.css b/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.css index 710cd97..f0e2a8d 100644 --- a/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.css +++ b/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.css @@ -38,3 +38,4 @@ margin-bottom: 8px; } } +.toggle-field { margin-top: 12px; } diff --git a/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.ts b/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.ts index 189cdac..aa02194 100644 --- a/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.ts +++ b/ogWebconsole/src/app/components/repositories/manage-repository/manage-repository.component.ts @@ -48,8 +48,8 @@ export class ManageRepositoryComponent implements OnInit { this.imageForm = this.fb.group({ name: [response.name, Validators.required], ip: [response.ip], - sshPort: [response.sshPort?? '22' ], - user: [response.user?? 'opengnsys'], + sshPort: [response.sshPort ?? '22'], + user: [response.user ?? 'opengnsys'], comments: [response.comments], }); this.repositoryId = response['@id']; -- 2.40.1