From 587de2e3bedb0be9482a54d72cbd9dd81fc43be4 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Mon, 9 Jan 2023 20:55:48 +0100
Subject: [PATCH] webapp: Show Locale name instead of abbreviation in Language
 Change Dropdown

---
 webapp/src/components/LocaleSwitcher.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/LocaleSwitcher.vue b/webapp/src/components/LocaleSwitcher.vue
index 06902fa1..389886bc 100644
--- a/webapp/src/components/LocaleSwitcher.vue
+++ b/webapp/src/components/LocaleSwitcher.vue
@@ -1,13 +1,14 @@
 <template>
     <select class="form-select" @change="updateLanguage()" v-model="$i18n.locale">
         <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">
-            {{ locale.toUpperCase() }}
+            {{ getLocaleName(locale) }}
         </option>
     </select>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { LOCALES } from '@/locales';
 
 export default defineComponent({
     name: "LocaleSwitcher",
@@ -15,6 +16,9 @@ export default defineComponent({
         updateLanguage() {
             localStorage.setItem("locale", this.$i18n.locale);
         },
+        getLocaleName(locale: string): string {
+            return LOCALES.find(i => i.value === locale)?.caption || "";
+        }
     },
     mounted() {
         if (localStorage.getItem("locale")) {