Fix language switcher

nuxt/app.vue

@@ -1,12 +1,19 @@
 <script setup="setup">
-const store = useNastavitveStore()
 
-const { izbraniJezik } = storeToRefs(store)
+const { $i18n } = useNuxtApp()
+
+const nastavitveStore = useNastavitveStore()
+
+const { izbraniJezik } = storeToRefs(nastavitveStore)
+
 // Nastavi locale ko se jezik spremeni
 watch(izbraniJezik, jezik => {
-  console.log('nov jezik', jezik)
-  useNuxtApp().$i18n.setLocale(jezik)
+  $i18n.setLocale(jezik)
 })
+
+// V store nastavi prvotno stanje
+nastavitveStore.izberiJezik($i18n.locale.value)
+
 </script>
 
 <template>

nuxt/components/Pojem.vue

@@ -6,6 +6,7 @@ const { etherFetch } = useEtherpadApi()
 const { poskrolaj } = useUi()
 
 const store = usePojmiStore()
+const nastavitveStore = useNastavitveStore()
 const route = useRoute()
 
 const props = defineProps({
@@ -16,6 +17,11 @@ if (props.naslov && !(props.naslov in store.pojmi)) {
   await store.naloziPojme()
 }
 
+const { izbraniJezik } = storeToRefs(nastavitveStore)
+watch(izbraniJezik, jezik => {
+  store.naloziPojme(jezik)
+})
+
 const pojem = computed(() => store.pojmi[props.naslov])
 const revisionId = computed(() => pojem.value ? pojem.value.id : null)
 

nuxt/composables/api.js

@@ -1,9 +1,18 @@
 import jsonapi from 'jsonapi-serializer'
 
+function idmap(arr, idattr = 'id') {
+  if (!arr) { return {} }
+
+  return arr.reduce((vse, i) => {
+    const id = i[idattr]
+    vse[id] = i
+    return vse
+  }, {})
+}
+
 export const useApi = () => {
   const { baseUrl, jsonapiPath } = useRuntimeConfig().public
 
-  const apiBaseUrl = `${baseUrl}${jsonapiPath}`
   const headers = {
     'Content-Type': 'application/vnd.api+json'
   }
@@ -16,20 +25,18 @@ export const useApi = () => {
     return idmap(ds.map(mapfun), idAttr)
   }
 
+  const jsonApiUrl = jezik => {
+    if (!jezik) {
+      jezik = 'sl'
+    }
+
+    return `${baseUrl}/${jezik}${jsonapiPath}`
+  }
+
   return {
     baseUrl: baseUrl,
-    jsonApiUrl: apiBaseUrl,
+    jsonApiUrl,
     headers,
     deserialize
   }
 }
-
-export const idmap = (arr, idattr = 'id') => {
-  if (!arr) { return {} }
-
-  return arr.reduce((vse, i) => {
-    const id = i[idattr]
-    vse[id] = i
-    return vse
-  }, {})
-}

nuxt/lang/en-US.json

@@ -1,4 +0,0 @@
-{
-  "domov": "home",
-  "jugofuturizem": "yugofuturism"
-}

nuxt/lang/en.json

@@ -1,4 +1,7 @@
 {
   "domov": "home",
-  "jugofuturizem": "yugofuturism"
+  "jugofuturizem": "yugofuturism",
+  "Nazaj": "Back",
+  "Vsak lahko prispeva k vsebinam manifesta. Predlaga lahko nov pojem ali ureja, dopolni ali predela obstoječe.": "Anyone can add content to the manifesto. You can suggest a new concept or edit, amend or adjust an existing one.",
+  "Dodaj nov pojem": "Add new concept"
 }

nuxt/nuxt.config.js

@@ -58,8 +58,8 @@ export default defineNuxtConfig({
   },
   i18n: {
     locales: [{
-      code: 'si',
-      file: 'si.json'
+      code: 'sl',
+      file: 'sl.json'
     }, {
       code: 'en',
       file: 'en.json'
@@ -68,7 +68,7 @@ export default defineNuxtConfig({
       file: 'hr.json'
     }],
     langDir: 'lang',
-    defaultLocale: 'si',
-    fallbackLocale: 'si'
+    defaultLocale: 'sl',
+    fallbackLocale: 'sl'
   }
 })

nuxt/pages/index.vue

@@ -1,12 +1,20 @@
 <script setup="setup">
+
 const store = useStraniStore()
+const nastavitveStore = useNastavitveStore()
+
+const { izbraniJezik } = storeToRefs(nastavitveStore)
 
 const stran = computed(() => store.strani['YuFu'])
 useHead({meta: [{title: "jugofuturizem"}]})
 
 await store.naloziStrani()
-</script>
 
+watch(izbraniJezik, jezik => {
+  store.naloziStrani(jezik)
+})
+
+</script>
 <template>
-  <section class="stran" v-html="stran.tekst" />
+  <section v-if="stran" class="stran" v-html="stran.tekst" />
 </template>

nuxt/pages/manifest/dodaj.vue

@@ -31,7 +31,7 @@ onMounted(() => {
     <PojemForm
       :pojem="{ nov: true }"
       :revisionId="revisionId"
-      zapriLabel="Nazaj"
+      :zapriLabel="$t('Nazaj')"
       :onZapri="onZapri" />
   </section>
 </template>

nuxt/pages/manifest/index.vue

@@ -17,9 +17,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <h3 class="navodila" ref="navodila">Vsak lahko prispeva k vsebinam manifesta. Predlaga lahko nov pojem ali ureja, dopolni ali predela obstoječe.</h3>
+  <h3 class="navodila" ref="navodila">{{ $t('Vsak lahko prispeva k vsebinam manifesta. Predlaga lahko nov pojem ali ureja, dopolni ali predela obstoječe.') }}</h3>
   <NuxtLink class="gumb" to="/manifest/dodaj">
-    Dodaj Nov Pojem
+    {{ $t('Dodaj nov pojem') }}
   </NuxtLink>
   <NuxtLink
     v-for="pojem in Object.keys(store.pojmi)"

nuxt/stores/nastavitve.js

@@ -1,8 +1,8 @@
 export const useNastavitveStore = defineStore('nastavitve', {
   state: () => ({
-    izbraniJezik: 'hr',
+    izbraniJezik: 'sl',
     mozniJeziki: {
-      si: 'Slovensko',
+      sl: 'Slovensko',
       hr: 'Hrvatski',
       en: 'English'
     }
@@ -11,8 +11,6 @@ export const useNastavitveStore = defineStore('nastavitve', {
     izberiJezik(jezik) {
       if (Object.keys(this.mozniJeziki).indexOf(jezik) >= 0) {
         this.izbraniJezik = jezik
-        console.log(useNuxtApp().$i18n.availableLocales)
-        //useNuxtApp().$i18n.setLocale(jezik)
       }
     }
   }

nuxt/stores/pojmi.js

@@ -3,10 +3,10 @@ export const usePojmiStore = defineStore('pojmi', {
     pojmi: {}
   }),
   actions: {
-    async naloziPojme() {
+    async naloziPojme(jezik) {
       const { jsonApiUrl, headers, deserialize } = useApi()
 
-      const data = await $fetch(`${jsonApiUrl}/node/concept?sort=-changed`, { headers })
+      const data = await $fetch(`${jsonApiUrl(jezik)}/node/concept?sort=-changed`, { headers })
       this.pojmi = await deserialize(data, s => ({
         id: s.id,
         naslov: s.title,

nuxt/stores/strani.js

@@ -3,10 +3,10 @@ export const useStraniStore = defineStore('strani', {
     strani: {}
   }),
   actions: {
-    async naloziStrani () {
+    async naloziStrani (jezik) {
       const { jsonApiUrl, headers, deserialize } = useApi()
 
-      const data = await $fetch(`${jsonApiUrl}/node/page`, { headers })
+      const data = await $fetch(`${jsonApiUrl(jezik)}/node/page`, { headers })
       this.strani = await deserialize(data, s => ({
         id: s.id,
         naslov: s.title,