final round of updates. Still need to stabalize first load for the map, having issues for sure; longer load time
This commit is contained in:
@@ -66,7 +66,8 @@
|
||||
<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">
|
||||
<!-- Hidden ID field - don't include in form data -->
|
||||
<input type="hidden" id="edit-location-id" data-exclude="true">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="edit-first-name">First Name</label>
|
||||
@@ -110,7 +111,7 @@
|
||||
<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
|
||||
📍 Lookup Address
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -221,7 +222,7 @@
|
||||
<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
|
||||
📍 Lookup Address
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -228,9 +228,13 @@ function createLocationMarker(location) {
|
||||
const popupContent = createPopupContent(location);
|
||||
marker.bindPopup(popupContent);
|
||||
|
||||
// Add click handler for editing
|
||||
// Add click handler for editing - Store location data on marker
|
||||
marker._locationData = location;
|
||||
marker.on('click', () => {
|
||||
if (currentUser) {
|
||||
// Debug: Log the location object to see its structure
|
||||
console.log('Location clicked:', location);
|
||||
console.log('Available fields:', Object.keys(location));
|
||||
setTimeout(() => openEditForm(location), 100);
|
||||
}
|
||||
});
|
||||
@@ -240,6 +244,9 @@ function createLocationMarker(location) {
|
||||
|
||||
// Create popup content
|
||||
function createPopupContent(location) {
|
||||
// Try to find the ID field
|
||||
const locationId = location.Id || location.id || location.ID || location._id;
|
||||
|
||||
const name = [location['First Name'], location['Last Name']]
|
||||
.filter(Boolean).join(' ') || 'Unknown';
|
||||
const address = location.Address || 'No address';
|
||||
@@ -254,7 +261,7 @@ function createPopupContent(location) {
|
||||
${location.Sign ? '<p>🏁 Has campaign sign</p>' : ''}
|
||||
${location.Notes ? `<p><strong>Notes:</strong> ${escapeHtml(location.Notes)}</p>` : ''}
|
||||
<div class="popup-meta">
|
||||
<p>ID: ${location.Id}</p>
|
||||
<p>ID: ${locationId || 'Unknown'}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -508,7 +515,11 @@ async function handleAddLocation(e) {
|
||||
|
||||
// Convert form data to object
|
||||
for (let [key, value] of formData.entries()) {
|
||||
if (value.trim() !== '') {
|
||||
// Map form field names to NocoDB column names
|
||||
if (key === 'latitude') data.latitude = value.trim();
|
||||
else if (key === 'longitude') data.longitude = value.trim();
|
||||
else if (key === 'Geo-Location') data['Geo-Location'] = value.trim();
|
||||
else if (value.trim() !== '') {
|
||||
data[key] = value.trim();
|
||||
}
|
||||
}
|
||||
@@ -549,8 +560,29 @@ async function handleAddLocation(e) {
|
||||
function openEditForm(location) {
|
||||
currentEditingLocation = location;
|
||||
|
||||
// Debug: Log all possible ID fields
|
||||
console.log('Opening edit form for location:', {
|
||||
'Id': location.Id,
|
||||
'id': location.id,
|
||||
'ID': location.ID,
|
||||
'_id': location._id,
|
||||
'all_keys': Object.keys(location)
|
||||
});
|
||||
|
||||
// Extract ID - check multiple possible field names
|
||||
const locationId = location.Id || location.id || location.ID || location._id;
|
||||
|
||||
if (!locationId) {
|
||||
console.error('No ID found in location object. Available fields:', Object.keys(location));
|
||||
showStatus('Error: Location ID not found. Check console for details.', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Store the ID in a data attribute for later use
|
||||
document.getElementById('edit-location-id').value = locationId;
|
||||
document.getElementById('edit-location-id').setAttribute('data-location-id', locationId);
|
||||
|
||||
// Populate form fields
|
||||
document.getElementById('edit-location-id').value = location.Id || '';
|
||||
document.getElementById('edit-first-name').value = location['First Name'] || '';
|
||||
document.getElementById('edit-last-name').value = location['Last Name'] || '';
|
||||
document.getElementById('edit-location-email').value = location.Email || '';
|
||||
@@ -558,7 +590,7 @@ function openEditForm(location) {
|
||||
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 || '';
|
||||
document.getElementById('edit-sign').checked = location.Sign === true || location.Sign === 'true';
|
||||
document.getElementById('edit-sign').checked = location.Sign === true || location.Sign === 'true' || location.Sign === 1;
|
||||
document.getElementById('edit-sign-size').value = location['Sign Size'] || '';
|
||||
document.getElementById('edit-location-notes').value = location.Notes || '';
|
||||
document.getElementById('edit-location-lat').value = location.latitude || '';
|
||||
@@ -581,12 +613,25 @@ async function handleEditLocation(e) {
|
||||
|
||||
if (!currentEditingLocation) return;
|
||||
|
||||
// Get the stored location ID
|
||||
const locationIdElement = document.getElementById('edit-location-id');
|
||||
const locationId = locationIdElement.getAttribute('data-location-id') || locationIdElement.value;
|
||||
|
||||
if (!locationId || locationId === 'undefined') {
|
||||
showStatus('Error: Location ID not found', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(e.target);
|
||||
const data = { Id: currentEditingLocation.Id };
|
||||
const data = {};
|
||||
|
||||
// Convert form data to object
|
||||
for (let [key, value] of formData.entries()) {
|
||||
if (value.trim() !== '') {
|
||||
// Skip the ID field
|
||||
if (key === 'id' || key === 'Id' || key === 'ID') continue;
|
||||
|
||||
if (value !== null && value !== undefined) {
|
||||
// Don't skip empty strings - they may be intentional field clearing
|
||||
data[key] = value.trim();
|
||||
}
|
||||
}
|
||||
@@ -599,8 +644,12 @@ async function handleEditLocation(e) {
|
||||
// Handle checkbox
|
||||
data.Sign = document.getElementById('edit-sign').checked;
|
||||
|
||||
// Add debugging
|
||||
console.log('Sending update data for ID:', locationId);
|
||||
console.log('Update data:', data);
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/locations/${currentEditingLocation.Id}`, {
|
||||
const response = await fetch(`/api/locations/${locationId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
@@ -608,7 +657,15 @@ async function handleEditLocation(e) {
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
const responseText = await response.text();
|
||||
let result;
|
||||
|
||||
try {
|
||||
result = JSON.parse(responseText);
|
||||
} catch (e) {
|
||||
console.error('Failed to parse response:', responseText);
|
||||
throw new Error(`Server response error: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
showStatus('Location updated successfully!', 'success');
|
||||
@@ -619,7 +676,7 @@ async function handleEditLocation(e) {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating location:', error);
|
||||
showStatus(error.message || 'Failed to update location', 'error');
|
||||
showStatus(`Update failed: ${error.message}`, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -627,12 +684,21 @@ async function handleEditLocation(e) {
|
||||
async function handleDeleteLocation() {
|
||||
if (!currentEditingLocation) return;
|
||||
|
||||
// Get the stored location ID
|
||||
const locationIdElement = document.getElementById('edit-location-id');
|
||||
const locationId = locationIdElement.getAttribute('data-location-id') || locationIdElement.value;
|
||||
|
||||
if (!locationId || locationId === 'undefined') {
|
||||
showStatus('Error: Location ID not found', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm('Are you sure you want to delete this location?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/locations/${currentEditingLocation.Id}`, {
|
||||
const response = await fetch(`/api/locations/${locationId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
@@ -651,51 +717,80 @@ async function handleDeleteLocation() {
|
||||
}
|
||||
}
|
||||
|
||||
// Lookup address
|
||||
// Lookup address based on current coordinates
|
||||
async function lookupAddress(mode) {
|
||||
const addressInput = mode === 'add' ?
|
||||
document.getElementById('location-address') :
|
||||
document.getElementById('edit-location-address');
|
||||
let latInput, lngInput, addressInput;
|
||||
|
||||
const address = addressInput.value.trim();
|
||||
|
||||
if (!address) {
|
||||
showStatus('Please enter an address to lookup', 'warning');
|
||||
if (mode === 'add') {
|
||||
latInput = document.getElementById('location-lat');
|
||||
lngInput = document.getElementById('location-lng');
|
||||
addressInput = document.getElementById('location-address');
|
||||
} else if (mode === 'edit') {
|
||||
latInput = document.getElementById('edit-location-lat');
|
||||
lngInput = document.getElementById('edit-location-lng');
|
||||
addressInput = document.getElementById('edit-location-address');
|
||||
} else {
|
||||
console.error('Invalid lookup mode:', mode);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!latInput || !lngInput || !addressInput) {
|
||||
showStatus('Form elements not found', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const lat = parseFloat(latInput.value);
|
||||
const lng = parseFloat(lngInput.value);
|
||||
|
||||
if (isNaN(lat) || isNaN(lng)) {
|
||||
showStatus('Please enter valid coordinates first', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
const button = mode === 'add' ?
|
||||
document.getElementById('lookup-address-add-btn') :
|
||||
document.getElementById('lookup-address-edit-btn');
|
||||
|
||||
const originalText = button ? button.textContent : '';
|
||||
if (button) {
|
||||
button.disabled = true;
|
||||
button.textContent = 'Looking up...';
|
||||
}
|
||||
|
||||
try {
|
||||
showStatus('Looking up address...', 'info');
|
||||
console.log(`Looking up address for: ${lat}, ${lng}`);
|
||||
const response = await fetch(`/api/geocode/reverse?lat=${lat}&lng=${lng}`);
|
||||
|
||||
const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}&limit=1`);
|
||||
const results = await response.json();
|
||||
|
||||
if (results.length > 0) {
|
||||
const result = results[0];
|
||||
const lat = parseFloat(result.lat);
|
||||
const lng = parseFloat(result.lon);
|
||||
|
||||
// Update form fields
|
||||
if (mode === 'add') {
|
||||
document.getElementById('location-lat').value = lat.toFixed(8);
|
||||
document.getElementById('location-lng').value = lng.toFixed(8);
|
||||
document.getElementById('geo-location').value = `${lat.toFixed(8)};${lng.toFixed(8)}`;
|
||||
} else {
|
||||
document.getElementById('edit-location-lat').value = lat.toFixed(8);
|
||||
document.getElementById('edit-location-lng').value = lng.toFixed(8);
|
||||
document.getElementById('edit-geo-location').value = `${lat.toFixed(8)};${lng.toFixed(8)}`;
|
||||
}
|
||||
|
||||
// Center map on location
|
||||
map.setView([lat, lng], 16);
|
||||
|
||||
showStatus('Address found!', 'success');
|
||||
} else {
|
||||
showStatus('Address not found. Please try a different format.', 'warning');
|
||||
if (!response.ok) {
|
||||
const errorText = await response.text();
|
||||
throw new Error(`Geocoding failed: ${response.status} ${errorText}`);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success && data.data) {
|
||||
// Use the formatted address or full address
|
||||
const address = data.data.formattedAddress || data.data.fullAddress;
|
||||
if (address) {
|
||||
addressInput.value = address;
|
||||
showStatus('Address found!', 'success');
|
||||
} else {
|
||||
showStatus('No address found for these coordinates', 'warning');
|
||||
}
|
||||
} else {
|
||||
showStatus('Address lookup failed', 'warning');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Address lookup error:', error);
|
||||
showStatus('Failed to lookup address', 'error');
|
||||
showStatus(`Address lookup failed: ${error.message}`, 'error');
|
||||
} finally {
|
||||
// Restore button state
|
||||
if (button) {
|
||||
button.disabled = false;
|
||||
button.textContent = originalText;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user