add datetimeFormats i18n

Author: martinapippi

src/components/general/DateTimeSlider.vue

@@ -110,6 +110,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
@@ -145,6 +146,7 @@ const doFollowNow = ref(props.doFollowNow)
 let followNowIntervalTimer: ReturnType<typeof setInterval> | null = null
 
 const hideLabel = ref(true)
+const { d } = useI18n()
 
 onMounted(() => {
   if (props.doFollowNow) {
@@ -258,7 +260,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')
     : '',
 )
 

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()
   }
 }
 

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()

src/locales/en.json

@@ -1,5 +1,11 @@
 {
   "settings": {
     "all": "All settings ..."
+  },
+  "time": {
+    "browserTime": "Browser time:",
+    "default": "Default",
+    "custom": "Custom",
+    "presets": "Period presets"
   }
 }

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

src/locales/nl.json

@@ -1,5 +1,11 @@
 {
   "settings": {
     "all": "Alle instellingen ..."
+  },
+  "time": {
+    "browserTime": "Browser tijd:",
+    "default": "Standaard",
+    "custom": "Aangepast",
+    "presets": "Voorinstellingen voor perioden"
   }
 }

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