refs #729. RemoteCalendar and RemoteCalendarRule. First commit, 90%

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

@@ -15,8 +15,14 @@ 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';
+<<<<<<< HEAD
 import { CommandsComponent } from './components/commands/commands.component';
 import { CalendarComponent } from "./components/calendar/calendar.component";
+=======
+import { CommandsComponent } from './components/commands/main-commands/commands.component';
+import { CommandsGroupsComponent } from './components/commands/commands-groups/commands-groups.component';
+import { CommandsTaskComponent } from './components/commands/commands-task/commands-task.component';
+>>>>>>> 30cd43ff0fcccafbf6d2b7534dd31ba0b3c2c257
 const routes: Routes = [
   { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
 {

ogWebconsole/src/app/app.module.ts

@@ -83,15 +83,16 @@ 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';
-import { CommandDetailComponent } from './components/commands/command-detail/command-detail/command-detail.component';
-import { CreateCommandComponent } from './components/commands/create-command/create-command.component';
+import { CommandsComponent } from './components/commands/main-commands/commands.component';
+import { CommandDetailComponent } from './components/commands/main-commands/detail-command/command-detail.component';
+import { CreateCommandComponent } from './components/commands/main-commands/create-command/create-command.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
 import { CalendarComponent } from './components/calendar/calendar.component';
 import { CreateCalendarComponent } from './components/calendar/create-calendar/create-calendar.component';
 import {MatRadioButton, MatRadioGroup} from "@angular/material/radio";
 import { CreateCalendarRuleComponent } from './components/calendar/create-calendar-rule/create-calendar-rule.component';
+
 @NgModule({
   declarations: [
     AppComponent,

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

@@ -0,0 +1 @@
+<p>commands-groups works!</p>

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-commands-groups',
+  templateUrl: './commands-groups.component.html',
+  styleUrl: './commands-groups.component.css'
+})
+export class CommandsGroupsComponent {
+
+}

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

@@ -0,0 +1 @@
+<p>commands-task works!</p>

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-commands-task',
+  templateUrl: './commands-task.component.html',
+  styleUrl: './commands-task.component.css'
+})
+export class CommandsTaskComponent {
+
+}

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

@@ -1,25 +0,0 @@
-<div class="header-container">
-  <h2 class="title" i18n="@@subnetsTitle">Administrar comandos</h2>
-  <div class="subnets-button-row">
-    <button mat-flat-button color="primary" (click)="openCreateCommandModal()">Añadir Comando</button>
-  </div>
-</div>
-
-<table mat-table [dataSource]="commands" class="mat-elevation-z8">
-  <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef> Nombre </th>
-    <td mat-cell *matCellDef="let command"> {{ command.name }} </td>
-  </ng-container>
-
-  <ng-container matColumnDef="createdBy">
-    <th mat-header-cell *matHeaderCellDef> Creado por </th>
-    <td mat-cell *matCellDef="let command"> {{ command.createdBy }} </td>
-  </ng-container>
-
-  <ng-container matColumnDef="createdAt">
-    <th mat-header-cell *matHeaderCellDef> Fecha de creación </th>
-    <td mat-cell *matCellDef="let command"> {{ command.createdAt | date:'short' }} </td>
-  </ng-container>
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="openCommandDetailModal(row)"></tr>
-</table>

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

@@ -1,56 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { MatDialog } from '@angular/material/dialog';
-import { CommandDetailComponent } from './command-detail/command-detail/command-detail.component';
-import { CreateCommandComponent } from './create-command/create-command.component';
-
-@Component({
-  selector: 'app-commands',
-  templateUrl: './commands.component.html',
-  styleUrls: ['./commands.component.css']
-})
-export class CommandsComponent implements OnInit {
-  commands: any[] = [];
-  displayedColumns: string[] = ['name', 'createdBy', 'createdAt'];
-  private apiUrl = 'http://127.0.0.1:8001/commands?page=1&itemsPerPage=30';
-
-  constructor(private http: HttpClient, private dialog: MatDialog) { }
-
-  ngOnInit(): void {
-    this.loadCommands();
-  }
-
-  loadCommands(): void {
-    this.http.get<any>(this.apiUrl).subscribe(
-      (data) => {
-        this.commands = data['hydra:member'];
-      },
-      (error) => {
-        console.error('Error fetching commands', error);
-      }
-    );
-  }
-
-  openCommandDetailModal(command: any): void {
-    const dialogRef = this.dialog.open(CommandDetailComponent, {
-      width: '800px',
-      data: command
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.loadCommands();
-    });
-  }
-
-  openCreateCommandModal(): void {
-    const dialogRef = this.dialog.open(CreateCommandComponent, {
-      width: '600px'
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.loadCommands();
-    });
-  }
-
-  
-}

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

@@ -39,6 +39,9 @@ pre {
   margin-top: 20px;
 }
 tr:hover {
-  background-color: rgba(0, 0, 0, 0.1); 
-  cursor: pointer; 
+  background-color: rgba(219, 219, 219, 0.219); 
+}
+
+.detailBtn{
+  cursor: pointer;
 }

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

@@ -0,0 +1,53 @@
+<div class="header-container">
+  <h2 class="title" i18n="@@subnetsTitle">Administrar comandos</h2>
+  <div class="subnets-button-row">
+    <button mat-flat-button color="primary" (click)="openCreateCommandModal()">Añadir Comando</button>
+  </div>
+</div>
+
+<table mat-table [dataSource]="commands" class="mat-elevation-z8">
+  <!-- Nombre columna -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Nombre </th>
+    <td mat-cell *matCellDef="let command"> {{ command.name }} </td>
+  </ng-container>
+
+  <!-- Creado por columna -->
+  <ng-container matColumnDef="createdBy">
+    <th mat-header-cell *matHeaderCellDef> Creado por </th>
+    <td mat-cell *matCellDef="let command"> {{ command.createdBy }} </td>
+  </ng-container>
+
+  <!-- Fecha de creación columna -->
+  <ng-container matColumnDef="createdAt">
+    <th mat-header-cell *matHeaderCellDef> Fecha de creación </th>
+    <td mat-cell *matCellDef="let command"> {{ command.createdAt | date:'short' }} </td>
+  </ng-container>
+
+  <!-- Columna para el menú de acciones -->
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef> Acciones </th>
+    <td mat-cell *matCellDef="let command">
+      <button mat-icon-button [matMenuTriggerFor]="menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="viewDetails(command)">
+          <mat-icon>info</mat-icon>
+          <span>Detalles</span>
+        </button>
+        <button mat-menu-item (click)="editCommand(command)">
+          <mat-icon>edit</mat-icon>
+          <span>Editar</span>
+        </button>
+        <button mat-menu-item (click)="deleteCommand(command)">
+          <mat-icon>delete</mat-icon>
+          <span>Eliminar</span>
+        </button>
+      </mat-menu>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

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

@@ -0,0 +1,99 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { MatDialog } from '@angular/material/dialog';
+import { CommandDetailComponent } from './detail-command/command-detail.component';
+import { CreateCommandComponent } from './create-command/create-command.component';
+import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-commands',
+  templateUrl: './commands.component.html',
+  styleUrls: ['./commands.component.css']
+})
+export class CommandsComponent implements OnInit {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
+  commands: any[] = [];
+  displayedColumns: string[] = ['name', 'createdBy', 'createdAt', 'actions']; 
+  private apiUrl = 'http://127.0.0.1:8001/commands?page=1&itemsPerPage=30';
+
+  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) { }
+
+  ngOnInit(): void {
+    this.loadCommands();
+  }
+
+  loadCommands(): void {
+    this.http.get<any>(this.apiUrl).subscribe(
+      (data) => {
+        this.commands = data['hydra:member'];
+      },
+      (error) => {
+        console.error('Error fetching commands', error);
+      }
+    );
+  }
+
+  openCreateCommandModal(): void {
+    const dialogRef = this.dialog.open(CreateCommandComponent, {
+      width: '600px'
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.loadCommands();
+    });
+  }
+
+  editCommand(command: any): void {
+    const dialogRef = this.dialog.open(CreateCommandComponent, {
+      width: '600px',
+      data: { command: command } 
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        console.log('Comando editado:', result);
+        this.loadCommands(); 
+      }
+    });
+  }
+
+  viewDetails(command: any): void {
+    const dialogRef = this.dialog.open(CommandDetailComponent, {
+      width: '800px',
+      data: command 
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.loadCommands(); 
+    });
+  }
+
+  deleteCommand(command: any): void { 
+    const dialogRef = this.dialog.open(DeleteModalComponent, 
+      {
+        width: '300px', 
+        data: { name: command.name } 
+      });
+  
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          const apiUrl = `${this.baseUrl}/commands/${command.uuid}`;
+    
+          this.http.delete(apiUrl).subscribe({
+            next: () => {
+              console.log('Role deleted successfully');
+              this.loadCommands();
+              this.toastService.success('Role deleted successfully'); 
+            },
+            error: (error) => {
+              console.error('Error deleting role:', error);
+            }
+          });
+        } else {
+          console.log('Role deletion cancelled');
+        }
+      });
+  }
+
+}

ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.css

