Fix: Load autocomplete from database instead of hardcoded array

docker-compose.microservices.yml

@@ -26,7 +26,7 @@ services:
     build:
       context: ./backend
       dockerfile: Dockerfile
-    image: oramap-backend:latest
+    image: harbor.dvirlabs.com/my-apps/oramap-backend:latest
     container_name: oramap-backend
     environment:
       - NODE_ENV=production
@@ -50,7 +50,7 @@ services:
     build:
       context: ./frontend
       dockerfile: Dockerfile
-    image: oramap-frontend:latest
+    image: harbor.dvirlabs.com/my-apps/oramap-frontend:latest
     container_name: oramap-frontend
     ports:
       - "80:80"

frontend/nginx.conf

@@ -20,6 +20,9 @@ server {
     # For Kubernetes: set BACKEND_HOST env var or use service name
     # For Docker Compose: backend service name is 'backend'
     location /api/ {
+        # Docker's embedded DNS server
+        resolver 127.0.0.11 valid=30s;
+        
         # In Kubernetes, this will be: oramap-backend:3000
         # In Docker Compose, this will be: backend:3000
         # Default to backend:3000

frontend/public/script.js

@@ -65,18 +65,31 @@ function clearMarkers() {
   });
 }
 
-const familyNames = [
-    "Kafe (קאפח)", "Shiheb (שחב-שבח)", "Eraki (עראקי)", "Salumi (סלומי-שלומי)",
-    "Afgin (עפג'ין)", "Uzeyri (עזירי-עוזרי)"
-    // Add more families here if you like
-  ];
-  
-  // Initialize Fuse.js
-  const fuse = new Fuse(familyNames, {
-    includeScore: true,
-    threshold: 0.4  // Lower = stricter matching
-  });
-  
+// Autocomplete data - loaded from database
+let familyNames = [];
+let fuse;
+
+// Load families from database for autocomplete
+async function loadFamiliesForAutocomplete() {
+  try {
+    console.log('📚 Loading families from database for autocomplete...');
+    const response = await fetch('/api/families');
+    const families = await response.json();
+    
+    // Extract unique family names
+    familyNames = [...new Set(families.map(f => f.family))];
+    console.log('✅ Loaded', familyNames.length, 'family names for autocomplete');
+    
+    // Initialize or update Fuse.js
+    fuse = new Fuse(familyNames, {
+      includeScore: true,
+      threshold: 0.4  // Lower = stricter matching
+    });
+  } catch (error) {
+    console.error('❌ Failed to load families for autocomplete:', error);
+  }
+}
+
 const searchInput = document.getElementById('searchInput');
 const suggestionsBox = document.createElement('div');
 suggestionsBox.classList.add('suggestions');
@@ -87,7 +100,7 @@ searchInput.addEventListener('input', () => {
   const value = searchInput.value.trim();
   suggestionsBox.innerHTML = '';
 
-  if (!value) return;
+  if (!value || !fuse) return;
 
   const results = fuse.search(value);
 
@@ -188,6 +201,9 @@ async function addFamily(event) {
       messageEl.textContent = '✅ Family added successfully!';
       messageEl.className = 'form-message success';
       
+      // Reload autocomplete with updated family list
+      await loadFamiliesForAutocomplete();
+      
       // Add marker to map
       L.marker([latitude, longitude]).addTo(map)
         .bindPopup(`<strong>${familyName}</strong><br>City: ${cityName}`)
@@ -224,4 +240,7 @@ document.getElementById('searchInput').addEventListener('keypress', (e) => {
   if (e.key === 'Enter') {
     searchFamily();
   }
-});
+});
+
+// Load families for autocomplete when page loads
+loadFamiliesForAutocomplete();