295 lines
9.4 KiB
JavaScript
295 lines
9.4 KiB
JavaScript
// Initialize map
|
|
const map = L.map('map').setView([55.7558, 37.6173], 5);
|
|
|
|
// Add OpenStreetMap tiles
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
maxZoom: 18
|
|
}).addTo(map);
|
|
|
|
// Layers to store map features
|
|
let routeLayers = L.layerGroup().addTo(map);
|
|
let transferMarkers = L.layerGroup().addTo(map);
|
|
|
|
// Transport colors
|
|
const transportColors = {
|
|
'plane': '#ff9800',
|
|
'train': '#1976d2',
|
|
'bus': '#cddc39',
|
|
'other': '#9e9e9e'
|
|
};
|
|
|
|
// Get transport color
|
|
function getTransportColor(feature) {
|
|
const transportType = feature.properties.transport_type || feature.properties.transport || 'other';
|
|
return transportColors[transportType] || transportColors.other;
|
|
}
|
|
|
|
// Get line style based on feature properties
|
|
function getLineStyle(feature) {
|
|
if (feature.properties && feature.properties.synthetic === 'true') {
|
|
return {
|
|
color: getTransportColor(feature),
|
|
weight: 2,
|
|
dashArray: '5, 5',
|
|
opacity: 0.7
|
|
};
|
|
}
|
|
|
|
return {
|
|
color: getTransportColor(feature),
|
|
weight: 3,
|
|
opacity: 0.8
|
|
};
|
|
}
|
|
|
|
// Get marker style based on feature properties
|
|
function getMarkerStyle(feature) {
|
|
const color = feature.properties.stroke_color || getTransportColor(feature);
|
|
const width = feature.properties.stroke_width || 3;
|
|
|
|
return {
|
|
color: color,
|
|
weight: width,
|
|
fillColor: '#fff',
|
|
fillOpacity: 1
|
|
};
|
|
}
|
|
|
|
// Format duration from seconds to readable format
|
|
function formatDuration(seconds) {
|
|
if (!seconds || seconds === 0) return '0h';
|
|
|
|
const hours = Math.floor(seconds / 3600);
|
|
const minutes = Math.floor((seconds % 3600) / 60);
|
|
|
|
if (hours > 0) {
|
|
return `${hours}h ${minutes}m`;
|
|
}
|
|
return `${minutes}m`;
|
|
}
|
|
|
|
// Format connection time
|
|
function formatConnectionTime(connectionTime) {
|
|
if (!connectionTime) return 'N/A';
|
|
return formatDuration(connectionTime);
|
|
}
|
|
|
|
// Render GeoJSON on map
|
|
function renderGeoJSON(geojsonData) {
|
|
// Clear existing layers
|
|
routeLayers.clearLayers();
|
|
transferMarkers.clearLayers();
|
|
|
|
if (!geojsonData || !geojsonData.features) {
|
|
return;
|
|
}
|
|
|
|
// Process features
|
|
geojsonData.features.forEach(feature => {
|
|
const kind = feature.properties?.kind || feature.type;
|
|
|
|
if (kind === 'LineString' || feature.geometry?.type === 'LineString') {
|
|
// LineString feature - route segment
|
|
const style = getLineStyle(feature);
|
|
|
|
L.geoJSON(feature, {
|
|
style: function(feature) {
|
|
return getLineStyle(feature);
|
|
},
|
|
onEachFeature: function(feature, layer) {
|
|
layer.addTo(routeLayers);
|
|
}
|
|
}).addTo(routeLayers);
|
|
} else if (kind === 'Point' || feature.geometry?.type === 'Point') {
|
|
// Point feature - transfer marker
|
|
const markerType = feature.properties?.marker_type;
|
|
|
|
if (markerType === 'transfer' || feature.properties?.is_transfer === 'true') {
|
|
const style = getMarkerStyle(feature);
|
|
|
|
const marker = L.circleMarker([feature.geometry.coordinates[1], feature.geometry.coordinates[0]], {
|
|
color: style.color,
|
|
weight: style.weight,
|
|
fillColor: style.fillColor,
|
|
fillOpacity: style.fillOpacity,
|
|
radius: 6
|
|
});
|
|
|
|
// Create popup content
|
|
let popupContent = `<h4>${feature.properties?.title || 'Transfer'}</h4>`;
|
|
|
|
if (feature.properties?.connection_time_formatted) {
|
|
popupContent += `<p>Connection time: ${feature.properties.connection_time_formatted}</p>`;
|
|
} else if (feature.properties?.connection_time) {
|
|
popupContent += `<p>Connection time: ${formatConnectionTime(feature.properties.connection_time)}</p>`;
|
|
}
|
|
|
|
if (feature.properties?.transfer_type) {
|
|
popupContent += `<p>Transfer type: ${feature.properties.transfer_type}</p>`;
|
|
}
|
|
|
|
marker.bindPopup(popupContent);
|
|
marker.addTo(transferMarkers);
|
|
}
|
|
}
|
|
});
|
|
|
|
// Fit map to bounds if there are features
|
|
if (routeLayers.getLayers().length > 0 || transferMarkers.getLayers().length > 0) {
|
|
const group = new L.featureGroup([...routeLayers.getLayers(), ...transferMarkers.getLayers()]);
|
|
map.fitBounds(group.getBounds().pad(0.1));
|
|
}
|
|
}
|
|
|
|
// Show loading overlay
|
|
function showLoading() {
|
|
document.getElementById('loading-overlay').classList.remove('hidden');
|
|
}
|
|
|
|
// Hide loading overlay
|
|
function hideLoading() {
|
|
document.getElementById('loading-overlay').classList.add('hidden');
|
|
}
|
|
|
|
// Show error message
|
|
function showError(message) {
|
|
const errorEl = document.getElementById('error-message');
|
|
errorEl.textContent = message;
|
|
errorEl.classList.remove('hidden');
|
|
|
|
setTimeout(() => {
|
|
errorEl.classList.add('hidden');
|
|
}, 5000);
|
|
}
|
|
|
|
// Hide error message
|
|
function hideError() {
|
|
document.getElementById('error-message').classList.add('hidden');
|
|
}
|
|
|
|
// Render routes list
|
|
function renderRoutesList(routes) {
|
|
const routesListEl = document.getElementById('routes-list');
|
|
|
|
if (!routes || routes.length === 0) {
|
|
routesListEl.innerHTML = '<p class="empty-message">No routes found</p>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
routes.forEach((route, index) => {
|
|
const duration = formatDuration(route.duration_seconds || route.duration || 0);
|
|
const transfers = route.transfers || route.transfer_count || 0;
|
|
const cost = route.cost || 0;
|
|
|
|
html += `
|
|
<div class="route-card" data-route-id="${route.id}" data-search-id="${route.search_id}">
|
|
<div class="route-card-header">
|
|
<span class="route-duration">${duration}</span>
|
|
<span class="route-cost">${cost > 0 ? cost + ' units' : 'N/A'}</span>
|
|
</div>
|
|
<div class="route-details">
|
|
<span class="route-transfers">${transfers} transfer${transfers !== 1 ? 's' : ''}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
routesListEl.innerHTML = html;
|
|
|
|
// Add click handlers to route cards
|
|
document.querySelectorAll('.route-card').forEach(card => {
|
|
card.addEventListener('click', function() {
|
|
// Remove selected class from all cards
|
|
document.querySelectorAll('.route-card').forEach(c => c.classList.remove('selected'));
|
|
this.classList.add('selected');
|
|
|
|
// Fetch and render GeoJSON for this route
|
|
const searchId = this.dataset.searchId;
|
|
const routeId = this.dataset.routeId;
|
|
fetchGeoJSON(searchId, routeId);
|
|
});
|
|
});
|
|
}
|
|
|
|
// Fetch GeoJSON for a route
|
|
async function fetchGeoJSON(searchId, routeId) {
|
|
try {
|
|
const response = await fetch(`/v1/routes/${searchId}/${routeId}/geojson`);
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to fetch GeoJSON: ${response.statusText}`);
|
|
}
|
|
|
|
const geojsonData = await response.json();
|
|
renderGeoJSON(geojsonData);
|
|
} catch (error) {
|
|
console.error('Error fetching GeoJSON:', error);
|
|
showError('Failed to load route map');
|
|
}
|
|
}
|
|
|
|
// Search for routes
|
|
async function searchRoutes(formData) {
|
|
showLoading();
|
|
hideError();
|
|
|
|
try {
|
|
const response = await fetch('/v1/routes/search', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
from: formData.get('from'),
|
|
to: formData.get('to'),
|
|
date: formData.get('date')
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`Search failed: ${response.statusText}`);
|
|
}
|
|
|
|
const searchData = await response.json();
|
|
|
|
// Render routes list
|
|
if (searchData.routes) {
|
|
renderRoutesList(searchData.routes);
|
|
} else if (searchData.routes === null || searchData.routes === undefined) {
|
|
document.getElementById('routes-list').innerHTML = '<p class="empty-message">No routes found</p>';
|
|
}
|
|
|
|
// If there's only one route, select it automatically
|
|
const routes = searchData.routes || [];
|
|
if (routes.length === 1) {
|
|
const firstCard = document.querySelector('.route-card');
|
|
if (firstCard) {
|
|
firstCard.classList.add('selected');
|
|
fetchGeoJSON(routes[0].search_id, routes[0].id);
|
|
}
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error searching routes:', error);
|
|
showError('Failed to search routes. Please try again.');
|
|
document.getElementById('routes-list').innerHTML = '<p class="empty-message">Search failed</p>';
|
|
} finally {
|
|
hideLoading();
|
|
}
|
|
}
|
|
|
|
// Initialize search form
|
|
document.getElementById('search-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
const formData = new FormData(this);
|
|
searchRoutes(formData);
|
|
});
|
|
|
|
// Set default date to today
|
|
const dateInput = document.getElementById('travel-date');
|
|
const today = new Date().toISOString().split('T')[0];
|
|
dateInput.value = today;
|
|
dateInput.min = today;
|