@@ -4,13 +4,16 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   border-radius: 10px;
   width: calc(100% - 40px);
+  max-width: 800px; 
   height: calc(100% - 40px);
-  margin: 20px;
+  max-height: 90vh; 
+  margin: 20px auto; 
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   font-family: 'Roboto', sans-serif;
   box-sizing: border-box;
+  overflow: hidden; 
 }
 
 .modal-title {
@@ -25,6 +28,7 @@
   flex-grow: 1;
   overflow-y: auto;
   padding: 10px;
+  max-height: calc(100vh - 200px); 
 }
 
 .modal-content p {
@@ -39,8 +43,11 @@
   color: #ffffff;
   padding: 15px;
   border-radius: 8px;
-  font-size: 0.9em;
+  font-size: 1.2em;
   overflow: auto;
+  max-height: 300px; 
+  white-space: pre-wrap; 
+  word-wrap: break-word;
 }
 
 .button-row {

ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.ts

@@ -1,8 +1,9 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { CreateCommandComponent } from '../../create-command/create-command.component';
+import { CreateCommandComponent } from '../create-command/create-command.component';
 import { HttpClient } from '@angular/common/http';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-command-detail',
@@ -10,6 +11,7 @@ import { HttpClient } from '@angular/common/http';
   styleUrls: ['./command-detail.component.css']
 })
 export class CommandDetailComponent implements OnInit {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
   form!: FormGroup;
   clients: any[] = [];
   showClientSelect = false;
@@ -21,8 +23,9 @@ export class CommandDetailComponent implements OnInit {
     private http: HttpClient,
     public dialogRef: MatDialogRef<CommandDetailComponent>,
     private dialog: MatDialog,
+    private toastService: ToastrService,
     @Inject(MAT_DIALOG_DATA) public data: any
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.form = this.fb.group({
@@ -42,7 +45,24 @@ export class CommandDetailComponent implements OnInit {
       this.showClientSelect = true;
     } else {
       if (this.form.get('selectedClients')?.value.length > 0) {
-        console.log('Ejecutar comando con los siguientes clientes:', this.form.value.selectedClients);
+
+        const payload = {
+          clients: this.form.value.selectedClients.map((uuid: any) => `/clients/${uuid}`)
+        };
+
+        const apiUrl = `${this.baseUrl}/commands/${this.data.command.uuid}/execute`;
+
+        this.http.post(apiUrl, payload).subscribe({
+          next: () => {
+            console.log('Command executed successfully');
+            this.dialogRef.close();
+            this.toastService.success('Command executed successfully');
+          },
+          error: (error) => {
+            console.error('Error executing command:', error);
+          }
+        });
+
         this.dialogRef.close();
       } else {
         this.form.get('selectedClients')?.markAsTouched();

ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts

@@ -4,13 +4,14 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dial
 import { ToastrService } from 'ngx-toastr';
 import { CreatePxeBootFileComponent } from '../../ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component';
 import { HttpClient } from '@angular/common/http';
-import { CommandDetailComponent } from '../../commands/command-detail/command-detail/command-detail.component';
+import { CommandDetailComponent } from '../../commands/main-commands/detail-command/command-detail.component';
 @Component({
   selector: 'app-acctions-modal',
   templateUrl: './acctions-modal.component.html',
   styleUrls: ['./acctions-modal.component.css']
 })
 export class AcctionsModalComponent {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
   selectedElements: any;
   commands: any[] = [];
   displayedColumns: string[] = ['name', 'createdBy', 'createdAt'];
@@ -52,19 +53,22 @@ export class AcctionsModalComponent {
   }
 
 onCommandClick(command: any): void {
-  const dialogRef = this.dialog.open(CommandDetailComponent, {
-    width: '600px', 
-    data: {
-      command: command, 
-      importedClients: this.selectedElements 
-    }
-  });
+const payload = {
+  clients: this.selectedElements.map((uuid: any) => `/clients/${uuid}`)
+};
 
-  dialogRef.afterClosed().subscribe(result => {
-    if (result) {
-      console.log('Modal cerrado. Resultado:', result);
-    }
-  });
+const apiUrl = `${this.baseUrl}/commands/${command.uuid}/execute`;
+
+this.http.post(apiUrl, payload).subscribe({
+  next: () => {
+    console.log('Command executed successfully');
+    this.loadCommands();
+    this.toastService.success('Command executed successfully');
+  },
+  error: (error) => {
+    console.error('Error executing command:', error);
+  }
+});
 }
 
   chunkArray(arr: any[], chunkSize: number): any[] {

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

@@ -378,7 +378,7 @@ export class GroupsComponent implements OnInit {
 
   onCheckboxChange(event: any, name: string, uuid: string) {
     if (event.checked) {
-      this.selectedElements.push({ name, uuid });
+      this.selectedElements.push(uuid);
     } else {
       const index = this.selectedElements.indexOf(name);
       if (index > -1) {
@@ -387,14 +387,13 @@ export class GroupsComponent implements OnInit {
     }
 
     this.isAllSelected = this.selectedElements.length === this.filteredResults.length;
-    console.log(this.selectedElements);
   }
 
   toggleSelectAll() {
     this.isAllSelected = !this.isAllSelected;
 
     if (this.isAllSelected) {
-      this.selectedElements = this.filteredResults.map(result => result.name);
+      this.selectedElements = this.filteredResults.map(result => result.uuid);
     } else {
       this.selectedElements = [];
     }

ogWebconsole/src/app/layout/main-layout/main-layout.component.css

@@ -3,12 +3,16 @@
 }
 
 .container {
-  width: auto;
-  height: calc(100vh - 60px);
+  width: 100vw;
+  height: calc(100vh - 10vh); 
+}
+
+.sidebar {
+  width: 250px; 
 }
 
 .content {
   margin: 10px;
   padding: 10px;
-}
-
+  box-sizing: border-box; 
+}

ogWebconsole/src/app/layout/main-layout/main-layout.component.html

@@ -1,11 +1,11 @@
 <app-header class="header" (toggleSidebar)="toggleSidebar()"></app-header>
 
-<mat-drawer-container class="container" >
+<mat-drawer-container class="container" autosize>
   <mat-drawer class="sidebar" mode="side" opened>
     <app-sidebar [isVisible]="isSidebarVisible"></app-sidebar>
   </mat-drawer>
 
   <mat-drawer-content class="content">
-    <router-outlet />
+    <router-outlet></router-outlet>
   </mat-drawer-content>
 </mat-drawer-container>

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

@@ -1,5 +1,7 @@
 mat-nav-list {
-  width: 250px;
+  width: auto; 
+  margin-right: 3px; 
+  overflow-x: hidden; 
 }
 
 mat-list-item {
@@ -8,22 +10,22 @@ mat-list-item {
   align-items: center;
 }
 
-.entry{
+.entry {
   display: flex;
   align-items: center;
   gap: 1rem;
-  padding:0.75rem;
+  padding: 0.75rem;
 }
 
 mat-icon {
   margin-right: 8px;
 }
 
-.user-logged{
+.user-logged {
   align-items: center;
   height: 70px;
   gap: 2rem;
-  padding:1rem;
+  padding: 1rem;
   font-size: medium;
 }
 
@@ -39,7 +41,7 @@ mat-icon {
 
 @media (max-width: 680px) {
   mat-nav-list {
-    width: 0px;
+    width: auto;
   }
 }
 

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

@@ -15,12 +15,36 @@
   </mat-list-item>
 
   <mat-list-item>
-    <span class="entry" routerLink="/commands">
-      <mat-icon class="icon">chevron_right</mat-icon>
-      <span i18n="@@actions">Comandos</span>
+    <span class="entry" (click)="toggleCommandSub()">
+      <mat-icon class="icon">playlist_play </mat-icon>
+      <span i18n="@@actions">Acciones</span>
     </span>
   </mat-list-item>
 
+  <!-- Submenu items for commands -->
+  <mat-nav-list *ngIf="showCommandSub" style="padding-left: 20px;">
+    <mat-list-item routerLink="/commands">
+      <span class="entry">
+        <mat-icon class="icon">chevron_right</mat-icon>
+        <span i18n="@@gallery">Comandos</span>
+      </span>
+    </mat-list-item>
+    <mat-list-item routerLink="/commands-groups">
+      <span class="entry">
+        <mat-icon class="icon">splitscreen_add </mat-icon>
+        <span i18n="@@gallery">Grupo de comandos</span>
+      </span>
+    </mat-list-item>
+    <mat-list-item routerLink="/commands-task">
+      <span class="entry">
+        <mat-icon class="icon">task</mat-icon>
+        <span i18n="@@gallery">Tareas</span>
+      </span>
+    </mat-list-item>
+  </mat-nav-list>
+  <!-- End commands sub -->
+
+
   <mat-list-item (click)="toggleOgBootSub()">
     <span class="entry">
       <mat-icon class="icon">desktop_windows</mat-icon>

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

@@ -13,6 +13,7 @@ export class SidebarComponent {
   decodedToken: any = "";
   showOgBootSub: boolean = false;
   showOgDhcpSub: boolean = false;
+  showCommandSub: boolean = false;
 
   toggleOgBootSub() {
     this.showOgBootSub = !this.showOgBootSub;
@@ -20,6 +21,9 @@ export class SidebarComponent {
   toggleOgDhcpSub() {
     this.showOgDhcpSub = !this.showOgDhcpSub;
   }
+  toggleCommandSub() {
+    this.showCommandSub = !this.showCommandSub;
+  }
 
 
   constructor(public dialog: MatDialog) {}