feat: create static directory and frontend files
This commit is contained in:
294
static/app.js
Normal file
294
static/app.js
Normal file
@@ -0,0 +1,294 @@
|
||||
// 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;
|
||||
58
static/index.html
Normal file
58
static/index.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Trip Planner</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
<link rel="stylesheet" href="/static/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-container">
|
||||
<header class="header">
|
||||
<h1>Trip Planner</h1>
|
||||
</header>
|
||||
|
||||
<div class="search-container">
|
||||
<form id="search-form" class="search-form">
|
||||
<div class="form-group">
|
||||
<label for="from-city">From</label>
|
||||
<input type="text" id="from-city" name="from" placeholder="Enter departure city" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="to-city">To</label>
|
||||
<input type="text" id="to-city" name="to" placeholder="Enter destination city" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="travel-date">Date</label>
|
||||
<input type="date" id="travel-date" name="date" required>
|
||||
</div>
|
||||
<button type="submit" id="search-btn" class="search-btn">Search Routes</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="content-container">
|
||||
<div class="routes-panel">
|
||||
<h2>Found Routes</h2>
|
||||
<div id="routes-list" class="routes-list">
|
||||
<p class="empty-message">Search for routes to see results here</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="map-panel">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="loading-overlay" class="loading-overlay hidden">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Searching for routes...</p>
|
||||
</div>
|
||||
|
||||
<div id="error-message" class="error-message hidden"></div>
|
||||
</div>
|
||||
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
292
static/styles.css
Normal file
292
static/styles.css
Normal file
@@ -0,0 +1,292 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: #2c3e50;
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
background-color: #fff;
|
||||
padding: 1rem 2rem;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.search-form {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #1976d2;
|
||||
box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 0.5rem 1.5rem;
|
||||
background-color: #1976d2;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.search-btn:hover {
|
||||
background-color: #1565c0;
|
||||
}
|
||||
|
||||
.search-btn:disabled {
|
||||
background-color: #90caf9;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.routes-panel {
|
||||
width: 350px;
|
||||
background-color: #fff;
|
||||
border-right: 1px solid #ddd;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.routes-panel h2 {
|
||||
padding: 1rem;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #eee;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.routes-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.empty-message {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.route-card {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.route-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-color: #1976d2;
|
||||
}
|
||||
|
||||
.route-card.selected {
|
||||
border-color: #1976d2;
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
|
||||
.route-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.route-duration {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.route-transfers {
|
||||
font-size: 0.875rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.route-cost {
|
||||
font-weight: 600;
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.map-panel {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.loading-overlay.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #1976d2;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loading-overlay p {
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background-color: #e74c3c;
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1001;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.error-message.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Leaflet popup styling */
|
||||
.leaflet-popup-content {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.leaflet-popup-content h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.leaflet-popup-content p {
|
||||
margin: 0.25rem 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Transport type colors */
|
||||
.transport-plane {
|
||||
color: #ff9800;
|
||||
}
|
||||
|
||||
.transport-train {
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.transport-bus {
|
||||
color: #cddc39;
|
||||
}
|
||||
|
||||
/* Responsive layout */
|
||||
@media (max-width: 768px) {
|
||||
.content-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.routes-panel {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.map-panel {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user