webapp: Added possibility to manually set the locale

webapp/src/components/LocaleSwitcher.vue

@@ -0,0 +1,27 @@
+<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() }}
+        </option>
+    </select>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    name: "LocaleSwitcher",
+    methods: {
+        updateLanguage() {
+            localStorage.setItem("locale", this.$i18n.locale);
+        },
+    },
+    mounted() {
+        if (localStorage.getItem("locale")) {
+            this.$i18n.locale = localStorage.getItem("locale") || "en";
+        } else {
+            localStorage.setItem("locale", this.$i18n.locale);
+        }
+    },
+});
+</script>

webapp/src/components/NavBar.vue

@@ -93,6 +93,7 @@
                     </li>
                 </ul>
                 <form class="d-flex" role="search">
+                    <LocaleSwitcher class="me-2" />
                     <button v-if="isLogged" class="btn btn-outline-danger" @click="signout">{{ $t('menu.Logout') }}</button>
                     <button v-if="!isLogged" class="btn btn-outline-success" @click="signin">{{ $t('menu.Login') }}</button>
                 </form>
@@ -105,12 +106,14 @@
 import { isLoggedIn, logout } from '@/utils/authentication';
 import { BIconEgg, BIconSun, BIconTree } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
+import LocaleSwitcher from './LocaleSwitcher.vue';
 
 export default defineComponent({
     components: {
         BIconEgg,
         BIconSun,
         BIconTree,
+        LocaleSwitcher,
     },
     data() {
         return {