From ef8c3a3d4267e7a62a634792c461e0f7c913719b Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Sat, 31 Dec 2022 15:29:05 +0100
Subject: [PATCH] webapp: Apply correct datetime format based on current locale
 in HomeView

---
 webapp/src/locales/index.ts   | 39 ++++++++++++++++++++++++++++++++++-
 webapp/src/main.ts            |  5 +++--
 webapp/src/views/HomeView.vue |  3 +--
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/webapp/src/locales/index.ts b/webapp/src/locales/index.ts
index e8fa6cc..cf15b27 100644
--- a/webapp/src/locales/index.ts
+++ b/webapp/src/locales/index.ts
@@ -1,3 +1,4 @@
+import type { I18nOptions } from "vue-i18n";
 import en from './en.json'
 import de from './de.json'
 import fr from './fr.json'
@@ -14,10 +15,46 @@ export const LOCALES = [
     { value: Locales.FR, caption: 'Français' },
 ]
 
-export const messages = {
+export const messages: I18nOptions["messages"] = {
     [Locales.EN]: en,
     [Locales.DE]: de,
     [Locales.FR]: fr,
 };
 
+export const dateTimeFormats: I18nOptions["datetimeFormats"] = {
+    [Locales.EN]: {
+        'datetime': {
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour12: false
+        }
+    },
+    [Locales.DE]: {
+        'datetime': {
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour12: false
+        }
+    },
+    [Locales.FR]: {
+        'datetime': {
+            hour: 'numeric',
+            minute: 'numeric',
+            second: 'numeric',
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour12: false
+        }
+    }
+};
+
 export const defaultLocale = Locales.EN;
\ No newline at end of file
diff --git a/webapp/src/main.ts b/webapp/src/main.ts
index abc1958..c4e6c3a 100644
--- a/webapp/src/main.ts
+++ b/webapp/src/main.ts
@@ -2,7 +2,7 @@ import mitt from 'mitt'
 import { createApp } from 'vue'
 import { createI18n } from 'vue-i18n'
 import App from './App.vue'
-import { defaultLocale, messages } from './locales'
+import { defaultLocale, messages, dateTimeFormats } from './locales'
 import { tooltip } from './plugins/bootstrap'
 import router from './router'
 
@@ -21,7 +21,8 @@ const i18n = createI18n({
     globalInjection: true,
     locale: navigator.language.split('-')[0],
     fallbackLocale: defaultLocale,
-    messages
+    messages,
+    datetimeFormats: dateTimeFormats,
 })
 
 app.use(router)
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
index d9276cc..398ee1a 100644
--- a/webapp/src/views/HomeView.vue
+++ b/webapp/src/views/HomeView.vue
@@ -662,9 +662,8 @@ export default defineComponent({
                 )
         },
         calculateAbsoluteTime(lastTime: number): string {
-            const userLocale = navigator.language;
             const date = new Date(Date.now() - lastTime * 1000);
-            return date.toLocaleString(userLocale)
+            return this.$d(date, 'datetime');
         }
     },
 });