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,10 +35,14 @@
 <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 "
+                class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 hover:bg-opacity-50 px-[14px] py-2 rounded-full"
             ></i>
         </slot>
     </button>

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>