From 2cc01744da1d607b61995f279d213a78148426de Mon Sep 17 00:00:00 2001 From: Christian Beutel <> Date: Sat, 4 Jan 2025 17:51:19 +0100 Subject: [PATCH] fixes comment look and feel --- .../empty_states/empty_state_comment_dark.svg | 20 ++++++ .../empty_state_comment_light.svg | 20 ++++++ .../components/comment/comment_card.svelte | 2 +- .../empty_states/empty_state_comment.svelte | 19 +++++ .../components/trail/trail_info_panel.svelte | 70 +++++++++++++------ web/src/lib/i18n/locales/de.json | 5 +- web/src/lib/i18n/locales/en.json | 5 +- web/src/lib/i18n/locales/fr.json | 5 +- web/src/lib/i18n/locales/hu.json | 3 + web/src/lib/i18n/locales/it.json | 5 +- web/src/lib/i18n/locales/nl.json | 5 +- web/src/lib/i18n/locales/pl.json | 3 + web/src/lib/i18n/locales/pt.json | 3 + web/src/lib/i18n/locales/zh.json | 3 + web/src/lib/models/comment.ts | 1 + web/src/lib/util/format_util.ts | 10 ++- web/src/routes/settings/language/+page.svelte | 2 +- 17 files changed, 145 insertions(+), 36 deletions(-) create mode 100644 web/src/lib/assets/svgs/empty_states/empty_state_comment_dark.svg create mode 100644 web/src/lib/assets/svgs/empty_states/empty_state_comment_light.svg create mode 100644 web/src/lib/components/empty_states/empty_state_comment.svelte diff --git a/web/src/lib/assets/svgs/empty_states/empty_state_comment_dark.svg b/web/src/lib/assets/svgs/empty_states/empty_state_comment_dark.svg new file mode 100644 index 00000000..09a74417 --- /dev/null +++ b/web/src/lib/assets/svgs/empty_states/empty_state_comment_dark.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/lib/assets/svgs/empty_states/empty_state_comment_light.svg b/web/src/lib/assets/svgs/empty_states/empty_state_comment_light.svg new file mode 100644 index 00000000..c44c16f5 --- /dev/null +++ b/web/src/lib/assets/svgs/empty_states/empty_state_comment_light.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/lib/components/comment/comment_card.svelte b/web/src/lib/components/comment/comment_card.svelte index c93ec3fd..93bec1d5 100644 --- a/web/src/lib/components/comment/comment_card.svelte +++ b/web/src/lib/components/comment/comment_card.svelte @@ -74,7 +74,7 @@ {$_(`n-${timeSince.unit}-ago`, { values: { n: timeSince.value }, - })}

