scroll to required fields in trail edit
Former-commit-id: 4d4c11bd86760b9ee98b7db188df279cf71e82d1
This commit is contained in:
Christian Beutel
279
web/src/lib/components/trail/trail_info_panel.svelte
Normal file
279
web/src/lib/components/trail/trail_info_panel.svelte
Normal file
@@ -0,0 +1,279 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { goto } from "$app/navigation";
|
||||||
|
import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
|
||||||
|
import Tabs from "$lib/components/tabs.svelte";
|
||||||
|
import TrailDropdown from "$lib/components/trail/trail_dropdown.svelte";
|
||||||
|
import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
|
||||||
|
import type { Trail } from "$lib/models/trail";
|
||||||
|
import { currentUser } from "$lib/stores/user_store";
|
||||||
|
import { getFileURL } from "$lib/util/file_util";
|
||||||
|
import {
|
||||||
|
formatDistance,
|
||||||
|
formatElevation,
|
||||||
|
formatTimeHHMM,
|
||||||
|
} from "$lib/util/format_util";
|
||||||
|
import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
|
||||||
|
import "$lib/vendor/leaflet-elevation/src/index.css";
|
||||||
|
import type { Icon, Map, 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";
|
||||||
|
import { _ } from "svelte-i18n";
|
||||||
|
|
||||||
|
export let trail: Trail;
|
||||||
|
export let showMap: boolean = false;
|
||||||
|
export let markers: Marker[] = [];
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
$_("description"),
|
||||||
|
$_("waypoints"),
|
||||||
|
$_("photos"),
|
||||||
|
$_("summit-book"),
|
||||||
|
];
|
||||||
|
|
||||||
|
let map: Map;
|
||||||
|
|
||||||
|
let activeTab = 0;
|
||||||
|
|
||||||
|
let lightbox: PhotoSwipeLightbox;
|
||||||
|
let lightboxDataSource: DataSource;
|
||||||
|
|
||||||
|
let thumbnail = trail.photos.length
|
||||||
|
? getFileURL(trail, trail.photos[trail.thumbnail])
|
||||||
|
: "/imgs/default_thumbnail.webp";
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
if (showMap) {
|
||||||
|
const L = (await import("leaflet")).default;
|
||||||
|
await import("leaflet-gpx");
|
||||||
|
await import("leaflet.awesome-markers");
|
||||||
|
|
||||||
|
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,
|
||||||
|
polyline_options: {
|
||||||
|
className: "lightblue-theme elevation-polyline",
|
||||||
|
opacity: 0.75,
|
||||||
|
weight: 5,
|
||||||
|
},
|
||||||
|
gpx_options: {
|
||||||
|
parseElements: ["track"] as any,
|
||||||
|
},
|
||||||
|
marker_options: {
|
||||||
|
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: getFileURL(trail, 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 toggleMapFullScreen() {
|
||||||
|
goto(`/map/trail/${trail.id!}`);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="trail-info-panel max-w-5xl mx-auto border border-input-border rounded-3xl overflow-x-hidden h-full"
|
||||||
|
>
|
||||||
|
<div class="trail-info-panel-header sticky -top-44 z-10">
|
||||||
|
<section class="relative h-80">
|
||||||
|
<img class="w-full h-80" src={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 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>
|
||||||
|
<div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8">
|
||||||
|
{#if trail.location}
|
||||||
|
<h3 class="text-lg">
|
||||||
|
<i class="fa fa-location-dot mr-3"></i>
|
||||||
|
{trail.location}
|
||||||
|
</h3>
|
||||||
|
{/if}
|
||||||
|
<h3 class="text-lg">
|
||||||
|
<i class="fa fa-person-hiking mr-3"></i>
|
||||||
|
{$_(trail.difficulty ?? "?")}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{#if $currentUser && $currentUser.id == trail.author}
|
||||||
|
<TrailDropdown {trail} mode="overview"></TrailDropdown>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{#if showMap}
|
||||||
|
<section
|
||||||
|
class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8 border-b border-input-border"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span>{$_("distance")}</span>
|
||||||
|
<span class="font-semibold text-lg"
|
||||||
|
>{formatDistance(trail.distance)}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col items-center">
|
||||||
|
<span>{$_("elevation-gain")}</span>
|
||||||
|
<span class="font-semibold text-lg"
|
||||||
|
>{formatElevation(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}
|
||||||
|
{#if trail.tags && trail.tags.length > 0}
|
||||||
|
<hr class="border-separator" />
|
||||||
|
<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 class="border-separator" />
|
||||||
|
{/if}
|
||||||
|
<section class="trail-info-panel-tabs px-4 py-2 bg-white">
|
||||||
|
<Tabs {tabs} bind:activeTab></Tabs>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
<section class="trail-info-panel-content px-8">
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-1 mt-4 gap-8 overflow-scroll"
|
||||||
|
class:md:grid-cols-[1fr_18rem]={showMap}
|
||||||
|
>
|
||||||
|
{#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 {showMap
|
||||||
|
? 'sm:grid-cols-2 md:grid-cols-3'
|
||||||
|
: ''} 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={getFileURL(trail, photo)}
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if activeTab == 3}
|
||||||
|
<ul>
|
||||||
|
{#each trail.expand.summit_logs ?? [] as log}
|
||||||
|
<li><SummitLogCard {log}></SummitLogCard></li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
|
{/if}
|
||||||
|
{#if showMap}
|
||||||
|
<div class="relative">
|
||||||
|
<div class="rounded-xl h-72" id="map">
|
||||||
|
<div class="leaflet-top leaflet-right">
|
||||||
|
<button
|
||||||
|
class="leaflet-control fa fa-maximize rounded-full text-lg bg-white text-black px-[14px] py-2 hover:bg-gray-100"
|
||||||
|
style="cursor: pointer !important"
|
||||||
|
on:click={() => toggleMapFullScreen()}
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.trail-info-panel img {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -28,6 +28,7 @@ export const createForm = (config) => {
|
|||||||
const validationSchema = config.validationSchema;
|
const validationSchema = config.validationSchema;
|
||||||
const validateFunction = config.validate;
|
const validateFunction = config.validate;
|
||||||
const onSubmit = config.onSubmit;
|
const onSubmit = config.onSubmit;
|
||||||
|
const onError = config.onError;
|
||||||
|
|
||||||
const getInitial = {
|
const getInitial = {
|
||||||
values: () => util.cloneDeep(initialValues),
|
values: () => util.cloneDeep(initialValues),
|
||||||
@@ -133,6 +134,7 @@ export const createForm = (config) => {
|
|||||||
return clearErrorsAndSubmit(values);
|
return clearErrorsAndSubmit(values);
|
||||||
} else {
|
} else {
|
||||||
errors.set(error);
|
errors.set(error);
|
||||||
|
onError(error)
|
||||||
isSubmitting.set(false);
|
isSubmitting.set(false);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -154,7 +156,7 @@ export const createForm = (config) => {
|
|||||||
yupErrors.inner.map((error) =>
|
yupErrors.inner.map((error) =>
|
||||||
util.set(updatedErrors, error.path, error.message),
|
util.set(updatedErrors, error.path, error.message),
|
||||||
);
|
);
|
||||||
|
onError(updatedErrors)
|
||||||
errors.set(updatedErrors);
|
errors.set(updatedErrors);
|
||||||
}
|
}
|
||||||
isSubmitting.set(false);
|
isSubmitting.set(false);
|
||||||
|
|||||||
@@ -61,6 +61,7 @@ type FormState<Inf = Record<string, any>> = {
|
|||||||
declare function createForm<Inf = Record<string, any>>(formProperties: {
|
declare function createForm<Inf = Record<string, any>>(formProperties: {
|
||||||
initialValues: Inf;
|
initialValues: Inf;
|
||||||
onSubmit: (values: Inf) => any | Promise<any>;
|
onSubmit: (values: Inf) => any | Promise<any>;
|
||||||
|
onError?: (errors: Record<string, any>) => any | Promise<any>;
|
||||||
validate?: (values: Inf) => any | undefined;
|
validate?: (values: Inf) => any | undefined;
|
||||||
validationSchema?: ObjectSchema<any>;
|
validationSchema?: ObjectSchema<any>;
|
||||||
}): FormState<Inf>;
|
}): FormState<Inf>;
|
||||||
|
|||||||
@@ -1,79 +1,15 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
|
|
||||||
import Tabs from "$lib/components/tabs.svelte";
|
|
||||||
import MapWithElevation from "$lib/components/trail/map_with_elevation.svelte";
|
import MapWithElevation from "$lib/components/trail/map_with_elevation.svelte";
|
||||||
import TrailDropdown from "$lib/components/trail/trail_dropdown.svelte";
|
import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte";
|
||||||
import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
|
|
||||||
import { trail } from "$lib/stores/trail_store";
|
import { trail } from "$lib/stores/trail_store";
|
||||||
import { currentUser } from "$lib/stores/user_store";
|
|
||||||
import { getFileURL } from "$lib/util/file_util";
|
|
||||||
import {
|
|
||||||
formatDistance,
|
|
||||||
formatElevation,
|
|
||||||
formatTimeHHMM,
|
|
||||||
} from "$lib/util/format_util";
|
|
||||||
import "$lib/vendor/leaflet-elevation/src/index.css";
|
import "$lib/vendor/leaflet-elevation/src/index.css";
|
||||||
import type { Marker } from "leaflet";
|
import type { Marker } from "leaflet";
|
||||||
import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
|
import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
|
||||||
import "leaflet/dist/leaflet.css";
|
import "leaflet/dist/leaflet.css";
|
||||||
import type { DataSource } from "photoswipe/lightbox";
|
|
||||||
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
|
||||||
import "photoswipe/style.css";
|
import "photoswipe/style.css";
|
||||||
import { onMount } from "svelte";
|
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
|
|
||||||
let markers: Marker[];
|
let markers: Marker[];
|
||||||
|
|
||||||
let lightbox: PhotoSwipeLightbox;
|
|
||||||
let lightboxDataSource: DataSource;
|
|
||||||
|
|
||||||
const tabs = [
|
|
||||||
$_("description"),
|
|
||||||
$_("waypoints"),
|
|
||||||
$_("photos"),
|
|
||||||
$_("summit-book"),
|
|
||||||
];
|
|
||||||
let activeTab = 0;
|
|
||||||
|
|
||||||
const thumbnail = $trail.photos.length
|
|
||||||
? getFileURL($trail, $trail.photos[$trail.thumbnail])
|
|
||||||
: "/imgs/default_thumbnail.webp";
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
lightboxDataSource = $trail.photos.map((p) => ({
|
|
||||||
src: getFileURL($trail, 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);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
@@ -82,107 +18,8 @@
|
|||||||
<main class="grid grid-cols-1 md:grid-cols-[458px_1fr] gap-x-1 gap-y-4">
|
<main class="grid grid-cols-1 md:grid-cols-[458px_1fr] gap-x-1 gap-y-4">
|
||||||
<div
|
<div
|
||||||
id="trail-details"
|
id="trail-details"
|
||||||
class="md:overflow-y-auto md:overflow-x-hidden flex flex-col items-stretch gap-4 rounded-xl"
|
|
||||||
>
|
>
|
||||||
<section class="relative h-80">
|
<TrailInfoPanel trail={$trail} {markers}></TrailInfoPanel>
|
||||||
<img
|
|
||||||
class="w-full h-80 object-cover"
|
|
||||||
src={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 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>
|
|
||||||
<div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8">
|
|
||||||
<h3 class="text-lg">
|
|
||||||
<i class="fa fa-location-dot mr-3"></i>
|
|
||||||
{$trail.location}
|
|
||||||
</h3>
|
|
||||||
<h3 class="text-lg">
|
|
||||||
<i class="fa fa-person-hiking mr-3"></i>
|
|
||||||
{$_($trail.difficulty ?? "?")}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if $currentUser && $currentUser.id == $trail.author}
|
|
||||||
<TrailDropdown trail={$trail} mode="map"></TrailDropdown>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around">
|
|
||||||
<div class="flex flex-col items-center text-sm">
|
|
||||||
<span class="text-gray-500">{$_('distance')}</span>
|
|
||||||
<span class="font-semibold"
|
|
||||||
>{formatDistance($trail.distance)}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center text-sm">
|
|
||||||
<span class="text-gray-500">{$_('elevation-gain')}</span>
|
|
||||||
<span class="font-semibold"
|
|
||||||
>{formatElevation($trail.elevation_gain)}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center text-sm">
|
|
||||||
<span class="text-gray-500">{$_('est-duration')}</span>
|
|
||||||
<span class="font-semibold"
|
|
||||||
>{formatTimeHHMM($trail.duration)}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
{#if $trail.expand.category}
|
|
||||||
<div class="flex flex-col items-center text-sm">
|
|
||||||
<span class="text-gray-500">{$_('category')}</span>
|
|
||||||
<span class="font-semibold"
|
|
||||||
>{$trail.expand.category.name}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</section>
|
|
||||||
<hr class=" border-input-border" />
|
|
||||||
<section class="mx-4">
|
|
||||||
<Tabs extraClasses="text-sm mb-4" {tabs} bind:activeTab></Tabs>
|
|
||||||
{#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="space-y-4 mx-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={getFileURL($trail, photo)}
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{#if activeTab == 3}
|
|
||||||
<ul>
|
|
||||||
{#each $trail.expand.summit_logs ?? [] as log}
|
|
||||||
<li><SummitLogCard {log}></SummitLogCard></li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
{/if}
|
|
||||||
</section>
|
|
||||||
</div>
|
</div>
|
||||||
<MapWithElevation trail={$trail} bind:markers></MapWithElevation>
|
<MapWithElevation trail={$trail} bind:markers></MapWithElevation>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -101,6 +101,26 @@
|
|||||||
const { form, errors, handleChange, handleSubmit } = createForm<Trail>({
|
const { form, errors, handleChange, handleSubmit } = createForm<Trail>({
|
||||||
initialValues: data.trail,
|
initialValues: data.trail,
|
||||||
validationSchema: trailSchema,
|
validationSchema: trailSchema,
|
||||||
|
onError: (errors) => {
|
||||||
|
if (errors.name) {
|
||||||
|
const nameInput = document.querySelector(
|
||||||
|
"input[name=name]",
|
||||||
|
) as HTMLElement;
|
||||||
|
|
||||||
|
if (window.innerWidth < 768) {
|
||||||
|
window?.scroll({
|
||||||
|
top: nameInput.offsetTop - 24,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
const form = document.getElementById("trail-form");
|
||||||
|
form?.scroll({
|
||||||
|
top: nameInput.offsetTop - 130,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
onSubmit: async (submittedTrail) => {
|
onSubmit: async (submittedTrail) => {
|
||||||
loading = true;
|
loading = true;
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -1,267 +1,12 @@
|
|||||||
<script lang="ts">
|
<script>
|
||||||
import { goto } from "$app/navigation";
|
import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte";
|
||||||
import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
|
|
||||||
import Tabs from "$lib/components/tabs.svelte";
|
|
||||||
import TrailDropdown from "$lib/components/trail/trail_dropdown.svelte";
|
|
||||||
import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
|
|
||||||
import { trail } from "$lib/stores/trail_store";
|
import { trail } from "$lib/stores/trail_store";
|
||||||
import { currentUser } from "$lib/stores/user_store";
|
|
||||||
import { getFileURL } from "$lib/util/file_util";
|
|
||||||
import {
|
|
||||||
formatDistance,
|
|
||||||
formatElevation,
|
|
||||||
formatTimeHHMM,
|
|
||||||
} from "$lib/util/format_util";
|
|
||||||
import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
|
|
||||||
import "$lib/vendor/leaflet-elevation/src/index.css";
|
|
||||||
import type { Icon, Map, 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";
|
|
||||||
import { _ } from "svelte-i18n";
|
import { _ } from "svelte-i18n";
|
||||||
|
|
||||||
const tabs = [
|
|
||||||
$_("description"),
|
|
||||||
$_("waypoints"),
|
|
||||||
$_("photos"),
|
|
||||||
$_("summit-book"),
|
|
||||||
];
|
|
||||||
|
|
||||||
let map: Map;
|
|
||||||
|
|
||||||
let activeTab = 0;
|
|
||||||
|
|
||||||
let markers: Marker[] = [];
|
|
||||||
|
|
||||||
let lightbox: PhotoSwipeLightbox;
|
|
||||||
let lightboxDataSource: DataSource;
|
|
||||||
|
|
||||||
const thumbnail = $trail.photos.length
|
|
||||||
? getFileURL($trail, $trail.photos[$trail.thumbnail])
|
|
||||||
: "/imgs/default_thumbnail.webp";
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
const L = (await import("leaflet")).default;
|
|
||||||
await import("leaflet-gpx");
|
|
||||||
await import("leaflet.awesome-markers");
|
|
||||||
|
|
||||||
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,
|
|
||||||
polyline_options: {
|
|
||||||
className: "lightblue-theme elevation-polyline",
|
|
||||||
opacity: 0.75,
|
|
||||||
weight: 5,
|
|
||||||
},
|
|
||||||
gpx_options: {
|
|
||||||
parseElements: ["track"] as any,
|
|
||||||
},
|
|
||||||
marker_options: {
|
|
||||||
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: getFileURL($trail, 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 toggleMapFullScreen() {
|
|
||||||
goto(`/map/trail/${$trail.id!}`);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<TrailInfoPanel trail={$trail} showMap={true}></TrailInfoPanel>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>{$trail.name} | {$_("trail", { values: { n: 1 } })} | wanderer</title
|
<title>{$trail.name} | {$_("trail", { values: { n: 1 } })} | wanderer</title
|
||||||
>
|
>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<div
|
|
||||||
class="trail-panel max-w-5xl mx-auto border border-input-border rounded-3xl overflow-hidden"
|
|
||||||
>
|
|
||||||
<section class="relative h-80">
|
|
||||||
<img class="w-full h-80" src={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 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>
|
|
||||||
<div class="flex flex-wrap gap-x-8 gap-y-2 mt-4 mr-8">
|
|
||||||
<h3 class="text-lg">
|
|
||||||
<i class="fa fa-location-dot mr-3"></i>
|
|
||||||
{$trail.location}
|
|
||||||
</h3>
|
|
||||||
<h3 class="text-lg">
|
|
||||||
<i class="fa fa-person-hiking mr-3"></i>
|
|
||||||
{$_($trail.difficulty ?? "?")}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if $currentUser && $currentUser.id == $trail.author}
|
|
||||||
<TrailDropdown trail={$trail} mode="overview"></TrailDropdown>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section
|
|
||||||
class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8 border-b border-input-border"
|
|
||||||
>
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<span>{$_("distance")}</span>
|
|
||||||
<span class="font-semibold text-lg"
|
|
||||||
>{formatDistance($trail.distance)}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col items-center">
|
|
||||||
<span>{$_("elevation-gain")}</span>
|
|
||||||
<span class="font-semibold text-lg"
|
|
||||||
>{formatElevation($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 class="border-separator" />
|
|
||||||
<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 class="border-separator" />
|
|
||||||
{/if}
|
|
||||||
<section class="p-8">
|
|
||||||
<Tabs {tabs} bind:activeTab></Tabs>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-[1fr_18rem] mt-6 gap-8">
|
|
||||||
<div>
|
|
||||||
{#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={getFileURL($trail, 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="relative">
|
|
||||||
<div class="rounded-xl h-72" id="map">
|
|
||||||
<div class="leaflet-top leaflet-right">
|
|
||||||
<button
|
|
||||||
class="leaflet-control fa fa-maximize rounded-full text-lg bg-white text-black px-[14px] py-2 hover:bg-gray-100"
|
|
||||||
style="cursor: pointer !important"
|
|
||||||
on:click={() => toggleMapFullScreen()}
|
|
||||||
></button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.trail-panel img {
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user