From dd31dcaff7d6403443dcb22f1044af92c234e520 Mon Sep 17 00:00:00 2001
From: Martina Pippi <martina.pippi@vortech.nl>
Date: Mon, 4 Mar 2024 16:09:33 +0100
Subject: [PATCH] add datetimeFormats i18n

---
 src/components/general/DateTimeSlider.vue     |  5 ++-
 .../time-control/IntervalSelector.vue         | 21 +++++++----
 .../time-control/TimeControlMenu.vue          | 28 ++++++---------
 src/locales/en.json                           |  6 ++++
 src/locales/index.ts                          | 35 +++++++++++++++++++
 src/locales/nl.json                           |  6 ++++
 src/plugins/i18n.ts                           |  3 +-
 7 files changed, 79 insertions(+), 25 deletions(-)

diff --git a/src/components/general/DateTimeSlider.vue b/src/components/general/DateTimeSlider.vue
index 85cccd223..41b7c56a3 100644
--- a/src/components/general/DateTimeSlider.vue
+++ b/src/components/general/DateTimeSlider.vue
@@ -106,6 +106,7 @@ import { findDateIndex } from '@/lib/utils/findDateIndex'
 
 import VueSlider from 'vue-slider-component'
 import 'vue-slider-component/theme/antd.css'
