finishes trails page

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import * as noUiSlider from "noUiSlider";
     import "nouislider/dist/nouislider.css";
-    import { onMount } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
 
     export let minValue = 0;
     export let maxValue = 100;
@@ -11,6 +11,8 @@
 
     let sliderContainer: any;
 
+    const dispatch = createEventDispatcher();
+
     onMount(() => {
         const updateValues = (values: string[]) => {
             currentMin = parseFloat(values[0]);
@@ -27,6 +29,10 @@
         });
 
         sliderContainer.noUiSlider.on("update", updateValues);
+
+        sliderContainer.noUiSlider.on("set", () => {
+            dispatch("set", [currentMin, currentMax]);
+        });
     });
 </script>
 

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

@@ -1,7 +1,15 @@
+<script context="module" lang="ts">
+    export type DropdownItem = {
+        text: string;
+        value: any;
+        icon?: string;
+    };
+</script>
+
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
 
-    export let items: { text: string; value: any; icon?: string }[] = [];
+    export let items: DropdownItem[] = [];
     export let size: string = "regular";
 
     const dispatch = createEventDispatcher();
@@ -27,7 +35,11 @@
 <svelte:window on:mouseup={() => (isOpen = false)} />
 
 <div class="dropdown relative">
-    <button class="flex items-center justify-center" on:click={toggleMenu} type="button">
+    <button
+        class="flex items-center justify-center"
+        on:click={toggleMenu}
+        type="button"
+    >
         <slot>
             <i
                 class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 hover:bg-opacity-50 px-[14px] py-2 rounded-full"

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

@@ -71,7 +71,7 @@
         type="search"
         name="q"
         autocomplete="off"
-        extraClasses="{large ? 'pl-14 text-2xl min-w-80 w-[33vw] max-w-[532px]' : 'pl-10'}"
+        extraClasses="{large ? 'pl-14 text-2xl min-w-80 w-[33vw] max-w-[532px] rounded-xl' : 'pl-10'}"
         {placeholder}
         bind:value
         on:input={onSearchType}

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

@@ -1,8 +1,24 @@
+<script context="module" lang="ts">
+    export type SelectItem = {
+        text: string;
+        value: any;
+    };
+</script>
+
 <script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
     export let name: string = "";
     export let value: any;
-    export let items: { text: string; value: any }[] = [];
+    export let items: SelectItem[] = [];
     export let label: string = "";
+
+    const dispatch = createEventDispatcher();
+
+    function onChange(target: any) {
+        dispatch("change", target?.value)
+    }
+
 </script>
 
 <div>
@@ -15,6 +31,7 @@
         {name}
         class="bg-gray-50 h-10 w-full px-4 border-r-8 border-transparent outline outline-1 outline-gray-200 rounded-md focus:outline-primary transition-colors"
         bind:value
+        on:change={(e) => onChange(e.target)}
     >
         {#each items as item}
             <option value={item.value}>{item.text}</option>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import noUiSlider from "noUiSlider";
     import "nouislider/dist/nouislider.css";
-    import { onMount } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
 
     export let minValue = 0;
     export let maxValue = 100;
@@ -10,6 +10,8 @@
 
     let sliderContainer: any;
 
+    const dispatch = createEventDispatcher();
+
     onMount(() => {
         const updateValues = (values: string[]) => {
             currentValue = parseFloat(values[0]);
@@ -25,6 +27,10 @@
         });
 
         sliderContainer.noUiSlider.on("update", updateValues);
+
+        sliderContainer.noUiSlider.on("set", () => {
+            dispatch("set", currentValue);
+        });
     });
 </script>
 

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

@@ -1,5 +1,7 @@
 <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 from "../base/dropdown.svelte";
@@ -11,6 +13,18 @@
         { text: "Edit", value: "edit" },
         { text: "Delete", value: "delete" },
     ];
+
+    async function handleDropdownClick(
+        currentTrail: Trail,
+        item: { text: string; value: any },
+    ) {
+        if (item.value == "edit") {
+            goto(`/trail/edit/${currentTrail.id}`);
+        } else if (item.value == "delete") {
+            await trails_delete(currentTrail);
+            await trails_index();
+        }
+    }
 </script>
 
 <div class="trail-card rounded-2xl shadow-md sm:w-72 cursor-pointer">
@@ -22,7 +36,7 @@
             <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 items={dropdownItems}></Dropdown>
