fixes trail update

2024-02-23 17:13:43 +01:00
parent 2543390c3a
commit 90a683f268
23 changed files with 727 additions and 419 deletions
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -60,7 +60,7 @@
 </script>

 <section
-    class="hero grid grid-cols-1 md:grid-cols-2"
+    class="hero grid grid-cols-1 md:grid-cols-2 md:px-8 md:gap-8"
    style="height: calc(100vh - 112px)"
 >
    <div
@@ -90,10 +90,10 @@
 <section
    class="max-w-7xl mx-auto mt-8 px-8 xl:px-0 grid grid-cols-1 md:grid-cols-2 items-center"
 >
-    <div id="trails" class="flex flex-wrap justify-items-center gap-8 py-8">
+    <div id="trails" class="flex flex-wrap justify-items-center gap-8 py-8 order-1 md:order-none">
        {#each $trails as trail}
            <a href="/trail/view/{trail.id}">
-                <TrailCard {trail} mode="edit"></TrailCard></a
+                <TrailCard {trail}></TrailCard></a
            >
        {/each}
    </div>
--- a/web/src/routes/+page.ts
+++ b/web/src/routes/+page.ts
@@ -3,6 +3,6 @@ import { trails_index } from "$lib/stores/trail_store";
 import type { ServerLoad } from "@sveltejs/kit";

 export const load: ServerLoad = async ({ params, locals }) => {
-    await trails_index()
+    await trails_index({perPage: 4})
    await categories_index()
 };
--- a/web/src/routes/login/+page.svelte
+++ b/web/src/routes/login/+page.svelte
@@ -2,12 +2,15 @@
    import { goto } from "$app/navigation";
    import Button from "$lib/components/base/button.svelte";
    import TextField from "$lib/components/base/text_field.svelte";
-    import LogoTextTwoLine from "$lib/components/logo/logo_text_two_line.svelte";
+    import LogoTextTwoLineDark from "$lib/components/logo/logo_text_two_line_dark.svelte";
+    import LogoTextTwoLineLight from "$lib/components/logo/logo_text_two_line_light.svelte";
    import { show_toast } from "$lib/stores/toast_store";
    import { login, type User } from "$lib/stores/user_store";
    import { createForm } from "$lib/vendor/svelte-form-lib";
    import { ClientResponseError } from "pocketbase";
    import { object, string } from "yup";
+    import { theme } from "$lib/stores/theme_store";
+

    let loading: boolean = false;
    const { form, errors, handleChange, handleSubmit } = createForm<User>({
@@ -50,10 +53,14 @@

 <main class="flex justify-center">
    <form
-        class="login-panel max-w-md shadow-lg rounded-xl p-8 flex flex-col justify-center items-center gap-8 w-[28rem] mt-8"
+        class="login-panel max-w-md border border-input-border rounded-xl p-8 flex flex-col justify-center items-center gap-8 w-[28rem] mt-8"
        on:submit={handleSubmit}
    >
-        <LogoTextTwoLine></LogoTextTwoLine>
+        {#if $theme == "light"}
+            <LogoTextTwoLineDark></LogoTextTwoLineDark>
+        {:else}
+            <LogoTextTwoLineLight></LogoTextTwoLineLight>
+        {/if}
        <h4 class="text-xl font-semibold">Save your adventures!</h4>
        <div class="space-y-6 w-80">
            <TextField
--- a/web/src/routes/map/+page.svelte
+++ b/web/src/routes/map/+page.svelte
@@ -7,7 +7,7 @@
    import TrailCard from "$lib/components/trail/trail_card.svelte";
    import EmptyStateSearch from "$lib/components/empty_states/empty_state_search.svelte";
    import { ms } from "$lib/meilisearch";
-    import type { Trail } from "$lib/models/trail";
+    import type { Trail, TrailFilter } from "$lib/models/trail";
    import {
        trails,
        trails_search_bounding_box,
@@ -26,6 +26,9 @@
    import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
    import "leaflet/dist/leaflet.css";
    import { onMount } from "svelte";
+    import TrailFilterPanel from "$lib/components/trail/trail_filter_panel.svelte";
+    import { categories } from "$lib/stores/category_store";
+    import { slide } from "svelte/transition";

    let L: any;
    let map: Map;
@@ -34,6 +37,10 @@

    let searchDropdownItems: SearchItem[] = [];

+    let showFilter: boolean = false;
+
+    let filter: TrailFilter;
+
    onMount(async () => {
        L = (await import("leaflet")).default;
        await import("leaflet-gpx");
@@ -128,7 +135,11 @@
    }

    async function searchTrails(northEast: LatLng, southWest: LatLng) {
-        const changes = await trails_search_bounding_box(northEast, southWest);
+        const changes = await trails_search_bounding_box(
+            northEast,
+            southWest,
+            filter,
+        );

        for (const newTrail of changes.added) {
            const gpxLayer = await addGPXLayer(newTrail);
@@ -212,19 +223,46 @@
        const marker: Marker = startMarkers[trail.id!];
        marker?.closePopup();
    }
+
+    async function handleFilterUpdate(filter: TrailFilter) {
+        const bounds = map.getBounds();
+        await searchTrails(bounds.getNorthEast(), bounds.getSouthWest());
+    }
 </script>

-<main class="grid grid-cols-[400px_1fr]">
+<main class="grid grid-cols-1 md:grid-cols-[400px_1fr]">
    <div
-        class="overflow-y-auto overflow-x-hidden flex flex-col items-center gap-4 px-8"
+        class="overflow-y-auto overflow-x-hidden flex flex-col items-stretch gap-4 px-8"
+        style="height: calc(100vh - 124px)"
    >
-        <Search
-            extraClasses="w-full"
-            on:update={(e) => search(e.detail)}
-            on:click={(e) => handleSearchClick(e.detail)}
-            placeholder="Search for trails, places..."
-            items={searchDropdownItems}
-        ></Search>
+        <div class="sticky top-0 z-10 bg-background pb-4 space-y-4">
+            <div class="flex items-center gap-4">
+                <Search
+                    extraClasses="w-full"
+                    on:update={(e) => search(e.detail)}
+                    on:click={(e) => handleSearchClick(e.detail)}
+                    placeholder="Search for trails, places..."
+                    items={searchDropdownItems}
+                ></Search>
+                <button
+                    class="btn-icon"
+                    on:click={() => (showFilter = !showFilter)}
+                    ><i class="fa fa-sliders"></i></button
+                >
+            </div>
+            {#if showFilter}
+                <div in:slide out:slide>
+                    <TrailFilterPanel
+                        categories={$categories}
+                        showTrailSearch={false}
+                        showCitySearch={false}
+                        bind:filter
+                        on:update={(e) => handleFilterUpdate(e.detail)}
+                    ></TrailFilterPanel>
+                </div>
+            {/if}
+        </div>
+
        {#if $trails.length == 0}
            <EmptyStateSearch></EmptyStateSearch>
        {/if}
@@ -232,7 +270,6 @@
            <a href="/trail/view/{trail.id}">
                <TrailCard
                    {trail}
-                    mode="edit"
                    on:mouseenter={() => handleTrailCardMouseEnter(trail)}
                    on:mouseleave={() => handleTrailCardMouseLeave(trail)}
                ></TrailCard>
--- a/web/src/routes/map/+page.ts
+++ b/web/src/routes/map/+page.ts
@@ -1,6 +1,9 @@
+import { categories_index } from "$lib/stores/category_store";
 import { trails } from "$lib/stores/trail_store";
 import type { ServerLoad } from "@sveltejs/kit";

 export const load: ServerLoad = async ({ params, locals }) => {
+    await categories_index()
+
    trails.set([])
 };
--- a/web/src/routes/register/+page.svelte
+++ b/web/src/routes/register/+page.svelte
@@ -2,7 +2,9 @@
    import { goto } from "$app/navigation";
    import Button from "$lib/components/base/button.svelte";
    import TextField from "$lib/components/base/text_field.svelte";
-    import LogoTextTwoLine from "$lib/components/logo/logo_text_two_line.svelte";
+    import LogoTextTwoLineDark from "$lib/components/logo/logo_text_two_line_dark.svelte";
+    import LogoTextTwoLineLight from "$lib/components/logo/logo_text_two_line_light.svelte";
+    import { theme } from "$lib/stores/theme_store";
    import { show_toast } from "$lib/stores/toast_store";
    import { users_create, type User, login } from "$lib/stores/user_store";
    import { createForm } from "$lib/vendor/svelte-form-lib";
@@ -53,10 +55,14 @@

 <main class="flex justify-center">
    <form
-        class="login-panel max-w-md shadow-lg rounded-xl p-8 flex flex-col justify-center items-center gap-8 w-[28rem] mt-8"
+        class="login-panel max-w-md border border-input-border rounded-xl p-8 flex flex-col justify-center items-center gap-8 w-[28rem] mt-8"
        on:submit={handleSubmit}
    >
-        <LogoTextTwoLine></LogoTextTwoLine>
+        {#if $theme == "light"}
+            <LogoTextTwoLineDark></LogoTextTwoLineDark>
+        {:else}
+            <LogoTextTwoLineLight></LogoTextTwoLineLight>
+        {/if}
        <h4 class="text-xl font-semibold">Save your adventures!</h4>
        <div class="space-y-6 w-80">
            <TextField
--- a/web/src/routes/trail/edit/[id]/+page.svelte
+++ b/web/src/routes/trail/edit/[id]/+page.svelte
@@ -193,7 +193,6 @@
        reader.readAsText(selectedFile);

        reader.onload = async function (e) {
-            trail.set(new Trail(""));
            await addGPXLayer(e.target?.result as string);
            const closestCity = (await ms.index("cities500").search("", {
                filter: [`_geoRadius(${$form.lat}, ${$form.lon}, 10000)`],
@@ -450,7 +449,7 @@
                on:change={handlePhotoSelection}
            />
            {#each $form.photos ?? [] as photo, i}
-                <div class="shrink-0 grow-0 basis-auto">
+                <div class="shrink-0 grow-0 basis-auto m-2">
                    <PhotoCard
                        src={photo}
                        on:delete={() => handlePhotoDelete(i)}
--- a/web/src/routes/trail/view/[id]/+page.svelte
+++ b/web/src/routes/trail/view/[id]/+page.svelte
@@ -9,16 +9,18 @@
    import { currentUser } from "$lib/stores/user_store";
    import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
    import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
-    import type { Icon, Marker } from "leaflet";
+    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 { onMount, tick } from "svelte";

    const tabs = ["Description", "Waypoints", "Photos", "Summit book"];

+    let map: Map;
+
    let activeTab = 0;

    let markers: Marker[] = [];
@@ -28,6 +30,8 @@

    let openConfirmModal: () => void;

+    let mapFullScreen: boolean = false;
+
    const dropdownItems: DropdownItem[] = [
        { text: "Show on map", value: "map", icon: "map" },
        { text: "Edit", value: "edit", icon: "pen" },
@@ -39,7 +43,7 @@
        await import("leaflet-gpx");
        await import("leaflet.awesome-markers");

-        const map = L.map("map").setView([0, 0], 2);
+        map = L.map("map").setView([0, 0], 2);

        L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
            attribution: "© OpenStreetMap contributors",
@@ -135,10 +139,16 @@
    async function deleteTrail() {
        trails_delete($trail).then(() => history.back());
    }
+
+    async function toggleMapFullScreen() {
+        mapFullScreen = !mapFullScreen;
+        await tick();
+        map.invalidateSize();
+    }
 </script>

 <div
-    class="trail-panel max-w-5xl mx-auto shadow-2xl rounded-3xl overflow-hidden"
+    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={$trail.thumbnail} alt="" />
@@ -158,7 +168,9 @@
                </h3>
            </div>
            {#if $currentUser && $currentUser.id == $trail.author}
-                <div class="px-4 py-2 bg-menu-background rounded-full space-x-2">
+                <div
+                    class="px-4 py-2 bg-menu-background rounded-full space-x-2"
+                >
                    {#each dropdownItems as item}
                        <button
                            data-title={item.text}
@@ -172,7 +184,7 @@
        </div>
    </section>
    <section
-        class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8"
+        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>
@@ -202,18 +214,21 @@
        {/if}
    </section>
    {#if $trail.tags && $trail.tags.length > 0}
-        <hr class="border-separator"/>
+        <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"/>
+        <hr class="border-separator" />
    {/if}
    <section class="p-8">
        <Tabs {tabs} bind:activeTab></Tabs>
-        <div class="flex flex-wrap md:flex-nowrap mt-6 gap-8">
-            <div class="basis-full">
+        <div
+            class="grid grid-cols-1 mt-6 gap-8"
+            class:md:grid-cols-[1fr_18rem]={!mapFullScreen}
+        >
+            <div>
                {#if activeTab == 0}
                    <article class="text-justify whitespace-pre-line text-sm">
                        {$trail.description}
@@ -253,10 +268,19 @@
                    </ul>
                {/if}
            </div>
-            <div
-                class="rounded-xl h-72 basis-full md:basis-72 shrink-0"
-                id="map"
-            ></div>
+            <div class="relative" class:-order-1={mapFullScreen}>
+                <div class="rounded-xl h-72" id="map">
+                    <div class="leaflet-top leaflet-right">
+                        <button
+                            class="leaflet-control fa fa-{mapFullScreen
+                                ? 'minimize'
+                                : 'maximize'} rounded-full text-lg bg-white px-[14px] py-2 hover:bg-gray-100"
+                            style="cursor: pointer !important"
+                            on:click={() => toggleMapFullScreen()}
+                        ></button>
+                    </div>
+                </div>
+            </div>
        </div>
    </section>
    <ConfirmModal
--- a/web/src/routes/trails/+page.svelte
+++ b/web/src/routes/trails/+page.svelte
@@ -1,60 +1,16 @@
 <script lang="ts">
-    import DoubleSlider from "$lib/components/base/double_slider.svelte";
-    import RadioGroup, {
-        type RadioItem,
-    } from "$lib/components/base/radio_group.svelte";
-    import Search, {
-        type SearchItem,
-    } from "$lib/components/base/search.svelte";
    import Select, {
        type SelectItem,
    } from "$lib/components/base/select.svelte";
-    import Slider from "$lib/components/base/slider.svelte";
    import EmptyStateSearch from "$lib/components/empty_states/empty_state_search.svelte";
    import TrailCard from "$lib/components/trail/trail_card.svelte";
+    import TrailFilterPanel from "$lib/components/trail/trail_filter_panel.svelte";
    import TrailListItem from "$lib/components/trail/trail_list_item.svelte";
-    import { ms } from "$lib/meilisearch";
-    import type { Category } from "$lib/models/category";
    import type { TrailFilter } from "$lib/models/trail";
    import { categories } from "$lib/stores/category_store";
    import { trails, trails_search_filter } from "$lib/stores/trail_store";
-    import { country_codes } from "$lib/util/country_code_util";
-    import { formatMeters } from "$lib/util/format_util";
    import { onMount } from "svelte";

-    $: minDistance = Math.floor(
-        Math.min(...$trails.map((t) => t.distance ?? 0)),
-    );
-    $: maxDistance = Math.ceil(
-        Math.max(...$trails.map((t) => t.distance ?? 0)),
-    );
-    $: minElevationGain = Math.floor(
-        Math.min(...$trails.map((t) => t.elevation_gain ?? 0)),
-    );
-    $: maxElevationGain = Math.ceil(
-        Math.max(...$trails.map((t) => t.elevation_gain ?? 0)),
-    );
-
-    const filter: TrailFilter = {
-        q: "",
-        category: [],
-        near: {
-            radius: 2000,
-        },
-        distanceMin: minDistance,
-        distanceMax: maxDistance,
-        eleavationGainMin: minElevationGain,
-        elevationGainMax: maxElevationGain,
-        sort: "created",
-        sortOrder: "+",
-    };
-
-    const radioGroupItems: RadioItem[] = [
-        { text: "Completed", value: "completed" },
-        { text: "Not completed", value: "not_completed" },
-        { text: "No preference", value: "no_preference" },
-    ];
-
    const displayOptions: SelectItem[] = [
        { text: "Cards", value: "cards" },
        { text: "List", value: "list" },
@@ -68,12 +24,22 @@
        { text: "Elevation gain", value: "elevation_gain" },
    ];

-    let searchDropdownItems: SearchItem[] = [];
-
-    let citySearchQuery: string = "";
-
    let filterExpanded: boolean = true;

+    export const filter: TrailFilter = {
+        q: "",
+        category: [],
+        near: {
+            radius: 2000,
+        },
+        distanceMin: 0,
+        distanceMax: 20000,
+        elevationGainMin: 0,
+        elevationGainMax: 4000,
+        sort: "created",
+        sortOrder: "+",
+    };
+
    onMount(() => {
        const storedDisplayOption = localStorage.getItem("displayOption");
        if (storedDisplayOption) {
@@ -85,182 +51,38 @@
        }
    });

-    async function searchTrails() {
+    function setDisplayOption() {
+        localStorage.setItem("displayOption", selectedDisplayOption);
+    }
+
+    async function setSort() {
        await trails_search_filter(filter);
    }

-    function setCategoryFilter(category: Category) {
-        const categoryIndex = filter.category.findIndex(
-            (c) => c == category.id,
-        );
-        if (categoryIndex !== -1) {
-            filter.category.splice(categoryIndex, 1);
-        } else {
-            filter.category.push(category.id);
-        }
-
-        searchTrails();
-    }
-
-    function setCompletedFilter(item: RadioItem) {
-        switch (item.value) {
-            case "no_preference":
-                filter.completed = undefined;
-                break;
-            case "completed":
-                filter.completed = true;
-                break;
-            case "not_completed":
-                filter.completed = false;
-                break;
-            default:
-                filter.completed = undefined;
-                break;
-        }
-
-        searchTrails();
-    }
-
-    async function searchCities(q: string) {
-        if (q.length == 0) {
-            filter.near.lat = undefined;
-            filter.near.lon = undefined;
-            searchTrails();
-
-            return;
-        }
-        const result = await ms.index("cities500").search(q, { limit: 5 });
-        searchDropdownItems = result.hits.map((h) => ({
-            text: h.name,
-            description:
-                country_codes[h["country code"] as keyof typeof country_codes],
-            value: h,
-            icon: "city",
-        }));
-    }
-
-    function handleSearchClick(item: SearchItem) {
-        citySearchQuery = item.text;
-        filter.near.lat = item.value.lat;
-        filter.near.lon = item.value.lon;
-
-        searchTrails();
-    }
-
-    function setSort() {
-        searchTrails();
-    }
-
-    function setSortOrder() {
+    async function setSortOrder() {
        if (filter.sortOrder === "+") {
            filter.sortOrder = "-";
        } else {
            filter.sortOrder = "+";
        }

-        searchTrails();
+        await trails_search_filter(filter);
    }

-    function setDisplayOption() {
-        localStorage.setItem("displayOption", selectedDisplayOption);
+    async function handleFilterUpdate() {
+        await trails_search_filter(filter);
    }
 </script>

 <main
    class="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-8 max-w-7xl mx-6 md:mx-auto"
 >
-    <div class="trail-filters p-8 border border-input-border rounded-xl">
-        <div class="flex gap-2 items-center">
-            <div class="basis-full">
-                <Search
-                    bind:value={filter.q}
-                    on:update={searchTrails}
-                    placeholder="Search trails..."
-                ></Search>
-            </div>
-            <button
-                id="sort-order-btn"
-                class="btn-icon md:hidden"
-                on:click={() => (filterExpanded = !filterExpanded)}
-                ><i class="fa fa-sliders"></i></button
-            >
-        </div>
-
-        {#if filterExpanded}
-            <hr class="my-4 border-separator" />
-            <p class="text-sm font-medium pb-4">Category</p>
-            {#each $categories as category, i}
-                <div class="flex items-center mb-4">
-                    <input
-                        id="{category.name}-checkbox"
-                        type="checkbox"
-                        value={category.id}
-                        class="w-4 h-4 accent-input-background border-input-border focus:ring-input-ring focus:ring-2"
-                        on:change={() => setCategoryFilter(category)}
-                    />
-                    <label
-                        for="{category.name}-checkbox"
-                        class="ms-2 text-sm"
-                        >{category.name}</label
-                    >
-                </div>
-            {/each}
-            <hr class="my-4 border-separator" />
-            <p class="text-sm font-medium pb-4">Near</p>
-            <div class="mb-8">
-                <Search
-                    items={searchDropdownItems}
-                    placeholder="Search cities..."
-                    bind:value={citySearchQuery}
-                    on:update={(e) => searchCities(e.detail)}
-                    on:click={(e) => handleSearchClick(e.detail)}
-                ></Search>
-            </div>
-            <Slider
-                maxValue={10000}
-                bind:currentValue={filter.near.radius}
-                on:set={() => searchTrails()}
-            ></Slider>
-            <p>
-                <span class="text-gray-500 text-sm">Radius:</span>
-                {formatMeters(filter.near.radius)}
-            </p>
-            <hr class="my-4 border-separator" />
-            <p class="text-sm font-medium pb-4">Distance</p>
-            <DoubleSlider
-                minValue={minDistance}
-                maxValue={maxDistance}
-                bind:currentMin={filter.distanceMin}
-                bind:currentMax={filter.distanceMax}
-                on:set={() => searchTrails()}
-            ></DoubleSlider>
-            <div class="flex justify-between">
-                <span>{formatMeters(filter.distanceMin)}</span>
-                <span>{formatMeters(filter.distanceMax)}</span>
-            </div>
-            <hr class="my-4 border-separator" />
-            <p class="text-sm font-medium pb-4">Elevation Gain</p>
-            <DoubleSlider
-                minValue={minElevationGain}
-                maxValue={maxElevationGain}
-                bind:currentMin={filter.eleavationGainMin}
-                bind:currentMax={filter.elevationGainMax}
-                on:set={() => searchTrails()}
-            ></DoubleSlider>
-            <div class="flex justify-between">
-                <span>{formatMeters(filter.eleavationGainMin)}</span>
-                <span>{formatMeters(filter.elevationGainMax)}</span>
-            </div>
-            <hr class="my-4 border-separator" />
-            <p class="text-sm font-medium pb-4">Completed</p>
-            <RadioGroup
-                name="completed"
-                items={radioGroupItems}
-                selected={2}
-                on:change={(e) => setCompletedFilter(e.detail)}
-            ></RadioGroup>
-        {/if}
-    </div>
+    <TrailFilterPanel
+        categories={$categories}
+        {filter}
+        {filterExpanded}
+        on:update={() => handleFilterUpdate()}
+    ></TrailFilterPanel>
    <div class="min-w-0">
        <div class="flex items-start gap-8 justify-end mx-4">
            <div>
@@ -297,8 +119,7 @@
        >
            {#if $trails.length == 0}
                <div class="flex flex-col basis-full items-center">
-                        <EmptyStateSearch></EmptyStateSearch>
-                    
+                    <EmptyStateSearch></EmptyStateSearch>
                </div>
            {/if}
            {#each $trails as trail}
@@ -308,7 +129,7 @@
                    href="/trail/view/{trail.id}"
                >
                    {#if selectedDisplayOption === "cards"}
-                        <TrailCard {trail} mode="edit"></TrailCard>
+                        <TrailCard {trail}></TrailCard>
                    {:else}
                        <TrailListItem {trail}></TrailListItem>
                    {/if}