adds trails page

web/src/routes/+page.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
+    import Search, {
+        type SearchItem,
+    } from "$lib/components/base/search.svelte";
     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 { summit_logs_delete } from "$lib/stores/summit_log_store";
     import {
         trails,
         trails_delete,
         trails_index,
     } from "$lib/stores/trail_store";
     import { currentUser } from "$lib/stores/user_store";
-    import { waypoints_delete } from "$lib/stores/waypoint_store";
+    import { country_codes } from "$lib/util/country_code_util";
+
+    let searchDropdownItems: SearchItem[] = [];
 
     async function handleDropdownClick(
         currentTrail: Trail,
@@ -24,24 +29,61 @@
             await trails_index();
         }
     }
+
+    async function search(q: string) {
+        const response = await ms.multiSearch({
+            queries: [
+                {
+                    indexUid: "trails",
+                    q: q,
+                    limit: 5,
+                },
+                {
+                    indexUid: "cities500",
+                    q: q,
+                    limit: 5,
+                },
+            ],
+        });
+
+        const trailItems = response.results[0].hits.map((t) => ({
+            text: t.name,
+            description: `Trail | ${t.location}`,
+            value: t.id,
+            icon: "route",
+        }));
+        const cityItems = response.results[1].hits.map((t) => ({
+            text: t.name,
+            description: `City | ${
+                country_codes[t["country code"] as keyof typeof country_codes]
+            }`,
+            value: t.id,
+            icon: "city",
+        }));
+
+        searchDropdownItems = [...trailItems, ...cityItems];
+    }
+
+    function handleSearchClick(item: SearchItem) {
+        if (item.icon == "route") {
+            goto(`/trail/view/${item.value}`);
+        }
+    }
 </script>
 
 <section class="hero flex justify-center items-center" style="height: 50vh">
-    <div class="relative text-gray-600  mx-4">
-        <span class="absolute inset-y-0 left-0 flex items-center pl-4">
-            <i class="fa fa-search text-2xl"></i>
-        </span>
-        <input
-            type="search"
-            name="q"
-            class="w-80 sm:w-96 md:w-[32rem] py-4 rounded-2xl pl-14 focus:outline-none text-xl text-primary  "
-            placeholder="Search trails..."
-            autocomplete="off"
-        />
-    </div>
+    <Search
+        on:update={(e) => search(e.detail)}
+        on:click={(e) => handleSearchClick(e.detail)}
+        large={true}
+        placeholder="Search trails..."
+        items={searchDropdownItems}
+    ></Search>
 </section>
 <section class="max-w-7xl mx-auto mt-8 px-8 xl:px-0">
-    <h2 class="text-5xl md:text-6xl font-bold text-primary">{$currentUser ? 'Your' : 'Explore'} trails</h2>
+    <h2 class="text-5xl md:text-6xl font-bold text-primary">
+        {$currentUser ? "Your" : "Explore"} trails
+    </h2>
     <div
         id="trails"
         class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 justify-items-center gap-8 py-8"
@@ -50,6 +92,7 @@
             <a href="/trail/view/{trail.id}">
                 <TrailCard
                     {trail}
+                    mode="edit"
                     on:change={(e) => handleDropdownClick(trail, e.detail)}
                 ></TrailCard></a
             >

web/src/routes/trail/edit/[id]/+page.svelte

@@ -194,11 +194,13 @@
         reader.onload = async function (e) {
             trail.set(new Trail(""));
             await addGPXLayer(e.target?.result as string);
-            console.log(await 
-                ms.index("cities500").search("", {
-                    filter: [`_geoRadius(${$form.lat}, ${$form.lon}, 100000000000)`],
-                }),
-            );
+            const closestCity = (await ms.index("cities500").search("", {
+                filter: [`_geoRadius(${$form.lat}, ${$form.lon}, 10000)`],
+                sort: [`_geoPoint(${$form.lat}, ${$form.lon}):asc`],
+                limit: 1,
+            })).hits[0];
+
+            $form.location = closestCity.name;
         };
     }
 

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

@@ -0,0 +1,162 @@
+<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 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 { ms } from "$lib/meilisearch";
+    import type { TrailFilter } from "$lib/models/trail";
+    import { categories } from "$lib/stores/category_store";
+    import { trails } from "$lib/stores/trail_store";
+    import { country_codes } from "$lib/util/country_code_util";
+    import { formatMeters } from "$lib/util/format_util";
+
+    $: maxDistance = Math.max(...$trails.map((t) => t.distance ?? 0));
+    $: maxElevationGain = Math.max(
+        ...$trails.map((t) => t.elevation_gain ?? 0),
+    );
+
+    const filter: TrailFilter = {
+        q: "",
+        category: [],
+        near: {
+            distance: 2000,
+        },
+        distanceMin: 0,
+        distanceMax: maxDistance,
+        eleavationGainMin: 0,
+        elevationGainMax: maxElevationGain,
+    };
+
+    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 = "";
+
+    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;
+        }
+    }
+
+    async function searchCities(q: string) {        
+        if (q.length == 0) {
+            filter.near.lat = undefined;
+            filter.near.lon = undefined;
+            console.log(filter.near);
+            
+            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;
+    }
+</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 rounded-xl">
+        <TextField placeholder="Search..."></TextField>
+        <hr class="my-4" />
+        <p class="text-sm font-medium pb-4">Category</p>
+        {#each $categories as category}
+            <div class="flex items-center mb-4">
+                <input
+                    id="{category.name}-checkbox"
+                    type="checkbox"
+                    value=""
+                    class="w-4 h-4 text-primary bg-gray-100 border-gray-300 focus:ring-gray-400 focus:ring-2"
+                />
+                <label
+                    for="{category.name}-checkbox"
+                    class="ms-2 text-sm text-gray-900 dark:text-gray-300"
+                    >{category.name}</label
+                >
+            </div>
+        {/each}
+        <hr class="my-4" />
+        <p class="text-sm font-medium pb-4">Near</p>
+        <div class="mb-8">
+            <Search
+                items={searchDropdownItems}
+                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>
+        <p>
+            <span class="text-gray-500 text-sm">Radius:</span>
+            {formatMeters(filter.near.distance)}
+        </p>
+        <hr class="my-4" />
+        <p class="text-sm font-medium pb-4">Distance</p>
+        <DoubleSlider
+            maxValue={maxDistance}
+            bind:currentMin={filter.distanceMin}
+            bind:currentMax={filter.distanceMax}
+        ></DoubleSlider>
+        <div class="flex justify-between">
+            <span>{formatMeters(filter.distanceMin)}</span>
+            <span>{formatMeters(filter.distanceMax)}</span>
+        </div>
+        <hr class="my-4" />
+        <p class="text-sm font-medium pb-4">Elevation Gain</p>
+        <DoubleSlider
+            maxValue={maxElevationGain}
+            bind:currentMin={filter.eleavationGainMin}
+            bind:currentMax={filter.elevationGainMax}
+        ></DoubleSlider>
+        <div class="flex justify-between">
+            <span>{formatMeters(filter.eleavationGainMin)}</span>
+            <span>{formatMeters(filter.elevationGainMax)}</span>
+        </div>
+        <hr class="my-4" />
+        <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>
+    <div id="trails" class="flex items-start flex-wrap gap-8 py-8">
+        {#each $trails as trail}
+            <a href="/trail/view/{trail.id}">
+                <TrailCard {trail}></TrailCard></a
+            >
+        {/each}
+    </div>
+</main>

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

@@ -0,0 +1,8 @@
+import { categories_index } from "$lib/stores/category_store";
+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 categories_index()
+};