helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

feat(web): add geolocation utility (#20758)

Browse source 
* feat(geolocation):  add geolocation utility

* feat(web): geolocation utility - fix code review - 1

* feat(web): geolocation utility - fix code review - 2

* chore: cleanup

* chore: feedback

* feat(web): add animation and text

animation on locations change and action text on thumbnail

* styling, messages and filtering

* selected color

* format i18n

* fix lint

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Johann 2025-08-28 18:54:11 +02:00 • committed by GitHub
parent 80fa5ec198
commit 662d44536e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 733 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

42
web/src/lib/components/shared-components/change-location.svelte
View file

@ -21,11 +21,11 @@
interface Props {
asset?: AssetResponseDto | undefined;
onCancel: () => void;
onConfirm: (point: Point) => void;
point?: Point;
onClose: (point?: Point) => void;
}
let { asset = undefined, onCancel, onConfirm }: Props = $props();
let { asset = undefined, point: initialPoint, onClose }: Props = $props();
let places: PlacesResponseDto[] = $state([]);
let suggestedPlaces: PlacesResponseDto[] = $state([]);
@ -38,14 +38,20 @@
let previousLocation = get(lastChosenLocation);
let assetLat = $derived(asset?.exifInfo?.latitude ?? undefined);
let assetLng = $derived(asset?.exifInfo?.longitude ?? undefined);
let assetLat = $derived(initialPoint?.lat ?? asset?.exifInfo?.latitude ?? undefined);
let assetLng = $derived(initialPoint?.lng ?? asset?.exifInfo?.longitude ?? undefined);
let mapLat = $derived(assetLat ?? previousLocation?.lat ?? undefined);
let mapLng = $derived(assetLng ?? previousLocation?.lng ?? undefined);
let zoom = $derived(mapLat !== undefined && mapLng !== undefined ? 12.5 : 1);
$effect(() => {
if (mapElement && initialPoint) {
mapElement.addClipMapMarker(initialPoint.lng, initialPoint.lat);
}
});
$effect(() => {
if (places) {
suggestedPlaces = places.slice(0, 5);
@ -55,14 +61,14 @@
}
});
let point: Point | null = $state(null);
let point: Point | null = $state(initialPoint ?? null);
const handleConfirm = () => {
if (point) {
const handleConfirm = (confirmed?: boolean) => {
if (point && confirmed) {
lastChosenLocation.set(point);
onConfirm(point);
onClose(point);
} else {
onCancel();
onClose();
}
};
@ -109,6 +115,11 @@
point = { lng: longitude, lat: latitude };
mapElement?.addClipMapMarker(longitude, latitude);
};
const onUpdate = (lat: number, lng: number) => {
point = { lat, lng };
mapElement?.addClipMapMarker(lng, lat);
};
</script>
<ConfirmModal
@ -116,7 +127,7 @@
title={$t('change_location')}
icon={mdiMapMarkerMultipleOutline}
size="medium"
onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
onClose={handleConfirm}
>
{#snippet promptSnippet()}
<div class="flex flex-col w-full h-full gap-2">
@ -197,14 +208,7 @@
</div>
<div class="grid sm:grid-cols-2 gap-4 text-sm text-start mt-4">
<CoordinatesInput
lat={point ? point.lat : assetLat}
lng={point ? point.lng : assetLng}
onUpdate={(lat, lng) => {
point = { lat, lng };
mapElement?.addClipMapMarker(lng, lat);
}}
/>
<CoordinatesInput lat={point ? point.lat : assetLat} lng={point ? point.lng : assetLng} {onUpdate} />
</div>
</div>
{/snippet}