move completed plan: 2026-08-18-implement-leaflet-frontend.md

docs/plans/completed/2026-08-18-implement-leaflet-frontend.md

@@ -0,0 +1,82 @@
+# Implement Leaflet + OpenStreetMap Frontend
+
+## Overview
+- Add a complete frontend web interface using Leaflet + OpenStreetMap tiles for route visualization
+- Provide a search form for route parameters (from city, to city, date)
+- Display found routes in a list with duration, transfers, and cost
+- Render route geometry as GeoJSON on an interactive map
+- Real segments displayed as solid lines with color by transport type
+- Synthetic segments displayed as dashed lines
+- Transfer points displayed as markers with popup information
+
+## Context
+- Files/components involved:
+  - `static/index.html` - main HTML page with Leaflet + OSM integration
+  - `static/styles.css` - CSS styling for the frontend
+  - `static/app.js` - JavaScript for search form, API calls, and map rendering
+  - `cmd/api/main.go` - update to serve static files and the frontend
+- Related patterns found:
+  - GeoJSON FeatureCollection response from `/v1/routes/{search_id}/{route_id}/geojson`
+  - LineString features with properties: `transport`, `transport_type`, `kind`, `synthetic`, `duration`, `cost`, `is_transfer`, `stroke_color`, `stroke_width`, `stroke_dasharray`
+  - Point features for transfer markers with properties: `marker_type`, `title`, `connection_time`, `connection_time_formatted`, `transfer_type`, `is_transfer`, `stroke_color`, `stroke_width`
+- Dependencies identified:
+  - Leaflet 1.9.4 (CSS and JS from CDN)
+  - OpenStreetMap tiles
+
+## Development Approach
+- **Testing approach**: Regular (code first, then verify)
+- Complete each task fully before moving to the next
+- Make small, focused changes
+- **CRITICAL: ensure all frontend files are properly linked and functional**
+- Maintain backward compatibility with existing API endpoints
+
+## Testing Strategy
+- **Manual testing**: Test search form, route list, map rendering, and popup interactions
+- **UI/UX testing**: Verify responsive layout, loading states, error handling
+
+## Progress Tracking
+- Mark completed items with `[x]` immediately when done
+- Add newly discovered tasks with ➕ prefix
+- Document issues/blockers with ⚠️ prefix
+- Update plan if implementation deviates from original scope
+- Keep plan in sync with actual work done
+
+## What Goes Where
+- **Implementation Steps** (`[ ]` checkboxes): tasks achievable within this codebase - frontend files, Go server updates
+- **Post-Completion** (no checkboxes): items requiring external action - manual testing in browser
+
+## Implementation Steps
+
+### Task 1: Create static directory and HTML structure
+- [x] create `static/` directory
+- [x] create `static/index.html` with Leaflet + OSM integration and search form
+- [x] create `static/styles.css` with styling for layout, routes list, and map
+- [x] create `static/app.js` with API calls and map rendering logic
+
+### Task 2: Update Go server to serve static files
+- [x] update `cmd/api/main.go` to serve static files from `static/` directory
+- [x] add route for `/static/*` to serve CSS, JS, and other assets
+- [x] add route for `/` or `/index.html` to serve the frontend
+
+### Task 3: Verify frontend functionality
+- [x] verify search form works and calls `/v1/routes/search` endpoint (manual test - skipped, not automatable)
+- [x] verify routes list displays correctly with duration, transfers, cost (manual test - skipped, not automatable)
+- [x] verify map renders with Leaflet + OpenStreetMap tiles (manual test - skipped, not automatable)
+- [x] verify GeoJSON is fetched and rendered on the map (manual test - skipped, not automatable)
+- [x] verify transfer markers have popups with connection info (manual test - skipped, not automatable)
+
+## Technical Details
+- Leaflet CSS: `https://unpkg.com/leaflet@1.9.4/dist/leaflet.css`
+- Leaflet JS: `https://unpkg.com/leaflet@1.9.4/dist/leaflet.js`
+- OpenStreetMap tiles: `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`
+- GeoJSON rendering: use `L.geoJSON()` with custom style functions for real vs synthetic edges
+- Transport colors: plane = `#ff9800` (orange), train = `#1976d2` (blue), bus = `#cddc39` (lime)
+
+## Post-Completion
+*Items requiring manual intervention or external systems - no checkboxes, informational only*
+
+**Manual verification**:
+- Test search form in browser
+- Verify map renders correctly with routes
+- Test popup interactions for transfer points
+- Verify responsive layout on different screen sizes