adds trail date field

web/src/lib/components/base/datepicker.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     export let name: string = "";
-    export let value: string | number | Date = "";
+    export let value: string | Date = "";
     export let label: string = "";
     export let error: string = "";
 </script>

web/src/lib/components/comment/comment_card.svelte

@@ -14,10 +14,9 @@
 
     let editedComment = comment.text;
 
-    const avatarSrc =
-        comment.expand && comment.expand.author
-            ? getFileURL(comment.expand?.author, comment.expand?.author.avatar)
-            : "https://api.dicebear.com/7.x/initials/svg?seed=comment&backgroundType=gradientLinear";
+    const avatarSrc = comment.expand?.author.avatar
+        ? getFileURL(comment.expand.author, comment.expand.author.avatar)
+        : `https://api.dicebear.com/7.x/initials/svg?seed=${comment.expand?.author.username ?? ""}&backgroundType=gradientLinear`;
 
     function deleteComment() {
         dispatch("delete", comment);
@@ -31,7 +30,11 @@
     }
 </script>
 
-<div class="flex gap-4 items-center" in:fade={{duration: 150}} out:fade={{duration: 150}}>
+<div
+    class="flex gap-4 items-center"
+    in:fade={{ duration: 150 }}
+    out:fade={{ duration: 150 }}
+>
     <img class="rounded-full w-10 aspect-square" src={avatarSrc} alt="avatar" />
     <div>
         <div class="flex items-center">

web/src/lib/components/trail/trail_card.svelte

@@ -27,6 +27,17 @@
     <div class="p-4">
         <div>
             <h4 class="font-semibold text-lg">{trail.name}</h4>
