+
+ )
+}
+
+export default function RoutingInstanceFields(props: RoutingFieldsProps) {
+ return
+
+ {defaults[router.key] !== undefined && (
+
+ )}
+
+ setDraft(e.target.value)} onBlur={commit}
+ onKeyDown={e => { if (e.key === 'Enter') e.currentTarget.blur() }}
+ placeholder={router.placeholder} spellCheck={false} autoComplete="off" autoCapitalize="none"
+ aria-describedby={`${id}-hint`}
+ className="min-h-11 w-full min-w-0 rounded-lg border border-edge bg-surface-input px-3 py-2 text-body text-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:opacity-50"
+ />
+ {t(router.hint)}
+{ROUTERS.map(router =>
+}
diff --git a/client/src/components/Map/ClusteredPois.tsx b/client/src/components/Map/ClusteredPois.tsx
new file mode 100644
index 000000000..986de81bf
--- /dev/null
+++ b/client/src/components/Map/ClusteredPois.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { Marker, useMap } from 'react-leaflet'
+import L from 'leaflet'
+import { useTranslation } from '../../i18n/TranslationContext'
+import type { Poi } from './poiCategories'
+import { clusterPois, poiClusterMarkup, poiClusterList, POI_CLUSTER_DETAIL_ZOOM } from './poiClusters'
+
+export default function ClusteredPois({ pois, enabled, onPoiClick, children }: {
+ pois: Poi[]; enabled: boolean; onPoiClick?: (poi: Poi) => void; children: ReactNode[]
+}) {
+ const map = useMap()
+ const { t } = useTranslation()
+ const [zoom, setZoom] = useState(() => map.getZoom())
+ const popup = useRef { if (node && zIndexOffset === 500) eventHandlers?.add?.({ target: { getElement: () => node } }) }}
data-testid="marker"
data-lat={position[0]}
data-lng={position[1]}
@@ -266,9 +268,9 @@ describe('MapView', () => {
expect(screen.getAllByTestId('polyline').length).toBe(3)
})
- it('FE-COMP-MAPVIEW-010: MarkerClusterGroup is rendered', () => {
+ it.each([false, true])('FE-COMP-MAPVIEW-010: place clustering stays enabled with roadtrip=%s', (roadtrip) => {
const places = [buildMapPlace({ lat: 48.8584, lng: 2.2945 })]
- render( {}} />)
+ const marker = markersWithZ('500')[0]
+ expect(marker).toHaveAttribute('draggable', 'true')
+ fireEvent.mouseDown(marker)
+ fireEvent.mouseUp(marker)
+ fireEvent.click(marker)
+ expect(first).toHaveBeenCalledTimes(1)
+ rerender( {}} />)
+ fireEvent.click(markersWithZ('500')[0])
+ expect(latest).toHaveBeenCalledExactlyOnceWith(poi)
+ expect(first).toHaveBeenCalledTimes(1)
+ })
+
it('FE-COMP-MAPVIEW-035: an unknown POI category falls back to grey and draws no glyph', () => {
render((null)
+ return
+ {children}
+ {via.nightPause &&
+}
+
/**
* Create a round photo-circle marker.
* Shows image_url if available, otherwise category icon in colored circle.
@@ -226,15 +253,16 @@ function createPoiIcon(category: string, brandWikidata?: string | null) {
// away under a stationary cursor, so the browser never fires mouseout — and
// mouseover/mousemove during the pan animation would immediately re-set the
// tooltip we just cleared (#1404).
-function CameraHoverGuard({ movingRef, onMoveStart }: { movingRef: { current: boolean }; onMoveStart: () => void }) {
+function CameraHoverGuard({ movingRef, onMoveStart, onZoom }: { movingRef: { current: boolean }; onMoveStart: () => void; onZoom: (zoom: number) => void }) {
const map = useMap()
useEffect(() => {
const start = () => { movingRef.current = true; onMoveStart() }
- const end = () => { movingRef.current = false }
+ const end = () => { movingRef.current = false; onZoom(map.getZoom()) }
+ onZoom(map.getZoom())
map.on('movestart zoomstart', start)
map.on('moveend zoomend', end)
return () => { map.off('movestart zoomstart', start); map.off('moveend zoomend', end) }
- }, [map, movingRef, onMoveStart])
+ }, [map, movingRef, onMoveStart, onZoom])
return null
}
@@ -638,6 +666,8 @@ export const MapView = memo(function MapView({
onViewportChange,
tripId,
routeVias = [],
+ dayBoundaryControls,
+ hazards,
accessLines = [],
onPoiDropOnRoute,
onRouteClick,
@@ -655,9 +685,12 @@ export const MapView = memo(function MapView({
// that is decides which layer draws it. A saved raster template still wins,
// the default is a vector style.
const basemap = useMemo(() => resolveBasemap(tileUrl, OFM_POSITRON), [tileUrl])
+ const poiClickRef = useRef(onPoiClick)
+ poiClickRef.current = onPoiClick
const poiMarkers = useMemo(() => (pois as Poi[]).map((poi: Poi) => (
HTMLElement | undefined } }) => {
const el = e.target.getElement()
- if (el && onPoiDropOnRoute) makePoiDraggable(el, poi.osm_id)
+ if (!el) return
+ // Native clicks avoid Leaflet suppressing a click after an earlier map drag.
+ el.setAttribute('aria-label', poi.name)
+ el.onclick = event => { event.stopPropagation(); poiClickRef.current?.(poi) }
+ if (onPoiDropOnRoute) makePoiDraggable(el, poi.osm_id)
},
}}
>
@@ -712,11 +749,12 @@ export const MapView = memo(function MapView({
})
// Hover state for the single tooltip overlay (replaces per-marker )
- const [hoveredPlace, setHoveredPlace] = useState(null)
+ const [hoveredPlace, setHoveredPlace] = useState(null)
const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null)
+ const [mapZoom, setMapZoom] = useState(0)
const mapMovingRef = useRef(false)
- const handleMarkerHover = useCallback((place: any, x: number, y: number) => {
+ const handleMarkerHover = useCallback((place: MapHoverInfo, x: number, y: number) => {
if (hoverDisabled || mapMovingRef.current) return
setHoveredPlace(place)
setTooltipPos({ x, y })
@@ -920,6 +958,7 @@ export const MapView = memo(function MapView({
), [gpxTracks, hasCasingPane])
const TooltipOverlay = !hoverDisabled && hoveredPlace && tooltipPos && !isTouchDevice
+ && (!hoveredPlace.routeVia || routeVias.includes(hoveredPlace.routeVia))
const CatIcon = TooltipOverlay ? getCategoryIcon(hoveredPlace.category_icon) : null
const { position: userPosition, mode: trackingMode, error: trackingError, errorCode: trackingErrorCode, cycleMode: cycleTrackingMode } = useGeolocation()
@@ -1001,32 +1040,25 @@ export const MapView = memo(function MapView({
- {markers}
-
- )}
+
+ {markers}
+
{/* Apple-Maps style: darker-blue casing under a bright-blue core, rounded.
The casing carries the click when the route can be reshaped: it is the wider of
@@ -1130,19 +1162,26 @@ export const MapView = memo(function MapView({
roadRoutes={transportRoutes}
/>
- {poiMarkers}
+ {hazards?.length > 0 && {poiMarkers}
{/* Charging stops / rest areas a plugin route places on the drawn day route.
Host-vetted data (server-normalized), rendered as plain tone dots. */}
- {(routeVias as RouteVia[]).map((v, i) => (
-
- {(v.label || v.dwellSeconds != null) && (
-
+ {(routeVias as RouteVia[]).filter(v => !v.nightPause || mapZoom >= NIGHT_PAUSE_MIN_ZOOM).map((v, i) => (
+ handleMarkerHover({ name: v.label, routeVia: v }, e.originalEvent.clientX, e.originalEvent.clientY),
+ mousemove: e => handleMarkerHover({ name: v.label, routeVia: v }, e.originalEvent.clientX, e.originalEvent.clientY),
+ mouseout: handleMarkerHoverOut,
+ } : undefined}
+ >
+ {(!v.hoverCard || isTouchDevice) && (v.label || v.dwellSeconds != null) && (
+
{v.label}
{v.label && v.dwellSeconds != null ? ' · ' : ''}
{v.dwellSeconds != null ? formatViaDwell(v.dwellSeconds) : ''}
)}
-
+
))}
+
- {TooltipOverlay && (
+ {TooltipOverlay && hoveredPlace.routeVia?.nightPause && (
+ s.settings.map_provider)
const token = useSettingsStore(s => s.settings.mapbox_access_token)
// Fall back to Leaflet when Mapbox is selected but no token is set,
@@ -33,12 +40,12 @@ export function MapViewAuto(props: any) {
// to Leaflet keeps a usable map instead of an error card.
// resetKeys: with two engine chunks, a failure under one provider must not
// keep showing Leaflet after the user switches to the other.
-
onMoveVia?: (dayId: number, id: number, lat: number, lng: number) => void
@@ -197,7 +207,7 @@ interface Props {
onMapReady?: (map: any | null) => void
}
-/** How eagerly place markers merge into a cluster, outside road trip mode. */
+/** How eagerly place markers merge into a cluster. */
const CLUSTER_RADIUS = 30
const CLUSTER_MAX_ZOOM = 10
@@ -609,6 +619,7 @@ export function MapViewGL({
dayPlaces = NO_PLACES,
tripId,
routeVias = NO_ROUTE_VIAS,
+ dayBoundaryControls,
accessLines = NO_ACCESS_LINES,
route = null,
routeColors = null,
@@ -623,6 +634,7 @@ export function MapViewGL({
fitKey = 0,
focusPoints,
clusterLoosely = false,
+ hazards,
dayOrderMap = NO_DAY_ORDER,
leftWidth = 0,
rightWidth = 0,
@@ -651,6 +663,7 @@ export function MapViewGL({
gl,
onMapReady,
}: Props) {
+ const { t } = useTranslation()
const rawMapboxStyle = useSettingsStore(s => s.settings.mapbox_style || MAPBOX_DEFAULT_STYLE)
const rawMaplibreStyle = useSettingsStore(s => s.settings.maplibre_style || '')
const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
@@ -675,7 +688,7 @@ export function MapViewGL({
const [mapReady, setMapReady] = useState(false)
// Hover tooltip — a cursor-following name/category/address card, matching the
// Leaflet map's overlay exactly (no anchored popup, no photo thumbnail).
- const [hoverPlace, setHoverPlace] = useState<(Place & { category_color?: string | null; category_icon?: string | null; category_name?: string | null }) | null>(null)
+ const [hoverPlace, setHoverPlace] = useState(null)
const [hoverPos, setHoverPos] = useState<{ x: number; y: number } | null>(null)
const hoverIdRef = useRef(null)
// True while the camera is moving (flyTo after a click, pan, zoom). Marker
@@ -697,6 +710,8 @@ export function MapViewGL({
const containerRef = useRef(null)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const mapRef = useRef(null)
+ const hazardPopupFactory = useCallback(() => new gl.Popup({ className: 'map-tooltip trek-hazard-popup', maxWidth: '320px' }), [gl])
+ useHazardLayerGL(mapRef.current, mapReady, hazards, hazardPopupFactory)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const markersRef = useRef>(new Map())
// Own layer for the hand-positioned place pins (MapLibre path, see makePlacePin).
@@ -1781,18 +1796,6 @@ export function MapViewGL({
return
}
- // Road trip mode does not cluster at all: the whole drive has to stay readable
- // zoomed right out, and a day's stops merging into one dot is exactly the shape it
- // is being looked at for. The source is emptied rather than reconfigured — the
- // cluster options can only be set when a GeoJSON source is created, and dropping and
- // re-adding a source under three layers to change a radius is not worth it when the
- // markers are drawn from `places` anyway.
- if (clusterLoosely) {
- source.setData({ type: 'FeatureCollection', features: [] })
- reconcileMarkers(validPlaces)
- return
- }
-
source.setData(buildPlaceClusterData(places) as any)
const placesById = new Map(validPlaces.map(place => [place.id, place]))
let raf: number | null = null
@@ -1833,29 +1836,63 @@ export function MapViewGL({
}
}, [places, selectedPlaceId, dayOrderMap, photoUrls, mapReady, glProvider, clusterLoosely])
- // Reconcile OSM "explore" POI markers (imperative, kept separate from the
- // planned-place markers so they don't cluster or get confused with them).
+ // Search results stay separate from the planned itinerary.
useEffect(() => {
const map = mapRef.current
if (!map || !mapReady) return
- popupRef.current?.remove() // same orphan-popup guard as the place markers
- poiMarkersRef.current.forEach(m => m.remove())
- poiMarkersRef.current = []
- poiCleanupRef.current.forEach(off => off())
- poiCleanupRef.current = []
- for (const poi of (pois as Poi[])) {
- const el = createPoiMarkerElement(poi.category, poi.brand_wikidata)
- el.addEventListener('mouseenter', () => {
- popupRef.current?.setLngLat([poi.lng, poi.lat]).setHTML(buildPoiPopupHtml(poi)).addTo(map)
- })
- el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
- el.addEventListener('click', (ev) => { ev.stopPropagation(); onPoiClickRef.current?.(poi) })
- // Dragging a hit onto the drive puts it where it is passed, rather than where the
- // corridor happened to project it. Only wired when someone is listening for it.
- if (onPoiDropRef.current) poiCleanupRef.current.push(makePoiDraggable(el, poi.osm_id))
- poiMarkersRef.current.push(attachPin(map, gl, pinLayerRef.current, el, poi.lng, poi.lat))
+ const redraw = () => {
+ popupRef.current?.remove()
+ poiMarkersRef.current.forEach(m => m.remove())
+ poiMarkersRef.current = []
+ poiCleanupRef.current.forEach(off => off())
+ poiCleanupRef.current = []
+ const groups = clusterLoosely ? clusterPois(pois, poi => map.project([poi.lng, poi.lat]), map.getZoom()) : pois.map(poi => ({ pois: [poi], lat: poi.lat, lng: poi.lng }))
+ for (const group of groups) {
+ if (group.pois.length > 1) {
+ const el = document.createElement('button')
+ el.type = 'button'
+ el.style.cssText = 'width:38px;height:38px;border:0;padding:0;background:transparent;'
+ el.setAttribute('aria-label', t('roadtrip.poi.found', { count: group.pois.length }))
+ el.innerHTML = poiClusterMarkup(group.pois.length)
+ el.addEventListener('click', event => {
+ event.stopPropagation()
+ if (map.getZoom() >= POI_CLUSTER_DETAIL_ZOOM) {
+ popupRef.current?.setLngLat([group.lng, group.lat]).setDOMContent(poiClusterList(group.pois, poi => {
+ popupRef.current?.remove(); onPoiClickRef.current?.(poi)
+ })).addTo(map)
+ } else {
+ const bounds = new gl.LngLatBounds()
+ group.pois.forEach(poi => bounds.extend([poi.lng, poi.lat]))
+ map.fitBounds(bounds, { padding: 70, maxZoom: POI_CLUSTER_DETAIL_ZOOM })
+ }
+ })
+ poiMarkersRef.current.push(attachPin(map, gl, pinLayerRef.current, el, group.lng, group.lat))
+ continue
+ }
+ const poi = group.pois[0]
+ const el = createPoiMarkerElement(poi.category, poi.brand_wikidata)
+ el.addEventListener('mouseenter', () => {
+ popupRef.current?.setLngLat([poi.lng, poi.lat]).setHTML(buildPoiPopupHtml(poi)).addTo(map)
+ })
+ el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
+ el.addEventListener('click', (ev) => { ev.stopPropagation(); onPoiClickRef.current?.(poi) })
+ // Dragging a hit onto the drive puts it where it is passed, rather than where the
+ // corridor happened to project it. Only wired when someone is listening for it.
+ if (onPoiDropRef.current) poiCleanupRef.current.push(makePoiDraggable(el, poi.osm_id))
+ poiMarkersRef.current.push(attachPin(map, gl, pinLayerRef.current, el, poi.lng, poi.lat))
+ }
}
- }, [pois, mapReady, glProvider])
+ redraw()
+ if (clusterLoosely) map.on('moveend', redraw)
+ return () => {
+ map.off('moveend', redraw)
+ poiCleanupRef.current.forEach(off => off())
+ poiCleanupRef.current = []
+ poiMarkersRef.current.forEach(pin => pin.remove())
+ poiMarkersRef.current = []
+ popupRef.current?.remove()
+ }
+ }, [pois, mapReady, glProvider, clusterLoosely, t])
// Fetch plugin map contributions (markers + layers) per trip. Fail-safe: an
// error or missing tripId just means no plugin overlays, the core map is fine.
@@ -1887,11 +1924,30 @@ export function MapViewGL({
if (!map || !mapReady) return
routeViaMarkersRef.current.forEach(m => m.remove())
routeViaMarkersRef.current = []
+ const pauses: HTMLElement[] = []
+ const unbind: (() => void)[] = []
for (const v of routeVias) {
const el = document.createElement('div')
el.style.cssText = 'width:13px;height:13px;cursor:pointer;'
const color = PLUGIN_TONE_COLORS[v.tone] ?? PLUGIN_TONE_COLORS.default
el.innerHTML = ``
+ if (v.nightPause) {
+ el.style.cssText = 'width:0;height:0;overflow:visible;cursor:pointer;'
+ el.innerHTML = nightPauseMarker(v)
+ el.setAttribute('aria-label', v.label ?? '')
+ pauses.push(el)
+ }
+ if (v.hoverCard) {
+ const show = (ev: MouseEvent) => {
+ if (hoverDisabledRef.current || camMovingRef.current) return
+ hoverIdRef.current = null
+ setHoverPlace({ name: v.label, routeVia: v })
+ setHoverPos({ x: ev.clientX, y: ev.clientY })
+ }
+ el.addEventListener('mouseenter', show)
+ el.addEventListener('mousemove', show)
+ el.addEventListener('mouseleave', () => { setHoverPlace(null); setHoverPos(null) })
+ }
if (v.label || v.dwellSeconds != null) {
const text = [v.label, v.dwellSeconds != null ? formatViaDwellGl(v.dwellSeconds) : null].filter(Boolean).join(' · ')
el.addEventListener('click', (ev) => {
@@ -1899,9 +1955,30 @@ export function MapViewGL({
popupRef.current?.setLngLat([v.lng, v.lat]).setText(text).addTo(map)
})
}
- routeViaMarkersRef.current.push(attachPin(map, gl, pinLayerRef.current, el, v.lng, v.lat))
+ const pin = attachPin(map, gl, pinLayerRef.current, el, v.lng, v.lat)
+ routeViaMarkersRef.current.push(pin)
+ if (v.nightPause && dayBoundaryControls) unbind.push(bindDayBoundaryDrag(el, v, dayBoundaryControls, {
+ project: (lat, lng) => {
+ const point = map.project([lng, lat])
+ const rect = map.getContainer().getBoundingClientRect()
+ return { x: point.x + rect.left, y: point.y + rect.top }
+ },
+ setPosition: (lat, lng) => { pin.setLngLat([lng, lat]) },
+ lock: () => {
+ const enabled = map.dragPan.isEnabled()
+ map.dragPan.disable()
+ return () => { if (enabled) map.dragPan.enable() }
+ },
+ }))
}
- }, [routeVias, mapReady, glProvider])
+ const updateZoom = () => {
+ const visible = map.getZoom() >= NIGHT_PAUSE_MIN_ZOOM
+ for (const el of pauses) el.style.display = visible ? '' : 'none'
+ }
+ updateZoom()
+ map.on('zoomend', updateZoom)
+ return () => { map.off('zoomend', updateZoom); unbind.forEach(dispose => dispose()) }
+ }, [routeVias, mapReady, glProvider, dayBoundaryControls])
// Reconcile plugin markers (imperative, same lifecycle as the POI markers).
useEffect(() => {
@@ -2222,7 +2299,8 @@ export function MapViewGL({
does, which is why the lift is only there. */}
+
{title}
{children}
- {note ? {note} : null}
)
}
@@ -248,7 +252,9 @@ const SPEC_ROWS: Record Promise
/**
* Persists one setting. Absent leaves the dialog read-only.
*
@@ -258,13 +264,15 @@ export default function RoadtripLimitsCard({ onSave }: {
onSave?: (key: string, value: number | string | boolean) => void
}): React.ReactElement {
const { t } = useTranslation()
- const settings = useSettingsStore(s => s.settings)
+ const settings = useRoadtripSettings(s => s)
+ const unit = useSettingsStore(s => s.settings.distance_unit)
const [open, setOpen] = useState(false)
- const distanceUnit: DistanceUnit = settings.distance_unit === 'imperial' ? 'imperial' : 'metric'
+ const distanceUnit: DistanceUnit = unit === 'imperial' ? 'imperial' : 'metric'
const imperial = distanceUnit === 'imperial'
const legMinutes = settings.roadtrip_leg_minutes
const dayMinutes = settings.roadtrip_day_minutes
+ const automaticWindow = dayWindow(settings.roadtrip_day_start, settings.roadtrip_day_end)
const rangeKm = settings.roadtrip_range_km
// Parsed rather than trusted: a per-user setting gets no server-side validation, and
@@ -335,7 +343,8 @@ export default function RoadtripLimitsCard({ onSave }: {
// imperial user types 400 meaning miles, 400 km gets stored, and the warnings arrive a
// third too early for ever after. The same rule runs through the vehicle's own figures,
// where showSpec and storeSpec do it per field.
- const rangeShown = planningKm ? Math.round(convertDistance(planningKm, distanceUnit)) : undefined
+ const rangeValue = computedKm ?? rangeKm
+ const rangeShown = rangeValue ? Math.round(convertDistance(rangeValue, distanceUnit)) : undefined
const setRange = (shown: number) => {
const km = imperial ? shown / 0.621371 : shown
onSave?.('roadtrip_range_km', Math.round(km))
@@ -347,6 +356,7 @@ export default function RoadtripLimitsCard({ onSave }: {
// imperial traveller reads miles here and types miles in the dialog, while what is
// stored stays kilometres either way.
const badges = [
+ automaticWindow ? { key: 'window', Icon: CalendarClock, text: `${settings.roadtrip_day_start} · ${settings.roadtrip_day_end}` } : null,
legMinutes ? { key: 'leg', Icon: Clock, text: formatDurationShort(legMinutes * 60) } : null,
dayMinutes ? { key: 'day', Icon: CalendarClock, text: formatDurationShort(dayMinutes * 60) } : null,
// The planning range, not the typed one: when the vehicle's figures win, the badge
@@ -374,6 +384,8 @@ export default function RoadtripLimitsCard({ onSave }: {
@@ -2230,7 +2308,10 @@ export function MapViewGL({
{/* Hover tooltip — cursor-following name/category/address card, identical to
the Leaflet map's overlay (no anchored popup, no photo). */}
- {!hoverDisabled && hoverPlace && hoverPos && !isMobile && (
+ {!hoverDisabled && hoverPlace?.routeVia?.nightPause && hoverPos && !isMobile && routeVias.includes(hoverPlace.routeVia) && (
+ {
+ const el = marker?.getElement()
+ if (!marker || !el || !controls) return
+ return bindDayBoundaryDrag(el, via, controls, {
+ project: (lat, lng) => {
+ const point = map.latLngToContainerPoint([lat, lng])
+ const rect = map.getContainer().getBoundingClientRect()
+ return { x: point.x + rect.left, y: point.y + rect.top }
+ },
+ setPosition: (lat, lng) => { marker.setLatLng([lat, lng]) },
+ lock: () => {
+ const enabled = map.dragging.enabled()
+ map.dragging.disable()
+ return () => { if (enabled) map.dragging.enable() }
+ },
+ })
+ }, [map, marker, via, controls])
+ return null
+}
diff --git a/client/src/components/Map/NightPauseTooltip.test.tsx b/client/src/components/Map/NightPauseTooltip.test.tsx
new file mode 100644
index 000000000..94a4b48f3
--- /dev/null
+++ b/client/src/components/Map/NightPauseTooltip.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react'
+import { afterEach, expect, it, vi } from 'vitest'
+import NightPauseTooltip from './NightPauseTooltip'
+
+afterEach(() => vi.restoreAllMocks())
+
+it('keeps the full pause description inside the viewport at its lower right edge', () => {
+ vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({ width: 240, height: 56 } as DOMRect)
+ const label = 'Tagesende von Tag 12 um 18:00 Uhr'
+ render((null)
+ useLayoutEffect(() => {
+ const place = () => {
+ const node = card.current!
+ const { width, height } = node.getBoundingClientRect()
+ const left = x + 14 + width > window.innerWidth - 12 ? x - width - 14 : x + 14
+ node.style.left = `${Math.max(12, Math.min(left, window.innerWidth - width - 12))}px`
+ node.style.top = `${Math.max(12, Math.min(y - 10, window.innerHeight - height - 12))}px`
+ }
+ place()
+ window.addEventListener('resize', place)
+ return () => window.removeEventListener('resize', place)
+ }, [label, x, y])
+ return createPortal(
+
+ hint: string
+}
+
+interface DragMap {
+ project: ProjectPoint
+ setPosition: (lat: number, lng: number) => void
+ lock: () => () => void
+}
+
+export function bindDayBoundaryDrag(el: HTMLElement, via: RouteVia, controls: DayBoundaryControls, map: DragMap) {
+ const pause = via.nightPause!
+ // Leaflet replaces the label contents when its icon changes, but keeps this root.
+ const handle = el
+ handle.style.cursor = 'grab'
+ handle.style.touchAction = 'none'
+ handle.tabIndex = 0
+ handle.setAttribute('role', 'button')
+ handle.setAttribute('aria-label', via.label ?? '')
+ handle.setAttribute('aria-description', controls.hint)
+ let origin: { x: number; y: number } | null = null
+ let target: DayBoundaryTarget | null = null
+ let unlock: (() => void) | null = null
+ let moved = false
+ let saving = false
+ let disposed = false
+ const restore = () => map.setPosition(via.lat, via.lng)
+ const detach = () => {
+ document.removeEventListener('pointermove', move)
+ document.removeEventListener('pointerup', up)
+ document.removeEventListener('pointercancel', cancel)
+ document.removeEventListener('keydown', escape)
+ unlock?.()
+ unlock = null
+ origin = null
+ handle.style.cursor = 'grab'
+ }
+ const cancel = () => { detach(); restore() }
+ const escape = (event: KeyboardEvent) => { if (event.key === 'Escape') { event.preventDefault(); cancel() } }
+ const commit = async (boundary: RoadtripDayBoundary | null) => {
+ saving = true
+ handle.setAttribute('aria-busy', 'true')
+ try { if (!await controls.move(pause.day, boundary) && !disposed) restore() }
+ finally { saving = false; handle.removeAttribute('aria-busy') }
+ }
+ const move = (event: PointerEvent) => {
+ if (!origin) return
+ if (!moved && Math.hypot(event.clientX - origin.x, event.clientY - origin.y) < 4) return
+ moved = true
+ event.preventDefault()
+ target = nearestDayBoundary(controls.path, pause.day, { x: event.clientX, y: event.clientY }, map.project, pause.minPosition, pause.maxPosition)
+ if (target) map.setPosition(target.lat, target.lng)
+ }
+ const up = () => {
+ const next = moved ? target : null
+ detach()
+ if (next) void commit(next.boundary)
+ else restore()
+ }
+ const down = (event: PointerEvent) => {
+ if (event.button !== 0 || saving) return
+ event.stopPropagation()
+ event.preventDefault()
+ origin = { x: event.clientX, y: event.clientY }
+ target = null
+ moved = false
+ unlock = map.lock()
+ handle.style.cursor = 'grabbing'
+ document.addEventListener('pointermove', move, { passive: false })
+ document.addEventListener('pointerup', up)
+ document.addEventListener('pointercancel', cancel)
+ document.addEventListener('keydown', escape)
+ }
+ const click = (event: Event) => {
+ if (moved || saving) { event.preventDefault(); event.stopImmediatePropagation() }
+ }
+ const reset = (event: Event) => {
+ event.preventDefault()
+ event.stopPropagation()
+ if (!saving && pause.manual) void commit(null)
+ }
+ const key = (event: KeyboardEvent) => {
+ if (event.key === 'Delete' || event.key === 'Backspace') return reset(event)
+ if (!['ArrowLeft', 'ArrowRight'].includes(event.key) || saving) return
+ event.preventDefault()
+ event.stopPropagation()
+ const position = (pause.position ?? 0) + (event.key === 'ArrowLeft' ? -0.05 : 0.05)
+ const leg = controls.path.find(leg => position >= leg.position && position <= leg.position + 1)
+ if (!leg || position <= (pause.minPosition ?? -1) || position >= (pause.maxPosition ?? Infinity)) return
+ void commit({ day_number: pause.day, from_assignment_id: leg.from.assignmentId, to_assignment_id: leg.to.assignmentId, fraction: position - leg.position })
+ }
+ handle.addEventListener('pointerdown', down)
+ el.addEventListener('click', click, true)
+ handle.addEventListener('contextmenu', reset)
+ handle.addEventListener('keydown', key)
+ return () => {
+ disposed = true
+ detach()
+ handle.removeEventListener('pointerdown', down)
+ el.removeEventListener('click', click, true)
+ handle.removeEventListener('contextmenu', reset)
+ handle.removeEventListener('keydown', key)
+ }
+}
diff --git a/client/src/components/Map/hazardPopup.css b/client/src/components/Map/hazardPopup.css
new file mode 100644
index 000000000..53b33d10e
--- /dev/null
+++ b/client/src/components/Map/hazardPopup.css
@@ -0,0 +1,133 @@
+.trek-hazard-content {
+ font-family: var(--font-system);
+}
+
+.trek-hazard-score {
+ padding: 7px 10px 5px;
+ border: 1px solid var(--border-faint);
+ border-radius: 10px;
+ background: var(--bg-hover);
+}
+
+.trek-hazard-score-heading {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 6px;
+ color: var(--text-secondary);
+ font-weight: 500;
+}
+
+.trek-hazard-score-heading strong {
+ font-size: calc(16px * var(--fs-scale-caption, 1));
+ font-weight: 650;
+ line-height: 1;
+ font-variant-numeric: tabular-nums;
+}
+
+.trek-hazard-score-track {
+ position: relative;
+ display: flex;
+ gap: 3px;
+ height: 5px;
+}
+
+.trek-hazard-score-track > span:not(.trek-hazard-score-marker) {
+ flex: 1;
+ border-radius: 3px;
+ opacity: 0.75;
+}
+
+.trek-hazard-score-marker {
+ position: absolute;
+ top: 50%;
+ width: 10px;
+ height: 10px;
+ border: 2px solid var(--bg-card);
+ border-radius: 50%;
+ background: var(--text-primary);
+ box-sizing: border-box;
+ transform: translate(-50%, -50%);
+ box-shadow: var(--shadow-sm);
+}
+
+.trek-hazard-score-ticks {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 4px;
+ color: var(--text-muted);
+ font-size: calc(10px * var(--fs-scale-caption, 1));
+ font-variant-numeric: tabular-nums;
+}
+
+.trek-hazard-popup .leaflet-popup-content {
+ margin: 14px 16px;
+}
+
+.trek-hazard-popup .mapboxgl-popup-content,
+.trek-hazard-popup .maplibregl-popup-content {
+ padding: 14px 16px;
+ border: 1px solid var(--border-faint);
+ border-radius: 14px;
+ background: var(--bg-card);
+ color: var(--text-primary);
+ box-shadow: var(--shadow-popover);
+}
+
+.trek-hazard-popup a.trek-hazard-source {
+ color: var(--text-secondary);
+ text-decoration: none;
+}
+
+.trek-hazard-popup a.trek-hazard-source:hover {
+ background: var(--bg-tertiary);
+ color: var(--text-primary);
+}
+
+.leaflet-container .trek-hazard-popup a.leaflet-popup-close-button,
+.trek-hazard-popup .mapboxgl-popup-close-button,
+.trek-hazard-popup .maplibregl-popup-close-button {
+ top: 10px;
+ right: 10px;
+ width: 26px;
+ height: 26px;
+ padding: 0;
+ border: 0;
+ border-radius: 8px;
+ background: transparent;
+ color: var(--text-muted);
+ font-size: 0;
+ transition: background-color 150ms ease, color 150ms ease !important;
+}
+
+.leaflet-container .trek-hazard-popup a.leaflet-popup-close-button span {
+ display: none;
+}
+
+.trek-hazard-popup :is(.leaflet-popup-close-button, .mapboxgl-popup-close-button, .maplibregl-popup-close-button)::before,
+.trek-hazard-popup :is(.leaflet-popup-close-button, .mapboxgl-popup-close-button, .maplibregl-popup-close-button)::after {
+ content: '';
+ position: absolute;
+ top: 12px;
+ left: 6px;
+ width: 14px;
+ height: 1.5px;
+ border-radius: 1px;
+ background: currentColor;
+ transform: rotate(45deg);
+}
+
+.trek-hazard-popup :is(.leaflet-popup-close-button, .mapboxgl-popup-close-button, .maplibregl-popup-close-button)::after {
+ transform: rotate(-45deg);
+}
+
+.trek-hazard-popup :is(.leaflet-popup-close-button, .mapboxgl-popup-close-button, .maplibregl-popup-close-button):hover {
+ background: var(--bg-hover);
+ color: var(--text-primary);
+ transform: none;
+}
+
+.trek-hazard-popup :is(a, button):focus-visible {
+ outline: 2px solid var(--accent);
+ outline-offset: 2px;
+}
diff --git a/client/src/components/Map/hazardPopup.test.ts b/client/src/components/Map/hazardPopup.test.ts
new file mode 100644
index 000000000..f89da7e2a
--- /dev/null
+++ b/client/src/components/Map/hazardPopup.test.ts
@@ -0,0 +1,12 @@
+import { expect, it } from 'vitest'
+import { hazardPopup } from './hazardPopup'
+
+it('renders provider text without HTML and identifies point-only notices', () => {
+ const popup = hazardPopup({ id: 'test', source: 'DWD', title: '
', description: '',
+ updatedAt: '2026-09-12T08:00:00Z', validUntil: null, url: 'https://www.dwd.de/',
+ geometry: { type: 'Point', coordinates: [10, 50] },
+ }, 'Not a closure', 'Location only')
+ expect(popup.querySelector('img,script')).toBeNull()
+ expect(popup.textContent).toContain('Location only Not a closure')
+ expect(popup.querySelector('a')?.rel).toBe('noopener noreferrer')
+})
diff --git a/client/src/components/Map/hazardPopup.ts b/client/src/components/Map/hazardPopup.ts
new file mode 100644
index 000000000..1c3d77e8d
--- /dev/null
+++ b/client/src/components/Map/hazardPopup.ts
@@ -0,0 +1,89 @@
+import { createElement } from 'react'
+import { AlertTriangle, ArrowUpRight } from 'lucide-react'
+import { renderIconMarkup } from '../../utils/iconMarkup'
+import './hazardPopup.css'
+import type { RoadtripHazard } from '@trek/shared'
+import type { Feature, Geometry } from 'geojson'
+
+export function hazardFeature(hazard: RoadtripHazard): Feature {
+ return { type: 'Feature', properties: { id: hazard.id }, geometry: hazard.geometry as Geometry }
+}
+
+export function hazardPopup(hazard: RoadtripHazard, note: string, pointNote: string): HTMLDivElement {
+ const box = document.createElement('div')
+ box.className = 'trek-hazard-content flex max-w-xs flex-col gap-3 text-content'
+ box.style.fontSize = 'calc(12px * var(--fs-scale-caption, 1))'
+ box.style.lineHeight = '1.45'
+ const title = document.createElement('div')
+ title.className = 'flex items-center gap-2.5 pr-7 font-semibold'
+ const symbol = document.createElement('span')
+ symbol.className = 'flex size-7 shrink-0 items-center justify-center rounded-lg bg-warning-soft text-warning'
+ symbol.innerHTML = renderIconMarkup(createElement(AlertTriangle, { size: 15, strokeWidth: 1.8 }))
+ const heading = document.createElement('span')
+ heading.textContent = hazard.title
+ title.append(symbol, heading)
+ box.append(title)
+ if (hazard.description.trim() && hazard.description.trim().toLocaleLowerCase() !== hazard.title.trim().toLocaleLowerCase()) {
+ const details = document.createElement('div')
+ details.className = 'text-content-secondary'
+ details.textContent = hazard.description
+ box.append(details)
+ }
+ const metadata = document.createElement('div')
+ metadata.className = 'flex flex-wrap items-center justify-between gap-x-3 gap-y-1 text-content-muted'
+ const source = document.createElement('a')
+ source.textContent = hazard.source
+ source.href = hazard.url
+ source.target = '_blank'
+ source.rel = 'noopener noreferrer'
+ source.className = 'trek-hazard-source inline-flex items-center gap-1 rounded-md bg-surface-hover px-1.5 py-0.5 font-medium'
+ const external = document.createElement('span')
+ external.innerHTML = renderIconMarkup(createElement(ArrowUpRight, { size: 12 }))
+ source.append(external)
+ const timestamp = document.createElement('time')
+ timestamp.dateTime = hazard.updatedAt
+ timestamp.textContent = new Date(hazard.updatedAt).toLocaleString([], { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })
+ metadata.append(source, timestamp)
+ const caution = document.createElement('div')
+ caution.className = 'border-t border-edge-faint pt-2.5 text-content-muted'
+ caution.textContent = hazard.geometry.type === 'Point' ? pointNote + ' ' + note : note
+ box.append(metadata)
+ if (hazard.source === 'GDACS' && hazard.alertScore != null) box.append(scoreBar(hazard.alertScore))
+ box.append(caution)
+ return box
+}
+
+function scoreBar(score: number): HTMLDivElement {
+ const panel = document.createElement('div')
+ panel.className = 'trek-hazard-score'
+ const heading = document.createElement('div')
+ heading.className = 'trek-hazard-score-heading'
+ const label = document.createElement('span')
+ label.textContent = 'GDACS Score'
+ const value = document.createElement('strong')
+ value.textContent = new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(score)
+ value.style.color = score < 1 ? 'var(--success)' : score < 2 ? 'var(--warning)' : 'var(--danger)'
+ heading.append(label, value)
+ const track = document.createElement('div')
+ track.className = 'trek-hazard-score-track'
+ track.setAttribute('role', 'img')
+ track.setAttribute('aria-label', 'GDACS Score ' + value.textContent)
+ for (const color of ['success', 'warning', 'danger']) {
+ const segment = document.createElement('span')
+ segment.style.background = 'var(--' + color + ')'
+ track.append(segment)
+ }
+ const marker = document.createElement('span')
+ marker.className = 'trek-hazard-score-marker'
+ marker.style.left = Math.min(score / 3, 1) * 100 + '%'
+ track.append(marker)
+ const ticks = document.createElement('div')
+ ticks.className = 'trek-hazard-score-ticks'
+ for (const tick of ['0', '1', '2', '3+']) {
+ const number = document.createElement('span')
+ number.textContent = tick
+ ticks.append(number)
+ }
+ panel.append(heading, track, ticks)
+ return panel
+}
diff --git a/client/src/components/Map/mapHover.ts b/client/src/components/Map/mapHover.ts
new file mode 100644
index 000000000..5f58ae245
--- /dev/null
+++ b/client/src/components/Map/mapHover.ts
@@ -0,0 +1,10 @@
+import type { RouteVia } from '../../types'
+
+export interface MapHoverInfo {
+ name?: string | null
+ address?: string | null
+ category_name?: string | null
+ category_icon?: string | null
+ category_color?: string | null
+ routeVia?: RouteVia
+}
diff --git a/client/src/components/Map/nightPauseMarker.ts b/client/src/components/Map/nightPauseMarker.ts
new file mode 100644
index 000000000..880fa6b4c
--- /dev/null
+++ b/client/src/components/Map/nightPauseMarker.ts
@@ -0,0 +1,17 @@
+import { createElement } from 'react'
+import { Moon } from 'lucide-react'
+import { escapeHtml } from '@trek/shared'
+import { renderIconMarkup } from '../../utils/iconMarkup'
+import type { RouteVia } from '../../types'
+
+const moon = renderIconMarkup(createElement(Moon, { size: 13, strokeWidth: 1.8, 'aria-hidden': true }))
+export const NIGHT_PAUSE_MIN_ZOOM = 6
+
+export function nightPauseMarker(via: RouteVia): string {
+ const pause = via.nightPause!
+ const position = pause.atPlace ? 'left:27px;top:-27px;' : 'left:0;top:-38px;transform:translateX(-50%);'
+ const stem = pause.atPlace
+ ? 'left:20px;top:-7px;width:10px;height:1px;transform:rotate(-35deg);transform-origin:left center;'
+ : 'left:-.5px;top:-14px;width:1px;height:14px;'
+ return `${moon}${escapeHtml(String(pause.day))}`
+}
diff --git a/client/src/components/Map/poiCategories.ts b/client/src/components/Map/poiCategories.ts
index 0c8feee50..9ecf75df7 100644
--- a/client/src/components/Map/poiCategories.ts
+++ b/client/src/components/Map/poiCategories.ts
@@ -70,5 +70,7 @@ export interface Poi {
capacity: number | null
fee: boolean | null
} | null
- source: 'openstreetmap'
+ source: string
+ pluginId?: string
+ rating?: number | null
}
diff --git a/client/src/components/Map/poiClusters.test.ts b/client/src/components/Map/poiClusters.test.ts
new file mode 100644
index 000000000..c23f6a2eb
--- /dev/null
+++ b/client/src/components/Map/poiClusters.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { Poi } from './poiCategories'
+import { clusterPois, poiClusterList } from './poiClusters'
+
+const station = (id: string, lng: number): Poi => ({
+ osm_id: id, name: id, lat: 48, lng, category: 'charging_station',
+ poi_type: 'charging_station', address: null, website: null, phone: null,
+ opening_hours: null, cuisine: null, source: 'openstreetmap',
+})
+const project = (poi: Poi) => ({ x: poi.lng, y: poi.lat })
+
+describe('station clusters', () => {
+ it('only clusters in the distant overview, even for coincident stations', () => {
+ const pois = [station('a', 1), station('b', 1)]
+ expect(clusterPois(pois, project, 8)).toHaveLength(1)
+ expect(clusterPois(pois, project, 9)).toHaveLength(2)
+ expect(clusterPois(pois, project, 14)).toHaveLength(2)
+ })
+ it('groups across grid edges, counts unique stations and preserves the originals', () => {
+ const a = station('a', 47), b = station('b', 49), c = station('c', 150)
+ const groups = clusterPois([c, b, a, a], project)
+ expect(groups.map(group => group.pois.length)).toEqual([2, 1])
+ expect(groups[0]).toMatchObject({ lat: 48, lng: 48 })
+ expect(groups[0].pois[0]).toBe(a)
+ expect(a.lng).toBe(47)
+ expect(clusterPois([a, b, c], project)).toEqual(groups)
+ })
+
+ it('separates stations as their projected distance grows on zoom', () => {
+ const pois = [station('a', 1), station('b', 2)]
+ expect(clusterPois(pois, project)).toHaveLength(1)
+ expect(clusterPois(pois, poi => ({ x: poi.lng * 100, y: 0 }))).toHaveLength(2)
+ })
+
+ it('keeps the center near the date line', () => {
+ const groups = clusterPois([station('a', 179), station('b', -179)], () => ({ x: 0, y: 0 }))
+ expect(groups[0].lng).toBe(180)
+ })
+
+ it('offers coincident stations individually without interpreting their names as HTML', () => {
+ const poi = { ...station('a', 1), name: '' }
+ const select = vi.fn()
+ const list = poiClusterList([poi], select)
+ expect(list.querySelector('img')).toBeNull()
+ expect(list.textContent).toBe(poi.name)
+ list.querySelector('button')!.click()
+ expect(select).toHaveBeenCalledWith(poi)
+ })
+})
+
+it('combines nearby small groups into one overview cluster', () => {
+ const pois = [station('a', 0), station('b', 3), station('c', 20), station('d', 23), station('e', 40), station('f', 43)]
+ expect(clusterPois(pois, project, 8).map(group => group.pois.length)).toEqual([6])
+ expect(clusterPois(pois, project, 9)).toHaveLength(6)
+})
diff --git a/client/src/components/Map/poiClusters.ts b/client/src/components/Map/poiClusters.ts
new file mode 100644
index 000000000..03dbaeb01
--- /dev/null
+++ b/client/src/components/Map/poiClusters.ts
@@ -0,0 +1,57 @@
+import type { Poi } from './poiCategories'
+
+export const POI_CLUSTER_RADIUS = 48
+export const POI_CLUSTER_MAX_ZOOM = 8
+export const POI_CLUSTER_DETAIL_ZOOM = 18
+export interface PoiCluster { pois: Poi[]; lat: number; lng: number }
+
+export function clusterPois(pois: Poi[], project: (poi: Poi) => { x: number; y: number }, zoom = 0): PoiCluster[] {
+ const groups: (PoiCluster & { x: number; y: number })[] = []
+ const cells = new Map()
+ const unique = new Map(pois.map(poi => [poi.osm_id, poi]))
+ if (zoom > POI_CLUSTER_MAX_ZOOM) return [...unique.values()].map(poi => ({ pois: [poi], lat: poi.lat, lng: poi.lng }))
+ for (const poi of [...unique.values()].sort((a, b) => a.osm_id.localeCompare(b.osm_id))) {
+ const point = project(poi)
+ const cx = Math.floor(point.x / POI_CLUSTER_RADIUS), cy = Math.floor(point.y / POI_CLUSTER_RADIUS)
+ let closest: typeof groups[number] | undefined
+ let distance = POI_CLUSTER_RADIUS
+ for (let x = cx - 1; x <= cx + 1; x++) for (let y = cy - 1; y <= cy + 1; y++) {
+ for (const index of cells.get(`${x},${y}`) ?? []) {
+ const group = groups[index]
+ const gap = Math.hypot(point.x - group.x, point.y - group.y)
+ if (gap < distance) { closest = group; distance = gap }
+ }
+ }
+ if (closest) closest.pois.push(poi)
+ else {
+ const key = `${cx},${cy}`
+ const indices = cells.get(key) ?? []
+ indices.push(groups.length)
+ cells.set(key, indices)
+ groups.push({ pois: [poi], lat: poi.lat, lng: poi.lng, ...point })
+ }
+ }
+ return groups.map(group => ({
+ pois: group.pois,
+ lat: group.pois.reduce((sum, poi) => sum + poi.lat, 0) / group.pois.length,
+ lng: group.lng + group.pois.reduce((sum, poi) => sum + ((poi.lng - group.lng + 540) % 360 - 180), 0) / group.pois.length,
+ }))
+}
+
+export function poiClusterMarkup(count: number): string {
+ return `${count}`
+}
+
+export function poiClusterList(pois: Poi[], select: (poi: Poi) => void): HTMLElement {
+ const list = document.createElement('div')
+ list.className = 'flex max-h-64 flex-col gap-1 overflow-y-auto p-1'
+ for (const poi of pois) {
+ const button = document.createElement('button')
+ button.type = 'button'
+ button.className = 'rounded-lg px-3 py-2 text-start text-caption font-medium text-content hover:bg-surface-hover focus-visible:bg-surface-hover'
+ button.textContent = poi.name
+ button.addEventListener('click', event => { event.stopPropagation(); select(poi) })
+ list.append(button)
+ }
+ return list
+}
diff --git a/client/src/components/Map/useHazardLayerGL.ts b/client/src/components/Map/useHazardLayerGL.ts
new file mode 100644
index 000000000..123c363e7
--- /dev/null
+++ b/client/src/components/Map/useHazardLayerGL.ts
@@ -0,0 +1,41 @@
+import { useEffect } from 'react'
+import type { Map, Popup, MapMouseEvent } from 'mapbox-gl'
+import type { RoadtripHazard } from '@trek/shared'
+import { hazardPopup, hazardFeature } from './hazardPopup'
+import { useTranslation } from '../../i18n/TranslationContext'
+
+export function useHazardLayerGL(map: Map | null, ready: boolean, hazards: RoadtripHazard[] | undefined, popup: () => Popup) {
+ const { t } = useTranslation()
+ useEffect(() => {
+ if (!map || !ready || !hazards?.length) return
+ const source = 'roadtrip-hazards'
+ const layers = [`${source}-fill`, `${source}-line`, `${source}-point`]
+ let detail: Popup | undefined
+ const draw = () => {
+ if (!map.isStyleLoaded() || map.getSource(source)) return
+ const color = getComputedStyle(document.documentElement).getPropertyValue('--warning').trim()
+ map.addSource(source, { type: 'geojson', data: { type: 'FeatureCollection', features: hazards.map(hazardFeature) } })
+ map.addLayer({ id: layers[0], type: 'fill', source, filter: ['!=', ['geometry-type'], 'Point'], paint: { 'fill-color': color, 'fill-opacity': 0.16 } })
+ map.addLayer({ id: layers[1], type: 'line', source, filter: ['!=', ['geometry-type'], 'Point'], paint: { 'line-color': color, 'line-width': 2 } })
+ map.addLayer({ id: layers[2], type: 'circle', source, filter: ['==', ['geometry-type'], 'Point'], paint: { 'circle-color': color, 'circle-radius': 7 } })
+ }
+ const click = (event: MapMouseEvent) => {
+ if (!map.getLayer(layers[0])) return
+ const hit = map.queryRenderedFeatures(event.point, { layers })[0]
+ const hazard = hazards.find(item => item.id === hit?.properties?.id)
+ if (!hazard) return
+ detail?.remove()
+ detail = popup().setLngLat(event.lngLat).setDOMContent(hazardPopup(hazard, t('roadtrip.hazards.note'), t('roadtrip.hazards.point'))).addTo(map)
+ }
+ draw()
+ map.on('style.load', draw)
+ map.on('click', click)
+ return () => {
+ detail?.remove()
+ map.off('style.load', draw)
+ map.off('click', click)
+ for (const layer of layers) if (map.getLayer(layer)) map.removeLayer(layer)
+ if (map.getSource(source)) map.removeSource(source)
+ }
+ }, [map, ready, hazards, popup, t])
+}
diff --git a/client/src/components/Map/useRoadtripHazards.ts b/client/src/components/Map/useRoadtripHazards.ts
new file mode 100644
index 000000000..12453f826
--- /dev/null
+++ b/client/src/components/Map/useRoadtripHazards.ts
@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react'
+import type { RoadtripHazards } from '@trek/shared'
+import { useRoadtripSettings } from '../../hooks/useRoadtripSettings'
+import { roadtripHazardsRepo } from '../../repo/roadtripHazardsRepo'
+import { isEffectivelyOffline, onNetworkModeChange } from '../../sync/networkMode'
+
+export function useRoadtripHazards(tripId: number | undefined, roadtrip: boolean) {
+ const enabled = useRoadtripSettings(s => s.roadtrip_show_hazards === true, tripId) && roadtrip && !!tripId
+ const [feed, setFeed] = useState(null)
+ const [status, setStatus] = useState<'loading' | 'ready' | 'unavailable' | 'offline'>('loading')
+ useEffect(() => {
+ if (!enabled || !tripId) return
+ let controller: AbortController
+ const load = () => {
+ controller?.abort()
+ controller = new AbortController()
+ const signal = controller.signal
+ setFeed(null)
+ if (isEffectivelyOffline()) { setStatus('offline'); return }
+ setStatus('loading')
+ roadtripHazardsRepo.read(tripId, signal).then(saved => {
+ if (!signal.aborted) { setFeed(saved); setStatus('ready') }
+ }).catch(() => { if (!signal.aborted) setStatus('unavailable') })
+ }
+ load()
+ const timer = window.setInterval(load, 600000)
+ const unsubscribe = onNetworkModeChange(load)
+ window.addEventListener('online', load)
+ return () => { controller.abort(); window.clearInterval(timer); unsubscribe(); window.removeEventListener('online', load) }
+ }, [enabled, tripId])
+ return { enabled, feed: enabled ? feed : null, status }
+}
diff --git a/client/src/components/Planner/DayPlanSidebar.tsx b/client/src/components/Planner/DayPlanSidebar.tsx
index bd4c793b8..2017b720d 100644
--- a/client/src/components/Planner/DayPlanSidebar.tsx
+++ b/client/src/components/Planner/DayPlanSidebar.tsx
@@ -1,3 +1,5 @@
+import { useRoadtripSettings } from '../../hooks/useRoadtripSettings'
+import { isServiceStopType } from '../Roadtrip/roadtripModel'
/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
interface DragDataPayload { placeId?: string; assignmentId?: string; noteId?: string; reservationId?: string; fromDayId?: string; phase?: 'single' | 'start' | 'middle' | 'end'; /** A corridor hit on its way onto the drive (#1797) — not a place yet. */ poiOsmId?: string }
declare global { interface Window { __dragData: DragDataPayload | null } }
@@ -180,6 +182,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
const { t, language, locale } = useTranslation()
const ctxMenu = useContextMenu()
const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
+ const mirrorServiceStops = useRoadtripSettings(s => s.roadtrip_service_stops_in_days !== false)
const tripActions = useRef(useTripStore.getState()).current
const can = useCanDo()
const canEditDays = can('day_edit', trip)
@@ -409,7 +412,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
}
const getDayAssignments = (dayId) =>
- (assignments[String(dayId)] || []).slice().sort((a, b) => a.order_index - b.order_index)
+ (assignments[String(dayId)] || []).filter(a => mirrorServiceStops || !isServiceStopType(a.place?.stop_type)).slice().sort((a, b) => a.order_index - b.order_index)
// Compute initial day_plan_position for a transport based on time
const computeTransportPosition = (r, da) => {
@@ -485,7 +488,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
return map
// getMergedItems is redefined each render but captures assignments/dayNotes/reservations/days via closure
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [days, assignments, dayNotes, reservations, transportPosVersion])
+ }, [days, assignments, dayNotes, reservations, transportPosVersion, mirrorServiceStops])
// Days whose inline route legs should be computed & shown. Desktop: the selected
// day while the Route toggle is on. Mobile: each expanded day the user tapped
@@ -710,7 +713,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
// Unified reorder: assigns positions to ALL item types based on new visual order
const applyMergedOrder = async (dayId: number, newOrder: { type: string; data: any }[]) => {
// Capture previous place order for undo
- const prevAssignmentIds = getDayAssignments(dayId).map(a => a.id)
+ const prevAssignmentIds = (assignments[String(dayId)] || []).slice().sort((a, b) => a.order_index - b.order_index).map(a => a.id)
// …and, per booking, the fields this call is about to overwrite, so a failed write
// can put the visible order back instead of leaving a phantom one behind the error
// toast. Restoring the whole array instead would also drop what a collaborator's
@@ -957,7 +960,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
const da = getDayAssignments(dayId)
if (da.length < 3) return
- const prevIds = da.map(a => a.id)
+ const prevIds = (assignments[String(dayId)] || []).slice().sort((a, b) => a.order_index - b.order_index).map(a => a.id)
// Separate fixed (stay at their index) and movable assignments. A place is
// fixed if it's locked OR has a set time — timed places are anchored by their
diff --git a/client/src/components/Planner/PlaceInspector.tsx b/client/src/components/Planner/PlaceInspector.tsx
index 504f4361a..cebbadeee 100644
--- a/client/src/components/Planner/PlaceInspector.tsx
+++ b/client/src/components/Planner/PlaceInspector.tsx
@@ -1,3 +1,4 @@
+import ChargingInfo from '../Roadtrip/ChargingInfo'
import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import { avatarSrc } from '../../utils/avatarSrc'
import { safeHttpUrl } from '../../utils/safeUrl'
@@ -35,6 +36,8 @@ import { TRANSPORT_TYPES, getAssignmentReservations } from '../../utils/dayMerge
import { NavigationMenu } from '../shared/NavigationMenu'
import { resolveOpenNow, resolvePlaceTimeZone, placeWeekdayIndex } from './placeOpenState'
import { convertHoursLine } from './placeHoursFormat'
+import type { EndDayControlProps } from '../Roadtrip/EndDayControl'
+import VisitControls, { type RoadtripStayControl } from '../Roadtrip/VisitControls'
const detailsCache = new Map()
@@ -133,6 +136,9 @@ interface TripMember {
}
interface PlaceInspectorProps {
+ roadtripActive?: boolean
+ roadtripEndDay?: EndDayControlProps
+ roadtripStay?: RoadtripStayControl
place: Place | null
categories: Category[]
/** 'trip' (default) keeps every existing trip-planner behaviour byte-identical;
@@ -179,7 +185,7 @@ export default function PlaceInspector({
onClose, onEdit, onDelete, onAssignToDay, onRemoveAssignment,
files = [], onFileUpload, tripMembers = [], onSetParticipants, onUpdatePlace, onUploadImage, onRate,
leftWidth = 0, rightWidth = 0,
- collectionStatus, onCopyToTrip, onSetStatus, onRemoveFromList,
+ collectionStatus, onCopyToTrip, onSetStatus, onRemoveFromList, roadtripEndDay, roadtripStay, roadtripActive,
}: PlaceInspectorProps) {
// Plugins that declared a place-detail slot mount at the bottom of this panel,
// scoped to the open place (trip mode only). Inline-filter like the other sites.
@@ -417,6 +423,8 @@ export default function PlaceInspector({
)}
{/* Description / Summary */}
+ {roadtripActive && place.stop_type === 'charging' && {place.description || googleDetails?.summary || ''}
diff --git a/client/src/components/Roadtrip/AutomaticDayStop.test.tsx b/client/src/components/Roadtrip/AutomaticDayStop.test.tsx
new file mode 100644
index 000000000..ec4bc30db
--- /dev/null
+++ b/client/src/components/Roadtrip/AutomaticDayStop.test.tsx
@@ -0,0 +1,37 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import AutomaticDayStop from './AutomaticDayStop'
+import type { RoadtripStop } from './useRoadtripRoutes'
+
+vi.mock('../../i18n/TranslationContext', () => ({ useTranslation: () => ({ t: (key: string) => key }) }))
+
+describe('automatic pause row', () => {
+ it('offers map focus and a custom hover without a native tooltip', async () => {
+ const focus = vi.fn()
+ render(
+ onFocus(stop.lat, stop.lng) : undefined}
+ className={`my-1 flex min-h-8 w-full items-center gap-2 rounded-md bg-surface-secondary px-2 py-1 text-start text-caption text-content-muted ${onFocus ? 'cursor-pointer transition-colors hover:bg-surface-hover hover:text-content focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent' : ''}`}
+ >
+
+
+ )
+}
diff --git a/client/src/components/Roadtrip/ChargingInfo.test.tsx b/client/src/components/Roadtrip/ChargingInfo.test.tsx
new file mode 100644
index 000000000..e46a27dfa
--- /dev/null
+++ b/client/src/components/Roadtrip/ChargingInfo.test.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TranslationProvider } from '../../i18n'
+import ChargingInfo from './ChargingInfo'
+import { chargingRepo } from '../../repo/chargingRepo'
+
+vi.mock('../../store/tripStore', () => ({ useTripStore: (select: (s: { trip: { id: number } }) => unknown) => select({ trip: { id: 1 } }) }))
+vi.mock('../../repo/chargingRepo', () => ({ chargingRepo: { read: vi.fn() } }))
+const info = { checkedAt: new Date().toISOString(), status: 'ok' as const, station: 'Station', source: 'Operator', sourceUrl: 'https://example.com', license: 'CC-0', updatedAt: new Date().toISOString(), stale: false, available: 2, total: 4, unknown: 0, tariffs: [], pricesUnavailable: false }
+describe('Charging information', () => {
+ it('shows availability, attribution and missing prices without inventing a price', async () => {
+ vi.mocked(chargingRepo.read).mockResolvedValue(info)
+ render((null)
+ const [loading, setLoading] = useState(true)
+ useEffect(() => {
+ let active = true
+ setInfo(null); setLoading(true)
+ const refresh = async () => {
+ if (!tripId || document.hidden) return
+ try { const value = await chargingRepo.read(tripId, placeId); if (active) setInfo(value) }
+ catch { if (active) setInfo(null) }
+ finally { if (active) setLoading(false) }
+ }
+ const offline = () => { setInfo(null); setLoading(false) }
+ void refresh()
+ const timer = window.setInterval(() => void refresh(), 60000)
+ window.addEventListener('offline', offline)
+ window.addEventListener('online', refresh)
+ document.addEventListener('visibilitychange', refresh)
+ return () => { active = false; clearInterval(timer); window.removeEventListener('offline', offline); window.removeEventListener('online', refresh); document.removeEventListener('visibilitychange', refresh) }
+ }, [tripId, placeId])
+ const known = !isEffectivelyOffline() && info?.available != null && !info.stale && Date.now() - Date.parse(info.checkedAt) < 120000
+ const status = loading ? t('common.loading') : known ? `${info.available}/${info.total} ${t('roadtrip.charging.available')}` : t(info?.stale ? 'roadtrip.charging.stale' : 'roadtrip.charging.unknown')
+ const components = info?.tariffs.flatMap(tariff => tariff.components.map(component => ({ ...component, currency: tariff.currency }))) ?? []
+ const energy = components.filter(component => component.kind === 'ENERGY' && component.taxIncluded && !component.conditional)
+ const sameCurrency = new Set(energy.map(component => component.currency)).size === 1
+ const cheapest = sameCurrency ? energy.reduce((best, component) => !best || component.price < best.price ? component : best, null) : null
+ const price = (value: number, currency: string) => new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(value)
+ const badges =
+ 0 ? 'bg-success-soft text-success' : 'bg-surface-secondary text-content-muted'}`}>
+ {cheapest && (resolve => { finish = resolve }))
+ render(
+}
+
+export default function EndDayControl({ active, onToggle }: EndDayControlProps) {
+ const { t } = useTranslation()
+ const [pending, setPending] = useState(false)
+ return (
+
+ )
+}
diff --git a/client/src/components/Roadtrip/GoogleRouteImport.test.tsx b/client/src/components/Roadtrip/GoogleRouteImport.test.tsx
new file mode 100644
index 000000000..2c1a5207d
--- /dev/null
+++ b/client/src/components/Roadtrip/GoogleRouteImport.test.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { TranslationProvider } from '../../i18n'
+import GoogleRouteImport from './GoogleRouteImport'
+import { googleRouteRepo } from '../../repo/googleRouteRepo'
+
+const { loadTrip, state } = vi.hoisted(() => ({ loadTrip: vi.fn(), state: { days: [{ id: 3, day_number: 1, title: 'First day' }] } }))
+vi.mock('../../store/tripStore', () => ({ useTripStore: Object.assign((select: (s: typeof state) => unknown) => select(state), { getState: () => ({ loadTrip }) }) }))
+vi.mock('../../repo/googleRouteRepo', () => ({ googleRouteRepo: { preview: vi.fn(), append: vi.fn() } }))
+
+async function openPreview() {
+ render((null)
+ const [target, setTarget] = useState('')
+ const [busy, setBusy] = useState(false)
+ const [failure, setFailure] = useState('')
+ const [saved, setSaved] = useState(false)
+ const controller = useRef(null)
+ const requestId = useRef('')
+ const menu = useContextMenu()
+ useEffect(() => () => controller.current?.abort(), [])
+ const inspect = async () => {
+ controller.current?.abort()
+ const abort = new AbortController()
+ controller.current = abort
+ setBusy(true); setFailure(''); setPreview(null)
+ try { const parsed = await googleRouteRepo.preview(url, abort.signal); if (!abort.signal.aborted) setPreview(parsed) }
+ catch (error) { if (!abort.signal.aborted) setFailure(getApiErrorMessage(error, t('common.error'))) }
+ finally { if (!abort.signal.aborted) setBusy(false) }
+ }
+ const save = async () => {
+ if (!preview || !target) return
+ setBusy(true); setFailure('')
+ try {
+ const stops = preview.stops.filter(s => s.lat != null && s.lng != null).map(s => ({ name: s.name, lat: s.lat!, lng: s.lng! }))
+ await googleRouteRepo.append(tripId, { dayId: Number(target), stops }, requestId.current)
+ setSaved(true)
+ await useTripStore.getState().loadTrip(tripId)
+ setOpen(false)
+ } catch (error) { setFailure(getApiErrorMessage(error, t('common.error'))) }
+ finally { setBusy(false) }
+ }
+ const show = () => {
+ setUrl(''); setPreview(null); setFailure(''); setSaved(false)
+ setTarget(String(dayId ?? days[0]?.id ?? ''))
+ requestId.current = generateUUID(); setOpen(true)
+ }
+ const resolved = preview?.stops.filter(s => s.lat != null && s.lng != null) ?? []
+ return <>
+
+
+
+ { if (!busy) setOpen(false) }} title={t('roadtrip.import.title')} size="lg">
+
+
+}
diff --git a/client/src/components/Roadtrip/RoadtripCorridorPanel.test.tsx b/client/src/components/Roadtrip/RoadtripCorridorPanel.test.tsx
index 59dcc33b6..a40a5005b 100644
--- a/client/src/components/Roadtrip/RoadtripCorridorPanel.test.tsx
+++ b/client/src/components/Roadtrip/RoadtripCorridorPanel.test.tsx
@@ -279,6 +279,14 @@ describe('RoadtripCorridorPanel', () => {
expect(screen.getByText('Aral')).toBeInTheDocument()
})
+ it('shows the plugin source and failed providers beside remaining hits', () => {
+ const c = corridor({}, { failedSources: ['plugin:unavailable'], results: [poi({ osm_id: 'plugin:stations:one', name: 'Plugin Station', pluginId: 'stations' })] })
+ wrap(
) : null}
+ {tripId && canImport &&
{/* What to look for. */}
diff --git a/client/src/components/Roadtrip/RoadtripLimitsCard.test.tsx b/client/src/components/Roadtrip/RoadtripLimitsCard.test.tsx
index 7fcb318bb..a7ffd1c7e 100644
--- a/client/src/components/Roadtrip/RoadtripLimitsCard.test.tsx
+++ b/client/src/components/Roadtrip/RoadtripLimitsCard.test.tsx
@@ -45,6 +45,21 @@ beforeEach(() => {
})
describe('RoadtripLimitsCard', () => {
+ it.each(['electric', 'petrol'])('saves manual range before fill changes for %s', kind => {
+ useSettingsStore.setState({ settings: { roadtrip_vehicle: kind, roadtrip_range_km: 0, distance_unit: 'metric' } as never })
+ const onSave = vi.fn()
+ open(onSave)
+ const range = screen.getByTestId('limit-range')
+ fireEvent.change(range, { target: { value: '100' } })
+ expect(onSave).not.toHaveBeenCalled()
+ fireEvent.blur(range)
+ expect(onSave).toHaveBeenCalledWith('roadtrip_range_km', 100)
+ const fill = screen.getByTestId('limit-fill')
+ fireEvent.change(fill, { target: { value: '80' } })
+ fireEvent.blur(fill)
+ expect(onSave).toHaveBeenCalledWith('roadtrip_fill_percent', 80)
+ })
+
it('FE-ROADTRIP-LIMITS-001: typing a number writes nothing until the field is left', () => {
const onSave = vi.fn()
open(onSave)
@@ -261,3 +276,16 @@ describe('RoadtripLimitsCard', () => {
})
})
})
+
+vi.mock('../../hooks/useRoadtripSettings', () => ({
+ useRoadtripSettings: (select: (preferences: import('@trek/shared').RoadtripPreferences) => unknown) => useSettingsStore(state => select(state.settings as import('@trek/shared').RoadtripPreferences)),
+}))
+
+it('shares service stops with Days by default and lets the trip turn it off', () => {
+ const onSave = vi.fn()
+ open(onSave)
+ const toggle = screen.getByRole('button', { name: 'Show in Days too' })
+ expect(toggle).toHaveAttribute('aria-pressed', 'true')
+ fireEvent.click(toggle)
+ expect(onSave).toHaveBeenCalledWith('roadtrip_service_stops_in_days', false)
+})
diff --git a/client/src/components/Roadtrip/RoadtripLimitsCard.tsx b/client/src/components/Roadtrip/RoadtripLimitsCard.tsx
index 26180eb69..bba178623 100644
--- a/client/src/components/Roadtrip/RoadtripLimitsCard.tsx
+++ b/client/src/components/Roadtrip/RoadtripLimitsCard.tsx
@@ -1,6 +1,7 @@
+import { useRoadtripSettings } from '../../hooks/useRoadtripSettings'
import React, { useState } from 'react'
import {
- Clock, Fuel, CalendarClock, SlidersHorizontal, ChevronRight, Coins, Signpost, Ship,
+ Clock, Fuel, CalendarClock, SlidersHorizontal, ChevronRight, Coins, Signpost, Ship, Check,
Car, Zap, BatteryCharging, BatteryFull, BatteryWarning, Gauge, Route, Sparkles, Link2, Palette,
} from 'lucide-react'
import Modal from '../shared/Modal'
@@ -14,6 +15,9 @@ import { valhallaAvailable } from '../Map/valhallaRoute'
import ToggleSwitch from '../Settings/ToggleSwitch'
import type { DistanceUnit, RouteAvoidClass } from '../../types'
import { FS } from './typeScale'
+import DayWindowFields from './DayWindowFields'
+import SettingsHint from './SettingsHint'
+import { dayWindow } from './dayWindow'
/**
* Everything that decides when the rail speaks up about the driving.
@@ -190,10 +194,10 @@ function Panel({ icon: Icon, title, note, children }: {
children: React.ReactNode
}): React.ReactElement {
return (
- {label}
, document.body,
+ )
+}
diff --git a/client/src/components/Map/dayBoundaryDrag.test.ts b/client/src/components/Map/dayBoundaryDrag.test.ts
new file mode 100644
index 000000000..a2e598518
--- /dev/null
+++ b/client/src/components/Map/dayBoundaryDrag.test.ts
@@ -0,0 +1,72 @@
+import { expect, it, vi } from 'vitest'
+import { bindDayBoundaryDrag } from './dayBoundaryDrag'
+import type { RoadtripStop } from '../Roadtrip/useRoadtripRoutes'
+
+function setup(withHandle = false) {
+ const el = document.createElement('span')
+ if (withHandle) el.innerHTML = '1'
+ document.body.append(el)
+ const save = vi.fn(async () => true), setPosition = vi.fn(), unlock = vi.fn()
+ const stop = (assignmentId: number, lng: number) => ({ assignmentId, lat: 0, lng }) as RoadtripStop
+ const dispose = bindDayBoundaryDrag(el, { lat: 0, lng: 0.5, tone: 'default', nightPause: { day: 1, atPlace: false, manual: true, position: 0.5 } }, {
+ path: [{ from: stop(1, 0), to: stop(2, 1), position: 0, line: [[0, 0], [0, 1]] }], move: save, hint: 'Move',
+ }, { project: (lat, lng) => ({ x: lng * 1000, y: lat * 1000 }), setPosition, lock: () => unlock })
+ const pointer = (node: EventTarget, type: string, x: number) => node.dispatchEvent(new MouseEvent(type, { clientX: x, clientY: 0, bubbles: true, cancelable: true, button: 0 }))
+ return { el, save, setPosition, unlock, dispose, pointer }
+}
+
+it('keeps dragging and keyboard controls after Leaflet replaces the label contents', async () => {
+ const s = setup(true)
+ for (const kind of ['route', 'place', 'route']) {
+ const label = s.el.firstElementChild!
+ s.pointer(label, 'pointerdown', 500)
+ s.pointer(document, 'pointermove', 990)
+ s.pointer(document, 'pointerup', 990)
+ await Promise.resolve()
+ s.el.innerHTML = `1`
+ }
+ expect(s.save).toHaveBeenCalledTimes(3)
+ expect(s.unlock).toHaveBeenCalledTimes(3)
+ s.el.firstElementChild!.dispatchEvent(new KeyboardEvent('keydown', { key: 'Delete', bubbles: true }))
+ expect(s.save).toHaveBeenLastCalledWith(1, null)
+ await Promise.resolve()
+ s.dispose()
+ s.pointer(s.el.firstElementChild!, 'pointerdown', 500)
+ s.pointer(document, 'pointermove', 990)
+ s.pointer(document, 'pointerup', 990)
+ expect(s.save).toHaveBeenCalledTimes(4)
+ s.el.remove()
+})
+
+it('saves the snapped visit once on release and restores map dragging', async () => {
+ const s = setup()
+ s.pointer(s.el, 'pointerdown', 500)
+ s.pointer(document, 'pointermove', 990)
+ expect(s.save).not.toHaveBeenCalled()
+ s.pointer(document, 'pointerup', 990)
+ expect(s.save).toHaveBeenCalledWith(1, { day_number: 1, from_assignment_id: 2, to_assignment_id: null, fraction: 1 })
+ expect(s.unlock).toHaveBeenCalledOnce()
+ s.dispose()
+})
+
+it('escape cancels without saving and removes document handlers', () => {
+ const s = setup()
+ s.pointer(s.el, 'pointerdown', 500)
+ s.pointer(document, 'pointermove', 300)
+ document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }))
+ s.pointer(document, 'pointerup', 300)
+ expect(s.save).not.toHaveBeenCalled()
+ expect(s.setPosition).toHaveBeenLastCalledWith(0, 0.5)
+ expect(s.unlock).toHaveBeenCalledOnce()
+ s.dispose()
+})
+
+it('a right click clears the manual override and a click alone does not save', async () => {
+ const s = setup()
+ s.pointer(s.el, 'pointerdown', 500)
+ s.pointer(document, 'pointerup', 500)
+ expect(s.save).not.toHaveBeenCalled()
+ s.el.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true }))
+ expect(s.save).toHaveBeenCalledWith(1, null)
+ s.dispose()
+})
diff --git a/client/src/components/Map/dayBoundaryDrag.ts b/client/src/components/Map/dayBoundaryDrag.ts
new file mode 100644
index 000000000..9b2359dfb
--- /dev/null
+++ b/client/src/components/Map/dayBoundaryDrag.ts
@@ -0,0 +1,110 @@
+import type { RoadtripDayBoundary } from '@trek/shared'
+import type { RouteVia } from '../../types'
+import { nearestDayBoundary, type DayBoundaryLeg, type DayBoundaryTarget, type ProjectPoint } from '../Roadtrip/dayBoundaryPath'
+
+export interface DayBoundaryControls {
+ path: DayBoundaryLeg[]
+ move: (day: number, boundary: RoadtripDayBoundary | null) => Promise
+
+
+
+}
diff --git a/client/src/components/Roadtrip/DayWindowFields.test.tsx b/client/src/components/Roadtrip/DayWindowFields.test.tsx
new file mode 100644
index 000000000..acde0edb7
--- /dev/null
+++ b/client/src/components/Roadtrip/DayWindowFields.test.tsx
@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import DayWindowFields from './DayWindowFields'
+
+vi.mock('../../i18n/TranslationContext', () => ({ useTranslation: () => ({ t: (key: string) => key }) }))
+
+describe('daily travel time settings', () => {
+ it('saves a complete custom time and preserves the other time', () => {
+ const save = vi.fn()
+ render(
+
+
+ {info?.station &&
+
+ {info.station}
} +{t('roadtrip.charging.prices')}
+ {!components.length &&{info?.pricesUnavailable ? `${t('common.error')}: ` : ''}{t('roadtrip.charging.unknown')}
} + {components.map((component, index) =>{price(component.price, component.currency)}{component.kind === 'ENERGY' ? '/kWh' : ['TIME', 'PARKING_TIME'].includes(component.kind) ? '/h' : ''} {component.kind === 'FLAT' ? 'Σ' : ''}{component.conditional || !component.taxIncluded ? '*' : ''}{component.afterSeconds != null && component.afterSeconds > 0 ? ` (> ${Math.round(component.afterSeconds / 60)} min)` : ''}
)} + {!!components.length &&* {t('roadtrip.charging.note')}
} +{t('roadtrip.charging.coverage')}
+ {info?.source &&{info.source} · MobiData BW
{info.license}{info.updatedAt && ` · ${new Date(info.updatedAt).toLocaleString()}`}
+ { setTarget(String(value)); requestId.current = generateUUID() }}
+ options={days.map(day => ({ value: String(day.id), label: day.title || `${t('roadtrip.import.day')} ${day.day_number}` }))} disabled={busy || saved} />
+
+ {t('roadtrip.import.note')}
+ {!preview ? setUrl(e.target.value)} aria-label="Google Maps URL" placeholder="https://maps.app.goo.gl/…" + className="w-full rounded-xl border border-edge bg-surface-input p-3 text-body text-content" /> : <> +-
+ {preview.stops.map((stop, index) =>
- + {index + 1} + {stop.name}{stop.name !== `${stop.lat}, ${stop.lng}` && {stop.lat == null || stop.lng == null ? t('roadtrip.import.unresolved') : `${stop.lat.toFixed(5)}, ${stop.lng.toFixed(5)}`}} + )} +
{saved ? t('common.saved') + ': ' : ''}{failure}
} +
+
+
+
+
{poi.name}
+ {poi.pluginId && {poi.pluginId}
} {/* Two facts, two chips. Where it is off the road and how far into the drive it comes are separate answers, and as two phrases sharing a line they read as one run-on sentence about the same thing. A chip each gives them an edge, and the @@ -249,7 +253,7 @@ function ResultGroup({ category, pois, dayId, insertIndexFor, onAddPoi }: { * header rather than among the filters — it is the question's subject, not one of its * conditions. */ -export default function RoadtripCorridorPanel({ corridor, routes, onAddPoi }: RoadtripCorridorPanelProps): React.ReactElement { +export default function RoadtripCorridorPanel({ corridor, routes, onAddPoi, tripId, canImport }: RoadtripCorridorPanelProps): React.ReactElement { const { t } = useTranslation() const distanceUnit = useSettingsStore(s => s.settings.distance_unit) const { search } = corridor @@ -299,6 +303,7 @@ export default function RoadtripCorridorPanel({ corridor, routes, onAddPoi }: Ro : 0 const warnings: [string, string][] = [] + if (search.failedSources?.length) warnings.push(['sources', `${t('common.error')}: ${search.failedSources.join(', ')}`]) if (search.capped) warnings.push(['capped', t('roadtrip.poi.capped')]) if (search.error) warnings.push(['failed', t('roadtrip.poi.failed')]) // Some boxes answered and some did not. Saying so is the difference between "there is @@ -327,6 +332,7 @@ export default function RoadtripCorridorPanel({ corridor, routes, onAddPoi }: Ro />{note}
: null} + {note ?