webapp: Apply correct datetime format based on current locale in HomeView

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;

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)

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');
         }
     },
 });