webapp: Show Locale name instead of abbreviation in Language Change Dropdown

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")) {