En fase de cambiar a tarjetas

static/app.js

@@ -98,6 +98,40 @@ async function loadVMs() {
     }
 }
 
+
+async function loadVMsCard() {
+    try {
+        const response = await fetch(`${API_BASE}/vms`);
+        const data = await response.json();
+        const card = document.getElementById('vmCard');
+        card.innerHTML = '';
+        // const select = document.getElementById('bootVM');
+        //select.innerHTML = '<option value="">Select VM</option>';
+
+        data.vms.forEach(vm => {
+            const tarjeta = document.createElement('div');
+            tarjeta.className = 'card-body';
+
+            tarjeta.innerHTML = `
+                <h6>${vm.id}</h6>
+                <h5>${vm.name}</h5>
+                <p><span class="badge ${getStateClass(vm.state)}">${vm.state}</span></p
+                <button class="btn btn-sm btn-success" onclick="startVM('${vm.name}')">Lanzar</button>
+                <button class="btn btn-sm btn-warning" onclick="stopVM('${vm.name}')">Stop</button>
+                <button class="btn btn-sm btn-danger" onclick="deleteVM('${vm.name}')">Delete</button>
+                ${vm.vnc_port ? `<button class="btn btn-sm btn-info" onclick="openVNC('${vm.name}')">Console</button>` : ''}
+            `;
+            card.appendChild(tarjeta);
+            //select.innerHTML += `<option value="${vm.name}">${vm.name}</option>`;
+        });
+        //loadISOsForSelect();  // Load ISOs after loading VMs
+    } catch (error) {
+        console.error('Error loading VMs:', error);
+        alert('Error loading VMs');
+    }
+}
+
+
 async function startVM(name) {
     try {
         await fetch(`${API_BASE}/vms/${name}/start`);
@@ -236,4 +270,5 @@ document.getElementById('uploadIsoForm').addEventListener('submit', async (e) =>
 
 // Load VMs on page load
 loadVMs();
+loadVMsCard();
 loadISOs();

static/index.html

@@ -14,6 +14,7 @@
             <div class="col-md-8">
                 <h2>Virtual Machines</h2>
                 <button class="btn btn-primary mb-3" onclick="loadVMs()">Refresh</button>
+                <button class="btn btn-primary mb-3" onclick="loadVMsCard()">New Refresh</button>
                 <table class="table table-striped" id="vmTable">
                     <thead>
                         <tr>
@@ -26,6 +27,10 @@
                     <tbody id="vmTableBody">
                     </tbody>
                 </table>
+
+                <div class="card" style="width: 18rem;" id="vmCard">
+                </div>
+                
             </div>
             
             <div class="col-md-4">