From 4170fbd6da70652de01d686de5994113d54710b7 Mon Sep 17 00:00:00 2001
From: "HYDROTEC\\tobiasg" <tobias.gehrmann@hydrotec.de>
Date: Tue, 4 Mar 2025 15:26:29 +0100
Subject: [PATCH 1/3] * added localization functionality via i18n * added
 translations for some words * added function in configManager for non
 mandatory environment variables (app-config.json)

---
 package-lock.json                             | 61 +++++++++++++++++++
 package.json                                  |  1 +
 public/locales/de_DE.json                     |  9 +++
 public/locales/en_EN.json                     |  9 +++
 src/components/charts/TimeSeriesChart.vue     |  6 +-
 .../time-control/IntervalSelector.vue         | 10 ++-
 .../timeseries/TimeSeriesWindowComponent.vue  |  6 +-
 src/layouts/DefaultLayout.vue                 |  6 +-
 src/main.ts                                   | 21 +++++++
 .../application-config/ApplicationConfig.ts   |  3 +-
 .../ApplicationConfigManager.ts               | 12 ++--
 src/views/TopologyDisplayView.vue             |  2 +-
 12 files changed, 133 insertions(+), 13 deletions(-)
 create mode 100644 public/locales/de_DE.json
 create mode 100644 public/locales/en_EN.json

diff --git a/package-lock.json b/package-lock.json
index 1a73f1713..dc46a2936 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,6 +38,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"
@@ -1277,6 +1278,47 @@
         "vue": "^3.4.18"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "9.14.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.14.2.tgz",
+      "integrity": "sha512-DZyQ4Hk22sC81MP4qiCDuU+LdaYW91A6lCjq8AWPvY3+mGMzhGDfOCzvyR6YBQxtlPjFqMoFk9ylnNYRAQwXtQ==",
+      "dependencies": {
+        "@intlify/message-compiler": "9.14.2",
+        "@intlify/shared": "9.14.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.14.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.14.2.tgz",
+      "integrity": "sha512-YsKKuV4Qv4wrLNsvgWbTf0E40uRv+Qiw1BeLQ0LAxifQuhiMe+hfTIzOMdWj/ZpnTDj4RSZtkXjJM7JDiiB5LQ==",
+      "dependencies": {
+        "@intlify/shared": "9.14.2",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.14.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.14.2.tgz",
+      "integrity": "sha512-uRAHAxYPeF+G5DBIboKpPgC/Waecd4Jz8ihtkpJQD5ycb5PwXp0k/+hBGl5dAjwF7w+l74kz/PKA8r8OK//RUw==",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -11287,6 +11329,25 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "9.14.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.14.2.tgz",
+      "integrity": "sha512-JK9Pm80OqssGJU2Y6F7DcM8RFHqVG4WkuCqOZTVsXkEzZME7ABejAUqUdA931zEBedc4thBgSUWxeQh4uocJAQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.14.2",
+        "@intlify/shared": "9.14.2",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
diff --git a/package.json b/package.json
index c2fdf047a..96ea4a517 100644
--- a/package.json
+++ b/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"
diff --git a/public/locales/de_DE.json b/public/locales/de_DE.json
new file mode 100644
index 000000000..3b391352d
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/public/locales/en_EN.json b/public/locales/en_EN.json
new file mode 100644
index 000000000..5220e08a1
--- /dev/null
+++ b/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"
+}
\ No newline at end of file
diff --git a/src/components/charts/TimeSeriesChart.vue b/src/components/charts/TimeSeriesChart.vue
index 5360e8d87..fa5d13fbb 100644
--- a/src/components/charts/TimeSeriesChart.vue
+++ b/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>',
diff --git a/src/components/time-control/IntervalSelector.vue b/src/components/time-control/IntervalSelector.vue
index d44196468..8faaff85a 100644
--- a/src/components/time-control/IntervalSelector.vue
+++ b/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)
 
