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

refs #1638. Refactor client details layout and improve sync status display
testing/ogGui-multibranch/pipeline/head This commit looks good Details

pull/18/head
Lucas Lara García 2025-03-07 14:41:11 +01:00
parent b0d24b4799
commit 8e10d135e1
2 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;

39
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">
<img [src]="'assets/images/ordenador_' + client.status + '.png'" alt="Client Icon"
class="client-image" />
<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>
@ -395,4 +404,4 @@
</div>
</ng-template>
</div>
</div>