fixes trail update

web/src/lib/components/base/radio_group.svelte

@@ -29,7 +29,7 @@
             type="radio"
             checked={i == selected}
             value={item.value}
-            class="w-4 h-4 accent-input-background border-input-border focus:ring-input-ring focus:ring-2"
+            class="w-4 h-4 accent-primary border-input-border focus:ring-input-ring focus:ring-2"
             on:change={() => handleRadioChange(i)}
         />
         <label for="{name}-radio-{i}" class="ms-2 text-sm">{item.text}</label>

web/src/lib/components/nav_bar.svelte

@@ -12,8 +12,7 @@
         { text: "Home", value: "/" },
         { text: "Trails", value: "/trails" },
         { text: "Map", value: "/map" },
-        { text: "Category", value: "/" },
-        { text: "Favorites", value: "/" },
+        { text: "Lists", value: "/lists" },
     ];
 
     const dropdownItems = [
@@ -72,7 +71,7 @@
     function handleDropdownClick(item: { text: string; value: any }) {
         if (item.value == "logout") {
             logout();
-            goto("/login");
+            goto("/");
         }
     }
 </script>
@@ -85,21 +84,24 @@
             <LogoTextLight></LogoTextLight>
         {/if}
     </a>
+    <menu
+        id="nav-bar-links"
+        class="hidden md:flex gap-8 relative py-1 px-2 "
+    >
+        <div
+            class="absolute h-full w-16 bg-menu-item-background-hover rounded-xl top-0 z-0"
+            style="width: {$indicatorWidth}px; left: {$indicatorPosition}px; scale: {$indicatorScale}"
+        ></div>
+        {#each navBarItems as item}
+            <a
+                class="font-semibold z-10"
+                href={item.value}
+                data-sveltekit-preload-data="tap">{item.text}</a
+            >
+        {/each}
+    </menu>
     {#if $currentUser}
-        <menu id="nav-bar-links" class="flex gap-8 relative py-1 px-2">
-            <div
-                class="absolute h-full w-16 bg-menu-item-background-hover rounded-xl top-0 z-0"
-                style="width: {$indicatorWidth}px; left: {$indicatorPosition}px; scale: {$indicatorScale}"
-            ></div>
-            {#each navBarItems as item}
-                <a
-                    class="font-semibold z-10"
-                    href={item.value}
-                    data-sveltekit-preload-data="tap">{item.text}</a
-                >
-            {/each}
-        </menu>
-        <div class="flex gap-6 items-center">
+        <div class="hidden md:flex gap-6 items-center">
             <button
                 class="btn-icon fa-regular fa-{$theme === 'light'
                     ? 'sun'
@@ -121,6 +123,14 @@
             </Dropdown>
         </div>
     {:else}
-        <a class="btn-primary btn-large" href="/login">Login</a>
+        <div class="hidden md:flex items-center gap-8">
+            <button
+                class="btn-icon fa-regular fa-{$theme === 'light'
+                    ? 'sun'
+                    : 'moon'}"
+                on:click={() => toggleTheme()}
+            ></button>
+            <a class="btn-primary btn-large" href="/login">Login</a>
+        </div>
     {/if}
 </nav>

web/src/lib/components/scene.svelte

@@ -44,7 +44,7 @@
     makeDefault
     position={[5, 2, 0]}
     on:create={({ ref }) => {
-        ref.lookAt(0, 0, -0.5);
+        ref.lookAt(0, 0, 0);
     }}
 />
 

web/src/lib/components/tabs.svelte

@@ -1,10 +1,48 @@
 <script lang="ts">
+    import { onMount } from "svelte";
+    import { cubicOut } from "svelte/easing";
+    import { tweened } from "svelte/motion";
+
     export let tabs: string[];
     export let activeTab: number;
+
+    const indicatorPosition = tweened(0, {
+        duration: 300,
+        easing: cubicOut,
+    });
+
+    const indicatorWidth = tweened(0, {
+        duration: 300,
+        easing: cubicOut,
+    });
+
+    onMount(() => {
+        switchTabs(0);
+    });
+
+    function switchTabs(index: number) {
+        const tabs = document.getElementById("tabs");
+
+        const childElement = tabs?.children[index + 1] as HTMLElement;
+        const newWidth = childElement?.getBoundingClientRect().width ?? 0;
+        const newPosition = childElement.offsetLeft;
+        indicatorWidth.set(newWidth);
+        indicatorPosition.set(newPosition);
+
+        activeTab = index;
+    }
 </script>
 
-<div class="flex gap-2 overflow-x-auto">
+<div id="tabs" class="flex gap-2 overflow-x-auto relative">
+    <div
+        class="absolute h-full bg-menu-item-background-hover rounded-t-lg top-0 z-0"
+        style="width: {$indicatorWidth}px; left: {$indicatorPosition}px;"
+    ></div>
     {#each tabs as tab, i}
-        <button class="tab" class:tab-active={activeTab == i} on:click={() => activeTab = i}>{tab}</button>
+        <button
+            class="tab z-10"
+            class:tab-active={activeTab == i}
+            on:click={() => switchTabs(i)}>{tab}</button
+        >
     {/each}
 </div>

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

@@ -1,37 +1,9 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
     import type { Trail } from "$lib/models/trail";
-    import { trails_delete, trails_index } from "$lib/stores/trail_store";
-    import { currentUser } from "$lib/stores/user_store";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
-    import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
 
     export let trail: Trail;
-    export let mode: "show" | "edit" = "show";
 
-    const dropdownItems: DropdownItem[] = [
-        { text: "Open", value: "open", icon: "up-right-from-square" },
-        { text: "Show on map", value: "map", icon: "map" },
-        { text: "Edit", value: "edit", icon: "pen" },
-    ];
-
-    async function handleDropdownClick(
-        currentTrail: Trail,
-        item: { text: string; value: any },
-    ) {
-        if (item.value == "open") {
-            goto(`/trail/view/${currentTrail.id}`);
-        } else if (item.value == "map") {
-            goto(`/map/?lat=${currentTrail.lat}&lon=${currentTrail.lon}`);
-        } else if (item.value == "edit") {
-            goto(`/trail/edit/${currentTrail.id}`);
-        }
-    }
-
-    async function deleteTrail() {
-        await trails_delete(trail);
-        await trails_index();
-    }
 </script>
 
 <div
@@ -45,18 +17,10 @@
     </div>
     <div class="p-4">
         <div>
-            <div class="flex justify-between items-center">
-                <h4 class="font-semibold text-lg">{trail.name}</h4>
-                {#if $currentUser && $currentUser.id == trail.author && mode == "edit"}
-                    <Dropdown
-                        on:change={(e) => handleDropdownClick(trail, e.detail)}
-                        items={dropdownItems}
-                    ></Dropdown>
-                {/if}
-            </div>
+            <h4 class="font-semibold text-lg">{trail.name}</h4>
             <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
         </div>
-        <div class="flex mt-2 gap-4 text-sm text-gray-500">
+        <div class="flex mt-2 gap-4 text-sm text-gray-500 whitespace-nowrap">
             <span
                 ><i class="fa fa-left-right mr-2"></i>{formatMeters(
                     trail.distance,

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

@@ -0,0 +1,204 @@
+<script lang="ts">
+    import { ms } from "$lib/meilisearch";
+    import type { Category } from "$lib/models/category";
+    import type { TrailFilter } from "$lib/models/trail";
+    import { country_codes } from "$lib/util/country_code_util";
+    import { formatMeters } from "$lib/util/format_util";
+    import { createEventDispatcher } from "svelte";
+    import DoubleSlider from "../base/double_slider.svelte";
+    import type { RadioItem } from "../base/radio_group.svelte";
+    import RadioGroup from "../base/radio_group.svelte";
+    import Search, { type SearchItem } from "../base/search.svelte";
+    import Slider from "../base/slider.svelte";
+    import { slide } from "svelte/transition";
+
+    export let categories: Category[];
+    export let filterExpanded: boolean = true;
+    export let filter: TrailFilter = {
+        q: "",
+        category: [],
+        near: {
+            radius: 2000,
+        },
+        distanceMin: 0,
+        distanceMax: 20000,
+        elevationGainMin: 0,
+        elevationGainMax: 4000,
+        sort: "created",
+        sortOrder: "+",
+    };
+    export let showTrailSearch: boolean = true;
+    export let showCitySearch: boolean = true;
+
+    const dispatch = createEventDispatcher();
+
+    const radioGroupItems: RadioItem[] = [
+        { text: "Completed", value: "completed" },
+        { text: "Not completed", value: "not_completed" },
+        { text: "No preference", value: "no_preference" },
+    ];
+
+    let searchDropdownItems: SearchItem[] = [];
+
+    let citySearchQuery: string = "";
+
+    async function update() {
+        dispatch("update", 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);
+        }
+
+        update();
+    }
+
+    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;
+        }
+
+        update();
+    }
+
+    async function searchCities(q: string) {
+        if (q.length == 0) {
+            filter.near.lat = undefined;
+            filter.near.lon = undefined;
+            update();
+
+            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;
+
+        update();
+    }
+</script>
+
+<div class="trail-filter p-8 border border-input-border rounded-xl">
+    {#if showTrailSearch}
+        <div class="flex gap-2 items-center">
+            <div class="basis-full">
+                <Search
+                    bind:value={filter.q}
+                    on:update={update}
+                    placeholder="Search trails..."
+                ></Search>
+            </div>
+            <button
+                class="btn-icon md:hidden"
+                on:click={() => (filterExpanded = !filterExpanded)}
+                ><i class="fa fa-sliders"></i></button
+            >
+        </div>
+    {/if}
+
+    {#if filterExpanded}
+        <div in:slide out:slide>
+            {#if showTrailSearch}
+                <hr class="my-4 border-separator" />
+            {/if}
+            <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 bg-input-background accent-primary 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" />
+            {#if showCitySearch}
+                <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={() => update()}
+                ></Slider>
+                <p>
+                    <span class="text-gray-500 text-sm">Radius:</span>
+                    {formatMeters(filter.near.radius)}
+                </p>
+                <hr class="my-4 border-separator" />
+            {/if}
+            <p class="text-sm font-medium pb-4">Distance</p>
+            <DoubleSlider
+                minValue={filter.distanceMin}
+                maxValue={filter.distanceMax}
+                bind:currentMin={filter.distanceMin}
+                bind:currentMax={filter.distanceMax}
+                on:set={() => update()}
+            ></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={filter.elevationGainMin}
+                maxValue={filter.elevationGainMax}
+                bind:currentMin={filter.elevationGainMin}
+                bind:currentMax={filter.elevationGainMax}
+                on:set={() => update()}
+            ></DoubleSlider>
+            <div class="flex justify-between">
+                <span>{formatMeters(filter.elevationGainMin)}</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>
+        </div>
+    {/if}
+</div>

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

@@ -1,30 +1,8 @@
 <script lang="ts">
-    import { goto } from "$app/navigation";
     import type { Trail } from "$lib/models/trail";
-    import { currentUser } from "$lib/stores/user_store";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
-    import Dropdown, { type DropdownItem } from "../base/dropdown.svelte";
 
     export let trail: Trail;
-
-    const dropdownItems: DropdownItem[] = [
-        { text: "Open", value: "open", icon: "up-right-from-square" },
-        { text: "Show on map", value: "map", icon: "map" },
-        { text: "Edit", value: "edit", icon: "pen" },
-    ];
-
-    async function handleDropdownClick(
-        currentTrail: Trail,
-        item: { text: string; value: any },
-    ) {
-        if (item.value == "open") {
-            goto(`/trail/view/${currentTrail.id}`);
-        } else if (item.value == "map") {
-            goto(`/map/?lat=${currentTrail.lat}&lon=${currentTrail.lon}`);
-        } else if (item.value == "edit") {
-            goto(`/trail/edit/${currentTrail.id}`);
-        }
-    }
 </script>
 
 <li
@@ -38,16 +16,7 @@
         />
     </div>
     <div class="min-w-0 basis-full">
-        <div class="flex items-center justify-between">
-            <h4 class="font-semibold text-lg">{trail.name}</h4>
-
-            {#if $currentUser && $currentUser.id == trail.author}
-                <Dropdown
-                    on:change={(e) => handleDropdownClick(trail, e.detail)}
-                    items={dropdownItems}
-                ></Dropdown>
-            {/if}
-        </div>
+        <h4 class="font-semibold text-lg">{trail.name}</h4>
         <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
         <div class="flex mt-2 gap-4 text-sm text-gray-500">
             <span

web/src/lib/models/trail.ts

@@ -98,7 +98,7 @@ interface TrailFilter {
     }
     distanceMin: number,
     distanceMax: number,
-    eleavationGainMin: number;
+    elevationGainMin: number;
     elevationGainMax: number;
     completed?: boolean;
     sort: "name" | "distance" | "elevation_gain" | "created";

web/src/lib/stores/trail_store.ts

@@ -15,8 +15,8 @@ export const trail: Writable<Trail> = writable(new Trail(""));
 
 export const editTrail: Writable<Trail> = writable(new Trail(""));
 
-export async function trails_index() {
-    const response: Trail[] = (await pb.collection('trails').getList<Trail>(1, 5, { expand: "category,waypoints,summit_logs" })).items
+export async function trails_index(data: { perPage: number } = { perPage: 5 }) {
+    const response: Trail[] = (await pb.collection('trails').getList<Trail>(1, data.perPage, { expand: "category,waypoints,summit_logs" })).items
 
     for (const trail of response) {
         setFileURLs(trail);
@@ -28,7 +28,7 @@ export async function trails_index() {
 }
 
 export async function trails_search_filter(filter: TrailFilter) {
-    let filterText: string = `distance >= ${filter.distanceMin} AND distance <= ${filter.distanceMax} AND elevation_gain >= ${filter.eleavationGainMin} AND elevation_gain <= ${filter.elevationGainMax}`;
+    let filterText: string = `distance >= ${filter.distanceMin} AND distance <= ${filter.distanceMax} AND elevation_gain >= ${filter.elevationGainMin} AND elevation_gain <= ${filter.elevationGainMax}`;
 
     if (filter.category.length > 0) {
         filterText += ` AND category IN [${filter.category.join(",")}]`;
@@ -63,17 +63,33 @@ export async function trails_search_filter(filter: TrailFilter) {
     return dbResponse;
 }
 
-export async function trails_search_bounding_box(northEast: LatLng, southWest: LatLng) {
+export async function trails_search_bounding_box(northEast: LatLng, southWest: LatLng, filter?: TrailFilter) {
+
+    let filterText: string = "";
+
+    if (filter) {
+        filterText += `distance >= ${filter.distanceMin} AND distance <= ${filter.distanceMax} AND elevation_gain >= ${filter.elevationGainMin} AND elevation_gain <= ${filter.elevationGainMax}`;
+
+        if (filter.category.length > 0) {
+            filterText += ` AND category IN [${filter.category.join(",")}]`;
+        }
+        if (filter.completed !== undefined) {
+            filterText += ` AND completed = ${filter.completed}`;
+        }
+    }
+
     const response = await ms.index("trails").search("", {
         filter: [
             `_geoBoundingBox([${northEast.lat}, ${northEast.lng}], [${southWest.lat}, ${southWest.lng}])`,
+            filterText
         ],
     });
     const trailIds = response.hits.map((h) => h.id);
 
     if (trailIds.length == 0) {
+        const currentTrails : Trail[] = get(trails);
         trails.set([]);
-        return compareObjectArrays<Trail>(get(trails), []);
+        return compareObjectArrays<Trail>(currentTrails, []);
     }
 
     const dbResponse: Trail[] = (
@@ -89,7 +105,7 @@ export async function trails_search_bounding_box(northEast: LatLng, southWest: L
         const gpxData: string = await fetchGPX(trail);
         trail.expand.gpx_data = gpxData;
     }
-    
+
     const comparison = compareObjectArrays<Trail>(get(trails), dbResponse)
 
     trails.set(dbResponse);
@@ -175,7 +191,7 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, formData:
             ...addedWaypoint,
             marker: undefined,
         });
-        formData.append("waypoints+", model.id!);
+        formData.append("waypoints", model.id!);
     }
 
     for (const updatedWaypoint of waypointUpdates.updated) {
@@ -183,27 +199,37 @@ export async function trails_update(oldTrail: Trail, newTrail: Trail, formData:
             ...updatedWaypoint,
             marker: undefined,
         });
+        formData.append("waypoints", model.id!);
     }
 
     for (const deletedWaypoint of waypointUpdates.deleted) {
         const success = await waypoints_delete(deletedWaypoint.id!);
     }
 
-    const summitLogUpdates = compareObjectArrays<SummitLog>(oldTrail.expand.summit_logs ?? [], newTrail.expand.summit_logs ?? []);
+    for (const unchangedWaypoint of waypointUpdates.unchanged) {
+        formData.append("waypoints", unchangedWaypoint.id!);
+    }
+
+    const summitLogUpdates = compareObjectArrays<SummitLog>(oldTrail.expand.summit_logs ?? [], newTrail.expand.summit_logs ?? []);    
 
     for (const summitLog of summitLogUpdates.added) {
         const model = await summit_logs_create(summitLog);
-        formData.append("summit_logs+", model.id!);
+        formData.append("summit_logs", model.id!);
     }
 
     for (const updatedSummitLog of summitLogUpdates.updated) {
         const model = await summit_logs_update(updatedSummitLog);
+        formData.append("summit_logs", model.id!);
     }
 
     for (const deletedSummitLog of summitLogUpdates.deleted) {
         const success = await summit_logs_delete(deletedSummitLog.id!);
     }
 
+    for (const unchangedSummitLog of summitLogUpdates.unchanged) {
+        formData.append("summit_logs", unchangedSummitLog.id!);
+    }
+
     for (const file of newTrail._photoFiles) {
         formData.append("photos", file);
     }
@@ -283,15 +309,18 @@ function setFileURLs(trail: Trail) {
     }
 }
 
-function compareObjectArrays<T extends { id?: string }>(oldArray: T[], newArray: T[]) {
+function compareObjectArrays<T extends { id?: string }>(oldArray: T[], newArray: T[]) {    
     const newObjects = [];
     const updatedObjects = [];
+    const unchangedObjects = [];
     for (const newObj of newArray) {
         const oldObj = oldArray.find(oldObj => oldObj.id === newObj.id)
         if (!oldObj) {
             newObjects.push(newObj);
         } else if (!util.deepEqual(newObj, oldObj)) {
             updatedObjects.push(newObj);
+        } else {
+            unchangedObjects.push(newObj);
         }
     }
     const deletedObjects = oldArray.filter(oldObj => !newArray.find(newObj => newObj.id === oldObj.id));
@@ -299,29 +328,7 @@ function compareObjectArrays<T extends { id?: string }>(oldArray: T[], newArray:
     return {
         added: newObjects,
         deleted: deletedObjects,
-        updated: updatedObjects
+        updated: updatedObjects,
+        unchanged: unchangedObjects,
     };
 }
-
-function index_trail(trail: Trail) {
-    ms.index('trails').addDocuments([
-        {
-            "id": trail.id,
-            "author": trail.author,
-            "name": trail.name,
-            "description": trail.description,
-            "location": trail.location,
-            "distance": trail.distance,
-            "elevation_gain": trail.elevation_gain,
-            "duration": trail.duration,
-            "category": trail.expand.category?.id,
-            "completed": trail.expand.summit_logs?.length > 0,
-            "created": trail.created,
-            "public": trail.public,
-            "_geo": {
-                "lat": trail.lat,
-                "lng": trail.lon,
-            }
-        }]);
-}
-

web/src/lib/util/format_util.ts

@@ -7,7 +7,7 @@ export function formatTimeHHMM(minutes?: number) {
 
     const h = (minutes - m) / 60;
 
-    return (h < 10 ? "0" : "") + h.toString() + "h " + (m < 10 ? "0" : "") + m.toString() + "m";
+    return (h < 10 ? "0" : "") + h.toString() + "h " + (m < 10 ? "0" : "") + Math.round(m).toString() + "m";
 }
 
 export function formatMeters(meters?: number) {
@@ -15,9 +15,9 @@ export function formatMeters(meters?: number) {
         return "-";
     }
     if (meters % 1 === 0) {
-        return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${meters} m`;
+        return meters >= 1000 ? `${(meters / 1000)} km` : `${meters} m`;
     } else {
-        return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${meters.toFixed(2)} m`
+        return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${Math.round(meters)} m`
     }
 
 }