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

Updated main groups classroom UX
testing/ogGui-multibranch/pipeline/head This commit is unstable Details

pull/7/head
Manuel Aranda Rosales 2024-11-21 11:44:34 +01:00
parent bf4cf41194
commit d1195239ad
3 changed files with 105 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -214,3 +214,61 @@ mat-card {
.mat-tooltip {
white-space: pre-line;
}
.classroom-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: flex-start;
}
.classroom-item {
flex: 0 1 calc(16.66% - 16px);
max-width: calc(16.66% - 16px);
box-sizing: border-box;
}
.classroom-card {
width: 100%;
text-align: center;
}
.client-text {
font-size: 0.8rem;
color: rgba(0, 0, 0, 0.54);
}
.client-name {
font-size: 0.9rem;
text-align: center;
}
.card-og-live {
background-color: #4caf50;
color: white;
}
.card-busy {
background-color: #f44336;
color: white;
}
.card-windows {
background-color: #2196f3;
color: white;
}
.card-linux {
background-color: #9c27b0;
color: white;
}
.card-macos {
background-color: #ff9800;
color: white;
}
.card-off {
background-color: #9e9e9e;
color: white;
}

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

@ -57,7 +57,7 @@
</mat-card-content>
</mat-card>
<mat-card class="card elements-card" joyrideStep="elementsStep" text="{{ 'elementsStepText' | translate }}" matTooltipShowDelay="1000" matTooltipPosition="above">
<mat-card class="card elements-card">
<mat-card-title>
<div class="title-with-breadcrumb">
<span>{{ 'internalElementsTitle' | translate }}</span>
@ -71,7 +71,9 @@
</mat-card-title>
<mat-card-content class="element-content">
<mat-spinner *ngIf="loadingChildren"></mat-spinner>
<mat-list *ngIf="!loadingChildren">
<!-- Mostrar lista normal si no es un aula -->
<mat-list *ngIf="!loadingChildren && selectedDetail?.type !== 'classroom'">
<div *ngIf="children.length === 0" class="empty-list">
<mat-icon>info</mat-icon>
<span>{{ 'noInternalElementsMessage' | translate }}</span>
@ -88,46 +90,57 @@
<ng-container *ngSwitchCase="'clients-group'">lan</ng-container>
<ng-container *ngSwitchDefault>help_outline</ng-container>
</mat-icon>
{{child.name}}
{{ child.name }}
<div class="actions">
<mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="onEditClick($event, child.type, child.uuid)">
<mat-icon matTooltip="{{ 'editElementTooltip' | translate }}" matTooltipHideDelay="0">edit</mat-icon>
<mat-icon>edit</mat-icon>
<span>{{ 'editElementMenu' | translate }}</span>
</button>
<button *ngIf="child.type !== 'client'" mat-menu-item (click)="onShowClick($event, child)">
<mat-icon matTooltip="{{ 'viewUnitTooltip' | translate }}" matTooltipHideDelay="0">visibility</mat-icon>
<span>{{ 'viewUnitMenu' | translate }}</span>
</button>
<button *ngIf="child.type !== 'client'" mat-menu-item (click)="addOU($event, child)">
<mat-icon matTooltip="{{ 'addInternalUnitTooltip' | translate }}" matTooltipHideDelay="0">add_home_work</mat-icon>
<span>{{ 'addInternalUnitMenu' | translate }}</span>
</button>
<button *ngIf="child.type !== 'client'" mat-menu-item (click)="addClient($event, child)">
<mat-icon matTooltip="{{ 'addClientTooltip' | translate }}" matTooltipHideDelay="0">devices</mat-icon>
<span>{{ 'addClientMenu' | translate }}</span>
</button>
<button mat-menu-item (click)="onDeleteClick($event, child.uuid, child.name, child.type)">
<mat-icon matTooltip="{{ 'deleteElementTooltip' | translate }}" matTooltipHideDelay="0">delete</mat-icon>
<mat-icon>delete</mat-icon>
<span>{{ 'deleteElementMenu' | translate }}</span>
</button>
<button mat-menu-item (click)="onExecuteCommand($event, child.uuid, child.name, child.type)">
<mat-icon matTooltip="{{ 'executeCommandTooltip' | translate }}" matTooltipHideDelay="0">play_arrow</mat-icon>
<span>{{ 'executeCommandMenu' | translate }}</span>
</button>
</mat-menu>
</div>
</div>
</mat-list-item>
</mat-list>
<!-- Mostrar cuadrícula si es un aula -->
<div *ngIf="selectedDetail?.type === 'classroom'" class="classroom-grid">
<div *ngFor="let pc of selectedDetail.clients" class="classroom-item">
<mat-card class="classroom-card" [ngClass]="{
'card-og-live': pc.status === 'og-live',
'card-busy': pc.status === 'busy',
'card-windows': pc.status === 'windows' || pc.status === 'windows-session',
'card-linux': pc.status === 'linux' || pc.status === 'linux-session',
'card-macos': pc.status === 'macos',
'card-off': pc.status === 'off'
}">
<mat-card-header>
<mat-card-title class="client-name">{{ pc.name }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p class="client-text">{{ pc.ip }}</p>
<p class="client-text">{{ pc.mac }}</p>
</mat-card-content>
<mat-card-actions align="end">
<button mat-icon-button color="primary" (click)="onEditClick($event, 'client', pc.uuid)">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" (click)="onDeleteClick($event, pc.uuid, pc.name, 'client')">
<mat-icon>delete</mat-icon>
</button>
</mat-card-actions>
</mat-card>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
</mat-tab>

7
ogWebconsole/src/app/components/groups/groups.component.ts
View File

@ -141,11 +141,8 @@ export class GroupsComponent implements OnInit {
this.breadcrumb = this.breadcrumb.slice(0, index + 1);
const target = this.breadcrumbData[index];
this.breadcrumbData = this.breadcrumbData.slice(0, index + 1);
if (target.type === 'client') {
this.selectedDetail = target;
} else {
this.loadChildrenAndClients(target.id);
}
this.selectedDetail = target;
this.loadChildrenAndClients(target.id);
}
loadChildrenAndClients(id: string): void {