From 7e56d4354d646f9743a868baedb45026f00ce48e Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Sat, 14 Sep 2024 20:02:00 +0200
Subject: [PATCH] adds list trail selection from map

---
 .../logo/logo_text_light_with_version.svelte  |  2 +-
 .../trail/map_with_elevation_multiple.svelte  | 26 +++++++++++--------
 web/src/routes/lists/+page.svelte             |  8 ++++--
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/web/src/lib/components/logo/logo_text_light_with_version.svelte b/web/src/lib/components/logo/logo_text_light_with_version.svelte
index cf5a99d3..9433df8f 100644
--- a/web/src/lib/components/logo/logo_text_light_with_version.svelte
+++ b/web/src/lib/components/logo/logo_text_light_with_version.svelte
@@ -95,5 +95,5 @@
         d="M43.857 43.3045C44.0569 43.0652 44.4246 43.0652 44.6245 43.3045L46.6259 45.7008C46.8978 46.0263 46.6663 46.5213 46.2421 46.5213H42.2394C41.8152 46.5213 41.5837 46.0263 41.8556 45.7008L43.857 43.3045Z"
         fill="#242734"
     />
-    <text x="178" y="64" fill="white" font-size="0.75rem">v0.8.2</text>
+    <text x="178" y="64" fill="white" font-size="0.75rem">v0.9.0</text>
 </svg>
diff --git a/web/src/lib/components/trail/map_with_elevation_multiple.svelte b/web/src/lib/components/trail/map_with_elevation_multiple.svelte
index 54284edc..dc3c67cf 100644
--- a/web/src/lib/components/trail/map_with_elevation_multiple.svelte
+++ b/web/src/lib/components/trail/map_with_elevation_multiple.svelte
@@ -15,12 +15,14 @@
     import { createEventDispatcher, onMount } from "svelte";
     import { _ } from "svelte-i18n";
     import Dropdown from "../base/dropdown.svelte";
+    import { trail } from "$lib/stores/trail_store";
 
     export let trails: Trail[];
     export let map: any | null = null;
     export let options: any = {};
     export let activeTrailIndex: number | null = 0;
     export let markers: any[] = [];
+    export let bindRoutePopup: boolean = true;
 
     const dispatch = createEventDispatcher();
 
@@ -222,10 +224,9 @@
             activeTrailIndex = null;
             markers = [];
 
-            if (polyline._selected) {
+            if (polyline && polyline._selected) {
                 activeTrailIndex = trails.findIndex(
-                    (t) => t.id ==
-                        polyline.options.id,
+                    (t) => t.id == polyline.options.id,
                 );
 
                 for (const waypoint of trails.at(activeTrailIndex!)?.expand
@@ -234,6 +235,11 @@
                     marker.addTo(markerLayerGroup!);
                     markers.push(marker);
                 }
+
+                dispatch(
+                    "select",
+                    trails.find((t) => t.id == polyline.options.id),
+                );
             }
         });
 
@@ -243,11 +249,7 @@
         });
 
         gpxGroup.on("route_loaded", ({ route }: { route: any }) => {
-            const trail = trails.find(
-                (t) =>
-                    t.id ==
-                    route.options.id,
-            );
+            const trail = trails.find((t) => t.id == route.options.id);
 
             if (!trail) {
                 return;
@@ -255,8 +257,9 @@
             const thumbnail = trail.photos.length
                 ? getFileURL(trail, trail.photos[trail.thumbnail])
                 : "/imgs/default_thumbnail.webp";
-            route.bindPopup(
-                `<a href="/trail/view/${trail.id}" data-sveltekit-preload-data="off">
+            if (bindRoutePopup) {
+                route.bindPopup(
+                    `<a href="/trail/view/${trail.id}" data-sveltekit-preload-data="off">
     <li class="flex items-center gap-4 cursor-pointer text-black max-w-80">
         <div class="shrink-0"><img class="h-14 w-14 object-cover rounded-xl" src="${thumbnail}" alt="">
         </div>
@@ -277,7 +280,8 @@
         </div>
     </li>
 </a>`,
-            );
+                );
+            }
         });
 
         gpxGroup.addTo(map);
diff --git a/web/src/routes/lists/+page.svelte b/web/src/routes/lists/+page.svelte
index 490119ac..d627a8f5 100644
--- a/web/src/routes/lists/+page.svelte
+++ b/web/src/routes/lists/+page.svelte
@@ -86,7 +86,7 @@
         selectedList = item;
     }
 
-    function back() {
+    function back() {       
         if (selectedTrail) {
             selectedTrail = null;
             mapWithElevationMultiple.resetSelection();
@@ -102,7 +102,7 @@
 
     function selectTrail(trail: Trail) {
         selectedTrail = trail;
-        mapWithElevationMultiple.selectTrail(trail.id!);        
+        mapWithElevationMultiple.selectTrail(trail.id!);
         window.scrollTo({ top: 0 });
     }
 
@@ -175,6 +175,10 @@
             bind:map
             bind:this={mapWithElevationMultiple}
             bind:markers
+            on:select={(e) => {
+                selectedTrail = e.detail
+            }}
+            bindRoutePopup={false}
             options={{ itinerary: true, flyToBounds: true }}
         ></MapWithElevationMultiple>
     </div>