From 10caa8b768c21b6996aabb51638b918c9e5f2959 Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Sun, 7 Apr 2024 20:38:21 +0200
Subject: [PATCH] adds time string to comment card

---
 .../components/comment/comment_card.svelte    | 17 +++++++++--
 .../components/trail/trail_info_panel.svelte  |  4 +--
 web/src/lib/i18n/locales/de.json              |  1 +
 web/src/lib/i18n/locales/en.json              |  6 ++++
 web/src/lib/i18n/locales/fr.json              |  1 +
 web/src/lib/i18n/locales/hu.json              |  1 +
 web/src/lib/i18n/locales/nl.json              |  1 +
 web/src/lib/i18n/locales/pl.json              |  1 +
 web/src/lib/i18n/locales/pt.json              |  1 +
 web/src/lib/i18n/locales/zh.json              |  1 +
 web/src/lib/models/comment.ts                 |  1 +
 web/src/lib/util/format_util.ts               | 28 +++++++++++++++++++
 12 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/comment/comment_card.svelte b/web/src/lib/components/comment/comment_card.svelte
index 00de1cf4..819acedf 100644
--- a/web/src/lib/components/comment/comment_card.svelte
+++ b/web/src/lib/components/comment/comment_card.svelte
@@ -4,6 +4,8 @@
     import { createEventDispatcher } from "svelte";
     import TextField from "../base/text_field.svelte";
     import { fade } from "svelte/transition";
+    import { formatTimeSince } from "$lib/util/format_util";
+    import { _ } from "svelte-i18n";
 
     export let comment: Comment;
     export let mode: "show" | "edit" = "show";
@@ -14,10 +16,12 @@
 
     let editedComment = comment.text;
 