+                    <Dropdown on:change={(e) => handleDropdownClick(trail, e.detail)} items={dropdownItems}></Dropdown>
                 {/if}
             </div>
             <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>

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

@@ -0,0 +1,74 @@
+<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 from "../base/dropdown.svelte";
+
+    export let trail: Trail;
+
+    const dropdownItems = [
+        { text: "Edit", value: "edit" },
+        { text: "Delete", value: "delete" },
+    ];
+
+    async function handleDropdownClick(
+        currentTrail: Trail,
+        item: { text: string; value: any },
+    ) {
+        if (item.value == "edit") {
+            goto(`/trail/edit/${currentTrail.id}`);
+        } else if (item.value == "delete") {
+            await trails_delete(currentTrail);
+            await trails_index();
+        }
+    }
+</script>
+
+<li
+    class="flex gap-8 p-4 rounded-xl shadow-md cursor-pointer hover:bg-gray-100 transition-colors"
+>
+    <div class="shrink-0">
+        <img
+            class="h-28 w-28 object-cover rounded-xl"
+            src={trail.thumbnail}
+            alt=""
+        />
+    </div>
+    <div class="min-w-0">
+        <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>
+        <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
+                ><i class="fa fa-left-right mr-2"></i>{formatMeters(
+                    trail.distance,
+                )}</span
+            >
+            <span
+                ><i class="fa fa-up-down mr-2"></i>{formatMeters(
+                    trail.elevation_gain,
+                )}</span
+            >
+            <span
+                ><i class="fa fa-clock mr-2"></i>{formatTimeHHMM(
+                    trail.duration,
+                )}</span
+            >
+        </div>
+        <p
+            class="mt-3 text-sm whitespace-nowrap min-w-0 max-w-full overflow-hidden text-ellipsis"
+        >
+            {trail.description}
+        </p>
+    </div>
+</li>

web/src/lib/models/trail.ts

@@ -16,6 +16,7 @@ class Trail {
     thumbnail?: string;
     photos: string[];
     gpx?: string;
+    created?: string;
     expand: {
         category?: Category;
         waypoints: Waypoint[]
@@ -46,6 +47,7 @@ class Trail {
             summit_logs?: SummitLog[],
             tags?: string[],
             description?: string
+            created?: string
         }
 
     ) {
@@ -68,6 +70,7 @@ class Trail {
         }
         this.tags = params?.tags ?? []
         this.description = params?.description ?? "";
+        this.created = params?.created;
         this._photoFiles = [];
     }
 }
@@ -91,13 +94,15 @@ interface TrailFilter {
     near: {
         lat?: number,
         lon?: number,
-        distance: number
+        radius: number
     }
     distanceMin: number,
     distanceMax: number,
     eleavationGainMin: number;
     elevationGainMax: number;
     completed?: boolean;
+    sort: "name" | "distance" | "elevation_gain" | "created";
+    sortOrder: "+" | "-" 
 }
 
 export { Trail, trailSchema };    

web/src/lib/stores/trail_store.ts

@@ -1,5 +1,5 @@
 import type { SummitLog } from "$lib/models/summit_log";
-import { Trail } from "$lib/models/trail";
+import { Trail, type TrailFilter } from "$lib/models/trail";
 import type { Waypoint } from "$lib/models/waypoint";
 import { pb } from "$lib/pocketbase";
 import { getFileURL } from "$lib/util/file_util";
@@ -26,6 +26,42 @@ export async function trails_index() {
     return response;
 }
 
