Groups improvements

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

@@ -93,7 +93,7 @@
   </mat-form-field>
 </div>
 
-<div *ngIf="isMethod('torrent')" class="input-group">
+<div *ngIf="isMethod('p2p')" class="input-group">
   <mat-form-field appearance="fill" class="input-field">
     <mat-label i18n="@@p2pModeLabel">Modo P2P</mat-label>
     <mat-select [(ngModel)]="p2pMode" name="p2pMode">

ogWebconsole/src/app/components/groups/groups.component.css

@@ -1,9 +1,3 @@
-.card-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 20px;
-  padding: 20px;
-}
 
 .header-container {
   display: flex;
@@ -432,7 +426,7 @@ mat-tree mat-tree-node.disabled:hover {
   flex-direction: column;
   align-items: center;
   text-align: center;
-  padding: 15px;
+  padding: 2px;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
@@ -447,10 +441,6 @@ mat-tree mat-tree-node.disabled:hover {
   margin-bottom: 15px;
 }
 
-.client-details {
-  margin-top: 10px;
-}
-
 .client-name {
   display: block;
   font-size: 1.2em;
@@ -471,8 +461,8 @@ button[mat-raised-button] {
 
 .clients-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 8px; /* Espaciado reducido entre cards */
 }
 
 .clients-list {
@@ -520,12 +510,6 @@ button[mat-raised-button] {
   border-radius: 5px;
 }
 
-.client-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .client-image {
   width: 50px;
   height: 50px;
@@ -584,3 +568,28 @@ button[mat-raised-button] {
   align-items: center;
 }
 
+.client-item {
+  position: relative;
+}
+
+.client-card {
+  background: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  position: relative;
+  padding: 8px;
+  text-align: center;
+}
+
+.client-image {
+  max-width: 100%;
+  height: auto;
+  margin-top: 10px;
+  margin-bottom: 8px;
+}
+
+.client-details {
+  margin-top: 4px;
+}
+

ogWebconsole/src/app/components/groups/groups.component.html

@@ -201,22 +201,17 @@
       <div class="clients-grid" *ngIf="currentView === 'card'">
         <div *ngFor="let client of selectedClients.data" class="client-item">
           <div class="client-card">
-            <img src="assets/images/client.png" alt="Client Icon" class="client-image" />
+            <img
+              [src]="'assets/images/ordenador_' + client.status + '.png'"
+              alt="Client Icon"
+              class="client-image" />
+
             <div class="client-details">
               <span class="client-name">{{ client.name }}</span>
               <span class="client-ip">{{ client.ip }}</span>
-              <div class="flex">
-                <mat-chip [ngClass]="{
-                  'chip-og-live': client.status === 'og-live',
-                  'chip-busy': client.status === 'busy',
-                  'chip-windows': client.status === 'windows' || client.status === 'windows-session',
-                  'chip-linux': client.status === 'linux' || client.status === 'linux-session',
-                  'chip-macos': client.status === 'macos',
-                  'chip-off': client.status === 'off'
-                }">
-                  {{ client.status || 'off' }}
+              <span class="client-ip">{{ client.mac }}</span>
 
-                </mat-chip>
+              <div class="action-icons">
                 <button
                   *ngIf="(!syncStatus || syncingClientId !== client.uuid)"
                   mat-icon-button color="primary"
@@ -229,28 +224,32 @@
                   mat-icon-button color="primary">
                   <mat-spinner diameter="24"></mat-spinner>
                 </button>
-              </div>
-              <button mat-raised-button color="primary" [matMenuTriggerFor]="clientMenu">Acciones</button>
-              <mat-menu #clientMenu="matMenu">
-                <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
-                  <mat-icon>edit</mat-icon>
-                    <span>{{ 'edit' | translate }}</span>
-                </button>
-                <button mat-menu-item (click)="onShowClientDetail($event, client)">
+
+                <button mat-icon-button color="primary" (click)="onShowClientDetail($event, client)">
                   <mat-icon>visibility</mat-icon>
-                    <span>{{ 'viewDetails' | translate }}</span>
                 </button>
-                <button mat-menu-item (click)="onDeleteClick($event, client, selectedNode)">
-                  <mat-icon>delete</mat-icon>
-                    <span>{{ 'delete' | translate }}</span>
+                <button mat-icon-button color="primary">
+                  <mat-icon>more_vert</mat-icon>
                 </button>
-              </mat-menu>
               </div>
             </div>
           </div>
         </div>
+      </div>
+
       <div class="clients-table" *ngIf="currentView === 'list'">
         <table mat-table matSort [dataSource]="selectedClients" class="mat-elevation-z8">
+          <ng-container matColumnDef="status">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'status' | translate }} </th>
+            <td mat-cell *matCellDef="let client">
+              <img
+                [src]="'assets/images/ordenador_' + client.status + '.png'"
+                alt="Client Icon"
+                class="client-image" />
+
+            </td>
+          </ng-container>
+
           <ng-container matColumnDef="sync">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'sync' | translate }} </th>
             <td mat-cell *matCellDef="let client">
