adds docs

web/src/lib/components/trail/map_with_elevation_multiple.svelte

@@ -20,6 +20,7 @@
     export let map: any | null = null;
     export let options: any = {};
     export let activeTrailIndex: number | null = 0;
+    export let markers: any[] = [];
 
     const dispatch = createEventDispatcher();
 
@@ -28,7 +29,9 @@
 
     let selectedMetric: "altitude" | "slope" | "speed" | false = "altitude";
 
-    $: gpxData = trails.map((t) => t.expand.gpx_data);
+    $: gpxData = trails.map((t) => {
+        return { id: t.id, gpx: t.expand.gpx_data };
+    });
     $: if (
         gpxData &&
         gpxGroup &&
@@ -216,15 +219,20 @@
 
         gpxGroup.on("selection_changed", ({ polyline }: { polyline: any }) => {
             markerLayerGroup.clearLayers();
-
             activeTrailIndex = null;
+            markers = [];
 
             if (polyline._selected) {
-                activeTrailIndex = polyline.options.index;
+                activeTrailIndex = trails.findIndex(
+                    (t) => t.id ==
+                        polyline.options.id,
+                );
+
                 for (const waypoint of trails.at(activeTrailIndex!)?.expand
                     .waypoints ?? []) {
                     const marker = createMarkerFromWaypoint(L, waypoint);
                     marker.addTo(markerLayerGroup!);
+                    markers.push(marker);
                 }
             }
         });
@@ -237,8 +245,8 @@
         gpxGroup.on("route_loaded", ({ route }: { route: any }) => {
             const trail = trails.find(
                 (t) =>
-                    gpxGroup?._hashCode(t.expand.gpx_data) ==
-                    route.options.hash,
+                    t.id ==
+                    route.options.id,
             );
 
             if (!trail) {
@@ -275,16 +283,28 @@
         gpxGroup.addTo(map);
     });
 
-    export function selectTrail(index: number) {
-        gpxGroup.select(index);
+    export function highlightTrail(id: string) {
+        gpxGroup?.highlightTrack(id);
     }
 
-    export function openPopup(index: number) {
-        gpxGroup.openPopup(index);
+    export function unHighlightTrail(id: string) {
+        gpxGroup?.unHighlightTrack(id);
     }
 
-    export function closePopup(index: number) {
-        gpxGroup.closePopup(index);
+    export function selectTrail(id: string) {
+        gpxGroup?.select(id);
+    }
+
+    export function resetSelection() {
+        gpxGroup?.resetSelection();
+    }
+
+    export function openPopup(id: string) {
+        gpxGroup?.openPopup(id);
+    }
+
+    export function closePopup(id: string) {
+        gpxGroup?.closePopup(id);
     }
 
     function switchHotline(metric: "altitude" | "slope" | "speed" | false) {

web/src/lib/components/trail/trail_dropdown.svelte

@@ -23,7 +23,7 @@
     import { pb } from "$lib/pocketbase";
 
     export let trail: Trail;
-    export let mode: "overview" | "map";
+    export let mode: "overview" | "map" | "list";
 
     let openConfirmModal: () => void;
     let openListSelectModal: () => void;

web/src/lib/components/trail/trail_info_panel.svelte

@@ -21,7 +21,11 @@
         formatElevation,
         formatTimeHHMM,
     } from "$lib/util/format_util";
-    import { createMarkerFromWaypoint, endIcon, startIcon } from "$lib/util/leaflet_util";
+    import {
+        createMarkerFromWaypoint,
+        endIcon,
+        startIcon,
+    } 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";
@@ -36,7 +40,7 @@
     import ShareInfo from "../share_info.svelte";
 
     export let trail: Trail;
-    export let mode: "overview" | "map" = "map";
+    export let mode: "overview" | "map" | "list" = "map";
     export let markers: Marker[] = [];
 
     const tabs = [
@@ -116,6 +120,10 @@
         markers[i].openPopup();
     }
 
+    function closeMarkerPopup(i: number) {
+        markers[i].closePopup();
+    }
+
     async function toggleMapFullScreen() {
         goto(`/map/trail/${trail.id!}`);
     }
@@ -160,12 +168,19 @@
 </script>
 
 <div
-    class="trail-info-panel mx-auto border border-input-border rounded-3xl h-full"
+    class="trail-info-panel mx-auto {mode == 'list'
+        ? ''
+        : 'border border-input-border rounded-3xl'} h-full"
     style="max-width: min(100%, 64rem);"
 >
     <div class="trail-info-panel-header">
         <section class="relative h-80">
-            <img class="w-full h-80 rounded-t-3xl" src={thumbnail} alt="" />
+            <img
+                class="w-full h-80 "
+                class:rounded-t-3xl={mode !== "list"}
+                src={thumbnail}
+                alt=""
+            />
             <div
                 class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
             ></div>
@@ -186,7 +201,8 @@
                         </span>
                     {/if}
                     {#if trailIsShared}
-                        <ShareInfo type="trail" subject={trail} large={true}></ShareInfo>
+                        <ShareInfo type="trail" subject={trail} large={true}
+                        ></ShareInfo>
                     {/if}
                 </div>
             {/if}
@@ -286,7 +302,7 @@
             {#if activeTab == 1}
                 <ul>
                     {#each trail.expand.waypoints ?? [] as waypoint, i}
-                        <li on:mouseenter={() => openMarkerPopup(i)}>
+                        <li on:mouseenter={() => openMarkerPopup(i)} on:mouseleave={() => closeMarkerPopup(i)}>
                             <WaypointCard {waypoint}></WaypointCard>
                         </li>
                     {/each}

web/src/lib/components/trail/trail_list_item.svelte

@@ -11,6 +11,8 @@
 
     export let trail: Trail;
 
+    export let showDescription: boolean = true;
+
     $: thumbnail = trail.photos.length
         ? getFileURL(trail, trail.photos[trail.thumbnail])
         : "/imgs/default_thumbnail.webp";
@@ -51,9 +53,7 @@
                 <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
             {/if}
             <h5>
-                <i class="fa fa-gauge mr-3"></i>{$_(
-                    trail.difficulty ?? "?",
-                )}
+                <i class="fa fa-gauge mr-3"></i>{$_(trail.difficulty ?? "?")}
             </h5>
         </div>
 
@@ -74,10 +74,12 @@
                 )}</span
             >
         </div>
-        <p
-            class="mt-3 text-sm whitespace-nowrap min-w-0 max-w-full overflow-hidden text-ellipsis"
-        >
-            {trail.description}
-        </p>
+        {#if showDescription}
+            <p
+                class="mt-3 text-sm whitespace-nowrap min-w-0 max-w-full overflow-hidden text-ellipsis"
+            >
+                {trail.description}
+            </p>
+        {/if}
     </div>
 </li>