Feature/language translation

package.json

@@ -48,6 +48,7 @@
     "terra-draw-maplibre-gl-adapter": "^1.0.1",
     "typescript-json-serializer": "^6.0.1",
     "vue": "^3.5.13",
+    "vue-i18n": "^9.14.2",
     "vue-router": "^4.5.0",
     "vue-slider-component": "^4.1.0-beta.7",
     "vuetify": "^3.7.7"

public/locales/de_DE.json

@@ -0,0 +1,9 @@
+{
+  "thresholds": "Schwellenwerte",
+  "download_time_series": "Zeitreihe herunterladen ...",
+  "switch_to": "Wechseln zu",
+  "about": "Über",
+  "default": "Standard",
+  "custom": "Benutzerdefiniert",
+  "period_presets": "Zeitraum-Voreinstellungen"
+}

public/locales/en_EN.json

@@ -0,0 +1,9 @@
+{
+  "thresholds": "Thresholds",
+  "download_time_series": "Download time series ...",
+  "switch_to": "Switch to",
+  "about": "About",
+  "default": "Default",
+  "custom": "Custom",
+  "period_presets": "period presets"
+}

src/components/charts/TimeSeriesChart.vue

@@ -50,6 +50,8 @@ import type { Tag } from '@/lib/charts/tags'
 import { type ChartsSettings } from '@/lib/topology/componentSettings'
 import { getAxisOptions } from '@/lib/charts/axisOptions'
 
+import { useI18n } from 'vue-i18n'
+
 interface Props {
   config?: ChartConfig
   series?: Record<string, Series>
@@ -75,6 +77,8 @@ const props = withDefaults(defineProps<Props>(), {
   },
 })
 
+const { t } = useI18n()
+
 let thresholdLines!: ThresholdLine[]
 let thresholdLinesVisitor!: AlertLines
 let axis!: CartesianAxes
