85 lines
2.6 KiB
Svelte
85 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import type { Waypoint } from "$lib/models/waypoint";
|
|
import { getFileURL, readAsDataURLAsync } from "$lib/util/file_util";
|
|
import { _ } from "svelte-i18n";
|
|
import Dropdown from "../base/dropdown.svelte";
|
|
import { browser } from "$app/environment";
|
|
import PhotoGallery from "../photo_gallery.svelte";
|
|
|
|
export let waypoint: Waypoint;
|
|
export let mode: "show" | "edit" = "show";
|
|
|
|
let openGallery: (idx?: number) => void;
|
|
|
|
let imgSrc: string[] = [];
|
|
$: if (waypoint.photos?.length) {
|
|
imgSrc = waypoint.photos
|
|
.filter((_, i) => i < 3)
|
|
.reverse()
|
|
.map((p) => getFileURL(waypoint, p));
|
|
} else if (waypoint._photos?.length && browser) {
|
|
Promise.all(
|
|
waypoint._photos
|
|
.filter((_, i) => i < 3)
|
|
.map(async (f) => {
|
|
return await readAsDataURLAsync(f);
|
|
}),
|
|
).then((v) => {
|
|
imgSrc = v;
|
|
});
|
|
} else {
|
|
imgSrc = [];
|
|
}
|
|
|
|
const dropdownItems = [
|
|
{ text: $_("edit"), value: "edit" },
|
|
{ text: $_("delete"), value: "delete" },
|
|
];
|
|
</script>
|
|
|
|
<div
|
|
class="flex gap-4 p-4 outline outline-1 outline-input-border rounded-md my-2 hover:outline-2"
|
|
>
|
|
{#if imgSrc.length}
|
|
{#if mode == "show"}
|
|
<PhotoGallery
|
|
photos={waypoint.photos.map((p) => getFileURL(waypoint, p))}
|
|
bind:open={openGallery}
|
|
></PhotoGallery>
|
|
{/if}
|
|
<button
|
|
class="relative basis-16 aspect-square ml-2 mb-3 shrink-0"
|
|
type="button"
|
|
on:click={mode == "show" ? () => openGallery() : undefined}
|
|
>
|
|
{#each imgSrc as img, i}
|
|
<img
|
|
class="absolute h-full rounded-xl object-cover"
|
|
style="top: {6 * i}px; right: {6 *
|
|
i}px; transform: rotate(-{i * 5}deg)"
|
|
src={img}
|
|
alt="waypoint"
|
|
/>
|
|
{/each}
|
|
</button>
|
|
{/if}
|
|
<div class="basis-full">
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h5>
|
|
<i class="fa fa-{waypoint.icon} mr-2"></i>{waypoint.name}
|
|
</h5>
|
|
{#if mode == "edit"}
|
|
<Dropdown items={dropdownItems} on:change></Dropdown>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if waypoint.description}
|
|
<p>{waypoint.description}</p>
|
|
{/if}
|
|
|
|
<span class="text-sm text-gray-500"
|
|
>{waypoint.lat.toFixed(5)}, {waypoint.lon.toFixed(5)}</span
|
|
>
|
|
</div>
|
|
</div>
|