adds user management

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

@@ -3,6 +3,7 @@
     import Select from "$lib/components/base/select.svelte";
     import TextField from "$lib/components/base/text_field.svelte";
     import Textarea from "$lib/components/base/textarea.svelte";
+    import Toggle from "$lib/components/base/toggle.svelte";
     import PhotoCard from "$lib/components/photo_card.svelte";
     import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
     import SummitLogModal from "$lib/components/summit_log/summit_log_modal.svelte";
@@ -13,7 +14,7 @@
     import { Waypoint } from "$lib/models/waypoint";
     import { categories } from "$lib/stores/category_store";
     import { summitLog } from "$lib/stores/summit_log_store";
-    import { toast } from "$lib/stores/toast_store";
+    import { show_toast } from "$lib/stores/toast_store";
     import {
         trail,
         trails_create,
@@ -84,9 +85,19 @@
                     await trails_update($trail, submittedTrail, formData);
                 }
 
-                toast.set({type: "success", "icon": "check", "text": "Trail saved successfully!"})
+                show_toast({
+                    type: "success",
+                    icon: "check",
+                    text: "Trail saved successfully.",
+                });
             } catch (e) {
                 console.error(e);
+
+                show_toast({
+                    type: "error",
+                    icon: "close",
+                    text: "Error saving trail.",
+                });
             } finally {
                 loading = false;
             }
@@ -304,6 +315,7 @@
         e: CustomEvent<{ text: string; value: string }>,
     ) {
         if (e.detail.value === "edit") {
+            currentSummitLog.date = format(currentSummitLog.date, "yyyy-MM-dd");
             summitLog.set(currentSummitLog);
             openSummitLogModal();
         } else if (e.detail.value === "delete") {
@@ -375,12 +387,15 @@
             label="Describe your trail"
             bind:value={$form.description}
         ></Textarea>
-        <Select
-            name="category"
-            label="Category"
-            bind:value={$form.expand.category}
-            items={$categories.map((c) => ({ text: c.name, value: c }))}
-        ></Select>
+        {#if $form.expand.category}
+            <Select
+                name="category"
+                label="Category"
+                bind:value={$form.expand.category.id}
+                items={$categories.map((c) => ({ text: c.name, value: c.id }))}
+            ></Select>
+        {/if}
+        <Toggle name="public" label="Public" bind:value={$form.public}></Toggle>
         <hr />
         <h3 class="text-xl font-semibold">Waypoints</h3>
         <ul>

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

@@ -1,8 +1,14 @@
 <script lang="ts">
+    import { goto } from "$app/navigation";
+    import Dropdown from "$lib/components/base/dropdown.svelte";
     import SummitLogCard from "$lib/components/summit_log/summit_log_card.svelte";
     import Tabs from "$lib/components/tabs.svelte";
     import WaypointCard from "$lib/components/waypoint/waypoint_card.svelte";
-    import { trail } from "$lib/stores/trail_store";
+    import {
+        trail,
+        trails_delete,
+        trails_index,
+    } from "$lib/stores/trail_store";
     import { formatMeters, formatTimeHHMM } from "$lib/util/format_util";
     import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
     import type { Icon, Marker } from "leaflet";
@@ -12,6 +18,7 @@
     import PhotoSwipeLightbox from "photoswipe/lightbox";
     import "photoswipe/style.css";
     import { onMount } from "svelte";
+    import { fade } from "svelte/transition";
 
     const tabs = ["Description", "Waypoints", "Photos", "Summit book"];
 
@@ -22,6 +29,11 @@
     let lightbox: PhotoSwipeLightbox;
     let lightboxDataSource: DataSource;
 
+    const dropdownItems = [
+        { text: "Edit", value: "edit" },
+        { text: "Delete", value: "delete" },
+    ];
+
     onMount(async () => {
         const L = (await import("leaflet")).default;
         await import("leaflet-gpx");
@@ -109,17 +121,23 @@
     function openGallery(idx: number) {
         lightbox?.loadAndOpen(idx, lightboxDataSource);
     }
+
+    async function handleDropdownClick(item: { text: string; value: any }) {
+        if (item.value == "edit") {
+            goto(`/trail/edit/${$trail.id}`);
+        } else if (item.value == "delete") {
+            await trails_delete($trail);
+            await trails_index();
+            goto(`/`);
+        }
+    }
 </script>
 
 <div
     class="trail-panel max-w-5xl mx-auto shadow-2xl rounded-3xl overflow-hidden"
 >
     <section class="relative h-80">
-        <img
-            class="w-full h-80"
-            src={$trail.thumbnail}
-            alt=""
-        />
+        <img class="w-full h-80" src={$trail.thumbnail} alt="" />
         <div
             class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
         ></div>
@@ -132,6 +150,13 @@
                 {$trail.location}
             </h3>
         </div>
+        <div class="absolute text-white bottom-8 right-8">
+            <Dropdown
+                size="2xl"
+                items={dropdownItems}
+                on:change={(e) => handleDropdownClick(e.detail)}
+            ></Dropdown>
+        </div>
     </section>
     <section
         class="grid grid-cols-2 sm:grid-cols-4 gap-y-4 justify-around py-8"
@@ -154,12 +179,14 @@
                 >{formatTimeHHMM($trail.duration)}</span
             >
         </div>
-        <div class="flex flex-col items-center">
-            <span>Category</span>
-            <span class="font-semibold text-lg"
-                >{$trail.expand.category.name}</span
-            >
-        </div>
+        {#if $trail.expand.category}
+            <div class="flex flex-col items-center">
+                <span>Category</span>
+                <span class="font-semibold text-lg"
+                    >{$trail.expand.category.name}</span
+                >
+            </div>
+        {/if}
     </section>
     {#if $trail.tags && $trail.tags.length > 0}
         <hr />
@@ -206,9 +233,11 @@
                     </div>
                 {/if}
                 {#if activeTab == 3}
-                    {#each $trail.expand.summit_logs ?? [] as log}
-                        <SummitLogCard {log}></SummitLogCard>
-                    {/each}
+                    <ul>
+                        {#each $trail.expand.summit_logs ?? [] as log}
+                            <li><SummitLogCard {log}></SummitLogCard></li>
+                        {/each}
+                    </ul>
                 {/if}
             </div>
             <div

web/src/routes/trail/view/[id]/+page.ts

@@ -2,5 +2,9 @@ import { trails_show } from "$lib/stores/trail_store";
 import type { Load } from "@sveltejs/kit";
 
 export const load: Load = async ({ params }) => {
-    await trails_show(params.id!, true)
+    try {
+        await trails_show(params.id!, true)
+    }catch(e) {
+        
+    }
 };