added i18n

package.json

@@ -17,6 +17,7 @@
     "test-ct": "playwright test -c playwright-ct.config.ts"
   },
   "dependencies": {
+    "@date-io/luxon": "^3.0.0",
     "@deltares/fews-pi-requests": "^1.1.3",
     "@deltares/fews-ssd-requests": "^1.0.1",
     "@deltares/fews-ssd-webcomponent": "^1.0.1",
@@ -41,13 +42,14 @@
     "oidc-client-ts": "^2.4.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persistedstate": "^3.2.1",
-    "terra-draw": "^0.0.1-alpha.58",
+    "terra-draw": "^0.0.1-alpha.68",
     "typescript-json-serializer": "^6.0.1",
     "vue": "^3.4.21",
+    "vue-i18n": "^9.9.1",
     "vue-maplibre-gl": "^3.1.3",
     "vue-router": "^4.3.0",
     "vue-slider-component": "^4.1.0-beta.7",
-    "vuetify": "^3.5.9"
+    "vuetify": "^3.6.9"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",
@@ -72,9 +74,9 @@
     "prettier": "3.2.5",
     "sonarqube-scanner": "^3.3.0",
     "typescript": "^5.4.2",
-    "vite": "^5.1.6",
+    "vite": "^5.2.13",
     "vite-plugin-vuetify": "^2.0.3",
-    "vitest": "^1.3.1",
+    "vitest": "^1.6.0",
     "vue-tsc": "^2.0.6"
   },
   "volta": {

src/App.vue

@@ -11,6 +11,8 @@
 
 <script setup lang="ts">
 import { computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import DefaultLayout from './layouts/DefaultLayout.vue'
 import EmptyLayout from './layouts/EmptyLayout.vue'
 
@@ -23,6 +25,10 @@ import { usePreferredDark } from '@vueuse/core'
 import { useDark, useToggle } from '@vueuse/core'
 
 import '@/assets/fews-flags.css'
+import { DateTimeFormatWithOverride } from './locales'
+import { Settings } from 'luxon'
+
+const { locale, getDateTimeFormat, setDateTimeFormat } = useI18n()
 
 const route = useRoute()
 const configStore = useConfigStore()
@@ -34,6 +40,7 @@ const toggleDark = useToggle(isDark)
 
 onMounted(() => {
   updateTheme()
+  updateDateTimeFormat()
 })
 
 const layoutComponent = computed(() => {
@@ -77,6 +84,31 @@ function updateTheme(theme?: string) {
   }
 }
 
+function updateDateTimeFormat() {
+  const currentLocale =
+    (userSettingsStore.get('ui.locale')?.value as string) ?? 'en'
+  const timeZoneSetting =
+    (userSettingsStore.get('ui.timeZone')?.value as string) ?? 'user'
+  let timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  if (timeZoneSetting !== 'user') {
+    Settings.defaultZone = timeZoneSetting
+    timeZone = timeZoneSetting
+  } else {
+    Settings.defaultZone = 'system'
+  }
+  // Reset locale to force rerender after dateTimeFormat
+  locale.value = ''
+  const dateTimeFormat = getDateTimeFormat(
+    currentLocale,
+  ) as DateTimeFormatWithOverride
+  for (const key in dateTimeFormat) {
+    if (dateTimeFormat[key].overrideTimeZone === false) continue
+    dateTimeFormat[key].timeZone = timeZone
+  }
+  setDateTimeFormat(currentLocale, dateTimeFormat)
+  locale.value = currentLocale
+}
+
 function setTheme(setDark: boolean): void {
   theme.global.name.value = setDark ? 'dark' : 'light'
   if (setDark !== isDark.value) {
@@ -91,6 +123,10 @@ userSettingsStore.$onAction(({ name, args }) => {
       case 'ui.theme':
         updateTheme(item.value as string)
         break
+      case 'ui.locale':
+      case 'ui.timeZone':
+        updateDateTimeFormat()
+        break
       default:
     }
   }

src/assets/DefaultUserSettings.json

@@ -65,6 +65,70 @@
     ],
     "group": "UI"
   },
+  {
+    "id": "ui.locale",
+    "type": "oneOfMultiple",
+    "label": "Locale",
+    "value": "en",
+    "items": [
+      {
+        "value": "en"
+      },
+      {
+        "value": "nl"
+      }
+    ],
+    "group": "UI"
+  },
+  {
+    "id": "ui.timeZone",
+    "type": "oneOfMultiple",
+    "label": "Time Zone",
+    "value": "user",
+    "items": [
+      {
+        "value": "user",
+        "label": "System"
+      },
+      {
+        "value": "Etc/GMT+12",
+        "label": "IDLW"
+      },
+      {
+        "value": "Pacific/Kiritimati",
+        "label": "LINT"
+      },
+      {
+        "value": "Australia/Perth",
+        "label": "AWST"
+      },
+      {
+        "value": "Australia/Eucla",
+        "label": "ACWST"
+      },
+      {
+        "value": "Australia/Adelaide",
+        "label": "ACST"
+      },
+      {
+        "value": "Australia/Sydney",
+        "label": "AEST"
+      },
+      {
+        "value": "Australia/Lord_Howe",
+        "label": "LHST"
+      },
+      {
+        "value": "Etc/GMT-1",
+        "label": "GMT+1"
+      },
+      {
+        "value": "Europe/Amsterdam",
+        "label": "CET/CEST"
+      }
+    ],
+    "group": "UI"
+  },
   {
     "id": "ui.map.theme",
     "type": "oneOfMultiple",

src/components/charts/TimeSeriesChart.vue

@@ -121,6 +121,8 @@ onMounted(() => {
         type: AxisType.time,
         position: AxisPosition.Bottom,
         showGrid: true,
+        timeZone: 'Australia/Eucla',
+        locale: 'en',
       },
     ],
     y: [

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/table/TimeSeriesTable.vue

@@ -132,7 +132,7 @@
               type="datetime-local"
             />
             <div v-else>
-              {{ dateFormatter.format(item.date) }}
+              {{ d(item.date, 'table') }}
             </div>
           </td>
           <td v-for="id in seriesIds">
@@ -160,6 +160,8 @@
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import { watchDebounced } from '@vueuse/core'
 import TableTooltip from './TableTooltip.vue'
 import type { ChartConfig } from '@/lib/charts/types/ChartConfig'
@@ -168,7 +170,6 @@ import { getUniqueSeriesIds } from '@/lib/charts/getUniqueSeriesIds'
 import type { TableHeaders } from '@/lib/table/types/TableHeaders'
 import { createTableHeaders } from '@/lib/table/createTableHeaders'
 import {
-  dateFormatter,
   createTableData,
   tableDataToTimeSeries,
   type TableData,
@@ -185,6 +186,8 @@ import {
   toISOString,
 } from '@/lib/date'
 
+const { d } = useI18n()
+
 interface Props {
   config: ChartConfig
   series: Record<string, Series>

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