Añado opción para gestionar ISO

static/dashboard.js

@@ -515,3 +515,138 @@ function openConsole(vmName) {
             alert('Error al abrir consola');
         });
 }
+
+// Open ISO Management Modal
+function openISOManagementModal() {
+    const modal = new bootstrap.Modal(document.getElementById('isoManagementModal'));
+    loadISOs();
+    setupUploadISOForm();
+    modal.show();
+}
+
+// Load ISOs for management
+async function loadISOs() {
+    try {
+        const response = await fetch(`${API_BASE}/isos`);
+        const data = await response.json();
+        const tbody = document.getElementById('isoTableBody');
+        
+        if (!data.isos || data.isos.length === 0) {
+            tbody.innerHTML = '<tr><td colspan="2" class="text-center text-muted">No hay ISOs subidas</td></tr>';
+            return;
+        }
+        
+        tbody.innerHTML = data.isos.map(iso => `
+            <tr>
+                <td>
+                    <i class="bi bi-disc"></i> ${iso.name}
+                </td>
+                <td>
+                    <button class="btn btn-sm btn-danger" onclick="deleteISO('${iso.name}')">
+                        <i class="bi bi-trash"></i> Eliminar
+                    </button>
+                </td>
+            </tr>
+        `).join('');
+    } catch (error) {
+        console.error('Error loading ISOs:', error);
+        document.getElementById('isoTableBody').innerHTML = '<tr><td colspan="2" class="text-center text-danger">Error al cargar ISOs</td></tr>';
+    }
+}
+
+// Setup ISO upload form
+function setupUploadISOForm() {
+    const form = document.getElementById('uploadIsoForm');
+    if (!form.dataset.listenerAdded) {
+        form.addEventListener('submit', uploadISO);
+        form.dataset.listenerAdded = 'true';
+    }
+}
+
+// Upload ISO
+async function uploadISO(e) {
+    e.preventDefault();
+    
+    const isoFile = document.getElementById('isoFile');
+    const uploadBtn = document.getElementById('uploadBtn');
+    const progressContainer = document.getElementById('progressContainer');
+    const uploadProgress = document.getElementById('uploadProgress');
+    
+    if (!isoFile.files.length) {
+        alert('Por favor selecciona un archivo');
+        return;
+    }
+    
+    const formData = new FormData();
+    formData.append('file', isoFile.files[0]);
+    
+    uploadBtn.disabled = true;
+    progressContainer.style.display = 'block';
+    
+    try {
+        const xhr = new XMLHttpRequest();
+        
+        xhr.upload.addEventListener('progress', (e) => {
+            if (e.lengthComputable) {
+                const percentComplete = (e.loaded / e.total) * 100;
+                uploadProgress.style.width = percentComplete + '%';
+                uploadProgress.setAttribute('aria-valuenow', percentComplete);
+                uploadProgress.textContent = Math.round(percentComplete) + '%';
+            }
+        });
+        
+        xhr.addEventListener('load', () => {
+            if (xhr.status === 200) {
+                const result = JSON.parse(xhr.responseText);
+                alert(result.message || 'ISO subida correctamente');
+                document.getElementById('uploadIsoForm').reset();
+                progressContainer.style.display = 'none';
+                uploadProgress.style.width = '0%';
+                uploadProgress.textContent = '0%';
+                loadISOs();
+                loadISOsForSelect();
+            } else {
+                const result = JSON.parse(xhr.responseText);
+                alert(result.error || 'Error al subir ISO');
+                progressContainer.style.display = 'none';
+            }
+            uploadBtn.disabled = false;
+        });
+        
+        xhr.addEventListener('error', () => {
+            alert('Error al subir ISO');
+            progressContainer.style.display = 'none';
+            uploadBtn.disabled = false;
+        });
+        
+        xhr.open('POST', `${API_BASE}/upload-iso`);
+        xhr.send(formData);
+    } catch (error) {
+        console.error('Error:', error);
+        alert(`Error: ${error.message}`);
+        uploadBtn.disabled = false;
+        progressContainer.style.display = 'none';
+    }
+}
+
+// Delete ISO
+async function deleteISO(name) {
+    if (confirm(`¿Estás seguro de que quieres eliminar ${name}?`)) {
+        try {
+            const response = await fetch(`${API_BASE}/isos/${name}`, { method: 'DELETE' });
+            const result = await response.json();
+            
+            if (response.ok) {
+                alert('ISO eliminada correctamente');
+                loadISOs();
+                loadISOsForSelect();
+            } else {
+                alert(result.error || 'Error al eliminar ISO');
+            }
+        } catch (error) {
+            console.error('Error:', error);
+            alert(`Error: ${error.message}`);
+        }
+    }
+}
+

static/index.html

@@ -289,6 +289,9 @@
                 <button class="btn btn-light btn-sm" onclick="openCreateVMModal()" title="Nueva VM">
                     <i class="bi bi-plus-circle"></i> Nueva
                 </button>
+                <button class="btn btn-light btn-sm" onclick="openISOManagementModal()" title="Gestionar ISOs">
+                    <i class="bi bi-disc"></i> ISOs
+                </button>
             </div>
         </div>
         
@@ -354,6 +357,74 @@
         </div>
     </div>
 
+    <!-- ISO Management Modal -->
+    <div class="modal fade" id="isoManagementModal" tabindex="-1">
+        <div class="modal-dialog modal-lg">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title"><i class="bi bi-disc"></i> Gestionar Imágenes ISO</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body">
+                    <ul class="nav nav-tabs mb-3" role="tablist">
+                        <li class="nav-item">
+                            <a class="nav-link active" id="upload-tab" data-bs-toggle="tab" href="#upload-panel" role="tab">
+                                <i class="bi bi-upload"></i> Subir ISO
+                            </a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" id="manage-tab" data-bs-toggle="tab" href="#manage-panel" role="tab">
+                                <i class="bi bi-list-check"></i> Mis ISOs
+                            </a>
+                        </li>
+                    </ul>
+
+                    <div class="tab-content">
+                        <!-- Upload Tab -->
+                        <div class="tab-pane fade show active" id="upload-panel" role="tabpanel">
+                            <form id="uploadIsoForm" enctype="multipart/form-data">
+                                <div class="mb-3">
+                                    <label for="isoFile" class="form-label">Selecciona archivo ISO</label>
+                                    <input type="file" class="form-control" id="isoFile" accept=".iso" required>
+                                    <small class="form-text text-muted">Máximo recomendado: 10GB</small>
+                                </div>
+                                <div id="progressContainer" style="display: none;">
+                                    <label class="form-label">Progreso</label>
+                                    <div class="progress">
+                                        <div class="progress-bar" id="uploadProgress" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+                                    </div>
+                                </div>
+                                <button type="submit" class="btn btn-success" id="uploadBtn">
+                                    <i class="bi bi-cloud-upload"></i> Subir ISO
+                                </button>
+                            </form>
+                        </div>
+
+                        <!-- Manage Tab -->
+                        <div class="tab-pane fade" id="manage-panel" role="tabpanel">
+                            <table class="table table-hover" id="isoTable">
+                                <thead>
+                                    <tr>
+                                        <th><i class="bi bi-disc"></i> Nombre</th>
+                                        <th>Acciones</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="isoTableBody">
+                                    <tr>
+                                        <td colspan="2" class="text-center text-muted">Cargando ISOs...</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script src="/static/dashboard.js"></script>
 </body>