WIP: TimeZone support

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,14 +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",
-    "vue": "^3.4.21",
-    "vuetify": "^3.5.9"
+    "vuetify": "^3.6.9"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",
@@ -73,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

@@ -26,6 +26,7 @@ import { useDark, useToggle } from '@vueuse/core'
 
 import '@/assets/fews-flags.css'
 import { DateTimeFormatWithOverride } from './locales'
+import { Settings } from 'luxon'
 
 const { locale, getDateTimeFormat, setDateTimeFormat } = useI18n()
 
@@ -88,12 +89,15 @@ function updateDateTimeFormat() {
     (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') {
+    Settings.defaultZone = timeZoneSetting
     timeZone = timeZoneSetting
+  } else {
+    Settings.defaultZone = 'system'
   }
+  // Reset locale to force rerender after dateTimeFormat
+  locale.value = ''
   const dateTimeFormat = getDateTimeFormat(
     currentLocale,
   ) as DateTimeFormatWithOverride

src/assets/DefaultUserSettings.json

@@ -87,16 +87,44 @@
     "value": "user",
     "items": [
       {
-        "value": "user"
+        "value": "user",
+        "label": "System"
       },
       {
-        "value": "UTC"
+        "value": "Etc/GMT+12",
+        "label": "IDLW"
       },
       {
-        "value": "Etc/GMT-1"
+        "value": "Pacific/Kiritimati",
+        "label": "LINT"
       },
       {
-        "value": "Europe/Amsterdam"
+        "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"

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/user-settings/UserSettingsMenu.vue

@@ -13,7 +13,21 @@
       >
         <v-list-item-subtitle>{{ setting.label }} </v-list-item-subtitle>
         <v-list-item-action v-if="setting.type === 'oneOfMultiple'">
+          <v-select
+            v-if="setting.items && setting.items.length > 3"
+            v-model="setting.value"
+            :items="setting.items"
+            @update:model-value="onValueChange(setting)"
+            item-title="label"
+            item-value="value"
+            :item-props="true"
+            density="compact"
+            variant="solo-filled"
+            flat
+          >
+          </v-select>
           <v-btn-toggle
+            v-else
             density="compact"
             class="my-2"
             v-model="setting.value"
@@ -30,7 +44,7 @@
               <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
               <span v-else>{{ item.value }}</span>
               <v-tooltip activator="parent" location="top">{{
-                item.value
+                item.label
               }}</v-tooltip>
             </v-btn>
           </v-btn-toggle>

src/locales/index.ts

@@ -33,13 +33,20 @@ export const datetimeFormats: Record<
       day: 'numeric',
       hour: 'numeric',
       minute: 'numeric',
-      hour12: true,
       timeZone: 'UTC',
       overrideTimeZone: true,
     },
+    'datetimeslider-UTC': {
+      year: 'numeric',
+      month: 'numeric',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+      timeZone: 'UTC'
+    },
     table: {
       year: 'numeric',
-      month: 'short',
+      month: 'numeric',
       day: 'numeric',
       hour: 'numeric',
       minute: 'numeric',
@@ -51,6 +58,7 @@ export const datetimeFormats: Record<
       minute: 'numeric',
       timeZoneName: 'short',
       timeZone: 'UTC',
+      hour12: true,
       overrideTimeZone: true,
     },
   },

src/plugins/vuetify.ts

@@ -4,16 +4,25 @@ import '@mdi/font/css/materialdesignicons.css'
 import { createVuetify } from 'vuetify'
 import * as directives from 'vuetify/directives'
 import * as components from 'vuetify/components'
-import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
-import { i18n } from './i18n'
-import { useI18n } from 'vue-i18n'
+// import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
+// import { i18n } from './i18n'
+// import { useI18n } from 'vue-i18n'
+import { VTimePicker } from 'vuetify/labs/VTimePicker'
+
+import LuxonAdapter from '@date-io/luxon'
 
 const vuetify = createVuetify({
-  components,
+  components: {
+    ...components,
+    VTimePicker,
+  },
   directives,
-  locale: {
-    adapter: createVueI18nAdapter({ i18n, useI18n }),
+  date: {
+    adapter: LuxonAdapter,
   },
+  // locale: {
+  //   adapter: createVueI18nAdapter({ i18n, useI18n }),
+  // },
 })
 
 export default vuetify

src/stores/userSettings.ts

@@ -12,6 +12,7 @@ export type UserSettingsType =
 
 export interface UserSettingsWithIcon {
   value: string
+  label: string,
   disabled?: boolean
   icon?: string
 }

src/views/AboutView.vue

@@ -48,16 +48,32 @@
       </v-row>
     </v-card-text>
   </v-card>
+  <v-card>
+    <v-date-picker v-model="myDate" format="24hr" :key="timeZone">
+    </v-date-picker>
+    <v-card-text>{{ myDate }} {{ myDate.zone }}</v-card-text>
+  </v-card>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import packageConfig from '../../package.json'
 import { PiWebserviceProvider, Version } from '@deltares/fews-pi-requests'
 import { onMounted } from 'vue'
 import { useConfigStore } from '../stores/config.ts'
 import { configManager } from '@/services/application-config'
 import { createTransformRequestFn } from '@/lib/requests/transformRequest'
+import { useUserSettingsStore } from '@/stores/userSettings.ts'
+import { useI18n } from 'vue-i18n'
+import { DateTime } from 'luxon'
+
+const { d } = useI18n()
+
+const userSettingsStore = useUserSettingsStore()
+
+const timeZone = computed(
+  () => (userSettingsStore.get('ui.timeZone')?.value as string) ?? 'UTC',
+)
 
 const webServiceUrl = configManager.get('VITE_FEWS_WEBSERVICES_URL')
 
@@ -73,6 +89,8 @@ const webServiceVersion = ref<Version>({
 })
 const configStore = useConfigStore()
 
+const myDate = ref(DateTime.now())
+
 onMounted(async () => {
   const webServiceProvider = new PiWebserviceProvider(webServiceUrl, {
     transformRequestFn: createTransformRequestFn(),

vite.config.ts

@@ -15,8 +15,8 @@ export default defineConfig(({ mode }) => {
       __GIT_HASH__: JSON.stringify(commitHash),
       __GIT_TAG__: JSON.stringify(commitTag),
       __BUILD_DATE__: JSON.stringify(buildDate),
-      __INTLIFY_JIT_COMPILATION__: JSON.stringify(true), // needed to enable JIT compilation and avoid CSP issues
-      __INTLIFY_DROP_MESSAGE_COMPILER__: JSON.stringify(true), // needed to enable JIT compilation and avoid CSP issues
+      __INTLIFY_JIT_COMPILATION__: true, // needed to enable JIT compilation and avoid CSP issues
+      __INTLIFY_DROP_MESSAGE_COMPILER__: true, // needed to enable JIT compilation and avoid CSP issues
     },
     server: {
       headers: {