+export async function trails_search(filter: TrailFilter) {
+    let filterText: string = `distance >= ${filter.distanceMin} AND distance <= ${filter.distanceMax} AND elevation_gain >= ${filter.eleavationGainMin} 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}`;
+    }
+    if (filter.near.lat && filter.near.lon) {
+        filterText += ` AND _geoRadius(${filter.near.lat}, ${filter.near.lon}, ${filter.near.radius})`
+    }
+    const indexResponse = await ms
+        .index("trails")
+        .search(filter.q, { filter: filterText });
+    const trailIds = indexResponse.hits.map((h) => h.id);
+
+    if (trailIds.length == 0) {
+        trails.set([]);
+        return [];
+    }
+
+    const dbResponse: Trail[] = (await pb.collection('trails').getList<Trail>(1, 5, {
+        filter: trailIds.map((id) => `id="${id}"`).join('||'), expand: "category,waypoints,summit_logs",
+        sort: `${filter.sortOrder}${filter.sort}`
+    })).items
+
+    for (const trail of dbResponse) {
+        setFileURLs(trail);
+    }
+
+    trails.set(dbResponse);
+
+    return dbResponse;
+}
+
 export async function trails_show(id: string, loadGPX?: boolean) {
     const response: Trail = await pb.collection('trails').getOne<Trail>(id, { expand: "category,waypoints,summit_logs" })
 
@@ -248,7 +284,9 @@ function index_trail(trail: Trail) {
             "distance": trail.distance,
             "elevation_gain": trail.elevation_gain,
             "duration": trail.duration,
-            "category": trail.expand.category?.name,
+            "category": trail.expand.category?.id,
+            "completed": trail.expand.summit_logs?.length > 0,
+            "created": trail.created,
             "_geo": {
                 "lat": trail.lat,
                 "lng": trail.lon,

web/src/lib/util/format_util.ts

@@ -15,7 +15,7 @@ export function formatMeters(meters?: number) {
         return "-";
     }
     if (meters % 1 === 0) {
-        return meters >= 1000 ? `${(meters / 1000)} km` : `${meters} m`;
+        return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${meters} m`;
     } else {
         return meters >= 1000 ? `${(meters / 1000).toFixed(2)} km` : `${meters.toFixed(2)} m`
     }

web/src/routes/+page.svelte

@@ -6,30 +6,15 @@
     import CategoryCard from "$lib/components/category_card.svelte";
     import TrailCard from "$lib/components/trail/trail_card.svelte";
     import { ms } from "$lib/meilisearch";
-    import type { Trail } from "$lib/models/trail";
     import { categories } from "$lib/stores/category_store";
     import {
-        trails,
+        trails
-        trails_delete,
-        trails_index,
     } from "$lib/stores/trail_store";
     import { currentUser } from "$lib/stores/user_store";
     import { country_codes } from "$lib/util/country_code_util";
 
     let searchDropdownItems: SearchItem[] = [];
 
-    async function handleDropdownClick(
-        currentTrail: Trail,
-        item: { text: string; value: any },
-    ) {
-        if (item.value == "edit") {
-            goto(`/trail/edit/${currentTrail.id}`);
-        } else if (item.value == "delete") {
-            await trails_delete(currentTrail);
-            await trails_index();
-        }
-    }
-
     async function search(q: string) {
         const response = await ms.multiSearch({
             queries: [
@@ -93,7 +78,6 @@
                 <TrailCard
                     {trail}
                     mode="edit"
-                    on:change={(e) => handleDropdownClick(trail, e.detail)}
                 ></TrailCard></a
             >
         {/each}

web/src/routes/trails/+page.svelte

@@ -6,31 +6,46 @@
     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 TextField from "$lib/components/base/text_field.svelte";
     import TrailCard from "$lib/components/trail/trail_card.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 } from "$lib/stores/trail_store";
+    import { trails, trails_search } 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";
 
-    $: maxDistance = Math.max(...$trails.map((t) => t.distance ?? 0));
+    $: minDistance = Math.floor(
-    $: maxElevationGain = Math.max(
+        Math.min(...$trails.map((t) => t.distance ?? 0)),
-        ...$trails.map((t) => t.elevation_gain ?? 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: {
-            distance: 2000,
+            radius: 2000,
         },
-        distanceMin: 0,
+        distanceMin: minDistance,
         distanceMax: maxDistance,
-        eleavationGainMin: 0,
+        eleavationGainMin: minElevationGain,
         elevationGainMax: maxElevationGain,
+        sort: "created",
+        sortOrder: "+",
     };
 
     const radioGroupItems: RadioItem[] = [
@@ -39,10 +54,47 @@
         { text: "No preference", value: "no_preference" },
     ];
 
+    const displayOptions: SelectItem[] = [
+        { text: "Cards", value: "cards" },
+        { text: "List", value: "list" },
+    ];
+    let selectedDisplayOption = displayOptions[0].value;
+
+    const sortOptions: SelectItem[] = [
+        { text: "Alphabetical", value: "name" },
+        { text: "Creation date", value: "created" },
+        { text: "Distance", value: "distance" },
+        { text: "Elevation gain", value: "elevation_gain" },
+    ];
+
     let searchDropdownItems: SearchItem[] = [];
 
     let citySearchQuery: string = "";
 
+    onMount(() => {
+        const storedDisplayOption = localStorage.getItem("displayOption")
+        if(storedDisplayOption) {
+            selectedDisplayOption = storedDisplayOption;
+        }
+    })
+
+    async function searchTrails() {
+        await trails_search(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":
@@ -58,13 +110,15 @@
                 filter.completed = undefined;
                 break;
         }
+
+        searchTrails();
     }
 
     async function searchCities(q: string) {
         if (q.length == 0) {
             filter.near.lat = undefined;
             filter.near.lon = undefined;
-            console.log(filter.near);
+            searchTrails();
 
             return;
         }
@@ -82,21 +136,50 @@
         citySearchQuery = item.text;
         filter.near.lat = item.value.lat;
         filter.near.lon = item.value.lon;
+
+        searchTrails();
+    }
+
+    function setSort() {
+        searchTrails();
+    }
+
+    function setSortOrder() {
+        if (filter.sortOrder === "+") {
+            filter.sortOrder = "-";
+        } else {
+            filter.sortOrder = "+";
+        }
+        const sortOrderButton = document.getElementById("sort-order-btn");
+        sortOrderButton?.classList.toggle("rotated");
+
+        searchTrails();
+    }
+
+    function setDisplayOption() {
+        localStorage.setItem("displayOption", selectedDisplayOption);       
     }
 </script>
 
-<main class="grid grid-cols-1 md:grid-cols-[300px_1fr] gap-8 max-w-7xl mx-6 md:mx-auto">
+<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 rounded-xl">
-        <TextField placeholder="Search..."></TextField>
+        <Search
+            bind:value={filter.q}
+            on:update={searchTrails}
+            placeholder="Search trails..."
+        ></Search>
         <hr class="my-4" />
         <p class="text-sm font-medium pb-4">Category</p>
-        {#each $categories as category}
+        {#each $categories as category, i}
             <div class="flex items-center mb-4">
                 <input
                     id="{category.name}-checkbox"
                     type="checkbox"
-                    value=""
+                    value={category.id}
                     class="w-4 h-4 text-primary bg-gray-100 border-gray-300 focus:ring-gray-400 focus:ring-2"
+                    on:change={() => setCategoryFilter(category)}
                 />
                 <label
                     for="{category.name}-checkbox"
@@ -110,23 +193,29 @@
         <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.distance}
+        <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.distance)}
+            {formatMeters(filter.near.radius)}
         </p>
         <hr class="my-4" />
         <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>
@@ -135,9 +224,11 @@
         <hr class="my-4" />
         <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>
@@ -152,11 +243,54 @@
             on:change={(e) => setCompletedFilter(e.detail)}
         ></RadioGroup>
     </div>
-    <div id="trails" class="flex items-start flex-wrap gap-8 py-8">
+    <div class="min-w-0">
-        {#each $trails as trail}
+        <div class="flex items-start gap-8 justify-end">
-            <a href="/trail/view/{trail.id}">
+            <div>
-                <TrailCard {trail}></TrailCard></a
+                <p class="text-sm text-gray-500 pb-2">Sort</p>
+                <div class="flex items-center gap-2">
+                    <Select
+                        bind:value={filter.sort}
+                        items={sortOptions}
+                        on:change={setSort}
+                    ></Select>
+                    <button
+                        id="sort-order-btn"
+                        class="rounded-full py-1 px-[10px] hover:bg-gray-100 focus:ring-4 ring-gray-200"
+                        on:click={() => setSortOrder()}
+                        ><i class="fa fa-arrow-up"></i></button
                     >
+                </div>
+            </div>
+            <div>
+                <p class="text-sm text-gray-500 pb-2">Display as</p>
+
+                <Select
+                    bind:value={selectedDisplayOption}
+                    items={displayOptions}
+                    on:change={() => setDisplayOption()}
+                ></Select>
+            </div>
+        </div>
+
+        <div id="trails" class="flex items-start flex-wrap gap-8 py-8 max-w-full">
+            {#each $trails as trail}
+                <a class="max-w-full" href="/trail/view/{trail.id}">
+                    {#if selectedDisplayOption === "cards"}
+                        <TrailCard {trail} mode="edit"></TrailCard>
+                    {:else}
+                        <TrailListItem {trail}></TrailListItem>
+                    {/if}
+                </a>
             {/each}
         </div>
+    </div>
 </main>
+
+<style>
+    #sort-order-btn {
+        transition: transform 0.5s ease;
+    }
+    :global(.rotated) {
+        transform: rotate(180deg);
+    }
+</style>