{#if variant == 'schedule'}
{formatTime(scheduled)}
{:else if variant === 'realtime-show-always' || (variant === 'realtime' && isRealtime)}
diff --git a/ui/src/lib/components/ui/card/card.svelte b/ui/src/lib/components/ui/card/card.svelte
index c7531d50c..823ff02c7 100644
--- a/ui/src/lib/components/ui/card/card.svelte
+++ b/ui/src/lib/components/ui/card/card.svelte
@@ -13,7 +13,7 @@
{@render children?.()}
diff --git a/ui/src/lib/components/ui/radio-group/radio-group.svelte b/ui/src/lib/components/ui/radio-group/radio-group.svelte
index 47172bdbd..3a8b95a76 100644
--- a/ui/src/lib/components/ui/radio-group/radio-group.svelte
+++ b/ui/src/lib/components/ui/radio-group/radio-group.svelte
@@ -12,4 +12,4 @@
export { className as class };
-
+
diff --git a/ui/src/lib/components/ui/toggle/toggle.svelte b/ui/src/lib/components/ui/toggle/toggle.svelte
index 9c76a8600..9f20638fe 100644
--- a/ui/src/lib/components/ui/toggle/toggle.svelte
+++ b/ui/src/lib/components/ui/toggle/toggle.svelte
@@ -2,7 +2,7 @@
import { type VariantProps, tv } from "tailwind-variants";
export const toggleVariants = tv({
- base: "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+ base: "hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-blue-600 inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
variants: {
variant: {
default: "bg-transparent",
diff --git a/ui/src/lib/i18n/de.ts b/ui/src/lib/i18n/de.ts
index 243917484..12e4f01e5 100644
--- a/ui/src/lib/i18n/de.ts
+++ b/ui/src/lib/i18n/de.ts
@@ -35,7 +35,8 @@ const translations: Translations = {
},
sharingProvider: 'Anbieter',
roundtripStationReturnConstraint:
- 'Das Fahrzeug muss wieder an der Abfahrtsstation abgestellt werden.'
+ 'Das Fahrzeug muss wieder an der Abfahrtsstation abgestellt werden.',
+ noItinerariesFound: 'Keine Verbindungen gefunden.'
};
export default translations;
diff --git a/ui/src/lib/i18n/en.ts b/ui/src/lib/i18n/en.ts
index 83b78da00..9d50650ea 100644
--- a/ui/src/lib/i18n/en.ts
+++ b/ui/src/lib/i18n/en.ts
@@ -30,11 +30,12 @@ const translations: Translations = {
case 1:
return '1 intermediate stop';
default:
- return `${n} intermediate stops`;
+ return `${n} intermediate stops`;
}
},
sharingProvider: 'Provider',
- roundtripStationReturnConstraint: 'The vehicle must be returned to the departure station.'
+ roundtripStationReturnConstraint: 'The vehicle must be returned to the departure station.',
+ noItinerariesFound: 'No itineraries found.'
};
export default translations;
diff --git a/ui/src/lib/i18n/fr.ts b/ui/src/lib/i18n/fr.ts
index 41cdd6087..27124c09d 100644
--- a/ui/src/lib/i18n/fr.ts
+++ b/ui/src/lib/i18n/fr.ts
@@ -2,7 +2,7 @@ import type { Translations } from './translation';
const translations: Translations = {
journeyDetails: 'Détails du voyage',
- walk: 'Marche',
+ walk: 'à pied',
bike: 'Vélo',
cargoBike: 'Vélo Cargo',
scooterStanding: 'Trottinette',
@@ -17,9 +17,9 @@ const translations: Translations = {
arrivals: 'Arrivées',
later: 'plus tard',
earlier: 'plus tôt',
- departures: 'Départ',
- switchToArrivals: 'Basculer vers les arrivées',
- switchToDepartures: 'Basculer vers les départs',
+ departures: 'Départs',
+ switchToArrivals: 'Afficher les arrivées',
+ switchToDepartures: 'Afficher les départs',
track: 'Voie',
arrivalOnTrack: 'Arrivée sur la voie',
tripIntermediateStops: (n: number) => {
@@ -33,8 +33,9 @@ const translations: Translations = {
}
},
sharingProvider: 'Fournisseur',
- transfers: 'Transferts',
- roundtripStationReturnConstraint: 'Le véhicule doit être retourné à la station de départ.'
+ transfers: 'correspondances',
+ roundtripStationReturnConstraint: 'Le véhicule doit être retourné à la station de départ.',
+ noItinerariesFound: 'Aucun itinéraire trouvé.'
};
export default translations;
diff --git a/ui/src/lib/i18n/pl.ts b/ui/src/lib/i18n/pl.ts
index b40395795..fc52016a8 100644
--- a/ui/src/lib/i18n/pl.ts
+++ b/ui/src/lib/i18n/pl.ts
@@ -34,7 +34,8 @@ const translations: Translations = {
}
},
sharingProvider: 'Dostawca',
- roundtripStationReturnConstraint: 'Pojazd musi zostać zwrócony do stacji początkowej.'
+ roundtripStationReturnConstraint: 'Pojazd musi zostać zwrócony do stacji początkowej.',
+ noItinerariesFound: 'No itineraries found.'
};
export default translations;
diff --git a/ui/src/lib/i18n/translation.ts b/ui/src/lib/i18n/translation.ts
index 6aa91b58e..d2e220249 100644
--- a/ui/src/lib/i18n/translation.ts
+++ b/ui/src/lib/i18n/translation.ts
@@ -30,6 +30,7 @@ export type Translations = {
tripIntermediateStops: (n: number) => string;
sharingProvider: string;
roundtripStationReturnConstraint: string;
+ noItinerariesFound: string;
};
const translations: Map
= new Map(
diff --git a/ui/src/lib/map/Control.svelte b/ui/src/lib/map/Control.svelte
index 03bbb7a39..8ec08e900 100644
--- a/ui/src/lib/map/Control.svelte
+++ b/ui/src/lib/map/Control.svelte
@@ -42,7 +42,7 @@
{#if children}
diff --git a/ui/src/lib/map/Map.svelte b/ui/src/lib/map/Map.svelte
index d783c908f..619ae60a9 100644
--- a/ui/src/lib/map/Map.svelte
+++ b/ui/src/lib/map/Map.svelte
@@ -64,8 +64,9 @@
});
tmp.on('moveend', async () => {
- bounds = tmp.getBounds();
zoom = tmp.getZoom();
+ currentZoom = zoom;
+ bounds = tmp.getBounds();
});
return {
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index 4186d783f..aa5c8428c 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -3,12 +3,11 @@
import { getStyle } from '$lib/map/style';
import Map from '$lib/map/Map.svelte';
import Control from '$lib/map/Control.svelte';
- import SearchMask from './SearchMask.svelte';
+ import SearchMask from '$lib/SearchMask.svelte';
import { posToLocation, type Location } from '$lib/Location';
import { Card } from '$lib/components/ui/card';
import {
initial,
- type Itinerary,
type Match,
plan,
type PlanResponse,
@@ -16,27 +15,30 @@
type Mode,
type PlanData
} from '$lib/openapi';
- import ItineraryList from './ItineraryList.svelte';
- import ConnectionDetail from './ConnectionDetail.svelte';
+ import ItineraryList from '$lib/ItineraryList.svelte';
+ import ConnectionDetail from '$lib/ConnectionDetail.svelte';
import { Button } from '$lib/components/ui/button';
- import ItineraryGeoJson from './ItineraryGeoJSON.svelte';
+ import ItineraryGeoJson from '$lib/ItineraryGeoJSON.svelte';
import maplibregl from 'maplibre-gl';
import { browser } from '$app/environment';
import { cn } from '$lib/utils';
- import Debug from './Debug.svelte';
+ import Debug from '$lib/Debug.svelte';
import Marker from '$lib/map/Marker.svelte';
import Popup from '$lib/map/Popup.svelte';
- import LevelSelect from './LevelSelect.svelte';
+ import LevelSelect from '$lib/LevelSelect.svelte';
import { lngLatToStr } from '$lib/lngLatToStr';
import { client } from '$lib/openapi';
- import StopTimes from './StopTimes.svelte';
- import { onMount } from 'svelte';
- import RailViz from './RailViz.svelte';
+ import StopTimes from '$lib/StopTimes.svelte';
+ import { onMount, tick } from 'svelte';
+ import RailViz from '$lib/RailViz.svelte';
import { t } from '$lib/i18n/translation';
+ import { pushState, replaceState } from '$app/navigation';
+ import { page } from '$app/state';
const urlParams = browser ? new URLSearchParams(window.location.search) : undefined;
const hasDebug = urlParams && urlParams.has('debug');
const hasDark = urlParams && urlParams.has('dark');
+ const isSmallScreen = browser && window.innerWidth < 600;
let theme: 'light' | 'dark' =
(hasDark ? 'dark' : undefined) ??
@@ -53,7 +55,7 @@
let bounds = $state
();
let map = $state();
- onMount(() => {
+ onMount(async () => {
initial().then((d) => {
const r = d.data;
if (r) {
@@ -61,8 +63,28 @@
zoom = r.zoom;
}
});
+ await tick();
+ applyPageStateFromURL();
});
+ const applyPageStateFromURL = () => {
+ if (browser && urlParams) {
+ if (urlParams.has('tripId')) {
+ onClickTrip(urlParams.get('tripId')!, true);
+ }
+ if (urlParams.has('stopId')) {
+ const time = urlParams.has('time') ? new Date(urlParams.get('time')!) : new Date();
+ onClickStop(
+ '',
+ urlParams.get('stopId')!,
+ time,
+ urlParams.get('stopArriveBy') == 'true',
+ true
+ );
+ }
+ }
+ };
+
let fromParam: Match | undefined = undefined;
let toParam: Match | undefined = undefined;
if (browser && urlParams && urlParams.has('from') && urlParams.has('to')) {
@@ -123,15 +145,18 @@
let searchDebounceTimer: number;
let baseResponse = $state>();
let routingResponses = $state>>([]);
+ let stopNameFromResponse = $state('');
$effect(() => {
if (baseQuery) {
clearTimeout(searchDebounceTimer);
searchDebounceTimer = setTimeout(() => {
- const base = plan(baseQuery).then((response) => response.data);
+ const base = plan(baseQuery).then((response) => {
+ if (response.error) throw new Error(String(response.error));
+ return response.data!;
+ });
baseResponse = base;
routingResponses = [base];
- selectedItinerary = undefined;
- selectedStop = undefined;
+ replaceState('?', {});
}, 400);
}
});
@@ -149,34 +174,61 @@
});
}
- let selectedItinerary = $state();
$effect(() => {
- if (selectedItinerary && map) {
- const start = maplibregl.LngLat.convert(selectedItinerary.legs[0].from);
+ if (page.state.selectedItinerary && map) {
+ const start = maplibregl.LngLat.convert(page.state.selectedItinerary.legs[0].from);
const box = new maplibregl.LngLatBounds(start, start);
- selectedItinerary.legs.forEach((l) => {
+ page.state.selectedItinerary.legs.forEach((l) => {
box.extend(l.from);
box.extend(l.to);
l.intermediateStops?.forEach((x) => {
box.extend(x);
});
});
- const padding = { top: 96, right: 96, bottom: 96, left: 640 };
+ const padding = { top: 96, right: 96, bottom: 96, left: isSmallScreen ? 96 : 640 };
map.flyTo({ ...map.cameraForBounds(box), padding });
}
});
- let stopArriveBy = $state();
- let selectedStop = $state<{ name: string; stopId: string; time: Date }>();
+ const pushStateWithQueryString = (
+ // eslint-disable-next-line
+ queryParams: Record,
+ // eslint-disable-next-line
+ newState: App.PageState,
+ replace: boolean = false
+ ) => {
+ const params = new URLSearchParams(queryParams);
+ const updateState = replace ? replaceState : pushState;
+ updateState('?' + params.toString(), newState);
+ };
- const onClickTrip = async (tripId: string) => {
+ const onClickStop = (
+ name: string,
+ stopId: string,
+ time: Date,
+ arriveBy: boolean = false,
+ replace: boolean = false
+ ) => {
+ pushStateWithQueryString(
+ { stopArriveBy: arriveBy, stopId, time: time.toISOString() },
+ {
+ stopArriveBy: arriveBy,
+ selectedStop: { name, stopId, time },
+ selectedItinerary: page.state.selectedItinerary,
+ tripId: page.state.tripId
+ },
+ replace
+ );
+ };
+
+ const onClickTrip = async (tripId: string, replace: boolean = false) => {
const { data: itinerary, error } = await trip({ query: { tripId } });
if (error) {
- alert(error);
+ console.log(error);
+ alert(String((error as Record).error ?? error));
return;
}
- selectedItinerary = itinerary;
- selectedStop = undefined;
+ pushStateWithQueryString({ tripId }, { selectedItinerary: itinerary, tripId: tripId }, replace);
};
type CloseFn = () => void;
@@ -218,7 +270,7 @@
}
}}
{center}
- class={cn('h-screen overflow-clip', theme)}
+ class={cn('h-dvh overflow-clip', theme)}
style={getStyle(theme, level)}
>
{#if hasDebug}
@@ -227,80 +279,91 @@
{/if}
-
-
-
-
-
+ {#if !isSmallScreen || (!page.state.selectedItinerary && !page.state.selectedStop)}
+
+
+
+
+
+ {/if}
- {#if !selectedItinerary && routingResponses.length !== 0}
-
+ {#if !page.state.selectedItinerary && routingResponses.length !== 0}
+
-
+ pushState('', { selectedItinerary })}
+ />
{/if}
- {#if selectedItinerary && !selectedStop}
-
-
+ {#if page.state.selectedItinerary && !page.state.selectedStop}
+
+
{t.journeyDetails}
-
-
{
- stopArriveBy = false;
- selectedStop = { name, stopId, time };
- }}
- {onClickTrip}
- />
+
+
-
+
{/if}
- {#if selectedStop}
-
-
+ {#if page.state.selectedStop}
+
+
- {#if stopArriveBy}
+ {#if page.state.stopArriveBy}
{t.arrivals}
{:else}
{t.departures}
{/if}
in
- {selectedStop.name}
+ {stopNameFromResponse}
-
+
+ onClickStop(
+ page.state.selectedStop!.name,
+ page.state.selectedStop!.stopId,
+ page.state.selectedStop!.time,
+ arriveBy
+ )}
{onClickTrip}
/>