diff --git a/src/components/timeseries/TimeSeriesWindowComponent.vue b/src/components/timeseries/TimeSeriesWindowComponent.vue
index 1a258fa23..c2344caf9 100644
--- a/src/components/timeseries/TimeSeriesWindowComponent.vue
+++ b/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,9 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const { t } = useI18n()
+
+
 const downloadDialogStore = useDownloadDialogStore()
 const userSettings = useUserSettingsStore()
 
@@ -114,7 +118,7 @@ const displayActionItems = computed(() => {
   return [
     {
       icon: 'mdi-download',
-      label: 'Download time series ...',
+      label: t('download_time_series'),
       action: () => {
         downloadDialogStore.showDialog = true
       },
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 599cbf903..cf6c41fd4 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/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,7 @@
                   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 +158,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 +183,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()
diff --git a/src/main.ts b/src/main.ts
index e3eeaac34..75a4b827c 100644
--- a/src/main.ts
+++ b/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,19 @@ 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 +43,13 @@ 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'),
+      fallbackLocale: 'en_EN',
+      messages: await localeMessages()
+    })
+    app.use(i18n)
     app.use(router)
     app.mount('#app')
 
diff --git a/src/services/application-config/ApplicationConfig.ts b/src/services/application-config/ApplicationConfig.ts
index c6ff2023d..cac27d7ec 100644
--- a/src/services/application-config/ApplicationConfig.ts
+++ b/src/services/application-config/ApplicationConfig.ts
@@ -10,5 +10,6 @@ export type ApplicationConfig = {
   VITE_AUTH_METADATA_URL: string
   VITE_AUTH_ID: string
   VITE_REQUEST_HEADER_AUTHORIZATION: RequestHeaderAuthorization
-  VITE_FEWS_WEBSERVICES_URL: string
+  VITE_FEWS_WEBSERVICES_URL: string,
+  LOCALE: string
 }
diff --git a/src/services/application-config/ApplicationConfigManager.ts b/src/services/application-config/ApplicationConfigManager.ts
index 8d2318e7c..6668c13f7 100644
--- a/src/services/application-config/ApplicationConfigManager.ts
+++ b/src/services/application-config/ApplicationConfigManager.ts
@@ -14,14 +14,18 @@ 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 {
diff --git a/src/views/TopologyDisplayView.vue b/src/views/TopologyDisplayView.vue
index 0f3d2e717..d40d0383b 100644
--- a/src/views/TopologyDisplayView.vue
+++ b/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"
         >

From fefc97f00c2e62657fdd5354ab4e8751eeab06b8 Mon Sep 17 00:00:00 2001
From: "HYDROTEC\\tobiasg" <tobias.gehrmann@hydrotec.de>
Date: Tue, 4 Mar 2025 15:29:23 +0100
Subject: [PATCH 2/3] Linter

---
 public/locales/de_DE.json                       |  2 +-
 public/locales/en_EN.json                       |  2 +-
 .../timeseries/TimeSeriesWindowComponent.vue    |  1 -
 src/layouts/DefaultLayout.vue                   |  6 ++++--
 src/main.ts                                     | 17 +++++++++--------
 .../application-config/ApplicationConfig.ts     |  2 +-
 .../ApplicationConfigManager.ts                 |  6 ++++--
 7 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/public/locales/de_DE.json b/public/locales/de_DE.json
index 3b391352d..8a258ba53 100644
--- a/public/locales/de_DE.json
+++ b/public/locales/de_DE.json
@@ -6,4 +6,4 @@
   "default": "Standard",
   "custom": "Benutzerdefiniert",
   "period_presets": "Zeitraum-Voreinstellungen"
-}
\ No newline at end of file
+}
diff --git a/public/locales/en_EN.json b/public/locales/en_EN.json
index 5220e08a1..09cc99009 100644
--- a/public/locales/en_EN.json
+++ b/public/locales/en_EN.json
@@ -6,4 +6,4 @@
   "default": "Default",
   "custom": "Custom",
   "period_presets": "period presets"
-}
\ No newline at end of file
+}
diff --git a/src/components/timeseries/TimeSeriesWindowComponent.vue b/src/components/timeseries/TimeSeriesWindowComponent.vue
index c2344caf9..2890ead33 100644
--- a/src/components/timeseries/TimeSeriesWindowComponent.vue
+++ b/src/components/timeseries/TimeSeriesWindowComponent.vue
@@ -94,7 +94,6 @@ const props = defineProps<Props>()
 
 const { t } = useI18n()
 