@@ -282,22 +281,6 @@
             <th mat-header-cell *matHeaderCellDef mat-sort-header> OG Live </th>
             <td mat-cell *matCellDef="let client"> {{ (client.ogLive?.filename || '').slice(0, 15) }}{{ (client.ogLive?.filename?.length > 15) ? '...' : '' }} </td>
           </ng-container>
-          <ng-container matColumnDef="status">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'status' | translate }} </th>
-            <td mat-cell *matCellDef="let client">
-              <mat-chip [ngClass]="{
-                'chip-og-live': client.status === 'og-live',
-                'chip-busy': client.status === 'busy',
-                'chip-windows': client.status === 'windows' || client.status === 'windows-session',
-                'chip-linux': client.status === 'linux' || client.status === 'linux-session',
-                'chip-macos': client.status === 'macos',
-                'chip-off': client.status === 'off'
-              }">
-                {{ client.status || 'off' }}
-
-              </mat-chip>
-            </td>
-          </ng-container>
 
           <ng-container matColumnDef="maintenace">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'maintenance' | translate }} </th>
@@ -323,9 +306,6 @@
               <button mat-icon-button [matMenuTriggerFor]="clientMenu">
                 <mat-icon>more_vert</mat-icon>
               </button>
-
-
-
               <mat-menu #clientMenu="matMenu">
 
                 <mat-menu restoreFocus=false #commandMenu="matMenu" xPosition="before">

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -63,7 +63,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
   syncingClientId: string | null = null;
   private originalTreeData: TreeNode[] = [];
 
-  displayedColumns: string[] = ['sync', 'name', 'oglive', 'status', 'subnet', 'pxeTemplate', 'parentName', 'actions'];
+  displayedColumns: string[] = ['status','sync', 'name', 'oglive', 'subnet', 'pxeTemplate', 'parentName', 'actions'];
 
   private _sort!: MatSort;
   private _paginator!: MatPaginator;

ogWebconsole/src/app/components/groups/shared/organizational-units/create-organizational-unit/create-organizational-unit.component.ts

@@ -29,10 +29,9 @@ export class CreateOrganizationalUnitComponent implements OnInit {
     { name: 'Peer', value: 'p2p-mode-peer' },
     { name: 'Seeder', value: 'p2p-mode-seeder' },
   ];
-  multicastModeOptions: { name: string, value: string }[] = [
-    { name: 'Modo 1', value: 'mode1' },
-    { name: 'Modo 2', value: 'mode2' },
-    { name: 'Modo 3', value: 'mode3' },
+  protected multicastModeOptions = [
+    {"name": 'Half duplex', "value": "half"},
+    {"name": 'Full duplex', "value": "full"},
   ];
   parentUnits: any[] = [];
   hardwareProfiles: any[] = [];

ogWebconsole/src/app/components/groups/shared/organizational-units/edit-organizational-unit/edit-organizational-unit.component.ts

@@ -31,8 +31,8 @@ export class EditOrganizationalUnitComponent implements OnInit {
     {"name": 'Seeder', "value": "p2p-mode-seeder"},
   ];
   protected multicastModeOptions = [
-    {"name": 'Half duplex', "value": "half-duplex"},
-    {"name": 'Full duplex', "value": "full-duplex"},
+    {"name": 'Half duplex', "value": "half"},
+    {"name": 'Full duplex', "value": "full"},
   ];
   @Output() unitAdded = new EventEmitter();
   calendars: any;