From 04ef9c6624720ba64f2068f8350b5f1d2389be4b Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Mon, 26 Dec 2022 12:24:10 +0100
Subject: [PATCH] webapp: Added possibility to manually set the locale

---
 webapp/src/components/LocaleSwitcher.vue | 27 ++++++++++++++++++++++++
 webapp/src/components/NavBar.vue         |  3 +++
 2 files changed, 30 insertions(+)
 create mode 100644 webapp/src/components/LocaleSwitcher.vue

diff --git a/webapp/src/components/LocaleSwitcher.vue b/webapp/src/components/LocaleSwitcher.vue
new file mode 100644
index 0000000..06902fa
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index 7796841..e1f28ab 100644
--- a/webapp/src/components/NavBar.vue
+++ b/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 {