From e1ddebc90ab38d74ee90f2a649a99da24f675449 Mon Sep 17 00:00:00 2001 From: admin Date: Sun, 22 Jun 2025 13:42:46 -0600 Subject: [PATCH] Form updated and working --- nocodb-map-viewer/app/public/index.html | 24 +++- nocodb-map-viewer/app/public/js/map.js | 164 ++++++++++++++++++++++-- 2 files changed, 171 insertions(+), 17 deletions(-) diff --git a/nocodb-map-viewer/app/public/index.html b/nocodb-map-viewer/app/public/index.html index de9a316..435bcca 100644 --- a/nocodb-map-viewer/app/public/index.html +++ b/nocodb-map-viewer/app/public/index.html @@ -60,7 +60,7 @@

Edit Location

- +
@@ -99,7 +99,12 @@
- +
+ + +
@@ -138,7 +143,7 @@
- +
@@ -150,7 +155,7 @@

Add New Location

- +
@@ -193,8 +198,13 @@
- +
+ + +
@@ -236,7 +246,7 @@
-
'; - // Add edit button + // Add edit button with data attribute instead of onclick content += `
`; - content += ``; + content += ``; content += '
'; content += '
'; @@ -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 -window.closeModal = closeModal; -window.editLocation = editLocation; -window.closeEditFooter = closeEditFooter; -window.deleteLocation = deleteLocation; +// Reverse geocode to get address from coordinates +async function reverseGeocode(lat, lng) { + try { + // Add a small delay to respect rate limits + 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'); + } +}