[frontend-next] Refactored fronted

frontend/src/components/SetLanguage/SetLanguage.vue

@@ -1,32 +1,38 @@
+<script setup lang="ts">
+import gettext from '@/gettext'
+
+
+import {ref, watch} from 'vue'
+
+import {useSettingsStore} from '@/pinia'
+import {useRoute} from 'vue-router'
+
+const settings = useSettingsStore()
+
+const route = useRoute()
+
+const current = ref(gettext.current)
+
+const languageAvailable = gettext.available
+watch(current, (v) => {
+    settings.set_language(v)
+    gettext.current = v
+    // @ts-ignored
+    document.title = route.name() + ' | Nginx UI'
+})
+
+</script>
+
 <template>
     <div>
-        <a-select v-model="current" size="small" style="width: 50px">
-            <a-select-option v-for="(language, key) in $language.available" :value="key" :key="key">
+        <a-select v-model:value="current" size="small" style="width: 60px">
+            <a-select-option v-for="(language, key) in languageAvailable" :value="key" :key="key">
                 {{ language }}
             </a-select-option>
         </a-select>
     </div>
 </template>
 
-<script>
-export default {
-    name: 'SetLanguage',
-    data() {
-        return {
-            current: this.$language.current,
-        }
-    },
-    watch: {
-        current() {
-            this.$store.commit('set_language', this.current)
-            this.$nextTick(() => {
-                location.reload()
-            })
-        }
-    },
-}
-</script>
-
 <style lang="less" scoped>
 
 </style>