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

Merge branch 'develop' of ssh://ognproject.evlt.uma.es:21987/opengnsys/oggui into develop
testing/ogGui-multibranch/pipeline/head This commit looks good Details

pull/18/head
Manuel Aranda Rosales 2025-03-10 16:21:43 +01:00
parent adc11df008 8e10d135e1
commit 70319d718f
5 changed files with 148 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
ogWebconsole/src/app/components/groups/groups.component.css
View File

@ -258,11 +258,11 @@ mat-tree mat-tree-node.disabled:hover {
.client-name {
display: block;
font-size: 16px;
font-weight: 600;
color: #333;
font-weight: 500;
margin-bottom: 5px;
margin-top: 5px;
padding-left: 1rem;
padding-right: 1rem;
}
.filters-container {
@ -319,11 +319,26 @@ mat-tree mat-tree-node.disabled:hover {
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.client-image {
width: 35px;
height: 35px;
.client-details {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 4px;
}
.action-icons {
display: flex;
justify-content: center;
align-items: center;
gap: 1px;
margin-top: 10px;
margin-bottom: 8px;
}
.client-status-container {
display: flex;
align-items: center;
gap: 5px;
}
.client-ip {
@ -338,11 +353,9 @@ mat-tree mat-tree-node.disabled:hover {
gap: 4px;
}
.action-icons {
display: flex;
justify-content: center;
gap: 1px;
margin-top: 10px;
.sync-spinner {
margin-left: 1em;
margin-right: 1em;
}
.mat-elevation-z8 {
@ -360,10 +373,6 @@ mat-tree mat-tree-node.disabled:hover {
position: relative;
}
.client-details {
margin-top: 4px;
}
@media (max-width: 1560px) {
.clients-view-header {
display: flex;

33
ogWebconsole/src/app/components/groups/groups.component.html
View File

@ -60,12 +60,14 @@
</button>
</mat-form-field>
<mat-form-field class="form-field search-select" appearance="outline">
<mat-select placeholder="Buscar por estado..." #clientSearchStatusInput (selectionChange)="onClientFilterStatusInput($event.value)">
<mat-select placeholder="Buscar por estado..." #clientSearchStatusInput
(selectionChange)="onClientFilterStatusInput($event.value)">
<mat-option *ngFor="let option of status" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
<button *ngIf="clientSearchStatusInput.value" mat-icon-button matSuffix aria-label="Clear tree search" (click)="clearStatusFilter($event, clientSearchStatusInput)">
<button *ngIf="clientSearchStatusInput.value" mat-icon-button matSuffix aria-label="Clear tree search"
(click)="clearStatusFilter($event, clientSearchStatusInput)">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
@ -226,7 +228,7 @@
<mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
[checked]="selection.isSelected(client)" [disabled]="client.status === 'busy'">
</mat-checkbox>
<img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
<img style="margin-top: 0.5em;" [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
class="client-image" />
<div class="client-details">
@ -234,14 +236,6 @@
<span class="client-ip">{{ client.ip }}</span>
<span class="client-ip">{{ client.mac }}</span>
<div class="action-icons">
<button *ngIf="(!syncStatus || syncingClientId !== client.uuid)" mat-icon-button
color="primary" (click)="getStatus(client, selectedNode)">
<mat-icon>sync</mat-icon>
</button>
<button *ngIf="syncStatus && syncingClientId === client.uuid" mat-icon-button color="primary">
<mat-spinner diameter="24"></mat-spinner>
</button>
<app-execute-command [clientData]="[client]" [buttonType]="'icon'" [icon]="'terminal'"
[disabled]="selection.selected.length > 1 || (selection.selected.length === 1 && !selection.isSelected(client))"></app-execute-command>
@ -252,6 +246,10 @@
<mat-icon>more_vert</mat-icon>
</button>
<span class="sync-spinner" *ngIf="syncStatus && syncingClientId === client.uuid">
<mat-spinner diameter="24"></mat-spinner>
</span>
<mat-menu #clientMenu="matMenu">
<button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
<mat-icon>edit</mat-icon>
@ -261,6 +259,11 @@
<mat-icon>visibility</mat-icon>
<span>{{ 'viewDetails' | translate }}</span>
</button>
<button mat-menu-item *ngIf="(!syncStatus || syncingClientId !== client.uuid)"
(click)="getStatus(client, selectedNode)">
<mat-icon>sync</mat-icon>
<span>{{ 'sync' | translate }}</span>
</button>
<button mat-menu-item (click)="onDeleteClick($event, client)">
<mat-icon>delete</mat-icon>
<span>{{ 'delete' | translate }}</span>
@ -300,8 +303,13 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'status' | translate }} </th>
<td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
matTooltipPosition="left" matTooltipShowDelay="500">
<div class="client-status-container">
<img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
class="client-image" />
<span *ngIf="syncStatus && syncingClientId === client.uuid">
<mat-spinner diameter="24"></mat-spinner>
</span>
</div>
</td>
</ng-container>
@ -372,7 +380,8 @@
</mat-menu>
</td>
</ng-container>
<tr mat-header-row style="background-color: #f3f3f3;" *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-header-row style="background-color: #f3f3f3;"
*matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</section>

23
ogWebconsole/src/app/components/images/create-image/create-image.component.css
View File

@ -1,8 +1,25 @@
.dialog-content {
.create-image-container {
display: flex;
flex-direction: column;
gap: 16px;
/* Espacio entre los elementos del formulario */
padding: 1rem;
}
.loading-spinner {
display: block;
margin: 0 auto;
}
.mat-dialog-content.loading {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.mat-dialog-content {
padding-left: 1.5em;
padding-right: 1.5em;
padding-top: 1em;
}
.image-form {

24
ogWebconsole/src/app/components/images/create-image/create-image.component.html
View File

@ -1,13 +1,13 @@
<app-loading [isLoading]="loading"></app-loading>
<h2 mat-dialog-title>{{ imageId ? 'Editar' : 'Crear' }} imagen</h2>
<mat-dialog-content class="dialog-content">
<form [formGroup]="imageForm" (ngSubmit)="saveImage()" class="image-form">
<div class="create-image-container">
<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Crear' }} imagen</h2>
<div class="mat-dialog-content" [ngClass]="{'loading': loading}">
<mat-spinner class="loading-spinner" *ngIf="loading"></mat-spinner>
<form *ngIf="!loading" [formGroup]="imageForm" (ngSubmit)="saveImage()" class="image-form">
<mat-card *ngIf="showWarning" class="warning-card">
<mat-card-content>
<mat-icon color="warn">warning</mat-icon>
Ha marcado la casilla <strong>"Imagen Global"</strong>. Se transferirá la imagen al resto de repositorios en el
Ha marcado la casilla <strong>"Imagen Global"</strong>. Se transferirá la imagen al resto de repositorios en
el
caso de que no exista previamente.
</mat-card-content>
</mat-card>
@ -63,10 +63,10 @@
<p>Código de partición: {{ partitionInfo['partitionCode'] }}</p>
</div>
</form>
</div>
</mat-dialog-content>
<mat-dialog-actions class="action-container">
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="close()">{{ 'cancelButton' | translate }}</button>
<button class="submit-button" (click)="saveImage()">{{ 'saveButton' | translate }}</button>
</mat-dialog-actions>
<button class="submit-button" (click)="saveImage()" [disabled]="loading">{{ 'saveButton' | translate }}</button>
</mat-dialog-actions>
</div>

25
ogWebconsole/src/app/components/images/create-image/create-image.component.ts
View File

@ -17,6 +17,7 @@ export class CreateImageComponent implements OnInit {
softwareProfiles: any[] = [];
repositories: any[] = [];
loading: boolean = false;
isEditMode: boolean = false;
partitionInfo: { [key: string]: string } = {};
showWarning: boolean = false;
@ -42,30 +43,34 @@ export class CreateImageComponent implements OnInit {
ngOnInit() {
this.loading = true;
if (this.data) {
this.load()
this.isEditMode = true;
this.load();
} else {
this.loading = false;
}
this.fetchSoftwareProfiles();
this.fetchRepositories();
this.loading = false;
}
load(): void {
this.dataService.getImage(this.data).subscribe({
next: (response) => {
this.imageForm = this.fb.group({
name: [response.name, Validators.required],
description: [response.description],
comments: [response.comments],
remotePc: [response.remotePc],
isGlobal: [response.isGlobal],
softwareProfile: [response.softwareProfile ? response.softwareProfile['@id'] : null, Validators.required],
imageRepositories: [response.imageRepositories ? response.imageRepositories.map((r: any) => r.imageRepository['@id']) : [], Validators.required],
this.imageForm.patchValue({
name: response.name,
description: response.description,
comments: response.comments,
remotePc: response.remotePc,
isGlobal: response.isGlobal,
softwareProfile: response.softwareProfile ? response.softwareProfile['@id'] : null,
imageRepositories: response.imageRepositories ? response.imageRepositories.map((r: any) => r.imageRepository['@id']) : [],
});
this.imageId = response['@id'];
this.partitionInfo = response.partitionInfo;
this.loading = false;
},
error: (err) => {
console.error('Error fetching remote calendar:', err);
this.loading = false;
}
});
}