Update main.js

main.js

@@ -84,14 +84,60 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     
     function showObjectInfo(poiId) {
-        const poi = poisData.find(p => p.id === poiId);
-        if (!poi) return;
-        objectTitle.textContent = poi.name;
-        objectDescription.textContent = poi.description || "No description available.";
-        objectImage.src = `https://via.placeholder.com/300x200?text=${encodeURIComponent(poi.name)}`;
-        objectModal.classList.remove('hidden');
-    }
+    // Show loading text while we fetch data
+    objectTitle.textContent = 'Loading...';
+    objectDescription.textContent = '';
+    
+    // Hide the AeroDeck section initially
+    const aerodeckSection = document.getElementById('aerodeckSection');
+    aerodeckSection.classList.add('hidden');
+
+    // Fetch data for the SINGLE POI from our new backend route
+    fetch(`${config.backendUrl}/api/pois/${poiId}`)
+        .then(response => {
+            if (!response.ok) throw new Error('POI not found');
+            return response.json();
+        })
+        .then(data => {
+            // Populate the main POI info
+            objectTitle.textContent = data.name;
+            objectDescription.textContent = data.description || "No description available.";
+            objectImage.src = `https://via.placeholder.com/300x200?text=${encodeURIComponent(data.name)}`;
+
+            // Check if there is AeroDeck data in the response
+            if (data.aerodecks && data.aerodecks.length > 0) {
+                const aerodeckList = document.getElementById('aerodeckList');
+                aerodeckList.innerHTML = ''; // Clear any old list items
+
+                // Loop through each AeroDeck and create an HTML element for it
+                data.aerodecks.forEach(deck => {
+                    const itemElement = document.createElement('div');
+                    itemElement.className = 'flex justify-between items-center p-2 bg-gray-100 rounded';
+                    
+                    const statusColor = deck.status === 'Operational' ? 'text-green-500' : 'text-orange-500';
 
+                    itemElement.innerHTML = `
+                        <div>
+                            <div class="font-medium">${deck.deck_name}</div>
+                            <div class="text-sm text-gray-600">Size: ${deck.size_meters}m | Charging: ${deck.is_charging_available ? 'Yes' : 'No'}</div>
+                        </div>
+                        <div class="font-bold text-sm ${statusColor}">${deck.status}</div>
+                    `;
+                    aerodeckList.appendChild(itemElement);
+                });
+
+                // Make the whole AeroDeck section visible
+                aerodeckSection.classList.remove('hidden');
+            }
+
+            // Finally, show the fully populated modal
+            objectModal.classList.remove('hidden');
+        })
+        .catch(error => {
+            console.error("Error fetching POI details:", error);
+            alert("Could not load details for this location.");
+        });
+}
     function addUserMessage(message) {
         const chatContainer = aiAssistant.querySelector('.flex-col');
         const msg = `<div class="ai-message user-message"><p>${message}</p></div>`;