Vista con cards

static/app.js

@@ -66,6 +66,7 @@ async function loadISOsForSelect() {
     }
 }
 
+/* Load VMs and populate the table 
 async function loadVMs() {
     try {
         const response = await fetch(`${API_BASE}/vms`);
@@ -97,31 +98,35 @@ async function loadVMs() {
         alert('Error loading VMs');
     }
 }
-
+*/
 
 async function loadVMsCard() {
     try {
         const response = await fetch(`${API_BASE}/vms`);
         const data = await response.json();
-        const card = document.getElementById('vmCard');
-        card.innerHTML = '';
+        const columna = document.getElementById('vmCard');
+        columna.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';
+            const card = document.createElement('div');
+            card.className = 'card';
+            card.style.width = '18rem';
+
+            const cardbody = document.createElement('div');
+            cardbody.className = 'card-body';
+            card.appendChild(cardbody);
+            columna.appendChild(card);
 
-            tarjeta.innerHTML = `
-                <h6>${vm.id}</h6>
-                <h5>${vm.name}</h5>
-                <p><span class="badge ${getStateClass(vm.state)}">${vm.state}</span></p
+            cardbody.innerHTML = `
+                <h6>${vm.id} - ${vm.name} <span class="badge ${getStateClass(vm.state)}">${vm.state}</span></h6>
                 <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);
+            card.appendChild(cardbody);
             //select.innerHTML += `<option value="${vm.name}">${vm.name}</option>`;
         });
         //loadISOsForSelect();  // Load ISOs after loading VMs
@@ -269,6 +274,6 @@ document.getElementById('uploadIsoForm').addEventListener('submit', async (e) =>
 });
 
 // Load VMs on page load
-loadVMs();
+//loadVMs();
 loadVMsCard();
 loadISOs();

static/index.html

@@ -13,24 +13,11 @@
         <div class="row">
             <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>
-                            <th>ID</th>
-                            <th>Name</th>
-                            <th>State</th>
-                            <th>Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody id="vmTableBody">
-                    </tbody>
-                </table>
+            </div>
+
+            <div class="col-md-8"  id="vmCard">
 
-                <div class="card" style="width: 18rem;" id="vmCard">
-                </div>
-                
             </div>
             
             <div class="col-md-4">