54 lines
2.1 KiB
Markdown
54 lines
2.1 KiB
Markdown
# Web App
|
|
|
|
Purpose: planning interface for BikepackPilot.
|
|
|
|
MVP screens:
|
|
|
|
- Trip setup form.
|
|
- Map view.
|
|
- Stage timeline.
|
|
- POI corridor list.
|
|
- Warnings panel.
|
|
- Export/offline panel.
|
|
|
|
Implementation guidance:
|
|
|
|
- Use shared domain types from `packages/shared`.
|
|
- Use API client generated from or aligned to `schemas/openapi.yaml`.
|
|
- Use MapLibre-compatible rendering when map implementation begins.
|
|
- Start with fixture route rendering if map provider is not configured.
|
|
|
|
## Implemented MVP
|
|
|
|
The current web planner is a Vite/React/MapLibre app. It calls the API provider flow and renders:
|
|
|
|
- trip request controls;
|
|
- full-screen OSM raster tile map;
|
|
- route, stage endpoint, and POI map layers;
|
|
- collapsible left planning/export/stats dock;
|
|
- ordered routing point editor with reorder/delete controls;
|
|
- right-click map actions for `from here`, `via here`, and `to here`;
|
|
- draggable waypoint pins and route-drag insertion of via points;
|
|
- compact floating layer controls;
|
|
- bottom drawer for stages, warnings, gaps, rule cards, POIs, and linked route/elevation profile hover;
|
|
- GPX download and offline manifest actions;
|
|
- structured local report submission with report type, observed time, route-km attachment, confidence payload, localStorage queue fallback, and queued-report sync.
|
|
|
|
Run locally after starting the API:
|
|
|
|
```bash
|
|
npm -w @pikebacker/web run dev
|
|
```
|
|
|
|
Configure the API base with `VITE_API_BASE_URL`, defaulting to `http://localhost:8000`.
|
|
|
|
The route provider selector includes:
|
|
|
|
- `Bikepacking gravel`: calls the API with `provider: "brouter"` and lets the API compare BRouter bike profiles against Pikebacker scoring.
|
|
- `OSRM road demo`: calls the API with `provider: "osrm"` and uses the configured OSRM endpoint.
|
|
- `Mock fixture`: deterministic route and POI fixtures for repeatable tests.
|
|
|
|
The profile tab renders per-coordinate `elevationM` samples when the selected routing provider supplies them. BRouter and mock routes currently do; OSRM demo routes expose only aggregate ascent/descent warnings.
|
|
|
|
The OSM tile layer uses the public OSM raster URL for MVP development and keeps visible OpenStreetMap attribution in the map control.
|