From 0d403d8b8e632f7cf061e2ebfd89d6cba8f9b178 Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Thu, 7 Nov 2024 11:11:32 +0100
Subject: [PATCH] refs #1077 Add model teplates for reference

---
 .../advanced-search.component.css             | 59 +++++++++----------
 .../advanced-search.component.html            |  4 +-
 .../create-pxe-template.component.css         | 19 ++++--
 .../create-pxe-template.component.html        | 23 +++++---
 .../create-pxe-template.component.ts          | 58 ++++++++++++++----
 5 files changed, 110 insertions(+), 53 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
index fbf7901..377363e 100644
--- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
+++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
@@ -181,44 +181,49 @@ mat-spinner {
   margin: 10px 10px;
 }
 
-.result-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-}
-
-.result-checkbox {
-  float: right;
-  margin: 0;
+.result-card.small-card {
+  width: 100%;
+  max-width: 180px;
+  height: auto;
+  min-height: 130px;
+  padding: 10px;
+  margin: 5px;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 .result-title {
-  font-size: 1.2rem;
-  font-weight: 600;
+  font-size: 1rem;
+  font-weight: 500;
   color: #333;
+  margin-bottom: 5px;
 }
 
 .result-content {
-  padding-top: 10px;
+  padding-top: 5px;
   color: #555;
+  font-size: 0.85rem;
 }
 
-.result-type {
-  font-size: 1rem;
-  font-weight: 500;
-  margin: 0;
+.result-type, .result-ip, .result-mac, .result-status, .result-internal-units, .result-clients {
+  font-size: 0.8rem;
+  margin: 2px 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.result-ip, .result-mac, .result-status {
-  font-size: 0.9rem;
-  margin: 5px 0;
+.result-checkbox {
+  align-self: flex-start;
+  margin: 0 0 5px 0;
 }
 
-.result-internal-units,
-.result-clients {
-  font-size: 0.9rem;
-  color: #007bff;
-  color: #007bff;
-  margin: 5px 0;
+.result-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }
 
 .paginator-container {
@@ -240,7 +245,6 @@ mat-card {
 }
 
 .red-card {
-  background-color: #f35f53;
   background-color: #f35f53;
   color: white;
 }
@@ -248,8 +252,6 @@ mat-card {
 .green-card {
   background-color: #4caf50;
   color: white;
-  background-color: #4caf50;
-  color: white;
 }
 
 .view-mode-buttons button.active {
@@ -271,7 +273,6 @@ mat-card {
 }
 
 .result-card-list .result-title {
-  font-size: 14px;
   font-size: 14px;
   font-weight: bold;
   margin-right: 8px;
@@ -282,12 +283,10 @@ mat-card {
   flex-direction: row;
   gap: 8px;
   font-size: 12px;
-  font-size: 12px;
 }
 
 .result-card-list p {
   margin: 0;
-  margin: 0;
 }
 
 .result-list {
diff --git a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
index 7fd0e2c..9817a5f 100644
--- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
+++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
@@ -47,9 +47,9 @@
     <div class="results">
       <ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
         <ng-container *ngIf="viewMode === 'grid'">
-          <mat-grid-list cols="5" rowHeight="1:1">
+          <mat-grid-list cols="8" rowHeight="1:1">
             <mat-grid-tile *ngFor="let result of filteredResults">
-              <mat-card class="result-card">
+              <mat-card class="result-card small-card">
                 <mat-checkbox [checked]="isSelected(result.name)" (change)="onCheckboxChange($event, result.name, result['@id'])" class="result-checkbox"></mat-checkbox>
                 <mat-card-title class="result-title">{{ result.name }}</mat-card-title>
                 <mat-card-content class="result-content">
diff --git a/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.css b/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.css
index 6dfa966..4abaa49 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.css
+++ b/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.css
@@ -1,4 +1,3 @@
-
 mat-form-field {
   width: 100%;
   margin-bottom: 20px;
@@ -53,9 +52,9 @@ h3 {
 
 .list-item-content {
   display: flex;
-  align-items: flex-start; /* Alinea el contenido al inicio */
-  justify-content: space-between; /* Espacio entre los textos y los íconos */
-  width: 100%; /* Asegúrate de que el contenido ocupe todo el ancho */
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
 }
 
 .text-content {
@@ -73,3 +72,15 @@ h3 {
   margin-left: 8px;
   cursor: pointer;
 }
+
+.actions-container {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
diff --git a/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.html b/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.html
index c302cb7..e786adb 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.html
+++ b/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.html
@@ -1,9 +1,8 @@
-<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} plantilla </h2>
+<h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} plantilla</h2>
 
 <mat-dialog-content>
   <div class="spacing-container">
     <form [formGroup]="templateForm" (ngSubmit)="onSave()">
-
       <mat-form-field appearance="fill">
         <mat-label>Nombre de la Plantilla</mat-label>
         <input matInput formControlName="name" placeholder="Introduce el nombre de la plantilla">
@@ -23,9 +22,19 @@
   </div>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end">
-  <button mat-button type="button" (click)="onCancel()">Cancelar</button>
-  <button mat-raised-button color="primary" type="submit" (click)="onSave()" [disabled]="!templateForm.valid">
-    {{ isEditMode ? 'Actualizar' : 'Crear' }}
-  </button>
+<mat-dialog-actions>
+  <div class="actions-container">
+    <button mat-flat-button color="accent" [matMenuTriggerFor]="templateMenu">Cargar plantilla modelo</button>
+    <mat-menu #templateMenu="matMenu">
+      <button mat-menu-item (click)="loadTemplateModel('ogLive')">ogLive</button>
+      <button mat-menu-item (click)="loadTemplateModel('disco')">Arranque por disco</button>
+    </mat-menu>
+
+    <div class="action-buttons">
+      <button mat-button type="button" (click)="onCancel()">Cancelar</button>
+      <button mat-raised-button color="primary" type="submit" (click)="onSave()" [disabled]="!templateForm.valid">
+        {{ isEditMode ? 'Actualizar' : 'Crear' }}
+      </button>
+    </div>
+  </div>
 </mat-dialog-actions>
diff --git a/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.ts b/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.ts
index b16bc94..14d208a 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.ts
+++ b/ogWebconsole/src/app/components/ogboot/pxe/create-pxeTemplate/create-pxe-template.component.ts
@@ -1,9 +1,9 @@
 import { HttpClient } from '@angular/common/http';
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-import {MatDialogRef, MAT_DIALOG_DATA, MatDialog} from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { ToastrService } from 'ngx-toastr';
-import {DeleteModalComponent} from "../../../../shared/delete_modal/delete-modal/delete-modal.component";
+import { DeleteModalComponent } from "../../../../shared/delete_modal/delete-modal/delete-modal.component";
 
 @Component({
   selector: 'app-create-pxe-template',
@@ -17,6 +17,39 @@ export class CreatePxeTemplateComponent implements OnInit {
   isEditMode: boolean = false;
   clients: any[] = [];
 
+  templateModels = {
+    ogLive: `#!ipxe
+set timeout 0
+set timeout-style hidden
+set ISODIR __OGLIVE__
+set default 0
+set kernelargs __INFOHOST__
+:try_iso
+kernel http://__SERVERIP__/tftpboot/\${ISODIR}/ogvmlinuz \${kernelargs} || goto fallback
+initrd http://__SERVERIP__/tftpboot/\${ISODIR}/oginitrd.img
+boot
+
+:fallback
+set ISODIR ogLive
+kernel http://__SERVERIP__/tftpboot/\${ISODIR}/ogvmlinuz \${kernelargs}
+initrd http://__SERVERIP__/tftpboot/\${ISODIR}/oginitrd.img
+boot`,
+    
+    disco: `#!ipxe
+
+iseq \${platform} efi && goto uefi_boot || goto bios_boot
+
+:bios_boot
+echo "Running in BIOS mode - Booting first disk"
+chain http://__SERVERIP__/tftpboot/grub.exe --config-file="title FirstHardDisk;chainloader (hd0)+1;rootnoverify (hd0);boot" || echo "Failed to boot in BIOS mode"
+exit
+
+:uefi_boot
+echo "Running in UEFI mode - Booting first disk"
+sanboot --no-describe --drive 0 --filename \\EFI\\grub\\Boot\\grubx64.efi || echo "Failed to boot in UEFI mode"
+exit`
+  };
+
   constructor(
     public dialogRef: MatDialogRef<CreatePxeTemplateComponent>,
     public dialog: MatDialog,
@@ -29,8 +62,8 @@ export class CreatePxeTemplateComponent implements OnInit {
   ngOnInit() {
     this.isEditMode = !!this.data;
 
-    if (this.isEditMode){
-      this.getPxeClients()
+    if (this.isEditMode) {
+      this.getPxeClients();
     }
 
     this.templateForm = this.fb.group({
@@ -50,7 +83,7 @@ export class CreatePxeTemplateComponent implements OnInit {
   getPxeClients(): void {
     this.http.get<any>(`${this.baseUrl}/clients?template.id=${this.data.id}`).subscribe({
       next: data => {
-        this.clients = data['hydra:member']
+        this.clients = data['hydra:member'];
       },
       error: error => {
         console.error('Error al obtener los clientes PXE:', error);
@@ -67,12 +100,10 @@ export class CreatePxeTemplateComponent implements OnInit {
 
     this.http.post<any>(`${this.baseUrl}/pxe-templates`, payload).subscribe({
       next: data => {
-        console.log('Plantilla PXE creada:', data);
         this.toastService.success('Plantilla PXE creada exitosamente');
         this.dialogRef.close(true);
       },
       error: error => {
-        console.error('Error al crear la plantilla PXE:', error);
         this.toastService.error('Error al crear la plantilla PXE');
         this.dialogRef.close(false);
       }
@@ -98,13 +129,19 @@ export class CreatePxeTemplateComponent implements OnInit {
     });
   }
 
+  loadTemplateModel(type: 'ogLive' | 'disco'): void {
+    const selectedContent = this.templateModels[type];
+    this.templateForm.get('templateContent')?.setValue(selectedContent);
+    this.toastService.info(`Plantilla ${type} cargada.`);
+  }
+
   addClientToTemplate(client: any): void {
     const postData = {
       client: client['@id']
     };
 
     this.http.post(`${this.baseUrl}/pxe-templates/${this.data.uuid}/sync-client`, postData).subscribe(
-      response => {
+      () => {
         this.toastService.success('Clientes asignados correctamente');
       },
       error => {
@@ -126,11 +163,12 @@ export class CreatePxeTemplateComponent implements OnInit {
             this.toastService.success('Cliente eliminado exitosamente');
             this.dialogRef.close();
           },
-          error: (error) => {
+          error: error => {
             this.toastService.error(error.error['hydra:description']);
           }
         });
-      }})
+      }
+    });
   }
 
   onCancel(): void {