diff --git a/src/lib/components/LocationButton.svelte b/src/lib/components/LocationButton.svelte index 3d74d1f..22fee5d 100644 --- a/src/lib/components/LocationButton.svelte +++ b/src/lib/components/LocationButton.svelte @@ -4,7 +4,8 @@ locationActions, locationStatus, locationError, - isLocationLoading + isLocationLoading, + isWatching } from '$lib/stores/location'; import { Skeleton } from './skeleton'; @@ -22,26 +23,45 @@ showLabel = true }: Props = $props(); - async function handleLocationClick() { - const result = await locationActions.getCurrentLocation({ - enableHighAccuracy: true, - timeout: 15000, - maximumAge: 300000 - }); + // Track if location watching is active from the derived store - if (!result && $locationError) { - toast.error($locationError.message); + async function handleLocationClick() { + if ($isWatching) { + // Stop watching if currently active + locationActions.stopWatching(); + toast.success('Location watching stopped'); + } else { + // Try to get current location first, then start watching + const result = await locationActions.getCurrentLocation({ + enableHighAccuracy: true, + timeout: 15000, + maximumAge: 300000 + }); + + if (result) { + // Start watching for continuous updates + locationActions.startWatching({ + enableHighAccuracy: true, + timeout: 15000, + maximumAge: 60000 // Update every minute + }); + toast.success('Location watching started'); + } else if ($locationError) { + toast.error($locationError.message); + } } } const buttonText = $derived(() => { if ($isLocationLoading) return 'Finding location...'; - if ($locationStatus === 'success') return 'Update location'; + if ($isWatching) return 'Stop watching location'; + if ($locationStatus === 'success') return 'Watch location'; return 'Find my location'; }); const iconClass = $derived(() => { if ($isLocationLoading) return 'loading'; + if ($isWatching) return 'watching'; if ($locationStatus === 'success') return 'success'; if ($locationStatus === 'error') return 'error'; return 'default'; @@ -59,6 +79,22 @@