mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-06-10 17:04:50 +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 { fetchReverse, requestOffroute } from '../api'
|
||||
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 useContextMenu from '../hooks/useContextMenu'
|
||||
import toast from 'react-hot-toast'
|
||||
|
|
@ -1657,95 +1657,114 @@ const MapView = forwardRef(function MapView(_, ref) {
|
|||
updateMeasureLabels(newPoints)
|
||||
}
|
||||
|
||||
const radialWedges = [
|
||||
{
|
||||
id: "to-here",
|
||||
label: "To here",
|
||||
icon: ArrowDownLeft,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
const place = {
|
||||
lat: radialMenu.lat,
|
||||
lon: radialMenu.lon,
|
||||
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
||||
}
|
||||
const { routeStart, setRouteEnd, setRouteLoading, setRouteResult, setRouteError, routeMode, boundaryMode } = useStore.getState()
|
||||
setRouteEnd(place)
|
||||
if (routeStart) {
|
||||
setRouteLoading(true)
|
||||
requestOffroute(routeStart, place, routeMode, boundaryMode)
|
||||
.then((data) => {
|
||||
if (data.status === "ok" && data.route) {
|
||||
setRouteResult(data)
|
||||
updateRouteDisplay(mapInstance.current, data.route)
|
||||
} else {
|
||||
setRouteError(data.error || "No route found")
|
||||
}
|
||||
})
|
||||
.catch((e) => setRouteError(e.message))
|
||||
.finally(() => setRouteLoading(false))
|
||||
} else {
|
||||
toast("Set starting point first")
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "from-here",
|
||||
label: "From here",
|
||||
icon: ArrowUpRight,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
const place = {
|
||||
lat: radialMenu.lat,
|
||||
lon: radialMenu.lon,
|
||||
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
||||
}
|
||||
const { clearRoute, setRouteStart } = useStore.getState()
|
||||
clearRoute()
|
||||
clearRouteDisplay(mapInstance.current)
|
||||
setRouteStart(place)
|
||||
toast("Now tap destination")
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "clear-route",
|
||||
label: "Clear",
|
||||
icon: Trash2,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
useStore.getState().clearRoute()
|
||||
clearRouteDisplay(mapInstance.current)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "save-place",
|
||||
label: "Save",
|
||||
icon: Star,
|
||||
requiresAuth: true,
|
||||
onSelect: () => {
|
||||
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)
|
||||
},
|
||||
},
|
||||
]
|
||||
const radialWedges = [
|
||||
{
|
||||
id: "to-here",
|
||||
label: "To here",
|
||||
icon: ArrowDownLeft,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
const place = {
|
||||
lat: radialMenu.lat,
|
||||
lon: radialMenu.lon,
|
||||
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
||||
}
|
||||
const { routeStart, setRouteEnd, computeRoute } = useStore.getState()
|
||||
setRouteEnd(place)
|
||||
if (routeStart) {
|
||||
computeRoute()
|
||||
} else {
|
||||
toast("Set starting point first")
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "from-here",
|
||||
label: "From here",
|
||||
icon: ArrowUpRight,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
const place = {
|
||||
lat: radialMenu.lat,
|
||||
lon: radialMenu.lon,
|
||||
name: radialMenu.centerLabel || radialMenu.lat.toFixed(5) + ", " + radialMenu.lon.toFixed(5),
|
||||
}
|
||||
const { clearRoute, setRouteStart, routeEnd, computeRoute } = useStore.getState()
|
||||
clearRoute()
|
||||
clearRouteDisplay(mapInstance.current)
|
||||
setRouteStart(place)
|
||||
// If we already have a destination, compute route immediately
|
||||
if (routeEnd) {
|
||||
computeRoute()
|
||||
} else {
|
||||
toast("Now tap destination")
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "add-stop",
|
||||
label: "Add stop",
|
||||
icon: Plus,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
const { stops, addStop } = 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")
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "clear-route",
|
||||
label: "Clear",
|
||||
icon: Trash2,
|
||||
onSelect: () => {
|
||||
setRadialMenu((m) => ({ ...m, open: false }))
|
||||
useStore.getState().clearRoute()
|
||||
clearRouteDisplay(mapInstance.current)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "save-place",
|
||||
label: "Save",
|
||||
icon: Star,
|
||||
requiresAuth: true,
|
||||
onSelect: () => {
|
||||
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
|
||||
const handleContextMenuTrigger = ({ x, y }) => {
|
||||
const map = mapInstance.current
|
||||
|
|
@ -2390,6 +2409,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']
|
||||
|
||||
|
|
|
|||
|
|
@ -1,294 +1,297 @@
|
|||
import { useRef, useCallback, useEffect, useState } from 'react'
|
||||
import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin } from 'lucide-react'
|
||||
import ThemePicker from './ThemePicker'
|
||||
import { useStore, usePanelState } from '../store'
|
||||
import { hasFeature } from '../config'
|
||||
import SearchBar from './SearchBar'
|
||||
import ManeuverList from './ManeuverList'
|
||||
import ContactList from './ContactList'
|
||||
import { PlaceCard } from './PlaceCard'
|
||||
|
||||
const TRAVEL_MODES = [
|
||||
{ id: 'foot', label: 'Foot', Icon: Footprints },
|
||||
{ id: 'mtb', label: 'MTB', Icon: Bike },
|
||||
{ id: 'atv', label: 'ATV', Icon: Car },
|
||||
{ id: 'vehicle', label: '4x4', Icon: Car },
|
||||
]
|
||||
|
||||
const BOUNDARY_MODES = [
|
||||
{ id: 'strict', label: 'Strict', Icon: Shield, title: 'Avoid barriers' },
|
||||
{ id: 'pragmatic', label: 'Cross', Icon: AlertTriangle, title: 'Cross with penalty' },
|
||||
{ id: 'emergency', label: 'Ignore', Icon: Zap, title: 'Ignore barriers' },
|
||||
]
|
||||
|
||||
export default function Panel({ onClearRoute }) {
|
||||
const selectedPlace = useStore((s) => s.selectedPlace)
|
||||
const clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
|
||||
const routeStart = useStore((s) => s.routeStart)
|
||||
const routeEnd = useStore((s) => s.routeEnd)
|
||||
const routeMode = useStore((s) => s.routeMode)
|
||||
const boundaryMode = useStore((s) => s.boundaryMode)
|
||||
const routeResult = useStore((s) => s.routeResult)
|
||||
const routeLoading = useStore((s) => s.routeLoading)
|
||||
const setRouteMode = useStore((s) => s.setRouteMode)
|
||||
const setBoundaryMode = useStore((s) => s.setBoundaryMode)
|
||||
const clearRoute = useStore((s) => s.clearRoute)
|
||||
const sheetState = useStore((s) => s.sheetState)
|
||||
const setSheetState = useStore((s) => s.setSheetState)
|
||||
const activeTab = useStore((s) => s.activeTab)
|
||||
const auth = useStore((s) => s.auth)
|
||||
const setActiveTab = useStore((s) => s.setActiveTab)
|
||||
|
||||
const panelState = usePanelState()
|
||||
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const sheetRef = useRef(null)
|
||||
const dragStartY = useRef(0)
|
||||
const dragStartState = useRef('half')
|
||||
|
||||
const showContacts = hasFeature('has_contacts') && auth.authenticated
|
||||
|
||||
useEffect(() => {
|
||||
const check = () => setIsMobile(window.innerWidth < 768)
|
||||
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 handleTouchStart = useCallback((e) => {
|
||||
dragStartY.current = e.touches[0].clientY
|
||||
dragStartState.current = sheetState
|
||||
}, [sheetState])
|
||||
|
||||
const handleTouchEnd = useCallback((e) => {
|
||||
const deltaY = e.changedTouches[0].clientY - dragStartY.current
|
||||
if (Math.abs(deltaY) < 30) return
|
||||
if (deltaY < 0) {
|
||||
if (dragStartState.current === 'collapsed') setSheetState('half')
|
||||
else if (dragStartState.current === 'half') setSheetState('full')
|
||||
} else {
|
||||
if (dragStartState.current === 'full') setSheetState('half')
|
||||
else if (dragStartState.current === 'half') setSheetState('collapsed')
|
||||
}
|
||||
}, [setSheetState])
|
||||
|
||||
const handleClearRoute = () => {
|
||||
clearRoute()
|
||||
onClearRoute?.()
|
||||
}
|
||||
|
||||
const showPreviewCard = panelState.startsWith('PREVIEW')
|
||||
const hasRoutePoints = routeStart || routeEnd
|
||||
const showRouteSection = hasRoutePoints || routeResult || routeLoading
|
||||
const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
|
||||
|
||||
const routesContent = (
|
||||
<>
|
||||
<SearchBar />
|
||||
|
||||
{showPreviewCard && selectedPlace && (
|
||||
<div className="mt-3">
|
||||
<PlaceCard
|
||||
place={selectedPlace}
|
||||
variant="preview"
|
||||
expanded={true}
|
||||
onClose={clearSelectedPlace}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showRouteSection && (
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||
Route
|
||||
</span>
|
||||
<button
|
||||
onClick={handleClearRoute}
|
||||
className="p-1 rounded hover:bg-[var(--bg-overlay)]"
|
||||
title="Clear route"
|
||||
>
|
||||
<X size={14} style={{ color: 'var(--text-tertiary)' }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 mb-3 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={12} style={{ color: '#22c55e' }} />
|
||||
<span style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||
{routeStart?.name || 'Right-click to set start'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={12} style={{ color: '#ef4444' }} />
|
||||
<span style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||
{routeEnd?.name || 'Right-click to set destination'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 mb-2">
|
||||
{TRAVEL_MODES.map((m) => {
|
||||
const active = routeMode === m.id
|
||||
return (
|
||||
<button
|
||||
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>
|
||||
|
||||
<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>
|
||||
)}
|
||||
|
||||
{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">
|
||||
<button
|
||||
className={"navi-tab " + (activeTab === 'routes' ? 'navi-tab-active' : '')}
|
||||
onClick={() => setActiveTab('routes')}
|
||||
>
|
||||
Routes
|
||||
</button>
|
||||
<button
|
||||
className={"navi-tab " + (activeTab === 'contacts' ? 'navi-tab-active' : '')}
|
||||
onClick={() => setActiveTab('contacts')}
|
||||
>
|
||||
Contacts
|
||||
</button>
|
||||
</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">
|
||||
{auth.loaded && (
|
||||
auth.authenticated ? (
|
||||
<button
|
||||
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."}
|
||||
>
|
||||
<span className="hidden sm:inline">{auth.username}</span>
|
||||
<LogOut size={14} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded text-xs"
|
||||
style={{ color: 'var(--accent)' }}
|
||||
title="Log in"
|
||||
>
|
||||
<LogIn size={14} />
|
||||
<span>Log in</span>
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
<ThemePicker />
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
const sheetHeights = {
|
||||
collapsed: 'h-12',
|
||||
half: 'h-[45vh]',
|
||||
full: 'h-[85vh]',
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={sheetRef}
|
||||
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)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex justify-center py-2 cursor-grab"
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onClick={() => {
|
||||
if (sheetState === 'collapsed') setSheetState('half')
|
||||
else if (sheetState === 'half') setSheetState('full')
|
||||
else setSheetState('half')
|
||||
}}
|
||||
>
|
||||
<div className="w-10 h-1 rounded-full" style={{ background: 'var(--border)' }} />
|
||||
</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))' }}>
|
||||
{header}
|
||||
{content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
import { useRef, useCallback, useEffect, useState } from 'react'
|
||||
import { LogIn, LogOut, Footprints, Bike, Car, Shield, AlertTriangle, Zap, X, MapPin } from 'lucide-react'
|
||||
import ThemePicker from './ThemePicker'
|
||||
import { useStore, usePanelState } from '../store'
|
||||
import { hasFeature } from '../config'
|
||||
import SearchBar from './SearchBar'
|
||||
import ManeuverList from './ManeuverList'
|
||||
import ContactList from './ContactList'
|
||||
import { PlaceCard } from './PlaceCard'
|
||||
|
||||
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 clearSelectedPlace = useStore((s) => s.clearSelectedPlace)
|
||||
const routeStart = useStore((s) => s.routeStart)
|
||||
const routeEnd = useStore((s) => s.routeEnd)
|
||||
const routeMode = useStore((s) => s.routeMode)
|
||||
const boundaryMode = useStore((s) => s.boundaryMode)
|
||||
const routeResult = useStore((s) => s.routeResult)
|
||||
const routeLoading = useStore((s) => s.routeLoading)
|
||||
const setRouteMode = useStore((s) => s.setRouteMode)
|
||||
const setBoundaryMode = useStore((s) => s.setBoundaryMode)
|
||||
const clearRoute = useStore((s) => s.clearRoute)
|
||||
const sheetState = useStore((s) => s.sheetState)
|
||||
const setSheetState = useStore((s) => s.setSheetState)
|
||||
const activeTab = useStore((s) => s.activeTab)
|
||||
const auth = useStore((s) => s.auth)
|
||||
const setActiveTab = useStore((s) => s.setActiveTab)
|
||||
|
||||
const panelState = usePanelState()
|
||||
|
||||
const [isMobile, setIsMobile] = useState(false)
|
||||
const sheetRef = useRef(null)
|
||||
const dragStartY = useRef(0)
|
||||
const dragStartState = useRef('half')
|
||||
|
||||
const showContacts = hasFeature('has_contacts') && auth.authenticated
|
||||
|
||||
useEffect(() => {
|
||||
const check = () => setIsMobile(window.innerWidth < 768)
|
||||
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 handleTouchStart = useCallback((e) => {
|
||||
dragStartY.current = e.touches[0].clientY
|
||||
dragStartState.current = sheetState
|
||||
}, [sheetState])
|
||||
|
||||
const handleTouchEnd = useCallback((e) => {
|
||||
const deltaY = e.changedTouches[0].clientY - dragStartY.current
|
||||
if (Math.abs(deltaY) < 30) return
|
||||
if (deltaY < 0) {
|
||||
if (dragStartState.current === 'collapsed') setSheetState('half')
|
||||
else if (dragStartState.current === 'half') setSheetState('full')
|
||||
} else {
|
||||
if (dragStartState.current === 'full') setSheetState('half')
|
||||
else if (dragStartState.current === 'half') setSheetState('collapsed')
|
||||
}
|
||||
}, [setSheetState])
|
||||
|
||||
const handleClearRoute = () => {
|
||||
clearRoute()
|
||||
onClearRoute?.()
|
||||
}
|
||||
|
||||
const showPreviewCard = panelState.startsWith('PREVIEW')
|
||||
const hasRoutePoints = routeStart || routeEnd
|
||||
const showRouteSection = hasRoutePoints || routeResult || routeLoading
|
||||
const showEmptyState = panelState === 'IDLE' && !hasRoutePoints
|
||||
|
||||
const routesContent = (
|
||||
<>
|
||||
<SearchBar />
|
||||
|
||||
{showPreviewCard && selectedPlace && (
|
||||
<div className="mt-3">
|
||||
<PlaceCard
|
||||
place={selectedPlace}
|
||||
variant="preview"
|
||||
expanded={true}
|
||||
onClose={clearSelectedPlace}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showRouteSection && (
|
||||
<div className="mt-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
|
||||
Route
|
||||
</span>
|
||||
<button
|
||||
onClick={handleClearRoute}
|
||||
className="p-1 rounded hover:bg-[var(--bg-overlay)]"
|
||||
title="Clear route"
|
||||
>
|
||||
<X size={14} style={{ color: 'var(--text-tertiary)' }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 mb-3 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={12} style={{ color: '#22c55e' }} />
|
||||
<span style={{ color: routeStart ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||
{routeStart?.name || 'Right-click to set start'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={12} style={{ color: '#ef4444' }} />
|
||||
<span style={{ color: routeEnd ? 'var(--text-primary)' : 'var(--text-tertiary)' }}>
|
||||
{routeEnd?.name || 'Right-click to set destination'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-1 mb-2">
|
||||
{TRAVEL_MODES.map((m) => {
|
||||
const active = routeMode === m.id
|
||||
return (
|
||||
<button
|
||||
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>
|
||||
)}
|
||||
|
||||
{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">
|
||||
<button
|
||||
className={"navi-tab " + (activeTab === 'routes' ? 'navi-tab-active' : '')}
|
||||
onClick={() => setActiveTab('routes')}
|
||||
>
|
||||
Routes
|
||||
</button>
|
||||
<button
|
||||
className={"navi-tab " + (activeTab === 'contacts' ? 'navi-tab-active' : '')}
|
||||
onClick={() => setActiveTab('contacts')}
|
||||
>
|
||||
Contacts
|
||||
</button>
|
||||
</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">
|
||||
{auth.loaded && (
|
||||
auth.authenticated ? (
|
||||
<button
|
||||
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."}
|
||||
>
|
||||
<span className="hidden sm:inline">{auth.username}</span>
|
||||
<LogOut size={14} />
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={handleLogin}
|
||||
className="flex items-center gap-1 px-2 py-1 rounded text-xs"
|
||||
style={{ color: 'var(--accent)' }}
|
||||
title="Log in"
|
||||
>
|
||||
<LogIn size={14} />
|
||||
<span>Log in</span>
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
<ThemePicker />
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
const sheetHeights = {
|
||||
collapsed: 'h-12',
|
||||
half: 'h-[45vh]',
|
||||
full: 'h-[85vh]',
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={sheetRef}
|
||||
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)',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex justify-center py-2 cursor-grab"
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onClick={() => {
|
||||
if (sheetState === 'collapsed') setSheetState('half')
|
||||
else if (sheetState === 'half') setSheetState('full')
|
||||
else setSheetState('half')
|
||||
}}
|
||||
>
|
||||
<div className="w-10 h-1 rounded-full" style={{ background: 'var(--border)' }} />
|
||||
</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))' }}>
|
||||
{header}
|
||||
{content}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue