Form updated and working

nocodb-map-viewer/app/public/index.html

@@ -60,7 +60,7 @@
             <div class="edit-footer-content">
                 <div class="edit-footer-header">
                     <h2>Edit Location</h2>
-                    <button class="btn btn-secondary btn-sm" onclick="closeEditFooter()">✕ Close</button>
+                    <button class="btn btn-secondary btn-sm" id="close-edit-footer-btn">✕ Close</button>
                 </div>
                 <form id="edit-location-form">
                     <input type="hidden" id="edit-location-id" name="id">
@@ -99,7 +99,12 @@
                     
                     <div class="form-group">
                         <label for="edit-location-address">Address</label>
-                        <input type="text" id="edit-location-address" name="Address">
+                        <div style="display: flex; gap: 10px;">
+                            <input type="text" id="edit-location-address" name="Address" style="flex: 1;">
+                            <button type="button" class="btn btn-secondary btn-sm" id="lookup-address-edit-btn">
+                                🔍 Lookup
+                            </button>
+                        </div>
                     </div>
                     
                     <div class="form-row">
@@ -138,7 +143,7 @@
                     </div>
                     
                     <div class="form-actions">
-                        <button type="button" class="btn btn-danger" onclick="deleteLocation()">Delete</button>
+                        <button type="button" class="btn btn-danger" id="delete-location-btn">Delete</button>
                         <button type="submit" class="btn btn-primary">Save Changes</button>
                     </div>
                 </form>
@@ -150,7 +155,7 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h2>Add New Location</h2>
-                    <button class="modal-close" onclick="closeModal()">&times;</button>
+                    <button class="modal-close" id="close-modal-btn">&times;</button>
                 </div>
                 <div class="modal-body">
                     <form id="location-form">
@@ -193,8 +198,13 @@
                         
                         <div class="form-group">
                             <label for="location-address">Address</label>
-                            <input type="text" id="location-address" name="Address" 
+                            <div style="display: flex; gap: 10px;">
-                                   placeholder="Enter address">
+                                <input type="text" id="location-address" name="Address" 
+                                       placeholder="Enter address" style="flex: 1;">
+                                <button type="button" class="btn btn-secondary btn-sm" id="lookup-address-add-btn">
+                                    🔍 Lookup
+                                </button>
+                            </div>
                         </div>
                         
                         <div class="form-row">
@@ -236,7 +246,7 @@
                         </div>
                         
                         <div class="form-actions">
-                            <button type="button" class="btn btn-secondary" onclick="closeModal()">
+                            <button type="button" class="btn btn-secondary" id="cancel-modal-btn">
                                 Cancel
                             </button>
                             <button type="submit" class="btn btn-primary">

nocodb-map-viewer/app/public/js/map.js

@@ -25,6 +25,14 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Set up auto-refresh
     refreshInterval = setInterval(loadLocations, CONFIG.REFRESH_INTERVAL);
+    
+    // Add event delegation for dynamically created edit buttons
+    document.addEventListener('click', function(e) {
+        if (e.target.classList.contains('edit-location-btn')) {
+            const locationId = e.target.getAttribute('data-location-id');
+            editLocation(locationId);
+        }
+    });
 });
 
 // Initialize Leaflet map
@@ -86,6 +94,14 @@ function setupEventListeners() {
     
     // Set up geo field synchronization
     setupGeoFieldSync();
+    
+    // Add event listeners for buttons that were using inline onclick
+    document.getElementById('close-edit-footer-btn').addEventListener('click', closeEditFooter);
+    document.getElementById('lookup-address-edit-btn').addEventListener('click', lookupAddressForEdit);
+    document.getElementById('delete-location-btn').addEventListener('click', deleteLocation);
+    document.getElementById('close-modal-btn').addEventListener('click', closeModal);
+    document.getElementById('lookup-address-add-btn').addEventListener('click', lookupAddressForAdd);
+    document.getElementById('cancel-modal-btn').addEventListener('click', closeModal);
 }
 
 // Helper function to get color based on support level
@@ -414,9 +430,9 @@ function createPopupContent(location) {
     
     content += '</div>';
     
-    // Add edit button
+    // Add edit button with data attribute instead of onclick
     content += `<div style="margin-top: 10px; text-align: center;">`;
-    content += `<button class="btn btn-primary btn-sm" onclick="editLocation('${location.id || location.Id}')">✏️ Edit</button>`;
+    content += `<button class="btn btn-primary btn-sm edit-location-btn" data-location-id="${location.id || location.Id}">✏️ Edit</button>`;
     content += '</div>';
     
     content += '</div>';
@@ -549,13 +565,24 @@ function showAddLocationModal(lat, lng) {
     document.getElementById('location-email').value = '';
     document.getElementById('location-unit').value = '';
     document.getElementById('support-level').value = '';
-    document.getElementById('location-address').value = '';
+    const addressInput = document.getElementById('location-address');
+    addressInput.value = 'Looking up address...'; // Show loading message
     document.getElementById('sign').checked = false;
     document.getElementById('sign-size').value = '';
     
     // Show modal
     modal.classList.remove('hidden');
     
+    // Fetch address asynchronously
+    reverseGeocode(lat, lng).then(result => {
+        if (result) {
+            addressInput.value = result.formattedAddress || result.fullAddress;
+        } else {
+            addressInput.value = ''; // Clear if lookup fails
+            showStatus('Could not fetch address automatically', 'warning');
+        }
+    });
+    
     // Focus on first name input
     setTimeout(() => {
         document.getElementById('first-name').focus();
@@ -570,9 +597,17 @@ function closeModal() {
 // Edit location function
 function editLocation(locationId) {
     // Find the location in markers data
-    const location = markers.find(m => m.options.locationData.id === locationId || m.options.locationData.Id === locationId)?.options.locationData;
+    const location = markers.find(m => {
+        const data = m.options.locationData;
+        return String(data.id || data.Id) === String(locationId);
+    })?.options.locationData;
     
     if (!location) {
+        console.error('Location not found for ID:', locationId);
+        console.log('Available locations:', markers.map(m => ({
+            id: m.options.locationData.id || m.options.locationData.Id,
+            name: m.options.locationData['First Name'] + ' ' + m.options.locationData['Last Name']
+        })));
         showStatus('Location not found', 'error');
         return;
     }
@@ -586,7 +621,21 @@ function editLocation(locationId) {
     document.getElementById('edit-location-email').value = location['Email'] || '';
     document.getElementById('edit-location-unit').value = location['Unit Number'] || '';
     document.getElementById('edit-support-level').value = location['Support Level'] || '';
-    document.getElementById('edit-location-address').value = location['Address'] || '';
+    
+    const addressInput = document.getElementById('edit-location-address');
+    addressInput.value = location['Address'] || '';
+    
+    // If no address exists, try to fetch it
+    if (!location['Address'] && location.latitude && location.longitude) {
+        addressInput.value = 'Looking up address...';
+        reverseGeocode(location.latitude, location.longitude).then(result => {
+            if (result && !location['Address']) {
+                addressInput.value = result.formattedAddress || result.fullAddress;
+            } else if (!location['Address']) {
+                addressInput.value = '';
+            }
+        });
+    }
     
     // Handle checkbox
     document.getElementById('edit-sign').checked = location['Sign'] === true || location['Sign'] === 'true' || location['Sign'] === 1;
@@ -871,8 +920,103 @@ window.addEventListener('beforeunload', () => {
     }
 });
 
-// Make closeModal function global for onclick handler
+// Reverse geocode to get address from coordinates
-window.closeModal = closeModal;
+async function reverseGeocode(lat, lng) {
-window.editLocation = editLocation;
+    try {
-window.closeEditFooter = closeEditFooter;
+        // Add a small delay to respect rate limits
-window.deleteLocation = deleteLocation;
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        
+        const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lng}&zoom=18&addressdetails=1`, {
+            headers: {
+                'User-Agent': 'NocoDB Map Viewer 1.0'
+            }
+        });
+        
+        if (!response.ok) {
+            throw new Error('Geocoding service unavailable');
+        }
+        
+        const data = await response.json();
+        
+        if (data.error) {
+            throw new Error(data.error);
+        }
+        
+        // Format the address from the response
+        const address = data.display_name || '';
+        
+        // You can also extract specific components if needed
+        const addressComponents = {
+            house_number: data.address?.house_number || '',
+            road: data.address?.road || '',
+            suburb: data.address?.suburb || data.address?.neighbourhood || '',
+            city: data.address?.city || data.address?.town || data.address?.village || '',
+            state: data.address?.state || '',
+            postcode: data.address?.postcode || '',
+            country: data.address?.country || ''
+        };
+        
+        // Create a formatted address string
+        let formattedAddress = '';
+        if (addressComponents.house_number) formattedAddress += addressComponents.house_number + ' ';
+        if (addressComponents.road) formattedAddress += addressComponents.road + ', ';
+        if (addressComponents.suburb) formattedAddress += addressComponents.suburb + ', ';
+        if (addressComponents.city) formattedAddress += addressComponents.city + ', ';
+        if (addressComponents.state) formattedAddress += addressComponents.state + ' ';
+        if (addressComponents.postcode) formattedAddress += addressComponents.postcode;
+        
+        return {
+            fullAddress: address,
+            formattedAddress: formattedAddress.trim().replace(/,$/, ''),
+            components: addressComponents
+        };
+        
+    } catch (error) {
+        console.error('Reverse geocoding error:', error);
+        return null;
+    }
+}
+
+// Manual address lookup for add form
+function lookupAddressForAdd() {
+    const lat = parseFloat(document.getElementById('location-lat').value);
+    const lng = parseFloat(document.getElementById('location-lng').value);
+    const addressInput = document.getElementById('location-address');
+    
+    if (!isNaN(lat) && !isNaN(lng)) {
+        addressInput.value = 'Looking up address...';
+        reverseGeocode(lat, lng).then(result => {
+            if (result) {
+                addressInput.value = result.formattedAddress || result.fullAddress;
+                showStatus('Address found!', 'success');
+            } else {
+                addressInput.value = '';
+                showStatus('Could not find address for these coordinates', 'error');
+            }
+        });
+    } else {
+        showStatus('Please enter valid coordinates first', 'warning');
+    }
+}
+
+// Manual address lookup for edit form
+function lookupAddressForEdit() {
+    const lat = parseFloat(document.getElementById('edit-location-lat').value);
+    const lng = parseFloat(document.getElementById('edit-location-lng').value);
+    const addressInput = document.getElementById('edit-location-address');
+    
+    if (!isNaN(lat) && !isNaN(lng)) {
+        addressInput.value = 'Looking up address...';
+        reverseGeocode(lat, lng).then(result => {
+            if (result) {
+                addressInput.value = result.formattedAddress || result.fullAddress;
+                showStatus('Address found!', 'success');
+            } else {
+                addressInput.value = '';
+                showStatus('Could not find address for these coordinates', 'error');
+            }
+        });
+    } else {
+        showStatus('Please enter valid coordinates first', 'warning');
+    }
+}