mirror of https://github.com/immich-app/immich.git
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>pull/21376/head
Johann
GitHub
parent
80fa5ec198
commit
662d44536e
@ -0,0 +1 @@
|
||||
<svg width="900" height="600" viewBox="0 0 900 600" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="transparent" d="M0 0h900v600H0z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M249.841 115.734v250.041c0 13.572 10.867 24.563 24.287 24.563h147.186l64.25-91.581c3.063-4.369 10.722-4.369 13.786 0l22.494 32.07.175.25.152-.221 48.243-70.046c3.336-4.85 11.695-4.85 15.031 0l63.892 92.779v12.215-250.07c0-13.572-10.897-24.562-24.288-24.562H274.128c-13.42 0-24.287 10.99-24.287 24.562z" fill="#9d9ea3"/><path d="M362.501 281.935c-34.737 0-62.896-28.16-62.896-62.897 0-34.736 28.159-62.896 62.896-62.896s62.897 28.16 62.897 62.896c0 34.737-28.16 62.897-62.897 62.897z" fill="#fff"/><path d="M449.176 445.963H259.725c-7.79 0-14.188-6.399-14.188-14.188 0-7.882 6.398-14.281 14.188-14.281h189.451c7.882 0 14.28 6.399 14.28 14.281 0 7.789-6.398 14.188-14.28 14.188zm189.543.002H501.662c-7.882 0-14.281-6.399-14.281-14.281 0-7.882 6.399-14.281 14.281-14.281h137.057c7.883 0 14.281 6.399 14.281 14.281 0 7.882-6.398 14.281-14.281 14.281zm-298.503 62.592h-80.491c-7.79 0-14.188-6.398-14.188-14.188 0-7.882 6.398-14.281 14.188-14.281h80.491c7.882 0 14.281 6.399 14.281 14.281 0 7.79-6.399 14.188-14.281 14.188zm298.503.002H388.065c-7.882 0-14.28-6.398-14.28-14.28s6.398-14.281 14.28-14.281h250.654c7.883 0 14.281 6.399 14.281 14.281 0 7.882-6.398 14.28-14.281 14.28z" fill="#E1E4E5"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@ -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>
|
||||
@ -0,0 +1,104 @@
|
||||
<script lang="ts">
|
||||
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import type { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { toTimelineAsset } from '$lib/utils/timeline-util';
|
||||
import { type AssetResponseDto } from '@immich/sdk';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
asset: AssetResponseDto;
|
||||
assetInteraction: AssetInteraction;
|
||||
onSelectAsset: (asset: AssetResponseDto) => void;
|
||||
onMouseEvent: (asset: AssetResponseDto) => void;
|
||||
onLocation: (location: { latitude: number; longitude: number }) => void;
|
||||
}
|
||||
|
||||
let { asset, assetInteraction, onSelectAsset, onMouseEvent, onLocation }: Props = $props();
|
||||
|
||||
let assetData = $derived(
|
||||
JSON.stringify(
|
||||
{
|
||||
originalFileName: asset.originalFileName,
|
||||
localDateTime: asset.localDateTime,
|
||||
make: asset.exifInfo?.make,
|
||||
model: asset.exifInfo?.model,
|
||||
gps: {
|
||||
latitude: asset.exifInfo?.latitude,
|
||||
longitude: asset.exifInfo?.longitude,
|
||||
},
|
||||
location: asset.exifInfo?.city ? `${asset.exifInfo?.country} - ${asset.exifInfo?.city}` : undefined,
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
);
|
||||
let boxWidth = $state(300);
|
||||
let timelineAsset = $derived(toTimelineAsset(asset));
|
||||
const hasGps = $derived(!!asset.exifInfo?.latitude && !!asset.exifInfo?.longitude);
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="w-full aspect-square rounded-xl border-3 transition-colors font-semibold text-xs dark:bg-black bg-gray-200 border-gray-200 dark:border-gray-800"
|
||||
bind:clientWidth={boxWidth}
|
||||
title={assetData}
|
||||
>
|
||||
<div class="relative w-full h-full overflow-hidden rounded-lg">
|
||||
<Thumbnail
|
||||
asset={timelineAsset}
|
||||
onClick={() => {
|
||||
if (asset.exifInfo?.latitude && asset.exifInfo?.longitude) {
|
||||
onLocation({ latitude: asset.exifInfo?.latitude, longitude: asset.exifInfo?.longitude });
|
||||
} else {
|
||||
onSelectAsset(asset);
|
||||
}
|
||||
}}
|
||||
onSelect={() => onSelectAsset(asset)}
|
||||
onMouseEvent={() => onMouseEvent(asset)}
|
||||
selected={assetInteraction.hasSelectedAsset(asset.id)}
|
||||
selectionCandidate={assetInteraction.hasSelectionCandidate(asset.id)}
|
||||
thumbnailSize={boxWidth}
|
||||
readonly={hasGps}
|
||||
/>
|
||||
|
||||
{#if hasGps}
|
||||
<div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-success text-black">
|
||||
{$t('gps')}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="absolute bottom-1 end-3 px-4 py-1 rounded-xl text-xs transition-colors bg-danger text-light">
|
||||
{$t('gps_missing')}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="text-center mt-4 px-4 text-sm font-semibold truncate" title={asset.originalFileName}>
|
||||
<a href={`${AppRoute.PHOTOS}/${asset.id}`} target="_blank" rel="noopener noreferrer">
|
||||
{asset.originalFileName}
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-center my-3">
|
||||
<p class="px-4 text-xs font-normal truncate text-dark/75">
|
||||
{new Date(asset.localDateTime).toLocaleDateString(undefined, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</p>
|
||||
<p class="px-4 text-xs font-normal truncate text-dark/75">
|
||||
{new Date(asset.localDateTime).toLocaleTimeString(undefined, {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
timeZone: 'UTC',
|
||||
})}
|
||||
</p>
|
||||
{#if hasGps}
|
||||
<p class="text-primary mt-2 text-xs font-normal px-4 text-center truncate">
|
||||
{asset.exifInfo?.country}
|
||||
</p>
|
||||
<p class="text-primary text-xs font-normal px-4 text-center truncate">
|
||||
{asset.exifInfo?.city}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@ -1,29 +1,23 @@
|
||||
<script lang="ts">
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { mdiContentDuplicate, mdiImageSizeSelectLarge } from '@mdi/js';
|
||||
import { mdiContentDuplicate, mdiCrosshairsGps, mdiImageSizeSelectLarge } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
const links = [
|
||||
{ href: AppRoute.DUPLICATES, icon: mdiContentDuplicate, label: $t('review_duplicates') },
|
||||
{ href: AppRoute.LARGE_FILES, icon: mdiImageSizeSelectLarge, label: $t('review_large_files') },
|
||||
{ href: AppRoute.GEOLOCATION, icon: mdiCrosshairsGps, label: $t('manage_geolocation') },
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="border border-gray-300 dark:border-immich-dark-gray rounded-3xl pt-1 pb-6 dark:text-white">
|
||||
<p class="text-xs font-medium p-4">{$t('organize_your_library').toUpperCase()}</p>
|
||||
|
||||
<a
|
||||
href={AppRoute.DUPLICATES}
|
||||
class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
|
||||
>
|
||||
<span
|
||||
><Icon path={mdiContentDuplicate} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
|
||||
</span>
|
||||
{$t('review_duplicates')}
|
||||
</a>
|
||||
<a
|
||||
href={AppRoute.LARGE_FILES}
|
||||
class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4"
|
||||
>
|
||||
<span
|
||||
><Icon path={mdiImageSizeSelectLarge} class="text-immich-primary dark:text-immich-dark-primary" size="24" />
|
||||
</span>
|
||||
{$t('review_large_files')}
|
||||
</a>
|
||||
{#each links as link (link.href)}
|
||||
<a href={link.href} class="w-full hover:bg-gray-100 dark:hover:bg-immich-dark-gray flex items-center gap-4 p-4">
|
||||
<span><Icon path={link.icon} class="text-immich-primary dark:text-immich-dark-primary" size="24" /> </span>
|
||||
{link.label}
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
location: { latitude: number | undefined; longitude: number | undefined };
|
||||
assetCount: number;
|
||||
onClose: (confirm?: true) => void;
|
||||
}
|
||||
|
||||
let { location, assetCount, onClose }: Props = $props();
|
||||
</script>
|
||||
|
||||
<Modal title={$t('confirm')} size="small" {onClose}>
|
||||
<ModalBody>
|
||||
<p>
|
||||
{$t('update_location_action_prompt', {
|
||||
values: {
|
||||
count: assetCount,
|
||||
},
|
||||
})}
|
||||
</p>
|
||||
|
||||
<p>- {$t('latitude')}: {location.latitude}</p>
|
||||
<p>- {$t('longitude')}: {location.longitude}</p>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<HStack fullWidth>
|
||||
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
|
||||
<Button shape="round" type="submit" fullWidth onclick={() => onClose(true)}>{$t('confirm')}</Button>
|
||||
</HStack>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
@ -0,0 +1,321 @@
|
||||
<script lang="ts">
|
||||
import emptyUrl from '$lib/assets/empty-5.svg';
|
||||
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
||||
import ChangeLocation from '$lib/components/shared-components/change-location.svelte';
|
||||
import DatePicker from '$lib/components/shared-components/date-picker.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
import Geolocation from '$lib/components/utilities-page/geolocation/geolocation.svelte';
|
||||
import GeolocationUpdateConfirmModal from '$lib/modals/GeolocationUpdateConfirmModal.svelte';
|
||||
import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
|
||||
import { cancelMultiselect } from '$lib/utils/asset-utils';
|
||||
import { buildDateRangeFromYearMonthAndDay } from '$lib/utils/date-time';
|
||||
import { setQueryValue } from '$lib/utils/navigation';
|
||||
import { buildDateString } from '$lib/utils/string-utils';
|
||||
import { toTimelineAsset } from '$lib/utils/timeline-util';
|
||||
import { searchAssets, updateAssets, type AssetResponseDto } from '@immich/sdk';
|
||||
import { Button, LoadingSpinner, modalManager, Text } from '@immich/ui';
|
||||
import {
|
||||
mdiMapMarkerMultipleOutline,
|
||||
mdiMapMarkerOff,
|
||||
mdiPencilOutline,
|
||||
mdiSelectAll,
|
||||
mdiSelectRemove,
|
||||
} from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
interface Props {
|
||||
data: PageData;
|
||||
}
|
||||
|
||||
let { data }: Props = $props();
|
||||
let partialDate = $state<string | null>(data.partialDate);
|
||||
let isLoading = $state(false);
|
||||
let assets = $state<AssetResponseDto[]>([]);
|
||||
let shiftKeyIsDown = $state(false);
|
||||
let assetInteraction = new AssetInteraction();
|
||||
let location = $state<{ latitude: number; longitude: number }>({ latitude: 0, longitude: 0 });
|
||||
let assetsToDisplay = $state(500);
|
||||
let takenRange = $state<{ takenAfter?: string; takenBefore?: string } | null>(null);
|
||||
let locationUpdated = $state(false);
|
||||
let showOnlyAssetsWithoutLocation = $state(false);
|
||||
|
||||
// Filtered assets based on location filter
|
||||
let filteredAssets = $derived(
|
||||
showOnlyAssetsWithoutLocation
|
||||
? assets.filter((asset) => !asset.exifInfo?.latitude || !asset.exifInfo?.longitude)
|
||||
: assets,
|
||||
);
|
||||
|
||||
void init();
|
||||
|
||||
async function init() {
|
||||
if (partialDate) {
|
||||
const [year, month, day] = partialDate.split('-');
|
||||
const { from: takenAfter, to: takenBefore } = buildDateRangeFromYearMonthAndDay(
|
||||
Number.parseInt(year),
|
||||
Number.parseInt(month),
|
||||
Number.parseInt(day),
|
||||
);
|
||||
takenRange = { takenAfter, takenBefore };
|
||||
const dateString = buildDateString(Number.parseInt(year), Number.parseInt(month), Number.parseInt(day));
|
||||
await setQueryValue('date', dateString);
|
||||
await loadAssets();
|
||||
}
|
||||
}
|
||||
|
||||
const loadAssets = async () => {
|
||||
if (takenRange) {
|
||||
isLoading = true;
|
||||
|
||||
const searchResult = await searchAssets({
|
||||
metadataSearchDto: {
|
||||
withExif: true,
|
||||
takenAfter: takenRange.takenAfter,
|
||||
takenBefore: takenRange.takenBefore,
|
||||
size: assetsToDisplay,
|
||||
},
|
||||
});
|
||||
|
||||
assets = searchResult.assets.items;
|
||||
isLoading = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleDateChange = async (selectedYear?: number, selectedMonth?: number, selectedDay?: number) => {
|
||||
partialDate = selectedYear ? buildDateString(selectedYear, selectedMonth, selectedDay) : null;
|
||||
if (!selectedYear) {
|
||||
assets = [];
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const { from: takenAfter, to: takenBefore } = buildDateRangeFromYearMonthAndDay(
|
||||
selectedYear,
|
||||
selectedMonth,
|
||||
selectedDay,
|
||||
);
|
||||
const dateString = buildDateString(selectedYear, selectedMonth, selectedDay);
|
||||
takenRange = { takenAfter, takenBefore };
|
||||
await setQueryValue('date', dateString);
|
||||
await loadAssets();
|
||||
} catch (error) {
|
||||
console.error('Failed to filter assets by date:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClearFilters = async () => {
|
||||
assets = [];
|
||||
assetInteraction.clearMultiselect();
|
||||
await setQueryValue('date', '');
|
||||
};
|
||||
|
||||
const toggleLocationFilter = () => {
|
||||
showOnlyAssetsWithoutLocation = !showOnlyAssetsWithoutLocation;
|
||||
};
|
||||
|
||||
const handleUpdate = async () => {
|
||||
const confirmed = await modalManager.show(GeolocationUpdateConfirmModal, {
|
||||
location: location ?? { latitude: 0, longitude: 0 },
|
||||
assetCount: assetInteraction.selectedAssets.length,
|
||||
});
|
||||
|
||||
if (!confirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
await updateAssets({
|
||||
assetBulkUpdateDto: {
|
||||
ids: assetInteraction.selectedAssets.map((asset) => asset.id),
|
||||
latitude: location?.latitude ?? undefined,
|
||||
longitude: location?.longitude ?? undefined,
|
||||
},
|
||||
});
|
||||
|
||||
void loadAssets();
|
||||
handleDeselectAll();
|
||||
};
|
||||
|
||||
// Assets selection handlers
|
||||
// TODO: might be refactored to use the same logic as in asset-grid.svelte and gallery-viewer.svelte
|
||||
const handleSelectAssets = (asset: AssetResponseDto) => {
|
||||
const timelineAsset = toTimelineAsset(asset);
|
||||
const deselect = assetInteraction.hasSelectedAsset(asset.id);
|
||||
|
||||
if (deselect) {
|
||||
for (const candidate of assetInteraction.assetSelectionCandidates) {
|
||||
assetInteraction.removeAssetFromMultiselectGroup(candidate.id);
|
||||
}
|
||||
assetInteraction.removeAssetFromMultiselectGroup(asset.id);
|
||||
} else {
|
||||
for (const candidate of assetInteraction.assetSelectionCandidates) {
|
||||
assetInteraction.selectAsset(candidate);
|
||||
}
|
||||
assetInteraction.selectAsset(timelineAsset);
|
||||
}
|
||||
|
||||
assetInteraction.clearAssetSelectionCandidates();
|
||||
assetInteraction.setAssetSelectionStart(deselect ? null : timelineAsset);
|
||||
};
|
||||
|
||||
const selectAssetCandidates = (endAsset: AssetResponseDto) => {
|
||||
if (!shiftKeyIsDown) {
|
||||
return;
|
||||
}
|
||||
|
||||
const startAsset = assetInteraction.assetSelectionStart;
|
||||
if (!startAsset) {
|
||||
return;
|
||||
}
|
||||
|
||||
let start = assets.findIndex((a) => a.id === startAsset.id);
|
||||
let end = assets.findIndex((a) => a.id === endAsset.id);
|
||||
|
||||
if (start > end) {
|
||||
[start, end] = [end, start];
|
||||
}
|
||||
|
||||
assetInteraction.setAssetSelectionCandidates(assets.slice(start, end + 1).map((a) => toTimelineAsset(a)));
|
||||
};
|
||||
const assetMouseEventHandler = (asset: AssetResponseDto) => {
|
||||
if (assetInteraction.selectionActive) {
|
||||
selectAssetCandidates(asset);
|
||||
}
|
||||
};
|
||||
// Keyboard handlers
|
||||
const onKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Shift') {
|
||||
event.preventDefault();
|
||||
shiftKeyIsDown = true;
|
||||
}
|
||||
if (event.key === 'Escape' && assetInteraction.selectionActive) {
|
||||
cancelMultiselect(assetInteraction);
|
||||
}
|
||||
};
|
||||
const onKeyUp = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Shift') {
|
||||
event.preventDefault();
|
||||
shiftKeyIsDown = false;
|
||||
}
|
||||
};
|
||||
const handleSelectAll = () => {
|
||||
assetInteraction.selectAssets(filteredAssets.map((a) => toTimelineAsset(a)));
|
||||
};
|
||||
const handleDeselectAll = () => {
|
||||
cancelMultiselect(assetInteraction);
|
||||
};
|
||||
|
||||
const handlePickOnMap = async () => {
|
||||
const point = await modalManager.show(ChangeLocation, {
|
||||
point: {
|
||||
lat: location.latitude,
|
||||
lng: location.longitude,
|
||||
},
|
||||
});
|
||||
if (!point) {
|
||||
return;
|
||||
}
|
||||
|
||||
location = { latitude: point.lat, longitude: point.lng };
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:document onkeydown={onKeyDown} onkeyup={onKeyUp} />
|
||||
|
||||
<UserPageLayout title={data.meta.title} scrollbar={true}>
|
||||
{#snippet buttons()}
|
||||
<div class="flex gap-2 justify-end place-items-center">
|
||||
{#if filteredAssets.length > 0}
|
||||
<Text class="hidden md:block text-xs mr-4 text-dark/50">{$t('geolocation_instruction_location')}</Text>
|
||||
{/if}
|
||||
<div class="border flex place-items-center place-content-center px-2 py-1 bg-primary/10 rounded-2xl">
|
||||
<p class="text-xs text-gray-500 font-mono mr-5 ml-2 uppercase">{$t('selected_gps_coordinates')}</p>
|
||||
<Text
|
||||
title="latitude, longitude"
|
||||
class="rounded-3xl font-mono text-sm text-primary px-2 py-1 transition-all duration-100 ease-in-out {locationUpdated
|
||||
? 'bg-primary/90 text-light font-semibold scale-105'
|
||||
: ''}">{location.latitude.toFixed(3)}, {location.longitude.toFixed(3)}</Text
|
||||
>
|
||||
</div>
|
||||
|
||||
<Button size="small" color="secondary" variant="ghost" leadingIcon={mdiPencilOutline} onclick={handlePickOnMap}
|
||||
>{$t('location_picker_choose_on_map')}</Button
|
||||
>
|
||||
<Button
|
||||
leadingIcon={mdiMapMarkerMultipleOutline}
|
||||
size="small"
|
||||
color="primary"
|
||||
disabled={assetInteraction.selectedAssets.length === 0}
|
||||
onclick={() => handleUpdate()}
|
||||
>
|
||||
{$t('apply_count', { values: { count: assetInteraction.selectedAssets.length } })}
|
||||
</Button>
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
<div class="bg-light flex items-center justify-between flex-wrap border-b">
|
||||
<div class="flex gap-2 items-center">
|
||||
<DatePicker
|
||||
onDateChange={handleDateChange}
|
||||
onClearFilters={handleClearFilters}
|
||||
defaultDate={partialDate || undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<Button
|
||||
size="small"
|
||||
leadingIcon={showOnlyAssetsWithoutLocation ? mdiMapMarkerMultipleOutline : mdiMapMarkerOff}
|
||||
color={showOnlyAssetsWithoutLocation ? 'primary' : 'secondary'}
|
||||
variant="ghost"
|
||||
onclick={toggleLocationFilter}
|
||||
>
|
||||
{showOnlyAssetsWithoutLocation ? $t('show_all_assets') : $t('show_assets_without_location')}
|
||||
</Button>
|
||||
<Button
|
||||
leadingIcon={assetInteraction.selectionActive ? mdiSelectRemove : mdiSelectAll}
|
||||
size="small"
|
||||
color="secondary"
|
||||
variant="ghost"
|
||||
onclick={assetInteraction.selectionActive ? handleDeselectAll : handleSelectAll}
|
||||
>
|
||||
{assetInteraction.selectionActive ? $t('unselect_all') : $t('select_all')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if isLoading}
|
||||
<div class="h-full w-full flex items-center justify-center">
|
||||
<LoadingSpinner size="giant" />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if filteredAssets && filteredAssets.length > 0}
|
||||
<div class="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 mt-4">
|
||||
{#each filteredAssets as asset (asset.id)}
|
||||
<Geolocation
|
||||
{asset}
|
||||
{assetInteraction}
|
||||
onSelectAsset={(asset) => handleSelectAssets(asset)}
|
||||
onMouseEvent={(asset) => assetMouseEventHandler(asset)}
|
||||
onLocation={(selected) => {
|
||||
location = selected;
|
||||
locationUpdated = true;
|
||||
setTimeout(() => {
|
||||
locationUpdated = false;
|
||||
}, 1000);
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="w-full">
|
||||
{#if partialDate == null}
|
||||
<EmptyPlaceholder text={$t('geolocation_instruction_no_date')} src={emptyUrl} />
|
||||
{:else if showOnlyAssetsWithoutLocation && filteredAssets.length === 0 && assets.length > 0}
|
||||
<EmptyPlaceholder text={$t('geolocation_instruction_all_have_location')} src={emptyUrl} />
|
||||
{:else}
|
||||
<EmptyPlaceholder text={$t('geolocation_instruction_no_photos')} src={emptyUrl} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</UserPageLayout>
|
||||
@ -0,0 +1,17 @@
|
||||
import { authenticate } from '$lib/utils/auth';
|
||||
import { getFormatter } from '$lib/utils/i18n';
|
||||
import { getQueryValue } from '$lib/utils/navigation';
|
||||
import type { PageLoad } from './$types';
|
||||
|
||||
export const load = (async ({ url }) => {
|
||||
await authenticate(url);
|
||||
const partialDate = getQueryValue('date');
|
||||
const $t = await getFormatter();
|
||||
|
||||
return {
|
||||
partialDate,
|
||||
meta: {
|
||||
title: $t('manage_geolocation'),
|
||||
},
|
||||
};
|
||||
}) satisfies PageLoad;
|
||||
Loading…
Reference in New Issue