Update API URL and add commands component

ogWebconsole/.env

@@ -1 +1,2 @@
-NG_APP_BASE_API_URL=http://127.0.0.1:8090
+#NG_APP_BASE_API_URL=http://127.0.0.1:8090
+NG_APP_BASE_API_URL=http://127.0.0.1:8001 

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

@@ -15,6 +15,7 @@ import { PxeBootFilesComponent } from './components/ogboot/pxe-boot-files/pxe-bo
 import {OgbootStatusComponent} from "./components/ogboot/ogboot-status/ogboot-status.component";
 import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
 import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
+import { CommandsComponent } from './components/commands/commands.component';
 const routes: Routes = [
   { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
 {
@@ -31,7 +32,8 @@ const routes: Routes = [
     { path: 'pxe-boot-file', component: PxeBootFilesComponent },
     { path: 'ogboot-status', component: OgbootStatusComponent },
     { path: 'dhcp', component: OgdhcpComponent },
-    { path: 'dhcp-subnets', component: OgDhcpSubnetsComponent }
+    { path: 'dhcp-subnets', component: OgDhcpSubnetsComponent },
+    { path: 'commands', component: CommandsComponent },
   ],
 },
 {

ogWebconsole/src/app/app.module.ts

@@ -83,6 +83,7 @@ import { OgdhcpComponent } from './components/ogdhcp/ogdhcp.component';
 import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component';
 import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet.component';
 import { AddClientsToSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component';
+import { CommandsComponent } from './components/commands/commands.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -124,7 +125,8 @@ import { AddClientsToSubnetComponent } from './components/ogdhcp/og-dhcp-subnets
     OgdhcpComponent,
     OgDhcpSubnetsComponent,
     CreateSubnetComponent,
-    AddClientsToSubnetComponent
+    AddClientsToSubnetComponent,
+    CommandsComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,

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

@@ -0,0 +1,36 @@
+.commands-list {
+  margin-bottom: 20px;
+}
+
+.command-item {
+  cursor: pointer;
+  margin-bottom: 10px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.command-item:hover {
+  background-color: #e9e9e9;
+}
+
+.command-details {
+  padding: 20px;
+  border: 1px solid #ddd;
+  background-color: #f4f4f4;
+  border-radius: 4px;
+}
+
+.script-display {
+  margin-top: 20px;
+  background-color: #000;
+  color: #fff;
+  padding: 10px;
+  border-radius: 4px;
+}
+
+pre {
+  margin: 0;
+  font-family: 'Courier New', Courier, monospace;
+}

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

@@ -0,0 +1,22 @@
+<div class="commands-list">
+    <h2>Lista de Comandos</h2>
+    <ul>
+      <li *ngFor="let command of commands" (click)="selectCommand(command)" class="command-item">
+        <strong>{{ command.name }}</strong> - Creado por: {{ command.createdBy }} el {{ command.createdAt | date:'short' }}
+      </li>
+    </ul>
+  </div>
+  
+  <div *ngIf="selectedCommand" class="command-details">
+    <h3>Detalles del Comando</h3>
+    <p><strong>Nombre:</strong> {{ selectedCommand.name }}</p>
+    <p><strong>Comentarios:</strong> {{ selectedCommand.comments }}</p>
+    <p><strong>Creado por:</strong> {{ selectedCommand.createdBy }}</p>
+    <p><strong>Fecha de Creación:</strong> {{ selectedCommand.createdAt | date:'medium' }}</p>
+  
+    <div class="script-display">
+      <h4>Script:</h4>
+      <pre>{{ selectedCommand.script }}</pre>
+    </div>
+  </div>
+  

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

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

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

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';  // Importar HttpClient
+
+@Component({
+  selector: 'app-commands',
+  templateUrl: './commands.component.html',
+  styleUrls: ['./commands.component.css']
+})
+export class CommandsComponent implements OnInit {
+
+  commands: any[] = [];
+  selectedCommand: any = null;
+
+  // URL de la API
+  private apiUrl = 'http://127.0.0.1:8001/commands?page=1&itemsPerPage=30';
+
+  constructor(private http: HttpClient) { }
+
+  ngOnInit(): void {
+    this.loadCommands();  // Llamada a la API cuando el componente se inicializa
+  }
+
+  loadCommands(): void {
+    this.http.get<any>(this.apiUrl).subscribe(
+      (data) => {
+        this.commands = data['hydra:member'];  // Almacena los comandos en la variable
+      },
+      (error) => {
+        console.error('Error fetching commands', error);
+      }
+    );
+  }
+
+  selectCommand(command: any): void {
+    this.selectedCommand = command;  // Almacena el comando seleccionado
+  }
+}

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

@@ -15,9 +15,9 @@
   </mat-list-item>
 
   <mat-list-item>
-    <span class="entry">
+    <span class="entry" routerLink="/commands">
       <mat-icon class="icon">chevron_right</mat-icon>
-      <span i18n="@@actions">Acciones</span>
+      <span i18n="@@actions">Comandos</span>
     </span>
   </mat-list-item>