{banner && 
}
- {place.category?.name && (
-
- >({})
const thumbRafRef = useRef(null)
- const placeIds = useMemo(() => places.map(p => p.id).join(','), [places])
+ const photoSources = useMemo(() => photoSourcesKey(places), [places])
useEffect(() => {
if (!places || places.length === 0 || !placesPhotosEnabled) return
const cleanups: (() => void)[] = []
@@ -1771,7 +1770,7 @@ export function MapViewGL({
thumbRafRef.current = null
}
}
- }, [placeIds, placesPhotosEnabled]) // eslint-disable-line react-hooks/exhaustive-deps
+ }, [photoSources, placesPhotosEnabled]) // eslint-disable-line react-hooks/exhaustive-deps
// Reconcile markers with places + photos. The clustered GeoJSON source decides
// which points are currently unclustered, and we render the existing rich HTML
diff --git a/client/src/components/Map/placePhoto.test.ts b/client/src/components/Map/placePhoto.test.ts
new file mode 100644
index 000000000..811eb26cc
--- /dev/null
+++ b/client/src/components/Map/placePhoto.test.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import { isCustomPlaceImage, markerPhotoHtml, photoCacheKey, photoSourcesKey } from './placePhoto'
+
+function imgOf(html: string): HTMLImageElement {
+ const holder = document.createElement('div')
+ holder.innerHTML = html
+ return holder.querySelector('img')!
+}
+
+describe('isCustomPlaceImage', () => {
+ it('FE-MAP-PLACEPHOTO-001: an upload or an inline image is shown as it is, a provider photo is not', () => {
+ expect(isCustomPlaceImage('/uploads/places/a.jpg')).toBe(true)
+ expect(isCustomPlaceImage('data:image/png;base64,AAA')).toBe(true)
+ expect(isCustomPlaceImage('/api/maps/place-photo/gp-1~p0/bytes')).toBe(false)
+ expect(isCustomPlaceImage(null)).toBe(false)
+ })
+})
+
+describe('markerPhotoHtml', () => {
+ it('FE-MAP-PLACEPHOTO-002: sizes the picture by its style, where no stylesheet rule can undo it', () => {
+ // Preflight's `height: auto` and Leaflet's `width: auto` both outrank a width or
+ // height attribute, so a photo that is not a small square has to be pinned here.
+ const img = imgOf(markerPhotoHtml('/uploads/places/wide.jpg'))
+ expect(img.getAttribute('src')).toBe('/uploads/places/wide.jpg')
+ expect(img.style.width).toBe('100%')
+ expect(img.style.height).toBe('100%')
+ expect(img.hasAttribute('width')).toBe(false)
+ expect(img.hasAttribute('height')).toBe(false)
+ })
+
+ it('FE-MAP-PLACEPHOTO-003: escapes the url, which a user can set', () => {
+ const html = markerPhotoHtml('/uploads/x" onerror="alert(1)" y="')
+ expect(html).not.toContain('onerror="alert(1)"')
+ expect(imgOf(html).getAttribute('src')).toBe('/uploads/x" onerror="alert(1)" y="')
+ })
+})
+
+describe('photoCacheKey', () => {
+ it('FE-MAP-PLACEPHOTO-004: a picked provider photo is its own key, ahead of the provider id', () => {
+ expect(photoCacheKey({ image_url: '/api/maps/place-photo/gp-1~p2/bytes', google_place_id: 'gp-1', lat: 1, lng: 2 }))
+ .toBe('/api/maps/place-photo/gp-1~p2/bytes')
+ })
+
+ it('FE-MAP-PLACEPHOTO-005: otherwise the provider id, then the coordinates, then nothing', () => {
+ expect(photoCacheKey({ image_url: '/uploads/places/a.jpg', google_place_id: 'gp-1', osm_id: 'node/1' })).toBe('gp-1')
+ expect(photoCacheKey({ osm_id: 'node/1', lat: 1, lng: 2 })).toBe('node/1')
+ expect(photoCacheKey({ lat: 0, lng: 0 })).toBe('0,0')
+ expect(photoCacheKey({ image_url: 'https://example.com/a.jpg', lat: null, lng: null })).toBe('')
+ })
+})
+
+describe('photoSourcesKey', () => {
+ const place = { id: 7, google_place_id: 'gp-7', lat: 48, lng: 2 }
+
+ it('FE-MAP-PLACEPHOTO-006: changes when an upload comes off or another photo is picked', () => {
+ const withUpload = photoSourcesKey([{ ...place, image_url: '/uploads/places/a.jpg' }])
+ const bare = photoSourcesKey([{ ...place, image_url: null }])
+ const picked = photoSourcesKey([{ ...place, image_url: '/api/maps/place-photo/gp-7~p0/bytes' }])
+ const pickedAgain = photoSourcesKey([{ ...place, image_url: '/api/maps/place-photo/gp-7~p1/bytes' }])
+ expect(new Set([withUpload, bare, picked, pickedAgain]).size).toBe(4)
+ })
+
+ it('FE-MAP-PLACEPHOTO-007: stays put when one upload replaces another, which needs no thumb', () => {
+ expect(photoSourcesKey([{ ...place, image_url: '/uploads/places/a.jpg' }]))
+ .toBe(photoSourcesKey([{ ...place, image_url: '/uploads/places/b.jpg' }]))
+ })
+})
diff --git a/client/src/components/Map/placePhoto.ts b/client/src/components/Map/placePhoto.ts
index 71874b82c..3086a9002 100644
--- a/client/src/components/Map/placePhoto.ts
+++ b/client/src/components/Map/placePhoto.ts
@@ -1,3 +1,16 @@
+import { escapeHtml } from '@trek/shared'
+
+const PHOTO_PROXY_PREFIX = '/api/maps/place-photo/'
+
+/** The fields of a place that decide which picture its marker gets. */
+interface PhotoSource {
+ image_url?: string | null
+ google_place_id?: string | null
+ osm_id?: string | null
+ lat?: number | null
+ lng?: number | null
+}
+
/**
* A place's image_url that is directly displayable on a map marker and should
* win over the auto-fetched provider thumbnail — a custom uploaded image (#1136)
@@ -11,18 +24,41 @@ export function isCustomPlaceImage(url: string | null | undefined): boolean {
/**
* Cache key under which a place's auto-fetched thumbnail is stored: the provider
- * id when there is one, otherwise the coordinates. A place with neither has no
- * identity to cache under, so it gets the empty string — callers skip it rather
+ * photo the user picked when there is one, else the provider id, otherwise the
+ * coordinates. The picked photo comes first because picking another picture of the
+ * same place leaves its provider id alone, and the thumb cached under that id
+ * would go on answering for the new one. A place with none of these has no
+ * identity to cache under, so it gets the empty string: callers skip it rather
* than filing every coordinate-less place under one shared entry.
*/
-export function photoCacheKey(place: {
- google_place_id?: string | null
- osm_id?: string | null
- lat?: number | null
- lng?: number | null
-}): string {
+export function photoCacheKey(place: PhotoSource): string {
+ if (place.image_url?.startsWith(PHOTO_PROXY_PREFIX)) return place.image_url
if (place.google_place_id) return place.google_place_id
if (place.osm_id) return place.osm_id
if (place.lat == null || place.lng == null) return ''
return `${place.lat},${place.lng}`
}
+
+/**
+ * What the maps' thumb loading depends on, as one string to key the effect on.
+ * Place ids alone missed every change of picture: taking an upload off a place or
+ * picking another suggested photo changes no id, so the marker kept a category
+ * dot or the old thumb until the page was reloaded.
+ */
+export function photoSourcesKey(places: Array): string {
+ return places.map(p => `${p.id}:${isCustomPlaceImage(p.image_url) ? 'own' : photoCacheKey(p)}`).join('|')
+}
+
+/**
+ * The picture inside a round place marker, for both the Leaflet and the GL map.
+ *
+ * Sized by its style and not by width/height attributes, because stylesheet rules
+ * beat attributes: Tailwind's preflight gives every img `height: auto`, and
+ * Leaflet's marker pane adds `width: auto`. The 48px square thumbs got away with
+ * that. An uploaded photo kept its own proportions on the GL map and its full pixel
+ * size on Leaflet, where only the rounded-off corner of a 4000px image lands inside
+ * the circle, so the marker showed nothing but its category colour.
+ */
+export function markerPhotoHtml(url: string): string {
+ return `})
`
+}
diff --git a/client/src/components/Packing/useBagTotalsPing.ts b/client/src/components/Packing/useBagTotalsPing.ts
index e63687749..c0c2fa8a9 100644
--- a/client/src/components/Packing/useBagTotalsPing.ts
+++ b/client/src/components/Packing/useBagTotalsPing.ts
@@ -1,94 +1,13 @@
-import { useEffect, useRef } from 'react'
-import { addListener, removeListener } from '../../api/websocket'
-import { isEffectivelyOnline, onNetworkModeChange } from '../../sync/networkMode'
-
-/**
- * How long pings are collected before one refetch goes out.
- *
- * Long enough to fold a burst into a single request — clearing twelve checked
- * items issues twelve deletes, and an import writes a whole list — short enough
- * that a single edit still reads as instant.
- */
-const COALESCE_MS = 250
+import { useServerPing } from '../../sync/useServerPing'
/**
* Re-read the bag weights when the server says they moved (#2191).
*
* The ping is content-free by design: totals are summed across every member,
* including people whose items this client may not see, so the event cannot
- * carry the new numbers without leaking what produced them. That makes every
- * ping a refetch, which is why this coalesces bursts and never lets two
- * requests overlap — the server pings the whole room, the originating socket
- * included, so a busy trip would otherwise have every client refetching once
- * per written item.
- *
- * A ping sent while this client is disconnected is gone for good, and bags have
- * no offline cache to sync back, so the two moments where that can have happened
- * count as pings of their own: the room re-join after a reconnect, and the
- * return to online.
- *
- * `reload` may change identity every render; the latest one is always used.
+ * carry the new numbers without leaking what produced them. `useServerPing`
+ * carries the coalescing, the in-flight guard and the reconnect handling.
*/
export function useBagTotalsPing(enabled: boolean, reload: () => Promise): void {
- const reloadRef = useRef(reload)
- reloadRef.current = reload
-
- useEffect(() => {
- if (!enabled) return
- let timer: ReturnType | null = null
- let inFlight = false
- /** A ping that arrived while a refetch was running: serve it once that lands. */
- let pendingAfterFlight = false
- let cancelled = false
-
- const run = (): void => {
- if (cancelled) return
- if (inFlight) {
- pendingAfterFlight = true
- return
- }
- inFlight = true
- void reloadRef.current().finally(() => {
- inFlight = false
- if (pendingAfterFlight && !cancelled) {
- pendingAfterFlight = false
- run()
- }
- })
- }
-
- const schedule = (): void => {
- if (timer) return // already collecting this burst
- timer = setTimeout(() => {
- timer = null
- run()
- }, COALESCE_MS)
- }
-
- const handler = (event: Record) => {
- // 'joined' is the room re-join the socket sends on every reconnect, so it
- // is also the moment the totals on screen are the ones from before the
- // drop: whatever moved them in the meantime pinged into a closed socket.
- if (event.type !== 'packing:bag-totals' && event.type !== 'joined') return
- schedule()
- }
-
- let wasOnline = isEffectivelyOnline()
- const onMode = (): void => {
- const online = isEffectivelyOnline()
- // Only the way back matters: that is when the surfaces stop summing what
- // this client can see and go back to trusting the server numbers.
- if (online && !wasOnline) schedule()
- wasOnline = online
- }
-
- addListener(handler)
- const unsubscribeMode = onNetworkModeChange(onMode)
- return () => {
- cancelled = true
- removeListener(handler)
- unsubscribeMode()
- if (timer) clearTimeout(timer)
- }
- }, [enabled])
+ useServerPing('packing:bag-totals', enabled, reload)
}
diff --git a/client/src/components/Planner/PlaceFormModal.test.tsx b/client/src/components/Planner/PlaceFormModal.test.tsx
index 32ac8a7aa..ed99d04b1 100644
--- a/client/src/components/Planner/PlaceFormModal.test.tsx
+++ b/client/src/components/Planner/PlaceFormModal.test.tsx
@@ -585,6 +585,20 @@ describe('PlaceFormModal', () => {
expect(screen.getByDisplayValue('20:34')).toBeInTheDocument();
});
+ it('FE-PLANNER-PLACEFORM-086: on a road trip the End says the drive leaves at it', () => {
+ const place = buildPlace({ name: 'Test', place_time: '09:00', end_time: '14:00' });
+ const assignment = buildAssignment({ id: 10, day_id: 5, place });
+ render() => string
}
-function TimeSection({ form, handleChange, assignmentId, dayAssignments, hasTimeError, t }: TimeSectionProps) {
+function TimeSection({ form, handleChange, assignmentId, dayAssignments, hasTimeError, endIsLeave, t }: TimeSectionProps) {
const collisions = useMemo(() => {
if (!assignmentId || !form.place_time || form.place_time.length < 5) return []
@@ -1311,6 +1317,7 @@ function TimeSection({ form, handleChange, assignmentId, dayAssignments, hasTime
value={form.end_time}
onChange={v => handleChange('end_time', v)}
/>
+ {endIsLeave &&
{hasTimeError && (
diff --git a/client/src/components/Roadtrip/RoadtripSidebar.test.tsx b/client/src/components/Roadtrip/RoadtripSidebar.test.tsx
index dbb63d409..13a6c42c4 100644
--- a/client/src/components/Roadtrip/RoadtripSidebar.test.tsx
+++ b/client/src/components/Roadtrip/RoadtripSidebar.test.tsx
@@ -322,7 +322,10 @@ describe('RoadtripSidebar', () => {
const add = within(chain).getByText('+')
fireEvent.click(add)
- expect(onEditStay).toHaveBeenCalledWith({ placeId: 20, name: 'Berlin', minutes: null, arrival: null })
+ // The visit rides along with the place, so the dialog can reach its end time.
+ expect(onEditStay).toHaveBeenCalledWith({
+ placeId: 20, name: 'Berlin', minutes: null, arrival: null, departure: null, leaveAt: null, missedBy: null, assignmentId: 2, dayId: 1,
+ })
})
it('FE-ROADTRIP-SIDEBAR-034: a pause reached late says so, the same as a numbered stop', () => {
@@ -342,6 +345,53 @@ describe('RoadtripSidebar', () => {
expect(screen.getByLabelText(/45/)).toBeInTheDocument()
})
+ it('FE-ROADTRIP-SIDEBAR-049: a stop left at a set time shows the stay that makes, and until when', () => {
+ // The stay the place carries is 30 min; the End at two is what the drive keeps to.
+ const onEditStay = vi.fn()
+ const stops = [
+ stop({ assignmentId: 1, name: 'Hamburg' }),
+ stop({ assignmentId: 2, name: 'Lueneburg', dwellMinutes: 30, leaveAt: '14:00' }),
+ ]
+ const schedule = {
+ entries: [
+ { arrival: '09:00', departure: '09:00', anchored: true, dayOffset: 0 },
+ { arrival: '10:00', departure: '14:00', anchored: false, dayOffset: 0 },
+ ],
+ warnings: [],
+ }
+ wrap(
-
-
-
- {place.image_url && !imgBusy && (
-
-
-
+ {/* Chip and cover controls share the top bar. The controls keep the end and
+ never shrink, so a long category name ellipsizes instead of sliding under
+ them, however many buttons there are and whatever size phones give them. */}
+ >({})
const thumbRafRef = useRef(null)
- const placeIds = useMemo(() => places.map(p => p.id).join(','), [places])
+ const photoSources = useMemo(() => photoSourcesKey(places), [places])
// Flattened [lat,lng] points of the selected day's route, so the bounds fit can
// include the full polyline once it has been computed.
const routeCoords = useMemo<[number, number][]>(() => (route || []).flat() as [number, number][], [route])
@@ -895,7 +895,7 @@ export const MapView = memo(function MapView({
thumbRafRef.current = null
}
}
- }, [placeIds, placesPhotosEnabled])
+ }, [photoSources, placesPhotosEnabled])
const isTouchDevice = typeof window !== 'undefined' && navigator.maxTouchPoints > 0
// Drag a marker onto a day (#891). Pointer-driven, so it is off wherever
diff --git a/client/src/components/Map/MapViewGL.test.tsx b/client/src/components/Map/MapViewGL.test.tsx
index 513e1ddc1..43e0d9104 100644
--- a/client/src/components/Map/MapViewGL.test.tsx
+++ b/client/src/components/Map/MapViewGL.test.tsx
@@ -1735,7 +1735,7 @@ describe('MapViewGL', () => {
expect(srcs()).toContain('data:image/png;base64,BBB')
})
- it('FE-COMP-MAPVIEWGL-056: an in-flight photo is not requested twice and the proxy url is used as the id', async () => {
+ it('FE-COMP-MAPVIEWGL-056: an in-flight photo is not requested twice and a picked proxy url is both id and cache key', async () => {
vi.mocked(photoService.isLoading).mockImplementation((key: string) => key === 'osm-loading')
const places = [
buildMapPlace({ id: 94, lat: 48.4, lng: 2.4, osm_id: 'osm-loading' }),
@@ -1746,7 +1746,56 @@ describe('MapViewGL', () => {
await act(async () => {})
expect(photoService.fetchPhoto).toHaveBeenCalledTimes(1)
- expect(photoService.fetchPhoto).toHaveBeenCalledWith('osm-5', '/api/maps/place-photo/abc', 48.5, 2.5, 'Museum')
+ expect(photoService.fetchPhoto).toHaveBeenCalledWith('/api/maps/place-photo/abc', '/api/maps/place-photo/abc', 48.5, 2.5, 'Museum')
+ })
+
+ it('FE-COMP-MAPVIEWGL-101: an uploaded photo fills its marker whatever its proportions', async () => {
+ // A phone photo is no 48px square like the thumbs. Sized by attributes it lost to
+ // the stylesheet's `height: auto` and sat as a sliver in a disc of category colour.
+ loadOnAttach()
+ render()
+ : undefined
+ ))
+ const place = buildMapPlace({ id: 16, lat: 48.16, lng: 2.16, google_place_id: 'gp-16', name: 'Tower', image_url: first })
+ const { rerender } = render(})
+ ${markerPhotoHtml(photoUrl)}
${badgeHtml}
`
@@ -1720,7 +1719,7 @@ export function MapViewGL({
// simultaneous thumb arrivals into one re-render.
const pendingThumbsRef = useRef
+ {place.category?.name && (
+
+
+ {canEdit && onUploadImage && (
+ <>
+
+ {place.image_url && !imgBusy && (
+
+
+
+ )}
+
+
+
+
)}
-
+
- )}
+
{editing
? setName(e.target.value)} className="col-detail-name-input" autoFocus aria-label={t('collections.listName')} />
diff --git a/client/src/components/Files/FileManager.test.tsx b/client/src/components/Files/FileManager.test.tsx
index 0ff151f32..7bd24504e 100644
--- a/client/src/components/Files/FileManager.test.tsx
+++ b/client/src/components/Files/FileManager.test.tsx
@@ -1,10 +1,11 @@
-// FE-COMP-FILEMANAGER-001 to FE-COMP-FILEMANAGER-012
+// FE-COMP-FILEMANAGER-001 to FE-COMP-FILEMANAGER-038
import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { server } from '../../../tests/helpers/msw/server';
import { useAuthStore } from '../../store/authStore';
import { useTripStore } from '../../store/tripStore';
+import { useDocSyncOfferStore } from '../../store/docSyncOfferStore';
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
import { buildUser, buildTrip } from '../../../tests/helpers/factories';
import type { TripFile } from '../../types';
@@ -104,6 +105,15 @@ beforeEach(() => {
}),
);
+ // Document sync, as a fresh install has it: every provider off, nothing bound.
+ useDocSyncOfferStore.setState({ bound: {}, providers: null });
+ server.use(
+ http.get('/api/trips/:tripId/docsync/providers', () => HttpResponse.json([])),
+ http.get('/api/trips/:tripId/docsync/links', () => HttpResponse.json([])),
+ http.get('/api/trips/:tripId/docsync/connections', () => HttpResponse.json([])),
+ http.get('/api/trips/:tripId/docsync/status', () => HttpResponse.json({ links: [], items: {} })),
+ );
+
// Stub window.confirm
vi.spyOn(window, 'confirm').mockReturnValue(true);
});
@@ -631,4 +641,60 @@ describe('FileManager', () => {
expect(call[0]).toBeInstanceOf(FormData);
});
});
+
+ describe('document sync button', () => {
+ const paperless = { id: 'paperless', name: 'Paperless-ngx', description: null, icon: 'paperless', available: true, fields: [] };
+ const trashButton = () => screen.getByText('Trash').closest('button') as HTMLButtonElement;
+
+ it('FE-COMP-FILEMANAGER-036: with no provider on and nothing bound there is no sync button, and the trash sits flush right', async () => {
+ const asked: string[] = [];
+ server.use(
+ http.get('/api/trips/:tripId/docsync/links', () => {
+ asked.push('links');
+ return HttpResponse.json([]);
+ }),
+ );
+ render( S.setShowDocSync(false)}
+ />
+ )}
+
{/* Toolbar */}
`,
@@ -543,7 +543,7 @@ function MapContextMenuHandler({ onContextMenu }: { onContextMenu: ((e: L.Leafle
// Module-level photo cache shared with PlaceAvatar
import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
-import { isCustomPlaceImage, photoCacheKey } from './placePhoto'
+import { isCustomPlaceImage, markerPhotoHtml, photoCacheKey, photoSourcesKey } from './placePhoto'
import { useAuthStore } from '../../store/authStore'
import { useGeolocation } from '../../hooks/useGeolocation'
import LocationButton from './LocationButton'
@@ -838,7 +838,7 @@ export const MapView = memo(function MapView({
const pendingThumbsRef = useRef
)}
+ {/* Opens the sync panel. Placed next to the trash rather than in a menu
+ because the question it answers, "where do these documents live",
+ belongs on the same screen as the documents. Only where there is
+ something behind it: see useDocSyncOffered. */}
+ {docSyncOffered && (
+
+ )}
+
+ {/* The first of the two takes the free space, so without the sync
+ button the trash sits flush right the way it always has. */}
${badgeHtml}
{t('roadtrip.stop.endIsLeave')}
}
-
-
- {t('roadtrip.stay.arrive')}
-
- {times.arrive}
-
-
- ) : null}
+ {times ?
{PRESETS.map(value => (
@@ -237,3 +225,106 @@ export default function RoadtripStayModal({ stop, onClose, onSave }: RoadtripSta
)
}
+
+/**
+ * The dialog for a stop the traveller leaves at a set time.
+ *
+ * Nothing to choose: the stay is whatever is left between the arrival and that time, so
+ * it is shown rather than offered. The one thing to do here is take the end time off the
+ * visit, and the ordinary dialog takes over the moment that lands.
+ *
+ * The sentence under the number says what the drive actually does. Reached too late it
+ * leaves on arrival, which is the case this dialog gets opened to fix; with the travel
+ * hours over first it goes on the next morning. Saying "leaves at 14:00" over a box that
+ * reads 14:30 gave two departures for one stop.
+ */
+function LeaveTime({ stop, leave, until: leaveAt, is12h, onClose }: {
+ stop: StayDraft
+ leave: LeaveMode
+ until: string
+ is12h: boolean
+ onClose: () => void
+}): React.ReactElement {
+ const { t } = useTranslation()
+ const until = formatClockTime(leaveAt, is12h)
+ const arrive = stop.arrival ? formatClockTime(stop.arrival, is12h) : null
+ const departure = stop.departure ? formatClockTime(stop.departure, is12h) : until
+ return (
+
+
+ )
+}
+
+/** Arrival, arrow, departure: the two ends of the stay, with the day the second lands on. */
+function ArriveLeave({ arrive, leave, carry = 0 }: { arrive: string; leave: string; carry?: number }): React.ReactElement {
+ const { t } = useTranslation()
+ return (
+ = {}): RoadtripStop {
return {
@@ -277,6 +277,23 @@ describe('pickWarning', () => {
it('FE-RTROW-014: nothing to report is null, not a placeholder', () => {
expect(pickWarning([])).toBeNull()
})
+
+ it('FE-RTROW-043: missing the time a stop is left at ranks right after being late for it', () => {
+ const missed: ScheduleWarning = { index: 0, code: 'missedLeave', minutes: 30 }
+ expect(pickWarning([{ index: 0, code: 'range', sinceKm: 700 }, missed])).toBe(missed)
+ expect(pickWarning([missed, { index: 0, code: 'late', minutes: 5 }])?.code).toBe('late')
+ })
+})
+
+describe('a stop left at a set time', () => {
+ it('FE-RTROW-044: its row carries the stay the time makes, not the one the place has', () => {
+ const d = day([stop('A'), stop('Bremen', { dwellMinutes: 30, leaveAt: '14:00' })], {
+ schedule: { entries: [entry('09:00'), entry('10:00', { departure: '14:00' })], warnings: [] },
+ })
+ const [, bremen] = stopRows(roadtripRows(d))
+ expect(bremen.dwellMinutes).toBe(240)
+ expect(bremen.departure).toBe('14:00')
+ })
})
describe('stageOf', () => {
diff --git a/client/src/components/Roadtrip/roadtripRowModel.ts b/client/src/components/Roadtrip/roadtripRowModel.ts
index 4a51c8cc3..8659e006b 100644
--- a/client/src/components/Roadtrip/roadtripRowModel.ts
+++ b/client/src/components/Roadtrip/roadtripRowModel.ts
@@ -1,5 +1,6 @@
import { isServiceStopType, type ScheduleEntry, type ScheduleWarning } from './roadtripModel'
import type { RoadtripDay, RoadtripStop, RouteSegment } from '@trek/shared/roadtrip'
+import { readStay } from './stayReading'
/**
* A road trip day, flattened into the rows a screen draws, with no React in sight.
@@ -32,12 +33,13 @@ export interface StopRow {
entry: ScheduleEntry | undefined
/** The clock this row shows on the right: when the traveller gets there. */
time: string | null
- /** When they leave again, which is arrival plus the stay. Null without a schedule. */
+ /** When they leave again: arrival plus the stay, or the time set to leave. Null without a schedule. */
departure: string | null
/** True when a person pinned that time, which is what the pin in front of it means. */
pinned: boolean
/** At most two marks fit a 375px row. This is the one warning that earned the second. */
warning: ScheduleWarning | null
+ /** How long the stop is stood at, which for one left at a set time is what that time leaves. */
dwellMinutes: number | null
offRoadMeters: number | null
}
@@ -47,14 +49,15 @@ export interface StopRow {
*
* The desktop stacks all of them, which is honest on a 420px rail and unreadable on a
* phone. The order is by what changes the next decision soonest: being late moves every
- * arrival after it, running dry strands the car, and an over-long leg is a planning
- * remark you can act on tonight.
+ * arrival after it, and so does missing the time a stop was meant to be left at; running
+ * dry strands the car; and an over-long leg is a planning remark you can act on tonight.
*/
const WARNING_RANK: Record = {
late: 0,
- range: 1,
- leg: 2,
- overnight: 3,
+ missedLeave: 1,
+ range: 2,
+ leg: 3,
+ overnight: 4,
}
export function pickWarning(warnings: readonly ScheduleWarning[]): ScheduleWarning | null {
@@ -92,7 +95,7 @@ function stopRow(
departure: entry?.departure ?? null,
pinned: !!entry?.anchored,
warning: pickWarning(mine),
- dwellMinutes: stop.dwellMinutes,
+ dwellMinutes: readStay(stop, entry).minutes,
offRoadMeters: stop.offRoadMeters ?? null,
}
}
diff --git a/client/src/components/Roadtrip/stayReading.test.ts b/client/src/components/Roadtrip/stayReading.test.ts
new file mode 100644
index 000000000..47795cb8c
--- /dev/null
+++ b/client/src/components/Roadtrip/stayReading.test.ts
@@ -0,0 +1,144 @@
+import { describe, expect, it, vi } from 'vitest'
+import type { RoadtripDay, RoadtripStop } from '@trek/shared/roadtrip'
+import { inspectorStay, locateStop, missedLeaveOf, readStay, shownStay, stayDraftOf } from './stayReading'
+
+// FE-ROADTRIP-STAY-001..014: what a stay badge reads for a stop, and where the dialog
+// finds the visit it opens on.
+
+const stop = (over: Partial = {}): RoadtripStop => ({
+ assignmentId: 7,
+ ownerDayId: 1,
+ ownerIndex: 1,
+ placeId: 70,
+ name: 'Lueneburg',
+ lat: 53.2,
+ lng: 10.4,
+ time: null,
+ dwellMinutes: 30,
+ legMode: null,
+ incomingLegMode: null,
+ stopType: null,
+ ...over,
+})
+
+const entry = (arrival: string | null, departure: string | null) => ({ arrival, departure, anchored: false, dayOffset: 0 })
+
+const day = (dayId: number, stops: RoadtripStop[], entries = stops.map(() => entry('10:00', '14:00'))): RoadtripDay =>
+ ({ dayId, dayNumber: dayId, date: null, title: null, stops, schedule: { entries, warnings: [] } }) as unknown as RoadtripDay
+
+describe('readStay', () => {
+ it('FE-ROADTRIP-STAY-001: an ordinary stop reads the stay the place carries', () => {
+ expect(readStay(stop(), entry('10:00', '10:30'))).toEqual({ minutes: 30, until: null })
+ })
+
+ it('FE-ROADTRIP-STAY-002: a stop left at a set time reads the stay the schedule made of it', () => {
+ expect(readStay(stop({ leaveAt: '14:00' }), entry('10:00', '14:00'))).toEqual({ minutes: 240, until: '14:00' })
+ })
+
+ it('FE-ROADTRIP-STAY-003: a stay across midnight is not read as a negative one', () => {
+ expect(readStay(stop({ leaveAt: '01:00' }), entry('23:30', '01:00')).minutes).toBe(90)
+ })
+
+ it('FE-ROADTRIP-STAY-004: without an arrival it can only say until when', () => {
+ expect(readStay(stop({ leaveAt: '14:00:00' }), entry(null, '14:00'))).toEqual({ minutes: null, until: '14:00' })
+ })
+
+ it('FE-ROADTRIP-STAY-005: a leave time that is not a clock is no leave time', () => {
+ expect(readStay(stop({ leaveAt: 'later' }), undefined)).toEqual({ minutes: 30, until: null })
+ })
+
+ it('FE-ROADTRIP-STAY-012: reached after the time, it is left on arrival and stays nothing', () => {
+ expect(readStay(stop({ leaveAt: '14:00' }), entry('14:30', '14:30'))).toEqual({ minutes: 0, until: '14:00' })
+ })
+
+ it('FE-ROADTRIP-STAY-013: travel hours that end first give no length, only until when', () => {
+ // Reached at half past ten, the window shuts at six, the End is at eight: the row's
+ // 18:00 is where the day stops, not a departure, so seven and a half hours would be
+ // a stay that ends neither at the End nor when the drive goes on the next morning.
+ expect(readStay(stop({ leaveAt: '20:00' }), entry('10:30', '18:00'))).toEqual({
+ minutes: null,
+ until: '20:00',
+ dayEndsFirst: true,
+ })
+ })
+})
+
+describe('shownStay', () => {
+ it('FE-ROADTRIP-STAY-006: no stay on an ordinary stop shows nothing, a zero until a time shows zero', () => {
+ expect(shownStay({ minutes: 0, until: null })).toBeNull()
+ expect(shownStay({ minutes: null, until: null })).toBeNull()
+ expect(shownStay({ minutes: 45, until: null })).toBe(45)
+ expect(shownStay({ minutes: 0, until: '14:00' })).toBe(0)
+ })
+})
+
+describe('locateStop', () => {
+ it('FE-ROADTRIP-STAY-007: finds the visit on the card that draws it, starting at the one it names', () => {
+ const drawn = stop({ ownerDayId: 1 })
+ const days = [day(1, [stop({ assignmentId: 1 })]), day(2, [drawn])]
+ const located = locateStop(days, 7, 1)
+ expect(located).toMatchObject({ index: 0, stop: drawn })
+ expect(located?.day.dayId).toBe(2)
+ expect(locateStop(days, 99)).toBeNull()
+ })
+
+ it('FE-ROADTRIP-STAY-008: an automatic night standing on the stop is not the stop', () => {
+ const night = stop({ automaticNight: { phase: 'end', fromDayNumber: 1 } })
+ expect(locateStop([day(1, [night])], 7)).toBeNull()
+ })
+})
+
+describe('the dialog draft', () => {
+ it('FE-ROADTRIP-STAY-009: carries the visit, its end time and both of its clocks', () => {
+ expect(stayDraftOf(stop({ leaveAt: '14:00' }), entry('10:00', '14:00'))).toEqual({
+ placeId: 70,
+ name: 'Lueneburg',
+ minutes: 30,
+ arrival: '10:00',
+ departure: '14:00',
+ leaveAt: '14:00',
+ missedBy: null,
+ assignmentId: 7,
+ dayId: 1,
+ })
+ })
+
+ it('FE-ROADTRIP-STAY-014: carries the finding of a missed time from the card, for the inspector too', () => {
+ const visit = stop({ leaveAt: '14:00' })
+ const late = {
+ ...day(1, [stop({ assignmentId: 1 }), visit], [entry('13:30', '13:30'), entry('14:30', '14:30')]),
+ schedule: {
+ entries: [entry('13:30', '13:30'), entry('14:30', '14:30')],
+ warnings: [
+ { index: 1, code: 'late' as const, minutes: 5 },
+ { index: 1, code: 'missedLeave' as const, minutes: 30 },
+ ],
+ },
+ } as unknown as RoadtripDay
+ expect(missedLeaveOf(late, 1)).toBe(30)
+ expect(missedLeaveOf(late, 0)).toBeNull()
+ expect(stayDraftOf(visit, entry('14:30', '14:30'), 30).missedBy).toBe(30)
+ const onEdit = vi.fn()
+ inspectorStay([late], visit, { id: 70, name: 'Lueneburg' }, onEdit).onEdit?.()
+ expect(onEdit).toHaveBeenCalledWith(expect.objectContaining({ missedBy: 30, departure: '14:30' }))
+ })
+
+ it('FE-ROADTRIP-STAY-010: the inspector tile reads the drive the rail reads', () => {
+ const onEdit = vi.fn()
+ const visit = stop({ leaveAt: '14:00' })
+ const tile = inspectorStay([day(1, [visit])], visit, { id: 70, name: 'Lueneburg', duration_minutes: 30 }, onEdit)
+ expect(tile).toMatchObject({ minutes: 240, until: '14:00' })
+ tile.onEdit?.()
+ expect(onEdit).toHaveBeenCalledWith(expect.objectContaining({ leaveAt: '14:00', arrival: '10:00', assignmentId: 7 }))
+ })
+
+ it('FE-ROADTRIP-STAY-011: a place not on the drive falls back to the stay it carries', () => {
+ const onEdit = vi.fn()
+ const tile = inspectorStay([], undefined, { id: 70, name: 'Lueneburg', duration_minutes: 45 }, onEdit)
+ expect(tile).toMatchObject({ minutes: 45, until: null })
+ tile.onEdit?.()
+ expect(onEdit).toHaveBeenCalledWith({ placeId: 70, name: 'Lueneburg', minutes: 45, arrival: null })
+ expect(inspectorStay([], stop({ dwellMinutes: 20 }), { id: 70, name: 'Lueneburg' }).onEdit).toBeUndefined()
+ expect(inspectorStay([], stop({ dwellMinutes: 20 }), { id: 70, name: 'Lueneburg' }).minutes).toBe(20)
+ })
+})
diff --git a/client/src/components/Roadtrip/stayReading.ts b/client/src/components/Roadtrip/stayReading.ts
new file mode 100644
index 000000000..76faf9cd3
--- /dev/null
+++ b/client/src/components/Roadtrip/stayReading.ts
@@ -0,0 +1,131 @@
+import { formatClock, parseClock, type ScheduleEntry } from './roadtripModel'
+import type { RoadtripDay, RoadtripStop } from '@trek/shared/roadtrip'
+import type { StayDraft } from './RoadtripStayModal'
+import type { RoadtripStayControl } from './VisitControls'
+
+/**
+ * How long a stop is stood at, the way a stay badge shows it.
+ *
+ * For most stops that is the stay the place carries. A stop with a time set to leave it
+ * is stood at from whenever the drive gets there until that time, so its stay is what
+ * the schedule made of it and `until` says when it ends. The number is read here and
+ * never written back to the place: the stay belongs to the place, the end time to one
+ * visit of it, and a stored copy would be wrong the moment the arrival moved.
+ */
+export interface StayReading {
+ minutes: number | null
+ /** The time the stop is left at as it was set, or null for a stop that takes its stay. */
+ until: string | null
+ /**
+ * The daily travel hours close before `until` comes. The stop is where that day ends and
+ * the drive goes on the next morning, so it is left neither at that time nor at the one
+ * the row shows, and no length measured against either would be true.
+ */
+ dayEndsFirst?: boolean
+}
+
+export function readStay(
+ stop: Pick,
+ entry: { arrival?: string | null; departure?: string | null } | null | undefined,
+): StayReading {
+ const leave = parseClock(stop.leaveAt)
+ if (leave === null) return { minutes: stop.dwellMinutes, until: null }
+ const until = formatClock(leave)
+ const arrival = parseClock(entry?.arrival)
+ const departure = parseClock(entry?.departure)
+ if (arrival === null || departure === null) return { minutes: null, until }
+ // A schedule leaves such a stop at the time, or on arrival when it got there too late
+ // for it. Any other departure is the window shutting first.
+ if (departure !== leave && departure !== arrival) return { minutes: null, until, dayEndsFirst: true }
+ return {
+ // Round the clock once: reached before midnight and left the morning after, the
+ // departure reads as the smaller of the two.
+ minutes: (departure - arrival + 1440) % 1440,
+ until,
+ }
+}
+
+/** How late the drive gets to a stop for the time it is set to be left at, or null. */
+export function missedLeaveOf(day: Pick, index: number): number | null {
+ return day.schedule.warnings.find(w => w.index === index && w.code === 'missedLeave')?.minutes ?? null
+}
+
+/**
+ * The length a stay badge prints, or null for none.
+ *
+ * No stay on an ordinary stop is nothing to show. On a stop left at a set time a zero is
+ * an answer: it is left the moment the drive gets there.
+ */
+export function shownStay(stay: StayReading): number | null {
+ return stay.until ? stay.minutes : stay.minutes || null
+}
+
+/** One visit on the routed days, with the entry of the card that draws it. */
+export interface LocatedStop {
+ day: RoadtripDay
+ index: number
+ stop: RoadtripStop
+ entry: ScheduleEntry | undefined
+}
+
+/**
+ * Finds a visit across the routed days.
+ *
+ * A stop reached after a night drive is drawn on the card of the day it is reached on,
+ * not the one it is stored on, so `preferDayId` is only where the search starts.
+ */
+export function locateStop(
+ days: readonly RoadtripDay[],
+ assignmentId: number,
+ preferDayId?: number | null,
+): LocatedStop | null {
+ const preferred = days.find(d => d.dayId === preferDayId)
+ for (const day of preferred ? [preferred, ...days.filter(d => d !== preferred)] : days) {
+ const index = day.stops.findIndex(s => s.assignmentId === assignmentId && !s.automaticNight)
+ if (index >= 0) return { day, index, stop: day.stops[index], entry: day.schedule.entries[index] }
+ }
+ return null
+}
+
+/**
+ * What the stay dialog opens on for one stop of a card.
+ *
+ * `missedBy` is the card's own finding, carried rather than worked out again from the two
+ * clocks: which day a leave time falls on is the schedule's call, and a second reading of
+ * it here is a second answer.
+ */
+export function stayDraftOf(stop: RoadtripStop, entry: ScheduleEntry | undefined, missedBy: number | null = null): StayDraft {
+ return {
+ placeId: stop.placeId,
+ name: stop.name,
+ minutes: stop.dwellMinutes,
+ arrival: entry?.arrival ?? null,
+ departure: entry?.departure ?? null,
+ leaveAt: stop.leaveAt ?? null,
+ missedBy,
+ assignmentId: stop.assignmentId,
+ dayId: stop.ownerDayId,
+ }
+}
+
+/**
+ * The place inspector's Stay tile.
+ *
+ * With the visit on the drive it reads the same as the rail does. A place selected
+ * without one it can be pinned to (planned twice, say) falls back to the stay it carries.
+ */
+export function inspectorStay(
+ days: readonly RoadtripDay[],
+ stop: RoadtripStop | undefined,
+ place: { id: number; name: string; duration_minutes?: number | null },
+ onEdit?: (draft: StayDraft) => void,
+): RoadtripStayControl {
+ const located = stop ? locateStop(days, stop.assignmentId, stop.ownerDayId) : null
+ const draft: StayDraft = located
+ ? stayDraftOf(located.stop, located.entry, missedLeaveOf(located.day, located.index))
+ : { placeId: place.id, name: place.name, minutes: place.duration_minutes ?? null, arrival: null }
+ const reading = located
+ ? readStay(located.stop, located.entry)
+ : { minutes: stop ? stop.dwellMinutes : place.duration_minutes ?? null, until: null }
+ return { ...reading, onEdit: onEdit ? () => onEdit(draft) : undefined }
+}
diff --git a/client/src/components/Roadtrip/useLeaveMode.test.ts b/client/src/components/Roadtrip/useLeaveMode.test.ts
new file mode 100644
index 000000000..e1aab1b17
--- /dev/null
+++ b/client/src/components/Roadtrip/useLeaveMode.test.ts
@@ -0,0 +1,203 @@
+import { act, renderHook, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { useLeaveMode, type LeaveSubject } from './useLeaveMode'
+import { useAuthStore } from '../../store/authStore'
+import { usePermissionsStore } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
+import { buildAssignment, buildPlace } from '../../../tests/helpers/factories'
+import { server } from '../../../tests/helpers/msw/server'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+
+// FE-ROADTRIP-LEAVE-001..014: the part of the stay dialog that is about a time set to
+// leave a stop, and how it takes that time off the visit.
+
+type AddToast = NonNullable
+
+const visit = {
+ id: 102,
+ day_id: 11,
+ place_id: 202,
+ order_index: 1,
+ assignment_time: '09:00',
+ assignment_end_time: '14:00',
+ place: { id: 202, name: 'Bremen', place_time: '09:00', end_time: '14:00' },
+}
+
+const subject: LeaveSubject = { leaveAt: '14:00', arrival: '10:00', departure: '14:00', assignmentId: 102, dayId: 11 }
+
+let setAssignmentTimes: ReturnType
+let updatePlace: ReturnType
+let refreshDays: ReturnType
+let addToast: ReturnType>
+
+beforeEach(() => {
+ resetAllStores()
+ setAssignmentTimes = vi.fn(async () => undefined)
+ updatePlace = vi.fn(async () => undefined)
+ refreshDays = vi.fn(async () => undefined)
+ addToast = vi.fn(() => 0)
+ window.__addToast = addToast
+ seedStore(useAuthStore, { user: { id: 1, role: 'user' } })
+ seedStore(useTripStore, { trip: { id: 4, user_id: 1 }, assignments: { '11': [visit] } })
+ useTripStore.setState({ setAssignmentTimes, updatePlace, refreshDays } as never)
+})
+
+afterEach(() => {
+ delete window.__addToast
+})
+
+describe('useLeaveMode', () => {
+ it('FE-ROADTRIP-LEAVE-001: reads the time the stop is left at and the stay that makes', () => {
+ const { result } = renderHook(() => useLeaveMode(subject))
+ expect(result.current).toMatchObject({ until: '14:00', minutes: 240, removing: false })
+ expect(result.current.remove).toBeTypeOf('function')
+ })
+
+ it('FE-ROADTRIP-LEAVE-002: an ordinary stay is nothing for it to answer', () => {
+ const { result } = renderHook(() => useLeaveMode({ ...subject, leaveAt: null }))
+ expect(result.current.until).toBeNull()
+ expect(renderHook(() => useLeaveMode(null)).result.current.until).toBeNull()
+ })
+
+ it('FE-ROADTRIP-LEAVE-003: removing clears the End through the time write and keeps the Start', async () => {
+ const { result } = renderHook(() => useLeaveMode(subject))
+ await act(async () => { await result.current.remove!() })
+ expect(setAssignmentTimes).toHaveBeenCalledWith(4, 11, 102, { place_time: '09:00', end_time: null })
+ // The day is read back as the place form reads it after the same write.
+ expect(refreshDays).toHaveBeenCalledWith(4)
+ expect(result.current.until).toBeNull()
+ })
+
+ it('FE-ROADTRIP-LEAVE-004: a refused write says so and leaves the end time standing', async () => {
+ setAssignmentTimes.mockRejectedValueOnce(new Error('Denied'))
+ const { result } = renderHook(() => useLeaveMode(subject))
+ await act(async () => { await result.current.remove!() })
+ expect(addToast).toHaveBeenCalledWith('Denied', 'error', undefined)
+ expect(result.current.until).toBe('14:00')
+ expect(refreshDays).not.toHaveBeenCalled()
+ })
+
+ it('FE-ROADTRIP-LEAVE-005: nothing to remove for a traveller who may not change the day', () => {
+ usePermissionsStore.setState({ permissions: { day_edit: 'trip_owner' } })
+ seedStore(useTripStore, { trip: { id: 4, user_id: 2 } })
+ const reader = renderHook(() => useLeaveMode(subject))
+ expect(reader.result.current.remove).toBeUndefined()
+ reader.unmount()
+ // Nor for a visit still waiting for the id the server gives it.
+ seedStore(useTripStore, { trip: { id: 4, user_id: 1 } })
+ expect(renderHook(() => useLeaveMode({ ...subject, assignmentId: -5 })).result.current.remove).toBeUndefined()
+ })
+
+ it('FE-ROADTRIP-LEAVE-006: an End only the place carries is taken off the place', async () => {
+ // The visit's own time write cannot reach it, so clearing that alone would change nothing.
+ seedStore(useTripStore, {
+ places: [{ id: 202, name: 'Bremen', end_time: '14:00' }],
+ assignments: { '11': [{ ...visit, assignment_end_time: null }] },
+ })
+ const { result } = renderHook(() => useLeaveMode(subject))
+ expect(result.current.until).toBe('14:00')
+ await act(async () => { await result.current.remove!() })
+ expect(setAssignmentTimes).not.toHaveBeenCalled()
+ expect(updatePlace).toHaveBeenCalledWith(4, 202, { end_time: null })
+ expect(result.current.until).toBeNull()
+ })
+
+ it.each([['the same', '14:00'], ['another', '11:00']])(
+ 'FE-ROADTRIP-LEAVE-009: with %s End on the place as well, removing clears both',
+ async (_label, placeEnd) => {
+ // A migration copied the place's End onto every visit, so older trips carry it
+ // twice. Clearing only the visit's left the stop leaving at the place's.
+ seedStore(useTripStore, { places: [{ id: 202, name: 'Bremen', end_time: placeEnd }] })
+ const { result } = renderHook(() => useLeaveMode(subject))
+ await act(async () => { await result.current.remove!() })
+ expect(setAssignmentTimes).toHaveBeenCalledWith(4, 11, 102, { place_time: '09:00', end_time: null })
+ expect(updatePlace).toHaveBeenCalledWith(4, 202, { end_time: null })
+ expect(result.current.until).toBeNull()
+ },
+ )
+
+ it('FE-ROADTRIP-LEAVE-010: not offered when another visit of the place still leans on its End', () => {
+ // Taking the place's End would take that visit's too, and keeping it keeps this one's.
+ const other = { id: 150, day_id: 12, place_id: 202, order_index: 0, assignment_time: null, assignment_end_time: null }
+ seedStore(useTripStore, {
+ places: [{ id: 202, name: 'Bremen', end_time: '14:00' }],
+ assignments: { '11': [visit], '12': [other] },
+ })
+ const leaning = renderHook(() => useLeaveMode(subject))
+ expect(leaning.result.current.until).toBe('14:00')
+ expect(leaning.result.current.remove).toBeUndefined()
+ leaning.unmount()
+ // One with an End of its own does not care what the place carries.
+ seedStore(useTripStore, { assignments: { '11': [visit], '12': [{ ...other, assignment_end_time: '16:00' }] } })
+ expect(renderHook(() => useLeaveMode(subject)).result.current.remove).toBeTypeOf('function')
+ })
+
+ it('FE-ROADTRIP-LEAVE-011: not offered to a traveller who may not edit the place its End sits on', () => {
+ usePermissionsStore.setState({ permissions: { place_edit: 'trip_owner' } })
+ seedStore(useTripStore, { trip: { id: 4, user_id: 2 }, places: [{ id: 202, name: 'Bremen', end_time: '14:00' }] })
+ expect(renderHook(() => useLeaveMode(subject)).result.current.remove).toBeUndefined()
+ })
+
+ it('FE-ROADTRIP-LEAVE-012: through the real store the stop has no End left afterwards', async () => {
+ // Nothing stubbed but the day read back: the visit's time write and the place write
+ // both go out, and the End the road trip reads for the visit is gone.
+ resetAllStores()
+ seedStore(useAuthStore, { user: { id: 1, role: 'user' } })
+ const pool = buildPlace({ id: 202, trip_id: 4, name: 'Bremen', place_time: null, end_time: '14:00' })
+ const stored = buildAssignment({
+ id: 102, day_id: 11, place_id: 202, assignment_time: '09:00', assignment_end_time: '14:00',
+ place: { ...pool, place_time: '09:00', end_time: '14:00' },
+ })
+ seedStore(useTripStore, { trip: { id: 4, user_id: 1 }, places: [pool], assignments: { '11': [stored] } })
+ useTripStore.setState({ refreshDays } as never)
+ server.use(
+ http.put('/api/trips/4/assignments/102/time', () =>
+ HttpResponse.json({ assignment: { ...stored, assignment_end_time: null, place: { ...pool, place_time: '09:00' } } })),
+ http.put('/api/trips/4/places/202', () => HttpResponse.json({ place: { ...pool, end_time: null } })),
+ )
+ const { result } = renderHook(() => useLeaveMode(subject))
+ await act(async () => { await result.current.remove!() })
+ const after = useTripStore.getState().assignments['11']![0]!
+ expect(after.assignment_end_time ?? after.place?.end_time ?? null).toBeNull()
+ expect(result.current.until).toBeNull()
+ expect(addToast).not.toHaveBeenCalled()
+ })
+
+ it('FE-ROADTRIP-LEAVE-013: a refused write shows what the server said, not the request library', async () => {
+ setAssignmentTimes.mockRejectedValueOnce({
+ message: 'Request failed with status code 404',
+ response: { status: 404, data: { error: 'Assignment not found' } },
+ })
+ const { result } = renderHook(() => useLeaveMode(subject))
+ await act(async () => { await result.current.remove!() })
+ expect(addToast).toHaveBeenCalledWith('Assignment not found', 'error', undefined)
+ // With nothing from the server, the translated fallback rather than the English boilerplate.
+ setAssignmentTimes.mockRejectedValueOnce({ message: 'Request failed with status code 500', response: { status: 500 } })
+ await act(async () => { await result.current.remove!() })
+ expect(addToast).toHaveBeenLastCalledWith('common.unknownError', 'error', undefined)
+ })
+
+ it('FE-ROADTRIP-LEAVE-014: hands on the finding of a missed time and a day that ends first', () => {
+ expect(renderHook(() => useLeaveMode({ ...subject, arrival: '14:30', departure: '14:30', missedBy: 30 })).result.current)
+ .toMatchObject({ until: '14:00', minutes: 0, missedBy: 30, dayEndsFirst: false })
+ expect(renderHook(() => useLeaveMode({ ...subject, leaveAt: '20:00', arrival: '10:30', departure: '18:00' })).result.current)
+ .toMatchObject({ until: '20:00', minutes: null, missedBy: null, dayEndsFirst: true })
+ })
+
+ it('FE-ROADTRIP-LEAVE-008: a visit gone from the store by the time of the tap is left alone', async () => {
+ const { result } = renderHook(() => useLeaveMode(subject))
+ const remove = result.current.remove!
+ act(() => seedStore(useTripStore, { assignments: { '11': [] } }))
+ await act(async () => { await remove() })
+ expect(setAssignmentTimes).not.toHaveBeenCalled()
+ })
+
+ it('FE-ROADTRIP-LEAVE-007: opened on another visit, the removal of the last one is forgotten', async () => {
+ const { result, rerender } = renderHook(({ s }) => useLeaveMode(s), { initialProps: { s: subject } })
+ await act(async () => { await result.current.remove!() })
+ expect(result.current.until).toBeNull()
+ rerender({ s: { ...subject, assignmentId: 103, leaveAt: '16:00' } })
+ await waitFor(() => expect(result.current.until).toBe('16:00'))
+ })
+})
diff --git a/client/src/components/Roadtrip/useLeaveMode.ts b/client/src/components/Roadtrip/useLeaveMode.ts
new file mode 100644
index 000000000..96f33ad91
--- /dev/null
+++ b/client/src/components/Roadtrip/useLeaveMode.ts
@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from '../../i18n/TranslationContext'
+import { useCanDo } from '../../store/permissionsStore'
+import { useTripStore } from '../../store/tripStore'
+import { getApiErrorMessage } from '../../types'
+import { useToast } from '../shared/Toast'
+import { readStay } from './stayReading'
+
+/** The visit a stay dialog is open on, as far as a time set to leave it goes. */
+export interface LeaveSubject {
+ leaveAt?: string | null
+ arrival?: string | null
+ departure?: string | null
+ /** How many minutes after the time the drive gets here, as the schedule found it. */
+ missedBy?: number | null
+ assignmentId?: number
+ /** The day the visit is stored on, which is where the store files it. */
+ dayId?: number
+}
+
+export interface LeaveMode {
+ /** The time the stop is left at, or null when the dialog is about an ordinary stay. */
+ until: string | null
+ /** How long that makes the stay, when the drive says when the stop is reached. */
+ minutes: number | null
+ /** The drive gets here this many minutes after the time, and leaves on arrival. */
+ missedBy: number | null
+ /** The travel hours close the day before the time comes, see `StayReading`. */
+ dayEndsFirst: boolean
+ /**
+ * Takes the end time off the visit. Absent for a traveller who may not make the writes
+ * that takes, and for an End that cannot go without taking another visit's with it: a
+ * button that changes nothing is worse than none.
+ */
+ remove?: () => Promise
+ removing: boolean
+}
+
+/**
+ * The half of the stay dialog that is about a time set to leave a stop.
+ *
+ * Shared by the desktop dialog and the phone sheet, so the two cannot answer differently.
+ * A stop the traveller leaves at a set time has no length to choose: it is stood at until
+ * then. So the dialog says when the drive leaves and what stay that makes, and offers to
+ * take the end time off the visit, after which the stay is a choice again.
+ *
+ * The End a visit is left at is its own, or else the one its place carries: the server
+ * reads COALESCE(assignment_end_time, places.end_time), and so do mergeAssignmentPlace and
+ * the road trip's stops. A migration copied the place's End onto every visit there was,
+ * so on older trips both hold it, and clearing only the visit's column left the stop
+ * leaving at the same time. Removing therefore clears both. The place's End is only taken
+ * when no other visit of the place still leans on it; when one does, the removal is not
+ * offered, because it could not take the End off this visit alone.
+ *
+ * The visit's own End is cleared through its time write, the one the place form saves
+ * Start and End with. That write sets both, so the visit's Start goes along as it stands.
+ */
+export function useLeaveMode(subject: LeaveSubject | null): LeaveMode {
+ const { t } = useTranslation()
+ const toast = useToast()
+ const can = useCanDo()
+ const trip = useTripStore(s => s.trip)
+ const [removed, setRemoved] = useState(false)
+ const [removing, setRemoving] = useState(false)
+ const assignmentId = subject?.assignmentId
+ const dayId = subject?.dayId
+ const leaveAt = subject?.leaveAt ?? null
+ const ownEnd = useTripStore(s => s.assignments[String(dayId)]?.find(a => a.id === assignmentId)?.assignment_end_time ?? null)
+ const placeId = useTripStore(s => s.assignments[String(dayId)]?.find(a => a.id === assignmentId)?.place_id ?? null)
+ const placeEnd = useTripStore(s => (placeId === null ? null : s.places.find(p => p.id === placeId)?.end_time ?? null))
+ const leanedOn = useTripStore(s => placeEnd !== null && Object.values(s.assignments).some(list =>
+ list.some(a => a.place_id === placeId && a.id !== assignmentId && a.assignment_end_time == null)))
+
+ // Opened on another visit, or on one whose end time changed: nothing was removed there.
+ useEffect(() => { setRemoved(false) }, [assignmentId, leaveAt])
+
+ const remove = useCallback(async () => {
+ const store = useTripStore.getState()
+ const visit = store.assignments[String(dayId)]?.find(a => a.id === assignmentId)
+ // Gone between the render that offered this and the tap.
+ if (!trip || !visit || dayId == null) return
+ const place = store.places.find(p => p.id === visit.place_id)
+ setRemoving(true)
+ try {
+ if (visit.assignment_end_time != null) {
+ await store.setAssignmentTimes(trip.id, dayId, visit.id, { place_time: visit.assignment_time ?? null, end_time: null })
+ }
+ if (place?.end_time != null) await store.updatePlace(trip.id, place.id, { end_time: null })
+ setRemoved(true)
+ // As the place form does after the same write: a Start can reorder the day on the
+ // server, and only the day read back shows it.
+ await store.refreshDays(trip.id)
+ } catch (err: unknown) {
+ toast.error(getApiErrorMessage(err, t('common.unknownError')))
+ } finally {
+ setRemoving(false)
+ }
+ }, [trip, dayId, assignmentId, toast, t])
+
+ const reading = readStay({ dwellMinutes: null, leaveAt }, subject)
+ const allowed = !!trip && assignmentId != null && assignmentId > 0 && (ownEnd !== null || placeEnd !== null)
+ && (ownEnd === null || can('day_edit', trip))
+ && (placeEnd === null || (can('place_edit', trip) && !leanedOn))
+ return {
+ until: removed ? null : reading.until,
+ minutes: reading.minutes,
+ missedBy: subject?.missedBy ?? null,
+ dayEndsFirst: reading.dayEndsFirst === true,
+ remove: allowed ? remove : undefined,
+ removing,
+ }
+}
diff --git a/client/src/components/Roadtrip/useRoadtripRoutes.test.ts b/client/src/components/Roadtrip/useRoadtripRoutes.test.ts
index 4227dcde8..02f986fbb 100644
--- a/client/src/components/Roadtrip/useRoadtripRoutes.test.ts
+++ b/client/src/components/Roadtrip/useRoadtripRoutes.test.ts
@@ -33,6 +33,10 @@ interface StopSpec {
incoming?: string | null
stopType?: string | null
noCoords?: boolean
+ /** The visit's own End. */
+ end?: string | null
+ /** An End only the place carries, for a visit that has none of its own. */
+ placeEnd?: string | null
}
function day(id: number, number: number, extra: Partial = {}): Day {
@@ -45,6 +49,7 @@ function assignment(spec: StopSpec, order: number): Assignment {
place_id: spec.id * 10,
order_index: order,
assignment_time: spec.time ?? null,
+ assignment_end_time: spec.end ?? null,
leg_transport_mode: spec.legMode ?? null,
incoming_leg_transport_mode: spec.incoming ?? null,
place: {
@@ -53,6 +58,9 @@ function assignment(spec: StopSpec, order: number): Assignment {
lat: spec.noCoords ? null : spec.at[0],
lng: spec.noCoords ? null : spec.at[1],
place_time: null,
+ // Folded in the way the store keeps a visit (mergeAssignmentPlace): its own End,
+ // or else the place's.
+ end_time: spec.end ?? spec.placeEnd ?? null,
duration_minutes: spec.dwell ?? null,
stop_type: spec.stopType ?? null,
},
@@ -764,6 +772,80 @@ describe('useRoadtripRoutes', () => {
})
})
+describe('a visit End on the road trip', () => {
+ /** An hour from Hamburg to Lueneburg and another on to Berlin. */
+ const hourly = () => ({
+ coordinates: [HAMBURG, LUENEBURG, BERLIN],
+ distance: 200000,
+ duration: 7200,
+ legs: [{ distance: 100000, duration: 3600, text: '' }, { distance: 100000, duration: 3600, text: '' }],
+ })
+
+ async function drive(stops: StopSpec[]) {
+ calculateRouteWithLegs.mockResolvedValue(hourly())
+ const { result } = renderHook(() => useRoadtripRoutes(7, [day(1, 1)], map(1, stops)))
+ await waitFor(() => expect(result.current.loading).toBe(false))
+ await waitFor(() => expect(result.current.days).toHaveLength(1))
+ return result.current.days[0]
+ }
+
+ afterEach(() => act(() => useSettingsStore.setState({ settings: { ...DEFAULT_SETTINGS } })))
+
+ it('FE-ROADTRIP-ROUTES-030: the drive leaves a stop at its End, not after its stay', async () => {
+ const d = await drive([
+ { id: 1, at: HAMBURG, time: '09:00', dwell: 0 },
+ { id: 2, at: LUENEBURG, end: '14:00', dwell: 30 },
+ { id: 3, at: BERLIN },
+ ])
+ expect(d.stops[1].leaveAt).toBe('14:00')
+ expect(d.schedule.entries[1]).toMatchObject({ arrival: '10:00', departure: '14:00' })
+ expect(d.schedule.entries[2].arrival).toBe('15:00')
+ expect(d.schedule.warnings).toEqual([])
+ })
+
+ it('FE-ROADTRIP-ROUTES-031: an End the place carries counts for a visit without its own', async () => {
+ const d = await drive([
+ { id: 1, at: HAMBURG, time: '09:00', dwell: 0 },
+ { id: 2, at: LUENEBURG, placeEnd: '13:00', dwell: 30 },
+ { id: 3, at: BERLIN },
+ ])
+ expect(d.schedule.entries[1].departure).toBe('13:00')
+ expect(d.schedule.entries[2].arrival).toBe('14:00')
+ })
+
+ it('FE-ROADTRIP-ROUTES-032: Start and End together make the stay the time between them', async () => {
+ const d = await drive([
+ { id: 1, at: HAMBURG, time: '09:00', dwell: 0 },
+ { id: 2, at: LUENEBURG, time: '10:00', end: '14:00', dwell: 60 },
+ { id: 3, at: BERLIN },
+ ])
+ expect(d.schedule.entries[1]).toMatchObject({ arrival: '10:00', departure: '14:00', anchored: true })
+ expect(d.schedule.entries[2].arrival).toBe('15:00')
+ })
+
+ it('FE-ROADTRIP-ROUTES-033: a stop reached after its End says so instead of leaving quietly', async () => {
+ const d = await drive([
+ { id: 1, at: HAMBURG, time: '13:30', dwell: 0 },
+ { id: 2, at: LUENEBURG, end: '14:00', dwell: 30 },
+ { id: 3, at: BERLIN },
+ ])
+ expect(d.schedule.entries[1]).toMatchObject({ arrival: '14:30', departure: '14:30' })
+ expect(d.schedule.warnings).toEqual([{ index: 1, code: 'missedLeave', minutes: 30 }])
+ })
+
+ it('FE-ROADTRIP-ROUTES-034: daily travel times spend the hours until the End as well', async () => {
+ act(() => useSettingsStore.setState({ settings: { ...DEFAULT_SETTINGS, roadtrip_day_start: '08:00', roadtrip_day_end: '20:00' } }))
+ const d = await drive([
+ { id: 1, at: HAMBURG, time: '09:00', dwell: 0 },
+ { id: 2, at: LUENEBURG, end: '14:00', dwell: 30 },
+ { id: 3, at: BERLIN },
+ ])
+ expect(d.automaticSchedule).toBe(true)
+ expect(d.schedule.entries[1]).toMatchObject({ arrival: '10:00', departure: '14:00' })
+ expect(d.schedule.entries[2].arrival).toBe('15:00')
+ })
+})
+
vi.mock('../../hooks/useRoadtripSettings', () => ({
useRoadtripSettings: (select: (preferences: import('@trek/shared').RoadtripPreferences) => unknown) => useSettingsStore(state => select(state.settings as import('@trek/shared').RoadtripPreferences)),
}))
diff --git a/client/src/components/Roadtrip/useRoadtripRoutes.ts b/client/src/components/Roadtrip/useRoadtripRoutes.ts
index 2637f3d94..f185063c0 100644
--- a/client/src/components/Roadtrip/useRoadtripRoutes.ts
+++ b/client/src/components/Roadtrip/useRoadtripRoutes.ts
@@ -87,6 +87,9 @@ const asStop = (a: Assignment, ownerDayId: number, ownerIndex: number, accommoda
lat: p.lat,
lng: p.lng,
time: a.assignment_time ?? p.place_time ?? null,
+ // The visit's End is when the drive leaves it. Unlike a check-out it is the
+ // traveller's own statement about this stop, and the stay then runs until it.
+ leaveAt: a.assignment_end_time ?? p.end_time ?? null,
checkInTime: stay?.check_in ?? null,
dwellMinutes: typeof p.duration_minutes === 'number' ? p.duration_minutes : null,
endDay: a.end_day === true,
diff --git a/client/src/components/shared/DocumentProviderIcons.test.tsx b/client/src/components/shared/DocumentProviderIcons.test.tsx
new file mode 100644
index 000000000..c5ee09395
--- /dev/null
+++ b/client/src/components/shared/DocumentProviderIcons.test.tsx
@@ -0,0 +1,156 @@
+// FE-DOCSYNC-ICONS-001 to FE-DOCSYNC-ICONS-014
+
+/**
+ * The document providers' marks, and TREK's own.
+ *
+ * These are static files, so the only things worth holding still are the ones a
+ * person would notice if they slipped: a provider the server seeds but the
+ * client has no glyph for (the row renders nothing at all), a mark that keeps a
+ * brand colour and so stays black on a dark background, and the sizing contract
+ * the callers rely on: `size` for the bare lucide-sized rows, a `className`
+ * everywhere the surrounding Tailwind box decides how big the glyph is.
+ */
+import { describe, it, expect } from 'vitest'
+import { DOCUMENT_PROVIDER_IDS } from '@trek/shared'
+import { render } from '../../../tests/helpers/render'
+import { DOCUMENT_PROVIDER_ICONS } from './DocumentProviderIcons'
+import TrekIcon from './TrekIcon'
+
+const marks = Object.entries(DOCUMENT_PROVIDER_ICONS)
+
+/** The svg plus everything drawn inside it. */
+function allElements(svg: SVGElement): Element[] {
+ return [svg, ...Array.from(svg.querySelectorAll('*'))]
+}
+
+function renderMark(Icon: (typeof marks)[number][1], props: Record = {}): SVGElement {
+ const { container } = render(> = {
+ paperless: PaperlessIcon,
+ papra: PapraIcon,
+ nextcloud: NextcloudIcon,
+ opencloud: OpenCloudIcon,
+ synologydrive: SynologyDriveIcon,
+}
diff --git a/client/src/components/shared/TrekIcon.tsx b/client/src/components/shared/TrekIcon.tsx
new file mode 100644
index 000000000..e10775f68
--- /dev/null
+++ b/client/src/components/shared/TrekIcon.tsx
@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react'
+
+/**
+ * TREK's square app icon, from public/icons/icon.svg. The wordmark with the API
+ * pill is `TrekMark`.
+ *
+ * Inlined rather than loaded as an ![]()
so it takes `currentColor` and follows
+ * the theme like the provider glyphs it sits next to in the document-sync flow.
+ * The path is the icon file's, unchanged.
+ */
+export default function TrekIcon({ className, ...props }: SVGProps) {
+ return (
+
+ )
+}
diff --git a/client/src/index.css b/client/src/index.css
index ff326b7f3..56b6f5440 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -506,6 +506,47 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
will-change: transform, opacity;
}
+/* Dokumentenabgleich: die aktive Bahn laeuft, WAEHREND ein Lauf laeuft.
+ Bewegung als Antwort auf eine Handlung, nicht als Dekoration: sie hoert auf,
+ sobald der Lauf durch ist, und sagt in der Zwischenzeit, in welche Richtung
+ gerade etwas unterwegs ist. */
+@keyframes trek-docsync-lane {
+ from { background-position: 0 0; }
+ to { background-position: 16px 0; }
+}
+.trek-docsync-lane-run {
+ background-image: repeating-linear-gradient(
+ 90deg,
+ currentColor 0 5px,
+ transparent 5px 16px
+ );
+ animation: trek-docsync-lane 700ms linear infinite;
+}
+.trek-docsync-lane-run-rev {
+ animation-direction: reverse;
+}
+
+/* Die abgeschaltete Richtung bekommt eine Schraffur, dasselbe Zeichen, das eine
+ gesperrte Flaeche ueberall traegt. Es liest sich als "hier geht nichts durch",
+ ohne dass die Bahn verschwindet und die Zeile zusammenklappt. */
+.trek-docsync-lane-off {
+ background-image: repeating-linear-gradient(
+ -45deg,
+ var(--border-primary) 0 5px,
+ transparent 5px 20px
+ );
+}
+
+/* Dieselbe Schraffur im Telefon-Schema: die mobilen Flaechen kennen die
+ Desktop-Randfarbe nicht, und eine Fremdfarbe faellt dort sofort auf. */
+.trek-docsync-lane-off-m {
+ background-image: repeating-linear-gradient(
+ -45deg,
+ var(--m-rowbr) 0 5px,
+ transparent 5px 20px
+ );
+}
+
/* Mobile-Drawer-Feel — Modal slidet von unten rein, wird unten am Screen angedockt */
@keyframes trek-drawer-enter {
from { opacity: 0; transform: translateY(100%); }
@@ -595,6 +636,11 @@ input[type="number"], input[type="time"], input[type="date"], input[type="dateti
.trek-lowfuel {
animation: none;
}
+ /* Die Bahn bleibt sichtbar, sie laeuft nur nicht mehr. Die Aussage
+ "hier ist gerade etwas unterwegs" traegt auch im Stillstand. */
+ .trek-docsync-lane-run {
+ animation: none;
+ }
.trek-skeleton {
animation: none;
background: var(--bg-tertiary);
diff --git a/client/src/mobile/screens/admin/MAdminAddonManager.tsx b/client/src/mobile/screens/admin/MAdminAddonManager.tsx
index b5eaf61b7..99ef39e61 100644
--- a/client/src/mobile/screens/admin/MAdminAddonManager.tsx
+++ b/client/src/mobile/screens/admin/MAdminAddonManager.tsx
@@ -10,6 +10,7 @@ import {
} from 'lucide-react'
import DawarichIcon from '../../../components/shared/DawarichIcon'
import AirTrailIcon from '../../../components/shared/AirTrailIcon'
+import { DOCUMENT_PROVIDER_ICONS } from '../../../components/shared/DocumentProviderIcons'
import MToggle from '../../components/MToggle'
import { MAdminButton, MAdminCard, MAdminField, MAdminInput, MAdminSecretInput } from './MAdminUi'
@@ -37,6 +38,7 @@ function SynologyIcon({ size = 14 }: { size?: number }) {
const PROVIDER_ICONS: Record> = {
immich: ImmichIcon,
synologyphotos: SynologyIcon,
+ ...DOCUMENT_PROVIDER_ICONS,
}
interface Addon {
@@ -121,8 +123,9 @@ export default function MAdminAddonManager({ bagTrackingEnabled, onToggleBagTrac
refreshGlobalAddons()
// Journey off disables every photo provider with it, and the response carries
// only Journey. Without re-reading, switching Journey back on brings the shelf
- // up with providers the database has long since turned off.
- if (addon.id === 'journey') await loadAddons()
+ // up with providers the database has long since turned off. Documents does
+ // the same to the document providers.
+ if (addon.id === 'journey' || addon.id === 'documents') await loadAddons()
toast.success(t('admin.addons.toast.updated'))
}
@@ -152,6 +155,7 @@ export default function MAdminAddonManager({ bagTrackingEnabled, onToggleBagTrac
}
const photoProviderAddons = addons.filter(isPhotoProviderAddon)
+ const documentProviderAddons = addons.filter(a => a.type === 'document_provider')
const tripAddons = addons.filter(a => a.type === 'trip' && !isPhotosAddon(a))
const globalAddons = addons.filter(a => a.type === 'global')
const integrationAddons = addons.filter(a => a.type === 'integration')
@@ -162,6 +166,16 @@ export default function MAdminAddonManager({ bagTrackingEnabled, onToggleBagTrac
enabled: provider.enabled,
toggle: () => handleTogglePhotoProvider(provider),
}))
+ // No credential form under these, unlike the photo providers: a document
+ // connection belongs to a trip and is entered there. The admin only decides
+ // whether a provider may be offered at all.
+ const documentProviderOptions: ProviderOption[] = documentProviderAddons.map((provider) => ({
+ key: provider.id,
+ label: provider.name,
+ description: provider.description,
+ enabled: provider.enabled,
+ toggle: () => handleToggle(provider),
+ }))
if (loading) {
return (
@@ -207,6 +221,7 @@ export default function MAdminAddonManager({ bagTrackingEnabled, onToggleBagTrac
onToggle={onToggleBagTracking}
/>
)}
+ {addon.id === 'documents' && addon.enabled &&
+
+
+ {stop.name}
+ + {leave.minutes === null ? t('roadtrip.stay.until', { time: until }) : formatDurationShort(leave.minutes * 60)} + + {leave.missedBy !== null ? ( +
+
+ {t(leave.dayEndsFirst ? 'roadtrip.stay.dayEndsFirst' : 'roadtrip.stay.leavesAt', { time: until })} +
+ )} + {/* The day ending first means the row's departure is only where it stops for the + night, not a time it leaves. */} + {arrive && !leave.dayEndsFirst ?
+ {leave.remove ? (
+
+ ) : null}
+
+
+
+
+
+ {t('roadtrip.stay.arrive')}
+
+ {arrive}
+
+
+ )
+}
diff --git a/client/src/components/Roadtrip/VisitControls.test.tsx b/client/src/components/Roadtrip/VisitControls.test.tsx
index d5d6ce6eb..205f846ef 100644
--- a/client/src/components/Roadtrip/VisitControls.test.tsx
+++ b/client/src/components/Roadtrip/VisitControls.test.tsx
@@ -17,3 +17,14 @@ it('keeps stay editing when daily travel times are off', () => {
expect(screen.getByRole('button', { name: 'roadtrip.stop.stayShort +' })).toBeEnabled()
expect(screen.queryByRole('button', { name: 'roadtrip.window.endHere' })).not.toBeInTheDocument()
})
+
+it('reads the stay a set leave time makes, and says until when', () => {
+ render(
{endDay &&
diff --git a/client/src/components/Roadtrip/roadtripRowModel.test.ts b/client/src/components/Roadtrip/roadtripRowModel.test.ts
index c254ccfcd..9295537bf 100644
--- a/client/src/components/Roadtrip/roadtripRowModel.test.ts
+++ b/client/src/components/Roadtrip/roadtripRowModel.test.ts
@@ -15,7 +15,7 @@ import {
import type { ScheduleEntry, ScheduleWarning } from './roadtripModel'
import type { RoadtripDay, RoadtripStop, RouteSegment } from '@trek/shared/roadtrip'
-// FE-RTROW-001 to FE-RTROW-039
+// FE-RTROW-001 to FE-RTROW-044
function stop(name: string, over: Partial
{cover && (
@@ -167,43 +168,42 @@ export default function MCollPlaceSheet({
)}
- {held.category?.name && (
-
- ): DocSyncProvider['fields'][number] => ({
+ field_key: 'api_token',
+ label: 'providerApiToken',
+ input_type: 'text',
+ placeholder: null,
+ hint: null,
+ required: true,
+ secret: true,
+ ...over,
+})
+
+const provider = (over: Partial): DocSyncProvider => ({
+ id: 'paperless',
+ name: 'Paperless',
+ description: null,
+ icon: 'paperless',
+ available: true,
+ fields: [
+ field({ field_key: 'base_url', label: 'providerUrl', input_type: 'url', placeholder: 'https://paperless.example', secret: false }),
+ field({}),
+ ],
+ ...over,
+})
+
+const connection = (over: Partial): DocSyncConnection => ({
+ id: 5,
+ providerId: 'paperless',
+ baseUrl: 'https://paperless.example',
+ settings: {},
+ secrets: {},
+ allowInsecureTls: false,
+ lastProbeState: 'ok',
+ lastProbeError: null,
+ ...over,
+})
+
+const link = (over: Partial = {}): DocSyncLink => ({
+ id: 11,
+ connectionId: 5,
+ providerId: 'paperless',
+ scopeKey: 'tag:trek-3',
+ remoteLabel: 'TREK trip 3',
+ remoteRootPath: null,
+ direction: 'both',
+ deletePolicy: 'unlink',
+ conflictPolicy: 'manual',
+ syncEnabled: true,
+ lastSyncAt: null,
+ lastSyncState: 'never',
+ lastSyncError: null,
+ webhookUrl: null,
+ ...over,
+})
+
+const scope = (over: Partial): DocSyncScope => ({
+ scopeKey: 'folder:1',
+ label: 'Photos',
+ remoteRootId: '1',
+ remoteRootPath: '/Photos',
+ ...over,
+})
+
+/** Server state the spies read, so a mutation can change what the next load returns. */
+let providers: DocSyncProvider[]
+let connections: DocSyncConnection[]
+let links: DocSyncLink[]
+let scopes: DocSyncScope[]
+
+const onClose = vi.fn()
+
+function renderSheet(over: Partial> = {}) {
+ return render(
+ ('list')
+ const [selected, setSelected] = useState(null)
+ const [pending, setPending] = useState(null)
+ const [confirmUnlink, setConfirmUnlink] = useState(false)
+
+ const bound = useMemo(() => new Set(sync.links.map(l => l.providerId)), [sync.links])
+ const available = sync.providers.filter(p => !bound.has(p.id))
+ const link = sync.links.find(l => l.id === selected) ?? null
+
+ // A store that was removed elsewhere must not leave the detail view pointing
+ // at nothing.
+ useEffect(() => {
+ if (view === 'detail' && !link) setView('list')
+ }, [view, link])
+
+ // Every open starts at the list: a sheet that reopens three steps deep is a
+ // sheet somebody has to find their way out of.
+ useEffect(() => {
+ if (!open) { setView('list'); setPending(null) }
+ }, [open])
+
+ const openStore = (p: DocSyncProvider) => {
+ setPending(p)
+ setView(sync.connectionFor(p.id) ? 'scope' : 'connect')
+ }
+
+ const title =
+ view === 'connect' || view === 'scope'
+ ? pending?.name ?? t('docsync.title')
+ : view === 'detail' && link
+ ? storeName(link, sync.providers)
+ : t('docsync.title')
+
+ return (
+ <>
+
+
+
+ setConfirmUnlink(false)}
+ title={t('docsync.unlink')}
+ message={t('docsync.confirmUnlink')}
+ confirmLabel={t('docsync.unlink')}
+ cancelLabel={t('common.cancel')}
+ danger
+ onConfirm={() => {
+ setConfirmUnlink(false)
+ if (link) void sync.removeLink(link.id).then(() => setView('list'))
+ }}
+ />
+
+ )
+}
+
+/** The stores this trip uses, then the ones it could. */
+function ListView({
+ links,
+ providers,
+ available,
+ canManage,
+ onOpen,
+ onAdd,
+}: {
+ links: DocSyncLink[]
+ providers: DocSyncProvider[]
+ available: DocSyncProvider[]
+ canManage: boolean
+ onOpen: (id: number) => void
+ onAdd: (p: DocSyncProvider) => void
+}) {
+ const { t } = useTranslation()
+ return (
+
+ canManage: boolean
+ onUnlink: () => void
+}) {
+ const { t, language } = useTranslation()
+ const busy = sync.busy === `sync-${link.id}`
+ const holdings = link.holdings ?? { inTrek: 0, atProvider: 0, paired: 0, missing: 0 }
+ const pushOn = link.direction === 'both' || link.direction === 'push'
+ const pullOn = link.direction === 'both' || link.direction === 'pull'
+ const ProviderIcon = DOCUMENT_PROVIDER_ICONS[link.providerId]
+
+ /** The last remaining direction cannot be switched off. */
+ const toggle = (lane: 'push' | 'pull') => {
+ if (!canManage) return
+ const nextPush = lane === 'push' ? !pushOn : pushOn
+ const nextPull = lane === 'pull' ? !pullOn : pullOn
+ if (!nextPush && !nextPull) return
+ void sync.updateLink(link.id, { direction: nextPush && nextPull ? 'both' : nextPush ? 'push' : 'pull' })
+ }
+
+ const ranAt = link.lastSyncAt ? Date.parse(link.lastSyncAt) : NaN
+ const notice = bindingNotice(link, t)
+
+ return (
+
+ onDone: () => void
+}) {
+ const { t } = useTranslation()
+ const form = useConnectForm(provider, sync.connectionFor(provider.id), sync)
+ const [verdict, setVerdict] = useState<{ connected: boolean; account?: string; error?: string } | null>(null)
+
+ return (
+
+ onBound: () => void
+}) {
+ const { t } = useTranslation()
+ const [scopes, setScopes] = useState>['scopes'] | null>(null)
+ const [error, setError] = useState(null)
+ const [name, setName] = useState(suggestedName)
+ const [working, setWorking] = useState(null)
+
+ // `loadScopes`, not `sync`: the hook hands back a fresh object on every
+ // render of the panel above, so depending on it re-listed the provider's
+ // folders each time anything up there changed. The callback itself is
+ // stable. Taken out of `sync` first, because calling it as `sync.loadScopes`
+ // inside the effect makes the whole object a dependency again.
+ const { loadScopes } = sync
+ useEffect(() => {
+ let cancelled = false
+ void (async () => {
+ const res = await loadScopes(connectionId)
+ if (cancelled) return
+ setScopes(res.scopes)
+ setError(res.error ?? null)
+ })()
+ return () => { cancelled = true }
+ }, [connectionId, loadScopes])
+
+ const bind = async (scope: { scopeKey: string; label: string; remoteRootId: string | null; remoteRootPath: string | null }) => {
+ setWorking(scope.scopeKey)
+ const ok = await sync.createLink({
+ connectionId,
+ scopeKey: scope.scopeKey,
+ remoteRootId: scope.remoteRootId,
+ remoteRootPath: scope.remoteRootPath,
+ remoteLabel: scope.label,
+ direction: 'both',
+ deletePolicy: 'unlink',
+ conflictPolicy: 'manual',
+ syncEnabled: true,
+ })
+ setWorking(null)
+ if (ok) onBound()
+ }
+
+ return (
+
+ count: number
+}) {
+ const { t } = useTranslation()
+ const [open, setOpen] = useState(false)
+ const conflicts = useConflicts(tripId, sync, open)
+ if (count === 0) return null
+
+ return (
+
+
+
+ {open && (
+
+ )
+}
diff --git a/client/src/mobile/screens/trip/tabs/MFilesTab.tsx b/client/src/mobile/screens/trip/tabs/MFilesTab.tsx
index 154490f83..6d79fe723 100644
--- a/client/src/mobile/screens/trip/tabs/MFilesTab.tsx
+++ b/client/src/mobile/screens/trip/tabs/MFilesTab.tsx
@@ -11,6 +11,9 @@ import type { MTabScreenProps } from './tabModel'
import MFileMenuSheet from './MFileMenuSheet'
import MFileLinkSheet from './MFileLinkSheet'
import MFileTrashSheet from './MFileTrashSheet'
+import MDocSyncSheet from './MDocSyncSheet'
+import { canManageDocSync } from '../../../../components/Files/docsync/useDocSync'
+import { useAuthStore } from '../../../../store/authStore'
import MFileLightbox from './MFileLightbox'
import {
FILE_FILTERS, buildFileLinkLabels, formatFileDate, getFileTypeMeta,
@@ -36,7 +39,9 @@ export default function MFilesTab({ planner, shell }: MTabScreenProps) {
const [filter, setFilter] = useState('all')
const [menuFileId, setMenuFileId] = useState(null)
const [linkFileId, setLinkFileId] = useState(null)
+ const currentUser = useAuthStore(st => st.user)
const [trashOpen, setTrashOpen] = useState(false)
+ const [docSyncOpen, setDocSyncOpen] = useState(false)
const [lightboxIndex, setLightboxIndex] = useState(null)
const [uploading, setUploading] = useState(false)
@@ -110,6 +115,15 @@ export default function MFilesTab({ planner, shell }: MTabScreenProps) {
lastTrashSignal.current = shell.openFilesTrashSignal
}, [shell.openFilesTrashSignal])
+ // ── Document sync: same signal pattern again. ──
+ const lastDocSyncSignal = useRef(shell.openDocSyncSignal)
+ useEffect(() => {
+ if (shell.openDocSyncSignal !== lastDocSyncSignal.current && shell.openDocSyncSignal > 0) {
+ setDocSyncOpen(true)
+ }
+ lastDocSyncSignal.current = shell.openDocSyncSignal
+ }, [shell.openDocSyncSignal])
+
// ── Star toggle (ungated, §7.6) — direct filesApi call + store refresh, same as §7.3. ──
const toggleStar = async (file: TripFile) => {
try {
@@ -211,6 +225,13 @@ export default function MFilesTab({ planner, shell }: MTabScreenProps) {
/>
setLinkFileId(null)} />
setTrashOpen(false)} />
+ setDocSyncOpen(false)}
+ />
{lightboxIndex != null && mediaFiles.length > 0 && (
{ setShowPlaceForm(false); setEditingPlace(null); setEditingAssignmentId(null); setPrefillCoords(null); setServiceStopForm(false) }} onSave={handleSavePlace} place={editingPlace} prefillCoords={prefillCoords} assignmentId={editingAssignmentId} dayAssignments={editingPlace ? Object.values(assignments).flat() : []} tripId={tripId} categories={categories} onCategoryCreated={cat => tripActions.addCategory?.(cat)} isMobile={isMobile} onOpenExpense={openBookingExpense} serviceStop={serviceStopMode} />
+ { setShowPlaceForm(false); setEditingPlace(null); setEditingAssignmentId(null); setPrefillCoords(null); setServiceStopForm(false) }} onSave={handleSavePlace} place={editingPlace} prefillCoords={prefillCoords} assignmentId={editingAssignmentId} dayAssignments={editingPlace ? Object.values(assignments).flat() : []} tripId={tripId} categories={categories} onCategoryCreated={cat => tripActions.addCategory?.(cat)} isMobile={isMobile} onOpenExpense={openBookingExpense} serviceStop={serviceStopMode} roadtripActive={roadtripActive} />
setShowTripForm(false)}
diff --git a/client/src/pages/tripPlanner/useTripPlanner.roadtrip.test.tsx b/client/src/pages/tripPlanner/useTripPlanner.roadtrip.test.tsx
index 9644cec18..b06938313 100644
--- a/client/src/pages/tripPlanner/useTripPlanner.roadtrip.test.tsx
+++ b/client/src/pages/tripPlanner/useTripPlanner.roadtrip.test.tsx
@@ -213,7 +213,7 @@ async function renderRoadtrip() {
rt.routes.days = [{ ...rt.corridor.day, stops }]
}
rt.routes.days = rt.routes.days.map(day => ({
- schedule: { entries: [] },
+ schedule: { entries: [], warnings: [] },
legs: [],
...day,
stops: (day.stops as Array>).map((stop, i) => ({
@@ -1972,7 +1972,7 @@ describe('useTripPlanner road trip: the phone feed', () => {
rt.routes.days = [{
dayId,
dayNumber: 1,
- schedule: { entries: [] },
+ schedule: { entries: [], warnings: [] },
legs: [],
stops: [0, 1, 2].map((i) => ({
assignmentId: i + 1, placeId: i + 1, lat: 53 - i, lng: 10 + i,
diff --git a/client/src/pages/tripPlanner/useTripPlanner.ts b/client/src/pages/tripPlanner/useTripPlanner.ts
index 8d2d9bf2d..ad72b11db 100644
--- a/client/src/pages/tripPlanner/useTripPlanner.ts
+++ b/client/src/pages/tripPlanner/useTripPlanner.ts
@@ -52,6 +52,8 @@ import {
isServiceStopType, refuelStopTypeFor, reanchorAfterReorder, type DryPoint } from '../../components/Roadtrip/roadtripModel'
import type { ManualStopTarget, ServiceStopMode } from '../../components/Roadtrip/manualStop'
import type { RoadtripStopDraft } from '../../components/Roadtrip/RoadtripStopPopup'
+import type { StayDraft } from '../../components/Roadtrip/RoadtripStayModal'
+import { inspectorStay } from '../../components/Roadtrip/stayReading'
import type { RoadtripStopType } from '@trek/shared'
import { usePlaceSelection } from '../../hooks/usePlaceSelection'
import { usePlannerHistory } from '../../hooks/usePlannerHistory'
@@ -1229,7 +1231,7 @@ export function useTripPlanner() {
* the rail is a list — putting a dialog's state inside a row means it dies whenever the
* list re-renders around it.
*/
- const [stayDraft, setStayDraft] = useState<{ placeId: number; name: string; minutes: number | null; arrival: string | null } | null>(null)
+ const [stayDraft, setStayDraft] = useState(null)
/**
* Whether the day ends at this stop, from BOTH the things that can end it.
@@ -2437,7 +2439,7 @@ export function useTripPlanner() {
? { active: roadtripEndsDayAt(endDayStop), onToggle: () => setRoadtripEndDay(endDayStop) }
: undefined
const roadtripStay = roadtripActive && selectedPlace
- ? { minutes: endDayStop ? endDayStop.dwellMinutes : selectedPlace.duration_minutes ?? null, onEdit: can('place_edit', trip) ? () => editRoadtripStay({ placeId: selectedPlace.id, name: selectedPlace.name, minutes: selectedPlace.duration_minutes ?? null, arrival: null }) : undefined }
+ ? inspectorStay(roadtripRoutes.days, endDayStop, selectedPlace, can('place_edit', trip) ? editRoadtripStay : undefined)
: undefined
// Build placeId → order-number map from the selected day's assignments
diff --git a/client/src/repo/assignmentRepo.test.ts b/client/src/repo/assignmentRepo.test.ts
index 3187c8f65..a78916a9e 100644
--- a/client/src/repo/assignmentRepo.test.ts
+++ b/client/src/repo/assignmentRepo.test.ts
@@ -5,13 +5,13 @@ import { offlineDb, clearAll } from '../db/offlineDb'
import { saveAssignmentEndDay } from '../api/assignmentEndDay'
import { isEffectivelyOffline } from '../sync/networkMode'
import { mutationQueue } from '../sync/mutationQueue'
-import { apiClient } from '../api/client'
+import { apiClient, assignmentsApi } from '../api/client'
import type { Assignment, Day } from '../types'
vi.mock('../api/assignmentEndDay', () => ({ saveAssignmentEndDay: vi.fn() }))
vi.mock('../sync/networkMode', () => ({ isEffectivelyOffline: vi.fn(() => true) }))
vi.mock('../sync/authGate', () => ({ isAuthed: () => true }))
-vi.mock('../api/client', () => ({ apiClient: { request: vi.fn() } }))
+vi.mock('../api/client', () => ({ apiClient: { request: vi.fn() }, assignmentsApi: { updateTime: vi.fn() } }))
const assignment = { id: 7, day_id: 1, place_id: 2, order_index: 0, assignment_time: '07:00', place: { id: 2, name: 'Berlin' } } as Assignment
beforeEach(async () => {
@@ -50,3 +50,32 @@ describe('assignment day-end persistence', () => {
expect((await offlineDb.days.get(1))?.assignments?.[0].end_day).toBeUndefined()
})
})
+
+describe('assignment time persistence', () => {
+ const times = { place_time: '07:00', end_time: null }
+
+ it('stores the offline times with a replayable write of both of them', async () => {
+ await assignmentRepo.setTimes(9, { ...assignment, assignment_end_time: '14:00' }, times)
+ expect((await offlineDb.days.get(1))?.assignments?.[0]).toMatchObject({ assignment_time: '07:00', assignment_end_time: null })
+ expect(await offlineDb.mutationQueue.toArray()).toEqual([expect.objectContaining({
+ url: '/trips/9/assignments/7/time', method: 'PUT', body: times, resource: 'assignments', entityId: 7,
+ })])
+ })
+
+ it('saves through the time route online and caches what came back', async () => {
+ vi.mocked(isEffectivelyOffline).mockReturnValue(false)
+ vi.mocked(assignmentsApi.updateTime).mockResolvedValue({ assignment: { ...assignment, assignment_end_time: null } })
+ const saved = await assignmentRepo.setTimes(9, { ...assignment, assignment_end_time: '14:00' }, times)
+ expect(assignmentsApi.updateTime).toHaveBeenCalledWith(9, 7, times)
+ expect(saved.assignment_end_time).toBeNull()
+ expect((await offlineDb.days.get(1))?.assignments?.[0].assignment_end_time).toBeNull()
+ expect(await offlineDb.mutationQueue.count()).toBe(0)
+ })
+
+ it('keeps the cached visit unchanged after a refused save', async () => {
+ vi.mocked(isEffectivelyOffline).mockReturnValue(false)
+ vi.mocked(assignmentsApi.updateTime).mockRejectedValue(new Error('Denied'))
+ await expect(assignmentRepo.setTimes(9, assignment, times)).rejects.toThrow('Denied')
+ expect((await offlineDb.days.get(1))?.assignments?.[0]).toEqual(assignment)
+ })
+})
diff --git a/client/src/repo/assignmentRepo.ts b/client/src/repo/assignmentRepo.ts
index 95b3e0645..eee44f54a 100644
--- a/client/src/repo/assignmentRepo.ts
+++ b/client/src/repo/assignmentRepo.ts
@@ -1,10 +1,18 @@
+import { assignmentSchema } from '@trek/shared'
import { saveAssignmentEndDay } from '../api/assignmentEndDay'
+import { assignmentsApi } from '../api/client'
import { offlineDb } from '../db/offlineDb'
import { cacheAssignment } from '../db/cacheAssignment'
import { generateUUID, mutationQueue } from '../sync/mutationQueue'
import { isEffectivelyOffline } from '../sync/networkMode'
import type { Assignment } from '../types'
+/** Start and End of one visit, as the time route stores them: null is no time. */
+export interface AssignmentTimes {
+ place_time: string | null
+ end_time: string | null
+}
+
export const assignmentRepo = {
async setEndDay(tripId: number | string, assignment: Assignment, endDay: boolean): Promise {
if (!isEffectivelyOffline()) {
@@ -23,4 +31,28 @@ export const assignmentRepo = {
})
return updated
},
+
+ /**
+ * A visit's own Start and End, the pair the time route takes.
+ *
+ * The route writes both columns every time, so a caller changing one of them hands the
+ * other in as it stands; leaving it out would clear it.
+ */
+ async setTimes(tripId: number | string, assignment: Assignment, times: AssignmentTimes): Promise {
+ if (!isEffectivelyOffline()) {
+ const saved = assignmentSchema.parse((await assignmentsApi.updateTime(tripId, assignment.id, times)).assignment)
+ await cacheAssignment(saved)
+ return saved
+ }
+ const updated = { ...assignment, assignment_time: times.place_time, assignment_end_time: times.end_time }
+ await offlineDb.transaction('rw', offlineDb.days, offlineDb.mutationQueue, async () => {
+ await mutationQueue.enqueue({
+ id: generateUUID(), tripId: Number(tripId), method: 'PUT',
+ url: `/trips/${tripId}/assignments/${assignment.id}/time`,
+ body: times, resource: 'assignments', entityId: assignment.id,
+ })
+ await cacheAssignment(updated)
+ })
+ return updated
+ },
}
diff --git a/client/src/repo/docSyncRepo.ts b/client/src/repo/docSyncRepo.ts
new file mode 100644
index 000000000..4d3e89a2b
--- /dev/null
+++ b/client/src/repo/docSyncRepo.ts
@@ -0,0 +1,44 @@
+import { docsyncApi } from '../api/client'
+import { isEffectivelyOffline } from '../sync/networkMode'
+
+/**
+ * The two reads behind the Files screen's "Document sync" button.
+ *
+ * Online-only with no Dexie table, for the reason `dawarichRepo` gives: both
+ * answers are the server's (which providers the admin switched on, whether the
+ * owner bound this trip), and the dialog the button opens cannot load offline
+ * either. The store in front of this keeps the last answer for the session.
+ */
+export class DocSyncOfflineError extends Error {
+ constructor() {
+ super('Document sync needs a connection')
+ this.name = 'DocSyncOfflineError'
+ }
+}
+
+function requireOnline(): void {
+ if (isEffectivelyOffline()) throw new DocSyncOfflineError()
+}
+
+export const docSyncRepo = {
+ /**
+ * Whether the instance offers a provider somebody could connect.
+ *
+ * The list is instance-wide; the route sits under a trip only because every
+ * document-sync route does. `available` is the same filter the dialog
+ * applies, so a provider row without an adapter does not bring up a button
+ * into an empty list.
+ */
+ async offersProvider(tripId: number | string): Promise {
+ requireOnline()
+ const providers = (await docsyncApi.providers(tripId)) as Array<{ available?: boolean }>
+ return providers.some(p => p.available)
+ },
+
+ /** Whether the trip is bound to at least one store. */
+ async isBound(tripId: number | string): Promise {
+ requireOnline()
+ const links = (await docsyncApi.listLinks(tripId)) as unknown[]
+ return links.length > 0
+ },
+}
diff --git a/client/src/store/docSyncOfferStore.ts b/client/src/store/docSyncOfferStore.ts
new file mode 100644
index 000000000..935cec347
--- /dev/null
+++ b/client/src/store/docSyncOfferStore.ts
@@ -0,0 +1,48 @@
+import { create } from 'zustand'
+import { docSyncRepo } from '../repo/docSyncRepo'
+
+/**
+ * Whether a trip's Files screen offers document sync, remembered for the session.
+ *
+ * The seed ships every document provider switched off, so a button on every
+ * trip led, straight after the upgrade, into "No document providers are
+ * available". It shows where there is something behind it: a trip that is
+ * already bound (every member needs to see where their documents go), or
+ * somebody who may bind it on an instance that offers a provider.
+ *
+ * Remembered so that coming back to the tab renders the last answer at once,
+ * instead of the button popping in after a request every time.
+ */
+interface DocSyncOfferState {
+ /** Per trip id, whether it has a binding. Missing until asked. */
+ bound: Record
+ /** Whether the instance offers any provider. Null until asked. */
+ providers: boolean | null
+ refresh: (tripId: number | string, canManage: boolean) => Promise
+}
+
+export const useDocSyncOfferStore = create((set) => ({
+ bound: {},
+ providers: null,
+
+ refresh: async (tripId, canManage) => {
+ const key = String(tripId)
+ try {
+ // Somebody who may bind the trip gets the button as soon as a provider
+ // is on, bound or not, so the second request is for everybody else.
+ if (canManage) {
+ const providers = await docSyncRepo.offersProvider(tripId)
+ set({ providers })
+ if (providers) return
+ }
+ const bound = await docSyncRepo.isBound(tripId)
+ set(s => ({ bound: { ...s.bound, [key]: bound } }))
+ } catch (err) {
+ // 403 is the Documents addon switched off and 404 a trip this person no
+ // longer reaches: both a real "no". Anything else, offline included, is
+ // no answer at all, and the last one stands.
+ const status = (err as { response?: { status?: number } })?.response?.status
+ if (status === 403 || status === 404) set(s => ({ bound: { ...s.bound, [key]: false } }))
+ }
+ },
+}))
diff --git a/client/src/store/slices/assignmentsSlice.ts b/client/src/store/slices/assignmentsSlice.ts
index 0b367ffd8..26a4d3183 100644
--- a/client/src/store/slices/assignmentsSlice.ts
+++ b/client/src/store/slices/assignmentsSlice.ts
@@ -3,13 +3,15 @@ import type { StoreApi } from 'zustand'
import type { TripStoreState } from '../tripStore'
import type { Assignment, AssignmentsMap } from '../../types'
import { getApiErrorMessage } from '../../types'
-import { assignmentRepo } from '../../repo/assignmentRepo'
+import { assignmentRepo, type AssignmentTimes } from '../../repo/assignmentRepo'
+import { mergeAssignmentPlace } from './placesSlice'
type SetState = StoreApi['setState']
type GetState = StoreApi['getState']
export interface AssignmentsSlice {
setAssignmentEndDay: (tripId: number | string, dayId: number, assignmentId: number, endDay: boolean) => Promise
+ setAssignmentTimes: (tripId: number | string, dayId: number, assignmentId: number, times: AssignmentTimes) => Promise
assignPlaceToDay: (tripId: number | string, dayId: number | string, placeId: number | string, position?: number | null) => Promise
removeAssignment: (tripId: number | string, dayId: number | string, assignmentId: number) => Promise
reorderAssignments: (tripId: number | string, dayId: number | string, orderedIds: number[]) => Promise
@@ -35,6 +37,29 @@ export const createAssignmentsSlice = (set: SetState, get: GetState): Assignment
throw err
}
},
+ setAssignmentTimes: async (tripId, dayId, assignmentId, times) => {
+ const assignment = get().assignments[String(dayId)]?.find(a => a.id === assignmentId)
+ if (!assignment || assignmentId < 0) return
+ const replace = (next: Assignment) => set(state => ({
+ assignments: Object.fromEntries(Object.entries(state.assignments).map(([key, items]) => [
+ key, items.map(a => a.id === assignmentId ? next : a),
+ ])),
+ }))
+ // The embedded place carries the times the visit shows, its own or else the place's,
+ // so it is merged again from the pool rather than patched field by field. The merged
+ // row is also what an offline save caches, or the old end time would come back from
+ // the cache on the next read.
+ const pool = get().places.find(p => p.id === assignment.place_id)
+ const merge = (next: Assignment) => (pool ? mergeAssignmentPlace(next, pool) : next)
+ const draft = merge({ ...assignment, assignment_time: times.place_time, assignment_end_time: times.end_time })
+ replace(draft)
+ try {
+ replace(merge({ ...draft, ...await assignmentRepo.setTimes(tripId, draft, times) }))
+ } catch (err: unknown) {
+ replace(assignment)
+ throw err
+ }
+ },
assignPlaceToDay: async (tripId, dayId, placeId, position) => {
const state = get()
const place = state.places.find(p => p.id === Number.parseInt(String(placeId)))
diff --git a/client/src/styles/collections.css b/client/src/styles/collections.css
index 23d181c13..841a8b13d 100644
--- a/client/src/styles/collections.css
+++ b/client/src/styles/collections.css
@@ -431,9 +431,10 @@
.trek-dash .col-detail-cover { position: relative; height: 116px; flex-shrink: 0; background-size: cover; background-position: center; }
.trek-dash .col-detail-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.trek-dash .col-detail-cover-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.55) 100%); }
-.trek-dash .col-detail-cover-cat { position: absolute; top: 12px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: color-mix(in oklch, var(--cat, #6366f1) 82%, black); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
+/* chip and close sit in the cover's top bar (CollectionPlaceDetail), which places them */
+.trek-dash .col-detail-cover-cat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #fff; background: color-mix(in oklch, var(--cat, #6366f1) 82%, black); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.trek-dash .col-detail-close {
- position: absolute; top: 12px; right: 12px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
+ width: 32px; height: 32px; border-radius: 50%;
display: grid; place-items: center; background: rgba(0,0,0,.4); color: #fff; border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(8px); transition: background .12s;
}
diff --git a/client/src/sync/useServerPing.ts b/client/src/sync/useServerPing.ts
new file mode 100644
index 000000000..741a385f2
--- /dev/null
+++ b/client/src/sync/useServerPing.ts
@@ -0,0 +1,93 @@
+import { useEffect, useRef } from 'react'
+import { addListener, removeListener } from '../api/websocket'
+import { isEffectivelyOnline, onNetworkModeChange } from './networkMode'
+
+/**
+ * How long pings are collected before one refetch goes out.
+ *
+ * Long enough to fold a burst into a single request (clearing twelve checked
+ * items issues twelve deletes, and an import writes a whole list), short enough
+ * that a single edit still reads as instant.
+ */
+const COALESCE_MS = 250
+
+/**
+ * Refetch when the server says something moved, without trusting the event to
+ * carry what moved.
+ *
+ * Some events are content-free on purpose: bag weights are summed across members
+ * whose items this client may not see, and a document-sync run reports counts
+ * that are only meaningful read back from the server. Every such ping is a
+ * refetch, which is why this coalesces bursts and never lets two requests
+ * overlap: the server pings the whole room including the originating socket, so
+ * a busy trip would otherwise have every client refetching once per written row.
+ *
+ * A ping sent while this client is disconnected is gone for good, so the two
+ * moments where that can have happened count as pings of their own: the room
+ * re-join after a reconnect, and the return to online.
+ *
+ * `reload` may change identity every render; the latest one is always used.
+ */
+export function useServerPing(eventName: string, enabled: boolean, reload: () => Promise): void {
+ const reloadRef = useRef(reload)
+ reloadRef.current = reload
+
+ useEffect(() => {
+ if (!enabled) return
+ let timer: ReturnType | null = null
+ let inFlight = false
+ /** A ping that arrived while a refetch was running: serve it once that lands. */
+ let pendingAfterFlight = false
+ let cancelled = false
+
+ const run = (): void => {
+ if (cancelled) return
+ if (inFlight) {
+ pendingAfterFlight = true
+ return
+ }
+ inFlight = true
+ void reloadRef.current().finally(() => {
+ inFlight = false
+ if (pendingAfterFlight && !cancelled) {
+ pendingAfterFlight = false
+ run()
+ }
+ })
+ }
+
+ const schedule = (): void => {
+ if (timer) return // already collecting this burst
+ timer = setTimeout(() => {
+ timer = null
+ run()
+ }, COALESCE_MS)
+ }
+
+ const handler = (event: Record) => {
+ // 'joined' is the room re-join the socket sends on every reconnect, so it
+ // is also the moment what is on screen is what was there before the drop:
+ // whatever moved in the meantime pinged into a closed socket.
+ if (event.type !== eventName && event.type !== 'joined') return
+ schedule()
+ }
+
+ let wasOnline = isEffectivelyOnline()
+ const onMode = (): void => {
+ const online = isEffectivelyOnline()
+ // Only the way back matters: that is when the surfaces stop summing what
+ // this client can see and go back to trusting the server numbers.
+ if (online && !wasOnline) schedule()
+ wasOnline = online
+ }
+
+ addListener(handler)
+ const unsubscribeMode = onNetworkModeChange(onMode)
+ return () => {
+ cancelled = true
+ removeListener(handler)
+ unsubscribeMode()
+ if (timer) clearTimeout(timer)
+ }
+ }, [enabled, eventName])
+}
diff --git a/client/src/utils/dayMerge.test.ts b/client/src/utils/dayMerge.test.ts
index 8608badd6..935bb2c57 100644
--- a/client/src/utils/dayMerge.test.ts
+++ b/client/src/utils/dayMerge.test.ts
@@ -276,4 +276,30 @@ describe('getMergedItems', () => {
const types = result.map(i => i.type)
expect(types).toEqual(['place', 'transport', 'place'])
})
+
+ // The same rule the server stores when a start time is saved, so on a day of places
+ // alone the day it sends back after the save and the day drawn before it agree.
+ it('keeps untimed places where they were put and sorts only the timed ones', () => {
+ const place = (id: number, order_index: number, place_time: string | null) => ({ id, order_index, place: { place_time } })
+ const ids = (dayAssignments: ReturnType[]) =>
+ getMergedItems({ dayAssignments, dayNotes: [], dayTransports: [], dayId: 5 }).map(i => i.data.id)
+
+ expect(ids([place(1, 0, null), place(2, 1, null), place(3, 2, '14:00')])).toEqual([1, 2, 3])
+ expect(ids([place(1, 0, '09:00'), place(2, 1, null), place(3, 2, '14:00')])).toEqual([1, 2, 3])
+ expect(ids([place(1, 0, null), place(2, 1, '15:00'), place(3, 2, '10:00')])).toEqual([1, 3, 2])
+ })
+
+ // Where the server's sort and this one part: the server sorts the stops alone, so
+ // for it place 2 follows the 09:00 place and stays in front of the 10:00 one. Here it
+ // follows the 12:00 note and is drawn behind both.
+ it('lets an untimed place take the time of a timed note in front of it', () => {
+ const dayAssignments = [
+ { id: 1, order_index: 0, place: { place_time: '09:00' } },
+ { id: 2, order_index: 1, place: { place_time: null } },
+ { id: 3, order_index: 2, place: { place_time: '10:00' } },
+ ]
+ const dayNotes = [{ id: 10, sort_order: 0.5, time: '12:00' }]
+ const result = getMergedItems({ dayAssignments, dayNotes, dayTransports: [], dayId: 5 })
+ expect(result.map(i => i.data.id)).toEqual([1, 3, 10, 2])
+ })
})
diff --git a/client/src/utils/dayMerge.ts b/client/src/utils/dayMerge.ts
index 430ad054b..70395498c 100644
--- a/client/src/utils/dayMerge.ts
+++ b/client/src/utils/dayMerge.ts
@@ -1,3 +1,4 @@
+import { chronoOrder } from '@trek/shared'
// `orderedEndpoints` is the geometry order's single source of truth, in the module
// that documents the multi-leg model. Sorting endpoints a second time here is how
// the two drift.
@@ -270,26 +271,22 @@ export function getAssignmentReservations string | null
): MergedItem[] {
- const timeOf = (it: MergedItem): number | null => {
+ return chronoOrder(items, it => {
if (it.type === 'place') return parseTimeToMinutes(it.data?.place?.place_time)
if (it.type === 'note') return parseTimeToMinutes(it.data?.time)
return parseTimeToMinutes(getDisplayTime(it.data, dayId))
- }
- let last = -Infinity
- return items
- .map((it, i) => {
- const t = timeOf(it)
- if (t != null) last = t
- return { it, i, eff: t != null ? t : last }
- })
- .sort((a, b) => a.eff - b.eff || a.i - b.i)
- .map(k => k.it)
+ })
}
/** Merge places, notes, and transports into a single ordered day timeline. */
diff --git a/client/tests/helpers/mobileTrip.ts b/client/tests/helpers/mobileTrip.ts
index 7a9d2ee74..a4b2c1756 100644
--- a/client/tests/helpers/mobileTrip.ts
+++ b/client/tests/helpers/mobileTrip.ts
@@ -325,6 +325,7 @@ export function buildShell(overrides: Partial = {}): MTripShellAp
exportCostsCsvSignal: 0,
uploadFilesSignal: 0,
openFilesTrashSignal: 0,
+ openDocSyncSignal: 0,
};
return { ...base, ...overrides };
}
diff --git a/client/tests/unit/mobile/admin/MAdminAddonManager.test.tsx b/client/tests/unit/mobile/admin/MAdminAddonManager.test.tsx
index 96bbb29fe..c369aacb8 100644
--- a/client/tests/unit/mobile/admin/MAdminAddonManager.test.tsx
+++ b/client/tests/unit/mobile/admin/MAdminAddonManager.test.tsx
@@ -1,4 +1,4 @@
-// FE-MOB-AADD-001 to FE-MOB-AADD-025
+// FE-MOB-AADD-001 to FE-MOB-AADD-031
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
import userEvent from '@testing-library/user-event';
import { delay, http, HttpResponse } from 'msw';
@@ -356,6 +356,104 @@ describe('MAdminAddonManager', () => {
expect(screen.getByRole('switch', { name: 'Todo List' })).toHaveAttribute('aria-checked', 'true');
});
+ describe('document providers', () => {
+ const documents = (enabled = true) =>
+ buildAddon({ id: 'documents', name: 'Documents', description: 'Store and manage travel documents', icon: 'FileText', enabled });
+ const docProvider = (id: string, name: string, enabled: boolean) =>
+ buildAddon({ id, name, description: `${name} archive`, icon: id, type: 'document_provider', enabled });
+
+ it('FE-MOB-AADD-028: they render as sub-rows under the Documents addon, not as addons of their own', async () => {
+ server.use(
+ addonsRoute([
+ documents(),
+ docProvider('paperless', 'Paperless-ngx', false),
+ docProvider('nextcloud', 'Nextcloud', true),
+ ]),
+ );
+ render(
+
+ beforeEach(() => {
+ setAssignmentTimes = vi.fn(async () => undefined)
+ seedStore(useAuthStore, { user: { id: 1, role: 'user' } })
+ seedStore(useTripStore, {
+ trip: { id: 4, user_id: 1 },
+ assignments: { '11': [{ id: 102, day_id: 11, place_id: 202, order_index: 1, assignment_time: '22:00', assignment_end_time: '23:45' }] },
+ })
+ useTripStore.setState({ setAssignmentTimes, refreshDays: vi.fn(async () => undefined) } as never)
+ })
+
+ it('FE-MOB-RTSTAY-020: says when the drive leaves and what stay that makes, with nothing to set', () => {
+ renderSheet({ roadtripRoutes: { days: [LEAVING] } })
+ // Named for what it holds, as the desktop dialog is: there is no stay to add here.
+ expect(screen.getByRole('dialog', { name: 'Time at this stop' })).toBeInTheDocument()
+ expect(screen.getByText('Time at this stop')).toBeInTheDocument()
+ expect(screen.queryByText('Add a stay')).not.toBeInTheDocument()
+ expect(screen.getByText('1 h 15 min')).toBeInTheDocument()
+ expect(screen.getByText('This visit has an end time, so the drive leaves at 23:45.')).toBeInTheDocument()
+ expect(screen.getByText('22:30')).toBeInTheDocument()
+ expect(screen.getByText('23:45')).toBeInTheDocument()
+ expect(screen.queryByRole('button', { name: '5 minutes more' })).not.toBeInTheDocument()
+ expect(screen.queryByRole('button', { name: 'Save' })).not.toBeInTheDocument()
+ })
+
+ it('FE-MOB-RTSTAY-021: taking the end time off keeps the Start and writes through the visit', async () => {
+ const { planner } = renderSheet({ roadtripRoutes: { days: [LEAVING] } })
+ fireEvent.click(screen.getByRole('button', { name: 'Remove end time' }))
+ await waitFor(() => expect(setAssignmentTimes).toHaveBeenCalledWith(4, 11, 102, { place_time: '22:00', end_time: null }))
+ // The ordinary sheet is back, on the stay the place carries.
+ await waitFor(() => expect(value()).toHaveTextContent('30'))
+ expect(planner.setRoadtripStay).not.toHaveBeenCalled()
+ })
+
+ it('FE-MOB-RTSTAY-022: a traveller who may not change the day is not offered the removal', () => {
+ usePermissionsStore.setState({ permissions: { day_edit: 'trip_owner' } })
+ seedStore(useTripStore, { trip: { id: 4, user_id: 2 } })
+ renderSheet({ roadtripRoutes: { days: [LEAVING] } })
+ expect(screen.getByText('1 h 15 min')).toBeInTheDocument()
+ expect(screen.queryByRole('button', { name: 'Remove end time' })).not.toBeInTheDocument()
+ })
+
+ it('FE-MOB-RTSTAY-024: reached after the time, it says so instead of promising it', () => {
+ const late = {
+ ...LEAVING,
+ schedule: {
+ entries: [STAGE.schedule.entries[0], { arrival: '23:55', departure: '23:55', anchored: false, dayOffset: 0 }],
+ warnings: [{ index: 1, code: 'missedLeave', minutes: 10 }],
+ },
+ } as unknown as RoadtripDay
+ renderSheet({ roadtripRoutes: { days: [late] } })
+ expect(screen.getByText('Arrives 10 min after the time you set to leave')).toBeInTheDocument()
+ expect(screen.queryByText('This visit has an end time, so the drive leaves at 23:45.')).not.toBeInTheDocument()
+ expect(screen.getAllByText('23:55')).toHaveLength(2)
+ })
+
+ it('FE-MOB-RTSTAY-025: travel hours over before the time say so, with no departure beside it', () => {
+ const closed = {
+ ...LEAVING,
+ schedule: {
+ entries: [STAGE.schedule.entries[0], { arrival: '17:30', departure: '18:00', anchored: false, dayOffset: 0 }],
+ warnings: [],
+ },
+ } as unknown as RoadtripDay
+ renderSheet({ roadtripRoutes: { days: [closed] } })
+ expect(screen.getByText('The travel day ends before 23:45, so the drive goes on the next morning.')).toBeInTheDocument()
+ expect(screen.queryByText('18:00')).not.toBeInTheDocument()
+ })
+
+ it('FE-MOB-RTSTAY-023: the close in the header writes nothing', () => {
+ const { shell } = renderSheet({ roadtripRoutes: { days: [LEAVING] } })
+ fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+ expect(shell.closeSheet).toHaveBeenCalledTimes(1)
+ expect(setAssignmentTimes).not.toHaveBeenCalled()
+ })
+ })
})
diff --git a/client/tests/unit/mobile/trip/MRtStopSheet.test.tsx b/client/tests/unit/mobile/trip/MRtStopSheet.test.tsx
index c226e3e8e..d23cdd740 100644
--- a/client/tests/unit/mobile/trip/MRtStopSheet.test.tsx
+++ b/client/tests/unit/mobile/trip/MRtStopSheet.test.tsx
@@ -8,7 +8,7 @@ import { useTripStore } from '../../../../src/store/tripStore'
import { resetAllStores, seedStore } from '../../../helpers/store'
import { fireEvent, render, screen, waitFor } from '../../../helpers/render'
-// FE-MOB-RTSTOP-001 to FE-MOB-RTSTOP-035
+// FE-MOB-RTSTOP-001 to FE-MOB-RTSTOP-038
//
// The sheet renders inside the real TranslationProvider, so the copy is asserted
// in English. `planner.t` from the fixture is never consulted here.
@@ -511,4 +511,50 @@ describe('MRtStopSheet', () => {
expect(shell.closeSheet).toHaveBeenCalledTimes(1)
expect(planner.setSelectedPlaceId).not.toHaveBeenCalled()
})
+
+ describe('a stop left at a set time', () => {
+ // Lueneburg carries a stay of 30 min, but its End is two in the afternoon: the drive
+ // gets there at ten and keeps to the End.
+ const LUENEBURG = stop({ assignmentId: 105, placeId: 205, name: 'Lueneburg', dwellMinutes: 30, leaveAt: '14:00' })
+ const leaving = (arrival: string, departure: string, warnings: unknown[] = []) => ({
+ ...DAY_A,
+ stops: [HAMBURG, LUENEBURG],
+ schedule: {
+ entries: [
+ { arrival: '09:00', departure: '09:00', anchored: true, dayOffset: 0 },
+ { arrival, departure, anchored: false, dayOffset: 0 },
+ ],
+ warnings,
+ },
+ driveWarnings: [],
+ }) as unknown as RoadtripDay
+ const open = (day: RoadtripDay) =>
+ renderSheet({ roadtripRoutes: { days: [day] } }, { sheet: { id: 'rtstop', payload: { dayId: 11, assignmentId: 105 } } })
+
+ it('FE-MOB-RTSTOP-036: reads the stay the End makes, and until when, on the finding and the tile', () => {
+ open(leaving('10:00', '14:00'))
+ expect(screen.getAllByText('4 h until 14:00')).toHaveLength(2)
+ expect(screen.queryByText('30 min')).not.toBeInTheDocument()
+ })
+
+ it('FE-MOB-RTSTOP-037: under the two clocks it says the drive leaves at that time', () => {
+ open(leaving('10:00', '14:00'))
+ expect(screen.getByText('14:00')).toBeInTheDocument()
+ expect(screen.getByText('This visit has an end time, so the drive leaves at 14:00.')).toBeInTheDocument()
+ })
+
+ it('FE-MOB-RTSTOP-038: reached after it, the stop says by how much', () => {
+ open(leaving('14:30', '14:30', [{ index: 1, code: 'missedLeave', minutes: 30 }]))
+ expect(screen.getByText('Arrives 30 min after the time you set to leave')).toBeInTheDocument()
+ expect(screen.getAllByText('0 min until 14:00')).toHaveLength(2)
+ // Left at 14:30, so nothing under the clocks promises 14:00.
+ expect(screen.queryByText('This visit has an end time, so the drive leaves at 14:00.')).not.toBeInTheDocument()
+ })
+
+ it('FE-MOB-RTSTOP-039: with the travel hours over first, it reads until when and says the drive goes on in the morning', () => {
+ open(leaving('10:00', '12:00'))
+ expect(screen.getAllByText('until 14:00')).toHaveLength(2)
+ expect(screen.getByText('The travel day ends before 14:00, so the drive goes on the next morning.')).toBeInTheDocument()
+ })
+ })
})
diff --git a/client/tests/unit/mobile/trip/MTripShell.test.tsx b/client/tests/unit/mobile/trip/MTripShell.test.tsx
index 96b9893e0..6082b038b 100644
--- a/client/tests/unit/mobile/trip/MTripShell.test.tsx
+++ b/client/tests/unit/mobile/trip/MTripShell.test.tsx
@@ -1,10 +1,16 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import { act, fireEvent, render, screen, within } from '../../../helpers/render'
+import { http, HttpResponse } from 'msw'
+import { act, fireEvent, render, screen, waitFor, within } from '../../../helpers/render'
import { buildPlanner, buildShell } from '../../../helpers/mobileTrip'
+import { server } from '../../../helpers/msw/server'
+import { seedStore } from '../../../helpers/store'
+import { buildUser } from '../../../helpers/factories'
+import { useAuthStore } from '../../../../src/store/authStore'
+import { useDocSyncOfferStore } from '../../../../src/store/docSyncOfferStore'
import type { MTripShellApi, TripPlanner } from '../../../../src/mobile/screens/trip/MTripShell'
import type { Day, PackingItem, TodoItem } from '../../../../src/types'
-// FE-MOB-SHELL-001 to FE-MOB-SHELL-066
+// FE-MOB-SHELL-001 to FE-MOB-SHELL-068
const mocks = vi.hoisted(() => ({ planner: {} as TripPlanner }))
@@ -120,6 +126,13 @@ const spy = (planner: TripPlanner, name: keyof TripPlanner) =>
describe('MTripShell', () => {
beforeEach(() => {
sessionStorage.clear()
+ // Document sync as a fresh install has it: every provider off, nothing bound.
+ useDocSyncOfferStore.setState({ bound: {}, providers: null })
+ seedStore(useAuthStore, { user: null, isAuthenticated: false })
+ server.use(
+ http.get('/api/trips/:tripId/docsync/providers', () => HttpResponse.json([])),
+ http.get('/api/trips/:tripId/docsync/links', () => HttpResponse.json([])),
+ )
})
it('FE-MOB-SHELL-001: shows the loading splash with the trip title while the planner loads', () => {
@@ -455,6 +468,32 @@ describe('MTripShell', () => {
expect(shellApi.openFilesTrashSignal).toBe(1)
})
+ it('FE-MOB-SHELL-067: the files header leaves the sync button out while no provider is on and nothing is bound', async () => {
+ seedStore(useAuthStore, { user: buildUser({ id: 1, role: 'user' }), isAuthenticated: true })
+ const asked: string[] = []
+ server.use(
+ http.get('/api/trips/:tripId/docsync/links', () => {
+ asked.push('links')
+ return HttpResponse.json([])
+ }),
+ )
+ renderShell({ activeTab: 'dateien' } as Partial)
+
+ await waitFor(() => expect(asked).toContain('links'))
+ expect(screen.queryByRole('button', { name: 'docsync.title' })).not.toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'common.upload' })).toBeInTheDocument()
+ expect(screen.getByRole('button', { name: 'files.trash' })).toBeInTheDocument()
+ })
+
+ it('FE-MOB-SHELL-068: a bound trip shows the sync button to a member, and it raises the open signal', async () => {
+ seedStore(useAuthStore, { user: buildUser({ id: 999, role: 'user' }), isAuthenticated: true })
+ server.use(http.get('/api/trips/:tripId/docsync/links', () => HttpResponse.json([{ id: 1, providerId: 'paperless' }])))
+ renderShell({ activeTab: 'dateien' } as Partial)
+
+ fireEvent.click(await screen.findByRole('button', { name: 'docsync.title' }))
+ expect(shellApi.openDocSyncSignal).toBe(1)
+ })
+
it('FE-MOB-SHELL-034: the lists header shows packed/open counts and persists the sub-tab', () => {
const packingItems = [
{ id: 1, checked: true }, { id: 2, checked: false }, { id: 3, checked: true },
diff --git a/client/tests/unit/mobile/trip/PlTimeFields.test.tsx b/client/tests/unit/mobile/trip/PlTimeFields.test.tsx
index 36d21e983..7bfa12667 100644
--- a/client/tests/unit/mobile/trip/PlTimeFields.test.tsx
+++ b/client/tests/unit/mobile/trip/PlTimeFields.test.tsx
@@ -7,7 +7,7 @@ import { seedStore } from '../../../helpers/store'
import { buildSettings } from '../../../helpers/factories'
import { useSettingsStore } from '../../../../src/store/settingsStore'
-// FE-MOB-PLTIME-001 to FE-MOB-PLTIME-013
+// FE-MOB-PLTIME-001 to FE-MOB-PLTIME-015
const planner = buildPlanner()
@@ -151,4 +151,24 @@ describe('PlTimeFields', () => {
setup({ endTime: '11:0', dayAssignments: [SELF, assignment(2, 'Park', '10:30', '12:00')] })
expect(screen.queryByText(/places.timeCollision/)).not.toBeInTheDocument()
})
+
+ it('FE-MOB-PLTIME-014: opened from the road trip tab, End says the drive leaves at it', () => {
+ render(
+
-
- {held.image_url && !imgBusy && (
-
+ {/* Chip and cover controls share the top row, in flow: the name always
+ starts below the buttons, chip or not, and a long category name
+ ellipsizes against them instead of running underneath. */}
+
+ {held.category?.name && (
+
+
+
+ {canEdit && onUploadImage && (
+ <>
+
+ {held.image_url && !imgBusy && (
+
+ )}
+
+
)}
-
+
- )}
- {held.name}
+ {held.name}
diff --git a/client/src/mobile/screens/trip/MTripShell.tsx b/client/src/mobile/screens/trip/MTripShell.tsx
index b59764b2e..cffc7685c 100644
--- a/client/src/mobile/screens/trip/MTripShell.tsx
+++ b/client/src/mobile/screens/trip/MTripShell.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState, type ComponentType, type ReactNode } from
import { findFocusDayId } from '../../../components/Planner/today'
import {
CalendarDays, ChevronDown, ChevronLeft, Download, FileDown, List, Map as MapIcon, MoreHorizontal,
- Plane, Plus, Rows3, Route, SlidersHorizontal, Trash2, Upload,
+ FolderSync, Plane, Plus, Rows3, Route, SlidersHorizontal, Trash2, Upload,
} from 'lucide-react'
import { useTripPlanner } from '../../../pages/tripPlanner/useTripPlanner'
import { pickDockTabs } from './dockTabs'
@@ -19,7 +19,10 @@ import { stageOf } from '../../../components/Roadtrip/roadtripRowModel'
import { badgeLabel, distanceBadge } from './roadtrip/stageBadges'
import type { CorridorReach } from '../../../components/Roadtrip/corridorSearchModel'
import { useSettingsStore } from '../../../store/settingsStore'
-import type { Day } from '../../../types'
+import { useAuthStore } from '../../../store/authStore'
+import { canManageDocSync } from '../../../components/Files/docsync/useDocSync'
+import { useDocSyncOffered } from '../../../components/Files/docsync/useDocSyncOffered'
+import type { Day, Trip } from '../../../types'
/**
* Mobile trip screen frame. Owns the chrome the design shares across every
@@ -116,6 +119,7 @@ export interface MTripShellApi {
exportCostsCsvSignal: number
uploadFilesSignal: number
openFilesTrashSignal: number
+ openDocSyncSignal: number
}
/**
@@ -226,6 +230,7 @@ export default function MTripShell({
const [exportCostsCsvSignal, setExportCostsCsvSignal] = useState(0)
const [uploadFilesSignal, setUploadFilesSignal] = useState(0)
const [openFilesTrashSignal, setOpenFilesTrashSignal] = useState(0)
+ const [openDocSyncSignal, setOpenDocSyncSignal] = useState(0)
// The mobile plan is single-day: make sure a day is active once days arrive.
// Only seed once so an intentional deselect elsewhere is not fought. Open on
@@ -378,6 +383,7 @@ export default function MTripShell({
listsTab, setListsTab, collabTab, setCollabTab,
transportsCompact, bookingsCompact,
addExpenseSignal, exportCostsCsvSignal, uploadFilesSignal, openFilesTrashSignal,
+ openDocSyncSignal,
}
// Splash — same gate as the desktop page, in the mobile design language.
@@ -672,6 +678,7 @@ export default function MTripShell({
{trTab === 'dateien' && (
setOpenDocSyncSignal(s => s + 1)} />
setOpenFilesTrashSignal(s => s + 1)} size={40} className="text-m-muted backdrop-blur-[24px] backdrop-saturate-[1.7]">
@@ -769,6 +776,23 @@ function PrimaryPill({ label, onClick, icon }: { label: string; onClick: () => v
)
}
+/**
+ * The Files header's sync button, only where there is something behind it.
+ *
+ * A component of its own so the question is asked while the Files header is
+ * up, not on every tab the shell renders.
+ */
+function DocSyncButton({ tripId, trip, label, onOpen }: { tripId: number; trip: Trip; label: string; onOpen: () => void }) {
+ const user = useAuthStore(s => s.user)
+ const offered = useDocSyncOffered(tripId, canManageDocSync(user, trip))
+ if (!offered) return null
+ return (
+
+
+ )
+}
+
/** 40px list-density toggle on the transports/bookings headers. */
function CompactToggle({ active, onToggle, label }: { active: boolean; onToggle: () => void; label: string }) {
return (
diff --git a/client/src/mobile/screens/trip/roadtrip/MRtStaySheet.tsx b/client/src/mobile/screens/trip/roadtrip/MRtStaySheet.tsx
index 25f671f95..fd4e8c759 100644
--- a/client/src/mobile/screens/trip/roadtrip/MRtStaySheet.tsx
+++ b/client/src/mobile/screens/trip/roadtrip/MRtStaySheet.tsx
@@ -1,5 +1,5 @@
import { useEffect, useMemo, useRef, useState } from 'react'
-import { ArrowRight, Minus, Plus } from 'lucide-react'
+import { AlertTriangle, ArrowRight, Minus, Plus } from 'lucide-react'
import MSheet from '../../../components/MSheet'
import MChip from '../../../components/MChip'
import type { MTripSheetsProps } from '../MTripShell'
@@ -7,9 +7,11 @@ import { useTranslation } from '../../../../i18n'
import { useSettingsStore } from '../../../../store/settingsStore'
import { formatClock, formatDurationShort, parseClock } from '../../../../components/Roadtrip/roadtripModel'
import { stageOf } from '../../../../components/Roadtrip/roadtripRowModel'
+import { locateStop, missedLeaveOf } from '../../../../components/Roadtrip/stayReading'
+import { useLeaveMode, type LeaveMode } from '../../../../components/Roadtrip/useLeaveMode'
import { formatClockTime } from '../../../../utils/formatters'
import { FormSheetHeader } from '../sheets/PlSheetChrome'
-import { INNER_CLS } from '../sheets/MTripSheetUi'
+import { INNER_CLS, displayTime } from '../sheets/MTripSheetUi'
/** What the chain hands over when a stop's stay is tapped. */
interface RtStaySheetPayload {
@@ -102,12 +104,24 @@ export default function MRtStaySheet({ planner, shell }: MTripSheetsProps) {
*/
const stage = stageOf(planner.roadtripRoutes.days, planner.selectedDayId)
const stopPlaceId = stop?.placeId
+ // The visit itself when the stop sheet named it, read off the same stage: its end time
+ // decides whether there is a stay to choose here at all.
+ const located = stage && stop?.assignmentId != null ? locateStop([stage], stop.assignmentId) : null
const arrival = useMemo(() => {
+ if (located) return located.entry?.arrival ?? null
if (!stage || stopPlaceId == null) return null
const index = stage.stops.findIndex(s => s.placeId === stopPlaceId)
if (index === -1) return null
return stage.schedule.entries[index]?.arrival ?? null
- }, [stage, stopPlaceId])
+ }, [located, stage, stopPlaceId])
+ const leave = useLeaveMode(located && {
+ leaveAt: located.stop.leaveAt,
+ arrival: located.entry?.arrival,
+ departure: located.entry?.departure,
+ missedBy: missedLeaveOf(located.day, located.index),
+ assignmentId: located.stop.assignmentId,
+ dayId: located.stop.ownerDayId,
+ })
// What the stay does to this stop: the arrival is fixed by the drive, the departure is
// the one end this sheet moves.
@@ -170,9 +184,13 @@ export default function MRtStaySheet({ planner, shell }: MTripSheetsProps) {
onClose={shell.closeSheet}
variant="bottom"
material="opaque"
- ariaLabel={t('roadtrip.stay.add')}
+ // Named for what it holds: a stop left at a set time has no stay to add.
+ ariaLabel={leave.until ? t('roadtrip.stop.stay') : t('roadtrip.stay.add')}
>
- {stop && (
+ {stop && leave.until && (
+
)
}
+
+/**
+ * The sheet for a stop the traveller leaves at a set time, where there is no stay to pick.
+ *
+ * It says when the drive leaves and what stay that makes, and offers the one thing there
+ * is to do: take the end time off the visit, after which the stay is a choice again.
+ */
+function RtLeaveTime({ name, leave, arrival, departure, onClose }: {
+ name?: string
+ leave: LeaveMode
+ arrival: string | null
+ departure: string | null
+ onClose: () => void
+}) {
+ const { t, locale } = useTranslation()
+ const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
+ const until = displayTime(leave.until, locale, timeFormat)
+ const captionCls = 'font-geist text-[0.5625rem] font-bold uppercase tracking-[.09em] text-m-faint'
+ return (
+ <>
+
)}
{/* ── What this stop costs, and what the drive to it went past ── */}
- {(!!stayMinutes || !!row.offRoadMeters || warnings.length > 0) && (
+ {(!!stayText || !!row.offRoadMeters || warnings.length > 0) && (
{t('places.endTime')}
onChange('end_time', v)} />
+ {endIsLeave && (
+
{hasTimeError && (
diff --git a/client/src/mobile/screens/trip/tabs/MDocSyncSheet.test.tsx b/client/src/mobile/screens/trip/tabs/MDocSyncSheet.test.tsx
new file mode 100644
index 000000000..869e65ce6
--- /dev/null
+++ b/client/src/mobile/screens/trip/tabs/MDocSyncSheet.test.tsx
@@ -0,0 +1,400 @@
+// FE-DOCSYNC-MOBILE-001 to FE-DOCSYNC-MOBILE-018
+import type { ComponentProps } from 'react'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, waitFor, within } from '../../../../../tests/helpers/render'
+import { docsyncApi } from '../../../../api/client'
+import type { DocSyncConnection, DocSyncLink, DocSyncProvider, DocSyncScope } from '../../../../components/Files/docsync/useDocSync'
+import MDocSyncSheet from './MDocSyncSheet'
+
+/**
+ * The phone sheet is markup over `useDocSync`, so everything here goes through
+ * the one module boundary that hook has: `docsyncApi`. Nothing reaches into the
+ * component.
+ */
+
+const TRIP_ID = 3
+
+/**
+ * Shaped like a row of document_provider_fields, which matters more than it looks.
+ *
+ * `field_key` is snake_case and `label` already carries the full key suffix
+ * (`providerApiKey`, not `apiKey`), see server/src/db/document-provider-seed.ts.
+ * An earlier version of this fixture invented both, which made a sheet that
+ * built label keys the wrong way look correct: the fixture's `apiKey` and the
+ * sheet's `docsync.provider${cap(...)}` happened to meet in the middle, while
+ * the real data produced `docsync.providerProviderApiKey` and rendered the raw
+ * key on screen.
+ */
+const field = (over: Partial
+ {name &&
+ {leave.remove && (
+ {name}
}
+
+ {leave.minutes === null ? t('roadtrip.stay.until', { time: until }) : formatDurationShort(leave.minutes * 60)}
+
+ {/* What the drive actually does, as the desktop dialog says it: reached too late it
+ leaves on arrival, with the travel hours over first it goes on in the morning. */}
+ {leave.missedBy !== null ? (
+
+
+ {t('roadtrip.warn.missedLeave', { minutes: leave.missedBy })}
+
+ ) : (
+
+ {t(leave.dayEndsFirst ? 'roadtrip.stay.dayEndsFirst' : 'roadtrip.stay.leavesAt', { time: until })}
+
+ )}
+ {arrival && !leave.dayEndsFirst && (
+
+
+ {t('roadtrip.stay.arrive')}
+
+ {displayTime(arrival, locale, timeFormat)}
+
+
+
+
+ {t('roadtrip.stay.leave')}
+
+ {displayTime(departure ?? leave.until, locale, timeFormat)}
+
+
+
+ )}
+
+
+
+ )}
+
+ )
+}
diff --git a/client/src/mobile/screens/trip/roadtrip/MRtStopSheet.tsx b/client/src/mobile/screens/trip/roadtrip/MRtStopSheet.tsx
index 7776813ea..8d1963828 100644
--- a/client/src/mobile/screens/trip/roadtrip/MRtStopSheet.tsx
+++ b/client/src/mobile/screens/trip/roadtrip/MRtStopSheet.tsx
@@ -13,6 +13,7 @@ import { useTripStore } from '../../../../store/tripStore'
import ChargingInfo from '../../../../components/Roadtrip/ChargingInfo'
import { formatDurationShort } from '../../../../components/Roadtrip/roadtripModel'
import { roadtripRows, stageOf, type StopRow } from '../../../../components/Roadtrip/roadtripRowModel'
+import { readStay, shownStay } from '../../../../components/Roadtrip/stayReading'
import { STOP_KIND_BY_KEY } from '../../../../components/Roadtrip/stopKinds'
import { getNavigationTargets, openNavigationTarget } from '../../../../components/Planner/placeNavigation'
import { NavigationMenu } from '../../../../components/shared/NavigationMenu'
@@ -39,10 +40,11 @@ import type { RoadtripDay, ScheduleWarning } from '@trek/shared/roadtrip'
*
* Editing the place is the one way out of that rule, and it is a hand-over rather than a
* control of this sheet: the pencil opens the place editor the plan tab opens, with this
- * very visit in context, and this sheet closes behind it. The time somebody fixed for a
- * stop is that editor's start time (the chain anchors on the visit's own start time), so
- * a time control here would be a second writer for one number. A booked night can also
- * be held by its check-in, which belongs to the booking and not to the place.
+ * very visit in context, and this sheet closes behind it. The times somebody fixed for a
+ * stop are that editor's Start and End (the chain arrives at the visit's own Start and
+ * leaves at its End), so a time control here would be a second writer for one number. A
+ * booked night can also be held by its check-in, which belongs to the booking and not to
+ * the place.
*/
interface RtStopSheetPayload {
@@ -203,16 +205,17 @@ export default function MRtStopSheet({ planner, shell }: MTripSheetsProps) {
// Every finding filed at this stop, not just the one the chain had room for: being late
// and driving too far are separate answers and the sheet is where both fit.
const warnings: ScheduleWarning[] = [
- ...day.schedule.warnings.filter(w => w.index === index && w.code === 'late'),
+ ...day.schedule.warnings.filter(w => w.index === index && (w.code === 'late' || w.code === 'missedLeave')),
...day.driveWarnings.filter(w => w.index === index && (w.code === 'leg' || w.code === 'range')),
]
const warningText = (w: ScheduleWarning): string => {
if (w.code === 'late') return t('roadtrip.warn.late', { minutes: w.minutes ?? 0 })
+ if (w.code === 'missedLeave') return t('roadtrip.warn.missedLeave', { minutes: w.minutes ?? 0 })
if (w.code === 'range') return t('roadtrip.limit.range', { distance: formatDistance(w.sinceKm ?? 0, unit) })
return t('roadtrip.limit.legOver', { time: formatDurationShort((w.overMinutes ?? 0) * 60) })
}
const warningIcon = (w: ScheduleWarning): ReactNode => {
- if (w.code === 'late') return
{entry?.anchored ? t('roadtrip.stop.pinned') : t('roadtrip.stop.computed')}
+ {/* Only where it is true. Reached too late the stop is left on arrival, which
+ the finding below says; with the travel hours over first the drive goes on
+ in the morning, not at the time or at the Leave shown above. */}
+ {stay.until && !missed && (
+
+ {t(stay.dayEndsFirst ? 'roadtrip.stay.dayEndsFirst' : 'roadtrip.stay.leavesAt', {
+ time: displayTime(stay.until, locale, timeFormat),
+ })}
+
+ )}
- {!!stayMinutes && (
+ {!!stayText && (
diff --git a/client/src/mobile/screens/trip/sheets/PlTimeFields.tsx b/client/src/mobile/screens/trip/sheets/PlTimeFields.tsx
index 3da0ba31c..5f50179a7 100644
--- a/client/src/mobile/screens/trip/sheets/PlTimeFields.tsx
+++ b/client/src/mobile/screens/trip/sheets/PlTimeFields.tsx
@@ -29,6 +29,9 @@ export default function PlTimeFields({
planner, startTime, endTime, onChange, assignmentId, dayAssignments, hasTimeError,
}: PlTimeFieldsProps) {
const { t } = planner
+ // Opened from the road trip tab, where the End of a visit is when the drive leaves it.
+ // The plan tab reads the day as Days does, and there End stays a plain label.
+ const endIsLeave = planner.activeTab === 'roadtrip'
const collisions = useMemo(() => {
if (!startTime || startTime.length < 5) return []
@@ -58,6 +61,9 @@ export default function PlTimeFields({
{t('roadtrip.stop.endIsLeave')}
+ )}
+
+
+
+ {view !== 'list' && (
+ setView('list')} ariaLabel={t('common.back')}>
+
+ )}
+
+
+
+
+ {sync.loading ? (
+ setView('scope')}
+ />
+ ) : view === 'scope' && pending && sync.connectionFor(pending.id) ? (
+ setView('list')}
+ />
+ ) : view === 'detail' && link ? (
+ setConfirmUnlink(true)}
+ />
+ ) : (
+ { setSelected(id); setView('detail') }}
+ onAdd={openStore}
+ />
+ )}
+
+
+
+ ) : sync.providers.length === 0 && sync.links.length === 0 ? (
+ // Only with nothing bound, as on the desktop panel.
+
+ {links.length > 0 && (
+
+ {t('docsync.sidebar.connected')}
+
+ )}
+
+ {canManage && available.length > 0 && (
+
+ {links.length === 0 ? t('docsync.addProvider') : t('docsync.addAnother')}
+
+ )}
+
+ {links.length === 0 && !canManage && (
+
+ )
+}
+
+/** One binding: the flow, a run button, its settings. */
+function DetailView({
+ link,
+ tripId,
+ providerName,
+ sync,
+ canManage,
+ onUnlink,
+}: {
+ link: DocSyncLink
+ tripId: number | string
+ providerName: string
+ sync: ReturnType
+ {links.map(l => (
+ onOpen(l.id)}
+ />
+ ))}
+
+
+ {available.map(p => (
+ onAdd(p)}
+ />
+ ))}
+
+
+ {/* The two ends, side by side, with the lanes stacked under them: the
+ desktop bar puts them left and right of each other, which needs width
+ a phone does not have. */}
+
+
+
+ |
+ |
+
+ {notice && (
+
+ void sync.updateLink(link.id, { syncEnabled: !link.syncEnabled })}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ )
+}
+
+/**
+ * Credentials for a store this instance offers but the trip has not used yet.
+ *
+ * The rules (which field is the address, which one is a switch, how a label
+ * becomes a key) live in `useConnectForm`, the same one the desktop dialog
+ * uses. Written out here a second time they came out wrong in four separate
+ * ways, including an address this form never actually sent.
+ */
+function ConnectView({
+ provider,
+ sync,
+ onDone,
+}: {
+ provider: DocSyncProvider
+ sync: ReturnType
+
+
+
+
+ + {notice} +
+ )} + +
+
+ )
+}
+
+/** Which folder, tag or space this trip gets. */
+function ScopeView({
+ connectionId,
+ suggestedName,
+ sync,
+ onBound,
+}: {
+ connectionId: number
+ suggestedName: string
+ sync: ReturnType{t(`docsync.connect.about.${provider.id}`)}
+ + {form.fields.map(f => ( + + ))} + +
+
+ {t('docsync.allowInsecureTls')}
+
+ {t('docsync.connect.insecureHint')}
+
+
+
+
+ {verdict && (
+ + {verdict.connected + ? verdict.account + ? t('docsync.connect.okAs', { account: verdict.account }) + : t('docsync.connected') + : t(`docsync.error.${verdict.error ?? 'unknown'}`)} +
+ )} + + {sync.error && !verdict && ( ++ {t(`docsync.error.${sync.error}`)} +
+ )} + +
+
+
+
+
+ {t('docsync.scope.pickTitle')}
+
+ {scopes === null ? (
+
+ )
+}
+
+/** One store in the list, connected or not. */
+function StoreRow({
+ providerId,
+ title,
+ sub,
+ state,
+ addable,
+ onClick,
+}: {
+ providerId: string
+ title: string
+ sub: string
+ state?: string
+ addable?: boolean
+ onClick: () => void
+}) {
+ const Icon = DOCUMENT_PROVIDER_ICONS[providerId]
+ return (
+
+ )
+}
+
+/** One side of the flow: how much it is holding. */
+function EndBox({ glyph, count, name }: { glyph: React.ReactNode; count: number; name: string }) {
+ const { t } = useTranslation()
+ return (
+ {t('docsync.scope.intro')}
+ +
+ setName(e.target.value)}
+ placeholder={t('docsync.newFolderPlaceholder')}
+ className="h-11 min-w-0 flex-1 rounded-2xl border border-[color:var(--m-inbr)] bg-[color:var(--m-inner)] px-3 text-[0.8125rem] text-m-ink outline-none"
+ />
+
+
+
+ {sync.error && (
+ + {t(`docsync.error.${sync.error}`)} +
+ )} + ++ {t(`docsync.error.${error}`)} +
+ ) : scopes.length === 0 ? ( +
+ {scopes.map(s => (
+
+ ))}
+
+ )}
+
+
+ {glyph}
+
+ {count}
+
+ {t('docsync.flow.documents')}
+
+ {name}
+
+ )
+}
+
+/**
+ * One direction, on or off.
+ *
+ * The off state is the desktop's hatch, scaled for a phone: the same reading of
+ * "nothing goes through here" without a second vocabulary to learn.
+ */
+function LaneRow({
+ active,
+ label,
+ icon,
+ disabled,
+ onClick,
+}: {
+ active: boolean
+ label: string
+ icon: React.ReactNode
+ disabled?: boolean
+ onClick: () => void
+}) {
+ return (
+
+ )
+}
+
+function StateDot({ state }: { state: string }) {
+ const { t } = useTranslation()
+ const tone =
+ state === 'ok' ? 'var(--m-st-ok, #22c55e)'
+ : state === 'partial' ? 'var(--m-st-warn, #f59e0b)'
+ : state === 'never' ? 'var(--m-trackoff)'
+ : 'var(--m-st-danger)'
+ return (
+
+ )
+}
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+ return {children}
+}
+
+function Row({ label, value }: { label: string; value: string }) {
+ return (
+
+ {label}
+ {value}
+
+ )
+}
+
+function SettingRow({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
+ return (
+
+
+ {label}
+ {hint && {hint}}
+
+ {children}
+
+ )
+}
+
+function Empty({ text, hint }: { text: string; hint?: string }) {
+ return (
+
+
+ )
+}
+
+/** A folder name from the trip's own title, so nobody has to invent one. */
+function slugFor(title: string | undefined, tripId: number | string): string {
+ const base = (title || 'trek')
+ .toLowerCase()
+ .normalize('NFD')
+ .replace(/[̀-ͯ]/g, '')
+ .replace(/[^a-z0-9]+/g, '-')
+ .replace(/^-+|-+$/g, '')
+ .slice(0, 40)
+ return `${base || 'trek'}-${tripId}`
+}
+
+/**
+ * The documents that changed in both places, with the way out.
+ *
+ * The same three answers the panel offers, through the same hook. Only the
+ * markup is a phone's.
+ */
+function MConflicts({
+ tripId,
+ sync,
+ count,
+}: {
+ tripId: number | string
+ sync: ReturnType{text}
+ {hint && {hint}
}
+ -
+ {conflicts.items === null && (
+
-
+
+
+ )}
+ {conflicts.items?.map(item => (
+ -
+
{item.name}
++ {(['trek', 'provider', 'both'] as const).map(keep => ( + + ))} ++
+ ))}
+