-
 const downloadDialogStore = useDownloadDialogStore()
 const userSettings = useUserSettingsStore()
 
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index cf6c41fd4..334f7773e 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -44,7 +44,7 @@
           v-else-if="configStore.activeComponents.length > 1"
           density="compact"
         >
-          <v-list-subheader>{{ t("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' }">{{ t("about") }}</v-list-item>
+                <v-list-item :to="{ name: 'About' }">{{
+                  t('about')
+                }}</v-list-item>
               </v-list>
             </v-menu>
           </template>
diff --git a/src/main.ts b/src/main.ts
index 75a4b827c..2bcc6520d 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -15,17 +15,18 @@ const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
 
 const loadLocaleMessages = async (locale: string) => {
-  const response = await fetch(`${import.meta.env.BASE_URL}locales/${locale}.json`)
+  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;
-};
-
+  let result: any = {}
+  result.de_DE = await loadLocaleMessages('de_DE')
+  result.en_EN = await loadLocaleMessages('en_EN')
+  return result
+}
 
 const app = createApp(App)
 
@@ -47,7 +48,7 @@ fetch(`${import.meta.env.BASE_URL}app-config.json`)
       legacy: false,
       locale: configManager.getIfAvailable('LOCALE'),
       fallbackLocale: 'en_EN',
-      messages: await localeMessages()
+      messages: await localeMessages(),
     })
     app.use(i18n)
     app.use(router)
diff --git a/src/services/application-config/ApplicationConfig.ts b/src/services/application-config/ApplicationConfig.ts
index cac27d7ec..b6f05f2c0 100644
--- a/src/services/application-config/ApplicationConfig.ts
+++ b/src/services/application-config/ApplicationConfig.ts
@@ -10,6 +10,6 @@ export type ApplicationConfig = {
   VITE_AUTH_METADATA_URL: string
   VITE_AUTH_ID: string
   VITE_REQUEST_HEADER_AUTHORIZATION: RequestHeaderAuthorization
-  VITE_FEWS_WEBSERVICES_URL: string,
+  VITE_FEWS_WEBSERVICES_URL: string
   LOCALE: string
 }
diff --git a/src/services/application-config/ApplicationConfigManager.ts b/src/services/application-config/ApplicationConfigManager.ts
index 6668c13f7..ad5635414 100644
--- a/src/services/application-config/ApplicationConfigManager.ts
+++ b/src/services/application-config/ApplicationConfigManager.ts
@@ -20,12 +20,14 @@ export class ApplicationConfigManager {
     throw new Error(`Cannot find config for '${name}'`)
   }
 
-  getIfAvailable<T extends keyof ApplicationConfig>(name: T): ApplicationConfig[T] | undefined {
+  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]
-    return envValue;
+    return envValue
   }
 
   get authenticationIsEnabled(): boolean {

From 3212b5d7f7bc447c176128f11bfc92f1545b2101 Mon Sep 17 00:00:00 2001
From: "HYDROTEC\\tobiasg" <tobias.gehrmann@hydrotec.de>
Date: Wed, 5 Mar 2025 14:27:41 +0100
Subject: [PATCH 3/3] * silencing warnings for translation definition not found

---
 src/main.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index 2bcc6520d..9492bc01c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -46,9 +46,10 @@ fetch(`${import.meta.env.BASE_URL}app-config.json`)
     }
     const i18n = createI18n({
       legacy: false,
-      locale: configManager.getIfAvailable('LOCALE'),
+      locale: configManager.getIfAvailable('LOCALE') ?? 'en_EN',
       fallbackLocale: 'en_EN',
       messages: await localeMessages(),
+      fallbackWarn: false
     })
     app.use(i18n)
     app.use(router)