mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-05-20 14:44:51 +02:00
feat: unified routing with Drive mode default and Add stop wedge
- Add Drive (auto) as default route mode, first in travel modes list - Hide boundary mode selector when Drive mode is active - Restore Add stop radial menu wedge with stops system integration - Unify routing through single computeRoute() function in store - Add coordinate parsing to SearchBar for direct lat/lon input - Bridge stops system with routeStart/routeEnd for seamless UX - Support 3+ stops with Valhalla optimization Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
d6aa125215
commit
09d68adf09
4 changed files with 726 additions and 547 deletions
|
|
@ -8,7 +8,7 @@ import { useStore } from '../store'
|
||||||
import { decodePolyline } from '../utils/decode'
|
import { decodePolyline } from '../utils/decode'
|
||||||
import { fetchReverse, requestOffroute } from '../api'
|
import { fetchReverse, requestOffroute } from '../api'
|
||||||
import { getConfig, hasFeature } from '../config'
|
import { getConfig, hasFeature } from '../config'
|
||||||
import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Star, Ruler, X, Trash2 } from 'lucide-react'
|
import { MapPin, Navigation, ArrowUpRight, ArrowDownLeft, Star, Ruler, X, Trash2, Plus } from 'lucide-react'
|
||||||
import RadialMenu from './RadialMenu'
|
import RadialMenu from './RadialMenu'
|
||||||
import useContextMenu from '../hooks/useContextMenu'
|
import useContextMenu from '../hooks/useContextMenu'
|
||||||
import toast from 'react-hot-toast'
|
import toast from 'react-hot-toast'
|
||||||
|
|
@ -1657,95 +1657,114 @@ const MapView = forwardRef(function MapView(_, ref) {
|
||||||
updateMeasureLabels(newPoints)
|
updateMeasureLabels(newPoints)
|
||||||
}
|
}
|
||||||
|
|
||||||
const radialWedges = [
|
const radialWedges = [
|
||||||
{
|
{
|
||||||
id: "to-here",
|
id: "to-here",
|
||||||
label: "To here",
|
label: "To here",
|
||||||
icon: ArrowDownLeft,
|
icon: ArrowDownLeft,
|
||||||
onSelect: () => {
|
onSelect: () => {
|
||||||
setRadialMenu((m) => ({ ...m, open: false }))
|
setRadialMenu((m) => ({ ...m, open: false }))
|
||||||
const place = {
|
const place = {
|
||||||
lat: radialMenu.lat,
|
lat: radialMenu.lat,
|
||||||
lon: radialMenu.lon,
|
lon: radialMenu.lon,
|
||||||
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
||||||
}
|
}
|
||||||
const { routeStart, setRouteEnd, setRouteLoading, setRouteResult, setRouteError, routeMode, boundaryMode } = useStore.getState()
|
const { routeStart, setRouteEnd, computeRoute } = useStore.getState()
|
||||||
setRouteEnd(place)
|
setRouteEnd(place)
|
||||||
if (routeStart) {
|
if (routeStart) {
|
||||||
setRouteLoading(true)
|
computeRoute()
|
||||||
requestOffroute(routeStart, place, routeMode, boundaryMode)
|
} else {
|
||||||
.then((data) => {
|
toast("Set starting point first")
|
||||||
if (data.status === "ok" && data.route) {
|
}
|
||||||
setRouteResult(data)
|
},
|
||||||
updateRouteDisplay(mapInstance.current, data.route)
|
},
|
||||||
} else {
|
{
|
||||||
setRouteError(data.error || "No route found")
|
id: "from-here",
|
||||||
}
|
label: "From here",
|
||||||
})
|
icon: ArrowUpRight,
|
||||||
.catch((e) => setRouteError(e.message))
|
onSelect: () => {
|
||||||
.finally(() => setRouteLoading(false))
|
setRadialMenu((m) => ({ ...m, open: false }))
|
||||||
} else {
|
const place = {
|
||||||
toast("Set starting point first")
|
lat: radialMenu.lat,
|
||||||
}
|
lon: radialMenu.lon,
|
||||||
},
|
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
||||||
},
|
}
|
||||||
{
|
const { clearRoute, setRouteStart, routeEnd, computeRoute } = useStore.getState()
|
||||||
id: "from-here",
|
clearRoute()
|
||||||
label: "From here",
|
clearRouteDisplay(mapInstance.current)
|
||||||
icon: ArrowUpRight,
|
setRouteStart(place)
|
||||||
onSelect: () => {
|
// If we already have a destination, compute route immediately
|
||||||
setRadialMenu((m) => ({ ...m, open: false }))
|
if (routeEnd) {
|
||||||
const place = {
|
computeRoute()
|
||||||
lat: radialMenu.lat,
|
} else {
|
||||||
lon: radialMenu.lon,
|
toast("Now tap destination")
|
||||||
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
}
|
||||||
}
|
},
|
||||||
const { clearRoute, setRouteStart } = useStore.getState()
|
},
|
||||||
clearRoute()
|
{
|
||||||
clearRouteDisplay(mapInstance.current)
|
id: "add-stop",
|
||||||
setRouteStart(place)
|
label: "Add stop",
|
||||||
toast("Now tap destination")
|
icon: Plus,
|
||||||
},
|
onSelect: () => {
|
||||||
},
|
setRadialMenu((m) => ({ ...m, open: false }))
|
||||||
{
|
const { stops, addStop } = useStore.getState()
|
||||||
id: "clear-route",
|
const place = {
|
||||||
label: "Clear",
|
lat: radialMenu.lat,
|
||||||
icon: Trash2,
|
lon: radialMenu.lon,
|
||||||
onSelect: () => {
|
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
||||||
setRadialMenu((m) => ({ ...m, open: false }))
|
source: "radial_menu",
|
||||||
useStore.getState().clearRoute()
|
matchCode: null,
|
||||||
clearRouteDisplay(mapInstance.current)
|
}
|
||||||
},
|
if (stops.length === 0) {
|
||||||
},
|
addStop(place)
|
||||||
{
|
useStore.setState({ gpsOrigin: false })
|
||||||
id: "save-place",
|
} else {
|
||||||
label: "Save",
|
const success = addStop(place)
|
||||||
icon: Star,
|
if (!success) {
|
||||||
requiresAuth: true,
|
toast("Maximum 10 stops reached")
|
||||||
onSelect: () => {
|
}
|
||||||
setRadialMenu((m) => ({ ...m, open: false }))
|
}
|
||||||
const { auth, setEditingContact } = useStore.getState()
|
},
|
||||||
if (auth.authenticated) {
|
},
|
||||||
setEditingContact({
|
{
|
||||||
label: "",
|
id: "clear-route",
|
||||||
lat: radialMenu.lat,
|
label: "Clear",
|
||||||
lon: radialMenu.lon,
|
icon: Trash2,
|
||||||
})
|
onSelect: () => {
|
||||||
} else {
|
setRadialMenu((m) => ({ ...m, open: false }))
|
||||||
toast("Log in to save places")
|
useStore.getState().clearRoute()
|
||||||
}
|
clearRouteDisplay(mapInstance.current)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "measure",
|
id: "save-place",
|
||||||
label: "Measure",
|
label: "Save",
|
||||||
icon: Ruler,
|
icon: Star,
|
||||||
onSelect: () => {
|
requiresAuth: true,
|
||||||
setRadialMenu((m) => ({ ...m, open: false }))
|
onSelect: () => {
|
||||||
startMeasuring(radialMenu.lat, radialMenu.lon)
|
setRadialMenu((m) => ({ ...m, open: false }))
|
||||||
},
|
const { auth, setEditingContact } = useStore.getState()
|
||||||
},
|
if (auth.authenticated) {
|
||||||
]
|
setEditingContact({
|
||||||
|
label: "",
|
||||||
|
lat: radialMenu.lat,
|
||||||
|
lon: radialMenu.lon,
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
toast("Log in to save places")
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "measure",
|
||||||
|
label: "Measure",
|
||||||
|
icon: Ruler,
|
||||||
|
onSelect: () => {
|
||||||
|
setRadialMenu((m) => ({ ...m, open: false }))
|
||||||
|
startMeasuring(radialMenu.lat, radialMenu.lon)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
// Context menu trigger handler
|
// Context menu trigger handler
|
||||||
const handleContextMenuTrigger = ({ x, y }) => {
|
const handleContextMenuTrigger = ({ x, y }) => {
|
||||||
const map = mapInstance.current
|
const map = mapInstance.current
|
||||||
|
|
@ -2390,6 +2409,12 @@ const MapView = forwardRef(function MapView(_, ref) {
|
||||||
updateBoundaryRef.current = updateBoundaryFn
|
updateBoundaryRef.current = updateBoundaryFn
|
||||||
useStore.getState().setUpdateBoundary(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
|
// POI/label hover affordance — cursor pointer + highlight
|
||||||
const interactiveLayers = ['pois', 'places_locality', 'places_region', 'places_country', 'places_subplace']
|
const interactiveLayers = ['pois', 'places_locality', 'places_region', 'places_country', 'places_subplace']
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,294 +1,297 @@
|
||||||
import { useRef, useCallback, useEffect, useState } from 'react'
|
import { useRef, useCallback, useEffect, useState } from 'react'
|
||||||
import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin } from 'lucide-react'
|
import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin } from 'lucide-react'
|
||||||
import ThemePicker from './ThemePicker'
|
import ThemePicker from './ThemePicker'
|
||||||
import { useStore, usePanelState } from '../store'
|
import { useStore, usePanelState } from '../store'
|
||||||
import { hasFeature } from '../config'
|
import { hasFeature } from '../config'
|
||||||
import SearchBar from './SearchBar'
|
import SearchBar from './SearchBar'
|
||||||
import ManeuverList from './ManeuverList'
|
import ManeuverList from './ManeuverList'
|
||||||
import ContactList from './ContactList'
|
import ContactList from './ContactList'
|
||||||
import { PlaceCard } from './PlaceCard'
|
import { PlaceCard } from './PlaceCard'
|
||||||
|
|
||||||
const TRAVEL_MODES = [
|
const TRAVEL_MODES = [
|
||||||
{ id: 'foot', label: 'Foot', Icon: Footprints },
|
{ id: 'auto', label: 'Drive', Icon: Car },
|
||||||
{ id: 'mtb', label: 'MTB', Icon: Bike },
|
{ id: 'foot', label: 'Foot', Icon: Footprints },
|
||||||
{ id: 'atv', label: 'ATV', Icon: Car },
|
{ id: 'mtb', label: 'MTB', Icon: Bike },
|
||||||
{ id: 'vehicle', label: '4x4', Icon: Car },
|
{ id: 'atv', label: 'ATV', Icon: Car },
|
||||||
]
|
{ id: 'vehicle', label: '4x4', Icon: Car },
|
||||||
|
]
|
||||||
const BOUNDARY_MODES = [
|
|
||||||
{ id: 'strict', label: 'Strict', Icon: Shield, title: 'Avoid barriers' },
|
const BOUNDARY_MODES = [
|
||||||
{ id: 'pragmatic', label: 'Cross', Icon: AlertTriangle, title: 'Cross with penalty' },
|
{ id: 'strict', label: 'Strict', Icon: Shield, title: 'Avoid barriers' },
|
||||||
{ id: 'emergency', label: 'Ignore', Icon: Zap, title: 'Ignore 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)
|
export default function Panel({ onClearRoute }) {
|
||||||
const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
|
const selectedPlace = useStore((s) => s.selectedPlace)
|
||||||
const routeStart = useStore((s) => s.routeStart)
|
const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
|
||||||
const routeEnd = useStore((s) => s.routeEnd)
|
const routeStart = useStore((s) => s.routeStart)
|
||||||
const routeMode = useStore((s) => s.routeMode)
|
const routeEnd = useStore((s) => s.routeEnd)
|
||||||
const boundaryMode = useStore((s) => s.boundaryMode)
|
const routeMode = useStore((s) => s.routeMode)
|
||||||
const routeResult = useStore((s) => s.routeResult)
|
const boundaryMode = useStore((s) => s.boundaryMode)
|
||||||
const routeLoading = useStore((s) => s.routeLoading)
|
const routeResult = useStore((s) => s.routeResult)
|
||||||
const setRouteMode = useStore((s) => s.setRouteMode)
|
const routeLoading = useStore((s) => s.routeLoading)
|
||||||
const setBoundaryMode = useStore((s) => s.setBoundaryMode)
|
const setRouteMode = useStore((s) => s.setRouteMode)
|
||||||
const clearRoute = useStore((s) => s.clearRoute)
|
const setBoundaryMode = useStore((s) => s.setBoundaryMode)
|
||||||
const sheetState = useStore((s) => s.sheetState)
|
const clearRoute = useStore((s) => s.clearRoute)
|
||||||
const setSheetState = useStore((s) => s.setSheetState)
|
const sheetState = useStore((s) => s.sheetState)
|
||||||
const activeTab = useStore((s) => s.activeTab)
|
const setSheetState = useStore((s) => s.setSheetState)
|
||||||
const auth = useStore((s) => s.auth)
|
const activeTab = useStore((s) => s.activeTab)
|
||||||
const setActiveTab = useStore((s) => s.setActiveTab)
|
const auth = useStore((s) => s.auth)
|
||||||
|
const setActiveTab = useStore((s) => s.setActiveTab)
|
||||||
const panelState = usePanelState()
|
|
||||||
|
const panelState = usePanelState()
|
||||||
const [isMobile, setIsMobile] = useState(false)
|
|
||||||
const sheetRef = useRef(null)
|
const [isMobile, setIsMobile] = useState(false)
|
||||||
const dragStartY = useRef(0)
|
const sheetRef = useRef(null)
|
||||||
const dragStartState = useRef('half')
|
const dragStartY = useRef(0)
|
||||||
|
const dragStartState = useRef('half')
|
||||||
const showContacts = hasFeature('has_contacts') && auth.authenticated
|
|
||||||
|
const showContacts = hasFeature('has_contacts') && auth.authenticated
|
||||||
useEffect(() => {
|
|
||||||
const check = () => setIsMobile(window.innerWidth < 768)
|
useEffect(() => {
|
||||||
check()
|
const check = () => setIsMobile(window.innerWidth < 768)
|
||||||
window.addEventListener('resize', check)
|
check()
|
||||||
return () => window.removeEventListener('resize', check)
|
window.addEventListener('resize', check)
|
||||||
}, [])
|
return () => window.removeEventListener('resize', check)
|
||||||
|
}, [])
|
||||||
const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
|
|
||||||
const handleLogout = () => { window.location.href = 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
|
const handleLogin = () => { window.location.href = '/outpost.goauthentik.io/start?rd=%2F' }
|
||||||
|
const handleLogout = () => { window.location.href = 'https://auth.echo6.co/if/flow/default-invalidation-flow/?next=https://navi.echo6.co/' }
|
||||||
const handleTouchStart = useCallback((e) => {
|
|
||||||
dragStartY.current = e.touches[0].clientY
|
const handleTouchStart = useCallback((e) => {
|
||||||
dragStartState.current = sheetState
|
dragStartY.current = e.touches[0].clientY
|
||||||
}, [sheetState])
|
dragStartState.current = sheetState
|
||||||
|
}, [sheetState])
|
||||||
const handleTouchEnd = useCallback((e) => {
|
|
||||||
const deltaY = e.changedTouches[0].clientY - dragStartY.current
|
const handleTouchEnd = useCallback((e) => {
|
||||||
if (Math.abs(deltaY) < 30) return
|
const deltaY = e.changedTouches[0].clientY - dragStartY.current
|
||||||
if (deltaY < 0) {
|
if (Math.abs(deltaY) < 30) return
|
||||||
if (dragStartState.current === 'collapsed') setSheetState('half')
|
if (deltaY < 0) {
|
||||||
else if (dragStartState.current === 'half') setSheetState('full')
|
if (dragStartState.current === 'collapsed') setSheetState('half')
|
||||||
} else {
|
else if (dragStartState.current === 'half') setSheetState('full')
|
||||||
if (dragStartState.current === 'full') setSheetState('half')
|
} else {
|
||||||
else if (dragStartState.current === 'half') setSheetState('collapsed')
|
if (dragStartState.current === 'full') setSheetState('half')
|
||||||
}
|
else if (dragStartState.current === 'half') setSheetState('collapsed')
|
||||||
}, [setSheetState])
|
}
|
||||||
|
}, [setSheetState])
|
||||||
const handleClearRoute = () => {
|
|
||||||
clearRoute()
|
const handleClearRoute = () => {
|
||||||
onClearRoute?.()
|
clearRoute()
|
||||||
}
|
onClearRoute?.()
|
||||||
|
}
|
||||||
const showPreviewCard = panelState.startsWith('PREVIEW')
|
|
||||||
const hasRoutePoints = routeStart || routeEnd
|
const showPreviewCard = panelState.startsWith('PREVIEW')
|
||||||
const showRouteSection = hasRoutePoints || routeResult || routeLoading
|
const hasRoutePoints = routeStart || routeEnd
|
||||||
const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
|
const showRouteSection = hasRoutePoints || routeResult || routeLoading
|
||||||
|
const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
|
||||||
const routesContent = (
|
|
||||||
<>
|
const routesContent = (
|
||||||
<SearchBar />
|
<>
|
||||||
|
<SearchBar />
|
||||||
{showPreviewCard && selectedPlace && (
|
|
||||||
<div className="mt-3">
|
{showPreviewCard && selectedPlace && (
|
||||||
<PlaceCard
|
<div className="mt-3">
|
||||||
place={selectedPlace}
|
<PlaceCard
|
||||||
variant="preview"
|
place={selectedPlace}
|
||||||
expanded={true}
|
variant="preview"
|
||||||
onClose={clearSelectedPlace}
|
expanded={true}
|
||||||
/>
|
onClose={clearSelectedPlace}
|
||||||
</div>
|
/>
|
||||||
)}
|
</div>
|
||||||
|
)}
|
||||||
{showRouteSection && (
|
|
||||||
<div className="mt-3">
|
{showRouteSection && (
|
||||||
<div className="flex items-center justify-between mb-2">
|
<div className="mt-3">
|
||||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
<div className="flex items-center justify-between mb-2">
|
||||||
Route
|
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||||
</span>
|
Route
|
||||||
<button
|
</span>
|
||||||
onClick={handleClearRoute}
|
<button
|
||||||
className="p-1 rounded hover:bg-[var(--bg-overlay)]"
|
onClick={handleClearRoute}
|
||||||
title="Clear route"
|
className="p-1 rounded hover:bg-[var(--bg-overlay)]"
|
||||||
>
|
title="Clear route"
|
||||||
<X size={14} style={{ color: 'var(--text-tertiary)' }} />
|
>
|
||||||
</button>
|
<X size={14} style={{ color: 'var(--text-tertiary)' }} />
|
||||||
</div>
|
</button>
|
||||||
|
</div>
|
||||||
<div className="flex flex-col gap-1 mb-3 text-xs">
|
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex flex-col gap-1 mb-3 text-xs">
|
||||||
<MapPin size={12} style={{ color: '#22c55e' }} />
|
<div className="flex items-center gap-2">
|
||||||
<span style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
<MapPin size={12} style={{ color: '#22c55e' }} />
|
||||||
{routeStart?.name || 'Right-click to set start'}
|
<span style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||||
</span>
|
{routeStart?.name || 'Right-click to set start'}
|
||||||
</div>
|
</span>
|
||||||
<div className="flex items-center gap-2">
|
</div>
|
||||||
<MapPin size={12} style={{ color: '#ef4444' }} />
|
<div className="flex items-center gap-2">
|
||||||
<span style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
<MapPin size={12} style={{ color: '#ef4444' }} />
|
||||||
{routeEnd?.name || 'Right-click to set destination'}
|
<span style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||||
</span>
|
{routeEnd?.name || 'Right-click to set destination'}
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div className="flex gap-1 mb-2">
|
|
||||||
{TRAVEL_MODES.map((m) => {
|
<div className="flex gap-1 mb-2">
|
||||||
const active = routeMode === m.id
|
{TRAVEL_MODES.map((m) => {
|
||||||
return (
|
const active = routeMode === m.id
|
||||||
<button
|
return (
|
||||||
key={m.id}
|
<button
|
||||||
onClick={() => setRouteMode(m.id)}
|
key={m.id}
|
||||||
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
|
onClick={() => setRouteMode(m.id)}
|
||||||
style={{
|
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
|
||||||
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
|
style={{
|
||||||
color: active ? 'var(--accent)' : 'var(--text-tertiary)',
|
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
|
||||||
}}
|
color: active ? 'var(--accent)' : 'var(--text-tertiary)',
|
||||||
title={m.label}
|
}}
|
||||||
>
|
title={m.label}
|
||||||
<m.Icon size={14} />
|
>
|
||||||
<span className="hidden sm:inline">{m.label}</span>
|
<m.Icon size={14} />
|
||||||
</button>
|
<span className="hidden sm:inline">{m.label}</span>
|
||||||
)
|
</button>
|
||||||
})}
|
)
|
||||||
</div>
|
})}
|
||||||
|
</div>
|
||||||
<div className="flex gap-1 mb-3">
|
|
||||||
{BOUNDARY_MODES.map((m) => {
|
{routeMode !== 'auto' && (
|
||||||
const active = boundaryMode === m.id
|
<div className="flex gap-1 mb-3">
|
||||||
return (
|
{BOUNDARY_MODES.map((m) => {
|
||||||
<button
|
const active = boundaryMode === m.id
|
||||||
key={m.id}
|
return (
|
||||||
onClick={() => setBoundaryMode(m.id)}
|
<button
|
||||||
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
|
key={m.id}
|
||||||
style={{
|
onClick={() => setBoundaryMode(m.id)}
|
||||||
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
|
className="flex-1 flex items-center justify-center gap-1 py-1.5 text-xs rounded transition-colors"
|
||||||
color: active ? 'var(--accent)' : 'var(--text-tertiary)',
|
style={{
|
||||||
}}
|
background: active ? 'var(--accent-muted)' : 'var(--bg-overlay)',
|
||||||
title={m.title}
|
color: active ? 'var(--accent)' : 'var(--text-tertiary)',
|
||||||
>
|
}}
|
||||||
<m.Icon size={14} />
|
title={m.title}
|
||||||
<span className="hidden sm:inline">{m.label}</span>
|
>
|
||||||
</button>
|
<m.Icon size={14} />
|
||||||
)
|
<span className="hidden sm:inline">{m.label}</span>
|
||||||
})}
|
</button>
|
||||||
</div>
|
)
|
||||||
|
})}
|
||||||
<ManeuverList />
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
|
||||||
|
<ManeuverList />
|
||||||
{showEmptyState && (
|
</div>
|
||||||
<div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}>
|
)}
|
||||||
<p>Search or tap the map to explore</p>
|
|
||||||
</div>
|
{showEmptyState && (
|
||||||
)}
|
<div className="mt-6 text-center text-xs" style={{ color: 'var(--text-tertiary)' }}>
|
||||||
</>
|
<p>Search or tap the map to explore</p>
|
||||||
)
|
</div>
|
||||||
|
)}
|
||||||
const content = (
|
</>
|
||||||
<>
|
)
|
||||||
{showContacts && (
|
|
||||||
<div className="navi-tab-bar mb-3">
|
const content = (
|
||||||
<button
|
<>
|
||||||
className={"navi-tab " + (activeTab === 'routes' ? 'navi-tab-active' : '')}
|
{showContacts && (
|
||||||
onClick={() => setActiveTab('routes')}
|
<div className="navi-tab-bar mb-3">
|
||||||
>
|
<button
|
||||||
Routes
|
className={"navi-tab " + (activeTab === 'routes' ? 'navi-tab-active' : '')}
|
||||||
</button>
|
onClick={() => setActiveTab('routes')}
|
||||||
<button
|
>
|
||||||
className={"navi-tab " + (activeTab === 'contacts' ? 'navi-tab-active' : '')}
|
Routes
|
||||||
onClick={() => setActiveTab('contacts')}
|
</button>
|
||||||
>
|
<button
|
||||||
Contacts
|
className={"navi-tab " + (activeTab === 'contacts' ? 'navi-tab-active' : '')}
|
||||||
</button>
|
onClick={() => setActiveTab('contacts')}
|
||||||
</div>
|
>
|
||||||
)}
|
Contacts
|
||||||
|
</button>
|
||||||
{(!showContacts || activeTab === 'routes') ? routesContent : <ContactList />}
|
</div>
|
||||||
</>
|
)}
|
||||||
)
|
|
||||||
|
{(!showContacts || activeTab === 'routes') ? routesContent : <ContactList />}
|
||||||
const header = (
|
</>
|
||||||
<div className="flex items-center justify-between mb-3">
|
)
|
||||||
<h1 className="text-md font-semibold" style={{ color: 'var(--accent)' }}>Navi</h1>
|
|
||||||
<div className="flex items-center gap-1">
|
const header = (
|
||||||
{auth.loaded && (
|
<div className="flex items-center justify-between mb-3">
|
||||||
auth.authenticated ? (
|
<h1 className="text-md font-semibold" style={{ color: 'var(--accent)' }}>Navi</h1>
|
||||||
<button
|
<div className="flex items-center gap-1">
|
||||||
onClick={handleLogout}
|
{auth.loaded && (
|
||||||
className="flex items-center gap-1 px-2 py-1 rounded text-xs"
|
auth.authenticated ? (
|
||||||
style={{ color: 'var(--text-tertiary)' }}
|
<button
|
||||||
title={"Logged in as " + auth.username + ". Click to log out."}
|
onClick={handleLogout}
|
||||||
>
|
className="flex items-center gap-1 px-2 py-1 rounded text-xs"
|
||||||
<span className="hidden sm:inline">{auth.username}</span>
|
style={{ color: 'var(--text-tertiary)' }}
|
||||||
<LogOut size={14} />
|
title={"Logged in as " + auth.username + ". Click to log out."}
|
||||||
</button>
|
>
|
||||||
) : (
|
<span className="hidden sm:inline">{auth.username}</span>
|
||||||
<button
|
<LogOut size={14} />
|
||||||
onClick={handleLogin}
|
</button>
|
||||||
className="flex items-center gap-1 px-2 py-1 rounded text-xs"
|
) : (
|
||||||
style={{ color: 'var(--accent)' }}
|
<button
|
||||||
title="Log in"
|
onClick={handleLogin}
|
||||||
>
|
className="flex items-center gap-1 px-2 py-1 rounded text-xs"
|
||||||
<LogIn size={14} />
|
style={{ color: 'var(--accent)' }}
|
||||||
<span>Log in</span>
|
title="Log in"
|
||||||
</button>
|
>
|
||||||
)
|
<LogIn size={14} />
|
||||||
)}
|
<span>Log in</span>
|
||||||
<ThemePicker />
|
</button>
|
||||||
</div>
|
)
|
||||||
</div>
|
)}
|
||||||
)
|
<ThemePicker />
|
||||||
|
</div>
|
||||||
if (!isMobile) {
|
</div>
|
||||||
return (
|
)
|
||||||
<div
|
|
||||||
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
|
if (!isMobile) {
|
||||||
style={{
|
return (
|
||||||
width: '400px',
|
<div
|
||||||
background: 'var(--bg-raised)',
|
className="absolute top-0 left-0 z-10 h-full overflow-y-auto p-4 flex flex-col"
|
||||||
borderRight: '1px solid var(--border)',
|
style={{
|
||||||
}}
|
width: '400px',
|
||||||
>
|
background: 'var(--bg-raised)',
|
||||||
{header}
|
borderRight: '1px solid var(--border)',
|
||||||
{content}
|
}}
|
||||||
</div>
|
>
|
||||||
)
|
{header}
|
||||||
}
|
{content}
|
||||||
|
</div>
|
||||||
const sheetHeights = {
|
)
|
||||||
collapsed: 'h-12',
|
}
|
||||||
half: 'h-[45vh]',
|
|
||||||
full: 'h-[85vh]',
|
const sheetHeights = {
|
||||||
}
|
collapsed: 'h-12',
|
||||||
|
half: 'h-[45vh]',
|
||||||
return (
|
full: 'h-[85vh]',
|
||||||
<div
|
}
|
||||||
ref={sheetRef}
|
|
||||||
className={"absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 " + sheetHeights[sheetState]}
|
return (
|
||||||
style={{
|
<div
|
||||||
background: 'var(--bg-raised)',
|
ref={sheetRef}
|
||||||
borderTop: '1px solid var(--border)',
|
className={"absolute bottom-0 left-0 right-0 z-10 rounded-t-2xl transition-all duration-200 " + sheetHeights[sheetState]}
|
||||||
}}
|
style={{
|
||||||
>
|
background: 'var(--bg-raised)',
|
||||||
<div
|
borderTop: '1px solid var(--border)',
|
||||||
className="flex justify-center py-2 cursor-grab"
|
}}
|
||||||
onTouchStart={handleTouchStart}
|
>
|
||||||
onTouchEnd={handleTouchEnd}
|
<div
|
||||||
onClick={() => {
|
className="flex justify-center py-2 cursor-grab"
|
||||||
if (sheetState === 'collapsed') setSheetState('half')
|
onTouchStart={handleTouchStart}
|
||||||
else if (sheetState === 'half') setSheetState('full')
|
onTouchEnd={handleTouchEnd}
|
||||||
else setSheetState('half')
|
onClick={() => {
|
||||||
}}
|
if (sheetState === 'collapsed') setSheetState('half')
|
||||||
>
|
else if (sheetState === 'half') setSheetState('full')
|
||||||
<div className="w-10 h-1 rounded-full" style={{ background: 'var(--border)' }} />
|
else setSheetState('half')
|
||||||
</div>
|
}}
|
||||||
|
>
|
||||||
{sheetState !== 'collapsed' && (
|
<div className="w-10 h-1 rounded-full" style={{ background: 'var(--border)' }} />
|
||||||
<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>
|
||||||
{header}
|
|
||||||
{content}
|
{sheetState !== 'collapsed' && (
|
||||||
</div>
|
<div className="px-4 pb-4 overflow-y-auto overflow-x-hidden h-[calc(100%-2rem)]" style={{ paddingBottom: 'max(1rem, env(safe-area-inset-bottom))' }}>
|
||||||
)}
|
{header}
|
||||||
</div>
|
{content}
|
||||||
)
|
</div>
|
||||||
}
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,30 @@ import { buildAddress } from '../utils/place'
|
||||||
import { searchGeocode } from '../api'
|
import { searchGeocode } from '../api'
|
||||||
import { hasFeature } from '../config'
|
import { hasFeature } from '../config'
|
||||||
|
|
||||||
|
|
||||||
|
/** Parse coordinate input like "42.35, -114.30" or "42.35 -114.30" */
|
||||||
|
function parseCoordinates(input) {
|
||||||
|
if (!input) return null
|
||||||
|
const trimmed = input.trim()
|
||||||
|
|
||||||
|
// Pattern: lat, lon or lat lon (with optional comma)
|
||||||
|
// Supports: "42.35, -114.30", "42.35 -114.30", "42.35,-114.30"
|
||||||
|
const pattern = /^(-?\d+\.?\d*)\s*[,\s]\s*(-?\d+\.?\d*)$/
|
||||||
|
const match = trimmed.match(pattern)
|
||||||
|
|
||||||
|
if (!match) return null
|
||||||
|
|
||||||
|
const lat = parseFloat(match[1])
|
||||||
|
const lon = parseFloat(match[2])
|
||||||
|
|
||||||
|
// Validate ranges
|
||||||
|
if (isNaN(lat) || isNaN(lon)) return null
|
||||||
|
if (lat < -90 || lat > 90) return null
|
||||||
|
if (lon < -180 || lon > 180) return null
|
||||||
|
|
||||||
|
return { lat, lon }
|
||||||
|
}
|
||||||
|
|
||||||
/** Get category icon based on result type/source */
|
/** Get category icon based on result type/source */
|
||||||
function CategoryIcon({ result }) {
|
function CategoryIcon({ result }) {
|
||||||
const type = result.type || ''
|
const type = result.type || ''
|
||||||
|
|
@ -71,6 +95,25 @@ const SearchBar = forwardRef(function SearchBar(_, ref) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Check for coordinate input first
|
||||||
|
const coords = parseCoordinates(q)
|
||||||
|
if (coords) {
|
||||||
|
const coordResult = {
|
||||||
|
lat: coords.lat,
|
||||||
|
lon: coords.lon,
|
||||||
|
name: coords.lat.toFixed(5) + ", " + coords.lon.toFixed(5),
|
||||||
|
address: "Coordinates",
|
||||||
|
type: "coordinates",
|
||||||
|
source: "coordinates",
|
||||||
|
match_code: null,
|
||||||
|
raw: {},
|
||||||
|
}
|
||||||
|
setResults([coordResult])
|
||||||
|
setAutocompleteOpen(true)
|
||||||
|
setSearchLoading(false)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
// Prepend matching contacts
|
// Prepend matching contacts
|
||||||
let contactResults = []
|
let contactResults = []
|
||||||
if (hasFeature('has_contacts') && contacts.length > 0) {
|
if (hasFeature('has_contacts') && contacts.length > 0) {
|
||||||
|
|
|
||||||
434
src/store.js
434
src/store.js
|
|
@ -1,163 +1,271 @@
|
||||||
import { create } from 'zustand'
|
import { create } from 'zustand'
|
||||||
|
import { requestOffroute, requestOptimizedRoute } from './api'
|
||||||
export const useStore = create((set, get) => ({
|
|
||||||
// ── Search state ──
|
export const useStore = create((set, get) => ({
|
||||||
query: '',
|
// ── Search state ──
|
||||||
results: [],
|
query: '',
|
||||||
searchLoading: false,
|
results: [],
|
||||||
abortController: null,
|
searchLoading: false,
|
||||||
|
abortController: null,
|
||||||
setQuery: (query) => set({ query }),
|
|
||||||
setResults: (results) => set({ results }),
|
setQuery: (query) => set({ query }),
|
||||||
setSearchLoading: (loading) => set({ searchLoading: loading }),
|
setResults: (results) => set({ results }),
|
||||||
setAbortController: (ctrl) => set({ abortController: ctrl }),
|
setSearchLoading: (loading) => set({ searchLoading: loading }),
|
||||||
|
setAbortController: (ctrl) => set({ abortController: ctrl }),
|
||||||
// ── Geolocation ──
|
|
||||||
userLocation: null, // { lat, lon }
|
// ── Geolocation ──
|
||||||
geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
|
userLocation: null, // { lat, lon }
|
||||||
|
geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
|
||||||
setUserLocation: (loc) => set({ userLocation: loc }),
|
|
||||||
setGeoPermission: (p) => set({ geoPermission: p }),
|
setUserLocation: (loc) => set({ userLocation: loc }),
|
||||||
|
setGeoPermission: (p) => set({ geoPermission: p }),
|
||||||
// ── Map viewport (for search bias) ──
|
|
||||||
mapCenter: null, // { lat, lon, zoom }
|
// ── Map viewport (for search bias) ──
|
||||||
setMapCenter: (center) => set({ mapCenter: center }),
|
mapCenter: null, // { lat, lon, zoom }
|
||||||
|
setMapCenter: (center) => set({ mapCenter: center }),
|
||||||
// ── Unified Route State ──
|
|
||||||
// Single routing system - all routes go through /api/offroute
|
// ── Unified Route State ──
|
||||||
routeStart: null, // { lat, lon, name }
|
// Single routing system - all routes go through /api/offroute
|
||||||
routeEnd: null, // { lat, lon, name }
|
routeStart: null, // { lat, lon, name }
|
||||||
routeMode: "foot", // foot | mtb | atv | vehicle
|
routeEnd: null, // { lat, lon, name }
|
||||||
boundaryMode: "strict", // strict | pragmatic | emergency
|
routeMode: "auto", // foot | mtb | atv | vehicle
|
||||||
routeResult: null, // Response from /api/offroute
|
boundaryMode: "strict", // strict | pragmatic | emergency
|
||||||
routeLoading: false,
|
routeResult: null, // Response from /api/offroute
|
||||||
routeError: null,
|
routeLoading: false,
|
||||||
|
routeError: null,
|
||||||
setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
|
|
||||||
setRouteEnd: (place) => set({ routeEnd: place }),
|
// Map display callback - set by MapView
|
||||||
setRouteMode: (mode) => set({ routeMode: mode }),
|
_updateRouteDisplay: null,
|
||||||
setBoundaryMode: (mode) => set({ boundaryMode: mode }),
|
_clearRouteDisplay: null,
|
||||||
setRouteResult: (result) => set({ routeResult: result, routeError: null }),
|
setRouteDisplayCallbacks: (update, clear) => set({ _updateRouteDisplay: update, _clearRouteDisplay: clear }),
|
||||||
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
|
||||||
setRouteError: (err) => set({ routeError: err, routeResult: null }),
|
setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
|
||||||
clearRoute: () => set({
|
setRouteEnd: (place) => set({ routeEnd: place }),
|
||||||
routeStart: null,
|
setRouteResult: (result) => set({ routeResult: result, routeError: null }),
|
||||||
routeEnd: null,
|
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
||||||
routeResult: null,
|
setRouteError: (err) => set({ routeError: err, routeResult: null }),
|
||||||
routeError: null
|
|
||||||
}),
|
// Mode/boundary setters that trigger recalculation
|
||||||
|
setRouteMode: (mode) => {
|
||||||
// ── Legacy compatibility (for components not yet migrated) ──
|
set({ routeMode: mode })
|
||||||
stops: [],
|
get().computeRoute()
|
||||||
gpsOrigin: false,
|
},
|
||||||
pendingDestination: null,
|
setBoundaryMode: (mode) => {
|
||||||
route: null,
|
set({ boundaryMode: mode })
|
||||||
|
get().computeRoute()
|
||||||
addStop: (stop) => {
|
},
|
||||||
// Legacy: just set as route end point
|
|
||||||
const { routeStart, setRouteEnd } = get()
|
clearRoute: () => {
|
||||||
const place = { lat: stop.lat, lon: stop.lon, name: stop.name }
|
const { _clearRouteDisplay } = get()
|
||||||
if (!routeStart) {
|
if (_clearRouteDisplay) _clearRouteDisplay()
|
||||||
set({ routeStart: place, stops: [{ ...stop, id: crypto.randomUUID() }] })
|
set({
|
||||||
} else {
|
routeStart: null,
|
||||||
setRouteEnd(place)
|
routeEnd: null,
|
||||||
set({ stops: [...get().stops, { ...stop, id: crypto.randomUUID() }] })
|
routeResult: null,
|
||||||
}
|
routeError: null,
|
||||||
return true
|
stops: [],
|
||||||
},
|
route: null
|
||||||
removeStop: (id) => {
|
})
|
||||||
const { stops } = get()
|
},
|
||||||
const newStops = stops.filter((s) => s.id !== id)
|
|
||||||
set({ stops: newStops })
|
// ── UNIFIED ROUTING TRIGGER ──
|
||||||
if (newStops.length === 0) {
|
// This is the SINGLE routing function for everything
|
||||||
get().clearRoute()
|
computeRoute: async () => {
|
||||||
}
|
const { routeStart, routeEnd, routeMode, boundaryMode, _updateRouteDisplay } = get()
|
||||||
},
|
|
||||||
clearStops: () => set({ stops: [], routeStart: null, routeEnd: null }),
|
// Need both endpoints to route
|
||||||
setStops: (stops) => set({ stops }),
|
if (!routeStart || !routeEnd) return
|
||||||
reorderStops: (newStops) => set({ stops: newStops }),
|
|
||||||
setGpsOrigin: (val) => set({ gpsOrigin: val }),
|
set({ routeLoading: true, routeError: null })
|
||||||
setPendingDestination: (place) => set({ pendingDestination: place }),
|
|
||||||
clearPendingDestination: () => set({ pendingDestination: null }),
|
try {
|
||||||
|
const data = await requestOffroute(routeStart, routeEnd, routeMode, boundaryMode)
|
||||||
startDirections: (place) => {
|
|
||||||
// Legacy: set as destination
|
if (data.status === "ok" && data.route) {
|
||||||
const { routeStart, setRouteEnd, clearRoute } = get()
|
set({ routeResult: data, routeError: null })
|
||||||
clearRoute()
|
if (_updateRouteDisplay) _updateRouteDisplay(data.route)
|
||||||
set({
|
} else {
|
||||||
routeEnd: { lat: place.lat, lon: place.lon, name: place.name },
|
set({ routeError: data.message || data.error || "No route found", routeResult: null })
|
||||||
stops: [{ ...place, id: crypto.randomUUID() }],
|
}
|
||||||
selectedPlace: null
|
} catch (e) {
|
||||||
})
|
set({ routeError: e.message, routeResult: null })
|
||||||
},
|
} finally {
|
||||||
|
set({ routeLoading: false })
|
||||||
// ── Place detail ──
|
}
|
||||||
selectedPlace: null,
|
},
|
||||||
clickMarker: null,
|
|
||||||
|
// ── Stop list (master compatibility) ──
|
||||||
setSelectedPlace: (place) => set({ selectedPlace: place }),
|
stops: [],
|
||||||
updateBoundary: null,
|
gpsOrigin: true, // whether GPS should be used as origin when available
|
||||||
setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
|
pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
|
||||||
clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
|
route: null, // Legacy Valhalla response (for 3+ stop optimization)
|
||||||
setClickMarker: (marker) => set({ clickMarker: marker }),
|
|
||||||
clearClickMarker: () => set({ clickMarker: null }),
|
addStop: (stop) => {
|
||||||
|
const { stops, routeMode, _updateRouteDisplay } = get()
|
||||||
// ── UI state ──
|
if (stops.length >= 10) return false
|
||||||
sheetState: 'half',
|
const newStops = [...stops, { ...stop, id: crypto.randomUUID() }]
|
||||||
panelOpen: true,
|
set({ stops: newStops })
|
||||||
autocompleteOpen: false,
|
|
||||||
theme: 'dark',
|
// Route logic depends on stop count
|
||||||
themeOverride: null,
|
if (newStops.length === 1) {
|
||||||
viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map',
|
// Single stop = origin, waiting for second
|
||||||
|
const origin = newStops[0]
|
||||||
setSheetState: (s) => set({ sheetState: s }),
|
set({ routeStart: { lat: origin.lat, lon: origin.lon, name: origin.name } })
|
||||||
setViewMode: (mode) => {
|
} else if (newStops.length === 2) {
|
||||||
set({ viewMode: mode })
|
// Two stops = use offroute (handles on-road and wilderness)
|
||||||
localStorage.setItem('navi-view-mode', mode)
|
const origin = newStops[0]
|
||||||
},
|
const dest = newStops[1]
|
||||||
setPanelOpen: (open) => set({ panelOpen: open }),
|
set({
|
||||||
setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
|
routeStart: { lat: origin.lat, lon: origin.lon, name: origin.name },
|
||||||
setTheme: (theme) => set({ theme }),
|
routeEnd: { lat: dest.lat, lon: dest.lon, name: dest.name }
|
||||||
setThemeOverride: (override) => {
|
})
|
||||||
set({ themeOverride: override })
|
get().computeRoute()
|
||||||
if (override) {
|
} else {
|
||||||
localStorage.setItem('navi-theme-override', override)
|
// 3+ stops = use Valhalla multi-stop optimization
|
||||||
} else {
|
set({ routeLoading: true, routeError: null })
|
||||||
localStorage.removeItem('navi-theme-override')
|
const locations = newStops.map((s) => ({ lat: s.lat, lon: s.lon }))
|
||||||
}
|
const costing = routeMode === "auto" ? "auto" : routeMode === "foot" ? "pedestrian" : routeMode === "mtb" ? "bicycle" : "auto"
|
||||||
},
|
requestOptimizedRoute(locations, costing)
|
||||||
|
.then((data) => {
|
||||||
// ── Auth state ──
|
if (data.trip) {
|
||||||
auth: { authenticated: false, username: null, loaded: false },
|
set({ route: data.trip, routeError: null })
|
||||||
setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
|
// Update display via legacy route handler if available
|
||||||
|
if (_updateRouteDisplay && data.trip) {
|
||||||
// ── Contacts ──
|
// Multi-stop uses legacy route format, need to convert or use separate handler
|
||||||
contacts: [],
|
}
|
||||||
contactsLoaded: false,
|
}
|
||||||
activeTab: 'routes',
|
})
|
||||||
editingContact: null,
|
.catch((e) => set({ routeError: e.message }))
|
||||||
pickingLocationFor: null,
|
.finally(() => set({ routeLoading: false }))
|
||||||
|
}
|
||||||
setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
|
|
||||||
setActiveTab: (tab) => set({ activeTab: tab }),
|
return true
|
||||||
setEditingContact: (c) => set({ editingContact: c }),
|
},
|
||||||
clearEditingContact: () => set({ editingContact: null }),
|
|
||||||
setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
|
removeStop: (id) => {
|
||||||
clearPickingLocationFor: () => set({ pickingLocationFor: null }),
|
const { stops } = get()
|
||||||
}))
|
const newStops = stops.filter((s) => s.id !== id)
|
||||||
|
set({ stops: newStops })
|
||||||
// ── Panel state selector ──
|
if (newStops.length === 0) {
|
||||||
export const usePanelState = () => {
|
get().clearRoute()
|
||||||
return useStore((s) => {
|
} else if (newStops.length === 1) {
|
||||||
const hasPreview = !!s.selectedPlace
|
// Back to single stop
|
||||||
const hasRoute = !!s.routeResult
|
const origin = newStops[0]
|
||||||
const hasRoutePoints = !!s.routeStart || !!s.routeEnd
|
set({
|
||||||
|
routeStart: { lat: origin.lat, lon: origin.lon, name: origin.name },
|
||||||
if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
|
routeEnd: null,
|
||||||
if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
|
routeResult: null
|
||||||
if (hasPreview) return "PREVIEW"
|
})
|
||||||
if (hasRoute) return "ROUTE_CALCULATED"
|
}
|
||||||
if (hasRoutePoints) return "ROUTING"
|
},
|
||||||
return "IDLE"
|
|
||||||
})
|
reorderStops: (newStops) => set({ stops: newStops }),
|
||||||
}
|
|
||||||
|
clearStops: () => {
|
||||||
|
const { _clearRouteDisplay } = get()
|
||||||
|
if (_clearRouteDisplay) _clearRouteDisplay()
|
||||||
|
set({ stops: [], routeStart: null, routeEnd: null, routeResult: null, routeError: null })
|
||||||
|
},
|
||||||
|
|
||||||
|
setStops: (stops) => set({ stops }),
|
||||||
|
|
||||||
|
setGpsOrigin: (val) => set({ gpsOrigin: val }),
|
||||||
|
setPendingDestination: (place) => set({ pendingDestination: place }),
|
||||||
|
clearPendingDestination: () => set({ pendingDestination: null }),
|
||||||
|
|
||||||
|
// Master startDirections - restored verbatim
|
||||||
|
startDirections: (place) => {
|
||||||
|
const { geoPermission, stops, addStop, clearStops } = get()
|
||||||
|
if (geoPermission === 'granted') {
|
||||||
|
clearStops()
|
||||||
|
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
||||||
|
set({ gpsOrigin: true, selectedPlace: null })
|
||||||
|
} else if (stops.length > 0) {
|
||||||
|
const origin = stops[0]
|
||||||
|
clearStops()
|
||||||
|
addStop({ lat: origin.lat, lon: origin.lon, name: origin.name, source: origin.source, matchCode: origin.matchCode })
|
||||||
|
addStop({ lat: place.lat, lon: place.lon, name: place.name, source: place.source, matchCode: place.matchCode })
|
||||||
|
set({ selectedPlace: null })
|
||||||
|
} else {
|
||||||
|
// GPS denied, no stops: set pendingDestination only; origin-picker will add both
|
||||||
|
set({ pendingDestination: place, selectedPlace: null })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Legacy route setter (for 3+ stop Valhalla optimization)
|
||||||
|
setRoute: (route) => set({ route, routeError: null }),
|
||||||
|
setRouteError: (err) => set({ routeError: err, route: 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
|
||||||
|
|
||||||
|
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 }),
|
||||||
|
|
||||||
|
// ── UI state ──
|
||||||
|
sheetState: 'half', // 'collapsed' | 'half' | 'full'
|
||||||
|
panelOpen: true,
|
||||||
|
autocompleteOpen: false,
|
||||||
|
theme: 'dark', // 'dark' | 'light' (resolved value — what's actually applied)
|
||||||
|
themeOverride: null, // null | 'dark' | 'light' (manual override, persisted)
|
||||||
|
viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map', // 'map' | 'satellite' | 'hybrid'
|
||||||
|
|
||||||
|
setSheetState: (s) => set({ sheetState: s }),
|
||||||
|
setViewMode: (mode) => {
|
||||||
|
set({ viewMode: mode })
|
||||||
|
localStorage.setItem('navi-view-mode', mode)
|
||||||
|
},
|
||||||
|
setPanelOpen: (open) => set({ panelOpen: open }),
|
||||||
|
setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
|
||||||
|
setTheme: (theme) => set({ theme }),
|
||||||
|
setThemeOverride: (override) => {
|
||||||
|
set({ themeOverride: override })
|
||||||
|
if (override) {
|
||||||
|
localStorage.setItem('navi-theme-override', override)
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem('navi-theme-override')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// ── Auth state ──
|
||||||
|
auth: { authenticated: false, username: null, loaded: false },
|
||||||
|
setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
|
||||||
|
|
||||||
|
// ── Contacts ──
|
||||||
|
contacts: [],
|
||||||
|
contactsLoaded: false,
|
||||||
|
activeTab: 'routes', // 'routes' | 'contacts'
|
||||||
|
editingContact: null, // null=closed, {}=new, {id:N}=edit
|
||||||
|
pickingLocationFor: null, // form data while user picks location on map
|
||||||
|
|
||||||
|
setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
|
||||||
|
setActiveTab: (tab) => set({ activeTab: tab }),
|
||||||
|
setEditingContact: (c) => set({ editingContact: c }),
|
||||||
|
clearEditingContact: () => set({ editingContact: null }),
|
||||||
|
setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
|
||||||
|
clearPickingLocationFor: () => set({ pickingLocationFor: null }),
|
||||||
|
}))
|
||||||
|
|
||||||
|
// ── Panel state selector ──
|
||||||
|
// Returns string state, prioritizing preview to allow it alongside any route state
|
||||||
|
export const usePanelState = () => {
|
||||||
|
return useStore((s) => {
|
||||||
|
const hasPreview = !!s.selectedPlace
|
||||||
|
const hasRoute = !!s.routeResult
|
||||||
|
const hasRoutePoints = !!s.routeStart || !!s.routeEnd
|
||||||
|
|
||||||
|
if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
|
||||||
|
if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
|
||||||
|
if (hasPreview) return "PREVIEW"
|
||||||
|
if (hasRoute) return "ROUTE_CALCULATED"
|
||||||
|
if (hasRoutePoints) return "ROUTING"
|
||||||
|
return "IDLE"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue