adds i18n
This commit is contained in:
Christian Beutel
@@ -1,95 +1,81 @@
|
||||
<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 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 { currentUser } from "$lib/stores/user_store";
|
||||
import { getFileURL } from "$lib/util/file_util";
|
||||
import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
|
||||
import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
|
||||
import {
|
||||
formatDistance,
|
||||
formatElevation,
|
||||
formatTimeHHMM,
|
||||
} from "$lib/util/format_util";
|
||||
import "$lib/vendor/leaflet-elevation/src/index.css";
|
||||
import type { Map, Marker } from "leaflet";
|
||||
import type { Marker } from "leaflet";
|
||||
import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
|
||||
import "leaflet/dist/leaflet.css";
|
||||
import type { DataSource } from "photoswipe/lightbox";
|
||||
import PhotoSwipeLightbox from "photoswipe/lightbox";
|
||||
import "photoswipe/style.css";
|
||||
import { onMount } from "svelte";
|
||||
import { _ } from "svelte-i18n";
|
||||
|
||||
let L: any;
|
||||
let map: Map;
|
||||
let markers: Marker[] = [];
|
||||
let markers: Marker[];
|
||||
|
||||
const tabs = ["Description", "Waypoints", "Photos", "Summit book"];
|
||||
let lightbox: PhotoSwipeLightbox;
|
||||
let lightboxDataSource: DataSource;
|
||||
|
||||
const tabs = [
|
||||
$_("description"),
|
||||
$_("waypoints"),
|
||||
$_("photos"),
|
||||
$_("summit-book"),
|
||||
];
|
||||
let activeTab = 0;
|
||||
|
||||
onMount(async () => {
|
||||
L = (await import("leaflet")).default;
|
||||
await import("leaflet-gpx");
|
||||
await import("leaflet.awesome-markers");
|
||||
//@ts-ignore
|
||||
await import("$lib/vendor/leaflet-elevation/src/index.js");
|
||||
onMount(() => {
|
||||
lightboxDataSource = $trail.photos.map((p) => ({
|
||||
src: p,
|
||||
}));
|
||||
lightbox = new PhotoSwipeLightbox({
|
||||
dataSource: lightboxDataSource,
|
||||
pswpModule: async () => await import("photoswipe"),
|
||||
});
|
||||
lightbox.init();
|
||||
|
||||
map = L.map("map").setView([$trail.lat, $trail.lon], 14);
|
||||
|
||||
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
attribution: "© OpenStreetMap contributors",
|
||||
}).addTo(map);
|
||||
|
||||
const elevation_options = {
|
||||
height: 200,
|
||||
|
||||
theme: "lightblue-theme",
|
||||
detached: true,
|
||||
elevationDiv: "#elevation",
|
||||
closeBtn: false,
|
||||
followMarker: true,
|
||||
autofitBounds: true,
|
||||
imperial: false,
|
||||
reverseCoords: false,
|
||||
acceleration: false,
|
||||
slope: true,
|
||||
speed: false,
|
||||
altitude: true,
|
||||
time: true,
|
||||
distance: true,
|
||||
// Summary track info style: "inline" || "multiline" || false
|
||||
summary: false,
|
||||
downloadLink: false,
|
||||
ruler: false,
|
||||
legend: true,
|
||||
// Toggle "leaflet-almostover" integration
|
||||
almostOver: true,
|
||||
// Toggle "leaflet-distance-markers" integration
|
||||
distanceMarkers: false,
|
||||
// Toggle "leaflet-edgescale" integration
|
||||
edgeScale: false,
|
||||
// Toggle "leaflet-hotline" integration
|
||||
hotline: true,
|
||||
// Display track datetimes: true || false
|
||||
timestamps: false,
|
||||
waypoints: false,
|
||||
wptIcons: false,
|
||||
wptLabels: false,
|
||||
preferCanvas: true,
|
||||
};
|
||||
|
||||
const controlElevation = L.control
|
||||
.elevation(elevation_options)
|
||||
.addTo(map);
|
||||
controlElevation.load(getFileURL($trail, $trail.gpx));
|
||||
|
||||
// addGPXLayer($trail);
|
||||
|
||||
for (const waypoint of $trail.expand.waypoints) {
|
||||
const marker = createMarkerFromWaypoint(L, waypoint);
|
||||
marker.addTo(map);
|
||||
markers.push(marker);
|
||||
}
|
||||
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>
|
||||
|
||||
<main class="grid grid-cols-1 md:grid-cols-[452px_1fr] gap-x-1">
|
||||
<svelte:head>
|
||||
<title>{$trail.name} | {$_("map")} | wanderer</title>
|
||||
</svelte:head>
|
||||
<main class="grid grid-cols-1 md:grid-cols-[452px_1fr] gap-x-1 gap-y-4">
|
||||
<div
|
||||
id="trail-details"
|
||||
class="md:overflow-y-auto md:overflow-x-hidden flex flex-col items-stretch gap-4 rounded-xl"
|
||||
@@ -104,7 +90,7 @@
|
||||
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"
|
||||
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">
|
||||
@@ -115,30 +101,33 @@
|
||||
{$trail.location}
|
||||
</h3>
|
||||
</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="text-gray-500">{$_('distance')}</span>
|
||||
<span class="font-semibold"
|
||||
>{formatMeters($trail.distance)}</span
|
||||
>{formatDistance($trail.distance)}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-sm">
|
||||
<span class="text-gray-500">Elevation gain</span>
|
||||
<span class="text-gray-500">{$_('elevation-gain')}</span>
|
||||
<span class="font-semibold"
|
||||
>{formatMeters($trail.elevation_gain)}</span
|
||||
>{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="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="text-gray-500">{$_('category')}</span>
|
||||
<span class="font-semibold"
|
||||
>{$trail.expand.category.name}</span
|
||||
>
|
||||
@@ -163,10 +152,13 @@
|
||||
</ul>
|
||||
{/if}
|
||||
{#if activeTab == 2}
|
||||
<div id="photo-gallery" class="">
|
||||
<div id="photo-gallery" class="space-y-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=""
|
||||
/>
|
||||
@@ -182,18 +174,11 @@
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
<div id="map-container" class="flex flex-col">
|
||||
<div id="map" class="rounded-xl z-0 basis-full"></div>
|
||||
<div id="elevation"></div>
|
||||
</div>
|
||||
<MapWithElevation trail={$trail} bind:markers></MapWithElevation>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
#map-container {
|
||||
height: calc(100vh - 180px);
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
#map-container,
|
||||
#trail-details {
|
||||
height: calc(100vh - 124px);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user