mirror of https://github.com/immich-app/immich.git
feat(web): use timeline in geolocation manager (#21492)
Johann
GitHub
parent
5acd6b70d0
commit
7a1c45c364
@ -1,113 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -1,104 +0,0 @@
|
|||||||
<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>
|
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
import { AppRoute } from '$lib/constants';
|
||||||
|
import { redirect } from '@sveltejs/kit';
|
||||||
|
import type { PageLoad } from './$types';
|
||||||
|
|
||||||
|
export const load = (({ params }) => {
|
||||||
|
const photoId = params.photoId;
|
||||||
|
return redirect(302, `${AppRoute.PHOTOS}/${photoId}`);
|
||||||
|
}) satisfies PageLoad;
|
||||||
Loading…
Reference in New Issue