open the station menu automatically at the route's pickup station

When a route involves picking up a bike (or leads to a station), the
station menu now opens on its own once the user gets within unlocking
distance of that station, so unlocking a bike doesn't require tapping
it — which used to replace the route. It opens once per approach, so
dismissing it sticks.

Tapping a station that is already part of the route (pickup, dropoff or
the station destination) now only opens its menu and centers it, instead
of rerouting to that station.

Author: rodrigohpalmeirim

src/lib/components/Map.svelte

@@ -51,19 +51,31 @@
 			const feature = e.features[0] as GeoJSON.Feature<GeoJSON.Point>;
 			const props = feature.properties as { serialNumber: string, name: string, bikes: number };
 			selectedStation.set(props.serialNumber);
-			routeDestination.set({
-				type: 'station',
-				lat: feature.geometry.coordinates[1],
-				lng: feature.geometry.coordinates[0],
-				name: props.name,
-				stationSerial: props.serialNumber,
-			});
+			// Tapping a station that's already part of the route (e.g. to unlock a
+			// bike at the pickup station) only opens its menu — it must not replace
+			// the route with a route to that station
+			const route = get(currentRoute);
+			const partOfRoute = route != null && (
+				route.startStationSerial === props.serialNumber ||
+				route.endStationSerial === props.serialNumber ||
+				(route.destination.type === 'station' && route.destination.stationSerial === props.serialNumber)
+			);
+			if (!partOfRoute) {
+				routeDestination.set({
+					type: 'station',
+					lat: feature.geometry.coordinates[1],
+					lng: feature.geometry.coordinates[0],
+					name: props.name,
+					stationSerial: props.serialNumber,
+				});
+			}
 			await tick();
 			await tick();
 			// With no active trip the camera moves once, when the computed route is
-			// fit to the view; during a trip (or without a location, when no route
-			// can be computed) no fit happens, so center the station instead
-			if (get(currentTrip) !== null || get(currentPos) === null) {
+			// fit to the view; during a trip, without a location (when no route can
+			// be computed) or when the route is kept, no fit happens, so center the
+			// station instead
+			if (get(currentTrip) !== null || get(currentPos) === null || partOfRoute) {
 				map.flyTo({
 					center: feature.geometry.coordinates as [number, number],
 					padding: { top: topPadding, bottom: Math.min(bottomPadding, window.innerHeight / 2), left: leftPadding },

src/lib/routing.test.ts

@@ -1,7 +1,7 @@
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { computeRoute, currentRoute, routeDestination } from '$lib/routing';
 import { currentPos } from '$lib/location';
-import { stations } from '$lib/map.svelte';
+import { selectedStation, stations } from '$lib/map.svelte';
 import { ROUTING_API_URL } from '$lib/constants';
 import { get } from 'svelte/store';
 
@@ -82,4 +82,22 @@ describe.skipIf(!serverReachable)('computeRoute', () => {
 		expect(route!.legs[route!.legs.length - 1].mode).toBe('bike');
 		expect(route!.endStationSerial).toBe('marques');
 	});
-});
+
+	it('should open the station menu when reaching the pickup station', async () => {
+		selectedStation.set(null);
+		currentPos.set({ coords: { latitude: 38.7075, longitude: -9.1440, accuracy: 5, altitude: null, altitudeAccuracy: null, speed: null, heading: null }, timestamp: Date.now() });
+		routeDestination.set({ type: 'location', lat: 38.7700, lng: -9.0950, name: 'Parque das Nações' });
+		await vi.waitFor(() => expect(get(currentRoute)?.startStationSerial).toBe('sodre'), { timeout: 15000 });
+		expect(get(selectedStation)).toBeNull();
+
+		// Walk up to the pickup station
+		currentPos.set({ coords: { latitude: 38.7064, longitude: -9.1450, accuracy: 5, altitude: null, altitudeAccuracy: null, speed: null, heading: null }, timestamp: Date.now() });
+		expect(get(selectedStation)).toBe('sodre');
+
+		// Dismissing it sticks: another position update nearby must not reopen it
+		selectedStation.set(null);
+		currentPos.set({ coords: { latitude: 38.7065, longitude: -9.1449, accuracy: 5, altitude: null, altitudeAccuracy: null, speed: null, heading: null }, timestamp: Date.now() });
+		expect(get(selectedStation)).toBeNull();
+		routeDestination.set(null);
+	});
+});

src/lib/routing.ts

@@ -1,7 +1,8 @@
 import { get, writable } from 'svelte/store';
 import { currentPos } from '$lib/location';
 import { currentTrip } from '$lib/trip';
-import { stations, type StationInfo } from '$lib/map.svelte';
+import { LOCK_DISTANCE_m } from '$lib/constants';
+import { selectedStation, stations, type StationInfo } from '$lib/map.svelte';
 import { distanceBetweenCoords } from '$lib/utils';
 import { errorMessages } from '$lib/ui.svelte';
 import { t } from '$lib/translations';
@@ -298,7 +299,29 @@ export function clearRouteDestination() {
 	routeDestination.set(null);
 }
 
+/** The station the route heads to for picking up a bike — the pickup station,
+  * or a station destination itself when walking straight to one */
+export function routePickupStationSerial(route: PlannedRoute|null): string|null {
+	if (!route) return null;
+	return route.startStationSerial ?? (route.destination.type === 'station' ? route.destination.stationSerial : null);
+}
+
+// Open the station menu automatically when the user reaches the station where
+// they will pick up a bike, so they don't need to tap it to unlock one
+let autoOpenedStation: string|null = null;
+function autoOpenStationMenu(pos: Coord) {
+	if (get(currentTrip) !== null) return;
+	const serial = routePickupStationSerial(get(currentRoute));
+	if (!serial || autoOpenedStation === serial) return;
+	const station = stations.value.find(s => s.serialNumber === serial);
+	if (!station) return;
+	if (distanceBetweenCoords(pos.lat, pos.lng, station.latitude, station.longitude) * 1000 > LOCK_DISTANCE_m) return;
+	autoOpenedStation = serial; // only once per approach, so dismissing it sticks
+	if (get(selectedStation) == null) selectedStation.set(serial);
+}
+
 routeDestination.subscribe(destination => {
+	autoOpenedStation = null;
 	if (!destination) {
 		currentRoute.set(null);
 		return;
@@ -323,6 +346,8 @@ currentPos.subscribe(pos => {
 		return;
 	}
 
+	autoOpenStationMenu({ lat: pos.coords.latitude, lng: pos.coords.longitude });
+
 	const route = get(currentRoute);
 	if (route) {
 		const movedM = distanceBetweenCoords(pos.coords.latitude, pos.coords.longitude, route.origin.lat, route.origin.lng) * 1000;