mirror of
https://github.com/zvx-echo6/navi.git
synced 2026-05-20 22:54:42 +02:00
feat: unified routing UI with wilderness + network segments
- Single routing system (removed duplicate Valhalla-only flow) - Unified radial menu: From here, To here, Clear, Save, Measure - Removed "Offroute" section from panel (single directions display) - Better error messages without technical "Offroute" prefix - ManeuverList shows wilderness + network breakdown - PlaceCard integration for previews Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
95dd4438fe
commit
d6aa125215
6 changed files with 878 additions and 938 deletions
318
src/store.js
318
src/store.js
|
|
@ -1,155 +1,163 @@
|
|||
import { create } from 'zustand'
|
||||
|
||||
export const useStore = create((set, get) => ({
|
||||
// ── Search state ──
|
||||
query: '',
|
||||
results: [],
|
||||
searchLoading: false,
|
||||
abortController: null,
|
||||
|
||||
setQuery: (query) => set({ query }),
|
||||
setResults: (results) => set({ results }),
|
||||
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'
|
||||
|
||||
setUserLocation: (loc) => set({ userLocation: loc }),
|
||||
setGeoPermission: (p) => set({ geoPermission: p }),
|
||||
|
||||
// ── Map viewport (for search bias) ──
|
||||
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)
|
||||
routeLoading: false,
|
||||
routeError: null,
|
||||
|
||||
setRoute: (route) => set({ route, routeError: null }),
|
||||
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
||||
setRouteError: (err) => set({ routeError: err, route: null }),
|
||||
clearRoute: () => set({ route: null, routeError: null }),
|
||||
|
||||
// ── Place detail ──
|
||||
selectedPlace: null, // { lat, lon, name, address, type, source, matchCode, raw, mode?, featureId?, featureLayer?, wikidata? }
|
||||
clickMarker: null, // { lat, lon, circleRadiusPx } — visual marker for two-click selection
|
||||
gpsOrigin: true, // whether GPS should be used as origin when available
|
||||
pendingDestination: null, // place waiting for a starting point (GPS-denied Directions flow)
|
||||
|
||||
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'
|
||||
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.route
|
||||
const hasStops = s.stops.length >= 1
|
||||
|
||||
if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
|
||||
if (hasPreview && hasStops) return "PREVIEW_ROUTING"
|
||||
if (hasPreview) return "PREVIEW"
|
||||
if (hasRoute) return "ROUTE_CALCULATED"
|
||||
if (hasStops) return "ROUTING"
|
||||
return "IDLE"
|
||||
})
|
||||
}
|
||||
import { create } from 'zustand'
|
||||
|
||||
export const useStore = create((set, get) => ({
|
||||
// ── Search state ──
|
||||
query: '',
|
||||
results: [],
|
||||
searchLoading: false,
|
||||
abortController: null,
|
||||
|
||||
setQuery: (query) => set({ query }),
|
||||
setResults: (results) => set({ results }),
|
||||
setSearchLoading: (loading) => set({ searchLoading: loading }),
|
||||
setAbortController: (ctrl) => set({ abortController: ctrl }),
|
||||
|
||||
// ── Geolocation ──
|
||||
userLocation: null, // { lat, lon }
|
||||
geoPermission: 'prompt', // 'prompt' | 'granted' | 'denied'
|
||||
|
||||
setUserLocation: (loc) => set({ userLocation: loc }),
|
||||
setGeoPermission: (p) => set({ geoPermission: p }),
|
||||
|
||||
// ── Map viewport (for search bias) ──
|
||||
mapCenter: null, // { lat, lon, zoom }
|
||||
setMapCenter: (center) => set({ mapCenter: center }),
|
||||
|
||||
// ── Unified Route State ──
|
||||
// Single routing system - all routes go through /api/offroute
|
||||
routeStart: null, // { lat, lon, name }
|
||||
routeEnd: null, // { lat, lon, name }
|
||||
routeMode: "foot", // foot | mtb | atv | vehicle
|
||||
boundaryMode: "strict", // strict | pragmatic | emergency
|
||||
routeResult: null, // Response from /api/offroute
|
||||
routeLoading: false,
|
||||
routeError: null,
|
||||
|
||||
setRouteStart: (place) => set({ routeStart: place, routeResult: null, routeError: null }),
|
||||
setRouteEnd: (place) => set({ routeEnd: place }),
|
||||
setRouteMode: (mode) => set({ routeMode: mode }),
|
||||
setBoundaryMode: (mode) => set({ boundaryMode: mode }),
|
||||
setRouteResult: (result) => set({ routeResult: result, routeError: null }),
|
||||
setRouteLoading: (loading) => set({ routeLoading: loading }),
|
||||
setRouteError: (err) => set({ routeError: err, routeResult: null }),
|
||||
clearRoute: () => set({
|
||||
routeStart: null,
|
||||
routeEnd: null,
|
||||
routeResult: null,
|
||||
routeError: null
|
||||
}),
|
||||
|
||||
// ── Legacy compatibility (for components not yet migrated) ──
|
||||
stops: [],
|
||||
gpsOrigin: false,
|
||||
pendingDestination: null,
|
||||
route: null,
|
||||
|
||||
addStop: (stop) => {
|
||||
// Legacy: just set as route end point
|
||||
const { routeStart, setRouteEnd } = get()
|
||||
const place = { lat: stop.lat, lon: stop.lon, name: stop.name }
|
||||
if (!routeStart) {
|
||||
set({ routeStart: place, stops: [{ ...stop, id: crypto.randomUUID() }] })
|
||||
} else {
|
||||
setRouteEnd(place)
|
||||
set({ stops: [...get().stops, { ...stop, id: crypto.randomUUID() }] })
|
||||
}
|
||||
return true
|
||||
},
|
||||
removeStop: (id) => {
|
||||
const { stops } = get()
|
||||
const newStops = stops.filter((s) => s.id !== id)
|
||||
set({ stops: newStops })
|
||||
if (newStops.length === 0) {
|
||||
get().clearRoute()
|
||||
}
|
||||
},
|
||||
clearStops: () => set({ stops: [], routeStart: null, routeEnd: null }),
|
||||
setStops: (stops) => set({ stops }),
|
||||
reorderStops: (newStops) => set({ stops: newStops }),
|
||||
setGpsOrigin: (val) => set({ gpsOrigin: val }),
|
||||
setPendingDestination: (place) => set({ pendingDestination: place }),
|
||||
clearPendingDestination: () => set({ pendingDestination: null }),
|
||||
|
||||
startDirections: (place) => {
|
||||
// Legacy: set as destination
|
||||
const { routeStart, setRouteEnd, clearRoute } = get()
|
||||
clearRoute()
|
||||
set({
|
||||
routeEnd: { lat: place.lat, lon: place.lon, name: place.name },
|
||||
stops: [{ ...place, id: crypto.randomUUID() }],
|
||||
selectedPlace: null
|
||||
})
|
||||
},
|
||||
|
||||
// ── Place detail ──
|
||||
selectedPlace: null,
|
||||
clickMarker: null,
|
||||
|
||||
setSelectedPlace: (place) => set({ selectedPlace: place }),
|
||||
updateBoundary: null,
|
||||
setUpdateBoundary: (fn) => set({ updateBoundary: fn }),
|
||||
clearSelectedPlace: () => set({ selectedPlace: null, clickMarker: null }),
|
||||
setClickMarker: (marker) => set({ clickMarker: marker }),
|
||||
clearClickMarker: () => set({ clickMarker: null }),
|
||||
|
||||
// ── UI state ──
|
||||
sheetState: 'half',
|
||||
panelOpen: true,
|
||||
autocompleteOpen: false,
|
||||
theme: 'dark',
|
||||
themeOverride: null,
|
||||
viewMode: (typeof localStorage !== 'undefined' && localStorage.getItem('navi-view-mode')) || 'map',
|
||||
|
||||
setSheetState: (s) => set({ sheetState: s }),
|
||||
setViewMode: (mode) => {
|
||||
set({ viewMode: mode })
|
||||
localStorage.setItem('navi-view-mode', mode)
|
||||
},
|
||||
setPanelOpen: (open) => set({ panelOpen: open }),
|
||||
setAutocompleteOpen: (open) => set({ autocompleteOpen: open }),
|
||||
setTheme: (theme) => set({ theme }),
|
||||
setThemeOverride: (override) => {
|
||||
set({ themeOverride: override })
|
||||
if (override) {
|
||||
localStorage.setItem('navi-theme-override', override)
|
||||
} else {
|
||||
localStorage.removeItem('navi-theme-override')
|
||||
}
|
||||
},
|
||||
|
||||
// ── Auth state ──
|
||||
auth: { authenticated: false, username: null, loaded: false },
|
||||
setAuth: (auth) => set({ auth: { ...auth, loaded: true } }),
|
||||
|
||||
// ── Contacts ──
|
||||
contacts: [],
|
||||
contactsLoaded: false,
|
||||
activeTab: 'routes',
|
||||
editingContact: null,
|
||||
pickingLocationFor: null,
|
||||
|
||||
setContacts: (c) => set({ contacts: c, contactsLoaded: true }),
|
||||
setActiveTab: (tab) => set({ activeTab: tab }),
|
||||
setEditingContact: (c) => set({ editingContact: c }),
|
||||
clearEditingContact: () => set({ editingContact: null }),
|
||||
setPickingLocationFor: (formData) => set({ pickingLocationFor: formData }),
|
||||
clearPickingLocationFor: () => set({ pickingLocationFor: null }),
|
||||
}))
|
||||
|
||||
// ── Panel state selector ──
|
||||
export const usePanelState = () => {
|
||||
return useStore((s) => {
|
||||
const hasPreview = !!s.selectedPlace
|
||||
const hasRoute = !!s.routeResult
|
||||
const hasRoutePoints = !!s.routeStart || !!s.routeEnd
|
||||
|
||||
if (hasPreview && hasRoute) return "PREVIEW_CALCULATED"
|
||||
if (hasPreview && hasRoutePoints) return "PREVIEW_ROUTING"
|
||||
if (hasPreview) return "PREVIEW"
|
||||
if (hasRoute) return "ROUTE_CALCULATED"
|
||||
if (hasRoutePoints) return "ROUTING"
|
||||
return "IDLE"
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue