Add comment on rerender with locale setting

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,9 @@ import { usePreferredDark } from '@vueuse/core'
 import { useDark, useToggle } from '@vueuse/core'
 
 import '@/assets/fews-flags.css'
+import { DateTimeFormatWithOverride } from './locales'
+
+const { locale, getDateTimeFormat, setDateTimeFormat } = useI18n()
 
 const route = useRoute()
 const configStore = useConfigStore()
@@ -34,6 +39,7 @@ const toggleDark = useToggle(isDark)
 
 onMounted(() => {
   updateTheme()
+  updateDateTimeFormat()
 })
 
 const layoutComponent = computed(() => {
@@ -77,6 +83,28 @@ 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'
+  // Reset locale to force rerender after dateTimeFormat
+  locale.value = ''
+  let timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  if (timeZoneSetting !== 'user') {
+    timeZone = timeZoneSetting
+  }
+  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 +119,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,42 @@
     ],
     "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"
+      },
+      {
+        "value": "UTC"
+      },
+      {
+        "value": "Etc/GMT-1"
+      },
+      {
+        "value": "Europe/Amsterdam"
+      }
+    ],
+    "group": "UI"
+  },
   {
     "id": "ui.map.theme",
     "type": "oneOfMultiple",

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/lib/table/tableData.ts

@@ -22,16 +22,6 @@ export interface TableData {
   [key: string]: Partial<TableSeriesData> | Date
 }
 
-export const dateFormatter = new Intl.DateTimeFormat(undefined, {
-  year: 'numeric',
-  month: 'numeric',
-  day: 'numeric',
-  hour: 'numeric',
-  minute: 'numeric',
-  second: 'numeric',
-  hour12: false,
-})
-
 /**
  *
  * Creates table data based of the given series IDs, based on the chart series and the time series.

src/locales/index.ts

@@ -1,7 +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'
+import type { DateTimeFormatOptions } from '@intlify/core-base'
 
 export const messages = {
   en: {
@@ -18,36 +18,67 @@ export const messages = {
   },
 }
 
-export const datetimeFormats: Record<keyof typeof messages, DateTimeFormat> = {
+export type DateTimeFormatWithOverride = {
+  [key: string]: DateTimeFormatOptions & { overrideTimeZone?: boolean }
+}
+
+export const datetimeFormats: Record<
+  keyof typeof messages,
+  DateTimeFormatWithOverride
+> = {
   en: {
-    time: {
-      hour: 'numeric',
-      minute: 'numeric',
-      timeZoneName: 'short',
-    },
     datetimeslider: {
       year: 'numeric',
       month: 'numeric',
       day: 'numeric',
       hour: 'numeric',
       minute: 'numeric',
-      second: 'numeric',
       hour12: true,
+      timeZone: 'UTC',
+      overrideTimeZone: true,
+    },
+    table: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      timeZone: 'UTC',
+      overrideTimeZone: true,
     },
-  },
-  nl: {
     time: {
       hour: 'numeric',
       minute: 'numeric',
       timeZoneName: 'short',
+      timeZone: 'UTC',
+      overrideTimeZone: true,
     },
+  },
+  nl: {
     datetimeslider: {
       year: 'numeric',
       month: 'numeric',
       day: 'numeric',
       hour: 'numeric',
       minute: 'numeric',
-      second: 'numeric',
+      timeZone: 'Europe/Amsterdam',
+      overrideTimeZone: true,
+    },
+    table: {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      timeZone: 'Europe/Amsterdam',
+      overrideTimeZone: true,
+    },
+    time: {
+      hour: 'numeric',
+      minute: 'numeric',
+      timeZoneName: 'short',
+      timeZone: 'Europe/Amsterdam',
+      overrideTimeZone: true,
     },
   },
 } as const