Melhora tratamento de erros e estados vazios

guipratiko · Feb 3, 2025 · 6b39e16 · 6b39e16
1 parent c852356
commit 6b39e16
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/public/js/main.js b/public/js/main.js
@@ -9,33 +9,40 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 
-    // Carregar veículos
+    // Carregar veículos
     const carsContainer = document.getElementById('cars-container');
     if (carsContainer) {
         fetch('/api/vehicles')
             .then(response => response.json())
             .then(vehicles => {
+                if (vehicles.length === 0) {
+                    carsContainer.innerHTML = '<p class="no-cars">Nenhum veículo disponível no momento.</p>';
+                    return;
+                }
                 vehicles.forEach(vehicle => {
                     const card = createVehicleCard(vehicle);
                     carsContainer.appendChild(card);
                 });
             })
-            .catch(error => console.error('Erro ao carregar veículos:', error));
+            .catch(error => {
+                console.error('Erro ao carregar veículos:', error);
+                carsContainer.innerHTML = '<p class="error">Erro ao carregar veículos. Tente novamente mais tarde.</p>';
+            });
     }
 });
 
 function createVehicleCard(vehicle) {
     const card = document.createElement('div');
     card.className = 'car-card';
-    card.innerHTML = `
-        <img src="${vehicle.fotos[0]}" alt="${vehicle.marca} ${vehicle.modelo}">
+    card.innerHTML = 
+        <img src="${vehicle.fotos[0] || '/images/no-image.jpg'}" alt="${vehicle.marca} ">
         <div class="car-info">
-            <h3>${vehicle.marca} ${vehicle.modelo}</h3>
+            <h3>${vehicle.marca} </h3>
             <p>Ano: ${vehicle.anoFabricacao}</p>
             <p>Km: ${vehicle.quilometragem.toLocaleString()}</p>
             <p class="price">R$ ${vehicle.preco.toLocaleString()}</p>
             <a href="/veiculo/${vehicle._id}" class="view-details">Ver Detalhes</a>
         </div>
-    `;
+    ;
     return card;
-} 
+}