adds difficulty display

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.

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

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(

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;
     }

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">
+                    <div class="flex flex-wrap gap-x-8 gap-y-2  mt-4 mr-8">
-                        <i class="fa fa-location-dot mr-3"></i>
+                        <h3 class="text-lg">
-                        {$trail.location}
+                            <i class="fa fa-location-dot mr-3"></i>
-                    </h3>
+                            {$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>

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
-            <Select
+            name="category"
-                name="category"
+            label={$_("category")}
-                label={$_("category")}
+            bind:value={$form.category}
-                bind:value={$form.category}
+            items={$categories.map((c) => ({ text: c.name, value: c.id }))}
-                items={$categories.map((c) => ({ text: c.name, value: c.id }))}
+        ></Select>
-            ></Select>
-        {/if}
         <Toggle name="public" label={$_("public")} bind:value={$form.public}
         ></Toggle>
         <hr class="border-separator" />

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
+        <img class="w-full h-80" src={thumbnail} alt="" />
-            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">
+                <div class="flex flex-wrap gap-x-8 gap-y-2  mt-4 mr-8">
-                    <i class="fa fa-location-dot mr-3"></i>
+                    <h3 class="text-lg">
-                    {$trail.location}
+                        <i class="fa fa-location-dot mr-3"></i>
-                </h3>
+                        {$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>

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

@@ -12,6 +12,7 @@ export const load: Load = async ({ params, fetch }) => {
                 message: 'Not found'
             });
         }
+        console.log(e);
         
     }
     await lists_index(undefined, fetch);