Ogboot sidebar and oglive page

ogWebconsole/src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { AdminComponent } from './components/pages/admin/admin.component';
 import { UsersComponent } from './components/pages/admin/users/users/users.component';
 import { RolesComponent } from './components/pages/admin/roles/roles/roles.component';
 import { GroupsComponent } from './components/groups/groups.component';
+import { ImagesComponent } from './components/images/images/images.component';
 const routes: Routes = [
   { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
 {
@@ -20,6 +21,7 @@ const routes: Routes = [
     { path: 'users', component: UsersComponent },
     { path: 'user-groups', component: RolesComponent },
     { path: 'groups', component: GroupsComponent },
+    { path: 'images', component: ImagesComponent },
   ],
 },
 {

ogWebconsole/src/app/app.module.ts

@@ -71,6 +71,8 @@ import { ClassroomViewDialogComponent } from './components/groups/classroom-view
 import {MatPaginator} from "@angular/material/paginator";
 import { SaveFiltersDialogComponent } from './components/groups/save-filters-dialog/save-filters-dialog.component';
 import { AcctionsModalComponent } from './components/groups/acctions-modal/acctions-modal.component';
+import { ImagesComponent } from './components/images/images/images.component';
+import { CreateImageComponent } from './components/images/images/create-image/create-image/create-image.component';
 
 @NgModule({
   declarations: [
@@ -104,7 +106,9 @@ import { AcctionsModalComponent } from './components/groups/acctions-modal/accti
     LegendComponent,
     ClassroomViewDialogComponent,
     SaveFiltersDialogComponent,
-    AcctionsModalComponent
+    AcctionsModalComponent,
+    ImagesComponent,
+    CreateImageComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,

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

@@ -0,0 +1,4 @@
+.full-width {
+    width: 100%;
+  }
+  

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

@@ -0,0 +1,15 @@
+<h2 mat-dialog-title>Añadir imagen ogLive</h2>
+<mat-dialog-content>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>Nombre</mat-label>
+    <input matInput [(ngModel)]="name">
+  </mat-form-field>
+  <mat-form-field appearance="fill" class="full-width">
+    <mat-label>URL</mat-label>
+    <input matInput [(ngModel)]="downloadUrl">
+  </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button mat-button (click)="addOgLive()" cdkFocusInitial>Añadir</button>
+</mat-dialog-actions>

ogWebconsole/src/app/components/images/images/create-image/create-image/create-image.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateImageComponent } from './create-image.component';
+
+describe('CreateImageComponent', () => {
+  let component: CreateImageComponent;
+  let fixture: ComponentFixture<CreateImageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [CreateImageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,45 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-create-image',
+  templateUrl: './create-image.component.html',
+  styleUrl: './create-image.component.css'
+})
+export class CreateImageComponent {
+  name: string = '';
+  downloadUrl: string = '';
+
+  constructor(
+    private toastService: ToastrService,
+    private http: HttpClient,
+    public dialogRef: MatDialogRef<CreateImageComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  addOgLive(): void {
+    const payload = {
+      name: this.name,
+      downloadUrl: this.downloadUrl
+    };
+
+    this.http.post('http://127.0.0.1:8080/og-lives', payload)
+      .subscribe({
+        next: (response) => {
+          console.log('Success:', response);
+          this.toastService.success('Image created successfully');
+          this.dialogRef.close();
+        },
+        error: (error) => {
+          console.error('Error:', error);
+          this.toastService.error(' Error creating image');
+        }
+      });
+  }
+}

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

@@ -0,0 +1,60 @@
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100px;
+    padding: 10px;
+}
+
+.title {
+    font-size: 24px;
+}
+
+.images-button-row {
+    display: flex;
+    justify-content: flex-start;
+    margin-top: 16px;
+}
+
+button {
+    margin-left: 10px;
+    margin-bottom: 20px;
+}
+
+.divider {
+    margin: 20px 0;
+}
+
+.lists-container {
+    padding: 16px;
+}
+
+.imagesLists-container {
+    flex: 1;
+}
+
+.card.unidad-card {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.image-container {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+    border-bottom: 1px solid rgba(122, 122, 122, 0.555);
+}
+
+.image-container h4 {
+    margin: 0;
+    flex: 1;
+}
+
+.mat-icon-button {
+    margin-left: 16px;
+    align-self: center;
+}
+
+.mat-menu {
+    min-width: 160px;
+}

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

@@ -0,0 +1,32 @@
+<div class="header-container">
+  <h2 class="title" i18n="@@adminImagesTitle">Administrar imágenes</h2>
+  <div class="images-button-row">
+    <button mat-flat-button color="primary" (click)="addImage()">Añadir imagen</button>
+  </div>
+</div>
+<mat-divider class="divider"></mat-divider>
+
+<div class="lists-container">
+  <div class="imagesLists-container">
+    <mat-card class="card unidad-card">
+      <mat-card-title>Imágenes</mat-card-title>
+      <mat-card-content>
+        <div *ngIf="images.length === 0">No hay imágenes disponibles.</div>
+        <div *ngFor="let image of images">
+          <div class="image-container">
+            <h4 matLine>{{ image.name }}</h4>
+          <button mat-icon-button [matMenuTriggerFor]="menu">
+            <mat-icon>menu</mat-icon>
+          </button>
+          <mat-menu #menu="matMenu">
+            <button mat-menu-item (click)="showInfo(image)">Info</button>
+            <button mat-menu-item (click)="toggleStatus(image)">Montar/Desmontar</button>
+            <button mat-menu-item (click)="deleteImage(image.uuid)">Eliminar</button>
+            <button mat-menu-item (click)="editImage(image)">Editar</button>
+          </mat-menu>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  </div>
+</div>

ogWebconsole/src/app/components/images/images/images.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ImagesComponent } from './images.component';
+
+describe('ImagesComponent', () => {
+  let component: ImagesComponent;
+  let fixture: ComponentFixture<ImagesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ImagesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ImagesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,74 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { HttpClient } from '@angular/common/http';
+import { CreateImageComponent } from './create-image/create-image/create-image.component';
+
+@Component({
+  selector: 'app-images',
+  templateUrl: './images.component.html',
+  styleUrls: ['./images.component.css']
+})
+export class ImagesComponent implements OnInit {
+  images: { downloadUrl: string; name: string; uuid: string }[] = [];
+
+  private apiUrl = 'http://127.0.0.1:8080/og-lives';
+
+  constructor(public dialog: MatDialog, private http: HttpClient) {}
+
+  ngOnInit(): void {
+    this.loadImages();
+  }
+
+  loadImages(): void {
+    this.http.get<any>(`${this.apiUrl}?page=1&itemsPerPage=30`).subscribe({
+      next: (response) => {
+        this.images = response['hydra:member'].map((item: any) => ({
+          downloadUrl: item.downloadUrl,
+          name: item.name,
+          uuid: item.uuid
+        }));
+      },
+      error: (error) => {
+        console.error('Error al cargar las imágenes:', error);
+      }
+    });
+  }
+
+  addImage(): void {
+    const dialogRef = this.dialog.open(CreateImageComponent, {
+      width: '400px'
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+      this.loadImages(); // Opcional: recargar imágenes después de añadir una nueva
+    });
+  }
+
+  showInfo(image: any): void {
+    // Implementar lógica para mostrar información
+    console.log('Mostrar info:', image);
+  }
+
+  toggleStatus(image: any): void {
+    // Implementar lógica para montar/desmontar
+    console.log('Montar/Desmontar:', image);
+  }
+
+  deleteImage(uuid: string): void {
+    this.http.delete(`${this.apiUrl}/${uuid}`).subscribe({
+      next: () => {
+        console.log('Imagen eliminada');
+        this.loadImages(); // Recargar imágenes después de eliminar
+      },
+      error: (error) => {
+        console.error('Error al eliminar la imagen:', error);
+      }
+    });
+  }
+
+  editImage(image: any): void {
+    // Implementar lógica para editar imagen
+    console.log('Editar:', image);
+  }
+}

ogWebconsole/src/app/components/layout/sidebar/sidebar.component.css

@@ -41,4 +41,17 @@ mat-icon {
   mat-nav-list {
     width: 0px;
   }
-}
+}
+
+.mat-nav-list .mat-list-item .entry {
+  display: flex;
+  align-items: center;
+}
+
+.mat-nav-list .mat-list-item .entry mat-icon {
+  margin-right: 8px;
+}
+
+.mat-nav-list .mat-list-item .sub-menu-item {
+  padding-left: 32px;
+}

ogWebconsole/src/app/components/layout/sidebar/sidebar.component.html

@@ -13,44 +13,68 @@
       <span i18n="@@groups">Grupos</span>
     </span>
   </mat-list-item>
+
   <mat-list-item>
     <span class="entry">
       <mat-icon class="icon">chevron_right</mat-icon>
       <span i18n="@@actions">Acciones</span>
     </span>
   </mat-list-item>
-  <mat-list-item>
-     <span class="entry">
+
+  <!-- Main List Item for Images -->
+  <mat-list-item (click)="toggleSubList()">
+    <span class="entry">
       <mat-icon class="icon">desktop_windows</mat-icon>
-      <span i18n="@@images">Imágenes</span>
+      <span i18n="@@images">ogBoot</span>
     </span>
   </mat-list-item>
+
+  <!-- Submenu items for Images -->
+  <mat-nav-list *ngIf="showSubList" style="padding-left: 20px;">
+    <mat-list-item routerLink="/images">
+      <span class="entry">
+        <mat-icon class="icon">chevron_right</mat-icon>
+        <span i18n="@@gallery">ogLive</span>
+      </span>
+    </mat-list-item>
+    <mat-list-item>
+      <span class="entry">
+        <mat-icon class="icon">chevron_right</mat-icon>
+        <span i18n="@@upload">PXE</span>
+      </span>
+    </mat-list-item>
+  </mat-nav-list>
+
   <mat-list-item>
-     <span class="entry">
+    <span class="entry">
       <mat-icon class="icon">settings_input_component</mat-icon>
       <span i18n="@@components">Componentes</span>
     </span>
   </mat-list-item>
+
   <mat-list-item>
-     <span class="entry">
+    <span class="entry">
       <mat-icon class="icon">warehouse</mat-icon>
       <span i18n="@@repositories">Repositorios</span>
     </span>
   </mat-list-item>
+
   <mat-list-item>
-     <span class="entry">
+    <span class="entry">
       <mat-icon class="icon">list</mat-icon>
       <span i18n="@@menus">Menús</span>
     </span>
   </mat-list-item>
+
   <mat-list-item>
-     <span class="entry">
+    <span class="entry">
       <mat-icon class="icon">search</mat-icon>
       <span i18n="@@search">Buscar</span>
     </span>
   </mat-list-item>
+
   <mat-list-item>
-     <span class="entry">
+    <span class="entry">
       <mat-icon class="icon">calendar_month</mat-icon>
       <span i18n="@@calendars">Calendarios</span>
     </span>

ogWebconsole/src/app/components/layout/sidebar/sidebar.component.ts

@@ -14,6 +14,11 @@ export class SidebarComponent {
   isSuperAdmin: boolean = false;
   username: string = "";
   decodedToken: any = "";
+  showSubList: boolean = false;
+
+  toggleSubList() {
+    this.showSubList = !this.showSubList;
+  }
   constructor(public dialog: MatDialog) {}
 
   ngOnInit(): void {