`;
return popupContent;
}
/**
* Sets up event listeners for apartment popup suite selection
*/
function setupApartmentPopupListeners(props) {
const suites = props.suites || [];
// Find the popup container in the DOM
const container = document.querySelector('.apartment-building-popup');
if (!container) {
console.log('Apartment popup container not found');
return;
}
const suiteSelector = container.querySelector('.suite-selector');
const suiteDetails = container.querySelector('.suite-details');
if (!suiteSelector || !suiteDetails) {
console.log('Apartment popup elements not found');
return;
}
function updateSuiteDisplay(selectedIndex) {
const suite = suites[selectedIndex];
// Better logic for displaying unit/suite information
let unitLabel = 'Unit';
let unitNumber = suite.suite ? suite.suite.trim() : '';
// If no suite number but has object type that suggests it's a suite
if (!unitNumber && suite.object_type && suite.object_type.toLowerCase().includes('suite')) {
unitNumber = `${selectedIndex + 1}`;
}
// If still no unit number, use sequential numbering
if (!unitNumber) {
unitNumber = `${selectedIndex + 1}`;
}
// Determine if it's a suite or unit based on the data
if (suite.object_type && suite.object_type.toLowerCase().includes('suite')) {
unitLabel = 'Suite';
}
suiteDetails.innerHTML = `
${unitLabel} ${unitNumber}
${suite.object_type || 'Residential Unit'}
${suite.house_number && suite.street_name ? `
📍 ${suite.house_number} ${suite.street_name}
` : ''}
${suite.record_id ? `
ID: ${suite.record_id}
` : ''}
`;
}
// Set up suite selector dropdown event listener
suiteSelector.addEventListener('change', (e) => {
e.stopPropagation();
const selectedIndex = parseInt(e.target.value);
console.log('Suite selected:', selectedIndex);
updateSuiteDisplay(selectedIndex);
});
// Initialize with first suite selected
updateSuiteDisplay(0);
console.log(`Apartment popup suite selector set up for ${suites.length} suites`);
// Set up the "Add to Database" button listener for apartments
const addBtn = container.querySelector('.add-apartment-to-database-btn');
if (addBtn) {
addBtn.addEventListener('click', (e) => {
e.stopPropagation();
const address = addBtn.getAttribute('data-address');
const lat = parseFloat(addBtn.getAttribute('data-lat'));
const lng = parseFloat(addBtn.getAttribute('data-lng'));
const neighborhood = addBtn.getAttribute('data-neighborhood');
const suitesData = JSON.parse(addBtn.getAttribute('data-suites') || '[]');
// Get the currently selected suite from dropdown
const selectedSuiteIndex = parseInt(suiteSelector.value);
const selectedSuite = suitesData[selectedSuiteIndex] || suitesData[0];
// Close the popup first
map.closePopup();
// Open the add modal with pre-filled data
openAddModal(lat, lng);
// Pre-fill the form with Edmonton data, focusing on the selected suite
setTimeout(() => {
prefillAddForm({
address: address,
neighborhood: neighborhood,
lat: lat,
lng: lng,
suite: selectedSuite.suite || '',
objectType: selectedSuite.object_type || '',
notes: `Selected unit from multi-unit building (${suitesData.length} total units). Imported from City of Edmonton data.`,
isMultiUnit: true,
suites: suitesData,
selectedSuite: selectedSuite
});
}, 100);
});
}
}
/**
* Sets up event listeners for single unit popup "Add to Database" button
*/
function setupSingleUnitPopupListeners() {
// Wait for popup to be rendered in DOM
setTimeout(() => {
const addBtn = document.querySelector('.add-to-database-btn');
if (addBtn) {
addBtn.addEventListener('click', (e) => {
e.stopPropagation();
const address = addBtn.getAttribute('data-address');
const lat = parseFloat(addBtn.getAttribute('data-lat'));
const lng = parseFloat(addBtn.getAttribute('data-lng'));
const neighborhood = addBtn.getAttribute('data-neighborhood');
const suite = addBtn.getAttribute('data-suite');
const objectType = addBtn.getAttribute('data-object-type');
// Close the popup first
map.closePopup();
// Open the add modal with pre-filled data
openAddModal(lat, lng);
// Pre-fill the form with Edmonton data
setTimeout(() => {
prefillAddForm({
address: address,
neighborhood: neighborhood,
lat: lat,
lng: lng,
suite: suite,
objectType: objectType,
notes: `Imported from City of Edmonton data.${objectType ? ` (${objectType})` : ''}`,
isMultiUnit: false
});
}, 100);
});
}
}, 50);
}
/**
* Pre-fills the add location form with city data
*/
function prefillAddForm(data) {
try {
// Basic form fields
if (data.address) {
const addressField = document.getElementById('location-address');
if (addressField) {
addressField.value = data.address;
}
}
// Put suite number in the unit field
if (data.suite && data.suite.trim()) {
const unitField = document.getElementById('location-unit');
if (unitField) {
unitField.value = data.suite.trim();
}
}
// Notes field with additional context
const notesField = document.getElementById('location-notes');
if (notesField && data.notes) {
let notes = data.notes;
// Add neighborhood information if available
if (data.neighborhood && data.neighborhood.trim()) {
notes += `\nNeighborhood: ${data.neighborhood}`;
}
// Add object type if available
if (data.objectType && data.objectType.trim()) {
notes += `\nUnit Type: ${data.objectType}`;
}
// For multi-unit buildings, add information about the selected suite
if (data.isMultiUnit && data.selectedSuite) {
notes += `\nSelected Suite: ${data.selectedSuite.suite || 'N/A'}`;
notes += `\nSuite Type: ${data.selectedSuite.object_type || 'N/A'}`;
}
// For single units, add basic suite information
else if (data.suite && data.suite.trim()) {
notes += `\nSuite: ${data.suite}`;
}
notesField.value = notes;
}
// Set coordinates (already set by openAddModal, but ensure they're correct)
const latField = document.getElementById('location-lat');
const lngField = document.getElementById('location-lng');
const geoField = document.getElementById('geo-location');
if (latField && data.lat) {
latField.value = data.lat.toFixed(8);
}
if (lngField && data.lng) {
lngField.value = data.lng.toFixed(8);
}
if (geoField && data.lat && data.lng) {
geoField.value = `${data.lat.toFixed(8)};${data.lng.toFixed(8)}`;
}
console.log('Form pre-filled with city data:', data);
} catch (error) {
console.error('Error pre-filling form:', error);
showStatus('Error pre-filling form with city data', 'error');
}
}