Ben McCann
53 lines
1.9 KiB
Svelte
53 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
|
|
import Icon from '$lib/components/elements/icon.svelte';
|
|
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
|
|
import { AppRoute } from '$lib/constants';
|
|
import type { SearchExploreResponseDto } from '@immich/sdk';
|
|
import { mdiMapMarkerOff } from '@mdi/js';
|
|
import type { PageData } from './$types';
|
|
|
|
export let data: PageData;
|
|
|
|
const CITY_FIELD = 'exifInfo.city';
|
|
const getFieldItems = (items: SearchExploreResponseDto[]) => {
|
|
const targetField = items.find((item) => item.fieldName === CITY_FIELD);
|
|
return targetField?.items || [];
|
|
};
|
|
|
|
$: places = getFieldItems(data.items);
|
|
$: hasPlaces = places.length > 0;
|
|
|
|
let innerHeight: number;
|
|
</script>
|
|
|
|
<svelte:window bind:innerHeight />
|
|
|
|
<UserPageLayout title="Places">
|
|
{#if hasPlaces}
|
|
<div class="flex flex-row flex-wrap gap-4">
|
|
{#each places as item (item.data.id)}
|
|
<a class="relative" href="{AppRoute.SEARCH}?q={item.value}" draggable="false">
|
|
<div
|
|
class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
|
|
>
|
|
<Thumbnail thumbnailSize={156} asset={item.data} readonly />
|
|
</div>
|
|
<span
|
|
class="w-100 absolute bottom-2 w-full text-ellipsis px-1 text-center text-sm font-medium capitalize text-white backdrop-blur-[1px] hover:cursor-pointer"
|
|
>
|
|
{item.value}
|
|
</span>
|
|
</a>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">
|
|
<div class="flex flex-col content-center items-center text-center">
|
|
<Icon path={mdiMapMarkerOff} size="3.5em" />
|
|
<p class="mt-5 text-3xl font-medium">No places</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</UserPageLayout>
|