+            {#if trail.date}
+                <p class="text-xs text-gray-500 mb-3">
+                   {new Date(
+                        trail.date,
+                    ).toLocaleDateString(undefined, {
+                        month: "long",
+                        day: "2-digit",
+                        year: "numeric",
+                    })}
+                </p>
+            {/if}
             <div class="flex gap-x-4">
                 {#if trail.location}
                     <h5>
@@ -40,7 +51,7 @@
                 </h5>
             </div>
         </div>
-        <div class="flex mt-2 gap-4 text-sm text-gray-500 whitespace-nowrap">
+        <div class="flex mt-1 gap-4 text-sm text-gray-500 whitespace-nowrap">
             <span
                 ><i class="fa fa-left-right mr-2"></i>{formatDistance(
                     trail.distance,

web/src/lib/components/trail/trail_info_panel.svelte

@@ -41,7 +41,7 @@
         $_("waypoints"),
         $_("photos"),
         $_("summit-book"),
-        $_("comments"),
+        $_("comment", { values: { n: 2 } }),
     ];
 
     let map: Map;

web/src/lib/components/trail/trail_list_item.svelte

@@ -23,6 +23,15 @@
     </div>
     <div class="min-w-0 basis-full">
         <h4 class="font-semibold text-lg">{trail.name}</h4>
+        {#if trail.date}
+            <p class="text-xs text-gray-500 mb-3">
+                {new Date(trail.date).toLocaleDateString(undefined, {
+                    month: "long",
+                    day: "2-digit",
+                    year: "numeric",
+                })}
+            </p>
+        {/if}
         <div class="flex flex-wrap gap-x-8">
             {#if trail.location}
                 <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
@@ -34,7 +43,7 @@
             </h5>
         </div>
 
-        <div class="flex mt-2 gap-4 text-sm text-gray-500">
+        <div class="flex mt-1 gap-4 text-sm text-gray-500">
             <span
                 ><i class="fa fa-left-right mr-2"></i>{formatDistance(
                     trail.distance,

web/src/lib/i18n/locales/de.json

@@ -18,6 +18,7 @@
   "change": "Ändern",
   "changelog": "Changelog",
   "chinese": "Chinesisch (vereinfacht)",
+  "comment": "{n, Plural, =1 {Kommentar} other {Kommentare}}",
   "completed": "Abgeschlossen",
   "completion-status": "Abschlussstatus",
   "contribute": "Mitwirken",

web/src/lib/i18n/locales/en.json

@@ -18,6 +18,7 @@
   "change": "Change",
   "changelog": "Changelog",
   "chinese": "Chinese (simplified)",
+  "comment": "{n, plural, =1 {Comment} other {Comments}}",
   "completed": "Completed",
   "completion-status": "Completion Status",
   "contribute": "Contribute",

web/src/lib/i18n/locales/fr.json

@@ -18,6 +18,7 @@
   "change": "Changement",
   "changelog": "Journal des modifications",
   "chinese": "Chinois (simplifié)",
+  "comment": "{n, plural, =1 {Commentaire} other {Commentaires}}",
   "completed": "Compléter",
   "completion-status": "L'état d'achèvement",
   "contribute": "Contribuer",

web/src/lib/i18n/locales/hu.json

@@ -18,6 +18,7 @@
   "change": "Változás",
   "changelog": "Változás napló",
   "chinese": "Kínai (egyszerűsítve)",
+  "comment": "{n, plural, =1 {Megjegyzés} other {Megjegyzés}}",
   "completed": "Teljesítve",
   "completion-status": "Befejezés állapota",
   "contribute": "Hozzájárulás",

web/src/lib/i18n/locales/nl.json

@@ -18,6 +18,7 @@
   "change": "Aanpassen",
   "changelog": "Changelog",
   "chinese": "Versimpeld Chinees",
+  "comment": "{n, plural, =1 {Opmerking} other {Opmerkingen}}",
   "completed": "Voltooid",
   "completion-status": "Voltooiingsstatus",
   "contribute": "Bijdragen",

web/src/lib/i18n/locales/pl.json

@@ -18,6 +18,7 @@
   "change": "Zmień",
   "changelog": "Dziennik zmian",
   "chinese": "Uproszczony chiński",
+  "comment": "{n, plural, =1 {Komentarz} other {Komentarze}}",
   "completed": "Zakończono",
   "completion-status": "Stan ukończenia",
   "contribute": "Kontrybuuj",

web/src/lib/i18n/locales/pt.json

@@ -18,6 +18,7 @@
   "change": "Alterar",
   "changelog": "Registo de alterações",
   "chinese": "Chinês (simplificado)",
+  "comment": "{n, plural, =1 {Comentário} other {Comentários}}",
   "completed": "Completada",
   "completion-status": "Status de conclusão",
   "contribute": "Contribuir",

web/src/lib/i18n/locales/zh.json

@@ -18,7 +18,7 @@
   "change": "更换",
   "changelog": "变更日志",
   "chinese": "华人",
-  "comments": "",
+  "comment": "{n, plural, =1 {评论} other {评论}}",
   "completed": "已完成",
   "completion-status": "完成状态",
   "contribute": "贡献",

web/src/lib/models/trail.ts

@@ -7,6 +7,7 @@ class Trail {
     id?: string;
     name: string;
     location?: string;
+    date?: string;
     public: boolean;
     distance?: number;
     elevation_gain?: number;
@@ -36,6 +37,7 @@ class Trail {
         params?: {
             id?: string,
             location?: string,
+            date?: string,
             public?: boolean,
             distance?: number,
             elevation_gain?: number,
@@ -59,6 +61,7 @@ class Trail {
         this.id = params?.id;
         this.name = name;
         this.location = params?.location;
+        this.date = params?.date;
         this.public = params?.public ?? false
         this.distance = params?.distance;
         this.elevation_gain = params?.elevation_gain;

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

@@ -1,5 +1,6 @@
 <script lang="ts">
     import Button from "$lib/components/base/button.svelte";
+    import Datepicker from "$lib/components/base/datepicker.svelte";
     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";
@@ -262,6 +263,15 @@
                     $form.duration = Math.round(
                         e.target.get_total_time() / 1000 / 60,
                     );
+                    if ($form.duration) {
+                        $form.date = e.target
+                            .get_start_time()
+                            .toISOString()
+                            .substring(0, 10);
+                    } else {
+                        $form.date = new Date().toISOString().substring(0, 10);
+                    }
+
                     resolve();
                 })
                 .on("error", reject)
@@ -544,6 +554,7 @@
             error={$errors.location}
             bind:value={$form.location}
         ></TextField>
+        <Datepicker label="Date" bind:value={$form.date}></Datepicker>
         <Textarea
             name="description"
             label={$_("describe-your-trail")}