From 9ee47c13625295842b882aac681f87d06442e213 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Wed, 7 Jun 2023 20:10:10 +0200
Subject: [PATCH] Fulfill Mogges suggestions

Co-Authored-By: Mogge <moriz.wahl@gmx.de>
---
 .../DateTimeRange/DateTimeRange.vue           | 25 +++++++++++--------
 webapp/locales/de.json                        |  5 ++++
 webapp/locales/en.json                        |  5 ++++
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/webapp/components/DateTimeRange/DateTimeRange.vue b/webapp/components/DateTimeRange/DateTimeRange.vue
index 8d318709a..de9b442c5 100644
--- a/webapp/components/DateTimeRange/DateTimeRange.vue
+++ b/webapp/components/DateTimeRange/DateTimeRange.vue
@@ -8,11 +8,12 @@
       <div>
         <base-icon name="clock" data-test="calendar" />
         {{
-          getStartTimeString + (this.endDateAsDate && isSameDay ? '&mdash;' + getEndTimeString : '')
+          getStartTimeString +
+          (this.endDateAsDate && isSameDayLocal ? '&mdash;' + getEndTimeString : '')
         }}
       </div>
     </div>
-    <template v-if="!isSameDay">
+    <template v-if="!isSameDayLocal">
       &nbsp;&mdash;&nbsp;
       <div>
         <div>
@@ -61,27 +62,31 @@ export default {
     endDateAsDate() {
       return this.endDate ? new Date(this.endDate) : null
     },
-    isSameDay() {
+    isSameDayLocal() {
       return !this.endDateAsDate || isSameDay(this.endDateAsDate, this.startDateAsDate)
     },
-    isSameYear() {
+    isSameYearLocal() {
       return !this.endDateAsDate || isSameYear(this.endDateAsDate, this.startDateAsDate)
     },
     getStartDateString() {
-      let startDateFormat = 'dd.MM.yyyy'
-      if (!this.isSameDay && this.isSameYear) {
-        startDateFormat = 'dd.MM.'
+      let startDateFormat = this.$t('components.dateTimeRange.yearMonthDay')
+      if (!this.isSameDayLocal && this.isSameYearLocal) {
+        startDateFormat = this.$t('components.dateTimeRange.monthDay')
       }
       return format(this.startDateAsDate, startDateFormat)
     },
     getStartTimeString() {
-      return format(new Date(this.startDate), 'HH:mm')
+      return format(new Date(this.startDate), this.$t('components.dateTimeRange.hourMinute'))
     },
     getEndDateString() {
-      return this.endDate ? format(new Date(this.endDate), 'dd.MM.yyyy') : ''
+      return this.endDate
+        ? format(new Date(this.endDate), this.$t('components.dateTimeRange.yearMonthDay'))
+        : ''
     },
     getEndTimeString() {
-      return this.endDate ? format(new Date(this.endDate), 'HH:mm') : ''
+      return this.endDate
+        ? format(new Date(this.endDate), this.$t('components.dateTimeRange.hourMinute'))
+        : ''
     },
   },
 }
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 1ce7d2f61..68472840a 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -124,6 +124,11 @@
     "versus": "Versus"
   },
   "components": {
+    "dateTimeRange": {
+      "hourMinute": "HH:mm",
+      "monthDay": "dd.MM.",
+      "yearMonthDay": "dd.MM.yyyy"
+    },
     "password-reset": {
       "change-password": {
         "error": "Passwort Änderung fehlgeschlagen. Möglicherweise falscher Sicherheitscode?",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index f25cc8575..7d49c6e21 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -124,6 +124,11 @@
     "versus": "Versus"
   },
   "components": {
+    "dateTimeRange": {
+      "hourMinute": "HH:mm",
+      "monthDay": "MM/dd/",
+      "yearMonthDay": "MM/dd/yyyy"
+    },
     "password-reset": {
       "change-password": {
         "error": "Changing your password failed. Maybe the security code was not correct?",