1422 lines
52 KiB
JavaScript
1422 lines
52 KiB
JavaScript
// Free Alberta Food - Main Application
|
|
|
|
class FoodResourceApp {
|
|
constructor() {
|
|
this.resources = []; // Resources displayed in the list (accumulated for infinite scroll)
|
|
this.mapResources = []; // All resources for map display
|
|
this.filteredResources = [];
|
|
this.currentPage = 1;
|
|
this.pageSize = 50;
|
|
this.totalPages = 1;
|
|
this.totalResources = 0;
|
|
this.isLoadingMore = false; // Prevent multiple simultaneous loads
|
|
this.map = null;
|
|
this.directionsMap = null;
|
|
this.markers = [];
|
|
this.routeLayer = null;
|
|
this.userLocation = null;
|
|
this.currentRoute = null;
|
|
this.currentDestination = null;
|
|
this.filters = {
|
|
cities: [], // Multi-select: array of city values
|
|
types: [], // Multi-select: array of type values
|
|
contact: [], // Multi-select: array of contact methods (phone, email, website)
|
|
search: ''
|
|
};
|
|
|
|
this.init();
|
|
}
|
|
|
|
async init() {
|
|
this.bindEvents();
|
|
this.initMap();
|
|
this.setupInfiniteScroll();
|
|
await this.loadFilters();
|
|
await Promise.all([
|
|
this.loadResources(),
|
|
this.loadMapResources()
|
|
]);
|
|
}
|
|
|
|
bindEvents() {
|
|
// Search
|
|
document.getElementById('searchBtn').addEventListener('click', () => this.handleSearch());
|
|
document.getElementById('searchInput').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') this.handleSearch();
|
|
});
|
|
|
|
// Location
|
|
document.getElementById('locationBtn').addEventListener('click', () => this.handleLocation());
|
|
|
|
// Closest Resource
|
|
document.getElementById('closestBtn').addEventListener('click', () => this.handleClosestResource());
|
|
|
|
// Multi-select filters
|
|
this.initMultiSelectFilters();
|
|
|
|
// Resource Modal
|
|
document.querySelectorAll('#resourceModal .modal-overlay, #resourceModal .modal-close').forEach(el => {
|
|
el.addEventListener('click', () => this.closeModal('resourceModal'));
|
|
});
|
|
|
|
// Directions Modal
|
|
document.querySelectorAll('#directionsModal .modal-overlay, #directionsModal .modal-close').forEach(el => {
|
|
el.addEventListener('click', () => this.closeModal('directionsModal'));
|
|
});
|
|
|
|
// Update Modal
|
|
document.querySelectorAll('#updateModal .modal-overlay, #updateModal .modal-close').forEach(el => {
|
|
el.addEventListener('click', () => this.closeModal('updateModal'));
|
|
});
|
|
|
|
// Update form submission
|
|
document.getElementById('updateForm').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
this.submitUpdateRequest();
|
|
});
|
|
|
|
// Travel mode change
|
|
document.getElementById('travelMode').addEventListener('change', (e) => {
|
|
if (this.currentDestination && this.userLocation) {
|
|
this.getDirections(this.currentDestination, e.target.value);
|
|
}
|
|
});
|
|
|
|
// Print directions
|
|
document.getElementById('printDirectionsBtn').addEventListener('click', () => this.printDirections());
|
|
|
|
// Escape key to close modals
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape') {
|
|
this.closeModal('resourceModal');
|
|
this.closeModal('directionsModal');
|
|
this.closeModal('updateModal');
|
|
this.closeModal('addListingModal');
|
|
}
|
|
});
|
|
|
|
// Event delegation for resource list
|
|
document.getElementById('resourceList').addEventListener('click', (e) => {
|
|
// Handle directions button click
|
|
const directionsBtn = e.target.closest('.directions-btn');
|
|
if (directionsBtn) {
|
|
e.stopPropagation();
|
|
const resourceId = parseInt(directionsBtn.dataset.resourceId);
|
|
this.showDirectionsTo(resourceId);
|
|
return;
|
|
}
|
|
|
|
// Handle update button click on card
|
|
const updateBtn = e.target.closest('.update-btn');
|
|
if (updateBtn) {
|
|
e.stopPropagation();
|
|
const resourceId = parseInt(updateBtn.dataset.resourceId);
|
|
this.openUpdateModal(resourceId);
|
|
return;
|
|
}
|
|
|
|
// Handle retry button click
|
|
const retryBtn = e.target.closest('.retry-btn');
|
|
if (retryBtn) {
|
|
this.loadResources();
|
|
return;
|
|
}
|
|
|
|
// Handle resource card click (open modal)
|
|
const resourceCard = e.target.closest('.resource-card');
|
|
if (resourceCard && !e.target.closest('a')) {
|
|
const resourceId = parseInt(resourceCard.dataset.resourceId);
|
|
this.openModal(resourceId);
|
|
}
|
|
});
|
|
|
|
// Event delegation for modal body (directions and update buttons in modal)
|
|
document.getElementById('modalBody').addEventListener('click', (e) => {
|
|
const directionsBtn = e.target.closest('.modal-directions-btn');
|
|
if (directionsBtn) {
|
|
const resourceId = parseInt(directionsBtn.dataset.resourceId);
|
|
this.showDirectionsTo(resourceId);
|
|
this.closeModal('resourceModal');
|
|
}
|
|
|
|
const updateBtn = e.target.closest('.modal-update-btn');
|
|
if (updateBtn) {
|
|
const resourceId = parseInt(updateBtn.dataset.resourceId);
|
|
this.openUpdateModal(resourceId);
|
|
this.closeModal('resourceModal');
|
|
}
|
|
});
|
|
|
|
// Event delegation for direction steps
|
|
document.getElementById('directionsSteps').addEventListener('click', (e) => {
|
|
const step = e.target.closest('.direction-step');
|
|
if (step) {
|
|
const stepIndex = parseInt(step.dataset.stepIndex);
|
|
this.zoomToStep(stepIndex);
|
|
}
|
|
});
|
|
|
|
// Add Listing button
|
|
document.getElementById('addListingBtn').addEventListener('click', () => this.openAddListingModal());
|
|
|
|
// Add Listing modal
|
|
document.querySelectorAll('#addListingModal .modal-overlay, #addListingModal .modal-close').forEach(el => {
|
|
el.addEventListener('click', () => this.closeModal('addListingModal'));
|
|
});
|
|
|
|
// Add Listing form submission
|
|
document.getElementById('addListingForm').addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
this.submitNewListing();
|
|
});
|
|
}
|
|
|
|
initMultiSelectFilters() {
|
|
// Initialize each multi-select
|
|
['cityFilterContainer', 'typeFilterContainer', 'contactFilterContainer'].forEach(containerId => {
|
|
const container = document.getElementById(containerId);
|
|
const btn = container.querySelector('.multi-select-btn');
|
|
const dropdown = container.querySelector('.multi-select-dropdown');
|
|
const clearBtn = container.querySelector('.multi-select-clear');
|
|
const applyBtn = container.querySelector('.multi-select-apply');
|
|
const searchInput = container.querySelector('.multi-select-search-input');
|
|
|
|
// Toggle dropdown
|
|
btn.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
this.closeAllMultiSelects(container);
|
|
container.classList.toggle('open');
|
|
dropdown.classList.toggle('hidden');
|
|
if (searchInput && !dropdown.classList.contains('hidden')) {
|
|
searchInput.focus();
|
|
}
|
|
});
|
|
|
|
// Search filter (for city filter)
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', (e) => {
|
|
const query = e.target.value.toLowerCase();
|
|
const options = container.querySelectorAll('.multi-select-option');
|
|
options.forEach(opt => {
|
|
const text = opt.textContent.toLowerCase();
|
|
opt.style.display = text.includes(query) ? '' : 'none';
|
|
});
|
|
});
|
|
}
|
|
|
|
// Clear button
|
|
clearBtn.addEventListener('click', () => {
|
|
const checkboxes = container.querySelectorAll('input[type="checkbox"]');
|
|
checkboxes.forEach(cb => cb.checked = false);
|
|
});
|
|
|
|
// Apply button
|
|
applyBtn.addEventListener('click', () => {
|
|
this.applyMultiSelectFilter(containerId);
|
|
container.classList.remove('open');
|
|
dropdown.classList.add('hidden');
|
|
});
|
|
});
|
|
|
|
// Close dropdowns when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.multi-select')) {
|
|
this.closeAllMultiSelects();
|
|
}
|
|
});
|
|
}
|
|
|
|
closeAllMultiSelects(except = null) {
|
|
document.querySelectorAll('.multi-select').forEach(ms => {
|
|
if (ms !== except) {
|
|
ms.classList.remove('open');
|
|
ms.querySelector('.multi-select-dropdown').classList.add('hidden');
|
|
}
|
|
});
|
|
}
|
|
|
|
applyMultiSelectFilter(containerId) {
|
|
const container = document.getElementById(containerId);
|
|
const checkboxes = container.querySelectorAll('input[type="checkbox"]:checked');
|
|
const values = Array.from(checkboxes).map(cb => cb.value);
|
|
const label = container.querySelector('.multi-select-label');
|
|
|
|
if (containerId === 'cityFilterContainer') {
|
|
this.filters.cities = values;
|
|
label.innerHTML = values.length === 0 ? 'All Cities' :
|
|
values.length === 1 ? values[0] :
|
|
`Cities <span class="multi-select-badge">${values.length}</span>`;
|
|
} else if (containerId === 'typeFilterContainer') {
|
|
this.filters.types = values;
|
|
label.innerHTML = values.length === 0 ? 'All Types' :
|
|
values.length === 1 ? this.formatType(values[0]) :
|
|
`Types <span class="multi-select-badge">${values.length}</span>`;
|
|
} else if (containerId === 'contactFilterContainer') {
|
|
this.filters.contact = values;
|
|
label.innerHTML = values.length === 0 ? 'Any Contact' :
|
|
values.length === 1 ? `Has ${values[0].charAt(0).toUpperCase() + values[0].slice(1)}` :
|
|
`Contact <span class="multi-select-badge">${values.length}</span>`;
|
|
}
|
|
|
|
this.resetAndReload();
|
|
}
|
|
|
|
async loadFilters() {
|
|
try {
|
|
const [citiesRes, typesRes] = await Promise.all([
|
|
fetch('/api/cities'),
|
|
fetch('/api/types')
|
|
]);
|
|
|
|
const citiesData = await citiesRes.json();
|
|
const typesData = await typesRes.json();
|
|
|
|
// Populate city filter options
|
|
const cityOptions = document.getElementById('cityFilterOptions');
|
|
cityOptions.innerHTML = citiesData.cities.map(city => `
|
|
<label class="multi-select-option">
|
|
<input type="checkbox" value="${this.escapeHtml(city.city)}">
|
|
<span>${this.escapeHtml(city.city)}</span>
|
|
<span class="count">(${city.count})</span>
|
|
</label>
|
|
`).join('');
|
|
|
|
// Populate type filter options
|
|
const typeOptions = document.getElementById('typeFilterOptions');
|
|
typeOptions.innerHTML = typesData.types.map(type => `
|
|
<label class="multi-select-option">
|
|
<input type="checkbox" value="${type.value}">
|
|
<span>${this.escapeHtml(type.label)}</span>
|
|
<span class="count">(${type.count})</span>
|
|
</label>
|
|
`).join('');
|
|
|
|
} catch (error) {
|
|
console.error('Failed to load filters:', error);
|
|
}
|
|
}
|
|
|
|
async loadResources(append = false) {
|
|
if (this.isLoadingMore) return;
|
|
|
|
this.isLoadingMore = true;
|
|
if (!append) {
|
|
this.showLoading(true);
|
|
} else {
|
|
this.showLoadingMore(true);
|
|
}
|
|
|
|
try {
|
|
const params = new URLSearchParams({
|
|
page: this.currentPage,
|
|
limit: this.pageSize
|
|
});
|
|
|
|
// Multi-select filters: pass as comma-separated values
|
|
if (this.filters.cities.length > 0) params.append('cities', this.filters.cities.join(','));
|
|
if (this.filters.types.length > 0) params.append('types', this.filters.types.join(','));
|
|
if (this.filters.contact.length > 0) params.append('contact', this.filters.contact.join(','));
|
|
|
|
let url = '/api/resources?' + params.toString();
|
|
|
|
if (this.filters.search) {
|
|
url = `/api/resources/search?q=${encodeURIComponent(this.filters.search)}`;
|
|
if (this.filters.cities.length > 0) url += `&cities=${encodeURIComponent(this.filters.cities.join(','))}`;
|
|
if (this.filters.types.length > 0) url += `&types=${encodeURIComponent(this.filters.types.join(','))}`;
|
|
if (this.filters.contact.length > 0) url += `&contact=${encodeURIComponent(this.filters.contact.join(','))}`;
|
|
}
|
|
|
|
const response = await fetch(url);
|
|
const data = await response.json();
|
|
|
|
const newResources = data.resources || [];
|
|
|
|
if (append) {
|
|
this.resources = [...this.resources, ...newResources];
|
|
} else {
|
|
this.resources = newResources;
|
|
}
|
|
|
|
if (data.pagination) {
|
|
this.totalPages = data.pagination.pages;
|
|
this.totalResources = data.pagination.total;
|
|
this.currentPage = data.pagination.page;
|
|
}
|
|
|
|
this.renderResources(append);
|
|
this.updateResultCount();
|
|
} catch (error) {
|
|
console.error('Failed to load resources:', error);
|
|
if (!append) {
|
|
this.showError('Failed to load resources. Please try again.');
|
|
}
|
|
} finally {
|
|
this.isLoadingMore = false;
|
|
if (!append) {
|
|
this.showLoading(false);
|
|
} else {
|
|
this.showLoadingMore(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
async loadMapResources() {
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (this.filters.cities.length > 0) params.append('cities', this.filters.cities.join(','));
|
|
if (this.filters.types.length > 0) params.append('types', this.filters.types.join(','));
|
|
if (this.filters.contact.length > 0) params.append('contact', this.filters.contact.join(','));
|
|
|
|
const url = '/api/resources/map' + (params.toString() ? '?' + params.toString() : '');
|
|
const response = await fetch(url);
|
|
const data = await response.json();
|
|
|
|
this.mapResources = data.resources || [];
|
|
this.updateMapMarkers();
|
|
} catch (error) {
|
|
console.error('Failed to load map resources:', error);
|
|
}
|
|
}
|
|
|
|
resetAndReload() {
|
|
this.currentPage = 1;
|
|
this.resources = [];
|
|
Promise.all([
|
|
this.loadResources(),
|
|
this.loadMapResources()
|
|
]);
|
|
}
|
|
|
|
setupInfiniteScroll() {
|
|
const listContainer = document.getElementById('listContainer');
|
|
|
|
listContainer.addEventListener('scroll', () => {
|
|
if (this.isLoadingMore) return;
|
|
|
|
const { scrollTop, scrollHeight, clientHeight } = listContainer;
|
|
|
|
// Load more when user scrolls to within 200px of the bottom
|
|
if (scrollTop + clientHeight >= scrollHeight - 200) {
|
|
this.loadMoreResources();
|
|
}
|
|
});
|
|
}
|
|
|
|
loadMoreResources() {
|
|
if (this.isLoadingMore) return;
|
|
if (this.currentPage >= this.totalPages) return;
|
|
|
|
this.currentPage++;
|
|
this.loadResources(true);
|
|
}
|
|
|
|
showLoadingMore(show) {
|
|
let loadingMore = document.getElementById('loadingMoreIndicator');
|
|
|
|
if (!loadingMore) {
|
|
loadingMore = document.createElement('div');
|
|
loadingMore.id = 'loadingMoreIndicator';
|
|
loadingMore.className = 'loading-more-indicator hidden';
|
|
loadingMore.innerHTML = '<div class="spinner"></div><span>Loading more...</span>';
|
|
document.getElementById('resourceList').after(loadingMore);
|
|
}
|
|
|
|
if (show) {
|
|
loadingMore.classList.remove('hidden');
|
|
} else {
|
|
loadingMore.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
async handleSearch() {
|
|
const searchInput = document.getElementById('searchInput');
|
|
this.filters.search = searchInput.value.trim();
|
|
this.resetAndReload();
|
|
}
|
|
|
|
async handleLocation() {
|
|
if (!navigator.geolocation) {
|
|
alert('Geolocation is not supported by your browser');
|
|
return;
|
|
}
|
|
|
|
const btn = document.getElementById('locationBtn');
|
|
btn.disabled = true;
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
async (position) => {
|
|
const { latitude, longitude } = position.coords;
|
|
this.userLocation = { lat: latitude, lng: longitude };
|
|
|
|
try {
|
|
const response = await fetch(
|
|
`/api/resources/nearby?lat=${latitude}&lng=${longitude}&radius=25`
|
|
);
|
|
const data = await response.json();
|
|
|
|
this.resources = data.resources || [];
|
|
this.renderResources();
|
|
this.updateResultCount();
|
|
|
|
this.updateMapMarkers();
|
|
|
|
if (this.map) {
|
|
this.map.setView([latitude, longitude], 14);
|
|
this.addUserLocationMarker();
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch nearby resources:', error);
|
|
}
|
|
|
|
btn.disabled = false;
|
|
},
|
|
(error) => {
|
|
let message = 'Unable to get your location.';
|
|
if (error.message.includes('secure origins') || error.code === 1) {
|
|
message = 'Location access requires HTTPS. Please use the "Open in Maps" button to navigate, or access this site via HTTPS.';
|
|
} else {
|
|
message += ' ' + error.message;
|
|
}
|
|
alert(message);
|
|
btn.disabled = false;
|
|
}
|
|
);
|
|
}
|
|
|
|
async handleClosestResource() {
|
|
if (!navigator.geolocation) {
|
|
alert('Geolocation is not supported by your browser');
|
|
return;
|
|
}
|
|
|
|
const btn = document.getElementById('closestBtn');
|
|
btn.disabled = true;
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
async (position) => {
|
|
const { latitude, longitude } = position.coords;
|
|
this.userLocation = { lat: latitude, lng: longitude };
|
|
|
|
try {
|
|
// Fetch nearby resources and find the closest with a full address
|
|
const response = await fetch(
|
|
`/api/resources/nearby?lat=${latitude}&lng=${longitude}&radius=100&limit=20`
|
|
);
|
|
const data = await response.json();
|
|
|
|
// Filter to only resources with a full street address (not just coordinates)
|
|
const resourcesWithAddress = (data.resources || []).filter(r => {
|
|
if (!r.address || !r.city) return false;
|
|
const addr = r.address.trim();
|
|
// Must have address with street number, not PO Box or general delivery
|
|
return addr &&
|
|
!addr.toLowerCase().startsWith('po box') &&
|
|
!addr.toLowerCase().startsWith('p.o. box') &&
|
|
!addr.toLowerCase().startsWith('general delivery') &&
|
|
/\d/.test(addr);
|
|
});
|
|
|
|
// Debug: show all resources with distances and address info
|
|
console.log('Nearby resources with distances:');
|
|
data.resources.forEach((r, i) => {
|
|
const hasAddr = r.address && r.city && /\d/.test(r.address);
|
|
console.log(` ${i + 1}. [${r.distance_km?.toFixed(2)} km] ${r.name} (ID: ${r.id}) ${hasAddr ? '✓' : '✗ no address'}`);
|
|
});
|
|
|
|
// Check if UofA/University is in the list
|
|
const uniResources = data.resources.filter(r =>
|
|
r.name.toLowerCase().includes('university') ||
|
|
r.name.toLowerCase().includes('uofa') ||
|
|
r.name.toLowerCase().includes('u of a')
|
|
);
|
|
if (uniResources.length > 0) {
|
|
console.log('University-related resources found:', uniResources.map(r => `${r.name} at ${r.distance_km?.toFixed(2)} km`));
|
|
}
|
|
|
|
console.log('Filtered resources with address:', resourcesWithAddress.length);
|
|
|
|
if (resourcesWithAddress.length > 0) {
|
|
const closest = resourcesWithAddress[0];
|
|
console.log('Closest resource:', closest.id, closest.name, `${closest.distance_km?.toFixed(2)} km`);
|
|
|
|
// Fetch the full resource details first to ensure consistency
|
|
const detailResponse = await fetch(`/api/resources/${closest.id}`);
|
|
const detailData = await detailResponse.json();
|
|
const resource = detailData.resource;
|
|
|
|
if (resource) {
|
|
console.log('Fetched resource:', resource.id, resource.name, resource.latitude, resource.longitude);
|
|
|
|
// Open the modal for this resource
|
|
await this.openModal(resource.id);
|
|
|
|
// Zoom to show both user and the fetched resource's coordinates
|
|
if (this.map && resource.latitude && resource.longitude) {
|
|
this.addUserLocationMarker();
|
|
const bounds = L.latLngBounds(
|
|
[latitude, longitude],
|
|
[resource.latitude, resource.longitude]
|
|
);
|
|
this.map.fitBounds(bounds.pad(0.3));
|
|
}
|
|
} else {
|
|
alert('Could not load resource details.');
|
|
}
|
|
} else {
|
|
alert('No resources with full addresses found nearby. Try expanding your search.');
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch closest resource:', error);
|
|
alert('Failed to find closest resource. Please try again.');
|
|
}
|
|
|
|
btn.disabled = false;
|
|
},
|
|
(error) => {
|
|
let message = 'Unable to get your location.';
|
|
if (error.message.includes('secure origins') || error.code === 1) {
|
|
message = 'Location access requires HTTPS or permission. Please enable location access.';
|
|
} else {
|
|
message += ' ' + error.message;
|
|
}
|
|
alert(message);
|
|
btn.disabled = false;
|
|
}
|
|
);
|
|
}
|
|
|
|
addUserLocationMarker() {
|
|
if (!this.map || !this.userLocation) return;
|
|
|
|
// Remove existing user marker if any
|
|
if (this.userMarker) {
|
|
this.userMarker.remove();
|
|
}
|
|
|
|
this.userMarker = L.marker([this.userLocation.lat, this.userLocation.lng], {
|
|
icon: L.divIcon({
|
|
className: 'user-location-marker',
|
|
html: '<div style="background:#3b82f6;width:16px;height:16px;border-radius:50%;border:3px solid white;box-shadow:0 2px 4px rgba(0,0,0,0.3)"></div>',
|
|
iconSize: [16, 16]
|
|
})
|
|
}).addTo(this.map).bindPopup('Your location');
|
|
}
|
|
|
|
initMap() {
|
|
this.map = L.map('map').setView([53.9333, -116.5765], 6);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(this.map);
|
|
}
|
|
|
|
initDirectionsMap() {
|
|
if (this.directionsMap) {
|
|
this.directionsMap.remove();
|
|
}
|
|
|
|
this.directionsMap = L.map('directionsMap').setView([53.9333, -116.5765], 10);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(this.directionsMap);
|
|
}
|
|
|
|
updateMapMarkers() {
|
|
if (!this.map) return;
|
|
|
|
this.markers.forEach(marker => marker.remove());
|
|
this.markers = [];
|
|
|
|
// Use mapResources (all resources) for map display
|
|
const resourcesWithCoords = this.mapResources.filter(r => r.latitude && r.longitude);
|
|
|
|
resourcesWithCoords.forEach(resource => {
|
|
const popupContent = document.createElement('div');
|
|
popupContent.innerHTML = `
|
|
<div class="popup-title">${this.escapeHtml(resource.name)}</div>
|
|
<div class="popup-address">${this.escapeHtml(resource.address || resource.city || '')}</div>
|
|
<div style="margin-top:8px;display:flex;gap:4px">
|
|
<button class="popup-details-btn" data-resource-id="${resource.id}" style="padding:4px 8px;cursor:pointer;font-size:12px">Details</button>
|
|
<button class="popup-directions-btn" data-resource-id="${resource.id}" style="padding:4px 8px;cursor:pointer;font-size:12px;background:#2563eb;color:white;border:none;border-radius:4px">Directions</button>
|
|
</div>
|
|
`;
|
|
|
|
// Bind events to popup buttons
|
|
popupContent.querySelector('.popup-details-btn').addEventListener('click', (e) => {
|
|
this.openModal(parseInt(e.target.dataset.resourceId));
|
|
});
|
|
popupContent.querySelector('.popup-directions-btn').addEventListener('click', (e) => {
|
|
this.showDirectionsTo(parseInt(e.target.dataset.resourceId));
|
|
});
|
|
|
|
const marker = L.marker([resource.latitude, resource.longitude])
|
|
.addTo(this.map)
|
|
.bindPopup(popupContent);
|
|
|
|
this.markers.push(marker);
|
|
});
|
|
|
|
if (this.markers.length > 0) {
|
|
const group = L.featureGroup(this.markers);
|
|
this.map.fitBounds(group.getBounds().pad(0.1));
|
|
}
|
|
}
|
|
|
|
renderResources(append = false) {
|
|
const container = document.getElementById('resourceList');
|
|
const noResults = document.getElementById('noResults');
|
|
|
|
if (this.resources.length === 0) {
|
|
container.innerHTML = '';
|
|
noResults.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
noResults.classList.add('hidden');
|
|
|
|
const resourcesHtml = this.resources.map(resource => `
|
|
<div class="resource-card" data-resource-id="${resource.id}">
|
|
<div class="resource-header">
|
|
<h3 class="resource-name">${this.escapeHtml(resource.name)}</h3>
|
|
<span class="resource-type ${resource.resource_type}">${this.formatType(resource.resource_type)}</span>
|
|
</div>
|
|
<div class="resource-click-hint">Click for more details</div>
|
|
<div class="resource-info">
|
|
${resource.address ? `
|
|
<div class="resource-info-row">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
|
<circle cx="12" cy="10" r="3"></circle>
|
|
</svg>
|
|
<span>${this.escapeHtml(resource.address)}${resource.city ? `, ${resource.city}` : ''}</span>
|
|
</div>
|
|
` : resource.city ? `
|
|
<div class="resource-info-row">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
|
<circle cx="12" cy="10" r="3"></circle>
|
|
</svg>
|
|
<span>${this.escapeHtml(resource.city)}</span>
|
|
</div>
|
|
` : ''}
|
|
${resource.phone ? `
|
|
<div class="resource-info-row">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
|
|
</svg>
|
|
<span>${this.escapeHtml(resource.phone)}</span>
|
|
</div>
|
|
` : ''}
|
|
${resource.email ? `
|
|
<div class="resource-info-row">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
|
<polyline points="22,6 12,13 2,6"></polyline>
|
|
</svg>
|
|
<span>${this.escapeHtml(resource.email)}</span>
|
|
</div>
|
|
` : ''}
|
|
${resource.hours_of_operation ? `
|
|
<div class="resource-info-row">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<polyline points="12 6 12 12 16 14"></polyline>
|
|
</svg>
|
|
<span>${this.escapeHtml(resource.hours_of_operation.substring(0, 60))}${resource.hours_of_operation.length > 60 ? '...' : ''}</span>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
<div class="resource-actions">
|
|
${resource.phone ? `
|
|
<a href="tel:${resource.phone}" class="resource-action-btn primary">Call</a>
|
|
` : ''}
|
|
${this.hasLocationData(resource) ? `
|
|
<button class="resource-action-btn directions-btn" data-resource-id="${resource.id}">Directions</button>
|
|
<a href="${this.getMapsUrl(resource)}" target="_blank" rel="noopener" class="resource-action-btn maps-btn">Open in Maps</a>
|
|
` : ''}
|
|
${resource.website ? `
|
|
<a href="${resource.website}" target="_blank" rel="noopener" class="resource-action-btn">Website</a>
|
|
` : ''}
|
|
${this.hasIncompleteInfo(resource) ? `
|
|
<button class="resource-action-btn update-btn" data-resource-id="${resource.id}" title="Help improve this listing">Update</button>
|
|
` : ''}
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
|
|
// For infinite scroll: always replace since we accumulate in this.resources
|
|
container.innerHTML = resourcesHtml;
|
|
}
|
|
|
|
async openModal(id) {
|
|
try {
|
|
const response = await fetch(`/api/resources/${id}`);
|
|
const data = await response.json();
|
|
const resource = data.resource;
|
|
|
|
if (!resource) {
|
|
alert('Resource not found');
|
|
return;
|
|
}
|
|
|
|
const modalBody = document.getElementById('modalBody');
|
|
modalBody.innerHTML = `
|
|
<div class="modal-header">
|
|
<h2 class="modal-title">${this.escapeHtml(resource.name)}</h2>
|
|
<span class="resource-type ${resource.resource_type}">${this.formatType(resource.resource_type)}</span>
|
|
</div>
|
|
|
|
${resource.description ? `
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">Description</div>
|
|
<div class="modal-section-content">${this.escapeHtml(resource.description)}</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
${resource.address || resource.city ? `
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">Location</div>
|
|
<div class="modal-section-content">
|
|
${resource.address ? this.escapeHtml(resource.address) + '<br>' : ''}
|
|
${resource.city ? this.escapeHtml(resource.city) : ''}${resource.province ? ', ' + resource.province : ''}
|
|
${resource.postal_code ? ' ' + resource.postal_code : ''}
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
${resource.phone || resource.email || resource.website ? `
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">Contact</div>
|
|
<div class="modal-section-content">
|
|
${resource.phone ? `Phone: <a href="tel:${resource.phone}">${this.escapeHtml(resource.phone)}</a><br>` : ''}
|
|
${resource.email ? `Email: <a href="mailto:${resource.email}">${this.escapeHtml(resource.email)}</a><br>` : ''}
|
|
${resource.website ? `Website: <a href="${resource.website}" target="_blank" rel="noopener">${this.escapeHtml(resource.website)}</a>` : ''}
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
${resource.hours_of_operation ? `
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">Hours of Operation</div>
|
|
<div class="modal-section-content">${this.escapeHtml(resource.hours_of_operation)}</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
${resource.eligibility ? `
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">Eligibility</div>
|
|
<div class="modal-section-content">${this.escapeHtml(resource.eligibility)}</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
${resource.services_offered ? `
|
|
<div class="modal-section">
|
|
<div class="modal-section-title">Services Offered</div>
|
|
<div class="modal-section-content">${this.escapeHtml(resource.services_offered)}</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
<div class="modal-actions">
|
|
${resource.phone ? `<a href="tel:${resource.phone}" class="resource-action-btn primary">Call Now</a>` : ''}
|
|
${this.hasLocationData(resource) ? `
|
|
<button class="resource-action-btn modal-directions-btn" data-resource-id="${resource.id}">Get Directions</button>
|
|
<a href="${this.getMapsUrl(resource)}" target="_blank" rel="noopener" class="resource-action-btn maps-btn">Open in Maps</a>
|
|
` : ''}
|
|
${resource.website ? `<a href="${resource.website}" target="_blank" rel="noopener" class="resource-action-btn">Visit Website</a>` : ''}
|
|
</div>
|
|
|
|
<div class="modal-update-section">
|
|
<button class="resource-action-btn modal-update-btn" data-resource-id="${resource.id}">Update This Listing</button>
|
|
</div>
|
|
|
|
<div style="margin-top:1rem;font-size:0.75rem;color:var(--text-light)">
|
|
Last updated: ${new Date(resource.updated_at).toLocaleDateString()}
|
|
${resource.source_url ? ` | <a href="${resource.source_url}" target="_blank" rel="noopener">Source</a>` : ''}
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('resourceModal').classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
} catch (error) {
|
|
console.error('Failed to load resource details:', error);
|
|
alert('Failed to load resource details');
|
|
}
|
|
}
|
|
|
|
async showDirectionsTo(resourceId) {
|
|
// Get user location first if not available
|
|
if (!this.userLocation) {
|
|
const gotLocation = await this.getUserLocation();
|
|
if (!gotLocation) {
|
|
alert('Please enable location access to get directions');
|
|
return;
|
|
}
|
|
}
|
|
|
|
// Get resource details
|
|
try {
|
|
const response = await fetch(`/api/resources/${resourceId}`);
|
|
const data = await response.json();
|
|
const resource = data.resource;
|
|
|
|
if (!resource || (!resource.latitude && !resource.address)) {
|
|
alert('Location not available for this resource');
|
|
return;
|
|
}
|
|
|
|
this.currentDestination = resource;
|
|
|
|
// If no coordinates, try to geocode the address
|
|
if (!resource.latitude || !resource.longitude) {
|
|
try {
|
|
const geoResponse = await fetch(`/api/geocode?address=${encodeURIComponent(resource.address + ', ' + (resource.city || 'Alberta'))}`);
|
|
const geoData = await geoResponse.json();
|
|
if (geoData.success) {
|
|
resource.latitude = geoData.result.latitude;
|
|
resource.longitude = geoData.result.longitude;
|
|
} else {
|
|
alert('Could not locate this address');
|
|
return;
|
|
}
|
|
} catch (e) {
|
|
alert('Could not locate this address');
|
|
return;
|
|
}
|
|
}
|
|
|
|
this.currentDestination = resource;
|
|
const mode = document.getElementById('travelMode').value;
|
|
await this.getDirections(resource, mode);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to get directions:', error);
|
|
alert('Failed to get directions');
|
|
}
|
|
}
|
|
|
|
getUserLocation() {
|
|
return new Promise((resolve) => {
|
|
if (this.userLocation) {
|
|
resolve(true);
|
|
return;
|
|
}
|
|
|
|
if (!navigator.geolocation) {
|
|
resolve(false);
|
|
return;
|
|
}
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
this.userLocation = {
|
|
lat: position.coords.latitude,
|
|
lng: position.coords.longitude
|
|
};
|
|
resolve(true);
|
|
},
|
|
() => {
|
|
resolve(false);
|
|
},
|
|
{ timeout: 10000 }
|
|
);
|
|
});
|
|
}
|
|
|
|
async getDirections(destination, mode = 'driving') {
|
|
try {
|
|
const response = await fetch(
|
|
`/api/directions?startLat=${this.userLocation.lat}&startLng=${this.userLocation.lng}&endLat=${destination.latitude}&endLng=${destination.longitude}&profile=${mode}`
|
|
);
|
|
|
|
const data = await response.json();
|
|
|
|
if (!data.success) {
|
|
throw new Error(data.error || 'Failed to get directions');
|
|
}
|
|
|
|
this.currentRoute = data.route;
|
|
this.displayDirections(destination, data.route, mode);
|
|
|
|
} catch (error) {
|
|
console.error('Directions error:', error);
|
|
alert('Could not calculate route: ' + error.message);
|
|
}
|
|
}
|
|
|
|
displayDirections(destination, route, mode) {
|
|
// Show modal
|
|
document.getElementById('directionsModal').classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
// Update summary
|
|
const modeText = mode === 'driving' ? 'Drive' : mode === 'walking' ? 'Walk' : 'Cycle';
|
|
document.getElementById('directionsSummary').innerHTML = `
|
|
<div class="directions-summary-item">
|
|
<span class="directions-summary-label">Distance</span>
|
|
<span class="directions-summary-value">${route.distanceText}</span>
|
|
</div>
|
|
<div class="directions-summary-item">
|
|
<span class="directions-summary-label">${modeText} Time</span>
|
|
<span class="directions-summary-value">${route.durationText}</span>
|
|
</div>
|
|
<div class="directions-summary-item">
|
|
<span class="directions-summary-label">To</span>
|
|
<span class="directions-summary-value">${this.escapeHtml(destination.name)}</span>
|
|
</div>
|
|
`;
|
|
|
|
// Initialize directions map
|
|
setTimeout(() => {
|
|
this.initDirectionsMap();
|
|
this.drawRoute(route, destination);
|
|
}, 100);
|
|
|
|
// Display turn-by-turn steps
|
|
this.displaySteps(route.steps);
|
|
}
|
|
|
|
drawRoute(route, destination) {
|
|
if (!this.directionsMap) return;
|
|
|
|
// Clear existing route
|
|
if (this.routeLayer) {
|
|
this.routeLayer.remove();
|
|
}
|
|
|
|
// Draw route line
|
|
const coordinates = route.geometry.coordinates.map(coord => [coord[1], coord[0]]);
|
|
this.routeLayer = L.polyline(coordinates, {
|
|
color: '#2563eb',
|
|
weight: 5,
|
|
opacity: 0.8
|
|
}).addTo(this.directionsMap);
|
|
|
|
// Add start marker (user location)
|
|
L.marker([this.userLocation.lat, this.userLocation.lng], {
|
|
icon: L.divIcon({
|
|
className: 'start-marker',
|
|
html: '<div style="background:#10b981;width:20px;height:20px;border-radius:50%;border:3px solid white;box-shadow:0 2px 4px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;color:white;font-size:12px;font-weight:bold">A</div>',
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10]
|
|
})
|
|
}).addTo(this.directionsMap).bindPopup('Your location');
|
|
|
|
// Add destination marker
|
|
L.marker([destination.latitude, destination.longitude], {
|
|
icon: L.divIcon({
|
|
className: 'end-marker',
|
|
html: '<div style="background:#dc2626;width:20px;height:20px;border-radius:50%;border:3px solid white;box-shadow:0 2px 4px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;color:white;font-size:12px;font-weight:bold">B</div>',
|
|
iconSize: [20, 20],
|
|
iconAnchor: [10, 10]
|
|
})
|
|
}).addTo(this.directionsMap).bindPopup(destination.name);
|
|
|
|
// Fit map to route bounds
|
|
this.directionsMap.fitBounds(route.bounds, { padding: [30, 30] });
|
|
}
|
|
|
|
displaySteps(steps) {
|
|
const container = document.getElementById('directionsSteps');
|
|
|
|
container.innerHTML = steps.map((step, index) => {
|
|
let numberClass = '';
|
|
if (index === 0) numberClass = 'start';
|
|
else if (index === steps.length - 1) numberClass = 'end';
|
|
|
|
return `
|
|
<div class="direction-step" data-step-index="${index}">
|
|
<div class="direction-step-number ${numberClass}">${index + 1}</div>
|
|
<div class="direction-step-content">
|
|
<div class="direction-step-instruction">${this.escapeHtml(step.instruction)}</div>
|
|
<div class="direction-step-meta">${step.distanceText} - ${step.durationText}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
zoomToStep(stepIndex) {
|
|
if (!this.directionsMap || !this.currentRoute) return;
|
|
|
|
const step = this.currentRoute.steps[stepIndex];
|
|
if (step && step.maneuver && step.maneuver.location) {
|
|
this.directionsMap.setView(step.maneuver.location, 16);
|
|
}
|
|
}
|
|
|
|
printDirections() {
|
|
if (!this.currentRoute || !this.currentDestination) return;
|
|
|
|
const printContent = document.getElementById('printDirections');
|
|
const printDate = document.getElementById('printDate');
|
|
const route = this.currentRoute;
|
|
const dest = this.currentDestination;
|
|
const mode = document.getElementById('travelMode').value;
|
|
const modeText = mode === 'driving' ? 'Drive' : mode === 'walking' ? 'Walk' : 'Cycle';
|
|
const modeIcon = mode === 'driving' ? 'By car' : mode === 'walking' ? 'On foot' : 'By bicycle';
|
|
|
|
// Set the print date
|
|
const now = new Date();
|
|
printDate.textContent = `Generated on ${now.toLocaleDateString('en-US', {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
hour: 'numeric',
|
|
minute: '2-digit'
|
|
})}`;
|
|
|
|
// Build address string
|
|
const addressParts = [];
|
|
if (dest.address) addressParts.push(dest.address);
|
|
if (dest.city) addressParts.push(dest.city);
|
|
if (dest.province) addressParts.push(dest.province);
|
|
if (dest.postal_code) addressParts.push(dest.postal_code);
|
|
const fullAddress = addressParts.join(', ');
|
|
|
|
printContent.innerHTML = `
|
|
<div class="print-summary">
|
|
<div class="print-summary-item">
|
|
<span class="print-summary-label">Distance</span>
|
|
<span class="print-summary-value">${route.distanceText}</span>
|
|
</div>
|
|
<div class="print-summary-item">
|
|
<span class="print-summary-label">${modeText} Time</span>
|
|
<span class="print-summary-value">${route.durationText}</span>
|
|
</div>
|
|
<div class="print-summary-item">
|
|
<span class="print-summary-label">Travel Mode</span>
|
|
<span class="print-summary-value">${modeIcon}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="print-destination">
|
|
<div class="print-destination-label">Your Destination</div>
|
|
<h2>${this.escapeHtml(dest.name)}</h2>
|
|
${fullAddress ? `<p>${this.escapeHtml(fullAddress)}</p>` : ''}
|
|
${(dest.phone || dest.email || dest.website) ? `
|
|
<div class="print-destination-contact">
|
|
${dest.phone ? `<p><strong>Phone:</strong> ${this.escapeHtml(dest.phone)}</p>` : ''}
|
|
${dest.email ? `<p><strong>Email:</strong> ${this.escapeHtml(dest.email)}</p>` : ''}
|
|
${dest.website ? `<p><strong>Website:</strong> ${this.escapeHtml(dest.website)}</p>` : ''}
|
|
</div>
|
|
` : ''}
|
|
${dest.hours_of_operation ? `<p><strong>Hours:</strong> ${this.escapeHtml(dest.hours_of_operation)}</p>` : ''}
|
|
</div>
|
|
|
|
<div class="print-steps-header">Turn-by-Turn Directions</div>
|
|
<div class="print-steps">
|
|
${route.steps.map((step, index) => {
|
|
let stepClass = '';
|
|
if (index === 0) stepClass = 'start';
|
|
else if (index === route.steps.length - 1) stepClass = 'end';
|
|
|
|
return `
|
|
<div class="print-step">
|
|
<div class="print-step-number ${stepClass}">${index + 1}</div>
|
|
<div class="print-step-content">
|
|
<div class="print-step-instruction">${this.escapeHtml(step.instruction)}</div>
|
|
<div class="print-step-distance">${step.distanceText}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('')}
|
|
</div>
|
|
`;
|
|
|
|
window.print();
|
|
}
|
|
|
|
async openUpdateModal(resourceId) {
|
|
try {
|
|
const response = await fetch(`/api/resources/${resourceId}`);
|
|
const data = await response.json();
|
|
const resource = data.resource;
|
|
|
|
if (!resource) {
|
|
alert('Resource not found');
|
|
return;
|
|
}
|
|
|
|
// Store resource ID
|
|
document.getElementById('updateResourceId').value = resourceId;
|
|
|
|
// Clear form
|
|
document.getElementById('updateForm').reset();
|
|
|
|
// Pre-populate fields with current values as placeholders
|
|
document.getElementById('proposedName').placeholder = resource.name || 'Resource name';
|
|
document.getElementById('proposedResourceType').value = '';
|
|
document.getElementById('proposedCity').placeholder = resource.city || 'City';
|
|
document.getElementById('proposedAddress').placeholder = resource.address || 'Street address';
|
|
document.getElementById('proposedPhone').placeholder = resource.phone || 'Phone number';
|
|
document.getElementById('proposedEmail').placeholder = resource.email || 'Contact email';
|
|
document.getElementById('proposedWebsite').placeholder = resource.website || 'https://...';
|
|
document.getElementById('proposedHours').placeholder = resource.hours_of_operation || 'Hours of operation';
|
|
document.getElementById('proposedDescription').placeholder = resource.description || 'Description';
|
|
document.getElementById('proposedEligibility').placeholder = resource.eligibility || 'Eligibility requirements';
|
|
document.getElementById('proposedServices').placeholder = resource.services_offered || 'Services offered';
|
|
|
|
// Show modal
|
|
document.getElementById('updateModal').classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
} catch (error) {
|
|
console.error('Failed to open update modal:', error);
|
|
alert('Failed to load resource details');
|
|
}
|
|
}
|
|
|
|
async submitUpdateRequest() {
|
|
const resourceId = document.getElementById('updateResourceId').value;
|
|
const submitterEmail = document.getElementById('submitterEmail').value.trim();
|
|
const submitterName = document.getElementById('submitterName').value.trim();
|
|
|
|
if (!submitterEmail) {
|
|
alert('Please enter your email address');
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
submitter_email: submitterEmail,
|
|
submitter_name: submitterName || null,
|
|
proposed_name: document.getElementById('proposedName').value.trim() || null,
|
|
proposed_resource_type: document.getElementById('proposedResourceType').value || null,
|
|
proposed_city: document.getElementById('proposedCity').value.trim() || null,
|
|
proposed_address: document.getElementById('proposedAddress').value.trim() || null,
|
|
proposed_phone: document.getElementById('proposedPhone').value.trim() || null,
|
|
proposed_email: document.getElementById('proposedEmail').value.trim() || null,
|
|
proposed_website: document.getElementById('proposedWebsite').value.trim() || null,
|
|
proposed_hours_of_operation: document.getElementById('proposedHours').value.trim() || null,
|
|
proposed_description: document.getElementById('proposedDescription').value.trim() || null,
|
|
proposed_eligibility: document.getElementById('proposedEligibility').value.trim() || null,
|
|
proposed_services_offered: document.getElementById('proposedServices').value.trim() || null,
|
|
additional_notes: document.getElementById('additionalNotes').value.trim() || null
|
|
};
|
|
|
|
// Check if at least one change is proposed
|
|
const hasChanges = Object.entries(data)
|
|
.filter(([key]) => key.startsWith('proposed_'))
|
|
.some(([, value]) => value !== null);
|
|
|
|
if (!hasChanges && !data.additional_notes) {
|
|
alert('Please enter at least one proposed change or note');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`/api/resources/${resourceId}/update-request`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
alert('Thank you! Your update request has been submitted and will be reviewed by our team.');
|
|
this.closeModal('updateModal');
|
|
} else {
|
|
alert(result.error || 'Failed to submit update request');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to submit update request:', error);
|
|
alert('Failed to submit update request. Please try again.');
|
|
}
|
|
}
|
|
|
|
openAddListingModal() {
|
|
// Clear form
|
|
document.getElementById('addListingForm').reset();
|
|
|
|
// Show modal
|
|
document.getElementById('addListingModal').classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
async submitNewListing() {
|
|
const submitterEmail = document.getElementById('newListingSubmitterEmail').value.trim();
|
|
const name = document.getElementById('newListingName').value.trim();
|
|
|
|
if (!submitterEmail) {
|
|
alert('Please enter your email address');
|
|
return;
|
|
}
|
|
|
|
if (!name) {
|
|
alert('Please enter a name for the listing');
|
|
return;
|
|
}
|
|
|
|
const data = {
|
|
submitter_email: submitterEmail,
|
|
submitter_name: document.getElementById('newListingSubmitterName').value.trim() || null,
|
|
name: name,
|
|
resource_type: document.getElementById('newListingResourceType').value || 'other',
|
|
city: document.getElementById('newListingCity').value.trim() || null,
|
|
address: document.getElementById('newListingAddress').value.trim() || null,
|
|
phone: document.getElementById('newListingPhone').value.trim() || null,
|
|
email: document.getElementById('newListingEmail').value.trim() || null,
|
|
website: document.getElementById('newListingWebsite').value.trim() || null,
|
|
hours_of_operation: document.getElementById('newListingHours').value.trim() || null,
|
|
description: document.getElementById('newListingDescription').value.trim() || null,
|
|
eligibility: document.getElementById('newListingEligibility').value.trim() || null,
|
|
services_offered: document.getElementById('newListingServices').value.trim() || null,
|
|
additional_notes: document.getElementById('newListingNotes').value.trim() || null
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/api/listings/submit', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
alert('Thank you! Your listing has been submitted and will be reviewed by our team.');
|
|
this.closeModal('addListingModal');
|
|
} else {
|
|
alert(result.error || 'Failed to submit listing');
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Failed to submit listing:', error);
|
|
alert('Failed to submit listing. Please try again.');
|
|
}
|
|
}
|
|
|
|
closeModal(modalId) {
|
|
document.getElementById(modalId).classList.add('hidden');
|
|
document.body.style.overflow = '';
|
|
|
|
// Clean up directions map
|
|
if (modalId === 'directionsModal' && this.directionsMap) {
|
|
this.directionsMap.remove();
|
|
this.directionsMap = null;
|
|
}
|
|
}
|
|
|
|
updateResultCount() {
|
|
const count = document.getElementById('resultCount');
|
|
if (this.totalResources > 0 && this.resources.length < this.totalResources) {
|
|
count.textContent = `Showing ${this.resources.length} of ${this.totalResources} resources`;
|
|
} else {
|
|
count.textContent = `${this.resources.length} resource${this.resources.length !== 1 ? 's' : ''}`;
|
|
}
|
|
}
|
|
|
|
showLoading(show) {
|
|
const loading = document.getElementById('loadingIndicator');
|
|
const list = document.getElementById('resourceList');
|
|
|
|
if (show) {
|
|
loading.classList.remove('hidden');
|
|
list.innerHTML = '';
|
|
} else {
|
|
loading.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
showError(message) {
|
|
const container = document.getElementById('resourceList');
|
|
container.innerHTML = `
|
|
<div class="no-results">
|
|
<p>${message}</p>
|
|
<button class="resource-action-btn retry-btn" style="margin-top:1rem">Try Again</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
formatType(type) {
|
|
const types = {
|
|
'food_bank': 'Food Bank',
|
|
'community_meal': 'Community Meal',
|
|
'hamper': 'Food Hamper',
|
|
'pantry': 'Food Pantry',
|
|
'soup_kitchen': 'Soup Kitchen',
|
|
'mobile_food': 'Mobile Food',
|
|
'grocery_program': 'Grocery Program',
|
|
'other': 'Other'
|
|
};
|
|
return types[type] || type;
|
|
}
|
|
|
|
escapeHtml(text) {
|
|
if (!text) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
hasLocationData(resource) {
|
|
// Check if resource has enough location data for directions/maps
|
|
// Must have a valid street address (with number) or valid coordinates
|
|
|
|
// Check for valid coordinates
|
|
if (resource.latitude && resource.longitude) {
|
|
const lat = parseFloat(resource.latitude);
|
|
const lng = parseFloat(resource.longitude);
|
|
// Validate coordinates are in Alberta region (roughly)
|
|
if (!isNaN(lat) && !isNaN(lng) && lat >= 48 && lat <= 60 && lng >= -120 && lng <= -110) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
// Check for valid street address
|
|
if (resource.address && resource.city) {
|
|
const addr = resource.address.trim();
|
|
// Skip PO Boxes, general delivery, and addresses without street numbers
|
|
if (addr &&
|
|
!addr.toLowerCase().startsWith('po box') &&
|
|
!addr.toLowerCase().startsWith('p.o. box') &&
|
|
!addr.toLowerCase().startsWith('general delivery') &&
|
|
/\d/.test(addr)) { // Must contain at least one digit (street number)
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
hasIncompleteInfo(resource) {
|
|
// Check if resource is missing important information
|
|
return !resource.phone ||
|
|
!resource.address ||
|
|
!this.hasLocationData(resource);
|
|
}
|
|
|
|
getMapsUrl(resource) {
|
|
// Build a search query for maps - prefer address for better label in Maps app
|
|
const parts = [];
|
|
if (resource.address) parts.push(resource.address);
|
|
if (resource.city) parts.push(resource.city);
|
|
parts.push(resource.province || 'Alberta');
|
|
if (resource.postal_code) parts.push(resource.postal_code);
|
|
|
|
// Use address if we have at least city
|
|
if (parts.length >= 2) {
|
|
const query = encodeURIComponent(parts.join(', '));
|
|
return `https://www.google.com/maps/search/?api=1&query=${query}`;
|
|
}
|
|
|
|
// Fall back to coordinates if no address info
|
|
if (resource.latitude && resource.longitude) {
|
|
return `https://www.google.com/maps/search/?api=1&query=${resource.latitude},${resource.longitude}`;
|
|
}
|
|
|
|
// Last resort - just the name
|
|
return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(resource.name + ', Alberta')}`;
|
|
}
|
|
}
|
|
|
|
// Initialize app
|
|
const app = new FoodResourceApp();
|