adds new trail page

2024-01-29 00:41:54 +01:00
parent b302ccded0
commit 2d4c673060
28 changed files with 783 additions and 115 deletions
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,43 +1,8 @@
 <script lang="ts">
    import CategoryCard from "$lib/components/category_card.svelte";
    import TrailCard from "$lib/components/trail_card.svelte";
-    import type { Category } from "$lib/models/category";
-    import type { Trail } from "$lib/models/trail";
-
-    const categories: Category[] = [
-        {
-            name: "Hiking",
-            img: "https://images.unsplash.com/photo-1551632811-561732d1e306?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-        },
-        {
-            name: "Walking",
-            img: "https://images.unsplash.com/photo-1606474226448-4aa808468efc?q=80&w=3380&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-        },
-        {
-            name: "Biking",
-            img: "https://images.unsplash.com/photo-1629626495452-37bfe96e142b?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-        },
-        {
-            name: "Climbing",
-            img: "https://images.unsplash.com/photo-1605548109944-9040d0972bf5?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTF8fGNsaW1iaW5nfGVufDB8fDB8fHww",
-        },
-        {
-            name: "Skiing",
-            img: "https://images.unsplash.com/photo-1616429553002-faf23468952d?q=80&w=3270&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-        },
-    ];
-
-    const trails: Trail[] = [
-        {
-            name: "Breitenstein",
-            location: "Fischbachau",
-            distance: 4000,
-            height: 1400,
-            img: "https://images.unsplash.com/photo-1570641963303-92ce4845ed4c?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
-            category: categories[0],
-            description: ""
-        },
-    ];
+    import { categories } from "$lib/stores/category_store";
+    import { trails } from "$lib/stores/trail_store";
 </script>

 <section class="hero flex justify-center items-center" style="height: 50vh">
@@ -60,8 +25,8 @@
        id="trails"
        class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8"
    >
-        {#each trails as trail,i}
-            <a href="/trail/{i}"> <TrailCard {trail}></TrailCard></a>
+        {#each $trails as trail}
+            <a href="/trail/{trail.id}"> <TrailCard {trail}></TrailCard></a>
        {/each}
    </div>
 </section>
@@ -71,7 +36,7 @@
        id="categories"
        class="grid grid-cols- sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8"
    >
-        {#each categories as category}
+        {#each $categories as category}
            <CategoryCard {category}></CategoryCard>
        {/each}
    </div>
--- a/web/src/routes/+page.ts
+++ b/web/src/routes/+page.ts
@@ -0,0 +1,8 @@
+import { categories_index } from "$lib/stores/category_store";
+import { trails_index } from "$lib/stores/trail_store";
+import type { Load } from "@sveltejs/kit";
+
+export const load: Load = async ({ params }) => {
+    await trails_index()
+    await categories_index()
+};
--- a/web/src/routes/new/+page.svelte
+++ b/web/src/routes/new/+page.svelte
@@ -0,0 +1,224 @@
+<script lang="ts">
+    import Modal from "$lib/components/base/modal.svelte";
+    import Select from "$lib/components/base/select.svelte";
+    import TextField from "$lib/components/base/text_field.svelte";
+    import Textarea from "$lib/components/base/textarea.svelte";
+    import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
+    import WaypointModal from "$lib/components/waypoint/waypoint_modal.svelte";
+    import { Trail } from "$lib/models/trail";
+    import { Waypoint } from "$lib/models/waypoint";
+    import { categories } from "$lib/stores/category_store";
+    import { trail } from "$lib/stores/trail_store";
+    import { waypoint } from "$lib/stores/waypoint_store";
+    import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
+    import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
+    import type { GPX, Icon, LeafletEvent, Map } from "leaflet";
+    import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
+    import "leaflet/dist/leaflet.css";
+    import { onMount } from "svelte";
+    import type { W } from "vitest/dist/reporters-rzC174PQ.js";
+
+    let L: any;
+    let map: Map;
+
+    let gpxLayer: GPX;
+
+    let openWayPointModal: () => void;
+
+    onMount(async () => {
+        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);
+    });
+
+    function openFileBrowser() {
+        document.getElementById("fileInput")!.click();
+    }
+
+    function handleFileSelection() {
+        const selectedFile = (
+            document.getElementById("fileInput") as HTMLInputElement
+        ).files?.[0];
+
+        if (!selectedFile) {
+            return;
+        }
+
+        $trail.gpx = selectedFile?.name;
+
+        var reader = new FileReader();
+
+        reader.readAsText(selectedFile);
+
+        reader.onload = function (e) {
+            trail.set(new Trail(""));
+            gpxLayer?.remove();
+            gpxLayer = new L.GPX(e.target?.result, {
+                async: true,
+                marker_options: {
+                    wptIcons: {
+                        "": L.AwesomeMarkers.icon({
+                            icon: "circle",
+                            prefix: "fa",
+                            markerColor: "cadetblue",
+                            iconColor: "white",
+                        }) as Icon,
+                    },
+                    startIcon: L.AwesomeMarkers.icon({
+                        icon: "circle-half-stroke",
+                        prefix: "fa",
+                        markerColor: "cadetblue",
+                        iconColor: "white",
+                    }) as Icon,
+                    endIcon: L.AwesomeMarkers.icon({
+                        icon: "flag-checkered",
+                        prefix: "fa",
+                        markerColor: "cadetblue",
+                        iconColor: "white",
+                    }) as Icon,
+                    startIconUrl: "",
+                    endIconUrl: "",
+                    shadowUrl: "",
+                },
+            })
+                .on("addpoint", function (e: any) {
+                    if (e.point_type === "start") {
+                        e.point.setZIndexOffset(1000);
+                    } else if (e.point_type === "waypoint") {
+                        const waypoint = new Waypoint(
+                            e.point._latlng.lat,
+                            e.point._latlng.lng,
+                            { name: e.point.options.title, marker: e.point },
+                        );
+                        $trail.expand.waypoints.push(waypoint);
+                    }
+                })
+                .on("loaded", function (e: LeafletEvent) {
+                    map.fitBounds(e.target.getBounds());
+                    $trail.distance = e.target.get_distance();
+                    $trail.elevation_gain = e.target.get_elevation_gain();
+                    $trail.duration = e.target.get_total_time() / 1000 / 60;
+                })
+                .addTo(map);
+        };
+    }
+
+    function openMarkerPopup(waypoint: Waypoint) {
+        waypoint.marker?.openPopup();
+    }
+
+    function handleWaypointMenuClick(
+        currentWaypoint: Waypoint,
+        e: CustomEvent<{ text: string; value: string }>,
+    ) {
+        if (e.detail.value === "edit") {
+            waypoint.set(currentWaypoint);
+            openWayPointModal();
+        } else if (e.detail.value === "delete") {
+            currentWaypoint.marker?.remove();
+            $trail.expand.waypoints = $trail.expand.waypoints.filter(
+                (w) =>
+                    w.lat !== currentWaypoint.lat &&
+                    w.lon !== currentWaypoint.lon,
+            );
+        }
+    }
+
+    function findMapCenterAndOpenModal() {
+        const mapCenter = map.getCenter();
+        waypoint.set(new Waypoint(mapCenter.lat, mapCenter.lng));
+        openWayPointModal();
+    }
+
+    function saveWaypoint(e: CustomEvent<Waypoint>) {
+        const savedWaypoint = e.detail;
+
+        if ($trail.expand.waypoints.includes(savedWaypoint)) {
+            $trail.expand.waypoints = $trail.expand.waypoints;
+            savedWaypoint.marker?.remove();
+        } else {
+            $trail.expand.waypoints = [
+                ...$trail.expand.waypoints,
+                savedWaypoint,
+            ];
+        }
+        const marker = createMarkerFromWaypoint(L, savedWaypoint);
+        marker.addTo(map);
+        savedWaypoint.marker = marker;
+    }
+</script>
+
+<main class="grid grid-cols-[400px_1fr]">
+    <form class="overflow-scroll flex flex-col gap-4 px-8">
+        <h3 class="text-xl font-semibold">Pick a trail</h3>
+        <button class="btn-primary" on:click={openFileBrowser}
+            >Upload GPX</button
+        >
+        <input
+            type="file"
+            id="fileInput"
+            style="display: none;"
+            on:change={handleFileSelection}
+        />
+        <hr />
+        <h3 class="text-xl font-semibold">Basic Info</h3>
+        <div class="flex gap-4 justify-around">
+            <div class="flex flex-col items-center">
+                <span>Distance</span>
+                <span class="font-medium">{formatMeters($trail.distance)}</span>
+            </div>
+            <div class="flex flex-col items-center">
+                <span>Elevation gain</span>
+                <span class="font-medium"
+                    >{formatMeters($trail.elevation_gain)}</span
+                >
+            </div>
+            <div class="flex flex-col items-center">
+                <span>Est. duration</span>
+                <span class="font-medium"
+                    >{formatTimeHHMM($trail.duration)}</span
+                >
+            </div>
+        </div>
+        <TextField label="Name*" bind:value={$trail.name}></TextField>
+        <Textarea label="Describe your trail" bind:value={$trail.description}
+        ></Textarea>
+        <Select
+            label="Category"
+            bind:value={$trail.expand.category}
+            items={$categories.map((c) => ({ text: c.name, value: c }))}
+        ></Select>
+        <hr />
+        <h3 class="text-xl font-semibold">Waypoints</h3>
+        <ul>
+            {#each $trail.expand.waypoints as waypoint, i}
+                <li on:mouseenter={() => openMarkerPopup(waypoint)}>
+                    <WaypointCard
+                        {waypoint}
+                        mode="edit"
+                        on:change={(e) => handleWaypointMenuClick(waypoint, e)}
+                    ></WaypointCard>
+                </li>
+            {/each}
+        </ul>
+        <button class="btn-secondary" on:click={findMapCenterAndOpenModal}
+            ><i class="fa fa-plus mr-2"></i>Add Waypoint</button
+        >
+    </form>
+    <div class="rounded-xl" id="map"></div>
+</main>
+<WaypointModal bind:openModal={openWayPointModal} on:save={saveWaypoint}
+></WaypointModal>
+
+<style>
+    #map,
+    form {
+        height: calc(100vh - 124px);
+    }
+</style>
--- a/web/src/routes/new/+page.ts
+++ b/web/src/routes/new/+page.ts
@@ -0,0 +1,6 @@
+import { categories_index } from "$lib/stores/category_store";
+import type { Load } from "@sveltejs/kit";
+
+export const load: Load = async ({ params }) => {
+    await categories_index()
+};
--- a/web/src/routes/trail/[id]/+page.svelte
+++ b/web/src/routes/trail/[id]/+page.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
    import SummitLogCard from "$lib/components/summit_log_card.svelte";
    import Tabs from "$lib/components/tabs.svelte";
-    import WaypointCard from "$lib/components/waypoint_card.svelte";
+    import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
    import { trail } from "$lib/stores/trail_store";
    import { getFileURL } from "$lib/util/file_util";
    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";
@@ -33,7 +34,7 @@
            attribution: "© OpenStreetMap contributors",
        }).addTo(map);

-        const gpxLayer = new L.GPX($trail.gpx, {
+        const gpxLayer = new L.GPX($trail.gpx!, {
            async: true,
            gpx_options: {
                parseElements: ["track"] as any,
@@ -70,27 +71,8 @@
            .addTo(map);

        for (const waypoint of $trail.expand.waypoints) {
-            const fontAwesomeIcon = L.AwesomeMarkers.icon({
-                icon: waypoint.icon,
-                prefix: "fa",
-                markerColor: "cadetblue",
-                iconColor: "white",
-            }) as Icon;
-
-            const marker = L.marker([waypoint.lat, waypoint.lon], {
-                title: waypoint.name,
-                icon: fontAwesomeIcon,
-            })
-                .addTo(map)
-                .bindPopup(
-                    "<b>" +
-                        waypoint.name +
-                        "</b>" +
-                        (waypoint.description.length > 0
-                            ? "<br>" + waypoint.description
-                            : ""),
-                );
-
+            const marker = createMarkerFromWaypoint(L, waypoint);
+            marker.addTo(map);
            markers.push(marker);
        }

--- a/web/src/routes/trail/[id]/+page.ts
+++ b/web/src/routes/trail/[id]/+page.ts
@@ -1,6 +1,5 @@
-import type { Load } from "@sveltejs/kit";
-import type {Trail} from "$lib/models/trail"
 import { trails_show } from "$lib/stores/trail_store";
+import type { Load } from "@sveltejs/kit";

 export const load: Load = async ({ params }) => {
    await trails_show(params.id!, true)