mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-06-10 08:54:38 +02:00
Merge feature/offroute-ui: directions panel, multi-stop routing, drag reorder, radial menu integration
This commit is contained in:
commit
36171123f1
10 changed files with 1930 additions and 691 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 />
|
||||
|
||||
|
|
|
|||
67
src/api.js
67
src/api.js
|
|
@ -321,3 +321,70 @@ export async function fetchAuthState() {
|
|||
return { authenticated: false, username: null }
|
||||
}
|
||||
}
|
||||
|
||||
// ── Offroute API ──
|
||||
|
||||
const OFFROUTE_URL = "/api/offroute"
|
||||
const MVUM_URL = "/api/mvum"
|
||||
|
||||
/**
|
||||
* Request an offroute route from the pathfinder API.
|
||||
* @param {object} start - { lat, lon }
|
||||
* @param {object} end - { lat, lon }
|
||||
* @param {string} mode - foot | mtb | atv | vehicle
|
||||
* @param {string} boundaryMode - strict | pragmatic | emergency
|
||||
* @returns {Promise<object>} Offroute response with GeoJSON route
|
||||
*/
|
||||
export async function requestOffroute(start, end, mode = "foot", boundaryMode = "strict") {
|
||||
const body = {
|
||||
start: [start.lat, start.lon],
|
||||
end: [end.lat, end.lon],
|
||||
mode,
|
||||
boundary_mode: boundaryMode,
|
||||
}
|
||||
console.log('[TRACE-API] requestOffroute body:', JSON.stringify(body))
|
||||
|
||||
const controller = new AbortController()
|
||||
const timeout = setTimeout(() => controller.abort(), 120000) // 2 min timeout for complex routes
|
||||
|
||||
try {
|
||||
const resp = await fetch(OFFROUTE_URL, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(body),
|
||||
signal: controller.signal,
|
||||
})
|
||||
|
||||
if (!resp.ok) {
|
||||
const errBody = await resp.json().catch(() => ({}))
|
||||
throw new Error(errBody.message || 'Could not find a route. Try a different start point or mode.')
|
||||
}
|
||||
|
||||
return resp.json()
|
||||
} finally {
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch MVUM (Motor Vehicle Use Map) info for a location.
|
||||
* @param {number} lat
|
||||
* @param {number} lon
|
||||
* @param {number} radius - Search radius in meters
|
||||
* @returns {Promise<object|null>} MVUM feature info or null
|
||||
*/
|
||||
export async function fetchMvumInfo(lat, lon, radius = 500) {
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
lat: String(lat),
|
||||
lon: String(lon),
|
||||
radius: String(radius),
|
||||
})
|
||||
const resp = await fetch(`${MVUM_URL}?${params}`, { signal: AbortSignal.timeout(5000) })
|
||||
if (!resp.ok) return null
|
||||
const data = await resp.json()
|
||||
return data.feature || null
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
|
|
|||
417
src/components/DirectionsPanel.jsx
Normal file
417
src/components/DirectionsPanel.jsx
Normal file
|
|
@ -0,0 +1,417 @@
|
|||
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>
|
||||
)
|
||||
}
|
||||
321
src/components/LocationInput.jsx
Normal file
321
src/components/LocationInput.jsx
Normal file
|
|
@ -0,0 +1,321 @@
|
|||
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,23 +1,87 @@
|
|||
import {
|
||||
MoveRight, MoveUpRight, MoveDownRight, CornerUpRight, CornerUpLeft,
|
||||
MoveLeft, MoveUpLeft, MoveDownLeft, CircleDot, RotateCw,
|
||||
GitMerge, CornerRightDown, CornerRightUp, Navigation
|
||||
GitMerge, CornerRightDown, CornerRightUp, Navigation, Mountain, Map, AlertTriangle,
|
||||
Compass, ArrowUp, ArrowUpRight, ArrowRight, ArrowDownRight, ArrowDown,
|
||||
ArrowDownLeft, ArrowLeft, ArrowUpLeft, MapPin
|
||||
} 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`
|
||||
/**
|
||||
* Format distance with commas for feet, one decimal for miles.
|
||||
* Under 1 mile: "2,640 ft"
|
||||
* 1+ miles: "1.3 mi"
|
||||
*/
|
||||
function formatDistance(distanceM, distanceKm) {
|
||||
let meters = null
|
||||
if (distanceM !== undefined && distanceM !== null) {
|
||||
meters = distanceM
|
||||
} else if (distanceKm !== undefined && distanceKm !== null) {
|
||||
meters = distanceKm * 1000
|
||||
}
|
||||
|
||||
if (meters === null) return ''
|
||||
|
||||
const miles = meters / 1609.34
|
||||
if (miles < 1) {
|
||||
const feet = Math.round(meters * 3.28084)
|
||||
return feet.toLocaleString() + ' ft'
|
||||
}
|
||||
return miles.toFixed(1) + ' mi'
|
||||
}
|
||||
|
||||
function 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'
|
||||
}
|
||||
|
||||
// Compass arrow icon based on cardinal direction with rotation
|
||||
function CompassIcon({ cardinal, bearing, size = 16 }) {
|
||||
// Use bearing to rotate arrow, or fall back to cardinal-based icon
|
||||
if (bearing !== undefined && bearing !== null) {
|
||||
return (
|
||||
<ArrowUp
|
||||
size={size}
|
||||
strokeWidth={2}
|
||||
style={{ transform: `rotate(${bearing}deg)` }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const props = { size, strokeWidth: 2 }
|
||||
const arrowMap = {
|
||||
'N': ArrowUp,
|
||||
'NNE': ArrowUpRight,
|
||||
'NE': ArrowUpRight,
|
||||
'ENE': ArrowRight,
|
||||
'E': ArrowRight,
|
||||
'ESE': ArrowRight,
|
||||
'SE': ArrowDownRight,
|
||||
'SSE': ArrowDownRight,
|
||||
'S': ArrowDown,
|
||||
'SSW': ArrowDownLeft,
|
||||
'SW': ArrowDownLeft,
|
||||
'WSW': ArrowLeft,
|
||||
'W': ArrowLeft,
|
||||
'WNW': ArrowLeft,
|
||||
'NW': ArrowUpLeft,
|
||||
'NNW': ArrowUpLeft,
|
||||
}
|
||||
const Icon = arrowMap[cardinal] || Compass
|
||||
return <Icon {...props} />
|
||||
}
|
||||
|
||||
// Wilderness maneuver icon
|
||||
function WildernessIcon({ type, cardinal, bearing, size = 16 }) {
|
||||
if (type === 'arrival') {
|
||||
return <MapPin size={size} strokeWidth={1.5} />
|
||||
}
|
||||
return <CompassIcon cardinal={cardinal} bearing={bearing} size={size} />
|
||||
}
|
||||
|
||||
// Network maneuver icon (Valhalla types)
|
||||
function ManeuverIcon({ type }) {
|
||||
const size = 16
|
||||
const props = { size, strokeWidth: 1.5 }
|
||||
|
|
@ -40,10 +104,55 @@ function ManeuverIcon({ type }) {
|
|||
}
|
||||
}
|
||||
|
||||
export default function ManeuverList({ onManeuverClick }) {
|
||||
const route = useStore((s) => s.route)
|
||||
/**
|
||||
* Add transport mode prefix to network maneuver instruction.
|
||||
* "Drive east on..." for auto, "Walk south on..." for foot, "Ride north on..." for mtb
|
||||
*/
|
||||
function formatNetworkInstruction(instruction, mode) {
|
||||
if (!instruction) return ''
|
||||
|
||||
// Get verb based on mode
|
||||
const modeVerbs = {
|
||||
'auto': 'Drive',
|
||||
'foot': 'Walk',
|
||||
'pedestrian': 'Walk',
|
||||
'mtb': 'Ride',
|
||||
'bicycle': 'Ride',
|
||||
'atv': 'Drive',
|
||||
'vehicle': 'Drive',
|
||||
}
|
||||
const verb = modeVerbs[mode] || 'Go'
|
||||
|
||||
// Check if instruction starts with a direction verb we should replace
|
||||
const startsWithVerbs = [
|
||||
'Turn left', 'Turn right', 'Bear left', 'Bear right',
|
||||
'Keep left', 'Keep right', 'Continue', 'Head', 'Go',
|
||||
'Proceed', 'Make a', 'Take a', 'Start', 'Merge', 'Exit'
|
||||
]
|
||||
|
||||
for (const v of startsWithVerbs) {
|
||||
if (instruction.startsWith(v)) {
|
||||
// Already has a verb, return as-is (Valhalla instructions are already good)
|
||||
return instruction
|
||||
}
|
||||
}
|
||||
|
||||
// If instruction starts with direction (north, south, etc.), prepend verb
|
||||
const directions = ['north', 'south', 'east', 'west', 'onto', 'on ']
|
||||
for (const dir of directions) {
|
||||
if (instruction.toLowerCase().startsWith(dir)) {
|
||||
return `${verb} ${instruction}`
|
||||
}
|
||||
}
|
||||
|
||||
return instruction
|
||||
}
|
||||
|
||||
export default function ManeuverList() {
|
||||
const routeResult = useStore((s) => s.routeResult)
|
||||
const routeLoading = useStore((s) => s.routeLoading)
|
||||
const routeError = useStore((s) => s.routeError)
|
||||
const routeMode = useStore((s) => s.routeMode)
|
||||
|
||||
if (routeLoading) {
|
||||
return (
|
||||
|
|
@ -74,67 +183,161 @@ 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 summary = routeResult.summary
|
||||
const features = routeResult.route?.features || []
|
||||
const networkMode = summary.network_mode || routeMode || 'foot'
|
||||
|
||||
const allManeuvers = []
|
||||
let timeRemaining = totalTime
|
||||
// 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'
|
||||
)
|
||||
|
||||
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 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">
|
||||
{/* 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)}
|
||||
{formatDistance(null, 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
|
||||
key={i}
|
||||
onClick={() => {
|
||||
if (man.begin_shape_index != null && onManeuverClick) onManeuverClick(man)
|
||||
}}
|
||||
className="flex items-start gap-2 px-2 py-2 text-left rounded transition-colors duration-75"
|
||||
style={{ '--hover-bg': 'var(--bg-overlay)' }}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'var(--bg-overlay)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
|
||||
>
|
||||
<span className="w-5 shrink-0 mt-0.5" style={{ color: 'var(--accent)' }}>
|
||||
<ManeuverIcon type={man.type} />
|
||||
{/* 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 className="flex-1 min-w-0">
|
||||
<p className="text-sm leading-tight" style={{ color: 'var(--text-primary)' }}>
|
||||
{man.instruction || man.verbal_pre_transition_instruction || 'Continue'}
|
||||
</p>
|
||||
<p className="font-mono text-[11px] mt-0.5" style={{ color: 'var(--text-tertiary)' }}>
|
||||
{formatDist(man.length || 0)}
|
||||
{man.timeRemaining > 0 && (
|
||||
<span className="ml-2">{formatTime(man.timeRemaining)} left</span>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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, Plus } 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,20 +1430,20 @@ 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)
|
||||
const pickingLocationFor = useStore((s) => s.pickingLocationFor)
|
||||
const setEditingContact = useStore((s) => s.setEditingContact)
|
||||
const clearPickingLocationFor = useStore((s) => s.clearPickingLocationFor)
|
||||
const directionsMode = useStore((s) => s.directionsMode)
|
||||
const activeDirectionsField = useStore((s) => s.activeDirectionsField)
|
||||
const pickingRouteField = useStore((s) => s.pickingRouteField)
|
||||
|
||||
// Zoom level indicator state
|
||||
const [zoomLevel, setZoomLevel] = useState(10)
|
||||
|
|
@ -1580,7 +1662,7 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
|
||||
const radialWedges = [
|
||||
{
|
||||
id: "directions-to",
|
||||
id: "to-here",
|
||||
label: "To here",
|
||||
icon: ArrowDownLeft,
|
||||
onSelect: () => {
|
||||
|
|
@ -1589,29 +1671,48 @@ 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, setRouteStart, setRouteEnd, computeRoute, setDirectionsMode, geoPermission, userLocation } = useStore.getState()
|
||||
|
||||
setRouteEnd(place)
|
||||
setDirectionsMode(true)
|
||||
|
||||
if (routeStart) {
|
||||
computeRoute()
|
||||
} else if (geoPermission === "granted" && userLocation) {
|
||||
// Use GPS as origin fallback
|
||||
setRouteStart({
|
||||
lat: userLocation.lat,
|
||||
lon: userLocation.lon,
|
||||
name: "Your location",
|
||||
source: "gps",
|
||||
})
|
||||
computeRoute()
|
||||
}
|
||||
// If no origin and no GPS, directions panel opens and origin field auto-focuses
|
||||
},
|
||||
},
|
||||
{
|
||||
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, routeEnd, computeRoute, setDirectionsMode } = useStore.getState()
|
||||
clearRoute()
|
||||
clearRouteDisplay(mapInstance.current)
|
||||
setRouteStart(place)
|
||||
setDirectionsMode(true)
|
||||
|
||||
if (routeEnd) {
|
||||
computeRoute()
|
||||
}
|
||||
// If no destination, directions panel opens and destination field auto-focuses
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -1620,25 +1721,33 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
icon: Plus,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
const { stops, addStop, clearStops } = useStore.getState()
|
||||
const { addIntermediateStop, computeRoute, routeStart, routeEnd } = 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")
|
||||
const success = addIntermediateStop(place)
|
||||
if (success) {
|
||||
// If we have both origin and destination, recalculate route
|
||||
if (routeStart && routeEnd) {
|
||||
computeRoute()
|
||||
}
|
||||
} else {
|
||||
toast("Maximum 8 intermediate stops reached")
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "clear-route",
|
||||
label: "Clear",
|
||||
icon: Trash2,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
useStore.getState().clearRoute()
|
||||
clearRouteDisplay(mapInstance.current)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "save-place",
|
||||
label: "Save",
|
||||
|
|
@ -1805,6 +1914,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
|
||||
|
|
@ -1894,7 +2011,33 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
return
|
||||
}
|
||||
|
||||
|
||||
// Handle explicit pick-from-map mode for route inputs
|
||||
const { pickingRouteField, setRouteStart, setRouteEnd, clearPickingRouteField } = useStore.getState()
|
||||
if (pickingRouteField) {
|
||||
const { lng, lat } = e.lngLat
|
||||
map.getCanvas().style.cursor = ''
|
||||
// Reverse geocode for name
|
||||
fetchReverse(lat, lng).then((place) => {
|
||||
const name = place?.name || lat.toFixed(5) + ", " + lng.toFixed(5)
|
||||
const location = { lat, lon: lng, name, source: "map_click" }
|
||||
if (pickingRouteField === "origin") {
|
||||
setRouteStart(location)
|
||||
} else if (pickingRouteField === "destination") {
|
||||
setRouteEnd(location)
|
||||
}
|
||||
clearPickingRouteField()
|
||||
}).catch(() => {
|
||||
const name = lat.toFixed(5) + ", " + lng.toFixed(5)
|
||||
const location = { lat, lon: lng, name, source: "map_click" }
|
||||
if (pickingRouteField === "origin") {
|
||||
setRouteStart(location)
|
||||
} else if (pickingRouteField === "destination") {
|
||||
setRouteEnd(location)
|
||||
}
|
||||
clearPickingRouteField()
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
const store = useStore.getState()
|
||||
const marker = store.clickMarker
|
||||
|
|
@ -2062,12 +2205,16 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
const props = labelFeature.properties
|
||||
const geom = labelFeature.geometry
|
||||
|
||||
// Get feature coordinates (Point geometry)
|
||||
let featureLat = lat
|
||||
let featureLon = lng
|
||||
// CRITICAL: Always use CLICK coordinates for routing (lat, lng from e.lngLat)
|
||||
// Feature coordinates are only for display/fetching details
|
||||
let featureLat = lat // Click coordinate - used for routing
|
||||
let featureLon = lng // Click coordinate - used for routing
|
||||
let displayLat = lat // May be updated to feature coords for display
|
||||
let displayLon = lng
|
||||
if (geom && geom.type === 'Point' && geom.coordinates) {
|
||||
featureLon = geom.coordinates[0]
|
||||
featureLat = geom.coordinates[1]
|
||||
// Store feature's canonical coords separately - NOT for routing
|
||||
displayLon = geom.coordinates[0]
|
||||
displayLat = geom.coordinates[1]
|
||||
}
|
||||
|
||||
// FIX A: For park-type features, also query polygon layers to get boundary geometry
|
||||
|
|
@ -2112,6 +2259,7 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
updateBoundaryRef.current(polygonGeometry)
|
||||
}
|
||||
|
||||
console.log('[TRACE-CLICK] Feature click setSelectedPlace:', { featureLat, featureLon, clickLat: lat, clickLng: lng, name: props.name })
|
||||
store.setSelectedPlace({
|
||||
lat: featureLat,
|
||||
lon: featureLon,
|
||||
|
|
@ -2143,6 +2291,7 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
circleRadiusPx: MARKER_RADIUS_PX,
|
||||
})
|
||||
|
||||
console.log('[TRACE-CLICK] Reticle click setSelectedPlace:', { lat, lng })
|
||||
store.setSelectedPlace({
|
||||
lat,
|
||||
lon: lng,
|
||||
|
|
@ -2304,6 +2453,12 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
updateBoundaryRef.current = updateBoundaryFn
|
||||
useStore.getState().setUpdateBoundary(updateBoundaryFn)
|
||||
|
||||
// Register route display callbacks for store.computeRoute()
|
||||
useStore.getState().setRouteDisplayCallbacks(
|
||||
(routeGeojson) => updateRouteDisplay(map, routeGeojson),
|
||||
() => clearRouteDisplay(map)
|
||||
)
|
||||
|
||||
// POI/label hover affordance — cursor pointer + highlight
|
||||
const interactiveLayers = ['pois', 'places_locality', 'places_region', 'places_country', 'places_subplace']
|
||||
|
||||
|
|
@ -2464,10 +2619,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 +2713,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) => {
|
||||
|
|
@ -2747,6 +2738,22 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
}
|
||||
}, [pickingLocationFor])
|
||||
|
||||
// Handle directions mode cursor
|
||||
useEffect(() => {
|
||||
const map = mapInstance.current
|
||||
if (!map) return
|
||||
if (directionsMode && activeDirectionsField) {
|
||||
map.getCanvas().style.cursor = 'crosshair'
|
||||
} else if (!measuringRef.current.active && !pickingLocationFor) {
|
||||
map.getCanvas().style.cursor = ''
|
||||
}
|
||||
return () => {
|
||||
if (map && !measuringRef.current.active && !pickingLocationFor) {
|
||||
map.getCanvas().style.cursor = ''
|
||||
}
|
||||
}
|
||||
}, [directionsMode, activeDirectionsField])
|
||||
|
||||
// ESC key handler for location pick mode
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e) => {
|
||||
|
|
|
|||
|
|
@ -1,53 +1,60 @@
|
|||
import { useRef, useCallback, useEffect, useState } from 'react'
|
||||
import { LogIn, LogOut } from 'lucide-react'
|
||||
import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin, Target } 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'
|
||||
import DirectionsPanel from './DirectionsPanel'
|
||||
import PlaceDetail from './PlaceDetail'
|
||||
|
||||
export default function Panel({ onManeuverClick }) {
|
||||
const TRAVEL_MODES = [
|
||||
{ id: 'auto', label: 'Drive', Icon: Car },
|
||||
{ id: 'foot', label: 'Foot', Icon: Footprints },
|
||||
{ id: 'mtb', label: 'MTB', Icon: Bike },
|
||||
{ id: 'atv', label: 'ATV', Icon: Car },
|
||||
{ id: 'vehicle', label: '4x4', Icon: Car },
|
||||
]
|
||||
|
||||
const BOUNDARY_MODES = [
|
||||
{ id: 'strict', label: 'Strict', Icon: Shield, title: 'Avoid barriers' },
|
||||
{ id: 'pragmatic', label: 'Cross', Icon: AlertTriangle, title: 'Cross with penalty' },
|
||||
{ id: 'emergency', label: 'Ignore', Icon: Zap, title: 'Ignore barriers' },
|
||||
]
|
||||
|
||||
export default function Panel({ onClearRoute }) {
|
||||
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 pickingRouteField = useStore((s) => s.pickingRouteField)
|
||||
const setPickingRouteField = useStore((s) => s.setPickingRouteField)
|
||||
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)
|
||||
const directionsMode = useStore((s) => s.directionsMode)
|
||||
const setDirectionsMode = useStore((s) => s.setDirectionsMode)
|
||||
|
||||
const panelState = usePanelState()
|
||||
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const [optimizing, setOptimizing] = useState(false)
|
||||
const sheetRef = useRef(null)
|
||||
const dragStartY = useRef(0)
|
||||
const dragStartState = useRef('half')
|
||||
|
||||
// Show contacts tab only if feature enabled AND user is authenticated
|
||||
const showContacts = hasFeature('has_contacts') && auth.authenticated
|
||||
|
||||
// Responsive detection
|
||||
useEffect(() => {
|
||||
const check = () => setIsMobile(window.innerWidth < 768)
|
||||
check()
|
||||
|
|
@ -55,61 +62,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,21 +82,30 @@ 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 = (
|
||||
// Show side panel place card when building route (either mode) and place is selected
|
||||
const showSidePlaceCard = (directionsMode || showRouteSection) && selectedPlace
|
||||
|
||||
const routesContent = directionsMode ? (
|
||||
// Directions mode: just the directions panel, place card is shown in side panel
|
||||
<DirectionsPanel onClose={() => {
|
||||
setDirectionsMode(false)
|
||||
onClearRoute?.()
|
||||
}} />
|
||||
) : (
|
||||
<>
|
||||
<SearchBar />
|
||||
|
||||
{/* Preview card when place is selected */}
|
||||
{showPreviewCard && selectedPlace && (
|
||||
{showPreviewCard && selectedPlace && !showRouteSection && (
|
||||
<div className="mt-3">
|
||||
<PlaceCard
|
||||
place={selectedPlace}
|
||||
|
|
@ -152,44 +116,100 @@ 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 && (
|
||||
<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">
|
||||
<ManeuverList onManeuverClick={onManeuverClick} />
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||
Route
|
||||
</span>
|
||||
<button
|
||||
onClick={handleClearRoute}
|
||||
className="p-1 rounded hover:bg-[var(--bg-overlay)]"
|
||||
title="Clear route"
|
||||
>
|
||||
<X size={14} style={{ color: 'var(--text-tertiary)' }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 mb-3 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={12} style={{ color: '#22c55e' }} />
|
||||
<span className="flex-1" style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||
{routeStart?.name || 'Click pin to pick start'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPickingRouteField('origin')}
|
||||
className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
|
||||
style={{ color: pickingRouteField === 'origin' ? 'var(--accent)' : 'var(--text-tertiary)' }}
|
||||
title="Pick start from map"
|
||||
>
|
||||
<Target size={14} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={12} style={{ color: '#ef4444' }} />
|
||||
<span className="flex-1" style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||
{routeEnd?.name || 'Click pin to pick destination'}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => setPickingRouteField('destination')}
|
||||
className="p-1 rounded hover:bg-[var(--bg-overlay)] transition-colors"
|
||||
style={{ color: pickingRouteField === 'destination' ? 'var(--accent)' : 'var(--text-tertiary)' }}
|
||||
title="Pick destination from map"
|
||||
>
|
||||
<Target size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 mb-2">
|
||||
{TRAVEL_MODES.map((m) => {
|
||||
const active = routeMode === m.id
|
||||
return (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setRouteMode(m.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
|
||||
style={{
|
||||
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
|
||||
color: active ? 'var(--accent)' : 'var(--text-tertiary)',
|
||||
}}
|
||||
title={m.label}
|
||||
>
|
||||
<m.Icon size={14} />
|
||||
<span className="hidden sm:inline">{m.label}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{routeMode !== 'auto' && (
|
||||
<div className="flex gap-1 mb-3">
|
||||
{BOUNDARY_MODES.map((m) => {
|
||||
const active = boundaryMode === m.id
|
||||
return (
|
||||
<button
|
||||
key={m.id}
|
||||
onClick={() => setBoundaryMode(m.id)}
|
||||
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
|
||||
style={{
|
||||
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
|
||||
color: active ? 'var(--accent)' : 'var(--text-tertiary)',
|
||||
}}
|
||||
title={m.title}
|
||||
>
|
||||
<m.Icon size={14} />
|
||||
<span className="hidden sm:inline">{m.label}</span>
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ManeuverList />
|
||||
</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 +223,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 +251,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,24 +273,88 @@ export default function Panel({ onManeuverClick }) {
|
|||
</div>
|
||||
)
|
||||
|
||||
// Desktop: side panel (now 360px to accommodate PlaceCard)
|
||||
// Side panel for place card during directions mode (desktop only)
|
||||
const sidePlaceCardPanel = showSidePlaceCard && !isMobile && (
|
||||
<div
|
||||
className="absolute top-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
|
||||
style={{
|
||||
left: '400px',
|
||||
width: '300px',
|
||||
background: 'var(--bg-raised)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
boxShadow: 'inset 4px 0 8px -4px rgba(0,0,0,0.15)',
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
|
||||
{selectedPlace?.name || 'Place Info'}
|
||||
</span>
|
||||
<button
|
||||
onClick={clearSelectedPlace}
|
||||
className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors"
|
||||
title="Close"
|
||||
>
|
||||
<X size={16} style={{ color: 'var(--text-tertiary)' }} />
|
||||
</button>
|
||||
</div>
|
||||
{/* Use PlaceCard in compact preview mode */}
|
||||
<PlaceCard
|
||||
place={selectedPlace}
|
||||
variant="preview"
|
||||
expanded={true}
|
||||
onClose={clearSelectedPlace}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
|
||||
// Mobile overlay for place card during directions mode
|
||||
const mobilePlaceCardOverlay = showSidePlaceCard && isMobile && (
|
||||
<div
|
||||
className="absolute inset-0 z-20 flex flex-col rounded-t-2xl"
|
||||
style={{ background: 'var(--bg-raised)' }}
|
||||
>
|
||||
<div className="flex items-center justify-between p-4 border-b" style={{ borderColor: 'var(--border)' }}>
|
||||
<span className="text-sm font-medium truncate pr-2" style={{ color: 'var(--text-primary)' }}>
|
||||
{selectedPlace?.name || 'Place Info'}
|
||||
</span>
|
||||
<button
|
||||
onClick={clearSelectedPlace}
|
||||
className="p-1.5 rounded-lg hover:bg-[var(--bg-overlay)] transition-colors shrink-0"
|
||||
title="Close"
|
||||
>
|
||||
<X size={16} style={{ color: 'var(--text-tertiary)' }} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<PlaceCard
|
||||
place={selectedPlace}
|
||||
variant="preview"
|
||||
expanded={true}
|
||||
onClose={clearSelectedPlace}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
if (!isMobile) {
|
||||
return (
|
||||
<div
|
||||
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
|
||||
style={{
|
||||
width: '400px',
|
||||
background: 'var(--bg-raised)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
{content}
|
||||
</div>
|
||||
<>
|
||||
<div
|
||||
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
|
||||
style={{
|
||||
width: '400px',
|
||||
background: 'var(--bg-raised)',
|
||||
borderRight: '1px solid var(--border)',
|
||||
}}
|
||||
>
|
||||
{header}
|
||||
{content}
|
||||
</div>
|
||||
{sidePlaceCardPanel}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
// Mobile: bottom sheet
|
||||
const sheetHeights = {
|
||||
collapsed: 'h-12',
|
||||
half: 'h-[45vh]',
|
||||
|
|
@ -280,13 +364,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}
|
||||
|
|
@ -301,9 +384,10 @@ export default function Panel({ onManeuverClick }) {
|
|||
</div>
|
||||
|
||||
{sheetState !== 'collapsed' && (
|
||||
<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))' }}>
|
||||
<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))' }}>
|
||||
{header}
|
||||
{content}
|
||||
{mobilePlaceCardOverlay}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -476,6 +476,7 @@ export function PlaceCard({ place, variant = "preview", expanded = true, onToggl
|
|||
const savedContact = contacts.find((c) => c.lat === place.lat && c.lon === place.lon)
|
||||
|
||||
const handleDirections = () => {
|
||||
console.log('[TRACE-DIRECTIONS] PlaceCard handleDirections, place:', { lat: place?.lat, lon: place?.lon, name: place?.name })
|
||||
// No toast - empty origin slot is the visual prompt
|
||||
startDirections(place)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,30 @@ import { buildAddress } from '../utils/place'
|
|||
import { searchGeocode } from '../api'
|
||||
import { hasFeature } from '../config'
|
||||
|
||||
|
||||
/** Parse coordinate input like "42.35, -114.30" or "42.35 -114.30" */
|
||||
function parseCoordinates(input) {
|
||||
if (!input) return null
|
||||
const trimmed = input.trim()
|
||||
|
||||
// Pattern: lat, lon or lat lon (with optional comma)
|
||||
// Supports: "42.35, -114.30", "42.35 -114.30", "42.35,-114.30"
|
||||
const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
|
||||
const match = trimmed.match(pattern)
|
||||
|
||||
if (!match) return null
|
||||
|
||||
const lat = parseFloat(match[1])
|
||||
const lon = parseFloat(match[2])
|
||||
|
||||
// Validate ranges
|
||||
if (isNaN(lat) || isNaN(lon)) return null
|
||||
if (lat < -90 || lat > 90) return null
|
||||
if (lon < -180 || lon > 180) return null
|
||||
|
||||
return { lat, lon }
|
||||
}
|
||||
|
||||
/** Get category icon based on result type/source */
|
||||
function CategoryIcon({ result }) {
|
||||
const type = result.type || ''
|
||||
|
|
@ -71,6 +95,25 @@ const SearchBar = forwardRef(function SearchBar(_, ref) {
|
|||
return
|
||||
}
|
||||
|
||||
// Check for coordinate input first
|
||||
const coords = parseCoordinates(q)
|
||||
if (coords) {
|
||||
const coordResult = {
|
||||
lat: coords.lat,
|
||||
lon: coords.lon,
|
||||
name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
|
||||
address: "Coordinates",
|
||||
type: "coordinates",
|
||||
source: "coordinates",
|
||||
match_code: null,
|
||||
raw: {},
|
||||
}
|
||||
setResults([coordResult])
|
||||
setAutocompleteOpen(true)
|
||||
setSearchLoading(false)
|
||||
return
|
||||
}
|
||||
|
||||
// Prepend matching contacts
|
||||
let contactResults = []
|
||||
if (hasFeature('has_contacts') && contacts.length > 0) {
|
||||
|
|
|
|||
309
src/store.js
309
src/store.js
|
|
@ -1,8 +1,9 @@
|
|||
import { create } from 'zustand'
|
||||
import { create } from "zustand"
|
||||
import { requestOffroute } from "./api"
|
||||
|
||||
export const useStore = create((set, get) => ({
|
||||
// ── Search state ──
|
||||
query: '',
|
||||
query: "",
|
||||
results: [],
|
||||
searchLoading: false,
|
||||
abortController: null,
|
||||
|
|
@ -12,30 +13,9 @@ 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'
|
||||
geoPermission: "prompt", // "prompt" | "granted" | "denied"
|
||||
|
||||
setUserLocation: (loc) => set({ userLocation: loc }),
|
||||
setGeoPermission: (p) => set({ geoPermission: p }),
|
||||
|
|
@ -44,80 +24,260 @@ 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 ──
|
||||
// routeStart = origin (source of truth)
|
||||
// routeEnd = destination (source of truth)
|
||||
// stops[] = ONLY intermediate waypoints (not origin/destination)
|
||||
routeStart: null, // { lat, lon, name }
|
||||
routeEnd: null, // { lat, lon, name }
|
||||
stops: [], // Intermediate waypoints only: [{ id, lat, lon, name }, ...]
|
||||
routeMode: "auto", // foot | mtb | atv | vehicle
|
||||
boundaryMode: "strict", // strict | pragmatic | emergency
|
||||
routeResult: null, // Response from /api/offroute
|
||||
routeLoading: false,
|
||||
routeError: null,
|
||||
|
||||
setRoute: (route) => set({ route, routeError: null }),
|
||||
// Map display callback - set by MapView
|
||||
_updateRouteDisplay: null,
|
||||
_clearRouteDisplay: null,
|
||||
setRouteDisplayCallbacks: (update, clear) => set({ _updateRouteDisplay: update, _clearRouteDisplay: clear }),
|
||||
|
||||
setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
|
||||
setRouteEnd: (place) => set({ routeEnd: place }),
|
||||
setRouteResult: (result) => set({ routeResult: result, routeError: null }),
|
||||
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
||||
setRouteError: (err) => set({ routeError: err, route: null }),
|
||||
clearRoute: () => set({ route: null, routeError: null }),
|
||||
setRouteError: (err) => set({ routeError: err, routeResult: null }),
|
||||
|
||||
// Mode/boundary setters that trigger recalculation
|
||||
setRouteMode: (mode) => {
|
||||
set({ routeMode: mode })
|
||||
get().computeRoute()
|
||||
},
|
||||
setBoundaryMode: (mode) => {
|
||||
set({ boundaryMode: mode })
|
||||
get().computeRoute()
|
||||
},
|
||||
|
||||
clearRoute: () => {
|
||||
const { _clearRouteDisplay } = get()
|
||||
if (_clearRouteDisplay) _clearRouteDisplay()
|
||||
set({
|
||||
routeStart: null,
|
||||
routeEnd: null,
|
||||
stops: [],
|
||||
routeResult: null,
|
||||
routeError: null,
|
||||
})
|
||||
},
|
||||
|
||||
// ── INTERMEDIATE STOPS MANAGEMENT ──
|
||||
// stops[] contains ONLY intermediate waypoints, not origin/destination
|
||||
|
||||
// Add intermediate stop - can be called with or without place
|
||||
// With place: creates pre-filled stop (from radial menu)
|
||||
// Without place: creates empty placeholder (from Add Stop button)
|
||||
addIntermediateStop: (place) => {
|
||||
const { stops } = get()
|
||||
if (stops.length >= 8) return false // Max 8 intermediate stops
|
||||
const newStop = {
|
||||
id: crypto.randomUUID(),
|
||||
lat: place?.lat ?? null,
|
||||
lon: place?.lon ?? null,
|
||||
name: place?.name ?? "",
|
||||
}
|
||||
set({ stops: [...stops, newStop] })
|
||||
return true
|
||||
},
|
||||
|
||||
updateStop: (id, place) => {
|
||||
const { stops } = get()
|
||||
const newStops = stops.map((s) =>
|
||||
s.id === id ? { ...s, lat: place.lat, lon: place.lon, name: place.name } : s
|
||||
)
|
||||
set({ stops: newStops })
|
||||
// Trigger route recalculation if all waypoints have coordinates
|
||||
get().computeRoute()
|
||||
},
|
||||
|
||||
removeStop: (id) => {
|
||||
const { stops } = get()
|
||||
const newStops = stops.filter((s) => s.id !== id)
|
||||
set({ stops: newStops })
|
||||
// Recalculate route without this stop
|
||||
get().computeRoute()
|
||||
},
|
||||
|
||||
setStops: (stops) => set({ stops }),
|
||||
|
||||
// ── UNIFIED ROUTING TRIGGER ──
|
||||
// Handles both 2-point and multi-point routing
|
||||
computeRoute: async () => {
|
||||
const { routeStart, routeEnd, stops, routeMode, boundaryMode, _updateRouteDisplay } = get()
|
||||
|
||||
// Need both endpoints to route
|
||||
if (!routeStart || !routeEnd) return
|
||||
|
||||
// Filter out incomplete stops (no coordinates yet)
|
||||
const validStops = stops.filter((s) => s.lat != null && s.lon != null)
|
||||
|
||||
// Build full waypoint list: [origin, ...intermediates, destination]
|
||||
const waypoints = [
|
||||
routeStart,
|
||||
...validStops,
|
||||
routeEnd,
|
||||
]
|
||||
|
||||
console.log("[TRACE-ROUTE] computeRoute with waypoints:", waypoints.length, waypoints.map(w => w.name))
|
||||
|
||||
set({ routeLoading: true, routeError: null })
|
||||
|
||||
try {
|
||||
if (waypoints.length === 2) {
|
||||
// Simple 2-point routing
|
||||
const data = await requestOffroute(routeStart, routeEnd, routeMode, boundaryMode)
|
||||
if (data.status === "ok" && data.route) {
|
||||
set({ routeResult: data, routeError: null })
|
||||
if (_updateRouteDisplay) _updateRouteDisplay(data.route)
|
||||
} else {
|
||||
set({ routeError: data.message || data.error || "No route found", routeResult: null })
|
||||
}
|
||||
} else {
|
||||
// Multi-point routing: chain sequential 2-point routes and merge
|
||||
const segments = []
|
||||
let totalDistanceKm = 0
|
||||
let totalEffortMinutes = 0
|
||||
let allFeatures = []
|
||||
|
||||
for (let i = 0; i < waypoints.length - 1; i++) {
|
||||
const from = waypoints[i]
|
||||
const to = waypoints[i + 1]
|
||||
const segmentData = await requestOffroute(from, to, routeMode, boundaryMode)
|
||||
|
||||
if (segmentData.status !== "ok" || !segmentData.route) {
|
||||
throw new Error("No route found between " + (from.name || "waypoint") + " and " + (to.name || "waypoint"))
|
||||
}
|
||||
|
||||
segments.push(segmentData)
|
||||
|
||||
// Accumulate totals
|
||||
if (segmentData.summary) {
|
||||
totalDistanceKm += segmentData.summary.total_distance_km || 0
|
||||
totalEffortMinutes += segmentData.summary.total_effort_minutes || 0
|
||||
}
|
||||
|
||||
// Collect features
|
||||
if (segmentData.route?.features) {
|
||||
allFeatures.push(...segmentData.route.features)
|
||||
}
|
||||
}
|
||||
|
||||
// Build merged result
|
||||
const mergedResult = {
|
||||
status: "ok",
|
||||
summary: {
|
||||
total_distance_km: totalDistanceKm,
|
||||
total_effort_minutes: totalEffortMinutes,
|
||||
waypoint_count: waypoints.length,
|
||||
},
|
||||
route: {
|
||||
type: "FeatureCollection",
|
||||
features: allFeatures,
|
||||
},
|
||||
}
|
||||
|
||||
set({ routeResult: mergedResult, routeError: null })
|
||||
if (_updateRouteDisplay) _updateRouteDisplay(mergedResult.route)
|
||||
}
|
||||
} catch (e) {
|
||||
set({ routeError: e.message, routeResult: null })
|
||||
} finally {
|
||||
set({ routeLoading: false })
|
||||
}
|
||||
},
|
||||
|
||||
// ── Legacy compatibility ──
|
||||
gpsOrigin: true,
|
||||
pendingDestination: null,
|
||||
setGpsOrigin: (val) => set({ gpsOrigin: val }),
|
||||
setPendingDestination: (place) => set({ pendingDestination: place }),
|
||||
clearPendingDestination: () => set({ pendingDestination: null }),
|
||||
|
||||
// Master startDirections - enters directions mode with destination pre-filled
|
||||
startDirections: (place) => {
|
||||
console.log("[TRACE-STORE] startDirections received place:", { lat: place?.lat, lon: place?.lon, name: place?.name })
|
||||
const { geoPermission, userLocation, clearRoute } = get()
|
||||
clearRoute()
|
||||
|
||||
const destination = {
|
||||
lat: place.lat,
|
||||
lon: place.lon,
|
||||
name: place.name,
|
||||
source: place.source,
|
||||
matchCode: place.matchCode,
|
||||
}
|
||||
|
||||
let origin = null
|
||||
if (geoPermission === "granted" && userLocation) {
|
||||
origin = {
|
||||
lat: userLocation.lat,
|
||||
lon: userLocation.lon,
|
||||
name: "Your location",
|
||||
source: "gps",
|
||||
}
|
||||
}
|
||||
|
||||
set({
|
||||
routeEnd: destination,
|
||||
routeStart: origin,
|
||||
directionsMode: true,
|
||||
activeDirectionsField: origin ? null : "origin",
|
||||
selectedPlace: null,
|
||||
})
|
||||
},
|
||||
|
||||
// ── Place detail ──
|
||||
selectedPlace: null, // { 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)
|
||||
selectedPlace: null,
|
||||
clickMarker: 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 }),
|
||||
setGpsOrigin: (val) => set({ gpsOrigin: val }),
|
||||
setPendingDestination: (place) => set({ pendingDestination: place }),
|
||||
clearPendingDestination: () => set({ pendingDestination: null }),
|
||||
|
||||
startDirections: (place) => {
|
||||
const { geoPermission, stops, addStop, clearStops } = get()
|
||||
if (geoPermission === 'granted') {
|
||||
clearStops()
|
||||
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
||||
set({ gpsOrigin: true, selectedPlace: null })
|
||||
} else if (stops.length > 0) {
|
||||
const origin = stops[0]
|
||||
clearStops()
|
||||
addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
|
||||
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
||||
set({ selectedPlace: null })
|
||||
} else {
|
||||
// GPS denied, no stops: set pendingDestination only; origin-picker will add both
|
||||
set({ pendingDestination: place, selectedPlace: null })
|
||||
}
|
||||
},
|
||||
|
||||
// ── UI state ──
|
||||
sheetState: 'half', // 'collapsed' | 'half' | 'full'
|
||||
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'
|
||||
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)
|
||||
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)
|
||||
localStorage.setItem("navi-theme-override", override)
|
||||
} else {
|
||||
localStorage.removeItem('navi-theme-override')
|
||||
localStorage.removeItem("navi-theme-override")
|
||||
}
|
||||
},
|
||||
|
||||
// ── Auth state ──
|
||||
auth: { authenticated: false, username: null, loaded: false },
|
||||
setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
|
||||
|
|
@ -125,9 +285,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 +298,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