refs #917 Update restore-image component to display and save associations
parent
9de990edf2
commit
2c4fcc9adf
|
|
@ -66,5 +66,5 @@
|
|||
<app-partition-assistant [data]="clientData"></app-partition-assistant>
|
||||
</div>
|
||||
<div class="assistants-container" *ngIf="isBootImageVisible">
|
||||
<app-restore-image></app-restore-image>
|
||||
<app-restore-image [data]="clientData"></app-restore-image>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ interface Partition {
|
|||
})
|
||||
export class PartitionAssistantComponent implements OnInit {
|
||||
@Input() data: any;
|
||||
@Input() clientUuid: string | undefined; // El clientUuid que necesitas
|
||||
@Input() clientUuid: string | undefined;
|
||||
|
||||
errorMessage = '';
|
||||
originalPartitions: any[] = [];
|
||||
|
|
@ -33,7 +33,7 @@ export class PartitionAssistantComponent implements OnInit {
|
|||
|
||||
initializeDisks() {
|
||||
const partitionsFromData = this.data.partitions;
|
||||
this.originalPartitions = JSON.parse(JSON.stringify(partitionsFromData)); // Guardar una copia de las particiones originales
|
||||
this.originalPartitions = JSON.parse(JSON.stringify(partitionsFromData));
|
||||
|
||||
const disksMap = new Map<number, { totalDiskSize: number, partitions: Partition[] }>();
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ export class PartitionAssistantComponent implements OnInit {
|
|||
} else {
|
||||
disk!.partitions.push({
|
||||
size: this.convertBytesToGB(partition.size),
|
||||
type: 'NTFS', // Puedes cambiar el tipo según sea necesario
|
||||
type: 'NTFS',
|
||||
sizeBytes: partition.size,
|
||||
format: false,
|
||||
color: '#' + Math.floor(Math.random() * 16777215).toString(16),
|
||||
|
|
@ -77,7 +77,6 @@ export class PartitionAssistantComponent implements OnInit {
|
|||
});
|
||||
}
|
||||
|
||||
// Añadir una nueva partición
|
||||
addPartition(diskNumber: number) {
|
||||
const disk = this.disks.find(d => d.diskNumber === diskNumber);
|
||||
|
||||
|
|
@ -86,10 +85,10 @@ export class PartitionAssistantComponent implements OnInit {
|
|||
if (remainingGB > 0) {
|
||||
disk.partitions.push({
|
||||
size: 0,
|
||||
type: 'NTFS', // Tipo por defecto, puede ser cambiado por el usuario
|
||||
type: 'NTFS',
|
||||
sizeBytes: 0,
|
||||
format: false,
|
||||
color: '#' + Math.floor(Math.random() * 16777215).toString(16), // Color aleatorio
|
||||
color: '#' + Math.floor(Math.random() * 16777215).toString(16),
|
||||
percentage: 0
|
||||
});
|
||||
this.updatePartitionPercentages(disk.partitions, disk.totalDiskSize);
|
||||
|
|
@ -99,7 +98,6 @@ export class PartitionAssistantComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
|
|
@ -138,7 +136,7 @@ export class PartitionAssistantComponent implements OnInit {
|
|||
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)) {
|
||||
|
|
@ -178,7 +176,6 @@ export class PartitionAssistantComponent implements OnInit {
|
|||
});
|
||||
}
|
||||
|
||||
// Eliminar partición de un disco
|
||||
removePartition(diskNumber: number, index: number) {
|
||||
const disk = this.disks.find(d => d.diskNumber === diskNumber);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,71 @@
|
|||
.partition-assistant {
|
||||
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;
|
||||
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);
|
||||
}
|
||||
|
||||
.partition-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
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 {
|
||||
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 {
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
button.mat-flat-button {
|
||||
background-color: #28a745;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button.mat-flat-button:hover {
|
||||
background-color: #218838;
|
||||
}
|
||||
|
||||
|
|
@ -1 +1,37 @@
|
|||
<p>restore-image works!</p>
|
||||
<div *ngFor="let disk of disks" class="partition-assistant">
|
||||
<div class="header">
|
||||
<label>Disco {{ disk.diskNumber }}</label>
|
||||
</div>
|
||||
|
||||
<table class="partition-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Partición</th>
|
||||
<th>Imagen ISO</th>
|
||||
<th>OgLive</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr *ngFor="let partition of disk.partitions">
|
||||
<td>{{ partition.partitionNumber }}</td>
|
||||
<td>
|
||||
<select (change)="onImageSelected(partition, $event)">
|
||||
<option value="">Seleccionar imagen</option>
|
||||
<option *ngFor="let image of availableImages" [value]="image">{{ image }}</option>
|
||||
</select>
|
||||
</td>
|
||||
<td>
|
||||
<select (change)="onOgLiveSelected(partition, $event)">
|
||||
<option value="">Seleccionar OgLive</option>
|
||||
<option *ngFor="let ogLive of availableOgLives" [value]="ogLive">{{ ogLive }}</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button mat-flat-button color="primary" (click)="saveAssociations()">Guardar Asociaciones</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -1,10 +1,68 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
|
||||
interface Partition {
|
||||
diskNumber: number;
|
||||
partitionNumber: number;
|
||||
associatedImage?: string;
|
||||
associatedOgLive?: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-restore-image',
|
||||
templateUrl: './restore-image.component.html',
|
||||
styleUrl: './restore-image.component.css'
|
||||
styleUrls: ['./restore-image.component.css']
|
||||
})
|
||||
export class RestoreImageComponent {
|
||||
export class RestoreImageComponent implements OnInit {
|
||||
@Input() data: any;
|
||||
|
||||
disks: { diskNumber: number; partitions: Partition[] }[] = [];
|
||||
availableImages: string[] = [];
|
||||
availableOgLives: string[] = [];
|
||||
|
||||
ngOnInit(): void {
|
||||
this.initializeDisks();
|
||||
this.availableImages = ['Windows10.iso', 'Ubuntu.iso', 'macOS.iso'];
|
||||
this.availableOgLives = ['LiveCD1', 'LiveCD2', 'LiveCD3'];
|
||||
}
|
||||
|
||||
initializeDisks() {
|
||||
const partitionsFromData = this.data.partitions;
|
||||
const disksMap = new Map<number, Partition[]>();
|
||||
|
||||
partitionsFromData.forEach((partition: any) => {
|
||||
if (!disksMap.has(partition.diskNumber)) {
|
||||
disksMap.set(partition.diskNumber, []);
|
||||
}
|
||||
|
||||
disksMap.get(partition.diskNumber)!.push({
|
||||
diskNumber: partition.diskNumber,
|
||||
partitionNumber: partition.partitionNumber
|
||||
});
|
||||
});
|
||||
|
||||
disksMap.forEach((partitions, diskNumber) => {
|
||||
this.disks.push({ diskNumber, partitions });
|
||||
});
|
||||
}
|
||||
|
||||
onImageSelected(partition: Partition, event: Event) {
|
||||
const selectElement = event.target as HTMLSelectElement;
|
||||
partition.associatedImage = selectElement.value;
|
||||
}
|
||||
|
||||
onOgLiveSelected(partition: Partition, event: Event) {
|
||||
const selectElement = event.target as HTMLSelectElement;
|
||||
partition.associatedOgLive = selectElement.value;
|
||||
}
|
||||
|
||||
saveAssociations() {
|
||||
this.disks.forEach(disk => {
|
||||
disk.partitions.forEach(partition => {
|
||||
if (partition.associatedImage || partition.associatedOgLive) {
|
||||
console.log(`Guardando para disco ${partition.diskNumber}, partición ${partition.partitionNumber}, Imagen: ${partition.associatedImage}, OgLive: ${partition.associatedOgLive}`);
|
||||
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue