mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web): add geolocation utility (#20758)
* 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
GitHub
parent
80fa5ec198
commit
662d44536e
17 changed files with 733 additions and 49 deletions
|
|
@ -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}
|
||||
|
|
|
|||
113
web/src/lib/components/shared-components/date-picker.svelte
Normal file
113
web/src/lib/components/shared-components/date-picker.svelte
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<script lang="ts">
|
||||
import { Button } from '@immich/ui';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
onDateChange: (year?: number, month?: number, day?: number) => Promise<void>;
|
||||
onClearFilters?: () => void;
|
||||
defaultDate?: string;
|
||||
}
|
||||
|
||||
let { onDateChange, onClearFilters, defaultDate }: Props = $props();
|
||||
|
||||
let selectedYear = $state<number | undefined>(undefined);
|
||||
let selectedMonth = $state<number | undefined>(undefined);
|
||||
let selectedDay = $state<number | undefined>(undefined);
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const yearOptions = Array.from({ length: 30 }, (_, i) => currentYear - i);
|
||||
|
||||
const monthOptions = Array.from({ length: 12 }, (_, i) => ({
|
||||
value: i + 1,
|
||||
label: new Date(2000, i).toLocaleString('default', { month: 'long' }),
|
||||
}));
|
||||
|
||||
const dayOptions = $derived.by(() => {
|
||||
if (!selectedYear || !selectedMonth) {
|
||||
return [];
|
||||
}
|
||||
const daysInMonth = new Date(selectedYear, selectedMonth, 0).getDate();
|
||||
return Array.from({ length: daysInMonth }, (_, i) => i + 1);
|
||||
});
|
||||
|
||||
if (defaultDate) {
|
||||
const [year, month, day] = defaultDate.split('-');
|
||||
selectedYear = Number.parseInt(year);
|
||||
selectedMonth = Number.parseInt(month);
|
||||
selectedDay = Number.parseInt(day);
|
||||
}
|
||||
|
||||
const filterAssetsByDate = async () => {
|
||||
await onDateChange(selectedYear, selectedMonth, selectedDay);
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
selectedYear = undefined;
|
||||
selectedMonth = undefined;
|
||||
selectedDay = undefined;
|
||||
if (onClearFilters) {
|
||||
onClearFilters();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="mt-2 mb-2 p-2 rounded-lg">
|
||||
<div class="flex flex-wrap gap-4 items-end w-136">
|
||||
<div class="flex-1 min-w-20">
|
||||
<label for="year-select" class="immich-form-label">
|
||||
{$t('year')}
|
||||
</label>
|
||||
<select
|
||||
id="year-select"
|
||||
bind:value={selectedYear}
|
||||
onchange={filterAssetsByDate}
|
||||
class="text-sm w-full mt-1 px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
|
||||
>
|
||||
<option value={undefined}>{$t('year')}</option>
|
||||
{#each yearOptions as year (year)}
|
||||
<option value={year}>{year}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex-2 min-w-24">
|
||||
<label for="month-select" class="immich-form-label">
|
||||
{$t('month')}
|
||||
</label>
|
||||
<select
|
||||
id="month-select"
|
||||
bind:value={selectedMonth}
|
||||
onchange={filterAssetsByDate}
|
||||
disabled={!selectedYear}
|
||||
class="text-sm w-full mt-1 px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:opacity-50 disabled:bg-gray-400"
|
||||
>
|
||||
<option value={undefined}>{$t('month')}</option>
|
||||
{#each monthOptions as month (month.value)}
|
||||
<option value={month.value}>{month.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-16">
|
||||
<label for="day-select" class="immich-form-label">
|
||||
{$t('day')}
|
||||
</label>
|
||||
<select
|
||||
id="day-select"
|
||||
bind:value={selectedDay}
|
||||
onchange={filterAssetsByDate}
|
||||
disabled={!selectedYear || !selectedMonth}
|
||||
class="text-sm w-full mt-1 px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary bg-white dark:bg-gray-700 text-gray-900 dark:text-white disabled:opacity-50 disabled:bg-gray-400"
|
||||
>
|
||||
<option value={undefined}>{$t('day')}</option>
|
||||
{#each dayOptions as day (day)}
|
||||
<option value={day}>{day}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<Button size="small" color="secondary" variant="ghost" onclick={clearFilters}>{$t('reset')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue