mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-05-20 14:44:51 +02:00
feat: unified routing UI with wilderness + network segments
- Single routing system (removed duplicate Valhalla-only flow) - Unified radial menu: From here, To here, Clear, Save, Measure - Removed "Offroute" section from panel (single directions display) - Better error messages without technical "Offroute" prefix - ManeuverList shows wilderness + network breakdown - PlaceCard integration for previews Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
95dd4438fe
commit
d6aa125215
6 changed files with 878 additions and 938 deletions
75
src/App.jsx
75
src/App.jsx
|
|
@ -1,8 +1,7 @@
|
|||
import { useEffect, useRef, useCallback } from 'react'
|
||||
import { useStore } from './store'
|
||||
import { useTheme } from './hooks/useTheme'
|
||||
import { requestRoute, fetchAuthState } from './api'
|
||||
import { decodePolyline } from './utils/decode'
|
||||
import { fetchAuthState } from './api'
|
||||
import MapView from './components/MapView'
|
||||
import Panel from './components/Panel'
|
||||
|
||||
|
|
@ -12,20 +11,10 @@ import LocateButton from './components/LocateButton'
|
|||
|
||||
export default function App() {
|
||||
const mapViewRef = useRef(null)
|
||||
const routeDebounceRef = useRef(null)
|
||||
|
||||
// Initialize theme system
|
||||
useTheme()
|
||||
|
||||
const stops = useStore((s) => s.stops)
|
||||
const mode = useStore((s) => s.mode)
|
||||
const route = useStore((s) => s.route)
|
||||
const gpsOrigin = useStore((s) => s.gpsOrigin)
|
||||
const geoPermission = useStore((s) => s.geoPermission)
|
||||
const setRoute = useStore((s) => s.setRoute)
|
||||
const setRouteLoading = useStore((s) => s.setRouteLoading)
|
||||
const setRouteError = useStore((s) => s.setRouteError)
|
||||
const clearRoute = useStore((s) => s.clearRoute)
|
||||
const setAuth = useStore((s) => s.setAuth)
|
||||
|
||||
// Initialize auth state on app load (single fetch, no polling)
|
||||
|
|
@ -33,67 +22,15 @@ export default function App() {
|
|||
fetchAuthState().then(setAuth)
|
||||
}, [setAuth])
|
||||
|
||||
// Fetch route when stops, mode, gpsOrigin, or geoPermission change (debounced 500ms)
|
||||
useEffect(() => {
|
||||
if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current)
|
||||
|
||||
routeDebounceRef.current = setTimeout(async () => {
|
||||
const { userLocation } = useStore.getState()
|
||||
|
||||
let effective = stops.map((s) => ({ lat: s.lat, lon: s.lon }))
|
||||
if (gpsOrigin && geoPermission === 'granted' && userLocation) {
|
||||
effective = [{ lat: userLocation.lat, lon: userLocation.lon }, ...effective]
|
||||
}
|
||||
|
||||
if (effective.length < 2) {
|
||||
clearRoute()
|
||||
return
|
||||
}
|
||||
|
||||
setRouteLoading(true)
|
||||
|
||||
try {
|
||||
const data = await requestRoute(effective, mode)
|
||||
if (data.trip) {
|
||||
setRoute(data.trip)
|
||||
} else {
|
||||
setRouteError('No route returned')
|
||||
}
|
||||
} catch (e) {
|
||||
setRouteError(e.message || 'Route request failed')
|
||||
} finally {
|
||||
setRouteLoading(false)
|
||||
}
|
||||
}, 500)
|
||||
|
||||
return () => {
|
||||
if (routeDebounceRef.current) clearTimeout(routeDebounceRef.current)
|
||||
}
|
||||
}, [stops, mode, gpsOrigin, geoPermission, clearRoute, setRoute, setRouteLoading, setRouteError])
|
||||
|
||||
// Handle maneuver click
|
||||
const handleManeuverClick = useCallback(
|
||||
(maneuver) => {
|
||||
if (!route || !route.legs) return
|
||||
|
||||
const legIdx = maneuver._legIndex || 0
|
||||
const leg = route.legs[legIdx]
|
||||
if (!leg || !leg.shape) return
|
||||
|
||||
const coords = decodePolyline(leg.shape, 6)
|
||||
const idx = maneuver.begin_shape_index
|
||||
if (idx >= 0 && idx < coords.length) {
|
||||
const [lng, lat] = coords[idx]
|
||||
mapViewRef.current?.flyTo(lat, lng, 15)
|
||||
}
|
||||
},
|
||||
[route]
|
||||
)
|
||||
// Handle clear route from panel
|
||||
const handleClearRoute = useCallback(() => {
|
||||
mapViewRef.current?.clearRoute?.()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="relative w-screen h-screen overflow-hidden" style={{ background: 'var(--bg-base)' }}>
|
||||
<MapView ref={mapViewRef} />
|
||||
<Panel onManeuverClick={handleManeuverClick} />
|
||||
<Panel onClearRoute={handleClearRoute} />
|
||||
|
||||
<ContactModal />
|
||||
|
||||
|
|
|
|||
66
src/api.js
66
src/api.js
|
|
@ -321,3 +321,69 @@ export async function fetchAuthState() {
|
|||
return { authenticated: false, username: null }
|
||||
}
|
||||
}
|
||||
|
||||
// ── Offroute API ──
|
||||
|
||||
const OFFROUTE_URL = "/api/offroute"
|
||||
const MVUM_URL = "/api/mvum"
|
||||
|
||||
/**
|
||||
* Request an offroute route from the pathfinder API.
|
||||
* @param {object} start - { lat, lon }
|
||||
* @param {object} end - { lat, lon }
|
||||
* @param {string} mode - foot | mtb | atv | vehicle
|
||||
* @param {string} boundaryMode - strict | pragmatic | emergency
|
||||
* @returns {Promise<object>} Offroute response with GeoJSON route
|
||||
*/
|
||||
export async function requestOffroute(start, end, mode = "foot", boundaryMode = "strict") {
|
||||
const body = {
|
||||
start: [start.lat, start.lon],
|
||||
end: [end.lat, end.lon],
|
||||
mode,
|
||||
boundary_mode: boundaryMode,
|
||||
}
|
||||
|
||||
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,21 +1,21 @@
|
|||
import {
|
||||
MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
|
||||
MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
|
||||
GitMerge, CornerRightDown, CornerRightUp, Navigation
|
||||
GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle
|
||||
} from 'lucide-react'
|
||||
import { useStore } from '../store'
|
||||
|
||||
function formatTime(seconds) {
|
||||
if (seconds < 60) return `${Math.round(seconds)}s`
|
||||
if (seconds < 3600) return `${Math.round(seconds / 60)} min`
|
||||
const h = Math.floor(seconds / 3600)
|
||||
const m = Math.round((seconds % 3600) / 60)
|
||||
return m > 0 ? `${h}h ${m}m` : `${h}h`
|
||||
function formatDistKm(km) {
|
||||
const miles = km * 0.621371
|
||||
if (miles < 0.1) return Math.round(miles * 5280) + ' ft'
|
||||
return miles.toFixed(1) + ' mi'
|
||||
}
|
||||
|
||||
function formatDist(miles) {
|
||||
if (miles < 0.1) return `${Math.round(miles * 5280)} ft`
|
||||
return `${miles.toFixed(1)} mi`
|
||||
function formatTimeMin(minutes) {
|
||||
if (minutes < 60) return Math.round(minutes) + ' min'
|
||||
const h = Math.floor(minutes / 60)
|
||||
const m = Math.round(minutes % 60)
|
||||
return m > 0 ? h + 'h ' + m + 'm' : h + 'h'
|
||||
}
|
||||
|
||||
function ManeuverIcon({ type }) {
|
||||
|
|
@ -40,8 +40,8 @@ function ManeuverIcon({ type }) {
|
|||
}
|
||||
}
|
||||
|
||||
export default function ManeuverList({ onManeuverClick }) {
|
||||
const route = useStore((s) => s.route)
|
||||
export default function ManeuverList() {
|
||||
const routeResult = useStore((s) => s.routeResult)
|
||||
const routeLoading = useStore((s) => s.routeLoading)
|
||||
const routeError = useStore((s) => s.routeError)
|
||||
|
||||
|
|
@ -74,67 +74,91 @@ export default function ManeuverList({ onManeuverClick }) {
|
|||
)
|
||||
}
|
||||
|
||||
if (!route || !route.legs) return null
|
||||
if (!routeResult?.summary) return null
|
||||
|
||||
const totalTime = route.summary?.time || 0
|
||||
const totalDist = route.summary?.length || 0
|
||||
|
||||
const allManeuvers = []
|
||||
let timeRemaining = totalTime
|
||||
|
||||
for (let legIdx = 0; legIdx < route.legs.length; legIdx++) {
|
||||
const leg = route.legs[legIdx]
|
||||
for (const man of leg.maneuvers || []) {
|
||||
allManeuvers.push({ ...man, _legIndex: legIdx, timeRemaining })
|
||||
timeRemaining -= man.time || 0
|
||||
}
|
||||
}
|
||||
const summary = routeResult.summary
|
||||
const networkFeature = routeResult.route?.features?.find(f => f.properties?.segment_type === 'network')
|
||||
const maneuvers = networkFeature?.properties?.maneuvers || []
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
{/* Route summary */}
|
||||
{/* 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)' }}>
|
||||
{formatDist(totalDist)}
|
||||
{formatDistKm(summary.total_distance_km)}
|
||||
</span>
|
||||
<span className="font-mono text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
{formatTime(totalTime)}
|
||||
{formatTimeMin(summary.total_effort_minutes)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Maneuver steps */}
|
||||
<div className="flex flex-col max-h-[50vh] overflow-y-auto">
|
||||
{allManeuvers.map((man, i) => (
|
||||
<button
|
||||
{/* 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)' }}>
|
||||
{formatDistKm(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)' }}>
|
||||
{formatDistKm(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 */}
|
||||
{maneuvers.length > 0 && (
|
||||
<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>
|
||||
{maneuvers.map((man, i) => (
|
||||
<div
|
||||
key={i}
|
||||
onClick={() => {
|
||||
if (man.begin_shape_index != null && onManeuverClick) onManeuverClick(man)
|
||||
}}
|
||||
className="flex items-start gap-2 px-2 py-2 text-left rounded transition-colors duration-75"
|
||||
style={{ '--hover-bg': 'var(--bg-overlay)' }}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-overlay)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
|
||||
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)' }}>
|
||||
{man.instruction || man.verbal_pre_transition_instruction || 'Continue'}
|
||||
{man.instruction}
|
||||
</p>
|
||||
<p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
|
||||
{formatDist(man.length || 0)}
|
||||
{man.timeRemaining > 0 && (
|
||||
<span className="ml-2">{formatTime(man.timeRemaining)} left</span>
|
||||
)}
|
||||
{formatDistKm(man.distance_km)}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@ import { layers, namedTheme } from 'protomaps-themes-base'
|
|||
import { getTheme, getThemeSprite, getOverlayConfig } from '../themes/registry'
|
||||
import { useStore } from '../store'
|
||||
import { decodePolyline } from '../utils/decode'
|
||||
import { fetchReverse } from '../api'
|
||||
import { fetchReverse, requestOffroute } from '../api'
|
||||
import { getConfig, hasFeature } from '../config'
|
||||
import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Plus, Star, Ruler, X } from 'lucide-react'
|
||||
import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Star, Ruler, X, Trash2 } from 'lucide-react'
|
||||
import RadialMenu from './RadialMenu'
|
||||
import useContextMenu from '../hooks/useContextMenu'
|
||||
import toast from 'react-hot-toast'
|
||||
|
|
@ -27,6 +27,10 @@ const BOUNDARY_SOURCE = 'boundary-source'
|
|||
const BOUNDARY_LAYER = 'boundary-layer'
|
||||
const STATE_BOUNDARIES_LAYER = 'state-boundaries-z4-z7'
|
||||
const ROUTE_LAYER_PREFIX = 'route-layer-'
|
||||
const OFFROUTE_SOURCE = 'offroute-source'
|
||||
const OFFROUTE_WILDERNESS_LAYER = 'offroute-wilderness'
|
||||
const OFFROUTE_NETWORK_LAYER = 'offroute-network'
|
||||
const OFFROUTE_MARKERS_LAYER = 'offroute-markers'
|
||||
const HILLSHADE_SOURCE = 'hillshade-dem'
|
||||
const HILLSHADE_LAYER = 'hillshade-layer'
|
||||
const TRAFFIC_SOURCE = 'traffic-tiles'
|
||||
|
|
@ -1122,6 +1126,7 @@ function isProtectedLayer(id) {
|
|||
return id.startsWith('public-lands') ||
|
||||
id.startsWith('boundary') ||
|
||||
id.startsWith('route') ||
|
||||
id.startsWith('offroute') ||
|
||||
id.startsWith('measure') ||
|
||||
id.startsWith('contour') ||
|
||||
id.startsWith('usfs') ||
|
||||
|
|
@ -1327,6 +1332,83 @@ function removeStateBoundaries(map) {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
/** Clear offroute display layers */
|
||||
function clearRouteDisplay(map) {
|
||||
if (!map) return
|
||||
if (map.getLayer(OFFROUTE_WILDERNESS_LAYER)) map.removeLayer(OFFROUTE_WILDERNESS_LAYER)
|
||||
if (map.getLayer(OFFROUTE_NETWORK_LAYER)) map.removeLayer(OFFROUTE_NETWORK_LAYER)
|
||||
if (map.getLayer(OFFROUTE_MARKERS_LAYER)) map.removeLayer(OFFROUTE_MARKERS_LAYER)
|
||||
if (map.getSource(OFFROUTE_SOURCE)) map.removeSource(OFFROUTE_SOURCE)
|
||||
}
|
||||
|
||||
/** Update offroute display with route GeoJSON */
|
||||
function updateRouteDisplay(map, routeGeojson) {
|
||||
if (!map || !routeGeojson) return
|
||||
|
||||
// Clear existing layers
|
||||
clearRouteDisplay(map)
|
||||
|
||||
// Add source with route features
|
||||
map.addSource(OFFROUTE_SOURCE, {
|
||||
type: "geojson",
|
||||
data: routeGeojson,
|
||||
})
|
||||
|
||||
// Find first symbol layer for proper z-ordering
|
||||
let beforeId = undefined
|
||||
for (const layer of map.getStyle().layers) {
|
||||
if (layer.type === "symbol") {
|
||||
beforeId = layer.id
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
// Wilderness segment - dashed orange line
|
||||
map.addLayer({
|
||||
id: OFFROUTE_WILDERNESS_LAYER,
|
||||
type: "line",
|
||||
source: OFFROUTE_SOURCE,
|
||||
filter: ["==", ["get", "segment_type"], "wilderness"],
|
||||
layout: { "line-join": "round", "line-cap": "round" },
|
||||
paint: {
|
||||
"line-color": "#f97316", // orange-500
|
||||
"line-width": 4,
|
||||
"line-opacity": 0.9,
|
||||
"line-dasharray": [8, 4],
|
||||
},
|
||||
}, beforeId)
|
||||
|
||||
// Network segment - solid blue line
|
||||
map.addLayer({
|
||||
id: OFFROUTE_NETWORK_LAYER,
|
||||
type: "line",
|
||||
source: OFFROUTE_SOURCE,
|
||||
filter: ["==", ["get", "segment_type"], "network"],
|
||||
layout: { "line-join": "round", "line-cap": "round" },
|
||||
paint: {
|
||||
"line-color": "#3b82f6", // blue-500
|
||||
"line-width": 5,
|
||||
"line-opacity": 0.85,
|
||||
},
|
||||
}, beforeId)
|
||||
|
||||
// Fit bounds to route
|
||||
const features = routeGeojson.features || []
|
||||
const allCoords = features
|
||||
.filter(f => f.geometry?.coordinates)
|
||||
.flatMap(f => f.geometry.coordinates)
|
||||
|
||||
if (allCoords.length > 0) {
|
||||
const bounds = allCoords.reduce(
|
||||
(b, c) => b.extend(c),
|
||||
new maplibregl.LngLatBounds(allCoords[0], allCoords[0])
|
||||
)
|
||||
const leftPad = 420
|
||||
map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: leftPad, right: 60 } })
|
||||
}
|
||||
}
|
||||
|
||||
const MapView = forwardRef(function MapView(_, ref) {
|
||||
const mapRef = useRef(null)
|
||||
const mapInstance = useRef(null)
|
||||
|
|
@ -1348,14 +1430,11 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
const measuringRef = useRef({ active: false, points: [] })
|
||||
const measureLabelsRef = useRef([]) // HTML label elements
|
||||
|
||||
const stops = useStore((s) => s.stops)
|
||||
const route = useStore((s) => s.route)
|
||||
const theme = useStore((s) => s.theme)
|
||||
const selectedPlace = useStore((s) => s.selectedPlace)
|
||||
const clickMarker = useStore((s) => s.clickMarker)
|
||||
const setClickMarker = useStore((s) => s.setClickMarker)
|
||||
const clearClickMarker = useStore((s) => s.clearClickMarker)
|
||||
const gpsOrigin = useStore((s) => s.gpsOrigin)
|
||||
const geoPermission = useStore((s) => s.geoPermission)
|
||||
const setSheetState = useStore((s) => s.setSheetState)
|
||||
const setMapCenter = useStore((s) => s.setMapCenter)
|
||||
|
|
@ -1580,7 +1659,7 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
|
||||
const radialWedges = [
|
||||
{
|
||||
id: "directions-to",
|
||||
id: "to-here",
|
||||
label: "To here",
|
||||
icon: ArrowDownLeft,
|
||||
onSelect: () => {
|
||||
|
|
@ -1589,54 +1668,53 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
lat: radialMenu.lat,
|
||||
lon: radialMenu.lon,
|
||||
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
||||
source: "radial_menu",
|
||||
matchCode: null,
|
||||
}
|
||||
useStore.getState().startDirections(place)
|
||||
const { routeStart, setRouteEnd, setRouteLoading, setRouteResult, setRouteError, routeMode, boundaryMode } = useStore.getState()
|
||||
setRouteEnd(place)
|
||||
if (routeStart) {
|
||||
setRouteLoading(true)
|
||||
requestOffroute(routeStart, place, routeMode, boundaryMode)
|
||||
.then((data) => {
|
||||
if (data.status === "ok" && data.route) {
|
||||
setRouteResult(data)
|
||||
updateRouteDisplay(mapInstance.current, data.route)
|
||||
} else {
|
||||
setRouteError(data.error || "No route found")
|
||||
}
|
||||
})
|
||||
.catch((e) => setRouteError(e.message))
|
||||
.finally(() => setRouteLoading(false))
|
||||
} else {
|
||||
toast("Set starting point first")
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "directions-from",
|
||||
id: "from-here",
|
||||
label: "From here",
|
||||
icon: ArrowUpRight,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
const { clearStops, addStop } = useStore.getState()
|
||||
clearStops()
|
||||
const place = {
|
||||
lat: radialMenu.lat,
|
||||
lon: radialMenu.lon,
|
||||
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
||||
source: "radial_menu",
|
||||
matchCode: null,
|
||||
}
|
||||
addStop(place)
|
||||
useStore.setState({ gpsOrigin: false })
|
||||
const { clearRoute, setRouteStart } = useStore.getState()
|
||||
clearRoute()
|
||||
clearRouteDisplay(mapInstance.current)
|
||||
setRouteStart(place)
|
||||
toast("Now tap destination")
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "add-stop",
|
||||
label: "Add stop",
|
||||
icon: Plus,
|
||||
id: "clear-route",
|
||||
label: "Clear",
|
||||
icon: Trash2,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
const { stops, addStop, clearStops } = useStore.getState()
|
||||
const place = {
|
||||
lat: radialMenu.lat,
|
||||
lon: radialMenu.lon,
|
||||
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
||||
source: "radial_menu",
|
||||
matchCode: null,
|
||||
}
|
||||
if (stops.length === 0) {
|
||||
addStop(place)
|
||||
useStore.setState({ gpsOrigin: false })
|
||||
} else {
|
||||
const success = addStop(place)
|
||||
if (!success) {
|
||||
toast("Maximum 10 stops reached")
|
||||
}
|
||||
}
|
||||
useStore.getState().clearRoute()
|
||||
clearRouteDisplay(mapInstance.current)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -1805,6 +1883,14 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
updateSatellitePaint(map, currentThemeRef.current)
|
||||
},
|
||||
|
||||
// Clear offroute route from map
|
||||
clearRoute() {
|
||||
const map = mapInstance.current
|
||||
if (!map) return
|
||||
clearRouteDisplay(map)
|
||||
useStore.getState().clearRoute()
|
||||
},
|
||||
|
||||
}))
|
||||
|
||||
// Initialize map
|
||||
|
|
@ -2464,10 +2550,8 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
originalPaintValues = {}
|
||||
|
||||
// Restore view
|
||||
map.jumpTo({ center, zoom, bearing, pitch })
|
||||
// Re-render route if exists
|
||||
const currentRoute = useStore.getState().route
|
||||
if (currentRoute) updateRoute(map, currentRoute)
|
||||
const currentRoute = useStore.getState().routeResult
|
||||
if (currentRoute?.route) updateRouteDisplay(map, currentRoute.route)
|
||||
})
|
||||
}, [theme])
|
||||
|
||||
|
|
@ -2560,168 +2644,6 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
return () => document.removeEventListener('keydown', handleKeyDown)
|
||||
}, [selectedPlace])
|
||||
|
||||
// Update route polyline when route changes
|
||||
useEffect(() => {
|
||||
const map = mapInstance.current
|
||||
if (!map) return
|
||||
if (!map.isStyleLoaded()) {
|
||||
const handler = () => updateRoute(map, route)
|
||||
map.once('idle', handler)
|
||||
return () => map.off('idle', handler)
|
||||
}
|
||||
updateRoute(map, route)
|
||||
}, [route])
|
||||
|
||||
function updateRoute(map, routeData) {
|
||||
if (!map) return
|
||||
|
||||
// Remove old route layers
|
||||
const style = map.getStyle()
|
||||
if (style) {
|
||||
for (const layer of style.layers) {
|
||||
if (layer.id.startsWith(ROUTE_LAYER_PREFIX)) {
|
||||
map.removeLayer(layer.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!routeData || !routeData.legs) {
|
||||
if (map.getSource(ROUTE_SOURCE)) {
|
||||
map.getSource(ROUTE_SOURCE).setData({ type: 'FeatureCollection', features: [] })
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
const features = []
|
||||
for (let i = 0; i < routeData.legs.length; i++) {
|
||||
const leg = routeData.legs[i]
|
||||
if (!leg.shape) continue
|
||||
const coords = decodePolyline(leg.shape, 6)
|
||||
features.push({
|
||||
type: 'Feature',
|
||||
properties: { legIndex: i },
|
||||
geometry: { type: 'LineString', coordinates: coords },
|
||||
})
|
||||
}
|
||||
|
||||
const source = map.getSource(ROUTE_SOURCE)
|
||||
if (source) {
|
||||
source.setData({ type: 'FeatureCollection', features })
|
||||
} else {
|
||||
map.addSource(ROUTE_SOURCE, {
|
||||
type: 'geojson',
|
||||
data: { type: 'FeatureCollection', features },
|
||||
})
|
||||
}
|
||||
|
||||
// Use CSS variable for route color (read computed value)
|
||||
const routeColor = getComputedStyle(document.documentElement).getPropertyValue('--route-line').trim()
|
||||
|
||||
for (let i = 0; i < features.length; i++) {
|
||||
const layerId = `${ROUTE_LAYER_PREFIX}${i}`
|
||||
if (!map.getLayer(layerId)) {
|
||||
map.addLayer({
|
||||
id: layerId,
|
||||
type: 'line',
|
||||
source: ROUTE_SOURCE,
|
||||
filter: ['==', ['get', 'legIndex'], i],
|
||||
layout: { 'line-join': 'round', 'line-cap': 'round' },
|
||||
paint: {
|
||||
'line-color': routeColor || '#7a9a6b',
|
||||
'line-width': 5,
|
||||
'line-opacity': 0.85,
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Fit bounds to route
|
||||
if (features.length > 0) {
|
||||
const allCoords = features.flatMap((f) => f.geometry.coordinates)
|
||||
const bounds = allCoords.reduce(
|
||||
(b, c) => b.extend(c),
|
||||
new maplibregl.LngLatBounds(allCoords[0], allCoords[0])
|
||||
)
|
||||
// Single-panel: no floating detail
|
||||
const leftPad = 420 // 360px panel + margin
|
||||
map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: leftPad, right: 60 } })
|
||||
}
|
||||
}
|
||||
|
||||
// Update stop markers when stops change
|
||||
useEffect(() => {
|
||||
const map = mapInstance.current
|
||||
if (!map) return
|
||||
|
||||
// Remove old markers
|
||||
for (const m of markersRef.current) m.remove()
|
||||
markersRef.current = []
|
||||
if (popupRef.current) {
|
||||
popupRef.current.remove()
|
||||
popupRef.current = null
|
||||
}
|
||||
|
||||
const hasGpsOrigin = gpsOrigin && geoPermission === 'granted'
|
||||
const indexOffset = hasGpsOrigin ? 1 : 0
|
||||
|
||||
stops.forEach((stop, i) => {
|
||||
const displayIndex = i + indexOffset
|
||||
const effectiveTotal = stops.length + indexOffset
|
||||
|
||||
let pinClass = 'navi-pin navi-pin--intermediate'
|
||||
if (displayIndex === 0) pinClass = 'navi-pin navi-pin--origin'
|
||||
else if (displayIndex === effectiveTotal - 1 && effectiveTotal > 1) pinClass = 'navi-pin navi-pin--destination'
|
||||
|
||||
const label = String.fromCharCode(65 + Math.min(displayIndex, 25))
|
||||
|
||||
const el = document.createElement('div')
|
||||
el.className = pinClass
|
||||
el.textContent = label
|
||||
|
||||
el.addEventListener('click', (e) => {
|
||||
e.stopPropagation()
|
||||
// Flag so the map-level click handler doesn't fire
|
||||
pinClickedRef.current = true
|
||||
if (popupRef.current) popupRef.current.remove()
|
||||
const popup = new maplibregl.Popup({ offset: 20, closeButton: true })
|
||||
.setLngLat([stop.lon, stop.lat])
|
||||
.setHTML(
|
||||
`<div style="font-size:12px;max-width:200px">
|
||||
<strong>${stop.name}</strong>
|
||||
<br/><button id="remove-stop-${stop.id}" style="margin-top:4px;padding:2px 8px;background:var(--status-danger);border:none;border-radius:4px;color:white;cursor:pointer;font-size:11px">Remove</button>
|
||||
</div>`
|
||||
)
|
||||
.addTo(map)
|
||||
|
||||
popup.getElement().querySelector(`#remove-stop-${stop.id}`)?.addEventListener('click', () => {
|
||||
useStore.getState().removeStop(stop.id)
|
||||
popup.remove()
|
||||
})
|
||||
popupRef.current = popup
|
||||
})
|
||||
|
||||
const marker = new maplibregl.Marker({ element: el })
|
||||
.setLngLat([stop.lon, stop.lat])
|
||||
.addTo(map)
|
||||
|
||||
markersRef.current.push(marker)
|
||||
})
|
||||
|
||||
// If stops but no route yet, fit to stops
|
||||
if (stops.length > 0 && !route) {
|
||||
if (stops.length === 1) {
|
||||
map.flyTo({ center: [stops[0].lon, stops[0].lat], zoom: 13 })
|
||||
} else {
|
||||
const bounds = stops.reduce(
|
||||
(b, s) => b.extend([s.lon, s.lat]),
|
||||
new maplibregl.LngLatBounds([stops[0].lon, stops[0].lat], [stops[0].lon, stops[0].lat])
|
||||
)
|
||||
map.fitBounds(bounds, { padding: { top: 60, bottom: 60, left: 420, right: 60 } })
|
||||
}
|
||||
}
|
||||
}, [stops, route, gpsOrigin, geoPermission])
|
||||
|
||||
|
||||
// ESC key handler for measurement mode
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e) => {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,40 @@
|
|||
import { useRef, useCallback, useEffect, useState } from 'react'
|
||||
import { LogIn, LogOut } from 'lucide-react'
|
||||
import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin } from 'lucide-react'
|
||||
import ThemePicker from './ThemePicker'
|
||||
import { useStore, usePanelState } from '../store'
|
||||
import { hasFeature } from '../config'
|
||||
import SearchBar from './SearchBar'
|
||||
import StopList from './StopList'
|
||||
import ModeSelector from './ModeSelector'
|
||||
import ManeuverList from './ManeuverList'
|
||||
import ContactList from './ContactList'
|
||||
import { PlaceCard } from './PlaceCard'
|
||||
import { requestOptimizedRoute } from '../api'
|
||||
|
||||
export default function Panel({ onManeuverClick }) {
|
||||
const TRAVEL_MODES = [
|
||||
{ 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 pendingDestination = useStore((s) => s.pendingDestination)
|
||||
const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
|
||||
const clearPendingDestination = useStore((s) => s.clearPendingDestination)
|
||||
const stops = useStore((s) => s.stops)
|
||||
const mode = useStore((s) => s.mode)
|
||||
const route = useStore((s) => s.route)
|
||||
const 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 setStops = useStore((s) => s.setStops)
|
||||
const setRoute = useStore((s) => s.setRoute)
|
||||
const setRouteError = useStore((s) => s.setRouteError)
|
||||
const setRouteLoading = useStore((s) => s.setRouteLoading)
|
||||
const setRouteMode = useStore((s) => s.setRouteMode)
|
||||
const setBoundaryMode = useStore((s) => s.setBoundaryMode)
|
||||
const clearRoute = useStore((s) => s.clearRoute)
|
||||
const sheetState = useStore((s) => s.sheetState)
|
||||
const setSheetState = useStore((s) => s.setSheetState)
|
||||
const theme = useStore((s) => s.theme)
|
||||
const themeOverride = useStore((s) => s.themeOverride)
|
||||
const setThemeOverride = useStore((s) => s.setThemeOverride)
|
||||
const gpsOrigin = useStore((s) => s.gpsOrigin)
|
||||
const geoPermission = useStore((s) => s.geoPermission)
|
||||
const activeTab = useStore((s) => s.activeTab)
|
||||
const auth = useStore((s) => s.auth)
|
||||
const setActiveTab = useStore((s) => s.setActiveTab)
|
||||
|
|
@ -39,15 +42,12 @@ export default function Panel({ onManeuverClick }) {
|
|||
const panelState = usePanelState()
|
||||
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [optimizing, setOptimizing] = useState(false)
|
||||
const sheetRef = useRef(null)
|
||||
const dragStartY = useRef(0)
|
||||
const dragStartState = useRef('half')
|
||||
|
||||
// Show contacts tab only if feature enabled AND user is authenticated
|
||||
const showContacts = hasFeature('has_contacts') && auth.authenticated
|
||||
|
||||
// Responsive detection
|
||||
useEffect(() => {
|
||||
const check = () => setIsMobile(window.innerWidth < 768)
|
||||
check()
|
||||
|
|
@ -55,61 +55,9 @@ export default function Panel({ onManeuverClick }) {
|
|||
return () => window.removeEventListener('resize', check)
|
||||
}, [])
|
||||
|
||||
// Auth handlers
|
||||
const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
|
||||
const handleLogout = () => { window.location.href = 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
|
||||
|
||||
// Optimize stops
|
||||
const hasGpsOrigin = gpsOrigin && geoPermission === 'granted'
|
||||
const effectiveCount = stops.length + (hasGpsOrigin ? 1 : 0)
|
||||
|
||||
const handleOptimize = useCallback(async () => {
|
||||
if (effectiveCount < 3 || optimizing) return
|
||||
setOptimizing(true)
|
||||
try {
|
||||
const { userLocation } = useStore.getState()
|
||||
let locations = stops.map((s) => ({ lat: s.lat, lon: s.lon }))
|
||||
if (hasGpsOrigin && userLocation) {
|
||||
locations = [{ lat: userLocation.lat, lon: userLocation.lon }, ...locations]
|
||||
}
|
||||
const data = await requestOptimizedRoute(locations, mode)
|
||||
if (data.trip) {
|
||||
const wpOrder = hasGpsOrigin && userLocation
|
||||
? (data.trip.locations || []).slice(1)
|
||||
: data.trip.locations
|
||||
if (wpOrder && wpOrder.length === stops.length) {
|
||||
const reordered = wpOrder.map((wp) => {
|
||||
let closest = stops[0]
|
||||
let minDist = Infinity
|
||||
for (const s of stops) {
|
||||
const d = Math.abs(s.lat - wp.lat) + Math.abs(s.lon - wp.lon)
|
||||
if (d < minDist) {
|
||||
minDist = d
|
||||
closest = s
|
||||
}
|
||||
}
|
||||
return closest
|
||||
})
|
||||
const seen = new Set()
|
||||
const unique = reordered.filter((s) => {
|
||||
if (seen.has(s.id)) return false
|
||||
seen.add(s.id)
|
||||
return true
|
||||
})
|
||||
if (unique.length === stops.length) {
|
||||
setStops(unique)
|
||||
}
|
||||
}
|
||||
setRoute(data.trip)
|
||||
}
|
||||
} catch (e) {
|
||||
setRouteError(e.message)
|
||||
} finally {
|
||||
setOptimizing(false)
|
||||
}
|
||||
}, [stops, mode, optimizing, effectiveCount, hasGpsOrigin, setStops, setRoute, setRouteError])
|
||||
|
||||
// Mobile sheet drag handling
|
||||
const handleTouchStart = useCallback((e) => {
|
||||
dragStartY.current = e.touches[0].clientY
|
||||
dragStartState.current = sheetState
|
||||
|
|
@ -127,20 +75,20 @@ export default function Panel({ onManeuverClick }) {
|
|||
}
|
||||
}, [setSheetState])
|
||||
|
||||
const showOptimize = effectiveCount >= 3
|
||||
const handleClearRoute = () => {
|
||||
clearRoute()
|
||||
onClearRoute?.()
|
||||
}
|
||||
|
||||
// Determine what to show based on panel state
|
||||
const showPreviewCard = panelState.startsWith('PREVIEW')
|
||||
const showRouteSection = ['ROUTING', 'ROUTE_CALCULATED', 'PREVIEW_ROUTING', 'PREVIEW_CALCULATED'].includes(panelState) || !!pendingDestination
|
||||
const showManeuvers = panelState === 'ROUTE_CALCULATED' || panelState === 'PREVIEW_CALCULATED'
|
||||
const showEmptyState = panelState === 'IDLE' && !pendingDestination
|
||||
const hasRoutePoints = routeStart || routeEnd
|
||||
const showRouteSection = hasRoutePoints || routeResult || routeLoading
|
||||
const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
|
||||
|
||||
// Routes tab content - now state-driven
|
||||
const routesContent = (
|
||||
<>
|
||||
<SearchBar />
|
||||
|
||||
{/* Preview card when place is selected */}
|
||||
{showPreviewCard && selectedPlace && (
|
||||
<div className="mt-3">
|
||||
<PlaceCard
|
||||
|
|
@ -152,44 +100,82 @@ export default function Panel({ onManeuverClick }) {
|
|||
</div>
|
||||
)}
|
||||
|
||||
{/* Route section with stops */}
|
||||
{showRouteSection && (
|
||||
<>
|
||||
<div className="mt-3">
|
||||
<StopList />
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-col gap-2">
|
||||
<ModeSelector />
|
||||
{showOptimize && (
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||
Route
|
||||
</span>
|
||||
<button
|
||||
onClick={handleOptimize}
|
||||
disabled={optimizing || routeLoading}
|
||||
className="navi-btn-secondary w-full"
|
||||
onClick={handleClearRoute}
|
||||
className="p-1 rounded hover:bg-[var(--bg-overlay)]"
|
||||
title="Clear route"
|
||||
>
|
||||
{optimizing ? 'Optimizing...' : 'Optimize stop order'}
|
||||
<X size={14} style={{ color: 'var(--text-tertiary)' }} />
|
||||
</button>
|
||||
)}
|
||||
{pendingDestination && stops.length === 0 && (
|
||||
</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 style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||
{routeStart?.name || 'Right-click to set start'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={12} style={{ color: '#ef4444' }} />
|
||||
<span style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||
{routeEnd?.name || 'Right-click to set destination'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 mb-2">
|
||||
{TRAVEL_MODES.map((m) => {
|
||||
const active = routeMode === m.id
|
||||
return (
|
||||
<button
|
||||
onClick={clearPendingDestination}
|
||||
className="navi-btn-secondary w-full"
|
||||
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}
|
||||
>
|
||||
Cancel
|
||||
<m.Icon size={14} />
|
||||
<span className="hidden sm:inline">{m.label}</span>
|
||||
</button>
|
||||
)}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Maneuvers when route is calculated */}
|
||||
{showManeuvers && (route || routeLoading || routeError) && (
|
||||
<div className="mt-3">
|
||||
<ManeuverList onManeuverClick={onManeuverClick} />
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{showEmptyState && (
|
||||
<div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}>
|
||||
<p>Search or tap the map to explore</p>
|
||||
|
|
@ -203,13 +189,13 @@ export default function Panel({ onManeuverClick }) {
|
|||
{showContacts && (
|
||||
<div className="navi-tab-bar mb-3">
|
||||
<button
|
||||
className={`navi-tab ${activeTab === 'routes' ? 'navi-tab-active' : ''}`}
|
||||
className={"navi-tab " + (activeTab === 'routes' ? 'navi-tab-active' : '')}
|
||||
onClick={() => setActiveTab('routes')}
|
||||
>
|
||||
Routes
|
||||
</button>
|
||||
<button
|
||||
className={`navi-tab ${activeTab === 'contacts' ? 'navi-tab-active' : ''}`}
|
||||
className={"navi-tab " + (activeTab === 'contacts' ? 'navi-tab-active' : '')}
|
||||
onClick={() => setActiveTab('contacts')}
|
||||
>
|
||||
Contacts
|
||||
|
|
@ -231,7 +217,7 @@ export default function Panel({ onManeuverClick }) {
|
|||
onClick={handleLogout}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded text-xs"
|
||||
style={{ color: 'var(--text-tertiary)' }}
|
||||
title={`Logged in as ${auth.username}. Click to log out.`}
|
||||
title={"Logged in as " + auth.username + ". Click to log out."}
|
||||
>
|
||||
<span className="hidden sm:inline">{auth.username}</span>
|
||||
<LogOut size={14} />
|
||||
|
|
@ -253,7 +239,6 @@ export default function Panel({ onManeuverClick }) {
|
|||
</div>
|
||||
)
|
||||
|
||||
// Desktop: side panel (now 360px to accommodate PlaceCard)
|
||||
if (!isMobile) {
|
||||
return (
|
||||
<div
|
||||
|
|
@ -270,7 +255,6 @@ export default function Panel({ onManeuverClick }) {
|
|||
)
|
||||
}
|
||||
|
||||
// Mobile: bottom sheet
|
||||
const sheetHeights = {
|
||||
collapsed: 'h-12',
|
||||
half: 'h-[45vh]',
|
||||
|
|
@ -280,13 +264,12 @@ export default function Panel({ onManeuverClick }) {
|
|||
return (
|
||||
<div
|
||||
ref={sheetRef}
|
||||
className={`absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 ${sheetHeights[sheetState]}`}
|
||||
className={"absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 " + sheetHeights[sheetState]}
|
||||
style={{
|
||||
background: 'var(--bg-raised)',
|
||||
borderTop: '1px solid var(--border)',
|
||||
}}
|
||||
>
|
||||
{/* Drag handle */}
|
||||
<div
|
||||
className="flex justify-center py-2 cursor-grab"
|
||||
onTouchStart={handleTouchStart}
|
||||
|
|
|
|||
148
src/store.js
148
src/store.js
|
|
@ -12,27 +12,6 @@ export const useStore = create((set, get) => ({
|
|||
setSearchLoading: (loading) => set({ searchLoading: loading }),
|
||||
setAbortController: (ctrl) => set({ abortController: ctrl }),
|
||||
|
||||
// ── Stop list ──
|
||||
stops: [],
|
||||
// Each stop: { id, lat, lon, name, source, matchCode, isOrigin }
|
||||
|
||||
addStop: (stop) => {
|
||||
const { stops } = get()
|
||||
if (stops.length >= 10) return false
|
||||
set({ stops: [...stops, { ...stop, id: crypto.randomUUID() }] })
|
||||
return true
|
||||
},
|
||||
|
||||
removeStop: (id) => {
|
||||
set({ stops: get().stops.filter((s) => s.id !== id) })
|
||||
},
|
||||
|
||||
reorderStops: (newStops) => set({ stops: newStops }),
|
||||
|
||||
clearStops: () => set({ stops: [] }),
|
||||
|
||||
setStops: (stops) => set({ stops }),
|
||||
|
||||
// ── Geolocation ──
|
||||
userLocation: null, // { lat, lon }
|
||||
geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
|
||||
|
|
@ -44,63 +23,92 @@ export const useStore = create((set, get) => ({
|
|||
mapCenter: null, // { lat, lon, zoom }
|
||||
setMapCenter: (center) => set({ mapCenter: center }),
|
||||
|
||||
// ── Mode ──
|
||||
mode: 'auto', // 'auto' | 'pedestrian' | 'bicycle'
|
||||
setMode: (mode) => set({ mode }),
|
||||
|
||||
// ── Route ──
|
||||
route: null, // Valhalla response (trip object)
|
||||
// ── Unified Route State ──
|
||||
// Single routing system - all routes go through /api/offroute
|
||||
routeStart: null, // { lat, lon, name }
|
||||
routeEnd: null, // { lat, lon, name }
|
||||
routeMode: "foot", // foot | mtb | atv | vehicle
|
||||
boundaryMode: "strict", // strict | pragmatic | emergency
|
||||
routeResult: null, // Response from /api/offroute
|
||||
routeLoading: false,
|
||||
routeError: null,
|
||||
|
||||
setRoute: (route) => set({ route, routeError: null }),
|
||||
setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
|
||||
setRouteEnd: (place) => set({ routeEnd: place }),
|
||||
setRouteMode: (mode) => set({ routeMode: mode }),
|
||||
setBoundaryMode: (mode) => set({ boundaryMode: mode }),
|
||||
setRouteResult: (result) => set({ routeResult: result, routeError: null }),
|
||||
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
||||
setRouteError: (err) => set({ routeError: err, route: null }),
|
||||
clearRoute: () => set({ route: null, routeError: null }),
|
||||
setRouteError: (err) => set({ routeError: err, routeResult: null }),
|
||||
clearRoute: () => set({
|
||||
routeStart: null,
|
||||
routeEnd: null,
|
||||
routeResult: null,
|
||||
routeError: null
|
||||
}),
|
||||
|
||||
// ── Place detail ──
|
||||
selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
|
||||
clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection
|
||||
gpsOrigin: true, // whether GPS should be used as origin when available
|
||||
pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
|
||||
// ── Legacy compatibility (for components not yet migrated) ──
|
||||
stops: [],
|
||||
gpsOrigin: false,
|
||||
pendingDestination: null,
|
||||
route: null,
|
||||
|
||||
setSelectedPlace: (place) => set({ selectedPlace: place }),
|
||||
|
||||
// Boundary rendering function - set by MapView, called by PlaceCard
|
||||
updateBoundary: null,
|
||||
setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
|
||||
clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
|
||||
setClickMarker: (marker) => set({ clickMarker: marker }),
|
||||
clearClickMarker: () => set({ clickMarker: null }),
|
||||
addStop: (stop) => {
|
||||
// Legacy: just set as route end point
|
||||
const { routeStart, setRouteEnd } = get()
|
||||
const place = { lat: stop.lat, lon: stop.lon, name: stop.name }
|
||||
if (!routeStart) {
|
||||
set({ routeStart: place, stops: [{ ...stop, id: crypto.randomUUID() }] })
|
||||
} else {
|
||||
setRouteEnd(place)
|
||||
set({ stops: [...get().stops, { ...stop, id: crypto.randomUUID() }] })
|
||||
}
|
||||
return true
|
||||
},
|
||||
removeStop: (id) => {
|
||||
const { stops } = get()
|
||||
const newStops = stops.filter((s) => s.id !== id)
|
||||
set({ stops: newStops })
|
||||
if (newStops.length === 0) {
|
||||
get().clearRoute()
|
||||
}
|
||||
},
|
||||
clearStops: () => set({ stops: [], routeStart: null, routeEnd: null }),
|
||||
setStops: (stops) => set({ stops }),
|
||||
reorderStops: (newStops) => set({ stops: newStops }),
|
||||
setGpsOrigin: (val) => set({ gpsOrigin: val }),
|
||||
setPendingDestination: (place) => set({ pendingDestination: place }),
|
||||
clearPendingDestination: () => set({ pendingDestination: null }),
|
||||
|
||||
startDirections: (place) => {
|
||||
const { geoPermission, stops, addStop, clearStops } = get()
|
||||
if (geoPermission === 'granted') {
|
||||
clearStops()
|
||||
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
||||
set({ gpsOrigin: true, selectedPlace: null })
|
||||
} else if (stops.length > 0) {
|
||||
const origin = stops[0]
|
||||
clearStops()
|
||||
addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
|
||||
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
||||
set({ selectedPlace: null })
|
||||
} else {
|
||||
// GPS denied, no stops: set pendingDestination only; origin-picker will add both
|
||||
set({ pendingDestination: place, selectedPlace: null })
|
||||
}
|
||||
// Legacy: set as destination
|
||||
const { routeStart, setRouteEnd, clearRoute } = get()
|
||||
clearRoute()
|
||||
set({
|
||||
routeEnd: { lat: place.lat, lon: place.lon, name: place.name },
|
||||
stops: [{ ...place, id: crypto.randomUUID() }],
|
||||
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', // 'collapsed' | 'half' | 'full'
|
||||
sheetState: 'half',
|
||||
panelOpen: true,
|
||||
autocompleteOpen: false,
|
||||
theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
|
||||
themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
|
||||
viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map', // 'map' | 'satellite' | 'hybrid'
|
||||
theme: 'dark',
|
||||
themeOverride: null,
|
||||
viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map',
|
||||
|
||||
setSheetState: (s) => set({ sheetState: s }),
|
||||
setViewMode: (mode) => {
|
||||
|
|
@ -118,6 +126,7 @@ export const useStore = create((set, get) => ({
|
|||
localStorage.removeItem('navi-theme-override')
|
||||
}
|
||||
},
|
||||
|
||||
// ── Auth state ──
|
||||
auth: { authenticated: false, username: null, loaded: false },
|
||||
setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
|
||||
|
|
@ -125,9 +134,9 @@ export const useStore = create((set, get) => ({
|
|||
// ── Contacts ──
|
||||
contacts: [],
|
||||
contactsLoaded: false,
|
||||
activeTab: 'routes', // 'routes' | 'contacts'
|
||||
editingContact: null, // null=closed, {}=new, {id:N}=edit
|
||||
pickingLocationFor: null, // form data while user picks location on map
|
||||
activeTab: 'routes',
|
||||
editingContact: null,
|
||||
pickingLocationFor: null,
|
||||
|
||||
setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
|
||||
setActiveTab: (tab) => set({ activeTab: tab }),
|
||||
|
|
@ -138,18 +147,17 @@ export const useStore = create((set, get) => ({
|
|||
}))
|
||||
|
||||
// ── Panel state selector ──
|
||||
// Returns string state, prioritizing preview to allow it alongside any route state
|
||||
export const usePanelState = () => {
|
||||
return useStore((s) => {
|
||||
const hasPreview = !!s.selectedPlace
|
||||
const hasRoute = !!s.route
|
||||
const hasStops = s.stops.length >= 1
|
||||
const hasRoute = !!s.routeResult
|
||||
const hasRoutePoints = !!s.routeStart || !!s.routeEnd
|
||||
|
||||
if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
|
||||
if (hasPreview && hasStops) return "PREVIEW_ROUTING"
|
||||
if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
|
||||
if (hasPreview) return "PREVIEW"
|
||||
if (hasRoute) return "ROUTE_CALCULATED"
|
||||
if (hasStops) return "ROUTING"
|
||||
if (hasRoutePoints) return "ROUTING"
|
||||
return "IDLE"
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue