diff --git a/ogWebconsole/angular.json b/ogWebconsole/angular.json index a32ccff..9bc7a28 100644 --- a/ogWebconsole/angular.json +++ b/ogWebconsole/angular.json @@ -69,7 +69,7 @@ "development": { "optimization": false, "extractLicenses": false, - "sourceMap": true + "sourceMap": false }, "es": { "localize": [ diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css index a7a02c7..fce857e 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.css @@ -1,53 +1,134 @@ .partition-assistant { - font-family: Arial, sans-serif; - padding: 10px; + font-family: 'Roboto', sans-serif; + background-color: #f9f9f9; + padding: 20px; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin: 20px auto; } .header { display: flex; align-items: center; - gap: 10px; + justify-content: space-between; + margin-bottom: 15px; + padding: 10px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.header label { + font-weight: 500; + margin-right: 10px; +} + +.disk-size { + font-size: 1rem; + font-weight: 600; + color: #555; } .partition-bar { display: flex; - margin: 10px 0; - height: 30px; - border: 1px solid #000000; + margin: 20px 0; + height: 40px; + border-radius: 8px; + overflow: hidden; + background-color: #e0e0e0; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); } .partition-segment { text-align: center; color: white; - line-height: 30px; + line-height: 40px; + font-weight: 500; + font-size: 0.9rem; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); } .partition-table { width: 100%; border-collapse: collapse; - margin-bottom: 10px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); + overflow: hidden; + margin-bottom: 20px; } -.partition-table th, .partition-table td { - border: 1px solid #ccc; - padding: 5px; +.partition-table th { + background-color: #f5f5f5; + color: #333; + padding: 12px; + font-weight: 600; +} + +.partition-table td { + padding: 10px; text-align: center; + border-bottom: 1px solid #eee; +} + +.partition-table select, +.partition-table input[type="number"], +.partition-table input[type="checkbox"] { + padding: 5px; + border-radius: 4px; + border: 1px solid #ccc; + width: 100%; } .actions { display: flex; justify-content: flex-end; + padding-top: 10px; } -.remove-btn { - background-color: red; - color: white; +button { border: none; - padding: 5px; + padding: 10px 20px; + border-radius: 4px; + font-size: 1rem; + font-weight: 500; cursor: pointer; + transition: background-color 0.3s ease; +} + +button.mat-button { + background-color: #007bff; + color: white; +} + +button.mat-button:hover { + background-color: #0056b3; +} + +button.mat-flat-button { + background-color: #28a745; + color: white; +} + +button.mat-flat-button:hover { + background-color: #218838; +} + +button.remove-btn { + background-color: #dc3545; + color: white; + border-radius: 4px; +} + +button.remove-btn:hover { + background-color: #c82333; } .error-message { - color: red; + color: #dc3545; + font-size: 0.9rem; + padding: 10px; + background-color: #f8d7da; + border-radius: 4px; margin-top: 10px; -} \ No newline at end of file +} diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html index 47a2809..bc674a1 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.html @@ -1,18 +1,12 @@ -
+
- - - - - Tamaño: {{ totalDiskSize }} GB + + Tamaño: {{ disk.totalDiskSize }} GB
@@ -20,7 +14,7 @@
- + @@ -33,8 +27,8 @@ - - + +
{{ i + 1 }}
{{ j + 1 }} - +
-
{{ errorMessage }}
- -
- -
+
+ +
{{ errorMessage }}
+ +
+
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts index dec9956..2ef9ded 100644 --- a/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts +++ b/ogWebconsole/src/app/components/groups/components/client-main-view/partition-assistant/partition-assistant.component.ts @@ -1,4 +1,5 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; interface Partition { size: number; @@ -14,98 +15,176 @@ interface Partition { templateUrl: './partition-assistant.component.html', styleUrls: ['./partition-assistant.component.css'] }) -export class PartitionAssistantComponent { +export class PartitionAssistantComponent implements OnInit { @Input() data: any; - diskNumber = 1; - partitionTable = 'MSDOS'; - totalDiskSize = 100; + @Input() clientUuid: string | undefined; // El clientUuid que necesitas + errorMessage = ''; + originalPartitions: any[] = []; + disks: { diskNumber: number, totalDiskSize: number, partitions: Partition[] }[] = []; + private apiUrl = 'http://127.0.0.1:8001/partitions'; - ngOnInit() { console.log('Data:', this.data); } + constructor(private http: HttpClient) {} - partitions: Partition[] = [ - { size: 17.96, type: 'NTFS', sizeBytes: 17.96 * 1024 * 1024 * 1024, format: false, color: '#00a2e8', percentage: 17.96 }, - { size: 17.29, type: 'LINUX', sizeBytes: 17.29 * 1024 * 1024 * 1024, format: false, color: '#6a5acd', percentage: 17.29 }, - { size: 12.64, type: 'CACHE', sizeBytes: 12.64 * 1024 * 1024 * 1024, format: false, color: '#ff0000', percentage: 12.64 } - ]; - - addPartition() { - const remainingGB = this.getRemainingGB(); - if (remainingGB > 0) { - this.partitions.push({ - size: 0, - type: 'NTFS', - sizeBytes: 0, - format: false, - color: '#' + Math.floor(Math.random() * 16777215).toString(16), - percentage: 0 - }); - } else { - this.errorMessage = 'No hay suficiente espacio libre en el disco para crear una nueva partición.'; - } + ngOnInit() { + this.initializeDisks(); } - removePartition(index: number) { - this.partitions.splice(index, 1); - this.updatePartitionPercentages(); - } + initializeDisks() { + const partitionsFromData = this.data.partitions; + this.originalPartitions = JSON.parse(JSON.stringify(partitionsFromData)); // Guardar una copia de las particiones originales - updatePartitionSize(index: number, type: 'gb') { - const partition = this.partitions[index]; - const remainingGB = this.getRemainingGB() + partition.size; - - if (partition.size > remainingGB) { - this.errorMessage = `El tamaño de la partición no puede superar el espacio libre (${remainingGB.toFixed(2)} GB).`; - partition.size = 0; - } else { - this.errorMessage = ''; - partition.sizeBytes = partition.size * 1024 * 1024 * 1024; - this.updatePartitionPercentages(); - } - } + const disksMap = new Map(); - updatePartitionPercentages() { - const totalUsedGB = this.partitions.reduce((acc, partition) => acc + partition.size, 0); - const remainingGB = this.totalDiskSize - totalUsedGB; + partitionsFromData.forEach((partition: any) => { + if (!disksMap.has(partition.diskNumber)) { + disksMap.set(partition.diskNumber, { totalDiskSize: 0, partitions: [] }); + } - this.partitions.forEach(partition => { - partition.percentage = (partition.size / this.totalDiskSize) * 100; + const disk = disksMap.get(partition.diskNumber); + if (partition.partitionNumber === 0) { + disk!.totalDiskSize = this.convertBytesToGB(partition.size); + } else { + disk!.partitions.push({ + size: this.convertBytesToGB(partition.size), + type: 'NTFS', // Puedes cambiar el tipo según sea necesario + sizeBytes: partition.size, + format: false, + color: '#' + Math.floor(Math.random() * 16777215).toString(16), + percentage: 0 + }); + } }); - if (remainingGB > 0) { - const freeSpaceIndex = this.partitions.findIndex(partition => partition.type === 'LIBRE'); - - if (freeSpaceIndex > -1) { - this.partitions[freeSpaceIndex].size = remainingGB; - this.partitions[freeSpaceIndex].percentage = (remainingGB / this.totalDiskSize) * 100; - } - } + disksMap.forEach((disk, diskNumber) => { + this.updatePartitionPercentages(disk.partitions, disk.totalDiskSize); + this.disks.push({ + diskNumber: diskNumber, + totalDiskSize: disk.totalDiskSize, + partitions: disk.partitions + }); + }); } - getRemainingGB(): number { - const totalUsedGB = this.partitions.reduce((acc, partition) => acc + partition.size, 0); - return Math.max(0, this.totalDiskSize - totalUsedGB); + convertBytesToGB(bytes: number): number { + return bytes / (1024 * 1024 * 1024); + } + + updatePartitionPercentages(partitions: Partition[], totalDiskSize: number) { + partitions.forEach(partition => { + partition.percentage = (partition.size / totalDiskSize) * 100; + }); + } + + // Añadir una nueva partición + addPartition(diskNumber: number) { + const disk = this.disks.find(d => d.diskNumber === diskNumber); + + if (disk) { + const remainingGB = this.getRemainingGB(disk.partitions, disk.totalDiskSize); + if (remainingGB > 0) { + disk.partitions.push({ + size: 0, + type: 'NTFS', // Tipo por defecto, puede ser cambiado por el usuario + sizeBytes: 0, + format: false, + color: '#' + Math.floor(Math.random() * 16777215).toString(16), // Color aleatorio + percentage: 0 + }); + this.updatePartitionPercentages(disk.partitions, disk.totalDiskSize); + } else { + this.errorMessage = 'No hay suficiente espacio libre en el disco para crear una nueva partición.'; + } + } + } + + // Actualizar el tamaño de una partición + updatePartitionSize(diskNumber: number, index: number, size: number) { + const disk = this.disks.find(d => d.diskNumber === diskNumber); + if (disk) { + const partition = disk.partitions[index]; + const remainingGB = this.getRemainingGB(disk.partitions, disk.totalDiskSize) + partition.size; + + if (size > remainingGB) { + this.errorMessage = `El tamaño de la partición no puede superar el espacio libre (${remainingGB.toFixed(2)} GB).`; + } else { + this.errorMessage = ''; + partition.size = size; + partition.sizeBytes = size * 1024 * 1024 * 1024; + this.updatePartitionPercentages(disk.partitions, disk.totalDiskSize); + } + } + } + + getRemainingGB(partitions: Partition[], totalDiskSize: number): number { + const totalUsedGB = partitions.reduce((acc, partition) => acc + partition.size, 0); + return Math.max(0, totalDiskSize - totalUsedGB); + } + + isPartitionModified(original: any, current: Partition): boolean { + return ( + this.convertBytesToGB(original.size) !== current.size || + original.type !== current.type + ); + } + + getModifiedOrNewPartitions() { + const modifiedPartitions: any[] = []; + + this.disks.forEach(disk => { + disk.partitions.forEach((partition, index) => { + const originalPartition = this.originalPartitions.find( + p => p.diskNumber === disk.diskNumber && p.partitionNumber === index + 1 + ); + + // Si no existe en las originales, es nueva + if (!originalPartition) { + modifiedPartitions.push({ partition, diskNumber: disk.diskNumber, partitionNumber: index + 1 }); + } else if (this.isPartitionModified(originalPartition, partition)) { + modifiedPartitions.push({ partition, diskNumber: disk.diskNumber, partitionNumber: index + 1 }); + } + }); + }); + + return modifiedPartitions; } save() { - const totalSize = this.partitions.reduce((acc, partition) => acc + partition.size, 0); - - if (totalSize > this.totalDiskSize) { - this.errorMessage = `El tamaño total de las particiones (${totalSize} GB) supera el tamaño total del disco (${this.totalDiskSize} GB).`; + const modifiedPartitions = this.getModifiedOrNewPartitions(); + + if (modifiedPartitions.length === 0) { + this.errorMessage = 'No hay cambios para guardar.'; return; - } else { - this.errorMessage = ''; } - - const payload = this.partitions.map((partition, index) => ({ - diskNumber: this.diskNumber, - partitionNumber: index + 1, - size: partition.size, - filesystem: partition.type, - format: partition.format - })); - - console.log('Payload:', JSON.stringify(payload, null, 2)); + + modifiedPartitions.forEach(({ partition, diskNumber, partitionNumber }) => { + const payload = { + diskNumber: diskNumber, + partitionNumber: partitionNumber, + size: partition.size, + filesystem: partition.type, + client: `https://example.com/${this.clientUuid}` + }; + + this.http.post(this.apiUrl, payload).subscribe( + response => { + console.log('Partición guardada exitosamente:', response); + }, + error => { + console.error('Error al guardar la partición:', error); + } + ); + }); + } + + // Eliminar partición de un disco + removePartition(diskNumber: number, index: number) { + const disk = this.disks.find(d => d.diskNumber === diskNumber); + + if (disk) { + disk.partitions.splice(index, 1); + this.updatePartitionPercentages(disk.partitions, disk.totalDiskSize); + } } } diff --git a/ogWebconsole/src/app/components/images/create-image/create-image.component.css b/ogWebconsole/src/app/components/images/create-image/create-image.component.css index e69de29..a39bfaa 100644 --- a/ogWebconsole/src/app/components/images/create-image/create-image.component.css +++ b/ogWebconsole/src/app/components/images/create-image/create-image.component.css @@ -0,0 +1,47 @@ +.dialog-content { + display: flex; + flex-direction: column; + gap: 16px; /* Espacio entre los elementos del formulario */ + } + + .image-form { + width: 100%; + display: flex; + flex-direction: column; + } + + .form-field { + width: 100%; + margin-bottom: 16px; + } + + /* Botones alineados al final, con margen superior */ + .dialog-actions { + display: flex; + justify-content: flex-end; + margin-top: 24px; + } + + button { + margin-left: 8px; /* Espacio entre los botones */ + } + + /* Responsividad para pantallas pequeñas */ + @media (max-width: 600px) { + .form-field { + width: 100%; + } + + /* Alineación vertical para botones en pantallas pequeñas */ + .dialog-actions { + flex-direction: column; + align-items: stretch; + } + + button { + width: 100%; + margin-left: 0; + margin-bottom: 8px; + } + } + \ No newline at end of file diff --git a/ogWebconsole/src/app/components/images/create-image/create-image.component.html b/ogWebconsole/src/app/components/images/create-image/create-image.component.html index 2c3ecb1..e54bd91 100644 --- a/ogWebconsole/src/app/components/images/create-image/create-image.component.html +++ b/ogWebconsole/src/app/components/images/create-image/create-image.component.html @@ -1,29 +1,30 @@

Añadir nueva imagen

- -
- + + + + Nombre de la imagen - + Descripción - + Comentarios - + Perfil de software - +