-    const avatarSrc = comment.expand?.author.avatar
+    $: 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`;
 
+    $: timeSince = formatTimeSince(new Date(comment.created ?? ""));
+
     function deleteComment() {
         dispatch("delete", comment);
     }
@@ -38,8 +42,15 @@
     <img class="rounded-full w-10 aspect-square" src={avatarSrc} alt="avatar" />
     <div>
         <div class="flex items-center">
-            <p class="text-sm font-semibold">
-                {comment.expand?.author.username}
+            <p class="">
+                <span class="text-sm font-semibold"
+                    >{comment.expand?.author.username}</span
+                >
+                <span class="text-xs text-gray-500 ml-2"
+                    >{$_(`n-${timeSince.unit}-ago`, {
+                        values: { n: timeSince.value },
+                    })}</span
+                >
             </p>
             {#if mode == "edit"}
                 <button
diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte
index 4c46f255..3f0e4c5f 100644
--- a/web/src/lib/components/trail/trail_info_panel.svelte
+++ b/web/src/lib/components/trail/trail_info_panel.svelte
@@ -232,7 +232,7 @@
     </div>
     <section class="trail-info-panel-content px-8">
         <div
-            class="grid grid-cols-1 mt-4 gap-8"
+            class="grid grid-cols-1 my-4 gap-8"
             class:md:grid-cols-[1fr_18rem]={mode == "overview"}
         >
             {#if activeTab == 0}
@@ -310,7 +310,7 @@
                             >
                         </div>
                     {/if}
-                    <ul>
+                    <ul class="space-y-4">
                         {#each trail.expand.comments_via_trail ?? [] as comment}
                             <li>
                                 <CommentCard
diff --git a/web/src/lib/i18n/locales/de.json b/web/src/lib/i18n/locales/de.json
index 58662d37..597a36d9 100644
--- a/web/src/lib/i18n/locales/de.json
+++ b/web/src/lib/i18n/locales/de.json
@@ -83,6 +83,7 @@
   "metric": "Metrisch",
   "moderate": "Mittel",
   "must-be-at-least-n-characters-long": "Muss mindestens {n} Zeichen lang sein",
+  "n-years-ago": "",
   "name": "Name",
   "near": "Nahe",
   "new-list": "Neue Liste",
diff --git a/web/src/lib/i18n/locales/en.json b/web/src/lib/i18n/locales/en.json
index d975b4b7..1a1721cb 100644
--- a/web/src/lib/i18n/locales/en.json
+++ b/web/src/lib/i18n/locales/en.json
@@ -83,6 +83,12 @@
   "metric": "Metric",
   "moderate": "Moderate",
   "must-be-at-least-n-characters-long": "Must be at least {n} characters long",
+  "n-years-ago": "{n} years ago",
+  "n-months-ago": "{n} months ago",
+  "n-days-ago": "{n} days ago",
+  "n-hours-ago": "{n} hours ago",
+  "n-minutes-ago": "{n} minutes ago",
+  "n-seconds-ago": "{n} seconds ago",
   "name": "Name",
   "near": "Near",
   "new-list": "New List",
diff --git a/web/src/lib/i18n/locales/fr.json b/web/src/lib/i18n/locales/fr.json
index 7ba55c10..ebb95288 100644
--- a/web/src/lib/i18n/locales/fr.json
+++ b/web/src/lib/i18n/locales/fr.json
@@ -83,6 +83,7 @@
   "metric": "Métrique",
   "moderate": "Modérer",
   "must-be-at-least-n-characters-long": "Doit être composé d'au moins {n} caractères",
+  "n-years-ago": "",
   "name": "Nom",
   "near": "Proche",
   "new-list": "Nouvelle liste",
diff --git a/web/src/lib/i18n/locales/hu.json b/web/src/lib/i18n/locales/hu.json
index 9531bfd2..65bac44f 100644
--- a/web/src/lib/i18n/locales/hu.json
+++ b/web/src/lib/i18n/locales/hu.json
@@ -83,6 +83,7 @@
   "metric": "Metrikus",
   "moderate": "Mérsékelt",
   "must-be-at-least-n-characters-long": "Legalább {n} karakter hosszúnak kell lennie",
+  "n-years-ago": "",
   "name": "Név",
   "near": "Közelben",
   "new-list": "Új lista",
diff --git a/web/src/lib/i18n/locales/nl.json b/web/src/lib/i18n/locales/nl.json
index 6c12b787..3ad2774a 100644
--- a/web/src/lib/i18n/locales/nl.json
+++ b/web/src/lib/i18n/locales/nl.json
@@ -83,6 +83,7 @@
   "metric": "Metrisch",
   "moderate": "Gemiddeld",
   "must-be-at-least-n-characters-long": "Minimaal {n} tekens",
+  "n-years-ago": "",
   "name": "Naam",
   "near": "Nabij",
   "new-list": "Nieuwe lijst",
diff --git a/web/src/lib/i18n/locales/pl.json b/web/src/lib/i18n/locales/pl.json
index ac89f8ca..a51c8f23 100644
--- a/web/src/lib/i18n/locales/pl.json
+++ b/web/src/lib/i18n/locales/pl.json
@@ -83,6 +83,7 @@
   "metric": "Metryczne",
   "moderate": "Średnia",
   "must-be-at-least-n-characters-long": "Długość musi wynosić przynajmniej {n} znaków",
+  "n-years-ago": "",
   "name": "Nazwa",
   "near": "Blisko",
   "new-list": "Nowa Lista",
diff --git a/web/src/lib/i18n/locales/pt.json b/web/src/lib/i18n/locales/pt.json
index a63657db..6bf44290 100644
--- a/web/src/lib/i18n/locales/pt.json
+++ b/web/src/lib/i18n/locales/pt.json
@@ -83,6 +83,7 @@
   "metric": "Métrica",
   "moderate": "Moderado",
   "must-be-at-least-n-characters-long": "Deve ter pelo menos {n} caracteres",
+  "n-years-ago": "",
   "name": "Nome",
   "near": "Próximo",
   "new-list": "Nova lista",
diff --git a/web/src/lib/i18n/locales/zh.json b/web/src/lib/i18n/locales/zh.json
index c8939c51..f95422f7 100644
--- a/web/src/lib/i18n/locales/zh.json
+++ b/web/src/lib/i18n/locales/zh.json
@@ -83,6 +83,7 @@
   "metric": "公制",
   "moderate": "中等",
   "must-be-at-least-n-characters-long": "长度至少 {n} 字符",
+  "n-years-ago": "",
   "name": "名称",
   "near": "附近",
   "new-list": "新列表",
diff --git a/web/src/lib/models/comment.ts b/web/src/lib/models/comment.ts
index 80fb5efc..89ebd391 100644
--- a/web/src/lib/models/comment.ts
+++ b/web/src/lib/models/comment.ts
@@ -6,6 +6,7 @@ export class Comment {
     rating: number;
     author: string;
     trail: string;
+    created?: string;
     expand?: {
         author: User
     }
diff --git a/web/src/lib/util/format_util.ts b/web/src/lib/util/format_util.ts
index d531f883..93fc190b 100644
--- a/web/src/lib/util/format_util.ts
+++ b/web/src/lib/util/format_util.ts
@@ -48,3 +48,31 @@ export function formatElevation(meters?: number) {
         return `${Math.round(feet)} ft`;
     }
 }
+
+export function formatTimeSince(date: Date) {
+
+    var seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+
+    var interval = seconds / 31536000;
+
+    if (interval > 1) {
+        return { unit: "years", value: Math.floor(interval) };
+    }
+    interval = seconds / 2592000;
+    if (interval > 1) {
+        return { unit: "months", value: Math.floor(interval) };
+    }
+    interval = seconds / 86400;
+    if (interval > 1) {
+        return { unit: "days", value: Math.floor(interval) };
+    }
+    interval = seconds / 3600;
+    if (interval > 1) {
+        return { unit: "hours", value: Math.floor(interval) };
+    }
+    interval = seconds / 60;
+    if (interval > 1) {
+        return { unit: "minutes", value: Math.floor(interval) };
+    }
+    return { unit: "seconds", value: Math.floor(interval) };
+}
\ No newline at end of file