{#if mode == "edit"} diff --git a/web/src/lib/components/empty_states/empty_state_comment.svelte b/web/src/lib/components/empty_states/empty_state_comment.svelte new file mode 100644 index 00000000..1d5bbb79 --- /dev/null +++ b/web/src/lib/components/empty_states/empty_state_comment.svelte @@ -0,0 +1,19 @@ + + +
+ Empty State showing a wanderer going into the distance + +

{$_("no-comments-so-far")}...

+
diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte index db101416..b504536e 100644 --- a/web/src/lib/components/trail/trail_info_panel.svelte +++ b/web/src/lib/components/trail/trail_info_panel.svelte @@ -21,21 +21,24 @@ formatTimeHHMM, } from "$lib/util/format_util"; + import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg"; + import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg"; + import { pb } from "$lib/pocketbase"; + import { theme } from "$lib/stores/theme_store"; + import { show_toast } from "$lib/stores/toast_store"; + import * as M from "maplibre-gl"; import "photoswipe/style.css"; import { onMount } from "svelte"; import { _ } from "svelte-i18n"; import Button from "../base/button.svelte"; + import SkeletonNotificationCard from "../base/skeleton_notification_card.svelte"; import Textarea from "../base/textarea.svelte"; import CommentCard from "../comment/comment_card.svelte"; import PhotoGallery from "../photo_gallery.svelte"; import ShareInfo from "../share_info.svelte"; import SummitLogTable from "../summit_log/summit_log_table.svelte"; - import { pb } from "$lib/pocketbase"; - import * as M from "maplibre-gl"; import MapWithElevationMaplibre from "./map_with_elevation_maplibre.svelte"; - import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg"; - import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg"; - import { theme } from "$lib/stores/theme_store"; + import EmptyStateComment from "../empty_states/empty_state_comment.svelte"; export let trail: Trail; export let mode: "overview" | "map" | "list" = "map"; @@ -62,6 +65,8 @@ let openGallery: (idx?: number) => void; let newComment: Comment = new Comment("", 0, "", trail.id ?? ""); + + let commentsLoading: boolean = false; let commentCreateLoading: boolean = false; let commentDeleteLoading: boolean = false; @@ -90,7 +95,9 @@ } async function fetchComments() { + commentsLoading = true; await comments_index(trail); + commentsLoading = false; } async function createComment() { @@ -101,7 +108,8 @@ newComment.author = $currentUser.id; newComment.trail = trail.id; - comments_create(newComment).then((c) => { + try { + const c = await comments_create(newComment); newComment.text = ""; c.expand = { author: { ...$currentUser!, private: false }, @@ -109,9 +117,15 @@ const newCommentList = [c, ...$comments]; comments.set(newCommentList); - }); - - commentCreateLoading = false; + } catch (e) { + show_toast({ + icon: "close", + type: "error", + text: $_("error-posting-comment"), + }); + } finally { + commentCreateLoading = false; + } } async function editComment(data: { comment: Comment; text: string }) { @@ -360,24 +374,34 @@ on:click={createComment} loading={commentCreateLoading} secondary={true} - disabled={newComment.text.length == 0} - >CommentComment {/if} {/if} diff --git a/web/src/lib/i18n/locales/de.json b/web/src/lib/i18n/locales/de.json index f045475a..b11997d5 100644 --- a/web/src/lib/i18n/locales/de.json +++ b/web/src/lib/i18n/locales/de.json @@ -81,6 +81,7 @@ "edit-entry": "Eintrag bearbeiten", "edit-list": "Liste bearbeiten", "edit-waypoint": "Wegpunkt bearbeiten", + "edited": "", "elevation-gain": "Höhenunterschied (aufw.)", "elevation-loss": "Höhenunterschied (abw.)", "email": "Email", @@ -94,6 +95,7 @@ "error-during-login": "Fehler beim Login", "error-during-password-reset": "Email zum Zurücksetzen des Passworts konnte nicht versandt werden", "error-exporting-trail": "Fehler beim Exportieren des Trails", + "error-posting-comment": "", "error-printing-map": "Fehler beim Drucken der Karte", "error-reading-file": "Fehler beim Lesen der Datei", "error-saving-list": "Fehler beim Speichern der Liste", @@ -162,7 +164,7 @@ "n-hours-ago": "vor {n} Stunden", "n-minutes-ago": "vor {n} Minuten", "n-months-ago": "vor {n} Monaten", - "n-seconds-ago": "vor {n} Sekunden", + "n-seconds-ago": "{n, plural, =0 {gerade eben} other {vor {n} Sekunden}}", "n-years-ago": "vor {n} Jahren", "name": "Name", "near": "Nahe", @@ -173,6 +175,7 @@ "new-password-text": "Neues Passwort setzen", "new-trail": "Neue Route", "no-account": "Du hast noch kein Konto?", + "no-comments-so-far": "", "no-data": "Keine Daten", "no-grid": "Kein Gitter", "no-notifications": "", diff --git a/web/src/lib/i18n/locales/en.json b/web/src/lib/i18n/locales/en.json index a57c2485..f20df488 100644 --- a/web/src/lib/i18n/locales/en.json +++ b/web/src/lib/i18n/locales/en.json @@ -81,6 +81,7 @@ "edit-entry": "Edit Entry", "edit-list": "Edit List", "edit-waypoint": "Edit Waypoint", + "edited": "edited", "elevation-gain": "Elevation Gain", "elevation-loss": "Elevation Loss", "email": "Email", @@ -94,6 +95,7 @@ "error-during-login": "Error during login", "error-during-password-reset": "Unable to send password reset email", "error-exporting-trail": "Error exporting trail", + "error-posting-comment": "Error posting comment", "error-printing-map": "Error printing map", "error-reading-file": "Error reading file", "error-saving-list": "Error saving list", @@ -162,7 +164,7 @@ "n-hours-ago": "{n} hours ago", "n-minutes-ago": "{n} minutes ago", "n-months-ago": "{n} months ago", - "n-seconds-ago": "{n} seconds ago", + "n-seconds-ago": "{n, plural, =0 {just now} other {{n} seconds ago}}", "n-years-ago": "{n} years ago", "name": "Name", "near": "Near", @@ -173,6 +175,7 @@ "new-password-text": "Set a new password", "new-trail": "New Trail", "no-account": "Don't have an account?", + "no-comments-so-far": "No comments so far", "no-data": "No data", "no-grid": "No Grid", "no-notifications": "No notifications", diff --git a/web/src/lib/i18n/locales/fr.json b/web/src/lib/i18n/locales/fr.json index 7f22b6fa..474d5670 100644 --- a/web/src/lib/i18n/locales/fr.json +++ b/web/src/lib/i18n/locales/fr.json @@ -81,6 +81,7 @@ "edit-entry": "Éditer une entrée", "edit-list": "Éditer la liste", "edit-waypoint": "Éditer le point de repère", + "edited": "", "elevation-gain": "Gain d'altitude", "elevation-loss": "", "email": "Email", @@ -94,6 +95,7 @@ "error-during-login": "Erreur durant la connexion", "error-during-password-reset": "", "error-exporting-trail": "", + "error-posting-comment": "", "error-printing-map": "Erreur d'impression de la carte", "error-reading-file": "Erreur de lecture du fichier", "error-saving-list": "", @@ -162,7 +164,7 @@ "n-hours-ago": "il y a {n} heures", "n-minutes-ago": "il y a {n} minutes", "n-months-ago": "il y a {n} mois", - "n-seconds-ago": "il y a {n} secondes", + "n-seconds-ago": "{n, plural, =0 {à l'instant} other {il y a {n} secondes}}", "n-years-ago": "il y a {n} ans", "name": "Nom", "near": "Proche", @@ -173,6 +175,7 @@ "new-password-text": "", "new-trail": "Nouvel itinéraire", "no-account": "Pas encore de compte ?", + "no-comments-so-far": "", "no-data": "", "no-grid": "", "no-notifications": "", diff --git a/web/src/lib/i18n/locales/hu.json b/web/src/lib/i18n/locales/hu.json index f1796405..27c2b993 100644 --- a/web/src/lib/i18n/locales/hu.json +++ b/web/src/lib/i18n/locales/hu.json @@ -81,6 +81,7 @@ "edit-entry": "Bejegyzés szerkesztése", "edit-list": "Lista szerkesztése", "edit-waypoint": "Útvonalpont szerkesztése", + "edited": "", "elevation-gain": "Magasságnövekedés", "elevation-loss": "", "email": "Email", @@ -94,6 +95,7 @@ "error-during-login": "Hiba bejelentkezés közben", "error-during-password-reset": "", "error-exporting-trail": "", + "error-posting-comment": "", "error-printing-map": "", "error-reading-file": "Hiba a fájl olvasása közben", "error-saving-list": "", @@ -173,6 +175,7 @@ "new-password-text": "", "new-trail": "Új útvonal", "no-account": "Nincs még fiókja?", + "no-comments-so-far": "", "no-data": "", "no-grid": "", "no-notifications": "", diff --git a/web/src/lib/i18n/locales/it.json b/web/src/lib/i18n/locales/it.json index 38d0e2c9..bf5cb894 100644 --- a/web/src/lib/i18n/locales/it.json +++ b/web/src/lib/i18n/locales/it.json @@ -81,6 +81,7 @@ "edit-entry": "Modifica voce", "edit-list": "Modifica lista", "edit-waypoint": "Modifica waypoint", + "edited": "", "elevation-gain": "Guadagno di quota", "elevation-loss": "", "email": "Email", @@ -94,6 +95,7 @@ "error-during-login": "Errore durante il login", "error-during-password-reset": "", "error-exporting-trail": "Errore durante l'esportazione del percorso", + "error-posting-comment": "", "error-printing-map": "Errore durante la stampa della mappa", "error-reading-file": "Errore durante la lettura del file", "error-saving-list": "", @@ -162,7 +164,7 @@ "n-hours-ago": "{n} ore fa", "n-minutes-ago": "{n} minuti fa", "n-months-ago": "{n} mesi fa", - "n-seconds-ago": "{n} secondi fa", + "n-seconds-ago": "{n, plural, =0 {solo ora} other {{n} secondi fa}}", "n-years-ago": "{n} anni fa", "name": "Nome", "near": "Vicino", @@ -173,6 +175,7 @@ "new-password-text": "", "new-trail": "Nuovo percorso", "no-account": "Non hai ancora un account?", + "no-comments-so-far": "", "no-data": "", "no-grid": "", "no-notifications": "", diff --git a/web/src/lib/i18n/locales/nl.json b/web/src/lib/i18n/locales/nl.json index d322d802..ff7cf49a 100644 --- a/web/src/lib/i18n/locales/nl.json +++ b/web/src/lib/i18n/locales/nl.json @@ -81,6 +81,7 @@ "edit-entry": "Item bewerken", "edit-list": "Lijst aanpassen", "edit-waypoint": "Routepunt aanpassen", + "edited": "", "elevation-gain": "Hoogteverschil", "elevation-loss": "", "email": "E-mail", @@ -94,6 +95,7 @@ "error-during-login": "Het inloggen is mislukt", "error-during-password-reset": "", "error-exporting-trail": "", + "error-posting-comment": "", "error-printing-map": "Fout bij afdrukken van kaart", "error-reading-file": "Het bestand kan niet worden ingelezen", "error-saving-list": "", @@ -162,7 +164,7 @@ "n-hours-ago": "{n} uuren geleden", "n-minutes-ago": "{n} minuten geleden", "n-months-ago": "{n} maanden geleden", - "n-seconds-ago": "{n} seconden geleden", + "n-seconds-ago": "{n, plural, =0 {zojuist} other {{n} seconden geleden}}", "n-years-ago": "{n} jaren geleden", "name": "Naam", "near": "Nabij", @@ -173,6 +175,7 @@ "new-password-text": "", "new-trail": "Nieuwe wandelroute", "no-account": "Heb je nog geen account?", + "no-comments-so-far": "", "no-data": "", "no-grid": "", "no-notifications": "", diff --git a/web/src/lib/i18n/locales/pl.json b/web/src/lib/i18n/locales/pl.json index 0958a8a8..ac3cb975 100644 --- a/web/src/lib/i18n/locales/pl.json +++ b/web/src/lib/i18n/locales/pl.json @@ -81,6 +81,7 @@ "edit-entry": "Edytuj pozycję", "edit-list": "Edytuj Listę", "edit-waypoint": "Edytuj Punkt", + "edited": "", "elevation-gain": "Wzrost Wysokości", "elevation-loss": "", "email": "Email", @@ -94,6 +95,7 @@ "error-during-login": "Błąd podczas logowania", "error-during-password-reset": "", "error-exporting-trail": "", + "error-posting-comment": "", "error-printing-map": "", "error-reading-file": "Błąd wczytywania pliku", "error-saving-list": "", @@ -173,6 +175,7 @@ "new-password-text": "", "new-trail": "Nowa ścieżka", "no-account": "Nie masz konta?", + "no-comments-so-far": "", "no-data": "", "no-grid": "", "no-notifications": "", diff --git a/web/src/lib/i18n/locales/pt.json b/web/src/lib/i18n/locales/pt.json index 8c672640..8223f0cd 100644 --- a/web/src/lib/i18n/locales/pt.json +++ b/web/src/lib/i18n/locales/pt.json @@ -81,6 +81,7 @@ "edit-entry": "Editar entrada", "edit-list": "Editar lista", "edit-waypoint": "Editar ponto de passagem", + "edited": "", "elevation-gain": "Ganho de elevação", "elevation-loss": "", "email": "Email", @@ -94,6 +95,7 @@ "error-during-login": "Erro durante o login", "error-during-password-reset": "", "error-exporting-trail": "", + "error-posting-comment": "", "error-printing-map": "", "error-reading-file": "Erro ao ler o arquivo", "error-saving-list": "", @@ -173,6 +175,7 @@ "new-password-text": "", "new-trail": "Nova trilha", "no-account": "Não tem uma conta?", + "no-comments-so-far": "", "no-data": "", "no-grid": "", "no-notifications": "", diff --git a/web/src/lib/i18n/locales/zh.json b/web/src/lib/i18n/locales/zh.json index 978f86ad..068b324f 100644 --- a/web/src/lib/i18n/locales/zh.json +++ b/web/src/lib/i18n/locales/zh.json @@ -81,6 +81,7 @@ "edit-entry": "编辑日程", "edit-list": "编辑列表", "edit-waypoint": "编辑坐标", + "edited": "", "elevation-gain": "上升海拔", "elevation-loss": "", "email": "电子邮箱", @@ -94,6 +95,7 @@ "error-during-login": "登录错误", "error-during-password-reset": "", "error-exporting-trail": "", + "error-posting-comment": "", "error-printing-map": "", "error-reading-file": "读取文件错误", "error-saving-list": "", @@ -173,6 +175,7 @@ "new-password-text": "", "new-trail": "创建新路线", "no-account": "还未注册？", + "no-comments-so-far": "", "no-data": "", "no-grid": "", "no-notifications": "", diff --git a/web/src/lib/models/comment.ts b/web/src/lib/models/comment.ts index 6affa704..8821f716 100644 --- a/web/src/lib/models/comment.ts +++ b/web/src/lib/models/comment.ts @@ -7,6 +7,7 @@ export class Comment { author: string; trail: string; created?: string; + updated?: string; expand?: { author: UserAnonymous } diff --git a/web/src/lib/util/format_util.ts b/web/src/lib/util/format_util.ts index 77bbc3ec..940b10f2 100644 --- a/web/src/lib/util/format_util.ts +++ b/web/src/lib/util/format_util.ts @@ -12,7 +12,7 @@ export function formatTimeHHMM(minutes?: number) { return (h < 10 ? "0" : "") + h.toString() + "h " + (Math.round(m) < 10 ? "0" : "") + Math.round(m).toString() + "m"; } -export function formatDistance(meters?: number) { +export function formatDistance(meters?: number) { if (meters === undefined) { return "-"; } @@ -66,11 +66,9 @@ export function formatSpeed(speed?: number) { } export function formatTimeSince(date: Date) { + const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000); - var seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000); - - var interval = seconds / 31536000; - + let interval = seconds / 31536000; if (interval > 1) { return { unit: "years", value: Math.floor(interval) }; } @@ -90,5 +88,5 @@ export function formatTimeSince(date: Date) { if (interval > 1) { return { unit: "minutes", value: Math.floor(interval) }; } - return { unit: "seconds", value: Math.floor(interval) }; + return { unit: "seconds", value: seconds }; } \ No newline at end of file diff --git a/web/src/routes/settings/language/+page.svelte b/web/src/routes/settings/language/+page.svelte index a0255800..279a3a2b 100644 --- a/web/src/routes/settings/language/+page.svelte +++ b/web/src/routes/settings/language/+page.svelte @@ -28,7 +28,7 @@ { text: $_("imperial"), value: "imperial" }, ]; - let selectedLanguage = "en"; + let selectedLanguage = settings.language ?? "en"; async function handleLanguageSelection( value: "en" | "de" | "fr" | "hu" | "nl" | "pl" | "pt",