mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-05-20 22:54:42 +02:00
Compare commits
No commits in common. "master" and "satellite-s1" have entirely different histories.
master
...
satellite-
15 changed files with 1075 additions and 2784 deletions
|
|
@ -1,427 +0,0 @@
|
|||
# OFFROUTE — Off-Network Effort-Based Routing Architecture
|
||||
|
||||
**Status:** Draft
|
||||
**Author:** Matt / Claude
|
||||
**Date:** 2026-05-07
|
||||
**Canonical location:** `matt/refactored-recon` alongside PROJECT-BIBLE.md, NAV-INTEGRATION-v4.md
|
||||
|
||||
---
|
||||
|
||||
## 1. Vision
|
||||
|
||||
From any arbitrary point in the backcountry — no trails, no roads, no signal — route via effort cost and safety to the nearest trail, to a BLM/forest road, to a paved road, to home. Four segments, one continuous path, one GeoJSON response.
|
||||
|
||||
The system serves two interfaces:
|
||||
- **Navi frontend** (`navi.echo6.co`) — visual route overlay on the map
|
||||
- **Aurora via Meshtastic** — text-based step-by-step directions for a lost person with no map display
|
||||
|
||||
This capability does not exist in any open-source consumer product. CalTopo, OnX, Gaia GPS, AllTrails — all route on-network only. The military has Primordial Ground Guidance (closed-source ATAK plugin). We are building the open, self-hosted equivalent.
|
||||
|
||||
---
|
||||
|
||||
## 2. The Routing Chain
|
||||
|
||||
```
|
||||
[Lost person]
|
||||
│
|
||||
▼
|
||||
┌──────────────────────────────────────────┐
|
||||
│ Segment 1: WILDERNESS → TRAIL │
|
||||
│ Engine: Raster cost-surface pathfinder │
|
||||
│ Cost: slope effort + vegetation + │
|
||||
│ water barriers + land ownership │
|
||||
│ Output: lat/lon waypoint sequence │
|
||||
└──────────────────────────────────────────┘
|
||||
│ snap to nearest trail entry point
|
||||
▼
|
||||
┌──────────────────────────────────────────┐
|
||||
│ Segment 2: TRAIL → BLM/FOREST ROAD │
|
||||
│ Engine: Valhalla (pedestrian/MTB) │
|
||||
│ Cost: elevation-aware hike/bike profile │
|
||||
└──────────────────────────────────────────┘
|
||||
│ transition to road network
|
||||
▼
|
||||
┌──────────────────────────────────────────┐
|
||||
│ Segment 3: BLM ROAD → PAVED ROAD │
|
||||
│ Engine: Valhalla (auto/motorcycle) │
|
||||
│ Cost: standard + surface preference │
|
||||
└──────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌──────────────────────────────────────────┐
|
||||
│ Segment 4: PAVED ROAD → HOME │
|
||||
│ Engine: Valhalla (auto) │
|
||||
│ Cost: standard routing │
|
||||
└──────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
Segments 2–4 already work today via Valhalla. **Segment 1 is the engineering gap.**
|
||||
|
||||
---
|
||||
|
||||
## 3. Endpoint Design
|
||||
|
||||
### `POST /api/offroute`
|
||||
|
||||
**Request:**
|
||||
```json
|
||||
{
|
||||
"start": { "lat": 43.512, "lon": -114.823 },
|
||||
"destination": { "lat": 42.736, "lon": -114.514 },
|
||||
"mode": "foot",
|
||||
"max_search_km": 15
|
||||
}
|
||||
```
|
||||
|
||||
**Modes:** `foot` | `mtb` | `atv`
|
||||
|
||||
**Response:**
|
||||
```json
|
||||
{
|
||||
"segments": [
|
||||
{
|
||||
"type": "wilderness",
|
||||
"geometry": { "type": "LineString", "coordinates": [...] },
|
||||
"distance_m": 4200,
|
||||
"elevation_gain_m": 310,
|
||||
"elevation_loss_m": 85,
|
||||
"estimated_time_min": 72,
|
||||
"surface": "cross-country",
|
||||
"instructions": [
|
||||
{ "bearing": 245, "distance_m": 320, "terrain": "sagebrush slope", "grade_pct": 8 },
|
||||
{ "bearing": 260, "distance_m": 510, "terrain": "drainage crossing", "grade_pct": -12 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "trail",
|
||||
"geometry": { "type": "LineString", "coordinates": [...] },
|
||||
"trail_name": "Pioneer Cabin Trail",
|
||||
"distance_m": 6100,
|
||||
"estimated_time_min": 85
|
||||
},
|
||||
{
|
||||
"type": "road_unpaved",
|
||||
"geometry": { "type": "LineString", "coordinates": [...] },
|
||||
"road_name": "FR-227",
|
||||
"distance_m": 12400,
|
||||
"estimated_time_min": 22
|
||||
},
|
||||
{
|
||||
"type": "road_paved",
|
||||
"geometry": { "type": "LineString", "coordinates": [...] },
|
||||
"distance_m": 34000,
|
||||
"estimated_time_min": 28
|
||||
}
|
||||
],
|
||||
"total_distance_m": 56700,
|
||||
"total_time_min": 207,
|
||||
"confidence": 0.82
|
||||
}
|
||||
```
|
||||
|
||||
**Aurora tool integration:** Add `offroute` to `nav_tools.py` alongside existing `route()` and `reverse_geocode()`. The semantic query router gets a new embedding for "I'm lost, help me get home" / "navigate to nearest road" type queries.
|
||||
|
||||
---
|
||||
|
||||
## 4. Pathfinder Architecture (Segment 1)
|
||||
|
||||
### 4.1 No Pre-Rendered Slope Rasters
|
||||
|
||||
The pathfinder does NOT need pre-computed slope layers, GDAL processing, or reprojection. It reads elevation directly:
|
||||
|
||||
1. Routing request arrives with a start point and search radius
|
||||
2. Determine which PMTiles z12 tiles cover the search area
|
||||
3. Fetch + decode Terrarium tiles from `planet-dem.pmtiles` → numpy elevation arrays
|
||||
4. Cache decoded arrays keyed by (z, x, y) — LRU, in-memory
|
||||
5. A* / Dijkstra runs on the elevation grid, computing grade between neighbors on the fly
|
||||
6. Cost function = `grade → effort model → multiply by land-cover friction → check barriers`
|
||||
|
||||
### 4.2 Elevation Data Source
|
||||
|
||||
**Primary:** `planet-dem.pmtiles` (658GB on pi-nas, served via nginx at `/tiles/planet-dem.pmtiles`)
|
||||
- Mapterhorn, Copernicus GLO-30 source, Terrarium encoding (lossless WebP)
|
||||
- z12 with 512px tiles = ~13–16m pixels at Idaho latitude
|
||||
- 30m effective resolution (upsampled from source)
|
||||
- Decode: `elevation = (R * 256 + G + B/256) - 32768` (metres, EGM2008)
|
||||
- Precision: ~3.9mm quantization — far below source noise (~4m RMSE)
|
||||
|
||||
**Upgrade path:** USGS 3DEP 1/3 arc-second (10m bare-earth DTM, CONUS). Same architecture, denser grid. Free download. Address when/if 30m proves insufficient for safety.
|
||||
|
||||
**Regional GeoTIFFs** (203GB on NAS at `/mnt/nas/nav/contour-rebuild/dem/`): Keep as insurance until this pipeline is validated, then delete.
|
||||
|
||||
### 4.3 Cost Function
|
||||
|
||||
For each candidate move from cell A to cell B:
|
||||
|
||||
```python
|
||||
def travel_cost(elev_a, elev_b, distance_m, friction_ab):
|
||||
grade = (elev_b - elev_a) / distance_m
|
||||
|
||||
# Safety gate — impassable above threshold
|
||||
slope_deg = math.degrees(math.atan(abs(grade)))
|
||||
if slope_deg > MAX_SLOPE[mode]: # foot=40°, mtb=25°, atv=30°
|
||||
return INF
|
||||
|
||||
# Effort model (speed in km/h)
|
||||
if mode == "foot":
|
||||
# Tobler off-path hiking function
|
||||
speed = 0.6 * 6.0 * math.exp(-3.5 * abs(grade + 0.05))
|
||||
elif mode == "mtb":
|
||||
# Herzog wheeled-transport polynomial (crit_slope=8%)
|
||||
speed = herzog_wheeled(grade, crit_slope=0.08, base_speed=12)
|
||||
elif mode == "atv":
|
||||
# Herzog with higher base speed and slope tolerance
|
||||
speed = herzog_wheeled(grade, crit_slope=0.15, base_speed=25)
|
||||
|
||||
# Time cost (seconds to traverse this cell)
|
||||
time_s = (distance_m / 1000.0) / speed * 3600.0
|
||||
|
||||
# Multiply by land-cover friction
|
||||
time_s *= friction_ab
|
||||
|
||||
return time_s
|
||||
```
|
||||
|
||||
**Tobler off-path:** `W = 0.6 × 6 × exp(-3.5 × |S + 0.05|)` km/h
|
||||
Peak speed 3.6 km/h at ~-2.86° (slight downhill). The 0.6 multiplier is the off-trail penalty.
|
||||
|
||||
**Herzog wheeled-transport:** sixth-degree polynomial fitted to wheeled vehicle energy expenditure. Has a `crit_slope` parameter where switchbacks become more efficient than direct climb. Best published proxy for MTB/ATV in open-source literature.
|
||||
|
||||
**Reference implementations:** R `leastcostpath` package contains 30+ validated cost functions including Tobler, Tobler off-path, Irmischer-Clarke (male/female/off-path, fitted to USMA cadets), Naismith-Langmuir, Herzog, Minetti, Campbell 2019 percentiles. Port as needed.
|
||||
|
||||
### 4.4 Friction Layers (Cost Surface Inputs)
|
||||
|
||||
All pre-computed offline, tiled, cached. Updated infrequently.
|
||||
|
||||
| Layer | Source | Resolution | Purpose | Update Frequency |
|
||||
|---|---|---|---|---|
|
||||
| Elevation | planet-dem.pmtiles | ~30m (z12) | Slope/grade calculation | Static |
|
||||
| Land cover | NLCD | 30m | Vegetation traversal friction | ~Annual |
|
||||
| Waterways | OSM | Rasterized from vectors | Barrier (∞ cost) except at bridges/fords | Weekly from planet PBF |
|
||||
| Water bodies | OSM `natural=water` | Rasterized polygons | Barrier (∞) | Weekly |
|
||||
| Cliffs | OSM `natural=cliff` | Rasterized lines | Barrier (∞) | Weekly |
|
||||
| Land ownership | PAD-US | Polygon raster | Access restrictions per mode | ~Quarterly |
|
||||
| Trails/roads | OSM + USFS | Rasterized lines | Low-cost corridors (negative friction) | Weekly |
|
||||
|
||||
**NLCD friction mapping (foot mode example):**
|
||||
|
||||
| NLCD Class | Description | Friction Multiplier |
|
||||
|---|---|---|
|
||||
| 11 | Open Water | ∞ |
|
||||
| 21 | Developed, Open Space | 1.0 |
|
||||
| 22 | Developed, Low Intensity | 1.2 |
|
||||
| 31 | Barren Land | 1.1 |
|
||||
| 41 | Deciduous Forest | 1.8 |
|
||||
| 42 | Evergreen Forest | 2.0 |
|
||||
| 43 | Mixed Forest | 1.9 |
|
||||
| 52 | Shrub/Scrub | 1.5 |
|
||||
| 71 | Grassland/Herbaceous | 1.2 |
|
||||
| 90 | Woody Wetlands | 3.5 |
|
||||
| 95 | Emergent Herbaceous Wetlands | 4.0 |
|
||||
|
||||
Mode-specific adjustments: MTB and ATV get higher penalties on forest/wetland. ATV gets ∞ on wilderness-designated areas (PAD-US `Des_Tp = WA`).
|
||||
|
||||
**Trail burn-in:** Rasterize OSM trails/tracks as cells with reduced friction (trail cell = 0.5× base, track = 0.3×, road = 0.1×). The pathfinder naturally gravitates toward and follows these corridors without special logic.
|
||||
|
||||
### 4.5 Engine Choice
|
||||
|
||||
**Recommended: scikit-image `MCP_Geometric` for initial build.**
|
||||
|
||||
- Cython Dijkstra, 1–5 seconds on 2–4M cell grids
|
||||
- `find_costs(start)` computes cumulative cost surface once; `traceback(target)` for any target is O(path length) — reuse for "nearest trail," "nearest road," and destination all in one pass
|
||||
- `MCP_Flexible` subclass allows overriding `_travel_cost()` for anisotropic costs (uphill ≠ downhill)
|
||||
- Pure Python integration with Flask backend
|
||||
- Memory OK up to ~20–40M cells on 24GB
|
||||
|
||||
**Performance path: Rust `pathfinding` crate as a microservice.**
|
||||
|
||||
- A*, Dijkstra, HPA* (hierarchical) all available
|
||||
- Custom successor function encodes anisotropic cost
|
||||
- Sub-second on 4M cells
|
||||
- `hierarchical_pathfinding` crate enables multi-resolution: coarse pass → refine in corridor
|
||||
- Wrap in Axum HTTP server, call from Flask
|
||||
|
||||
**Decision:** Start with scikit-image Python. If latency is a problem, rewrite the inner loop in Rust. The cost function, data pipeline, and API don't change.
|
||||
|
||||
### 4.6 Multi-Resolution Strategy
|
||||
|
||||
For routes where the wilderness segment exceeds ~10km, full-resolution pathfinding on the entire search area gets expensive. Use the Primordial Ground Guidance approach:
|
||||
|
||||
1. **Coarse pass:** Downsample cost grid 4× (120m cells). Solve A*. Sub-second.
|
||||
2. **Corridor extraction:** Buffer the coarse path by 200m.
|
||||
3. **Fine pass:** Re-solve at native 30m resolution only within the corridor. Sub-second.
|
||||
4. **Total:** <2 seconds for a 15km wilderness segment.
|
||||
|
||||
### 4.7 Network Hand-Off
|
||||
|
||||
The raster pathfinder needs to know where the trail/road network starts so it can stop:
|
||||
|
||||
1. **Pre-compute trail entry points:** Extract from OSM all endpoints and intersections of `highway=path|track|footway|bridleway|unclassified|tertiary|secondary|primary`. Store as a PostGIS point table (or SQLite spatial index in `navi.db`).
|
||||
2. **Rasterize entry points** onto the cost grid as target cells.
|
||||
3. **Run `MCP.find_costs(start)`** — the Dijkstra wave expands until it reaches any entry-point cell. Use `goal_reached()` override in `MCP_Flexible` for early termination.
|
||||
4. **Snap** the reached entry point to its nearest Valhalla graph node.
|
||||
5. **Call Valhalla** from that node to destination with appropriate costing profile.
|
||||
6. **Concatenate** raster path + Valhalla path into one GeoJSON with per-segment metadata.
|
||||
|
||||
---
|
||||
|
||||
## 5. Data Acquisition Checklist
|
||||
|
||||
| Dataset | Status | Size | Action |
|
||||
|---|---|---|---|
|
||||
| DEM (planet-dem.pmtiles) | ✅ Have it | 658GB | Serving via nginx from pi-nas |
|
||||
| NLCD Land Cover (CONUS) | ❌ Not acquired | ~5GB | Download from USGS MRLC |
|
||||
| NLCD Tree Canopy (CONUS) | ❌ Not acquired | ~2GB | Optional — continuous friction surface |
|
||||
| OSM Planet PBF | ❌ Not acquired for this use | ~70GB | Extract waterways, cliffs, trails via osmium |
|
||||
| PAD-US | ✅ Have source | 1.6GB in /mnt/nav/padus/ | Rasterize by access class |
|
||||
| USFS Trail/Road layers | ✅ Have PMTiles | 848MB + 496MB | Need raw vectors for rasterization |
|
||||
| Trail entry points index | ❌ Not built | ~50MB | Extract from OSM + USFS |
|
||||
|
||||
**First acquisition:** NLCD. It's the single most impactful layer after the DEM — without land cover, the pathfinder can't distinguish open meadow from dense forest.
|
||||
|
||||
---
|
||||
|
||||
## 6. Safety Considerations
|
||||
|
||||
This system may guide people through dangerous terrain. Design constraints:
|
||||
|
||||
- **Hard slope cutoffs are non-negotiable.** No route segment should ever cross terrain above the mode's max slope threshold, regardless of how much faster the direct path would be.
|
||||
- **Confidence scoring:** Every response includes a `confidence` field (0.0–1.0) based on: DEM resolution vs route steepness, distance from nearest verified trail data, land cover data freshness, number of barrier crossings.
|
||||
- **Fallback behaviors:** If no safe route exists within `max_search_km`, return an error with the direction and distance to the nearest trail (as a bearing, not a route). Never hallucinate a route through impassable terrain.
|
||||
- **Per-step user confirmation (Aurora/Meshtastic):** In text mode, Aurora should confirm each major terrain transition ("You will cross a drainage heading southwest — confirm you can see safe footing"). A lost person should never blindly follow instructions into terrain they can't visually verify.
|
||||
- **DSM vs DTM caveat:** Copernicus GLO-30 is a Digital Surface Model (includes treetops, buildings). A flat meadow next to tall pines will show false slope at the treeline. The system should note this in Aurora's instructions for forested areas.
|
||||
- **30m resolution risk:** A 15m-wide cliff band can be smoothed into a single "steep but passable" cell. The safety gate catches obvious cliffs but may miss narrow features. Documented limitation; mitigated by upgrading to 10m USGS 3DEP in the future.
|
||||
|
||||
---
|
||||
|
||||
## 7. Implementation Phases
|
||||
|
||||
### Phase O1: Foundation
|
||||
- Acquire NLCD CONUS land cover
|
||||
- Build PMTiles elevation decoder + tile cache module
|
||||
- Implement Tobler off-path cost function
|
||||
- Prototype: scikit-image MCP on a small Idaho bbox (e.g., 20km × 20km around Sun Valley)
|
||||
- Validate: does the path avoid canyons, prefer gentle slopes, follow drainages?
|
||||
|
||||
### Phase O2: Friction Integration
|
||||
- Rasterize NLCD into friction grid
|
||||
- Rasterize OSM waterways/cliffs as barriers
|
||||
- Rasterize PAD-US access restrictions
|
||||
- Burn OSM trails/roads as low-cost corridors
|
||||
- Combined cost surface for foot mode
|
||||
|
||||
### Phase O3: Network Hand-Off
|
||||
- Build trail entry point index from OSM + USFS
|
||||
- Implement MCP → Valhalla stitching
|
||||
- `/api/offroute` endpoint (foot mode only)
|
||||
- GeoJSON response with per-segment metadata
|
||||
|
||||
### Phase O4: Multi-Mode + Aurora
|
||||
- Add MTB cost function (Herzog wheeled-transport)
|
||||
- Add ATV cost function
|
||||
- Mode-specific barrier rules (wilderness restrictions for MTB/ATV)
|
||||
- Aurora tool integration — `offroute` in nav_tools.py
|
||||
- Meshtastic text-based instruction generation (bearings, terrain descriptions)
|
||||
|
||||
### Phase O5: Performance + Polish
|
||||
- Multi-resolution pathfinding (coarse → corridor → fine)
|
||||
- Rust pathfinder microservice (if Python latency is insufficient)
|
||||
- Confidence scoring
|
||||
- Navi frontend route visualization with segment coloring
|
||||
- Elevation profile display per segment
|
||||
|
||||
### Phase O6: Pi 5 Field Kit
|
||||
- Offline PMTiles elevation access
|
||||
- Pre-baked cost tiles for Idaho/CONUS-West
|
||||
- Bbox-filter packager for all spatial datasets
|
||||
- Full offline operation via Meshtastic ↔ Aurora ↔ offroute chain
|
||||
|
||||
---
|
||||
|
||||
## 8. Infrastructure
|
||||
|
||||
**Runtime services (VM 1130):**
|
||||
- `/api/offroute` — Flask endpoint in RECON dashboard
|
||||
- Tile cache — LRU in-memory decoded elevation arrays
|
||||
- Valhalla Docker :8002 — on-network routing (already running)
|
||||
|
||||
**Data (VM 1130 /mnt/nav/):**
|
||||
- Pre-baked friction rasters (NLCD, barriers, trails) — tiled GeoTIFF or COG
|
||||
- Trail entry point index — SQLite spatial in navi.db
|
||||
|
||||
**Data (pi-nas /mnt/nas/nav/):**
|
||||
- planet-dem.pmtiles — 658GB, served via nginx
|
||||
- Regional GeoTIFF DEMs — 203GB, insurance until pipeline validated
|
||||
|
||||
**Compute (cortex or matt-desktop):**
|
||||
- One-time cost surface generation jobs (NLCD rasterization, OSM extraction, barrier tiling)
|
||||
|
||||
---
|
||||
|
||||
## 9. Key Decisions Made
|
||||
|
||||
| Decision | Rationale |
|
||||
|---|---|
|
||||
| No pre-rendered slope rasters | Pathfinder computes grade on the fly from cached elevation arrays. Simpler, no GDAL dependency at runtime. |
|
||||
| planet-dem.pmtiles as single elevation source | Same data already drives contours + hillshade. 30m sufficient for first build. Global coverage. |
|
||||
| scikit-image MCP for initial engine | Cython Dijkstra, proven on 2–4M cell grids, Python-native, anisotropic via MCP_Flexible. Rust upgrade path if needed. |
|
||||
| Tobler off-path as primary foot cost model | Best-validated off-trail hiking function. Inherently anisotropic. 0.6× off-trail multiplier built in. |
|
||||
| Trail burn-in (not separate hand-off logic) | Rasterizing trails as low-cost cells lets the pathfinder naturally follow them without mode-switching logic. |
|
||||
| Pre-baked friction rasters (offline) | NLCD, barriers, and land ownership change slowly. Build once, cache, update periodically. |
|
||||
| Multi-resolution for long routes | Coarse pass → corridor → fine pass. Standard technique from military route planning (Primordial Ground Guidance). |
|
||||
| Confidence scoring on every response | Safety-critical system. User must know when to trust vs. verify the route. |
|
||||
|
||||
---
|
||||
|
||||
## 10. Open Questions
|
||||
|
||||
- [ ] What is the right `max_slope` cutoff per mode? Needs field testing / literature review.
|
||||
- [ ] Should the pathfinder use A* (faster, needs admissible heuristic) or Dijkstra (guaranteed optimal, slower)? MCP uses Dijkstra; pyastar2d uses A*.
|
||||
- [ ] How to generate natural-language terrain descriptions for Aurora from raster data? (e.g., "sagebrush slope" vs. "forested drainage")
|
||||
- [ ] Should we pre-compute the full cost surface for Idaho/CONUS-West, or generate it on demand per request?
|
||||
- [ ] How to handle seasonal/weather variations? (Snow, spring runoff, wildfire closures)
|
||||
- [ ] Valhalla pedestrian elevation costing (PR #3234) — test and validate before relying on it for segments 2–4.
|
||||
- [ ] USFS MVUM (Motor Vehicle Use Maps) — authoritative ATV/4WD legal access layer. Acquire and integrate for ATV mode.
|
||||
|
||||
---
|
||||
|
||||
## References
|
||||
|
||||
- Tobler, W. (1993). Three Presentations on Geographical Analysis and Modeling. NCGIA TR 93-1.
|
||||
- Irmischer, I.J. & Clarke, K.C. (2018). Measuring and modeling the speed of human navigation. *Cartography and GIS*, 45(2), 177-186.
|
||||
- Herzog, I. (2020). Spatial Analysis Based on Cost Functions. In *Archaeological Spatial Analysis*.
|
||||
- Lewis, J. (2023). `leastcostpath` R package. CRAN.
|
||||
- GRASS GIS. `r.walk` manual. grass.osgeo.org.
|
||||
- Hoover, B. et al. (2019). CostMAP: An open-source software package for developing cost surfaces. LANL.
|
||||
- Mapterhorn project. mapterhorn.com. BSD-3.
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 11. On-Network Traffic Intelligence
|
||||
|
||||
Two features that affect Valhalla segments (2–4) of the offroute chain, not the wilderness pathfinder (segment 1):
|
||||
|
||||
### Traffic-Aware Routing
|
||||
|
||||
- Valhalla supports time-dependent costing via traffic speed tiles
|
||||
- TomTom traffic tiles already integrated in Navi at `/api/traffic/*` (currently visual overlay only)
|
||||
- **Integration path:** configure Valhalla `traffic_tile_dir` to consume TomTom speed data so route calculations account for live congestion
|
||||
- **Effect on offroute:** segments 2–4 (trail-to-road, road-to-road, road-to-home) would route around congested corridors
|
||||
- Does NOT affect segment 1 (wilderness pathfinder)
|
||||
|
||||
### Idaho 511 Incident Feed
|
||||
|
||||
- Idaho 511 API provides real-time construction zones, accidents, and road closures
|
||||
- Two integration points:
|
||||
1. **Visual layer** — display incidents on Navi map as icons/overlays
|
||||
2. **Routing barriers** — feed active closures to Valhalla as `avoid_locations` or edge exclusions so routes avoid closed roads
|
||||
- **Implementation:** polling daemon (5–10 min interval), stores active incidents in `navi.db`, expires automatically when cleared
|
||||
- Affects both standalone Valhalla routing and offroute segments 2–4
|
||||
- **Stretch goal:** ingest other state 511 feeds for cross-state trips
|
||||
|
||||
### Sequencing
|
||||
|
||||
- Both features are post-offroute-core (after Phase O3)
|
||||
- Can be built in parallel — traffic routing is Valhalla config, 511 is a new ingestion daemon + map layer
|
||||
- Neither blocks wilderness pathfinder development
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
# Navi Feature Ideas
|
||||
|
||||
Planned features and enhancements for the Navi navigation platform.
|
||||
|
||||
---
|
||||
|
||||
## Traffic & Incident Intelligence
|
||||
|
||||
### Traffic-Aware Routing
|
||||
|
||||
**Status:** Planned (post-Phase O3)
|
||||
|
||||
Integrate TomTom traffic data into Valhalla routing calculations:
|
||||
|
||||
- TomTom traffic tiles already available at `/api/traffic/*` (visual overlay)
|
||||
- Configure Valhalla `traffic_tile_dir` to consume speed data
|
||||
- Routes will account for live congestion on segments 2–4 of offroute chain
|
||||
- Does not affect wilderness pathfinder (segment 1)
|
||||
|
||||
### Idaho 511 Incident Feed
|
||||
|
||||
**Status:** Planned (post-Phase O3)
|
||||
|
||||
Real-time road closure and incident integration:
|
||||
|
||||
- Poll Idaho 511 API every 5–10 minutes
|
||||
- Store active incidents in `navi.db` with auto-expiration
|
||||
- Display incidents as map overlay (icons/markers)
|
||||
- Feed closures to Valhalla as `avoid_locations` for routing
|
||||
- Stretch: support other state 511 feeds for cross-state trips
|
||||
|
||||
---
|
||||
|
||||
## Tracking & Situational Awareness
|
||||
|
||||
### ADS-B Aircraft Tracking
|
||||
|
||||
**Status:** Planned
|
||||
|
||||
Display live aircraft positions from ADS-B receivers:
|
||||
|
||||
- Integrate with local ADS-B receiver (dump1090/readsb)
|
||||
- Show aircraft positions, altitude, callsign on map
|
||||
- Useful for backcountry SAR coordination and general aviation awareness
|
||||
|
||||
### AIS Vessel Tracking
|
||||
|
||||
**Status:** Planned
|
||||
|
||||
Display marine vessel positions:
|
||||
|
||||
- Integrate with AIS receiver or feed
|
||||
- Show vessel positions, heading, name on map
|
||||
- Applicable for coastal/maritime navigation scenarios
|
||||
|
||||
---
|
||||
|
||||
## TAK Integration
|
||||
|
||||
### TAK Server + EUD Integration
|
||||
|
||||
**Status:** Planned
|
||||
|
||||
Connect Navi to the TAK ecosystem (ATAK, iTAK, WinTAK):
|
||||
|
||||
- TAK Server integration for shared situational awareness
|
||||
- Push Navi routes to TAK clients as CoT (Cursor on Target)
|
||||
- Pull team member positions from TAK into Navi
|
||||
- Enable SAR/field team coordination through unified COP
|
||||
|
||||
---
|
||||
|
||||
## Mobile & Offline
|
||||
|
||||
### Native iOS App
|
||||
|
||||
**Status:** Planned
|
||||
|
||||
Native iOS application for offline-first navigation:
|
||||
|
||||
- Full offline map tile access
|
||||
- Offline routing with pre-cached Valhalla tiles
|
||||
- Integration with Apple Watch for turn-by-turn
|
||||
- Meshtastic/LoRa mesh network support for off-grid comms
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Features above Phase O3 depend on core offroute functionality being complete
|
||||
- Traffic and 511 features can be built in parallel
|
||||
- TAK integration useful for field coordination but not blocking core nav
|
||||
7
package-lock.json
generated
7
package-lock.json
generated
|
|
@ -8,7 +8,6 @@
|
|||
"name": "navi",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@acalcutt/maplibre-contour-pmtiles": "^0.1.2",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
|
|
@ -38,12 +37,6 @@
|
|||
"vite": "^8.0.9"
|
||||
}
|
||||
},
|
||||
"node_modules/@acalcutt/maplibre-contour-pmtiles": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@acalcutt/maplibre-contour-pmtiles/-/maplibre-contour-pmtiles-0.1.2.tgz",
|
||||
"integrity": "sha512-dCyJFLLM4NomLoJ22McRp7yETFmzUuA6iEMVJS6+mFyHoNk7Sv6RI4Hn0DhGKeyjcJgan3YnfSnzsqRinnXSug==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/@alloc/quick-lru": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@acalcutt/maplibre-contour-pmtiles": "^0.1.2",
|
||||
"@dnd-kit/core": "^6.3.1",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
|
|
|
|||
79
src/App.jsx
79
src/App.jsx
|
|
@ -1,7 +1,8 @@
|
|||
import { useEffect, useRef, useCallback } from 'react'
|
||||
import { useStore } from './store'
|
||||
import { useTheme } from './hooks/useTheme'
|
||||
import { fetchAuthState } from './api'
|
||||
import { requestRoute, fetchAuthState } from './api'
|
||||
import { decodePolyline } from './utils/decode'
|
||||
import MapView from './components/MapView'
|
||||
import Panel from './components/Panel'
|
||||
|
||||
|
|
@ -11,10 +12,20 @@ import LocateButton from './components/LocateButton'
|
|||
|
||||
export default function App() {
|
||||
const mapViewRef = useRef(null)
|
||||
const routeDebounceRef = useRef(null)
|
||||
|
||||
// Initialize theme system
|
||||
useTheme()
|
||||
|
||||
const stops = useStore((s) => s.stops)
|
||||
const mode = useStore((s) => s.mode)
|
||||
const route = useStore((s) => s.route)
|
||||
const gpsOrigin = useStore((s) => s.gpsOrigin)
|
||||
const geoPermission = useStore((s) => s.geoPermission)
|
||||
const setRoute = useStore((s) => s.setRoute)
|
||||
const setRouteLoading = useStore((s) => s.setRouteLoading)
|
||||
const setRouteError = useStore((s) => s.setRouteError)
|
||||
const clearRoute = useStore((s) => s.clearRoute)
|
||||
const setAuth = useStore((s) => s.setAuth)
|
||||
|
||||
// Initialize auth state on app load (single fetch, no polling)
|
||||
|
|
@ -22,18 +33,70 @@ export default function App() {
|
|||
fetchAuthState().then(setAuth)
|
||||
}, [setAuth])
|
||||
|
||||
// Handle clear route from panel
|
||||
const handleClearRoute = useCallback(() => {
|
||||
mapViewRef.current?.clearRoute?.()
|
||||
}, [])
|
||||
// Fetch route when stops, mode, gpsOrigin, or geoPermission change (debounced 500ms)
|
||||
useEffect(() => {
|
||||
if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current)
|
||||
|
||||
routeDebounceRef.current = setTimeout(async () => {
|
||||
const { userLocation } = useStore.getState()
|
||||
|
||||
let effective = stops.map((s) => ({ lat: s.lat, lon: s.lon }))
|
||||
if (gpsOrigin && geoPermission === 'granted' && userLocation) {
|
||||
effective = [{ lat: userLocation.lat, lon: userLocation.lon }, ...effective]
|
||||
}
|
||||
|
||||
if (effective.length < 2) {
|
||||
clearRoute()
|
||||
return
|
||||
}
|
||||
|
||||
setRouteLoading(true)
|
||||
|
||||
try {
|
||||
const data = await requestRoute(effective, mode)
|
||||
if (data.trip) {
|
||||
setRoute(data.trip)
|
||||
} else {
|
||||
setRouteError('No route returned')
|
||||
}
|
||||
} catch (e) {
|
||||
setRouteError(e.message || 'Route request failed')
|
||||
} finally {
|
||||
setRouteLoading(false)
|
||||
}
|
||||
}, 500)
|
||||
|
||||
return () => {
|
||||
if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current)
|
||||
}
|
||||
}, [stops, mode, gpsOrigin, geoPermission, clearRoute, setRoute, setRouteLoading, setRouteError])
|
||||
|
||||
// Handle maneuver click
|
||||
const handleManeuverClick = useCallback(
|
||||
(maneuver) => {
|
||||
if (!route || !route.legs) return
|
||||
|
||||
const legIdx = maneuver._legIndex || 0
|
||||
const leg = route.legs[legIdx]
|
||||
if (!leg || !leg.shape) return
|
||||
|
||||
const coords = decodePolyline(leg.shape, 6)
|
||||
const idx = maneuver.begin_shape_index
|
||||
if (idx >= 0 && idx < coords.length) {
|
||||
const [lng, lat] = coords[idx]
|
||||
mapViewRef.current?.flyTo(lat, lng, 15)
|
||||
}
|
||||
},
|
||||
[route]
|
||||
)
|
||||
|
||||
return (
|
||||
<div className="relative w-screen h-screen overflow-hidden" style={{ background: 'var(--bg-base)' }}>
|
||||
<MapView ref={mapViewRef} />
|
||||
<Panel onClearRoute={handleClearRoute} />
|
||||
|
||||
<Panel onManeuverClick={handleManeuverClick} />
|
||||
|
||||
<ContactModal />
|
||||
|
||||
|
||||
{/* Bottom-right map controls */}
|
||||
<div className="map-controls-br">
|
||||
<LocateButton mapRef={mapViewRef} />
|
||||
|
|
|
|||
67
src/api.js
67
src/api.js
|
|
@ -321,70 +321,3 @@ export async function fetchAuthState() {
|
|||
return { authenticated: false, username: null }
|
||||
}
|
||||
}
|
||||
|
||||
// ── Offroute API ──
|
||||
|
||||
const OFFROUTE_URL = "/api/offroute"
|
||||
const MVUM_URL = "/api/mvum"
|
||||
|
||||
/**
|
||||
* Request an offroute route from the pathfinder API.
|
||||
* @param {object} start - { lat, lon }
|
||||
* @param {object} end - { lat, lon }
|
||||
* @param {string} mode - foot | mtb | atv | vehicle
|
||||
* @param {string} boundaryMode - strict | pragmatic | emergency
|
||||
* @returns {Promise<object>} Offroute response with GeoJSON route
|
||||
*/
|
||||
export async function requestOffroute(start, end, mode = "foot", boundaryMode = "strict") {
|
||||
const body = {
|
||||
start: [start.lat, start.lon],
|
||||
end: [end.lat, end.lon],
|
||||
mode,
|
||||
boundary_mode: boundaryMode,
|
||||
}
|
||||
console.log('[TRACE-API] requestOffroute body:', JSON.stringify(body))
|
||||
|
||||
const controller = new AbortController()
|
||||
const timeout = setTimeout(() => controller.abort(), 120000) // 2 min timeout for complex routes
|
||||
|
||||
try {
|
||||
const resp = await fetch(OFFROUTE_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
signal: controller.signal,
|
||||
})
|
||||
|
||||
if (!resp.ok) {
|
||||
const errBody = await resp.json().catch(() => ({}))
|
||||
throw new Error(errBody.message || 'Could not find a route. Try a different start point or mode.')
|
||||
}
|
||||
|
||||
return resp.json()
|
||||
} finally {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch MVUM (Motor Vehicle Use Map) info for a location.
|
||||
* @param {number} lat
|
||||
* @param {number} lon
|
||||
* @param {number} radius - Search radius in meters
|
||||
* @returns {Promise<object|null>} MVUM feature info or null
|
||||
*/
|
||||
export async function fetchMvumInfo(lat, lon, radius = 500) {
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
lat: String(lat),
|
||||
lon: String(lon),
|
||||
radius: String(radius),
|
||||
})
|
||||
const resp = await fetch(`${MVUM_URL}?${params}`, { signal: AbortSignal.timeout(5000) })
|
||||
if (!resp.ok) return null
|
||||
const data = await resp.json()
|
||||
return data.feature || null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,417 +0,0 @@
|
|||
import { useEffect, useMemo } from "react"
|
||||
import { ArrowUpDown, Plus, X, Footprints, Bike, Car, Shield, AlertTriangle, Zap, Trash2, GripVertical } from "lucide-react"
|
||||
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core"
|
||||
import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable"
|
||||
import { CSS } from "@dnd-kit/utilities"
|
||||
import { useStore } from "../store"
|
||||
import LocationInput from "./LocationInput"
|
||||
import ManeuverList from "./ManeuverList"
|
||||
|
||||
const TRAVEL_MODES = [
|
||||
{ id: "auto", label: "Drive", Icon: Car },
|
||||
{ id: "foot", label: "Foot", Icon: Footprints },
|
||||
{ id: "mtb", label: "MTB", Icon: Bike },
|
||||
{ id: "atv", label: "ATV", Icon: Car },
|
||||
{ id: "vehicle", label: "4x4", Icon: Car },
|
||||
]
|
||||
|
||||
const BOUNDARY_MODES = [
|
||||
{ id: "strict", label: "Strict", Icon: Shield, title: "Avoid barriers" },
|
||||
{ id: "pragmatic", label: "Cross", Icon: AlertTriangle, title: "Cross with penalty" },
|
||||
{ id: "emergency", label: "Ignore", Icon: Zap, title: "Ignore barriers" },
|
||||
]
|
||||
|
||||
// Sortable row component
|
||||
function SortableRow({ id, children }) {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id })
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
opacity: isDragging ? 0.5 : 1,
|
||||
zIndex: isDragging ? 1000 : 1,
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} style={style} className="flex items-center gap-1">
|
||||
{/* Drag handle */}
|
||||
<button
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="p-1 rounded cursor-grab active:cursor-grabbing hover:bg-[var(--bg-overlay)] transition-colors shrink-0 touch-none"
|
||||
title="Drag to reorder"
|
||||
>
|
||||
<GripVertical size={14} style={{ color: "var(--text-tertiary)" }} />
|
||||
</button>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function DirectionsPanel({ onClose }) {
|
||||
const routeStart = useStore((s) => s.routeStart)
|
||||
const routeEnd = useStore((s) => s.routeEnd)
|
||||
const routeMode = useStore((s) => s.routeMode)
|
||||
const boundaryMode = useStore((s) => s.boundaryMode)
|
||||
const routeResult = useStore((s) => s.routeResult)
|
||||
const routeLoading = useStore((s) => s.routeLoading)
|
||||
const routeError = useStore((s) => s.routeError)
|
||||
const stops = useStore((s) => s.stops)
|
||||
const userLocation = useStore((s) => s.userLocation)
|
||||
const geoPermission = useStore((s) => s.geoPermission)
|
||||
|
||||
const setRouteStart = useStore((s) => s.setRouteStart)
|
||||
const setRouteEnd = useStore((s) => s.setRouteEnd)
|
||||
const setRouteMode = useStore((s) => s.setRouteMode)
|
||||
const setBoundaryMode = useStore((s) => s.setBoundaryMode)
|
||||
const computeRoute = useStore((s) => s.computeRoute)
|
||||
const clearRoute = useStore((s) => s.clearRoute)
|
||||
const setDirectionsMode = useStore((s) => s.setDirectionsMode)
|
||||
const addIntermediateStop = useStore((s) => s.addIntermediateStop)
|
||||
const updateStop = useStore((s) => s.updateStop)
|
||||
const removeStop = useStore((s) => s.removeStop)
|
||||
const setStops = useStore((s) => s.setStops)
|
||||
|
||||
// DnD sensors
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 8,
|
||||
},
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
)
|
||||
|
||||
// Build unified list for drag-and-drop: origin + stops + destination
|
||||
// Each item has: { id, type, data }
|
||||
const unifiedList = useMemo(() => {
|
||||
const items = []
|
||||
if (routeStart) {
|
||||
items.push({ id: "origin", type: "origin", data: routeStart })
|
||||
}
|
||||
stops.forEach((stop) => {
|
||||
items.push({ id: stop.id, type: "stop", data: stop })
|
||||
})
|
||||
if (routeEnd) {
|
||||
items.push({ id: "destination", type: "destination", data: routeEnd })
|
||||
}
|
||||
return items
|
||||
}, [routeStart, stops, routeEnd])
|
||||
|
||||
const itemIds = useMemo(() => unifiedList.map((item) => item.id), [unifiedList])
|
||||
|
||||
// Auto-fill origin with GPS if available and origin is empty
|
||||
useEffect(() => {
|
||||
if (!routeStart && geoPermission === "granted" && userLocation) {
|
||||
setRouteStart({
|
||||
lat: userLocation.lat,
|
||||
lon: userLocation.lon,
|
||||
name: "Your location",
|
||||
source: "gps",
|
||||
})
|
||||
}
|
||||
}, [routeStart, geoPermission, userLocation, setRouteStart])
|
||||
|
||||
// Auto-compute route when both endpoints are set
|
||||
useEffect(() => {
|
||||
if (routeStart && routeEnd) {
|
||||
computeRoute()
|
||||
}
|
||||
}, [routeStart?.lat, routeStart?.lon, routeEnd?.lat, routeEnd?.lon])
|
||||
|
||||
const handleClose = () => {
|
||||
clearRoute()
|
||||
setDirectionsMode(false)
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
const handleAddStop = () => {
|
||||
addIntermediateStop()
|
||||
}
|
||||
|
||||
// Handle drag end - reorder the unified list
|
||||
const handleDragEnd = (event) => {
|
||||
const { active, over } = event
|
||||
if (!over || active.id === over.id) return
|
||||
|
||||
const oldIndex = unifiedList.findIndex((item) => item.id === active.id)
|
||||
const newIndex = unifiedList.findIndex((item) => item.id === over.id)
|
||||
|
||||
if (oldIndex === -1 || newIndex === -1) return
|
||||
|
||||
// Reorder the unified list
|
||||
const reordered = arrayMove(unifiedList, oldIndex, newIndex)
|
||||
|
||||
// Extract new origin, stops, and destination from reordered list
|
||||
// First item becomes origin, last becomes destination, middle are stops
|
||||
if (reordered.length === 0) return
|
||||
|
||||
const newOriginItem = reordered[0]
|
||||
const newDestItem = reordered.length > 1 ? reordered[reordered.length - 1] : null
|
||||
const newStopItems = reordered.length > 2 ? reordered.slice(1, -1) : []
|
||||
|
||||
// Convert items to proper format
|
||||
const newOrigin = newOriginItem.data ? {
|
||||
lat: newOriginItem.data.lat,
|
||||
lon: newOriginItem.data.lon,
|
||||
name: newOriginItem.data.name,
|
||||
source: newOriginItem.data.source,
|
||||
} : null
|
||||
|
||||
const newDest = newDestItem?.data ? {
|
||||
lat: newDestItem.data.lat,
|
||||
lon: newDestItem.data.lon,
|
||||
name: newDestItem.data.name,
|
||||
source: newDestItem.data.source,
|
||||
} : null
|
||||
|
||||
const newStops = newStopItems.map((item) => ({
|
||||
id: item.id === "origin" || item.id === "destination" ? crypto.randomUUID() : item.id,
|
||||
lat: item.data?.lat ?? null,
|
||||
lon: item.data?.lon ?? null,
|
||||
name: item.data?.name ?? "",
|
||||
}))
|
||||
|
||||
// Update state
|
||||
setRouteStart(newOrigin)
|
||||
setRouteEnd(newDest)
|
||||
setStops(newStops)
|
||||
|
||||
// Trigger route recalculation
|
||||
setTimeout(() => computeRoute(), 0)
|
||||
}
|
||||
|
||||
// Check if route has wilderness segments
|
||||
const hasWilderness = routeResult?.summary?.wilderness_distance_km > 0
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium" style={{ color: "var(--text-primary)" }}>
|
||||
Directions
|
||||
</span>
|
||||
<button
|
||||
onClick={handleClose}
|
||||
className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors"
|
||||
title="Close directions"
|
||||
>
|
||||
<X size={18} style={{ color: "var(--text-tertiary)" }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Drag-and-drop location list */}
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext items={itemIds} strategy={verticalListSortingStrategy}>
|
||||
<div className="flex flex-col gap-2">
|
||||
{unifiedList.map((item, idx) => (
|
||||
<SortableRow key={item.id} id={item.id}>
|
||||
<div className="flex-1">
|
||||
{item.type === "origin" && (
|
||||
<LocationInput
|
||||
value={routeStart}
|
||||
onChange={setRouteStart}
|
||||
placeholder={geoPermission === "granted" ? "Your location" : "Choose starting point"}
|
||||
icon="origin"
|
||||
fieldId="origin"
|
||||
autoFocus={!routeStart}
|
||||
/>
|
||||
)}
|
||||
{item.type === "destination" && (
|
||||
<LocationInput
|
||||
value={routeEnd}
|
||||
onChange={setRouteEnd}
|
||||
placeholder="Choose destination"
|
||||
icon="destination"
|
||||
fieldId="destination"
|
||||
autoFocus={routeStart && !routeEnd}
|
||||
/>
|
||||
)}
|
||||
{item.type === "stop" && (
|
||||
<LocationInput
|
||||
value={item.data.lat != null ? { lat: item.data.lat, lon: item.data.lon, name: item.data.name } : null}
|
||||
onChange={(place) => {
|
||||
if (place) {
|
||||
updateStop(item.id, place)
|
||||
}
|
||||
}}
|
||||
placeholder={`Stop ${idx}`}
|
||||
icon="stop"
|
||||
fieldId={`stop-${item.id}`}
|
||||
autoFocus={item.data.lat == null}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{/* Remove button for intermediate stops only */}
|
||||
{item.type === "stop" && (
|
||||
<button
|
||||
onClick={() => removeStop(item.id)}
|
||||
className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors shrink-0"
|
||||
title="Remove stop"
|
||||
>
|
||||
<Trash2 size={14} style={{ color: "var(--text-tertiary)" }} />
|
||||
</button>
|
||||
)}
|
||||
{/* Spacer for origin/destination to align with stops that have remove button */}
|
||||
{item.type !== "stop" && (
|
||||
<div className="w-[30px] shrink-0" />
|
||||
)}
|
||||
</SortableRow>
|
||||
))}
|
||||
|
||||
{/* Add stop button - only show when route exists */}
|
||||
{routeStart && routeEnd && stops.length < 8 && (
|
||||
<button
|
||||
onClick={handleAddStop}
|
||||
className="flex items-center justify-center gap-1.5 py-1.5 text-xs rounded-lg transition-colors ml-6"
|
||||
style={{
|
||||
background: "var(--bg-overlay)",
|
||||
color: "var(--text-secondary)",
|
||||
border: "1px dashed var(--border)",
|
||||
}}
|
||||
>
|
||||
<Plus size={14} />
|
||||
<span>Add stop</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
|
||||
{/* Travel mode selector */}
|
||||
<div className="flex gap-1">
|
||||
{TRAVEL_MODES.map((m) => {
|
||||
const active = routeMode === m.id
|
||||
return (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setRouteMode(m.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1 py-2 text-xs rounded-lg transition-colors"
|
||||
style={{
|
||||
background: active ? "var(--accent-muted)" : "var(--bg-overlay)",
|
||||
color: active ? "var(--accent)" : "var(--text-tertiary)",
|
||||
}}
|
||||
title={m.label}
|
||||
>
|
||||
<m.Icon size={16} />
|
||||
<span className="hidden sm:inline">{m.label}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Boundary mode selector (only for non-auto modes) */}
|
||||
{routeMode !== "auto" && (
|
||||
<div className="flex gap-1">
|
||||
{BOUNDARY_MODES.map((m) => {
|
||||
const active = boundaryMode === m.id
|
||||
return (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setBoundaryMode(m.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded-lg transition-colors"
|
||||
style={{
|
||||
background: active ? "var(--accent-muted)" : "var(--bg-overlay)",
|
||||
color: active ? "var(--accent)" : "var(--text-tertiary)",
|
||||
}}
|
||||
title={m.title}
|
||||
>
|
||||
<m.Icon size={14} />
|
||||
<span className="hidden sm:inline">{m.label}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Loading indicator */}
|
||||
{routeLoading && (
|
||||
<div className="flex items-center justify-center gap-2 py-3">
|
||||
<div
|
||||
className="w-5 h-5 border-2 border-t-transparent rounded-full animate-spin"
|
||||
style={{ borderColor: "var(--accent)", borderTopColor: "transparent" }}
|
||||
/>
|
||||
<span className="text-sm" style={{ color: "var(--text-secondary)" }}>
|
||||
Finding route...
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error message - friendly text, no "offroute" */}
|
||||
{routeError && (
|
||||
<div
|
||||
className="px-3 py-2 rounded-lg text-sm"
|
||||
style={{
|
||||
background: "var(--error-bg, rgba(239, 68, 68, 0.1))",
|
||||
color: "var(--error, #ef4444)",
|
||||
}}
|
||||
>
|
||||
{routeError.includes("No route") || routeError.includes("not found")
|
||||
? "No route found. Try a different start point or mode."
|
||||
: routeError.includes("entry point")
|
||||
? "No roads found nearby — try Foot mode for trails."
|
||||
: routeError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Route legend - only shown when route has wilderness segment */}
|
||||
{routeResult && hasWilderness && !routeLoading && (
|
||||
<div
|
||||
className="flex items-center gap-4 px-3 py-2 rounded-lg text-xs"
|
||||
style={{ background: "var(--bg-overlay)" }}
|
||||
>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<svg width="24" height="2" style={{ overflow: "visible" }}>
|
||||
<line
|
||||
x1="0" y1="1" x2="24" y2="1"
|
||||
stroke="#f97316"
|
||||
strokeWidth="3"
|
||||
strokeDasharray="4,3"
|
||||
/>
|
||||
</svg>
|
||||
<span style={{ color: "var(--text-secondary)" }}>Wilderness (on foot)</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<svg width="24" height="2" style={{ overflow: "visible" }}>
|
||||
<line
|
||||
x1="0" y1="1" x2="24" y2="1"
|
||||
stroke="#3b82f6"
|
||||
strokeWidth="3"
|
||||
/>
|
||||
</svg>
|
||||
<span style={{ color: "var(--text-secondary)" }}>Road/Trail</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Route summary and maneuvers */}
|
||||
{routeResult && !routeLoading && (
|
||||
<div className="border-t pt-3" style={{ borderColor: "var(--border)" }}>
|
||||
<ManeuverList />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hint when waiting for input */}
|
||||
{!routeStart && !routeEnd && !routeLoading && (
|
||||
<div className="text-center py-4">
|
||||
<p className="text-xs" style={{ color: "var(--text-tertiary)" }}>
|
||||
Enter addresses, paste coordinates, or click the map
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,321 +0,0 @@
|
|||
import { useRef, useEffect, useCallback, useState } from "react"
|
||||
import { MapPin, Crosshair, X, Navigation2, User, Star, Coffee, Fuel, ShoppingBag, Hotel, Building2, Target } from "lucide-react"
|
||||
import toast from "react-hot-toast"
|
||||
import { useStore } from "../store"
|
||||
import { searchGeocode } from "../api"
|
||||
import { buildAddress } from "../utils/place"
|
||||
import { hasFeature } from "../config"
|
||||
|
||||
/** Parse coordinate input like "42.35, -114.30" */
|
||||
function parseCoordinates(input) {
|
||||
if (!input) return null
|
||||
const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
|
||||
const match = input.trim().match(pattern)
|
||||
if (!match) return null
|
||||
const lat = parseFloat(match[1])
|
||||
const lon = parseFloat(match[2])
|
||||
if (isNaN(lat) || isNaN(lon) || lat < -90 || lat > 90 || lon < -180 || lon > 180) return null
|
||||
return { lat, lon }
|
||||
}
|
||||
|
||||
function CategoryIcon({ result, size = 14 }) {
|
||||
const type = result.type || ""
|
||||
const source = result.source || ""
|
||||
if (result._isContact) return <User size={size} />
|
||||
if (source === "nickname") return <Star size={size} />
|
||||
if (type === "coordinates") return <Crosshair size={size} />
|
||||
if (type === "locality" || type === "city") return <Building2 size={size} />
|
||||
const osmVal = result.raw?.osm_value || ""
|
||||
if (osmVal.includes("cafe") || osmVal.includes("coffee")) return <Coffee size={size} />
|
||||
if (osmVal.includes("fuel") || osmVal.includes("gas")) return <Fuel size={size} />
|
||||
if (osmVal.includes("shop") || osmVal.includes("supermarket")) return <ShoppingBag size={size} />
|
||||
if (osmVal.includes("hotel") || osmVal.includes("motel")) return <Hotel size={size} />
|
||||
return <MapPin size={size} />
|
||||
}
|
||||
|
||||
export default function LocationInput({
|
||||
value, // { lat, lon, name } or null
|
||||
onChange, // (place) => void
|
||||
placeholder,
|
||||
icon, // "origin" | "destination" | "stop"
|
||||
fieldId, // unique id for this field (for map click targeting)
|
||||
onFocus, // () => void
|
||||
autoFocus,
|
||||
}) {
|
||||
const inputRef = useRef(null)
|
||||
const [query, setQuery] = useState(value?.name || "")
|
||||
const [results, setResults] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [open, setOpen] = useState(false)
|
||||
const [activeIndex, setActiveIndex] = useState(-1)
|
||||
const debounceRef = useRef(null)
|
||||
const abortRef = useRef(null)
|
||||
|
||||
const contacts = useStore((s) => s.contacts)
|
||||
const activeDirectionsField = useStore((s) => s.activeDirectionsField)
|
||||
const setActiveDirectionsField = useStore((s) => s.setActiveDirectionsField)
|
||||
const pickingRouteField = useStore((s) => s.pickingRouteField)
|
||||
const setPickingRouteField = useStore((s) => s.setPickingRouteField)
|
||||
|
||||
// Sync display value when external value changes
|
||||
useEffect(() => {
|
||||
if (value?.name && value.name !== query) {
|
||||
setQuery(value.name)
|
||||
} else if (!value && query && !open) {
|
||||
// Value cleared externally
|
||||
setQuery("")
|
||||
}
|
||||
}, [value?.name, value?.lat, value?.lon])
|
||||
|
||||
const doSearch = useCallback(async (q) => {
|
||||
if (abortRef.current) abortRef.current.abort()
|
||||
|
||||
if (!q.trim()) {
|
||||
setResults([])
|
||||
setOpen(false)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Check coordinates first
|
||||
const coords = parseCoordinates(q)
|
||||
if (coords) {
|
||||
const coordResult = {
|
||||
lat: coords.lat,
|
||||
lon: coords.lon,
|
||||
name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
|
||||
address: "Coordinates",
|
||||
type: "coordinates",
|
||||
source: "coordinates",
|
||||
match_code: null,
|
||||
raw: {},
|
||||
}
|
||||
setResults([coordResult])
|
||||
setOpen(true)
|
||||
setLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Contact matches
|
||||
let contactResults = []
|
||||
if (hasFeature("has_contacts") && contacts.length > 0) {
|
||||
const lower = q.trim().toLowerCase()
|
||||
contactResults = contacts
|
||||
.filter((c) =>
|
||||
(c.label || "").toLowerCase().startsWith(lower) ||
|
||||
(c.name || "").toLowerCase().startsWith(lower) ||
|
||||
(c.call_sign || "").toLowerCase().startsWith(lower)
|
||||
)
|
||||
.slice(0, 3)
|
||||
.map((c) => ({
|
||||
lat: c.lat,
|
||||
lon: c.lon,
|
||||
name: c.label,
|
||||
address: c.address || c.name || "",
|
||||
type: "contact",
|
||||
source: "contacts",
|
||||
match_code: null,
|
||||
raw: { contact: c },
|
||||
_isContact: true,
|
||||
}))
|
||||
}
|
||||
|
||||
const ctrl = new AbortController()
|
||||
abortRef.current = ctrl
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
const data = await searchGeocode(q.trim(), 5, ctrl.signal)
|
||||
const combined = [...contactResults, ...(data.results || [])]
|
||||
setResults(combined)
|
||||
setOpen(combined.length > 0)
|
||||
setActiveIndex(-1)
|
||||
} catch (e) {
|
||||
if (e.name !== "AbortError") {
|
||||
if (contactResults.length > 0) {
|
||||
setResults(contactResults)
|
||||
setOpen(true)
|
||||
} else {
|
||||
setResults([])
|
||||
setOpen(false)
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [contacts])
|
||||
|
||||
const handleChange = (e) => {
|
||||
const val = e.target.value
|
||||
setQuery(val)
|
||||
if (debounceRef.current) clearTimeout(debounceRef.current)
|
||||
debounceRef.current = setTimeout(() => doSearch(val), 150)
|
||||
}
|
||||
|
||||
const handleClear = () => {
|
||||
setQuery("")
|
||||
setResults([])
|
||||
setOpen(false)
|
||||
onChange(null)
|
||||
inputRef.current?.focus()
|
||||
}
|
||||
|
||||
const selectResult = (result) => {
|
||||
onChange({
|
||||
lat: result.lat,
|
||||
lon: result.lon,
|
||||
name: result.name,
|
||||
source: result.source,
|
||||
matchCode: result.match_code,
|
||||
})
|
||||
setQuery(result.name)
|
||||
setResults([])
|
||||
setOpen(false)
|
||||
setActiveIndex(-1)
|
||||
}
|
||||
|
||||
const handleKeyDown = (e) => {
|
||||
if (!open || results.length === 0) {
|
||||
if (e.key === "Escape") setOpen(false)
|
||||
return
|
||||
}
|
||||
switch (e.key) {
|
||||
case "ArrowDown":
|
||||
e.preventDefault()
|
||||
setActiveIndex((prev) => Math.min(prev + 1, results.length - 1))
|
||||
break
|
||||
case "ArrowUp":
|
||||
e.preventDefault()
|
||||
setActiveIndex((prev) => Math.max(prev - 1, -1))
|
||||
break
|
||||
case "Enter":
|
||||
e.preventDefault()
|
||||
if (activeIndex >= 0 && activeIndex < results.length) {
|
||||
selectResult(results[activeIndex])
|
||||
}
|
||||
break
|
||||
case "Escape":
|
||||
e.preventDefault()
|
||||
setOpen(false)
|
||||
setActiveIndex(-1)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleFocus = () => {
|
||||
setActiveDirectionsField(fieldId) // For styling only, not map clicks
|
||||
if (results.length > 0) setOpen(true)
|
||||
onFocus?.()
|
||||
}
|
||||
|
||||
const handlePickFromMap = () => {
|
||||
setPickingRouteField(fieldId)
|
||||
toast("Click map to set location", { icon: "🎯", duration: 3000 })
|
||||
inputRef.current?.blur() // Unfocus input so user focuses on map
|
||||
}
|
||||
|
||||
const isPicking = pickingRouteField === fieldId
|
||||
|
||||
const handleBlur = () => {
|
||||
// Delay to allow click on dropdown
|
||||
setTimeout(() => setOpen(false), 150)
|
||||
}
|
||||
|
||||
const isActive = activeDirectionsField === fieldId
|
||||
|
||||
const iconColor = icon === "origin" ? "#22c55e" : icon === "destination" ? "#ef4444" : "var(--text-tertiary)"
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex items-center gap-2 px-3 py-2 rounded-lg transition-all"
|
||||
style={{
|
||||
background: "var(--bg-overlay)",
|
||||
border: isActive ? "1px solid var(--accent)" : "1px solid var(--border)",
|
||||
}}
|
||||
>
|
||||
{icon === "origin" ? (
|
||||
<Navigation2 size={16} style={{ color: iconColor, transform: "rotate(45deg)" }} />
|
||||
) : (
|
||||
<MapPin size={16} style={{ color: iconColor }} />
|
||||
)}
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={query}
|
||||
onChange={handleChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={handleFocus}
|
||||
onBlur={handleBlur}
|
||||
placeholder={placeholder}
|
||||
autoFocus={autoFocus}
|
||||
className="flex-1 bg-transparent text-sm outline-none"
|
||||
style={{ color: "var(--text-primary)" }}
|
||||
/>
|
||||
{/* Pick from map button */}
|
||||
<button
|
||||
onClick={handlePickFromMap}
|
||||
className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
|
||||
style={{ color: isPicking ? "var(--accent)" : "var(--text-tertiary)" }}
|
||||
title="Pick location from map"
|
||||
>
|
||||
<Target size={14} />
|
||||
</button>
|
||||
{loading ? (
|
||||
<div
|
||||
className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
|
||||
style={{ borderColor: "var(--accent)", borderTopColor: "transparent" }}
|
||||
/>
|
||||
) : query ? (
|
||||
<button onClick={handleClear} className="p-0.5" style={{ color: "var(--text-tertiary)" }}>
|
||||
<X size={14} />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{open && results.length > 0 && (
|
||||
<ul
|
||||
className="absolute z-50 mt-1 w-full rounded-lg overflow-hidden max-h-48 overflow-y-auto"
|
||||
style={{
|
||||
background: "var(--bg-overlay)",
|
||||
border: "1px solid var(--border)",
|
||||
boxShadow: "var(--shadow-lg)",
|
||||
}}
|
||||
>
|
||||
{results.map((r, i) => {
|
||||
const isPoi = r.type === "poi" && r.raw?.name
|
||||
const isContact = r._isContact
|
||||
const primary = isContact ? r.name : isPoi ? r.raw.name : r.name
|
||||
const secondary = isContact ? (r.address || "") : isPoi ? buildAddress(r) : null
|
||||
return (
|
||||
<li
|
||||
key={`${r.lat}-${r.lon}-${i}`}
|
||||
className="px-3 py-2 cursor-pointer text-sm"
|
||||
style={{
|
||||
background: i === activeIndex ? "var(--accent-muted)" : "transparent",
|
||||
borderBottom: i < results.length - 1 ? "1px solid var(--border-subtle)" : "none",
|
||||
}}
|
||||
onClick={() => selectResult(r)}
|
||||
onMouseEnter={() => setActiveIndex(i)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span style={{ color: isContact ? "var(--accent)" : "var(--text-tertiary)" }}>
|
||||
<CategoryIcon result={r} />
|
||||
</span>
|
||||
<span className="truncate flex-1" style={{ color: "var(--text-primary)" }}>
|
||||
{primary}
|
||||
</span>
|
||||
</div>
|
||||
{secondary && (
|
||||
<div className="text-[11px] mt-0.5 ml-6 truncate" style={{ color: "var(--text-tertiary)" }}>
|
||||
{secondary}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,343 +1,140 @@
|
|||
import {
|
||||
MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
|
||||
MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
|
||||
GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle,
|
||||
Compass, ArrowUp, ArrowUpRight, ArrowRight, ArrowDownRight, ArrowDown,
|
||||
ArrowDownLeft, ArrowLeft, ArrowUpLeft, MapPin
|
||||
} from 'lucide-react'
|
||||
import { useStore } from '../store'
|
||||
|
||||
/**
|
||||
* Format distance with commas for feet, one decimal for miles.
|
||||
* Under 1 mile: "2,640 ft"
|
||||
* 1+ miles: "1.3 mi"
|
||||
*/
|
||||
function formatDistance(distanceM, distanceKm) {
|
||||
let meters = null
|
||||
if (distanceM !== undefined && distanceM !== null) {
|
||||
meters = distanceM
|
||||
} else if (distanceKm !== undefined && distanceKm !== null) {
|
||||
meters = distanceKm * 1000
|
||||
}
|
||||
|
||||
if (meters === null) return ''
|
||||
|
||||
const miles = meters / 1609.34
|
||||
if (miles < 1) {
|
||||
const feet = Math.round(meters * 3.28084)
|
||||
return feet.toLocaleString() + ' ft'
|
||||
}
|
||||
return miles.toFixed(1) + ' mi'
|
||||
}
|
||||
|
||||
function formatTimeMin(minutes) {
|
||||
if (minutes < 60) return Math.round(minutes) + ' min'
|
||||
const h = Math.floor(minutes / 60)
|
||||
const m = Math.round(minutes % 60)
|
||||
return m > 0 ? h + 'h ' + m + 'm' : h + 'h'
|
||||
}
|
||||
|
||||
// Compass arrow icon based on cardinal direction with rotation
|
||||
function CompassIcon({ cardinal, bearing, size = 16 }) {
|
||||
// Use bearing to rotate arrow, or fall back to cardinal-based icon
|
||||
if (bearing !== undefined && bearing !== null) {
|
||||
return (
|
||||
<ArrowUp
|
||||
size={size}
|
||||
strokeWidth={2}
|
||||
style={{ transform: `rotate(${bearing}deg)` }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const props = { size, strokeWidth: 2 }
|
||||
const arrowMap = {
|
||||
'N': ArrowUp,
|
||||
'NNE': ArrowUpRight,
|
||||
'NE': ArrowUpRight,
|
||||
'ENE': ArrowRight,
|
||||
'E': ArrowRight,
|
||||
'ESE': ArrowRight,
|
||||
'SE': ArrowDownRight,
|
||||
'SSE': ArrowDownRight,
|
||||
'S': ArrowDown,
|
||||
'SSW': ArrowDownLeft,
|
||||
'SW': ArrowDownLeft,
|
||||
'WSW': ArrowLeft,
|
||||
'W': ArrowLeft,
|
||||
'WNW': ArrowLeft,
|
||||
'NW': ArrowUpLeft,
|
||||
'NNW': ArrowUpLeft,
|
||||
}
|
||||
const Icon = arrowMap[cardinal] || Compass
|
||||
return <Icon {...props} />
|
||||
}
|
||||
|
||||
// Wilderness maneuver icon
|
||||
function WildernessIcon({ type, cardinal, bearing, size = 16 }) {
|
||||
if (type === 'arrival') {
|
||||
return <MapPin size={size} strokeWidth={1.5} />
|
||||
}
|
||||
return <CompassIcon cardinal={cardinal} bearing={bearing} size={size} />
|
||||
}
|
||||
|
||||
// Network maneuver icon (Valhalla types)
|
||||
function ManeuverIcon({ type }) {
|
||||
const size = 16
|
||||
const props = { size, strokeWidth: 1.5 }
|
||||
switch (type) {
|
||||
case 0: return <MoveRight {...props} />
|
||||
case 1: return <MoveUpRight {...props} />
|
||||
case 2: return <CornerUpRight {...props} />
|
||||
case 3: return <MoveDownRight {...props} />
|
||||
case 4: case 5: return <CornerUpLeft {...props} />
|
||||
case 6: return <MoveDownLeft {...props} />
|
||||
case 7: return <CornerUpLeft {...props} />
|
||||
case 8: return <MoveUpLeft {...props} />
|
||||
case 9: return <Navigation {...props} />
|
||||
case 10: case 11: case 12: return <CircleDot {...props} />
|
||||
case 15: case 16: return <RotateCw {...props} />
|
||||
case 24: return <GitMerge {...props} />
|
||||
case 25: return <CornerRightUp {...props} />
|
||||
case 26: return <CornerRightDown {...props} />
|
||||
default: return <MoveRight {...props} />
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add transport mode prefix to network maneuver instruction.
|
||||
* "Drive east on..." for auto, "Walk south on..." for foot, "Ride north on..." for mtb
|
||||
*/
|
||||
function formatNetworkInstruction(instruction, mode) {
|
||||
if (!instruction) return ''
|
||||
|
||||
// Get verb based on mode
|
||||
const modeVerbs = {
|
||||
'auto': 'Drive',
|
||||
'foot': 'Walk',
|
||||
'pedestrian': 'Walk',
|
||||
'mtb': 'Ride',
|
||||
'bicycle': 'Ride',
|
||||
'atv': 'Drive',
|
||||
'vehicle': 'Drive',
|
||||
}
|
||||
const verb = modeVerbs[mode] || 'Go'
|
||||
|
||||
// Check if instruction starts with a direction verb we should replace
|
||||
const startsWithVerbs = [
|
||||
'Turn left', 'Turn right', 'Bear left', 'Bear right',
|
||||
'Keep left', 'Keep right', 'Continue', 'Head', 'Go',
|
||||
'Proceed', 'Make a', 'Take a', 'Start', 'Merge', 'Exit'
|
||||
]
|
||||
|
||||
for (const v of startsWithVerbs) {
|
||||
if (instruction.startsWith(v)) {
|
||||
// Already has a verb, return as-is (Valhalla instructions are already good)
|
||||
return instruction
|
||||
}
|
||||
}
|
||||
|
||||
// If instruction starts with direction (north, south, etc.), prepend verb
|
||||
const directions = ['north', 'south', 'east', 'west', 'onto', 'on ']
|
||||
for (const dir of directions) {
|
||||
if (instruction.toLowerCase().startsWith(dir)) {
|
||||
return `${verb} ${instruction}`
|
||||
}
|
||||
}
|
||||
|
||||
return instruction
|
||||
}
|
||||
|
||||
export default function ManeuverList() {
|
||||
const routeResult = useStore((s) => s.routeResult)
|
||||
const routeLoading = useStore((s) => s.routeLoading)
|
||||
const routeError = useStore((s) => s.routeError)
|
||||
const routeMode = useStore((s) => s.routeMode)
|
||||
|
||||
if (routeLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<div
|
||||
className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
|
||||
style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }}
|
||||
/>
|
||||
<span className="ml-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
Calculating route...
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (routeError) {
|
||||
return (
|
||||
<div
|
||||
className="px-3 py-2 rounded text-sm"
|
||||
style={{
|
||||
background: 'color-mix(in srgb, var(--status-danger) 15%, transparent)',
|
||||
border: '1px solid var(--status-danger)',
|
||||
color: 'var(--status-danger)',
|
||||
}}
|
||||
>
|
||||
{routeError}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!routeResult?.summary) return null
|
||||
|
||||
const summary = routeResult.summary
|
||||
const features = routeResult.route?.features || []
|
||||
const networkMode = summary.network_mode || routeMode || 'foot'
|
||||
|
||||
// Extract maneuvers from each segment type
|
||||
const wildernessStartFeature = features.find(f =>
|
||||
f.properties?.segment_type === 'wilderness' && f.properties?.segment_position === 'start'
|
||||
)
|
||||
const networkFeature = features.find(f => f.properties?.segment_type === 'network')
|
||||
const wildernessEndFeature = features.find(f =>
|
||||
f.properties?.segment_type === 'wilderness' && f.properties?.segment_position === 'end'
|
||||
)
|
||||
|
||||
const wildernessStartManeuvers = wildernessStartFeature?.properties?.maneuvers || []
|
||||
const networkManeuvers = networkFeature?.properties?.maneuvers || []
|
||||
const wildernessEndManeuvers = wildernessEndFeature?.properties?.maneuvers || []
|
||||
|
||||
const hasManeuvers = wildernessStartManeuvers.length > 0 ||
|
||||
networkManeuvers.length > 0 ||
|
||||
wildernessEndManeuvers.length > 0
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* Total summary */}
|
||||
<div
|
||||
className="flex items-center justify-between px-3 py-2 rounded mb-2"
|
||||
style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }}
|
||||
>
|
||||
<span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
|
||||
{formatDistance(null, summary.total_distance_km)}
|
||||
</span>
|
||||
<span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
{formatTimeMin(summary.total_effort_minutes)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Segment breakdown */}
|
||||
<div className="flex flex-col gap-1 px-2 mb-2">
|
||||
{summary.wilderness_distance_km > 0 && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Mountain size={14} style={{ color: '#f97316' }} />
|
||||
<span style={{ color: 'var(--text-secondary)' }}>Wilderness</span>
|
||||
<span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
|
||||
{formatDistance(null, summary.wilderness_distance_km)} / {formatTimeMin(summary.wilderness_effort_minutes)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{summary.network_distance_km > 0 && (
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Map size={14} style={{ color: '#3b82f6' }} />
|
||||
<span style={{ color: 'var(--text-secondary)' }}>Road/Trail</span>
|
||||
<span className="ml-auto font-mono text-xs" style={{ color: 'var(--text-tertiary)' }}>
|
||||
{formatDistance(null, summary.network_distance_km)} / {formatTimeMin(summary.network_duration_minutes)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Warnings */}
|
||||
{(summary.barrier_crossings > 0 || summary.mvum_closed_crossings > 0) && (
|
||||
<div className="px-2 mb-2 flex flex-col gap-1">
|
||||
{summary.barrier_crossings > 0 && (
|
||||
<div className="flex items-center gap-1 text-xs" style={{ color: 'var(--status-warning)' }}>
|
||||
<AlertTriangle size={12} />
|
||||
<span>{summary.barrier_crossings} barrier crossing{summary.barrier_crossings > 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
)}
|
||||
{summary.mvum_closed_crossings > 0 && (
|
||||
<div className="flex items-center gap-1 text-xs" style={{ color: 'var(--status-warning)' }}>
|
||||
<AlertTriangle size={12} />
|
||||
<span>{summary.mvum_closed_crossings} MVUM closure{summary.mvum_closed_crossings > 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Turn-by-turn directions */}
|
||||
{hasManeuvers && (
|
||||
<div className="flex flex-col max-h-[40vh] overflow-y-auto">
|
||||
<div className="text-xs px-2 mb-1" style={{ color: 'var(--text-tertiary)' }}>Directions</div>
|
||||
|
||||
{/* Wilderness start maneuvers */}
|
||||
{wildernessStartManeuvers.length > 0 && (
|
||||
<>
|
||||
<div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
|
||||
style={{ color: '#f97316', background: 'rgba(249,115,22,0.1)' }}>
|
||||
Wilderness — On Foot
|
||||
</div>
|
||||
{wildernessStartManeuvers.map((man, i) => (
|
||||
<div key={`ws-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
|
||||
<span className="w-5 shrink-0 mt-0.5" style={{ color: '#f97316' }}>
|
||||
<WildernessIcon type={man.type} cardinal={man.cardinal} bearing={man.bearing} />
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
|
||||
{man.instruction}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Network maneuvers */}
|
||||
{networkManeuvers.length > 0 && (
|
||||
<>
|
||||
{wildernessStartManeuvers.length > 0 && (
|
||||
<div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
|
||||
style={{ color: '#3b82f6', background: 'rgba(59,130,246,0.1)' }}>
|
||||
Road/Trail
|
||||
</div>
|
||||
)}
|
||||
{networkManeuvers.map((man, i) => (
|
||||
<div key={`net-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
|
||||
<span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
|
||||
<ManeuverIcon type={man.type} />
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
|
||||
{formatNetworkInstruction(man.instruction, networkMode)}
|
||||
</p>
|
||||
<p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
|
||||
{formatDistance(null, man.distance_km)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Wilderness end maneuvers */}
|
||||
{wildernessEndManeuvers.length > 0 && (
|
||||
<>
|
||||
<div className="text-[10px] uppercase tracking-wide px-2 py-1 font-medium"
|
||||
style={{ color: '#f97316', background: 'rgba(249,115,22,0.1)' }}>
|
||||
Wilderness — On Foot
|
||||
</div>
|
||||
{wildernessEndManeuvers.map((man, i) => (
|
||||
<div key={`we-${i}`} className="flex items-start gap-2 px-2 py-2 text-left">
|
||||
<span className="w-5 shrink-0 mt-0.5" style={{ color: '#f97316' }}>
|
||||
<WildernessIcon type={man.type} cardinal={man.cardinal} bearing={man.bearing} />
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
|
||||
{man.instruction}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import {
|
||||
MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
|
||||
MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
|
||||
GitMerge, CornerRightDown, CornerRightUp, Navigation
|
||||
} from 'lucide-react'
|
||||
import { useStore } from '../store'
|
||||
|
||||
function formatTime(seconds) {
|
||||
if (seconds < 60) return `${Math.round(seconds)}s`
|
||||
if (seconds < 3600) return `${Math.round(seconds / 60)} min`
|
||||
const h = Math.floor(seconds / 3600)
|
||||
const m = Math.round((seconds % 3600) / 60)
|
||||
return m > 0 ? `${h}h ${m}m` : `${h}h`
|
||||
}
|
||||
|
||||
function formatDist(miles) {
|
||||
if (miles < 0.1) return `${Math.round(miles * 5280)} ft`
|
||||
return `${miles.toFixed(1)} mi`
|
||||
}
|
||||
|
||||
function ManeuverIcon({ type }) {
|
||||
const size = 16
|
||||
const props = { size, strokeWidth: 1.5 }
|
||||
switch (type) {
|
||||
case 0: return <MoveRight {...props} />
|
||||
case 1: return <MoveUpRight {...props} />
|
||||
case 2: return <CornerUpRight {...props} />
|
||||
case 3: return <MoveDownRight {...props} />
|
||||
case 4: case 5: return <CornerUpLeft {...props} />
|
||||
case 6: return <MoveDownLeft {...props} />
|
||||
case 7: return <CornerUpLeft {...props} />
|
||||
case 8: return <MoveUpLeft {...props} />
|
||||
case 9: return <Navigation {...props} />
|
||||
case 10: case 11: case 12: return <CircleDot {...props} />
|
||||
case 15: case 16: return <RotateCw {...props} />
|
||||
case 24: return <GitMerge {...props} />
|
||||
case 25: return <CornerRightUp {...props} />
|
||||
case 26: return <CornerRightDown {...props} />
|
||||
default: return <MoveRight {...props} />
|
||||
}
|
||||
}
|
||||
|
||||
export default function ManeuverList({ onManeuverClick }) {
|
||||
const route = useStore((s) => s.route)
|
||||
const routeLoading = useStore((s) => s.routeLoading)
|
||||
const routeError = useStore((s) => s.routeError)
|
||||
|
||||
if (routeLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<div
|
||||
className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
|
||||
style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }}
|
||||
/>
|
||||
<span className="ml-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
Calculating route...
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (routeError) {
|
||||
return (
|
||||
<div
|
||||
className="px-3 py-2 rounded text-sm"
|
||||
style={{
|
||||
background: 'color-mix(in srgb, var(--status-danger) 15%, transparent)',
|
||||
border: '1px solid var(--status-danger)',
|
||||
color: 'var(--status-danger)',
|
||||
}}
|
||||
>
|
||||
{routeError}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!route || !route.legs) return null
|
||||
|
||||
const totalTime = route.summary?.time || 0
|
||||
const totalDist = route.summary?.length || 0
|
||||
|
||||
const allManeuvers = []
|
||||
let timeRemaining = totalTime
|
||||
|
||||
for (let legIdx = 0; legIdx < route.legs.length; legIdx++) {
|
||||
const leg = route.legs[legIdx]
|
||||
for (const man of leg.maneuvers || []) {
|
||||
allManeuvers.push({ ...man, _legIndex: legIdx, timeRemaining })
|
||||
timeRemaining -= man.time || 0
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* Route summary */}
|
||||
<div
|
||||
className="flex items-center justify-between px-3 py-2 rounded mb-2"
|
||||
style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }}
|
||||
>
|
||||
<span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
|
||||
{formatDist(totalDist)}
|
||||
</span>
|
||||
<span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
{formatTime(totalTime)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Maneuver steps */}
|
||||
<div className="flex flex-col max-h-[50vh] overflow-y-auto">
|
||||
{allManeuvers.map((man, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => {
|
||||
if (man.begin_shape_index != null && onManeuverClick) onManeuverClick(man)
|
||||
}}
|
||||
className="flex items-start gap-2 px-2 py-2 text-left rounded transition-colors duration-75"
|
||||
style={{ '--hover-bg': 'var(--bg-overlay)' }}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-overlay)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
<span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
|
||||
<ManeuverIcon type={man.type} />
|
||||
</span>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
|
||||
{man.instruction || man.verbal_pre_transition_instruction || 'Continue'}
|
||||
</p>
|
||||
<p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
|
||||
{formatDist(man.length || 0)}
|
||||
{man.timeRemaining > 0 && (
|
||||
<span className="ml-2">{formatTime(man.timeRemaining)} left</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,60 +1,53 @@
|
|||
import { useRef, useCallback, useEffect, useState } from 'react'
|
||||
import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin, Target } from 'lucide-react'
|
||||
import { LogIn, LogOut } from 'lucide-react'
|
||||
import ThemePicker from './ThemePicker'
|
||||
import { useStore, usePanelState } from '../store'
|
||||
import { hasFeature } from '../config'
|
||||
import SearchBar from './SearchBar'
|
||||
import StopList from './StopList'
|
||||
import ModeSelector from './ModeSelector'
|
||||
import ManeuverList from './ManeuverList'
|
||||
import ContactList from './ContactList'
|
||||
import { PlaceCard } from './PlaceCard'
|
||||
import DirectionsPanel from './DirectionsPanel'
|
||||
import PlaceDetail from './PlaceDetail'
|
||||
import { requestOptimizedRoute } from '../api'
|
||||
|
||||
const TRAVEL_MODES = [
|
||||
{ id: 'auto', label: 'Drive', Icon: Car },
|
||||
{ id: 'foot', label: 'Foot', Icon: Footprints },
|
||||
{ id: 'mtb', label: 'MTB', Icon: Bike },
|
||||
{ id: 'atv', label: 'ATV', Icon: Car },
|
||||
{ id: 'vehicle', label: '4x4', Icon: Car },
|
||||
]
|
||||
|
||||
const BOUNDARY_MODES = [
|
||||
{ id: 'strict', label: 'Strict', Icon: Shield, title: 'Avoid barriers' },
|
||||
{ id: 'pragmatic', label: 'Cross', Icon: AlertTriangle, title: 'Cross with penalty' },
|
||||
{ id: 'emergency', label: 'Ignore', Icon: Zap, title: 'Ignore barriers' },
|
||||
]
|
||||
|
||||
export default function Panel({ onClearRoute }) {
|
||||
export default function Panel({ onManeuverClick }) {
|
||||
const selectedPlace = useStore((s) => s.selectedPlace)
|
||||
const pendingDestination = useStore((s) => s.pendingDestination)
|
||||
const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
|
||||
const routeStart = useStore((s) => s.routeStart)
|
||||
const routeEnd = useStore((s) => s.routeEnd)
|
||||
const routeMode = useStore((s) => s.routeMode)
|
||||
const boundaryMode = useStore((s) => s.boundaryMode)
|
||||
const routeResult = useStore((s) => s.routeResult)
|
||||
const clearPendingDestination = useStore((s) => s.clearPendingDestination)
|
||||
const stops = useStore((s) => s.stops)
|
||||
const mode = useStore((s) => s.mode)
|
||||
const route = useStore((s) => s.route)
|
||||
const routeLoading = useStore((s) => s.routeLoading)
|
||||
const setRouteMode = useStore((s) => s.setRouteMode)
|
||||
const setBoundaryMode = useStore((s) => s.setBoundaryMode)
|
||||
const pickingRouteField = useStore((s) => s.pickingRouteField)
|
||||
const setPickingRouteField = useStore((s) => s.setPickingRouteField)
|
||||
const clearRoute = useStore((s) => s.clearRoute)
|
||||
const routeError = useStore((s) => s.routeError)
|
||||
const setStops = useStore((s) => s.setStops)
|
||||
const setRoute = useStore((s) => s.setRoute)
|
||||
const setRouteError = useStore((s) => s.setRouteError)
|
||||
const setRouteLoading = useStore((s) => s.setRouteLoading)
|
||||
const sheetState = useStore((s) => s.sheetState)
|
||||
const setSheetState = useStore((s) => s.setSheetState)
|
||||
const theme = useStore((s) => s.theme)
|
||||
const themeOverride = useStore((s) => s.themeOverride)
|
||||
const setThemeOverride = useStore((s) => s.setThemeOverride)
|
||||
const gpsOrigin = useStore((s) => s.gpsOrigin)
|
||||
const geoPermission = useStore((s) => s.geoPermission)
|
||||
const activeTab = useStore((s) => s.activeTab)
|
||||
const auth = useStore((s) => s.auth)
|
||||
const setActiveTab = useStore((s) => s.setActiveTab)
|
||||
const directionsMode = useStore((s) => s.directionsMode)
|
||||
const setDirectionsMode = useStore((s) => s.setDirectionsMode)
|
||||
|
||||
const panelState = usePanelState()
|
||||
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [optimizing, setOptimizing] = useState(false)
|
||||
const sheetRef = useRef(null)
|
||||
const dragStartY = useRef(0)
|
||||
const dragStartState = useRef('half')
|
||||
|
||||
// Show contacts tab only if feature enabled AND user is authenticated
|
||||
const showContacts = hasFeature('has_contacts') && auth.authenticated
|
||||
|
||||
// Responsive detection
|
||||
useEffect(() => {
|
||||
const check = () => setIsMobile(window.innerWidth < 768)
|
||||
check()
|
||||
|
|
@ -62,9 +55,61 @@ export default function Panel({ onClearRoute }) {
|
|||
return () => window.removeEventListener('resize', check)
|
||||
}, [])
|
||||
|
||||
// Auth handlers
|
||||
const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
|
||||
const handleLogout = () => { window.location.href = 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
|
||||
|
||||
// Optimize stops
|
||||
const hasGpsOrigin = gpsOrigin && geoPermission === 'granted'
|
||||
const effectiveCount = stops.length + (hasGpsOrigin ? 1 : 0)
|
||||
|
||||
const handleOptimize = useCallback(async () => {
|
||||
if (effectiveCount < 3 || optimizing) return
|
||||
setOptimizing(true)
|
||||
try {
|
||||
const { userLocation } = useStore.getState()
|
||||
let locations = stops.map((s) => ({ lat: s.lat, lon: s.lon }))
|
||||
if (hasGpsOrigin && userLocation) {
|
||||
locations = [{ lat: userLocation.lat, lon: userLocation.lon }, ...locations]
|
||||
}
|
||||
const data = await requestOptimizedRoute(locations, mode)
|
||||
if (data.trip) {
|
||||
const wpOrder = hasGpsOrigin && userLocation
|
||||
? (data.trip.locations || []).slice(1)
|
||||
: data.trip.locations
|
||||
if (wpOrder && wpOrder.length === stops.length) {
|
||||
const reordered = wpOrder.map((wp) => {
|
||||
let closest = stops[0]
|
||||
let minDist = Infinity
|
||||
for (const s of stops) {
|
||||
const d = Math.abs(s.lat - wp.lat) + Math.abs(s.lon - wp.lon)
|
||||
if (d < minDist) {
|
||||
minDist = d
|
||||
closest = s
|
||||
}
|
||||
}
|
||||
return closest
|
||||
})
|
||||
const seen = new Set()
|
||||
const unique = reordered.filter((s) => {
|
||||
if (seen.has(s.id)) return false
|
||||
seen.add(s.id)
|
||||
return true
|
||||
})
|
||||
if (unique.length === stops.length) {
|
||||
setStops(unique)
|
||||
}
|
||||
}
|
||||
setRoute(data.trip)
|
||||
}
|
||||
} catch (e) {
|
||||
setRouteError(e.message)
|
||||
} finally {
|
||||
setOptimizing(false)
|
||||
}
|
||||
}, [stops, mode, optimizing, effectiveCount, hasGpsOrigin, setStops, setRoute, setRouteError])
|
||||
|
||||
// Mobile sheet drag handling
|
||||
const handleTouchStart = useCallback((e) => {
|
||||
dragStartY.current = e.touches[0].clientY
|
||||
dragStartState.current = sheetState
|
||||
|
|
@ -82,30 +127,21 @@ export default function Panel({ onClearRoute }) {
|
|||
}
|
||||
}, [setSheetState])
|
||||
|
||||
const handleClearRoute = () => {
|
||||
clearRoute()
|
||||
onClearRoute?.()
|
||||
}
|
||||
const showOptimize = effectiveCount >= 3
|
||||
|
||||
// Determine what to show based on panel state
|
||||
const showPreviewCard = panelState.startsWith('PREVIEW')
|
||||
const hasRoutePoints = routeStart || routeEnd
|
||||
const showRouteSection = hasRoutePoints || routeResult || routeLoading
|
||||
const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
|
||||
const showRouteSection = ['ROUTING', 'ROUTE_CALCULATED', 'PREVIEW_ROUTING', 'PREVIEW_CALCULATED'].includes(panelState) || !!pendingDestination
|
||||
const showManeuvers = panelState === 'ROUTE_CALCULATED' || panelState === 'PREVIEW_CALCULATED'
|
||||
const showEmptyState = panelState === 'IDLE' && !pendingDestination
|
||||
|
||||
// Show side panel place card when building route (either mode) and place is selected
|
||||
const showSidePlaceCard = (directionsMode || showRouteSection) && selectedPlace
|
||||
|
||||
const routesContent = directionsMode ? (
|
||||
// Directions mode: just the directions panel, place card is shown in side panel
|
||||
<DirectionsPanel onClose={() => {
|
||||
setDirectionsMode(false)
|
||||
onClearRoute?.()
|
||||
}} />
|
||||
) : (
|
||||
// Routes tab content - now state-driven
|
||||
const routesContent = (
|
||||
<>
|
||||
<SearchBar />
|
||||
|
||||
{showPreviewCard && selectedPlace && !showRouteSection && (
|
||||
{/* Preview card when place is selected */}
|
||||
{showPreviewCard && selectedPlace && (
|
||||
<div className="mt-3">
|
||||
<PlaceCard
|
||||
place={selectedPlace}
|
||||
|
|
@ -116,100 +152,44 @@ export default function Panel({ onClearRoute }) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Route section with stops */}
|
||||
{showRouteSection && (
|
||||
<>
|
||||
<div className="mt-3">
|
||||
<StopList />
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-col gap-2">
|
||||
<ModeSelector />
|
||||
{showOptimize && (
|
||||
<button
|
||||
onClick={handleOptimize}
|
||||
disabled={optimizing || routeLoading}
|
||||
className="navi-btn-secondary w-full"
|
||||
>
|
||||
{optimizing ? 'Optimizing...' : 'Optimize stop order'}
|
||||
</button>
|
||||
)}
|
||||
{pendingDestination && stops.length === 0 && (
|
||||
<button
|
||||
onClick={clearPendingDestination}
|
||||
className="navi-btn-secondary w-full"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Maneuvers when route is calculated */}
|
||||
{showManeuvers && (route || routeLoading || routeError) && (
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||
Route
|
||||
</span>
|
||||
<button
|
||||
onClick={handleClearRoute}
|
||||
className="p-1 rounded hover:bg-[var(--bg-overlay)]"
|
||||
title="Clear route"
|
||||
>
|
||||
<X size={14} style={{ color: 'var(--text-tertiary)' }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 mb-3 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={12} style={{ color: '#22c55e' }} />
|
||||
<span className="flex-1" style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||
{routeStart?.name || 'Click pin to pick start'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPickingRouteField('origin')}
|
||||
className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
|
||||
style={{ color: pickingRouteField === 'origin' ? 'var(--accent)' : 'var(--text-tertiary)' }}
|
||||
title="Pick start from map"
|
||||
>
|
||||
<Target size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={12} style={{ color: '#ef4444' }} />
|
||||
<span className="flex-1" style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||
{routeEnd?.name || 'Click pin to pick destination'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPickingRouteField('destination')}
|
||||
className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
|
||||
style={{ color: pickingRouteField === 'destination' ? 'var(--accent)' : 'var(--text-tertiary)' }}
|
||||
title="Pick destination from map"
|
||||
>
|
||||
<Target size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 mb-2">
|
||||
{TRAVEL_MODES.map((m) => {
|
||||
const active = routeMode === m.id
|
||||
return (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setRouteMode(m.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
|
||||
style={{
|
||||
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
|
||||
color: active ? 'var(--accent)' : 'var(--text-tertiary)',
|
||||
}}
|
||||
title={m.label}
|
||||
>
|
||||
<m.Icon size={14} />
|
||||
<span className="hidden sm:inline">{m.label}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{routeMode !== 'auto' && (
|
||||
<div className="flex gap-1 mb-3">
|
||||
{BOUNDARY_MODES.map((m) => {
|
||||
const active = boundaryMode === m.id
|
||||
return (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setBoundaryMode(m.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
|
||||
style={{
|
||||
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
|
||||
color: active ? 'var(--accent)' : 'var(--text-tertiary)',
|
||||
}}
|
||||
title={m.title}
|
||||
>
|
||||
<m.Icon size={14} />
|
||||
<span className="hidden sm:inline">{m.label}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ManeuverList />
|
||||
<ManeuverList onManeuverClick={onManeuverClick} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{showEmptyState && (
|
||||
<div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}>
|
||||
<p>Search or tap the map to explore</p>
|
||||
|
|
@ -223,13 +203,13 @@ export default function Panel({ onClearRoute }) {
|
|||
{showContacts && (
|
||||
<div className="navi-tab-bar mb-3">
|
||||
<button
|
||||
className={"navi-tab " + (activeTab === 'routes' ? 'navi-tab-active' : '')}
|
||||
className={`navi-tab ${activeTab === 'routes' ? 'navi-tab-active' : ''}`}
|
||||
onClick={() => setActiveTab('routes')}
|
||||
>
|
||||
Routes
|
||||
</button>
|
||||
<button
|
||||
className={"navi-tab " + (activeTab === 'contacts' ? 'navi-tab-active' : '')}
|
||||
className={`navi-tab ${activeTab === 'contacts' ? 'navi-tab-active' : ''}`}
|
||||
onClick={() => setActiveTab('contacts')}
|
||||
>
|
||||
Contacts
|
||||
|
|
@ -251,7 +231,7 @@ export default function Panel({ onClearRoute }) {
|
|||
onClick={handleLogout}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded text-xs"
|
||||
style={{ color: 'var(--text-tertiary)' }}
|
||||
title={"Logged in as " + auth.username + ". Click to log out."}
|
||||
title={`Logged in as ${auth.username}. Click to log out.`}
|
||||
>
|
||||
<span className="hidden sm:inline">{auth.username}</span>
|
||||
<LogOut size={14} />
|
||||
|
|
@ -273,88 +253,24 @@ export default function Panel({ onClearRoute }) {
|
|||
</div>
|
||||
)
|
||||
|
||||
// Side panel for place card during directions mode (desktop only)
|
||||
const sidePlaceCardPanel = showSidePlaceCard && !isMobile && (
|
||||
<div
|
||||
className="absolute top-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
|
||||
style={{
|
||||
left: '400px',
|
||||
width: '300px',
|
||||
background: 'var(--bg-raised)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
boxShadow: 'inset 4px 0 8px -4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
|
||||
{selectedPlace?.name || 'Place Info'}
|
||||
</span>
|
||||
<button
|
||||
onClick={clearSelectedPlace}
|
||||
className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors"
|
||||
title="Close"
|
||||
>
|
||||
<X size={16} style={{ color: 'var(--text-tertiary)' }} />
|
||||
</button>
|
||||
</div>
|
||||
{/* Use PlaceCard in compact preview mode */}
|
||||
<PlaceCard
|
||||
place={selectedPlace}
|
||||
variant="preview"
|
||||
expanded={true}
|
||||
onClose={clearSelectedPlace}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
// Mobile overlay for place card during directions mode
|
||||
const mobilePlaceCardOverlay = showSidePlaceCard && isMobile && (
|
||||
<div
|
||||
className="absolute inset-0 z-20 flex flex-col rounded-t-2xl"
|
||||
style={{ background: 'var(--bg-raised)' }}
|
||||
>
|
||||
<div className="flex items-center justify-between p-4 border-b" style={{ borderColor: 'var(--border)' }}>
|
||||
<span className="text-sm font-medium truncate pr-2" style={{ color: 'var(--text-primary)' }}>
|
||||
{selectedPlace?.name || 'Place Info'}
|
||||
</span>
|
||||
<button
|
||||
onClick={clearSelectedPlace}
|
||||
className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors shrink-0"
|
||||
title="Close"
|
||||
>
|
||||
<X size={16} style={{ color: 'var(--text-tertiary)' }} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<PlaceCard
|
||||
place={selectedPlace}
|
||||
variant="preview"
|
||||
expanded={true}
|
||||
onClose={clearSelectedPlace}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
// Desktop: side panel (now 360px to accommodate PlaceCard)
|
||||
if (!isMobile) {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
|
||||
style={{
|
||||
width: '400px',
|
||||
background: 'var(--bg-raised)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
{content}
|
||||
</div>
|
||||
{sidePlaceCardPanel}
|
||||
</>
|
||||
<div
|
||||
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
|
||||
style={{
|
||||
width: '400px',
|
||||
background: 'var(--bg-raised)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
{content}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Mobile: bottom sheet
|
||||
const sheetHeights = {
|
||||
collapsed: 'h-12',
|
||||
half: 'h-[45vh]',
|
||||
|
|
@ -364,12 +280,13 @@ export default function Panel({ onClearRoute }) {
|
|||
return (
|
||||
<div
|
||||
ref={sheetRef}
|
||||
className={"absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 " + sheetHeights[sheetState]}
|
||||
className={`absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 ${sheetHeights[sheetState]}`}
|
||||
style={{
|
||||
background: 'var(--bg-raised)',
|
||||
borderTop: '1px solid var(--border)',
|
||||
}}
|
||||
>
|
||||
{/* Drag handle */}
|
||||
<div
|
||||
className="flex justify-center py-2 cursor-grab"
|
||||
onTouchStart={handleTouchStart}
|
||||
|
|
@ -384,10 +301,9 @@ export default function Panel({ onClearRoute }) {
|
|||
</div>
|
||||
|
||||
{sheetState !== 'collapsed' && (
|
||||
<div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)] relative" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
|
||||
<div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)]" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
|
||||
{header}
|
||||
{content}
|
||||
{mobilePlaceCardOverlay}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -352,9 +352,6 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
|
|||
if (placeLat == null || placeLon == null) return
|
||||
// Skip for dropped pins - they get reverse geocoded by MapView
|
||||
if (place?.source === 'map_click') return
|
||||
// Don't reverse geocode if we already identified the entity from a label click
|
||||
// The basemap label provides name, kind, wikidata - reverse geocode would return wrong entity
|
||||
if (place?.source === 'basemap_label' && place?.raw?.kind) return
|
||||
|
||||
const controller = new AbortController()
|
||||
fetchReverse(placeLat, placeLon).then((result) => {
|
||||
|
|
@ -408,16 +405,6 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
|
|||
osm_relation_id: data.osm_relation_id,
|
||||
extratags: { ...(prev && prev !== "loading" ? prev.extratags : {}), ...data.extratags },
|
||||
}))
|
||||
// Set osm_type/osm_id from osm_relation_id to trigger Effect 3 (wiki summary fetch)
|
||||
if (data?.osm_relation_id) {
|
||||
const current = useStore.getState().selectedPlace
|
||||
if (current && current.lat === placeLat && current.lon === placeLon) {
|
||||
useStore.getState().setSelectedPlace({
|
||||
...current,
|
||||
raw: { ...current.raw, osm_type: 'R', osm_id: data.osm_relation_id }
|
||||
})
|
||||
}
|
||||
}
|
||||
if (data?.boundary) {
|
||||
const current = useStore.getState().selectedPlace
|
||||
if (current && current.lat === placeLat && current.lon === placeLon) {
|
||||
|
|
@ -476,7 +463,6 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
|
|||
const savedContact = contacts.find((c) => c.lat === place.lat && c.lon === place.lon)
|
||||
|
||||
const handleDirections = () => {
|
||||
console.log('[TRACE-DIRECTIONS] PlaceCard handleDirections, place:', { lat: place?.lat, lon: place?.lon, name: place?.name })
|
||||
// No toast - empty origin slot is the visual prompt
|
||||
startDirections(place)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,30 +6,6 @@ import { buildAddress } from '../utils/place'
|
|||
import { searchGeocode } from '../api'
|
||||
import { hasFeature } from '../config'
|
||||
|
||||
|
||||
/** Parse coordinate input like "42.35, -114.30" or "42.35 -114.30" */
|
||||
function parseCoordinates(input) {
|
||||
if (!input) return null
|
||||
const trimmed = input.trim()
|
||||
|
||||
// Pattern: lat, lon or lat lon (with optional comma)
|
||||
// Supports: "42.35, -114.30", "42.35 -114.30", "42.35,-114.30"
|
||||
const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
|
||||
const match = trimmed.match(pattern)
|
||||
|
||||
if (!match) return null
|
||||
|
||||
const lat = parseFloat(match[1])
|
||||
const lon = parseFloat(match[2])
|
||||
|
||||
// Validate ranges
|
||||
if (isNaN(lat) || isNaN(lon)) return null
|
||||
if (lat < -90 || lat > 90) return null
|
||||
if (lon < -180 || lon > 180) return null
|
||||
|
||||
return { lat, lon }
|
||||
}
|
||||
|
||||
/** Get category icon based on result type/source */
|
||||
function CategoryIcon({ result }) {
|
||||
const type = result.type || ''
|
||||
|
|
@ -95,25 +71,6 @@ const SearchBar = forwardRef(function SearchBar(_, ref) {
|
|||
return
|
||||
}
|
||||
|
||||
// Check for coordinate input first
|
||||
const coords = parseCoordinates(q)
|
||||
if (coords) {
|
||||
const coordResult = {
|
||||
lat: coords.lat,
|
||||
lon: coords.lon,
|
||||
name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
|
||||
address: "Coordinates",
|
||||
type: "coordinates",
|
||||
source: "coordinates",
|
||||
match_code: null,
|
||||
raw: {},
|
||||
}
|
||||
setResults([coordResult])
|
||||
setAutocompleteOpen(true)
|
||||
setSearchLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Prepend matching contacts
|
||||
let contactResults = []
|
||||
if (hasFeature('has_contacts') && contacts.length > 0) {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const FALLBACK_CONFIG = {
|
|||
profile: 'home',
|
||||
region_name: 'North America',
|
||||
tileset: {
|
||||
url: '/tiles/planet/current.pmtiles',
|
||||
url: '/tiles/na.pmtiles',
|
||||
bounds: [-168, 14, -52, 72],
|
||||
max_zoom: 15,
|
||||
attribution: 'Protomaps © OSM',
|
||||
|
|
@ -30,6 +30,8 @@ const FALLBACK_CONFIG = {
|
|||
has_landclass: false,
|
||||
has_public_lands_layer: false,
|
||||
has_contours: true,
|
||||
has_contours_test: true,
|
||||
has_contours_test_10ft: false,
|
||||
has_address_book_write: false,
|
||||
has_usfs_trails: false,
|
||||
has_blm_trails: false,
|
||||
|
|
|
|||
469
src/store.js
469
src/store.js
|
|
@ -1,314 +1,155 @@
|
|||
import { create } from "zustand"
|
||||
import { requestOffroute } from "./api"
|
||||
|
||||
export const useStore = create((set, get) => ({
|
||||
// ── Search state ──
|
||||
query: "",
|
||||
results: [],
|
||||
searchLoading: false,
|
||||
abortController: null,
|
||||
|
||||
setQuery: (query) => set({ query }),
|
||||
setResults: (results) => set({ results }),
|
||||
setSearchLoading: (loading) => set({ searchLoading: loading }),
|
||||
setAbortController: (ctrl) => set({ abortController: ctrl }),
|
||||
|
||||
// ── Geolocation ──
|
||||
userLocation: null, // { lat, lon }
|
||||
geoPermission: "prompt", // "prompt" | "granted" | "denied"
|
||||
|
||||
setUserLocation: (loc) => set({ userLocation: loc }),
|
||||
setGeoPermission: (p) => set({ geoPermission: p }),
|
||||
|
||||
// ── Map viewport (for search bias) ──
|
||||
mapCenter: null, // { lat, lon, zoom }
|
||||
setMapCenter: (center) => set({ mapCenter: center }),
|
||||
|
||||
// ── Unified Route State ──
|
||||
// routeStart = origin (source of truth)
|
||||
// routeEnd = destination (source of truth)
|
||||
// stops[] = ONLY intermediate waypoints (not origin/destination)
|
||||
routeStart: null, // { lat, lon, name }
|
||||
routeEnd: null, // { lat, lon, name }
|
||||
stops: [], // Intermediate waypoints only: [{ id, lat, lon, name }, ...]
|
||||
routeMode: "auto", // foot | mtb | atv | vehicle
|
||||
boundaryMode: "strict", // strict | pragmatic | emergency
|
||||
routeResult: null, // Response from /api/offroute
|
||||
routeLoading: false,
|
||||
routeError: null,
|
||||
|
||||
// Map display callback - set by MapView
|
||||
_updateRouteDisplay: null,
|
||||
_clearRouteDisplay: null,
|
||||
setRouteDisplayCallbacks: (update, clear) => set({ _updateRouteDisplay: update, _clearRouteDisplay: clear }),
|
||||
|
||||
setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
|
||||
setRouteEnd: (place) => set({ routeEnd: place }),
|
||||
setRouteResult: (result) => set({ routeResult: result, routeError: null }),
|
||||
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
||||
setRouteError: (err) => set({ routeError: err, routeResult: null }),
|
||||
|
||||
// Mode/boundary setters that trigger recalculation
|
||||
setRouteMode: (mode) => {
|
||||
set({ routeMode: mode })
|
||||
get().computeRoute()
|
||||
},
|
||||
setBoundaryMode: (mode) => {
|
||||
set({ boundaryMode: mode })
|
||||
get().computeRoute()
|
||||
},
|
||||
|
||||
clearRoute: () => {
|
||||
const { _clearRouteDisplay } = get()
|
||||
if (_clearRouteDisplay) _clearRouteDisplay()
|
||||
set({
|
||||
routeStart: null,
|
||||
routeEnd: null,
|
||||
stops: [],
|
||||
routeResult: null,
|
||||
routeError: null,
|
||||
})
|
||||
},
|
||||
|
||||
// ── INTERMEDIATE STOPS MANAGEMENT ──
|
||||
// stops[] contains ONLY intermediate waypoints, not origin/destination
|
||||
|
||||
// Add intermediate stop - can be called with or without place
|
||||
// With place: creates pre-filled stop (from radial menu)
|
||||
// Without place: creates empty placeholder (from Add Stop button)
|
||||
addIntermediateStop: (place) => {
|
||||
const { stops } = get()
|
||||
if (stops.length >= 8) return false // Max 8 intermediate stops
|
||||
const newStop = {
|
||||
id: crypto.randomUUID(),
|
||||
lat: place?.lat ?? null,
|
||||
lon: place?.lon ?? null,
|
||||
name: place?.name ?? "",
|
||||
}
|
||||
set({ stops: [...stops, newStop] })
|
||||
return true
|
||||
},
|
||||
|
||||
updateStop: (id, place) => {
|
||||
const { stops } = get()
|
||||
const newStops = stops.map((s) =>
|
||||
s.id === id ? { ...s, lat: place.lat, lon: place.lon, name: place.name } : s
|
||||
)
|
||||
set({ stops: newStops })
|
||||
// Trigger route recalculation if all waypoints have coordinates
|
||||
get().computeRoute()
|
||||
},
|
||||
|
||||
removeStop: (id) => {
|
||||
const { stops } = get()
|
||||
const newStops = stops.filter((s) => s.id !== id)
|
||||
set({ stops: newStops })
|
||||
// Recalculate route without this stop
|
||||
get().computeRoute()
|
||||
},
|
||||
|
||||
setStops: (stops) => set({ stops }),
|
||||
|
||||
// ── UNIFIED ROUTING TRIGGER ──
|
||||
// Handles both 2-point and multi-point routing
|
||||
computeRoute: async () => {
|
||||
const { routeStart, routeEnd, stops, routeMode, boundaryMode, _updateRouteDisplay } = get()
|
||||
|
||||
// Need both endpoints to route
|
||||
if (!routeStart || !routeEnd) return
|
||||
|
||||
// Filter out incomplete stops (no coordinates yet)
|
||||
const validStops = stops.filter((s) => s.lat != null && s.lon != null)
|
||||
|
||||
// Build full waypoint list: [origin, ...intermediates, destination]
|
||||
const waypoints = [
|
||||
routeStart,
|
||||
...validStops,
|
||||
routeEnd,
|
||||
]
|
||||
|
||||
console.log("[TRACE-ROUTE] computeRoute with waypoints:", waypoints.length, waypoints.map(w => w.name))
|
||||
|
||||
set({ routeLoading: true, routeError: null })
|
||||
|
||||
try {
|
||||
if (waypoints.length === 2) {
|
||||
// Simple 2-point routing
|
||||
const data = await requestOffroute(routeStart, routeEnd, routeMode, boundaryMode)
|
||||
if (data.status === "ok" && data.route) {
|
||||
set({ routeResult: data, routeError: null })
|
||||
if (_updateRouteDisplay) _updateRouteDisplay(data.route)
|
||||
} else {
|
||||
set({ routeError: data.message || data.error || "No route found", routeResult: null })
|
||||
}
|
||||
} else {
|
||||
// Multi-point routing: chain sequential 2-point routes and merge
|
||||
const segments = []
|
||||
let totalDistanceKm = 0
|
||||
let totalEffortMinutes = 0
|
||||
let allFeatures = []
|
||||
|
||||
for (let i = 0; i < waypoints.length - 1; i++) {
|
||||
const from = waypoints[i]
|
||||
const to = waypoints[i + 1]
|
||||
const segmentData = await requestOffroute(from, to, routeMode, boundaryMode)
|
||||
|
||||
if (segmentData.status !== "ok" || !segmentData.route) {
|
||||
throw new Error("No route found between " + (from.name || "waypoint") + " and " + (to.name || "waypoint"))
|
||||
}
|
||||
|
||||
segments.push(segmentData)
|
||||
|
||||
// Accumulate totals
|
||||
if (segmentData.summary) {
|
||||
totalDistanceKm += segmentData.summary.total_distance_km || 0
|
||||
totalEffortMinutes += segmentData.summary.total_effort_minutes || 0
|
||||
}
|
||||
|
||||
// Collect features
|
||||
if (segmentData.route?.features) {
|
||||
allFeatures.push(...segmentData.route.features)
|
||||
}
|
||||
}
|
||||
|
||||
// Build merged result
|
||||
const mergedResult = {
|
||||
status: "ok",
|
||||
summary: {
|
||||
total_distance_km: totalDistanceKm,
|
||||
total_effort_minutes: totalEffortMinutes,
|
||||
waypoint_count: waypoints.length,
|
||||
},
|
||||
route: {
|
||||
type: "FeatureCollection",
|
||||
features: allFeatures,
|
||||
},
|
||||
}
|
||||
|
||||
set({ routeResult: mergedResult, routeError: null })
|
||||
if (_updateRouteDisplay) _updateRouteDisplay(mergedResult.route)
|
||||
}
|
||||
} catch (e) {
|
||||
set({ routeError: e.message, routeResult: null })
|
||||
} finally {
|
||||
set({ routeLoading: false })
|
||||
}
|
||||
},
|
||||
|
||||
// ── Legacy compatibility ──
|
||||
gpsOrigin: true,
|
||||
pendingDestination: null,
|
||||
setGpsOrigin: (val) => set({ gpsOrigin: val }),
|
||||
setPendingDestination: (place) => set({ pendingDestination: place }),
|
||||
clearPendingDestination: () => set({ pendingDestination: null }),
|
||||
|
||||
// Master startDirections - enters directions mode with destination pre-filled
|
||||
startDirections: (place) => {
|
||||
console.log("[TRACE-STORE] startDirections received place:", { lat: place?.lat, lon: place?.lon, name: place?.name })
|
||||
const { geoPermission, userLocation, clearRoute } = get()
|
||||
clearRoute()
|
||||
|
||||
const destination = {
|
||||
lat: place.lat,
|
||||
lon: place.lon,
|
||||
name: place.name,
|
||||
source: place.source,
|
||||
matchCode: place.matchCode,
|
||||
}
|
||||
|
||||
let origin = null
|
||||
if (geoPermission === "granted" && userLocation) {
|
||||
origin = {
|
||||
lat: userLocation.lat,
|
||||
lon: userLocation.lon,
|
||||
name: "Your location",
|
||||
source: "gps",
|
||||
}
|
||||
}
|
||||
|
||||
set({
|
||||
routeEnd: destination,
|
||||
routeStart: origin,
|
||||
directionsMode: true,
|
||||
activeDirectionsField: origin ? null : "origin",
|
||||
selectedPlace: null,
|
||||
})
|
||||
},
|
||||
|
||||
// ── Place detail ──
|
||||
selectedPlace: null,
|
||||
clickMarker: null,
|
||||
|
||||
setSelectedPlace: (place) => set({ selectedPlace: place }),
|
||||
updateBoundary: null,
|
||||
setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
|
||||
clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
|
||||
setClickMarker: (marker) => set({ clickMarker: marker }),
|
||||
clearClickMarker: () => set({ clickMarker: null }),
|
||||
|
||||
// ── UI state ──
|
||||
sheetState: "half",
|
||||
panelOpen: true,
|
||||
autocompleteOpen: false,
|
||||
directionsMode: false,
|
||||
activeDirectionsField: null,
|
||||
pickingRouteField: null,
|
||||
theme: "dark",
|
||||
themeOverride: null,
|
||||
viewMode: (typeof localStorage !== "undefined" && localStorage.getItem("navi-view-mode")) || "map",
|
||||
|
||||
setSheetState: (s) => set({ sheetState: s }),
|
||||
setViewMode: (mode) => {
|
||||
set({ viewMode: mode })
|
||||
localStorage.setItem("navi-view-mode", mode)
|
||||
},
|
||||
setPanelOpen: (open) => set({ panelOpen: open }),
|
||||
setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
|
||||
setDirectionsMode: (mode) => set({ directionsMode: mode, activeDirectionsField: mode ? "origin" : null }),
|
||||
setActiveDirectionsField: (field) => set({ activeDirectionsField: field }),
|
||||
setPickingRouteField: (field) => set({ pickingRouteField: field }),
|
||||
clearPickingRouteField: () => set({ pickingRouteField: null }),
|
||||
setTheme: (theme) => set({ theme }),
|
||||
setThemeOverride: (override) => {
|
||||
set({ themeOverride: override })
|
||||
if (override) {
|
||||
localStorage.setItem("navi-theme-override", override)
|
||||
} else {
|
||||
localStorage.removeItem("navi-theme-override")
|
||||
}
|
||||
},
|
||||
|
||||
// ── Auth state ──
|
||||
auth: { authenticated: false, username: null, loaded: false },
|
||||
setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
|
||||
|
||||
// ── Contacts ──
|
||||
contacts: [],
|
||||
contactsLoaded: false,
|
||||
activeTab: "routes",
|
||||
editingContact: null,
|
||||
pickingLocationFor: null,
|
||||
|
||||
setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
|
||||
setActiveTab: (tab) => set({ activeTab: tab }),
|
||||
setEditingContact: (c) => set({ editingContact: c }),
|
||||
clearEditingContact: () => set({ editingContact: null }),
|
||||
setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
|
||||
clearPickingLocationFor: () => set({ pickingLocationFor: null }),
|
||||
}))
|
||||
|
||||
// ── Panel state selector ──
|
||||
export const usePanelState = () => {
|
||||
return useStore((s) => {
|
||||
const hasPreview = !!s.selectedPlace
|
||||
const hasRoute = !!s.routeResult
|
||||
const hasRoutePoints = !!s.routeStart || !!s.routeEnd
|
||||
|
||||
if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
|
||||
if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
|
||||
if (hasPreview) return "PREVIEW"
|
||||
if (hasRoute) return "ROUTE_CALCULATED"
|
||||
if (hasRoutePoints) return "ROUTING"
|
||||
return "IDLE"
|
||||
})
|
||||
}
|
||||
import { create } from 'zustand'
|
||||
|
||||
export const useStore = create((set, get) => ({
|
||||
// ── Search state ──
|
||||
query: '',
|
||||
results: [],
|
||||
searchLoading: false,
|
||||
abortController: null,
|
||||
|
||||
setQuery: (query) => set({ query }),
|
||||
setResults: (results) => set({ results }),
|
||||
setSearchLoading: (loading) => set({ searchLoading: loading }),
|
||||
setAbortController: (ctrl) => set({ abortController: ctrl }),
|
||||
|
||||
// ── Stop list ──
|
||||
stops: [],
|
||||
// Each stop: { id, lat, lon, name, source, matchCode, isOrigin }
|
||||
|
||||
addStop: (stop) => {
|
||||
const { stops } = get()
|
||||
if (stops.length >= 10) return false
|
||||
set({ stops: [...stops, { ...stop, id: crypto.randomUUID() }] })
|
||||
return true
|
||||
},
|
||||
|
||||
removeStop: (id) => {
|
||||
set({ stops: get().stops.filter((s) => s.id !== id) })
|
||||
},
|
||||
|
||||
reorderStops: (newStops) => set({ stops: newStops }),
|
||||
|
||||
clearStops: () => set({ stops: [] }),
|
||||
|
||||
setStops: (stops) => set({ stops }),
|
||||
|
||||
// ── Geolocation ──
|
||||
userLocation: null, // { lat, lon }
|
||||
geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
|
||||
|
||||
setUserLocation: (loc) => set({ userLocation: loc }),
|
||||
setGeoPermission: (p) => set({ geoPermission: p }),
|
||||
|
||||
// ── Map viewport (for search bias) ──
|
||||
mapCenter: null, // { lat, lon, zoom }
|
||||
setMapCenter: (center) => set({ mapCenter: center }),
|
||||
|
||||
// ── Mode ──
|
||||
mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle'
|
||||
setMode: (mode) => set({ mode }),
|
||||
|
||||
// ── Route ──
|
||||
route: null, // Valhalla response (trip object)
|
||||
routeLoading: false,
|
||||
routeError: null,
|
||||
|
||||
setRoute: (route) => set({ route, routeError: null }),
|
||||
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
||||
setRouteError: (err) => set({ routeError: err, route: null }),
|
||||
clearRoute: () => set({ route: null, routeError: null }),
|
||||
|
||||
// ── Place detail ──
|
||||
selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
|
||||
clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection
|
||||
gpsOrigin: true, // whether GPS should be used as origin when available
|
||||
pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
|
||||
|
||||
setSelectedPlace: (place) => set({ selectedPlace: place }),
|
||||
|
||||
// Boundary rendering function - set by MapView, called by PlaceCard
|
||||
updateBoundary: null,
|
||||
setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
|
||||
clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
|
||||
setClickMarker: (marker) => set({ clickMarker: marker }),
|
||||
clearClickMarker: () => set({ clickMarker: null }),
|
||||
setGpsOrigin: (val) => set({ gpsOrigin: val }),
|
||||
setPendingDestination: (place) => set({ pendingDestination: place }),
|
||||
clearPendingDestination: () => set({ pendingDestination: null }),
|
||||
|
||||
startDirections: (place) => {
|
||||
const { geoPermission, stops, addStop, clearStops } = get()
|
||||
if (geoPermission === 'granted') {
|
||||
clearStops()
|
||||
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
||||
set({ gpsOrigin: true, selectedPlace: null })
|
||||
} else if (stops.length > 0) {
|
||||
const origin = stops[0]
|
||||
clearStops()
|
||||
addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
|
||||
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
||||
set({ selectedPlace: null })
|
||||
} else {
|
||||
// GPS denied, no stops: set pendingDestination only; origin-picker will add both
|
||||
set({ pendingDestination: place, selectedPlace: null })
|
||||
}
|
||||
},
|
||||
|
||||
// ── UI state ──
|
||||
sheetState: 'half', // 'collapsed' | 'half' | 'full'
|
||||
panelOpen: true,
|
||||
autocompleteOpen: false,
|
||||
theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
|
||||
themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
|
||||
viewMode: 'map', // 'map' | 'satellite' | 'hybrid'
|
||||
|
||||
setSheetState: (s) => set({ sheetState: s }),
|
||||
setViewMode: (mode) => {
|
||||
set({ viewMode: mode })
|
||||
localStorage.setItem('navi-view-mode', mode)
|
||||
},
|
||||
setPanelOpen: (open) => set({ panelOpen: open }),
|
||||
setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
|
||||
setTheme: (theme) => set({ theme }),
|
||||
setThemeOverride: (override) => {
|
||||
set({ themeOverride: override })
|
||||
if (override) {
|
||||
localStorage.setItem('navi-theme-override', override)
|
||||
} else {
|
||||
localStorage.removeItem('navi-theme-override')
|
||||
}
|
||||
},
|
||||
// ── Auth state ──
|
||||
auth: { authenticated: false, username: null, loaded: false },
|
||||
setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
|
||||
|
||||
// ── Contacts ──
|
||||
contacts: [],
|
||||
contactsLoaded: false,
|
||||
activeTab: 'routes', // 'routes' | 'contacts'
|
||||
editingContact: null, // null=closed, {}=new, {id:N}=edit
|
||||
pickingLocationFor: null, // form data while user picks location on map
|
||||
|
||||
setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
|
||||
setActiveTab: (tab) => set({ activeTab: tab }),
|
||||
setEditingContact: (c) => set({ editingContact: c }),
|
||||
clearEditingContact: () => set({ editingContact: null }),
|
||||
setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
|
||||
clearPickingLocationFor: () => set({ pickingLocationFor: null }),
|
||||
}))
|
||||
|
||||
// ── Panel state selector ──
|
||||
// Returns string state, prioritizing preview to allow it alongside any route state
|
||||
export const usePanelState = () => {
|
||||
return useStore((s) => {
|
||||
const hasPreview = !!s.selectedPlace
|
||||
const hasRoute = !!s.route
|
||||
const hasStops = s.stops.length >= 1
|
||||
|
||||
if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
|
||||
if (hasPreview && hasStops) return "PREVIEW_ROUTING"
|
||||
if (hasPreview) return "PREVIEW"
|
||||
if (hasRoute) return "ROUTE_CALCULATED"
|
||||
if (hasStops) return "ROUTING"
|
||||
return "IDLE"
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue