Store locale settings

Author: JanisV

frontend/package-lock.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@mdi/font": "^7.4.47",
     "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "sql.js": "^1.13.0",
     "vue": "^3.5.25",
     "vue-router": "^4.6.4",

frontend/package.json

@@ -1,5 +1,26 @@
 <script setup>
-import {onMounted, onUnmounted} from "vue";
+import {onMounted, onUnmounted, ref} from "vue";
+import { useLocaleStore } from '@/stores/locale'
+
+const localeStore = useLocaleStore()
+
+const langs = ref([
+  {lang: 'bg', name: 'Български'},
+  {lang: 'ca', name: 'Català'},
+  {lang: 'de', name: 'Deutsch'},
+  {lang: 'en', name: 'English'},
+  {lang: 'el', name: 'Ελληνικά'},
+  {lang: 'es', name: 'Español'},
+  {lang: 'fa', name: 'فارسی'},
+  {lang: 'fr', name: 'Français'},
+  {lang: 'it', name: 'Italiano'},
+  {lang: 'nl', name: 'Nederlands'},
+  {lang: 'pl', name: 'Polski'},
+  {lang: 'pt', name: 'Português'},
+  {lang: 'ru', name: 'Русский'},
+  {lang: 'tr', name: 'Türkçe'},
+  {lang: 'uk', name: 'Український'},
+]);
 
 const props = defineProps({
   title: String,
@@ -14,15 +35,19 @@ onMounted(async () => {
 onUnmounted(async () => {
   emit('update:title', oldTitle);
 })
+
+const changeLanguage = (lang) => {
+  localeStore.setLocale(lang)
+}
 </script>
 
 <template>
   <v-container>
     <v-list>
       <v-list-item>
         <v-btn-toggle
-          rounded="xl"
-          border
+            rounded="xl"
+            border
         >
           <v-btn icon="mdi-weather-night"></v-btn>
           <v-btn icon="mdi-brightness-auto"></v-btn>
@@ -31,7 +56,11 @@ onUnmounted(async () => {
       </v-list-item>
       <v-list-item>
         <v-select
-          :items="['English',]"
+            v-model="localeStore.currentLocale"
+            :items="langs"
+            item-title="name"
+            item-value="lang"
+            @update:modelValue="changeLanguage"
         ></v-select>
       </v-list-item>
     </v-list>

frontend/src/components/SettingsView.vue

@@ -9,12 +9,14 @@ import { createVuetify } from 'vuetify'
 import { createPinia } from 'pinia'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 // Components
 import App from './App.vue'
 import router from './router'
 
 const pinia = createPinia()
+pinia.use(piniaPluginPersistedstate)
 
 const vuetify = createVuetify({
   components,

frontend/src/main.js

@@ -0,0 +1,25 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useLocaleStore = defineStore('locale', () => {
+  const currentLocale = ref('en')
+
+  const setLocale = (locale) => {
+    currentLocale.value = locale
+
+    localStorage.setItem('app-locale', locale)
+
+    document.documentElement.lang = locale
+
+    window.dispatchEvent(new CustomEvent('locale-changed', {
+      detail: { locale }
+    }))
+  }
+
+  return {
+    currentLocale,
+    setLocale,
+  }
+}, {
+  persist: true,
+})