273 lines
9.9 KiB
Svelte
273 lines
9.9 KiB
Svelte
<script lang="ts">
|
|
import { goto } from "$app/navigation";
|
|
import type { DropdownItem } from "$lib/components/base/dropdown.svelte";
|
|
import ConfirmModal from "$lib/components/confirm_modal.svelte";
|
|
import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
|
|
import Tabs from "$lib/components/tabs.svelte";
|
|
import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
|
|
import { trail, trails_delete } from "$lib/stores/trail_store";
|
|
import { currentUser } from "$lib/stores/user_store";
|
|
import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
|
|
import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
|
|
import type { Icon, Marker } from "leaflet";
|
|
import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
|
|
import "leaflet/dist/leaflet.css";
|
|
import type { DataSource } from "photoswipe";
|
|
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
|
import "photoswipe/style.css";
|
|
import { onMount } from "svelte";
|
|
|
|
const tabs = ["Description", "Waypoints", "Photos", "Summit book"];
|
|
|
|
let activeTab = 0;
|
|
|
|
let markers: Marker[] = [];
|
|
|
|
let lightbox: PhotoSwipeLightbox;
|
|
let lightboxDataSource: DataSource;
|
|
|
|
let openConfirmModal: () => void;
|
|
|
|
const dropdownItems: DropdownItem[] = [
|
|
{ text: "Show on map", value: "map", icon: "map" },
|
|
{ text: "Edit", value: "edit", icon: "pen" },
|
|
{ text: "Delete", value: "delete", icon: "trash" },
|
|
];
|
|
|
|
onMount(async () => {
|
|
const L = (await import("leaflet")).default;
|
|
await import("leaflet-gpx");
|
|
await import("leaflet.awesome-markers");
|
|
|
|
const map = L.map("map").setView([0, 0], 2);
|
|
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
attribution: "© OpenStreetMap contributors",
|
|
}).addTo(map);
|
|
|
|
const gpxLayer = new L.GPX($trail.expand.gpx_data!, {
|
|
async: true,
|
|
gpx_options: {
|
|
parseElements: ["track"] as any,
|
|
},
|
|
marker_options: {
|
|
wptIcons: {
|
|
"": L.AwesomeMarkers.icon({
|
|
icon: "circle",
|
|
prefix: "fa",
|
|
markerColor: "cadetblue",
|
|
iconColor: "white",
|
|
}) as Icon,
|
|
Summit: L.AwesomeMarkers.icon({
|
|
icon: "mountain",
|
|
prefix: "fa",
|
|
markerColor: "cadetblue",
|
|
iconColor: "white",
|
|
}) as Icon,
|
|
},
|
|
startIcon: L.AwesomeMarkers.icon({
|
|
icon: "circle-half-stroke",
|
|
prefix: "fa",
|
|
markerColor: "cadetblue",
|
|
iconColor: "white",
|
|
}) as Icon,
|
|
startIconUrl: "",
|
|
endIconUrl: "",
|
|
shadowUrl: "",
|
|
},
|
|
})
|
|
.on("loaded", function (e) {
|
|
map.fitBounds(e.target.getBounds());
|
|
})
|
|
.addTo(map);
|
|
|
|
for (const waypoint of $trail.expand.waypoints) {
|
|
const marker = createMarkerFromWaypoint(L, waypoint);
|
|
marker.addTo(map);
|
|
markers.push(marker);
|
|
}
|
|
|
|
lightboxDataSource = $trail.photos.map((p) => ({
|
|
src: p,
|
|
}));
|
|
lightbox = new PhotoSwipeLightbox({
|
|
dataSource: lightboxDataSource,
|
|
pswpModule: async () => await import("photoswipe"),
|
|
});
|
|
lightbox.init();
|
|
|
|
lightbox.on("beforeOpen", () => {
|
|
const pswp = lightbox.pswp;
|
|
const ds = pswp?.options?.dataSource;
|
|
if (Array.isArray(ds)) {
|
|
for (let idx = 0, len = ds.length; idx < len; idx++) {
|
|
const item = ds[idx];
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
item.width = img.naturalWidth;
|
|
item.height = img.naturalHeight;
|
|
pswp?.refreshSlideContent(idx);
|
|
};
|
|
img.src = item.src as string;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
function openMarkerPopup(i: number) {
|
|
markers[i].openPopup();
|
|
}
|
|
|
|
function openGallery(idx: number) {
|
|
lightbox?.loadAndOpen(idx, lightboxDataSource);
|
|
}
|
|
|
|
async function handleDropdownClick(item: { text: string; value: any }) {
|
|
if (item.value == "map") {
|
|
goto(`/map/?lat=${$trail.lat}&lon=${$trail.lon}`);
|
|
} else if (item.value == "edit") {
|
|
goto(`/trail/edit/${$trail.id}`);
|
|
} else if (item.value == "delete") {
|
|
openConfirmModal();
|
|
}
|
|
}
|
|
|
|
async function deleteTrail() {
|
|
trails_delete($trail).then(() => history.back());
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
class="trail-panel max-w-5xl mx-auto shadow-2xl rounded-3xl overflow-hidden"
|
|
>
|
|
<section class="relative h-80">
|
|
<img class="w-full h-80" src={$trail.thumbnail} alt="" />
|
|
<div
|
|
class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
|
|
></div>
|
|
<div
|
|
class="flex absolute flex-wrap justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
|
|
>
|
|
<div class="text-white">
|
|
<h4 class="text-4xl font-bold">
|
|
{$trail.name}
|
|
</h4>
|
|
<h3 class="text-xl mt-4">
|
|
<i class="fa fa-location-dot mr-3"></i>
|
|
{$trail.location}
|
|
</h3>
|
|
</div>
|
|
{#if $currentUser && $currentUser.id == $trail.author}
|
|
<div class="px-4 py-2 bg-white rounded-full space-x-2">
|
|
{#each dropdownItems as item}
|
|
<button
|
|
class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200 transition-colors"
|
|
on:click={() => handleDropdownClick(item)}
|
|
><i class="fa fa-{item.icon}"></i></button
|
|
>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</section>
|
|
<section
|
|
class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8"
|
|
>
|
|
<div class="flex flex-col items-center">
|
|
<span>Distance</span>
|
|
<span class="font-semibold text-lg"
|
|
>{formatMeters($trail.distance)}</span
|
|
>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<span>Elevation gain</span>
|
|
<span class="font-semibold text-lg"
|
|
>{formatMeters($trail.elevation_gain)}</span
|
|
>
|
|
</div>
|
|
<div class="flex flex-col items-center">
|
|
<span>Est. duration</span>
|
|
<span class="font-semibold text-lg"
|
|
>{formatTimeHHMM($trail.duration)}</span
|
|
>
|
|
</div>
|
|
{#if $trail.expand.category}
|
|
<div class="flex flex-col items-center">
|
|
<span>Category</span>
|
|
<span class="font-semibold text-lg"
|
|
>{$trail.expand.category.name}</span
|
|
>
|
|
</div>
|
|
{/if}
|
|
</section>
|
|
{#if $trail.tags && $trail.tags.length > 0}
|
|
<hr />
|
|
<section class="flex p-8 gap-4 text-gray-600">
|
|
{#each $trail.tags as tag}
|
|
<span class="py-2 px-4 border rounded-full">{tag}</span>
|
|
{/each}
|
|
</section>
|
|
<hr />
|
|
{/if}
|
|
<section class="p-8">
|
|
<Tabs {tabs} bind:activeTab></Tabs>
|
|
<div class="flex flex-wrap md:flex-nowrap mt-6 gap-8">
|
|
<div class="basis-full">
|
|
{#if activeTab == 0}
|
|
<article class="text-justify whitespace-pre-line text-sm">
|
|
{$trail.description}
|
|
</article>
|
|
{/if}
|
|
{#if activeTab == 1}
|
|
<ul>
|
|
{#each $trail.expand.waypoints ?? [] as waypoint, i}
|
|
<li on:mouseenter={() => openMarkerPopup(i)}>
|
|
<WaypointCard {waypoint}></WaypointCard>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
{#if activeTab == 2}
|
|
<div
|
|
id="photo-gallery"
|
|
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
|
|
>
|
|
{#each $trail.photos ?? [] as photo, i}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
<img
|
|
class="rounded-xl cursor-pointer hover:scale-105 transition-transform"
|
|
on:click={() => openGallery(i)}
|
|
src={photo}
|
|
alt=""
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{#if activeTab == 3}
|
|
<ul>
|
|
{#each $trail.expand.summit_logs ?? [] as log}
|
|
<li><SummitLogCard {log}></SummitLogCard></li>
|
|
{/each}
|
|
</ul>
|
|
{/if}
|
|
</div>
|
|
<div
|
|
class="rounded-xl h-72 basis-full md:basis-72 shrink-0"
|
|
id="map"
|
|
></div>
|
|
</div>
|
|
</section>
|
|
<ConfirmModal
|
|
text="Do you really want to delete this trail? This action cannot be undone."
|
|
bind:openModal={openConfirmModal}
|
|
on:confirm={deleteTrail}
|
|
></ConfirmModal>
|
|
</div>
|
|
|
|
<style>
|
|
.trail-panel img {
|
|
object-fit: cover;
|
|
}
|
|
</style>
|