+import { useI18n } from 'vue-i18n'
 
 interface Properties {
   selectedDate?: Date
@@ -139,6 +140,7 @@ const doFollowNow = ref(props.doFollowNow)
 let followNowIntervalTimer: ReturnType<typeof setInterval> | null = null
 
 const hideLabel = ref(true)
+const { d } = useI18n()
 
 onMounted(() => {
   if (props.doFollowNow) {
@@ -245,7 +247,8 @@ const playButtonColor = computed(() =>
 
 const dateString = computed(() =>
   props.dates[dateIndex.value]
-    ? props.dates[dateIndex.value].toLocaleString()
+    ? // ? props.dates[dateIndex.value].toLocaleString()
+      d(props.dates[dateIndex.value], 'datetimeslider')
     : '',
 )
 
diff --git a/src/components/time-control/IntervalSelector.vue b/src/components/time-control/IntervalSelector.vue
index 0a72753ae..6ce07cd1a 100644
--- a/src/components/time-control/IntervalSelector.vue
+++ b/src/components/time-control/IntervalSelector.vue
@@ -1,7 +1,10 @@
 <template>
   <v-list class="interval-list" density="compact">
-    <v-list-item :active="0 === selectedIndex" @click="onSelectInterval(0)">
-      Default
+    <v-list-item
+      :active="0 === selectedIndex"
+      @click="onSelectInterval(0)"
+      v-t="'time.default'"
+    >
       <template v-slot:append="{ isActive }">
         <v-icon v-show="isActive" small> mdi-check </v-icon>
       </template>
@@ -10,14 +13,14 @@
       :active="1 === selectedIndex"
       @click="onSelectInterval(1)"
       disabled
+      v-t="'time.custom'"
     >
-      Custom
       <template v-slot:append="{ isActive }">
         <v-icon v-show="isActive" small> mdi-check </v-icon>
       </template>
     </v-list-item>
     <v-divider></v-divider>
-    <v-list-subheader>Period presets</v-list-subheader>
+    <v-list-subheader v-t="'time.presets'"></v-list-subheader>
     <v-list-item
       v-for="(item, index) in props.items"
       :key="index"
@@ -35,6 +38,7 @@
 <script setup lang="ts">
 import { DateTime, Duration } from 'luxon'
 import { onBeforeMount, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface Props {
   modelValue: string
@@ -52,6 +56,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['update:modelValue'])
 const selectedIndex = ref(0)
+const { locale } = useI18n()
 
 onBeforeMount(() => {
   updateIndex(props.modelValue)
@@ -66,12 +71,16 @@ const intervalToLocaleString = (interval: string) => {
     const endDateTime = DateTime.fromJSDate(props.now).plus(
       Duration.fromISO(parts[1]),
     )
-    return startDateTime.toRelative() + ' / ' + endDateTime.toRelative()
+    return (
+      startDateTime.setLocale(locale.value).toRelative() +
+      ' / ' +
+      endDateTime.setLocale(locale.value).toRelative()
+    )
   } else {
     const startDateTime = DateTime.fromJSDate(props.now).plus(
       Duration.fromISO(parts[0]),
     )
-    return startDateTime.toRelative()
+    return startDateTime.setLocale(locale.value).toRelative()
   }
 }
 
diff --git a/src/components/time-control/TimeControlMenu.vue b/src/components/time-control/TimeControlMenu.vue
index 851286eb7..a5f6467aa 100644
--- a/src/components/time-control/TimeControlMenu.vue
+++ b/src/components/time-control/TimeControlMenu.vue
@@ -2,13 +2,7 @@
   <v-menu left bottom :close-on-content-click="false" class="menu">
     <template v-slot:activator="{ props, isActive }">
       <v-btn v-bind="props" variant="tonal" rounded>
-        {{
-          Intl.DateTimeFormat('nl', {
-            hour: '2-digit',
-            minute: '2-digit',
-            timeZoneName: 'short',
-          }).format(store.systemTime)
-        }}
+        {{ $d(store.systemTime, 'time') }}
         <v-icon>{{ isActive ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
       </v-btn>
     </template>
@@ -85,15 +79,9 @@
         </v-col>
       </v-row>
       <v-card-actions>
-        <span>Browser time:</span>
+        <span v-t="'time.browserTime'"></span>
         <v-chip small>
-          {{
-            Intl.DateTimeFormat('nl', {
-              hour: '2-digit',
-              minute: '2-digit',
-              timeZoneName: 'short',
-            }).format(store.systemTime)
-          }}
+          {{ $d(store.systemTime, 'time') }}
         </v-chip>
       </v-card-actions>
     </v-card>
@@ -106,7 +94,9 @@ import IntervalSelector from './IntervalSelector.vue'
 import { ref, computed } from 'vue'
 import { useSystemTimeStore } from '../../stores/systemTime'
 import { DateTime } from 'luxon'
+import { useI18n } from 'vue-i18n'
 
+const { locale } = useI18n()
 const store = useSystemTimeStore()
 const datesAreValid = ref(true)
 const DATE_FMT = 'yyyy-MM-dd'
@@ -142,7 +132,9 @@ const endDates = computed({
 
 const startDateString = computed({
   get() {
-    return DateTime.fromJSDate(dates.value[0]).toFormat(DATE_FMT)
+    return DateTime.fromJSDate(dates.value[0])
+      .setLocale(locale.value)
+      .toFormat(DATE_FMT)
   },
   set(newValue: string) {
     dates.value[0] = DateTime.fromFormat(newValue, DATE_FMT).toJSDate()
@@ -151,7 +143,9 @@ const startDateString = computed({
 
 const endDateString = computed({
   get() {
-    return DateTime.fromJSDate(dates.value[1]).toFormat(DATE_FMT)
+    return DateTime.fromJSDate(dates.value[1])
+      .setLocale(locale.value)
+      .toFormat(DATE_FMT)
   },
   set(newValue: string) {
     dates.value[1] = DateTime.fromFormat(newValue, DATE_FMT).toJSDate()
diff --git a/src/locales/en.json b/src/locales/en.json
index 6f99c73fa..0c5a621cd 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,5 +1,11 @@
 {
   "settings": {
     "all": "All settings ..."
+  },
+  "time": {
+    "browserTime": "Browser time:",
+    "default": "Default",
+    "custom": "Custom",
+    "presets": "Period presets"
   }
 }
diff --git a/src/locales/index.ts b/src/locales/index.ts
index 6815ab7ed..21402cf3c 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -1,6 +1,7 @@
 import { en, nl } from 'vuetify/locale'
 import enCustom from './en.json'
 import nlCustom from './nl.json'
+import type { DateTimeFormat } from '@intlify/core-base'
 
 export const messages = {
   en: {
@@ -16,3 +17,37 @@ export const messages = {
     ...nlCustom,
   },
 }
+
+export const datetimeFormats: Record<keyof typeof messages, DateTimeFormat> = {
+  en: {
+    time: {
+      hour: 'numeric',
+      minute: 'numeric',
+      timeZoneName: 'short',
+    },
+    datetimeslider: {
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+      hour12: true,
+    }
+  },
+  nl: {
+    time: {
+      hour: 'numeric',
+      minute: 'numeric',
+      timeZoneName: 'short',
+    },
+    datetimeslider: {
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      second: 'numeric',
+    }
+  },
+} as const
diff --git a/src/locales/nl.json b/src/locales/nl.json
index 4eba0bc0b..4c8237ddc 100644
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@@ -1,5 +1,11 @@
 {
   "settings": {
     "all": "Alle instellingen ..."
+  },
+  "time": {
+    "browserTime": "Browser tijd:",
+    "default": "Standaard",
+    "custom": "Aangepast",
+    "presets": "Voorinstellingen voor perioden"
   }
 }
diff --git a/src/plugins/i18n.ts b/src/plugins/i18n.ts
index 80d4c4b02..42fd309cf 100644
--- a/src/plugins/i18n.ts
+++ b/src/plugins/i18n.ts
@@ -1,10 +1,11 @@
 import { createI18n } from 'vue-i18n'
-import { messages } from '../locales/index.js'
+import { messages, datetimeFormats } from '../locales/index.js'
 
 export const i18n = createI18n<false>({
   legacy: false,
   locale: import.meta.env.VITE_I18N_LOCALE || 'en',
   fallbackLocale: import.meta.env.VITE_I18N_FALLBACK_LOCALE || 'en',
   messages,
+  datetimeFormats,
   globalInjection: true,
 })