From e6728ca097d25826e394dfb9f73182991c1c59ad Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Thu, 14 Mar 2024 20:04:43 +0100
Subject: [PATCH] adds difficulty display

---
 README.md                                     |  6 ++++-
 .../lib/components/trail/trail_card.svelte    | 10 ++++++++-
 .../components/trail/trail_list_item.svelte   | 13 ++++++++++-
 web/src/lib/stores/trail_store.ts             |  3 +++
 web/src/routes/map/trail/[id]/+page.svelte    | 14 ++++++++----
 web/src/routes/trail/edit/[id]/+page.svelte   | 15 +++++--------
 web/src/routes/trail/view/[id]/+page.svelte   | 22 ++++++++++---------
 web/src/routes/trail/view/[id]/+page.ts       |  3 ++-
 8 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index 94678e8a..a312e346 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,11 @@ You can now access the frontend at localhost:3000.
 
 > Note: if you are using wanderer in a production environment make sure to change the MEILI_MASTER_KEY.
 
-You can also run wanderer on bare-metal. Check out the documentation for a detailed how-to guide.
+You can also run wanderer on bare-metal. Check out the [documentation](https://github.com/Flomp/wanderer/wiki/Installation#from-source) for a detailed how-to guide.
+
+## Documentation
+
+Please check the [wiki](https://](https://github.com/Flomp/wanderer/wiki)) for the complete documentation.
 
 ## License
 This project is licensed under the AGPLv3 License. See the [LICENSE](LICENSE) file for the full license text.
diff --git a/web/src/lib/components/trail/trail_card.svelte b/web/src/lib/components/trail/trail_card.svelte
index fd61b334..152c4abe 100644
--- a/web/src/lib/components/trail/trail_card.svelte
+++ b/web/src/lib/components/trail/trail_card.svelte
@@ -6,6 +6,7 @@
         formatElevation,
         formatTimeHHMM,
     } from "$lib/util/format_util";
+    import { _ } from "svelte-i18n";
 
     export let trail: Trail;
 
@@ -26,7 +27,14 @@
     <div class="p-4">
         <div>
             <h4 class="font-semibold text-lg">{trail.name}</h4>
-            <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
+            {#if trail.location}
+                <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
+            {/if}
+            <h5>
+                <i class="fa fa-person-hiking mr-3"></i>{$_(
+                    trail.difficulty ?? "?",
+                )}
+            </h5>
         </div>
         <div class="flex mt-2 gap-4 text-sm text-gray-500 whitespace-nowrap">
             <span
diff --git a/web/src/lib/components/trail/trail_list_item.svelte b/web/src/lib/components/trail/trail_list_item.svelte
index 296e28e9..9a95bf9c 100644
--- a/web/src/lib/components/trail/trail_list_item.svelte
+++ b/web/src/lib/components/trail/trail_list_item.svelte
@@ -6,6 +6,7 @@
         formatElevation,
         formatTimeHHMM,
     } from "$lib/util/format_util";
+    import { _ } from "svelte-i18n";
 
     export let trail: Trail;
 
@@ -22,7 +23,17 @@
     </div>
     <div class="min-w-0 basis-full">
         <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 flex-wrap gap-x-8">
+            {#if trail.location}
+                <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
+            {/if}
+            <h5>
+                <i class="fa fa-person-hiking mr-3"></i>{$_(
+                    trail.difficulty ?? "?",
+                )}
+            </h5>
+        </div>
+
         <div class="flex mt-2 gap-4 text-sm text-gray-500">
             <span
                 ><i class="fa fa-left-right mr-2"></i>{formatDistance(
diff --git a/web/src/lib/stores/trail_store.ts b/web/src/lib/stores/trail_store.ts
index 5c287789..6a257e81 100644
--- a/web/src/lib/stores/trail_store.ts
+++ b/web/src/lib/stores/trail_store.ts
@@ -162,6 +162,9 @@ export async function trails_show(id: string, loadGPX?: boolean, f: (url: Reques
     }
 
     if (loadGPX) {
+        if(!response.expand) {
+            response.expand = {}
+        }
         const gpxData: string = await fetchGPX(response, f);
         response.expand.gpx_data = gpxData;
     }
diff --git a/web/src/routes/map/trail/[id]/+page.svelte b/web/src/routes/map/trail/[id]/+page.svelte
index 65b8b098..39fa3a74 100644
--- a/web/src/routes/map/trail/[id]/+page.svelte
+++ b/web/src/routes/map/trail/[id]/+page.svelte
@@ -100,10 +100,16 @@
                     <h4 class="text-4xl font-bold">
                         {$trail.name}
                     </h4>
-                    <h3 class="text-xl mt-4">
-                        <i class="fa fa-location-dot mr-3"></i>
-                        {$trail.location}
-                    </h3>
+                    <div class="flex flex-wrap gap-x-8 gap-y-2  mt-4 mr-8">
+                        <h3 class="text-lg">
+                            <i class="fa fa-location-dot mr-3"></i>
+                            {$trail.location}
+                        </h3>
+                        <h3 class="text-lg">
+                            <i class="fa fa-person-hiking mr-3"></i>
+                            {$_($trail.difficulty ?? "?")}
+                        </h3>
+                    </div>
                 </div>
                 {#if $currentUser && $currentUser.id == $trail.author}
                     <TrailDropdown trail={$trail} mode="map"></TrailDropdown>
diff --git a/web/src/routes/trail/edit/[id]/+page.svelte b/web/src/routes/trail/edit/[id]/+page.svelte
index 7032e4a6..a5ac8ee2 100644
--- a/web/src/routes/trail/edit/[id]/+page.svelte
+++ b/web/src/routes/trail/edit/[id]/+page.svelte
@@ -345,7 +345,6 @@
     function handlePhotoDelete(index: number) {
         if ($form.thumbnail == index) {
             $form.thumbnail = 0;
-            console.log("huere");
         }
 
         if (index >= $form.photos.length) {
@@ -479,14 +478,12 @@
                 { text: $_("difficult"), value: "difficult" },
             ]}
         ></Select>
-        {#if $form.expand.category}
-            <Select
-                name="category"
-                label={$_("category")}
-                bind:value={$form.category}
-                items={$categories.map((c) => ({ text: c.name, value: c.id }))}
-            ></Select>
-        {/if}
+        <Select
+            name="category"
+            label={$_("category")}
+            bind:value={$form.category}
+            items={$categories.map((c) => ({ text: c.name, value: c.id }))}
+        ></Select>
         <Toggle name="public" label={$_("public")} bind:value={$form.public}
         ></Toggle>
         <hr class="border-separator" />
diff --git a/web/src/routes/trail/view/[id]/+page.svelte b/web/src/routes/trail/view/[id]/+page.svelte
index 62b2bb15..855127a3 100644
--- a/web/src/routes/trail/view/[id]/+page.svelte
+++ b/web/src/routes/trail/view/[id]/+page.svelte
@@ -136,25 +136,27 @@
     class="trail-panel max-w-5xl mx-auto border border-input-border rounded-3xl overflow-hidden"
 >
     <section class="relative h-80">
-        <img
-            class="w-full h-80"
-            src={thumbnail}
-            alt=""
-        />
+        <img class="w-full h-80" src={thumbnail} alt="" />
         <div
             class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
         ></div>
         <div
-            class="flex absolute flex-wrap justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
+            class="flex absolute justify-between items-end w-full bottom-8 left-0 px-8 gap-y-4"
         >
             <div class="text-white">
                 <h4 class="text-4xl font-bold">
                     {$trail.name}
                 </h4>
-                <h3 class="text-xl mt-4">
-                    <i class="fa fa-location-dot mr-3"></i>
-                    {$trail.location}
-                </h3>
+                <div class="flex flex-wrap gap-x-8 gap-y-2  mt-4 mr-8">
+                    <h3 class="text-lg">
+                        <i class="fa fa-location-dot mr-3"></i>
+                        {$trail.location}
+                    </h3>
+                    <h3 class="text-lg">
+                        <i class="fa fa-person-hiking mr-3"></i>
+                        {$_($trail.difficulty ?? "?")}
+                    </h3>
+                </div>
             </div>
             {#if $currentUser && $currentUser.id == $trail.author}
                 <TrailDropdown trail={$trail} mode="overview"></TrailDropdown>
diff --git a/web/src/routes/trail/view/[id]/+page.ts b/web/src/routes/trail/view/[id]/+page.ts
index 5bcce1ec..b7aa33b1 100644
--- a/web/src/routes/trail/view/[id]/+page.ts
+++ b/web/src/routes/trail/view/[id]/+page.ts
@@ -12,7 +12,8 @@ export const load: Load = async ({ params, fetch }) => {
                 message: 'Not found'
             });
         }
-
+        console.log(e);
+        
     }
     await lists_index(undefined, fetch);
 };
\ No newline at end of file