@@ -331,7 +335,7 @@ const setTags = () => {
     legendSvg.appendChild(svgGroup)
     const thresholdLegend = {
       id: 'Thresholds',
-      name: 'Thresholds',
+      name: t('thresholds'),
       disabled: false,
       legendSvg:
         '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M13 14h-2V9h2m0 9h-2v-2h2M1 21h22L12 2L1 21Z"/></svg>',

src/components/time-control/IntervalSelector.vue

@@ -1,20 +1,20 @@
 <template>
   <v-list class="interval-list" density="compact">
     <v-list-item :active="0 === selectedIndex" @click="onSelectInterval(0)">
-      Default
+      {{ t('default') }}
       <template v-slot:append="{ isActive }">
         <v-icon v-show="isActive" small> mdi-check </v-icon>
       </template>
     </v-list-item>
     <v-list-item :active="1 === selectedIndex" @click="onSelectInterval(1)">
-      Custom
+      {{ t('custom') }}
       <template v-slot:append="{ isActive }">
         <v-icon v-show="isActive" small> mdi-check </v-icon>
       </template>
     </v-list-item>
     <template v-if="props.items.length">
       <v-divider></v-divider>
-      <v-list-subheader>Period presets</v-list-subheader>
+      <v-list-subheader>{{ t('period_presets') }}</v-list-subheader>
       <v-list-item
         v-for="(item, index) in props.items"
         :key="index"
@@ -35,6 +35,8 @@ import type { IntervalItem, Interval } from '@/lib/TimeControl/interval'
 import { isEqual } from 'lodash-es'
 import { onBeforeMount, ref, watch } from 'vue'
 
+import { useI18n } from 'vue-i18n'
+
 interface Props {
   items: IntervalItem[]
   now: Date
@@ -47,6 +49,8 @@ const props = withDefaults(defineProps<Props>(), {
   now: () => new Date(),
 })
 
+const { t } = useI18n()
+
 const interval = defineModel<Interval>({ required: true })
 const selectedIndex = ref(0)
 

src/components/timeseries/TimeSeriesWindowComponent.vue

@@ -66,6 +66,7 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import WindowComponent from '@/components/general/WindowComponent.vue'
 import TimeSeriesComponent from '@/components/timeseries/TimeSeriesComponent.vue'
 import TimeSeriesFileDownloadComponent from '@/components/download/TimeSeriesFileDownloadComponent.vue'
@@ -91,6 +92,8 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const { t } = useI18n()
+
 const downloadDialogStore = useDownloadDialogStore()
 const userSettings = useUserSettingsStore()
 
@@ -114,7 +117,7 @@ const displayActionItems = computed(() => {
   return [
     {
       icon: 'mdi-download',
-      label: 'Download time series ...',
+      label: t('download_time_series'),
       action: () => {
         downloadDialogStore.showDialog = true
       },

src/layouts/DefaultLayout.vue

@@ -44,7 +44,7 @@
           v-else-if="configStore.activeComponents.length > 1"
           density="compact"
         >
-          <v-list-subheader>Switch to</v-list-subheader>
+          <v-list-subheader>{{ t('switch_to') }}</v-list-subheader>
           <v-menu origin="bottom" width="320">
             <template #activator="{ props }">
               <v-list-item
@@ -120,7 +120,9 @@
                   href="#"
                   >{{ item.name }}</v-list-item
                 >
-                <v-list-item :to="{ name: 'About' }">About</v-list-item>
+                <v-list-item :to="{ name: 'About' }">{{
+                  t('about')
+                }}</v-list-item>
               </v-list>
             </v-menu>
           </template>
@@ -158,6 +160,7 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { computed, ref, watch } from 'vue'
 import { useDisplay, useRtl, useTheme } from 'vuetify'
 import { useConfigStore } from '../stores/config.ts'
@@ -182,6 +185,7 @@ import {
 import type { MapLayerConfig } from '@deltares/fews-pi-requests'
 import { useBaseMapsStore } from '@/stores/baseMaps.ts'
 
+const { t } = useI18n()
 const configStore = useConfigStore()
 const settings = useUserSettingsStore()
 const { mobile } = useDisplay()

src/main.ts

@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 import { configManager } from './services/application-config'
 import { authenticationManager } from './services/authentication/AuthenticationManager.js'
@@ -13,6 +14,20 @@ import { useAvailableWorkflowsStore } from './stores/availableWorkflows'
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 
+const loadLocaleMessages = async (locale: string) => {
+  const response = await fetch(
+    `${import.meta.env.BASE_URL}locales/${locale}.json`,
+  )
+  return response.json()
+}
+
+const localeMessages = async () => {
+  let result: any = {}
+  result.de_DE = await loadLocaleMessages('de_DE')
+  result.en_EN = await loadLocaleMessages('en_EN')
+  return result
+}
+
 const app = createApp(App)
 
 defineCustomElements(window)
@@ -29,6 +44,14 @@ fetch(`${import.meta.env.BASE_URL}app-config.json`)
     if (configManager.authenticationIsEnabled) {
       await authenticationManager.init(configManager.getUserManagerSettings())
     }
+    const i18n = createI18n({
+      legacy: false,
+      locale: configManager.getIfAvailable('LOCALE') ?? 'en_EN',
+      fallbackLocale: 'en_EN',
+      messages: await localeMessages(),
+      fallbackWarn: false
+    })
+    app.use(i18n)
     app.use(router)
     app.mount('#app')
 

src/services/application-config/ApplicationConfig.ts

@@ -11,4 +11,5 @@ export type ApplicationConfig = {
   VITE_AUTH_ID: string
   VITE_REQUEST_HEADER_AUTHORIZATION: RequestHeaderAuthorization
   VITE_FEWS_WEBSERVICES_URL: string
+  LOCALE: string
 }

src/services/application-config/ApplicationConfigManager.ts

@@ -14,14 +14,20 @@ export class ApplicationConfigManager {
   }
 
   get<T extends keyof ApplicationConfig>(name: T): ApplicationConfig[T] {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const value = this.getIfAvailable(name)
+    if (value !== undefined) return value
+    throw new Error(`Cannot find config for '${name}'`)
+  }
+
+  getIfAvailable<T extends keyof ApplicationConfig>(
+    name: T,
+  ): ApplicationConfig[T] | undefined {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const configValue = this._config[name]
     if (configValue !== undefined) return configValue
     const envValue = import.meta.env[name]
-    if (envValue !== undefined) {
-      return envValue
-    }
-    throw new Error(`Cannot find config for '${name}'`)
+    return envValue
   }
 
   get authenticationIsEnabled(): boolean {

src/views/TopologyDisplayView.vue

@@ -38,7 +38,7 @@
       </template>
       <v-list>
         <v-list-item
-          title="Run tasks..."
+          :title="'Run tasks...'"
           :disabled="secondaryWorkflows === null"
           @click="workflowsStore.showDialog = true"
         >