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",
|
"name": "navi",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@acalcutt/maplibre-contour-pmtiles": "^0.1.2",
|
|
||||||
"@dnd-kit/core": "^6.3.1",
|
"@dnd-kit/core": "^6.3.1",
|
||||||
"@dnd-kit/sortable": "^10.0.0",
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
"@dnd-kit/utilities": "^3.2.2",
|
"@dnd-kit/utilities": "^3.2.2",
|
||||||
|
|
@ -38,12 +37,6 @@
|
||||||
"vite": "^8.0.9"
|
"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": {
|
"node_modules/@alloc/quick-lru": {
|
||||||
"version": "5.2.0",
|
"version": "5.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@
|
||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@acalcutt/maplibre-contour-pmtiles": "^0.1.2",
|
|
||||||
"@dnd-kit/core": "^6.3.1",
|
"@dnd-kit/core": "^6.3.1",
|
||||||
"@dnd-kit/sortable": "^10.0.0",
|
"@dnd-kit/sortable": "^10.0.0",
|
||||||
"@dnd-kit/utilities": "^3.2.2",
|
"@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 { useEffect, useRef, useCallback } from 'react'
|
||||||
import { useStore } from './store'
|
import { useStore } from './store'
|
||||||
import { useTheme } from './hooks/useTheme'
|
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 MapView from './components/MapView'
|
||||||
import Panel from './components/Panel'
|
import Panel from './components/Panel'
|
||||||
|
|
||||||
|
|
@ -11,10 +12,20 @@ import LocateButton from './components/LocateButton'
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const mapViewRef = useRef(null)
|
const mapViewRef = useRef(null)
|
||||||
|
const routeDebounceRef = useRef(null)
|
||||||
|
|
||||||
// Initialize theme system
|
// Initialize theme system
|
||||||
useTheme()
|
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)
|
const setAuth = useStore((s) => s.setAuth)
|
||||||
|
|
||||||
// Initialize auth state on app load (single fetch, no polling)
|
// Initialize auth state on app load (single fetch, no polling)
|
||||||
|
|
@ -22,18 +33,70 @@ export default function App() {
|
||||||
fetchAuthState().then(setAuth)
|
fetchAuthState().then(setAuth)
|
||||||
}, [setAuth])
|
}, [setAuth])
|
||||||
|
|
||||||
// Handle clear route from panel
|
// Fetch route when stops, mode, gpsOrigin, or geoPermission change (debounced 500ms)
|
||||||
const handleClearRoute = useCallback(() => {
|
useEffect(() => {
|
||||||
mapViewRef.current?.clearRoute?.()
|
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 (
|
return (
|
||||||
<div className="relative w-screen h-screen overflow-hidden" style={{ background: 'var(--bg-base)' }}>
|
<div className="relative w-screen h-screen overflow-hidden" style={{ background: 'var(--bg-base)' }}>
|
||||||
<MapView ref={mapViewRef} />
|
<MapView ref={mapViewRef} />
|
||||||
<Panel onClearRoute={handleClearRoute} />
|
<Panel onManeuverClick={handleManeuverClick} />
|
||||||
|
|
||||||
<ContactModal />
|
<ContactModal />
|
||||||
|
|
||||||
{/* Bottom-right map controls */}
|
{/* Bottom-right map controls */}
|
||||||
<div className="map-controls-br">
|
<div className="map-controls-br">
|
||||||
<LocateButton mapRef={mapViewRef} />
|
<LocateButton mapRef={mapViewRef} />
|
||||||
|
|
|
||||||
67
src/api.js
67
src/api.js
|
|
@ -321,70 +321,3 @@ export async function fetchAuthState() {
|
||||||
return { authenticated: false, username: null }
|
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 {
|
import {
|
||||||
MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
|
MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
|
||||||
MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
|
MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
|
||||||
GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle,
|
GitMerge, CornerRightDown, CornerRightUp, Navigation
|
||||||
Compass, ArrowUp, ArrowUpRight, ArrowRight, ArrowDownRight, ArrowDown,
|
} from 'lucide-react'
|
||||||
ArrowDownLeft, ArrowLeft, ArrowUpLeft, MapPin
|
import { useStore } from '../store'
|
||||||
} 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`
|
||||||
* Format distance with commas for feet, one decimal for miles.
|
const h = Math.floor(seconds / 3600)
|
||||||
* Under 1 mile: "2,640 ft"
|
const m = Math.round((seconds % 3600) / 60)
|
||||||
* 1+ miles: "1.3 mi"
|
return m > 0 ? `${h}h ${m}m` : `${h}h`
|
||||||
*/
|
}
|
||||||
function formatDistance(distanceM, distanceKm) {
|
|
||||||
let meters = null
|
function formatDist(miles) {
|
||||||
if (distanceM !== undefined && distanceM !== null) {
|
if (miles < 0.1) return `${Math.round(miles * 5280)} ft`
|
||||||
meters = distanceM
|
return `${miles.toFixed(1)} mi`
|
||||||
} else if (distanceKm !== undefined && distanceKm !== null) {
|
}
|
||||||
meters = distanceKm * 1000
|
|
||||||
}
|
function ManeuverIcon({ type }) {
|
||||||
|
const size = 16
|
||||||
if (meters === null) return ''
|
const props = { size, strokeWidth: 1.5 }
|
||||||
|
switch (type) {
|
||||||
const miles = meters / 1609.34
|
case 0: return <MoveRight {...props} />
|
||||||
if (miles < 1) {
|
case 1: return <MoveUpRight {...props} />
|
||||||
const feet = Math.round(meters * 3.28084)
|
case 2: return <CornerUpRight {...props} />
|
||||||
return feet.toLocaleString() + ' ft'
|
case 3: return <MoveDownRight {...props} />
|
||||||
}
|
case 4: case 5: return <CornerUpLeft {...props} />
|
||||||
return miles.toFixed(1) + ' mi'
|
case 6: return <MoveDownLeft {...props} />
|
||||||
}
|
case 7: return <CornerUpLeft {...props} />
|
||||||
|
case 8: return <MoveUpLeft {...props} />
|
||||||
function formatTimeMin(minutes) {
|
case 9: return <Navigation {...props} />
|
||||||
if (minutes < 60) return Math.round(minutes) + ' min'
|
case 10: case 11: case 12: return <CircleDot {...props} />
|
||||||
const h = Math.floor(minutes / 60)
|
case 15: case 16: return <RotateCw {...props} />
|
||||||
const m = Math.round(minutes % 60)
|
case 24: return <GitMerge {...props} />
|
||||||
return m > 0 ? h + 'h ' + m + 'm' : h + 'h'
|
case 25: return <CornerRightUp {...props} />
|
||||||
}
|
case 26: return <CornerRightDown {...props} />
|
||||||
|
default: return <MoveRight {...props} />
|
||||||
// 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) {
|
export default function ManeuverList({ onManeuverClick }) {
|
||||||
return (
|
const route = useStore((s) => s.route)
|
||||||
<ArrowUp
|
const routeLoading = useStore((s) => s.routeLoading)
|
||||||
size={size}
|
const routeError = useStore((s) => s.routeError)
|
||||||
strokeWidth={2}
|
|
||||||
style={{ transform: `rotate(${bearing}deg)` }}
|
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"
|
||||||
const props = { size, strokeWidth: 2 }
|
style={{ borderColor: 'var(--accent)', borderTopColor: 'transparent' }}
|
||||||
const arrowMap = {
|
/>
|
||||||
'N': ArrowUp,
|
<span className="ml-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||||
'NNE': ArrowUpRight,
|
Calculating route...
|
||||||
'NE': ArrowUpRight,
|
</span>
|
||||||
'ENE': ArrowRight,
|
</div>
|
||||||
'E': ArrowRight,
|
)
|
||||||
'ESE': ArrowRight,
|
}
|
||||||
'SE': ArrowDownRight,
|
|
||||||
'SSE': ArrowDownRight,
|
if (routeError) {
|
||||||
'S': ArrowDown,
|
return (
|
||||||
'SSW': ArrowDownLeft,
|
<div
|
||||||
'SW': ArrowDownLeft,
|
className="px-3 py-2 rounded text-sm"
|
||||||
'WSW': ArrowLeft,
|
style={{
|
||||||
'W': ArrowLeft,
|
background: 'color-mix(in srgb, var(--status-danger) 15%, transparent)',
|
||||||
'WNW': ArrowLeft,
|
border: '1px solid var(--status-danger)',
|
||||||
'NW': ArrowUpLeft,
|
color: 'var(--status-danger)',
|
||||||
'NNW': ArrowUpLeft,
|
}}
|
||||||
}
|
>
|
||||||
const Icon = arrowMap[cardinal] || Compass
|
{routeError}
|
||||||
return <Icon {...props} />
|
</div>
|
||||||
}
|
)
|
||||||
|
}
|
||||||
// Wilderness maneuver icon
|
|
||||||
function WildernessIcon({ type, cardinal, bearing, size = 16 }) {
|
if (!route || !route.legs) return null
|
||||||
if (type === 'arrival') {
|
|
||||||
return <MapPin size={size} strokeWidth={1.5} />
|
const totalTime = route.summary?.time || 0
|
||||||
}
|
const totalDist = route.summary?.length || 0
|
||||||
return <CompassIcon cardinal={cardinal} bearing={bearing} size={size} />
|
|
||||||
}
|
const allManeuvers = []
|
||||||
|
let timeRemaining = totalTime
|
||||||
// Network maneuver icon (Valhalla types)
|
|
||||||
function ManeuverIcon({ type }) {
|
for (let legIdx = 0; legIdx < route.legs.length; legIdx++) {
|
||||||
const size = 16
|
const leg = route.legs[legIdx]
|
||||||
const props = { size, strokeWidth: 1.5 }
|
for (const man of leg.maneuvers || []) {
|
||||||
switch (type) {
|
allManeuvers.push({ ...man, _legIndex: legIdx, timeRemaining })
|
||||||
case 0: return <MoveRight {...props} />
|
timeRemaining -= man.time || 0
|
||||||
case 1: return <MoveUpRight {...props} />
|
}
|
||||||
case 2: return <CornerUpRight {...props} />
|
}
|
||||||
case 3: return <MoveDownRight {...props} />
|
|
||||||
case 4: case 5: return <CornerUpLeft {...props} />
|
return (
|
||||||
case 6: return <MoveDownLeft {...props} />
|
<div className="flex flex-col">
|
||||||
case 7: return <CornerUpLeft {...props} />
|
{/* Route summary */}
|
||||||
case 8: return <MoveUpLeft {...props} />
|
<div
|
||||||
case 9: return <Navigation {...props} />
|
className="flex items-center justify-between px-3 py-2 rounded mb-2"
|
||||||
case 10: case 11: case 12: return <CircleDot {...props} />
|
style={{ background: 'var(--bg-overlay)', border: '1px solid var(--border-subtle)' }}
|
||||||
case 15: case 16: return <RotateCw {...props} />
|
>
|
||||||
case 24: return <GitMerge {...props} />
|
<span className="font-mono text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
|
||||||
case 25: return <CornerRightUp {...props} />
|
{formatDist(totalDist)}
|
||||||
case 26: return <CornerRightDown {...props} />
|
</span>
|
||||||
default: return <MoveRight {...props} />
|
<span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||||
}
|
{formatTime(totalTime)}
|
||||||
}
|
</span>
|
||||||
|
</div>
|
||||||
/**
|
|
||||||
* Add transport mode prefix to network maneuver instruction.
|
{/* Maneuver steps */}
|
||||||
* "Drive east on..." for auto, "Walk south on..." for foot, "Ride north on..." for mtb
|
<div className="flex flex-col max-h-[50vh] overflow-y-auto">
|
||||||
*/
|
{allManeuvers.map((man, i) => (
|
||||||
function formatNetworkInstruction(instruction, mode) {
|
<button
|
||||||
if (!instruction) return ''
|
key={i}
|
||||||
|
onClick={() => {
|
||||||
// Get verb based on mode
|
if (man.begin_shape_index != null && onManeuverClick) onManeuverClick(man)
|
||||||
const modeVerbs = {
|
}}
|
||||||
'auto': 'Drive',
|
className="flex items-start gap-2 px-2 py-2 text-left rounded transition-colors duration-75"
|
||||||
'foot': 'Walk',
|
style={{ '--hover-bg': 'var(--bg-overlay)' }}
|
||||||
'pedestrian': 'Walk',
|
onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-overlay)'}
|
||||||
'mtb': 'Ride',
|
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
|
||||||
'bicycle': 'Ride',
|
>
|
||||||
'atv': 'Drive',
|
<span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
|
||||||
'vehicle': 'Drive',
|
<ManeuverIcon type={man.type} />
|
||||||
}
|
</span>
|
||||||
const verb = modeVerbs[mode] || 'Go'
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
|
||||||
// Check if instruction starts with a direction verb we should replace
|
{man.instruction || man.verbal_pre_transition_instruction || 'Continue'}
|
||||||
const startsWithVerbs = [
|
</p>
|
||||||
'Turn left', 'Turn right', 'Bear left', 'Bear right',
|
<p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
'Keep left', 'Keep right', 'Continue', 'Head', 'Go',
|
{formatDist(man.length || 0)}
|
||||||
'Proceed', 'Make a', 'Take a', 'Start', 'Merge', 'Exit'
|
{man.timeRemaining > 0 && (
|
||||||
]
|
<span className="ml-2">{formatTime(man.timeRemaining)} left</span>
|
||||||
|
)}
|
||||||
for (const v of startsWithVerbs) {
|
</p>
|
||||||
if (instruction.startsWith(v)) {
|
</div>
|
||||||
// Already has a verb, return as-is (Valhalla instructions are already good)
|
</button>
|
||||||
return instruction
|
))}
|
||||||
}
|
</div>
|
||||||
}
|
</div>
|
||||||
|
)
|
||||||
// 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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load diff
|
|
@ -1,60 +1,53 @@
|
||||||
import { useRef, useCallback, useEffect, useState } from 'react'
|
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 ThemePicker from './ThemePicker'
|
||||||
import { useStore, usePanelState } from '../store'
|
import { useStore, usePanelState } from '../store'
|
||||||
import { hasFeature } from '../config'
|
import { hasFeature } from '../config'
|
||||||
import SearchBar from './SearchBar'
|
import SearchBar from './SearchBar'
|
||||||
|
import StopList from './StopList'
|
||||||
|
import ModeSelector from './ModeSelector'
|
||||||
import ManeuverList from './ManeuverList'
|
import ManeuverList from './ManeuverList'
|
||||||
import ContactList from './ContactList'
|
import ContactList from './ContactList'
|
||||||
import { PlaceCard } from './PlaceCard'
|
import { PlaceCard } from './PlaceCard'
|
||||||
import DirectionsPanel from './DirectionsPanel'
|
import { requestOptimizedRoute } from '../api'
|
||||||
import PlaceDetail from './PlaceDetail'
|
|
||||||
|
|
||||||
const TRAVEL_MODES = [
|
export default function Panel({ onManeuverClick }) {
|
||||||
{ 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 }) {
|
|
||||||
const selectedPlace = useStore((s) => s.selectedPlace)
|
const selectedPlace = useStore((s) => s.selectedPlace)
|
||||||
|
const pendingDestination = useStore((s) => s.pendingDestination)
|
||||||
const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
|
const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
|
||||||
const routeStart = useStore((s) => s.routeStart)
|
const clearPendingDestination = useStore((s) => s.clearPendingDestination)
|
||||||
const routeEnd = useStore((s) => s.routeEnd)
|
const stops = useStore((s) => s.stops)
|
||||||
const routeMode = useStore((s) => s.routeMode)
|
const mode = useStore((s) => s.mode)
|
||||||
const boundaryMode = useStore((s) => s.boundaryMode)
|
const route = useStore((s) => s.route)
|
||||||
const routeResult = useStore((s) => s.routeResult)
|
|
||||||
const routeLoading = useStore((s) => s.routeLoading)
|
const routeLoading = useStore((s) => s.routeLoading)
|
||||||
const setRouteMode = useStore((s) => s.setRouteMode)
|
const routeError = useStore((s) => s.routeError)
|
||||||
const setBoundaryMode = useStore((s) => s.setBoundaryMode)
|
const setStops = useStore((s) => s.setStops)
|
||||||
const pickingRouteField = useStore((s) => s.pickingRouteField)
|
const setRoute = useStore((s) => s.setRoute)
|
||||||
const setPickingRouteField = useStore((s) => s.setPickingRouteField)
|
const setRouteError = useStore((s) => s.setRouteError)
|
||||||
const clearRoute = useStore((s) => s.clearRoute)
|
const setRouteLoading = useStore((s) => s.setRouteLoading)
|
||||||
const sheetState = useStore((s) => s.sheetState)
|
const sheetState = useStore((s) => s.sheetState)
|
||||||
const setSheetState = useStore((s) => s.setSheetState)
|
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 activeTab = useStore((s) => s.activeTab)
|
||||||
const auth = useStore((s) => s.auth)
|
const auth = useStore((s) => s.auth)
|
||||||
const setActiveTab = useStore((s) => s.setActiveTab)
|
const setActiveTab = useStore((s) => s.setActiveTab)
|
||||||
const directionsMode = useStore((s) => s.directionsMode)
|
|
||||||
const setDirectionsMode = useStore((s) => s.setDirectionsMode)
|
|
||||||
|
|
||||||
const panelState = usePanelState()
|
const panelState = usePanelState()
|
||||||
|
|
||||||
const [isMobile, setIsMobile] = useState(false)
|
const [isMobile, setIsMobile] = useState(false)
|
||||||
|
const [optimizing, setOptimizing] = useState(false)
|
||||||
const sheetRef = useRef(null)
|
const sheetRef = useRef(null)
|
||||||
const dragStartY = useRef(0)
|
const dragStartY = useRef(0)
|
||||||
const dragStartState = useRef('half')
|
const dragStartState = useRef('half')
|
||||||
|
|
||||||
|
// Show contacts tab only if feature enabled AND user is authenticated
|
||||||
const showContacts = hasFeature('has_contacts') && auth.authenticated
|
const showContacts = hasFeature('has_contacts') && auth.authenticated
|
||||||
|
|
||||||
|
// Responsive detection
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const check = () => setIsMobile(window.innerWidth < 768)
|
const check = () => setIsMobile(window.innerWidth < 768)
|
||||||
check()
|
check()
|
||||||
|
|
@ -62,9 +55,61 @@ export default function Panel({ onClearRoute }) {
|
||||||
return () => window.removeEventListener('resize', check)
|
return () => window.removeEventListener('resize', check)
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
|
// Auth handlers
|
||||||
const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
|
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/' }
|
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) => {
|
const handleTouchStart = useCallback((e) => {
|
||||||
dragStartY.current = e.touches[0].clientY
|
dragStartY.current = e.touches[0].clientY
|
||||||
dragStartState.current = sheetState
|
dragStartState.current = sheetState
|
||||||
|
|
@ -82,30 +127,21 @@ export default function Panel({ onClearRoute }) {
|
||||||
}
|
}
|
||||||
}, [setSheetState])
|
}, [setSheetState])
|
||||||
|
|
||||||
const handleClearRoute = () => {
|
const showOptimize = effectiveCount >= 3
|
||||||
clearRoute()
|
|
||||||
onClearRoute?.()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
// Determine what to show based on panel state
|
||||||
const showPreviewCard = panelState.startsWith('PREVIEW')
|
const showPreviewCard = panelState.startsWith('PREVIEW')
|
||||||
const hasRoutePoints = routeStart || routeEnd
|
const showRouteSection = ['ROUTING', 'ROUTE_CALCULATED', 'PREVIEW_ROUTING', 'PREVIEW_CALCULATED'].includes(panelState) || !!pendingDestination
|
||||||
const showRouteSection = hasRoutePoints || routeResult || routeLoading
|
const showManeuvers = panelState === 'ROUTE_CALCULATED' || panelState === 'PREVIEW_CALCULATED'
|
||||||
const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
|
const showEmptyState = panelState === 'IDLE' && !pendingDestination
|
||||||
|
|
||||||
// Show side panel place card when building route (either mode) and place is selected
|
// Routes tab content - now state-driven
|
||||||
const showSidePlaceCard = (directionsMode || showRouteSection) && selectedPlace
|
const routesContent = (
|
||||||
|
|
||||||
const routesContent = directionsMode ? (
|
|
||||||
// Directions mode: just the directions panel, place card is shown in side panel
|
|
||||||
<DirectionsPanel onClose={() => {
|
|
||||||
setDirectionsMode(false)
|
|
||||||
onClearRoute?.()
|
|
||||||
}} />
|
|
||||||
) : (
|
|
||||||
<>
|
<>
|
||||||
<SearchBar />
|
<SearchBar />
|
||||||
|
|
||||||
{showPreviewCard && selectedPlace && !showRouteSection && (
|
{/* Preview card when place is selected */}
|
||||||
|
{showPreviewCard && selectedPlace && (
|
||||||
<div className="mt-3">
|
<div className="mt-3">
|
||||||
<PlaceCard
|
<PlaceCard
|
||||||
place={selectedPlace}
|
place={selectedPlace}
|
||||||
|
|
@ -116,100 +152,44 @@ export default function Panel({ onClearRoute }) {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Route section with stops */}
|
||||||
{showRouteSection && (
|
{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="mt-3">
|
||||||
<div className="flex items-center justify-between mb-2">
|
<ManeuverList onManeuverClick={onManeuverClick} />
|
||||||
<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 />
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* Empty state */}
|
||||||
{showEmptyState && (
|
{showEmptyState && (
|
||||||
<div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}>
|
<div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
<p>Search or tap the map to explore</p>
|
<p>Search or tap the map to explore</p>
|
||||||
|
|
@ -223,13 +203,13 @@ export default function Panel({ onClearRoute }) {
|
||||||
{showContacts && (
|
{showContacts && (
|
||||||
<div className="navi-tab-bar mb-3">
|
<div className="navi-tab-bar mb-3">
|
||||||
<button
|
<button
|
||||||
className={"navi-tab " + (activeTab === 'routes' ? 'navi-tab-active' : '')}
|
className={`navi-tab ${activeTab === 'routes' ? 'navi-tab-active' : ''}`}
|
||||||
onClick={() => setActiveTab('routes')}
|
onClick={() => setActiveTab('routes')}
|
||||||
>
|
>
|
||||||
Routes
|
Routes
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className={"navi-tab " + (activeTab === 'contacts' ? 'navi-tab-active' : '')}
|
className={`navi-tab ${activeTab === 'contacts' ? 'navi-tab-active' : ''}`}
|
||||||
onClick={() => setActiveTab('contacts')}
|
onClick={() => setActiveTab('contacts')}
|
||||||
>
|
>
|
||||||
Contacts
|
Contacts
|
||||||
|
|
@ -251,7 +231,7 @@ export default function Panel({ onClearRoute }) {
|
||||||
onClick={handleLogout}
|
onClick={handleLogout}
|
||||||
className="flex items-center gap-1 px-2 py-1 rounded text-xs"
|
className="flex items-center gap-1 px-2 py-1 rounded text-xs"
|
||||||
style={{ color: 'var(--text-tertiary)' }}
|
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>
|
<span className="hidden sm:inline">{auth.username}</span>
|
||||||
<LogOut size={14} />
|
<LogOut size={14} />
|
||||||
|
|
@ -273,88 +253,24 @@ export default function Panel({ onClearRoute }) {
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
||||||
// Side panel for place card during directions mode (desktop only)
|
// Desktop: side panel (now 360px to accommodate PlaceCard)
|
||||||
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>
|
|
||||||
)
|
|
||||||
|
|
||||||
if (!isMobile) {
|
if (!isMobile) {
|
||||||
return (
|
return (
|
||||||
<>
|
<div
|
||||||
<div
|
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
|
||||||
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
|
style={{
|
||||||
style={{
|
width: '400px',
|
||||||
width: '400px',
|
background: 'var(--bg-raised)',
|
||||||
background: 'var(--bg-raised)',
|
borderRight: '1px solid var(--border)',
|
||||||
borderRight: '1px solid var(--border)',
|
}}
|
||||||
}}
|
>
|
||||||
>
|
{header}
|
||||||
{header}
|
{content}
|
||||||
{content}
|
</div>
|
||||||
</div>
|
|
||||||
{sidePlaceCardPanel}
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Mobile: bottom sheet
|
||||||
const sheetHeights = {
|
const sheetHeights = {
|
||||||
collapsed: 'h-12',
|
collapsed: 'h-12',
|
||||||
half: 'h-[45vh]',
|
half: 'h-[45vh]',
|
||||||
|
|
@ -364,12 +280,13 @@ export default function Panel({ onClearRoute }) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={sheetRef}
|
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={{
|
style={{
|
||||||
background: 'var(--bg-raised)',
|
background: 'var(--bg-raised)',
|
||||||
borderTop: '1px solid var(--border)',
|
borderTop: '1px solid var(--border)',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{/* Drag handle */}
|
||||||
<div
|
<div
|
||||||
className="flex justify-center py-2 cursor-grab"
|
className="flex justify-center py-2 cursor-grab"
|
||||||
onTouchStart={handleTouchStart}
|
onTouchStart={handleTouchStart}
|
||||||
|
|
@ -384,10 +301,9 @@ export default function Panel({ onClearRoute }) {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{sheetState !== 'collapsed' && (
|
{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}
|
{header}
|
||||||
{content}
|
{content}
|
||||||
{mobilePlaceCardOverlay}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -352,9 +352,6 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
|
||||||
if (placeLat == null || placeLon == null) return
|
if (placeLat == null || placeLon == null) return
|
||||||
// Skip for dropped pins - they get reverse geocoded by MapView
|
// Skip for dropped pins - they get reverse geocoded by MapView
|
||||||
if (place?.source === 'map_click') return
|
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()
|
const controller = new AbortController()
|
||||||
fetchReverse(placeLat, placeLon).then((result) => {
|
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,
|
osm_relation_id: data.osm_relation_id,
|
||||||
extratags: { ...(prev && prev !== "loading" ? prev.extratags : {}), ...data.extratags },
|
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) {
|
if (data?.boundary) {
|
||||||
const current = useStore.getState().selectedPlace
|
const current = useStore.getState().selectedPlace
|
||||||
if (current && current.lat === placeLat && current.lon === placeLon) {
|
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 savedContact = contacts.find((c) => c.lat === place.lat && c.lon === place.lon)
|
||||||
|
|
||||||
const handleDirections = () => {
|
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
|
// No toast - empty origin slot is the visual prompt
|
||||||
startDirections(place)
|
startDirections(place)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,30 +6,6 @@ import { buildAddress } from '../utils/place'
|
||||||
import { searchGeocode } from '../api'
|
import { searchGeocode } from '../api'
|
||||||
import { hasFeature } from '../config'
|
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 */
|
/** Get category icon based on result type/source */
|
||||||
function CategoryIcon({ result }) {
|
function CategoryIcon({ result }) {
|
||||||
const type = result.type || ''
|
const type = result.type || ''
|
||||||
|
|
@ -95,25 +71,6 @@ const SearchBar = forwardRef(function SearchBar(_, ref) {
|
||||||
return
|
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
|
// Prepend matching contacts
|
||||||
let contactResults = []
|
let contactResults = []
|
||||||
if (hasFeature('has_contacts') && contacts.length > 0) {
|
if (hasFeature('has_contacts') && contacts.length > 0) {
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@ const FALLBACK_CONFIG = {
|
||||||
profile: 'home',
|
profile: 'home',
|
||||||
region_name: 'North America',
|
region_name: 'North America',
|
||||||
tileset: {
|
tileset: {
|
||||||
url: '/tiles/planet/current.pmtiles',
|
url: '/tiles/na.pmtiles',
|
||||||
bounds: [-168, 14, -52, 72],
|
bounds: [-168, 14, -52, 72],
|
||||||
max_zoom: 15,
|
max_zoom: 15,
|
||||||
attribution: 'Protomaps © OSM',
|
attribution: 'Protomaps © OSM',
|
||||||
|
|
@ -30,6 +30,8 @@ const FALLBACK_CONFIG = {
|
||||||
has_landclass: false,
|
has_landclass: false,
|
||||||
has_public_lands_layer: false,
|
has_public_lands_layer: false,
|
||||||
has_contours: true,
|
has_contours: true,
|
||||||
|
has_contours_test: true,
|
||||||
|
has_contours_test_10ft: false,
|
||||||
has_address_book_write: false,
|
has_address_book_write: false,
|
||||||
has_usfs_trails: false,
|
has_usfs_trails: false,
|
||||||
has_blm_trails: false,
|
has_blm_trails: false,
|
||||||
|
|
|
||||||
469
src/store.js
469
src/store.js
|
|
@ -1,314 +1,155 @@
|
||||||
import { create } from "zustand"
|
import { create } from 'zustand'
|
||||||
import { requestOffroute } from "./api"
|
|
||||||
|
export const useStore = create((set, get) => ({
|
||||||
export const useStore = create((set, get) => ({
|
// ── Search state ──
|
||||||
// ── Search state ──
|
query: '',
|
||||||
query: "",
|
results: [],
|
||||||
results: [],
|
searchLoading: false,
|
||||||
searchLoading: false,
|
abortController: null,
|
||||||
abortController: null,
|
|
||||||
|
setQuery: (query) => set({ query }),
|
||||||
setQuery: (query) => set({ query }),
|
setResults: (results) => set({ results }),
|
||||||
setResults: (results) => set({ results }),
|
setSearchLoading: (loading) => set({ searchLoading: loading }),
|
||||||
setSearchLoading: (loading) => set({ searchLoading: loading }),
|
setAbortController: (ctrl) => set({ abortController: ctrl }),
|
||||||
setAbortController: (ctrl) => set({ abortController: ctrl }),
|
|
||||||
|
// ── Stop list ──
|
||||||
// ── Geolocation ──
|
stops: [],
|
||||||
userLocation: null, // { lat, lon }
|
// Each stop: { id, lat, lon, name, source, matchCode, isOrigin }
|
||||||
geoPermission: "prompt", // "prompt" | "granted" | "denied"
|
|
||||||
|
addStop: (stop) => {
|
||||||
setUserLocation: (loc) => set({ userLocation: loc }),
|
const { stops } = get()
|
||||||
setGeoPermission: (p) => set({ geoPermission: p }),
|
if (stops.length >= 10) return false
|
||||||
|
set({ stops: [...stops, { ...stop, id: crypto.randomUUID() }] })
|
||||||
// ── Map viewport (for search bias) ──
|
return true
|
||||||
mapCenter: null, // { lat, lon, zoom }
|
},
|
||||||
setMapCenter: (center) => set({ mapCenter: center }),
|
|
||||||
|
removeStop: (id) => {
|
||||||
// ── Unified Route State ──
|
set({ stops: get().stops.filter((s) => s.id !== id) })
|
||||||
// routeStart = origin (source of truth)
|
},
|
||||||
// routeEnd = destination (source of truth)
|
|
||||||
// stops[] = ONLY intermediate waypoints (not origin/destination)
|
reorderStops: (newStops) => set({ stops: newStops }),
|
||||||
routeStart: null, // { lat, lon, name }
|
|
||||||
routeEnd: null, // { lat, lon, name }
|
clearStops: () => set({ stops: [] }),
|
||||||
stops: [], // Intermediate waypoints only: [{ id, lat, lon, name }, ...]
|
|
||||||
routeMode: "auto", // foot | mtb | atv | vehicle
|
setStops: (stops) => set({ stops }),
|
||||||
boundaryMode: "strict", // strict | pragmatic | emergency
|
|
||||||
routeResult: null, // Response from /api/offroute
|
// ── Geolocation ──
|
||||||
routeLoading: false,
|
userLocation: null, // { lat, lon }
|
||||||
routeError: null,
|
geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
|
||||||
|
|
||||||
// Map display callback - set by MapView
|
setUserLocation: (loc) => set({ userLocation: loc }),
|
||||||
_updateRouteDisplay: null,
|
setGeoPermission: (p) => set({ geoPermission: p }),
|
||||||
_clearRouteDisplay: null,
|
|
||||||
setRouteDisplayCallbacks: (update, clear) => set({ _updateRouteDisplay: update, _clearRouteDisplay: clear }),
|
// ── Map viewport (for search bias) ──
|
||||||
|
mapCenter: null, // { lat, lon, zoom }
|
||||||
setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
|
setMapCenter: (center) => set({ mapCenter: center }),
|
||||||
setRouteEnd: (place) => set({ routeEnd: place }),
|
|
||||||
setRouteResult: (result) => set({ routeResult: result, routeError: null }),
|
// ── Mode ──
|
||||||
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle'
|
||||||
setRouteError: (err) => set({ routeError: err, routeResult: null }),
|
setMode: (mode) => set({ mode }),
|
||||||
|
|
||||||
// Mode/boundary setters that trigger recalculation
|
// ── Route ──
|
||||||
setRouteMode: (mode) => {
|
route: null, // Valhalla response (trip object)
|
||||||
set({ routeMode: mode })
|
routeLoading: false,
|
||||||
get().computeRoute()
|
routeError: null,
|
||||||
},
|
|
||||||
setBoundaryMode: (mode) => {
|
setRoute: (route) => set({ route, routeError: null }),
|
||||||
set({ boundaryMode: mode })
|
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
||||||
get().computeRoute()
|
setRouteError: (err) => set({ routeError: err, route: null }),
|
||||||
},
|
clearRoute: () => set({ route: null, routeError: null }),
|
||||||
|
|
||||||
clearRoute: () => {
|
// ── Place detail ──
|
||||||
const { _clearRouteDisplay } = get()
|
selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
|
||||||
if (_clearRouteDisplay) _clearRouteDisplay()
|
clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection
|
||||||
set({
|
gpsOrigin: true, // whether GPS should be used as origin when available
|
||||||
routeStart: null,
|
pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
|
||||||
routeEnd: null,
|
|
||||||
stops: [],
|
setSelectedPlace: (place) => set({ selectedPlace: place }),
|
||||||
routeResult: null,
|
|
||||||
routeError: null,
|
// Boundary rendering function - set by MapView, called by PlaceCard
|
||||||
})
|
updateBoundary: null,
|
||||||
},
|
setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
|
||||||
|
clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
|
||||||
// ── INTERMEDIATE STOPS MANAGEMENT ──
|
setClickMarker: (marker) => set({ clickMarker: marker }),
|
||||||
// stops[] contains ONLY intermediate waypoints, not origin/destination
|
clearClickMarker: () => set({ clickMarker: null }),
|
||||||
|
setGpsOrigin: (val) => set({ gpsOrigin: val }),
|
||||||
// Add intermediate stop - can be called with or without place
|
setPendingDestination: (place) => set({ pendingDestination: place }),
|
||||||
// With place: creates pre-filled stop (from radial menu)
|
clearPendingDestination: () => set({ pendingDestination: null }),
|
||||||
// Without place: creates empty placeholder (from Add Stop button)
|
|
||||||
addIntermediateStop: (place) => {
|
startDirections: (place) => {
|
||||||
const { stops } = get()
|
const { geoPermission, stops, addStop, clearStops } = get()
|
||||||
if (stops.length >= 8) return false // Max 8 intermediate stops
|
if (geoPermission === 'granted') {
|
||||||
const newStop = {
|
clearStops()
|
||||||
id: crypto.randomUUID(),
|
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
||||||
lat: place?.lat ?? null,
|
set({ gpsOrigin: true, selectedPlace: null })
|
||||||
lon: place?.lon ?? null,
|
} else if (stops.length > 0) {
|
||||||
name: place?.name ?? "",
|
const origin = stops[0]
|
||||||
}
|
clearStops()
|
||||||
set({ stops: [...stops, newStop] })
|
addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
|
||||||
return true
|
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
||||||
},
|
set({ selectedPlace: null })
|
||||||
|
} else {
|
||||||
updateStop: (id, place) => {
|
// GPS denied, no stops: set pendingDestination only; origin-picker will add both
|
||||||
const { stops } = get()
|
set({ pendingDestination: place, selectedPlace: null })
|
||||||
const newStops = stops.map((s) =>
|
}
|
||||||
s.id === id ? { ...s, lat: place.lat, lon: place.lon, name: place.name } : s
|
},
|
||||||
)
|
|
||||||
set({ stops: newStops })
|
// ── UI state ──
|
||||||
// Trigger route recalculation if all waypoints have coordinates
|
sheetState: 'half', // 'collapsed' | 'half' | 'full'
|
||||||
get().computeRoute()
|
panelOpen: true,
|
||||||
},
|
autocompleteOpen: false,
|
||||||
|
theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
|
||||||
removeStop: (id) => {
|
themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
|
||||||
const { stops } = get()
|
viewMode: 'map', // 'map' | 'satellite' | 'hybrid'
|
||||||
const newStops = stops.filter((s) => s.id !== id)
|
|
||||||
set({ stops: newStops })
|
setSheetState: (s) => set({ sheetState: s }),
|
||||||
// Recalculate route without this stop
|
setViewMode: (mode) => {
|
||||||
get().computeRoute()
|
set({ viewMode: mode })
|
||||||
},
|
localStorage.setItem('navi-view-mode', mode)
|
||||||
|
},
|
||||||
setStops: (stops) => set({ stops }),
|
setPanelOpen: (open) => set({ panelOpen: open }),
|
||||||
|
setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
|
||||||
// ── UNIFIED ROUTING TRIGGER ──
|
setTheme: (theme) => set({ theme }),
|
||||||
// Handles both 2-point and multi-point routing
|
setThemeOverride: (override) => {
|
||||||
computeRoute: async () => {
|
set({ themeOverride: override })
|
||||||
const { routeStart, routeEnd, stops, routeMode, boundaryMode, _updateRouteDisplay } = get()
|
if (override) {
|
||||||
|
localStorage.setItem('navi-theme-override', override)
|
||||||
// Need both endpoints to route
|
} else {
|
||||||
if (!routeStart || !routeEnd) return
|
localStorage.removeItem('navi-theme-override')
|
||||||
|
}
|
||||||
// Filter out incomplete stops (no coordinates yet)
|
},
|
||||||
const validStops = stops.filter((s) => s.lat != null && s.lon != null)
|
// ── Auth state ──
|
||||||
|
auth: { authenticated: false, username: null, loaded: false },
|
||||||
// Build full waypoint list: [origin, ...intermediates, destination]
|
setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
|
||||||
const waypoints = [
|
|
||||||
routeStart,
|
// ── Contacts ──
|
||||||
...validStops,
|
contacts: [],
|
||||||
routeEnd,
|
contactsLoaded: false,
|
||||||
]
|
activeTab: 'routes', // 'routes' | 'contacts'
|
||||||
|
editingContact: null, // null=closed, {}=new, {id:N}=edit
|
||||||
console.log("[TRACE-ROUTE] computeRoute with waypoints:", waypoints.length, waypoints.map(w => w.name))
|
pickingLocationFor: null, // form data while user picks location on map
|
||||||
|
|
||||||
set({ routeLoading: true, routeError: null })
|
setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
|
||||||
|
setActiveTab: (tab) => set({ activeTab: tab }),
|
||||||
try {
|
setEditingContact: (c) => set({ editingContact: c }),
|
||||||
if (waypoints.length === 2) {
|
clearEditingContact: () => set({ editingContact: null }),
|
||||||
// Simple 2-point routing
|
setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
|
||||||
const data = await requestOffroute(routeStart, routeEnd, routeMode, boundaryMode)
|
clearPickingLocationFor: () => set({ pickingLocationFor: null }),
|
||||||
if (data.status === "ok" && data.route) {
|
}))
|
||||||
set({ routeResult: data, routeError: null })
|
|
||||||
if (_updateRouteDisplay) _updateRouteDisplay(data.route)
|
// ── Panel state selector ──
|
||||||
} else {
|
// Returns string state, prioritizing preview to allow it alongside any route state
|
||||||
set({ routeError: data.message || data.error || "No route found", routeResult: null })
|
export const usePanelState = () => {
|
||||||
}
|
return useStore((s) => {
|
||||||
} else {
|
const hasPreview = !!s.selectedPlace
|
||||||
// Multi-point routing: chain sequential 2-point routes and merge
|
const hasRoute = !!s.route
|
||||||
const segments = []
|
const hasStops = s.stops.length >= 1
|
||||||
let totalDistanceKm = 0
|
|
||||||
let totalEffortMinutes = 0
|
if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
|
||||||
let allFeatures = []
|
if (hasPreview && hasStops) return "PREVIEW_ROUTING"
|
||||||
|
if (hasPreview) return "PREVIEW"
|
||||||
for (let i = 0; i < waypoints.length - 1; i++) {
|
if (hasRoute) return "ROUTE_CALCULATED"
|
||||||
const from = waypoints[i]
|
if (hasStops) return "ROUTING"
|
||||||
const to = waypoints[i + 1]
|
return "IDLE"
|
||||||
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"
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue