Fix language switcher

Jurij Podgoršek 2024-04-01 19:59:09 +02:00
parent 16763e3d69
commit f672a94d8d
15 changed files with 67 additions and 40 deletions

View File

@ -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>

View File

@ -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)

View File

@ -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
}, {})
}

View File

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

View File

@ -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"
}

View File

@ -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'
}
})

View File

@ -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>

View File

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

View File

@ -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)"

View File

Before

Width:  |  Height:  |  Size: 514 B

After

Width:  |  Height:  |  Size: 514 B

View File

@ -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)
}
}
}

View File

@ -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,

View File

@ -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,

View File

@ -206,14 +206,16 @@ parameters:
# for more information about the topic in general.
# Note: By default the configuration is disabled.
cors.config:
enabled: true
enabled: false
# Specify allowed headers, like 'x-allowed-header'.
allowedHeaders: []
# Specify allowed request methods, specify ['*'] to allow all possible ones.
allowedMethods: []
# Configure requests allowed from specific origins. Do not include trailing
# slashes with URLs.
allowedOrigins: ['yufu.kompot.si', 'localhost']
allowedOrigins: ['*']
# Configure requests allowed from origins, matching against regex patterns.
allowedOriginsPatterns: []
# Sets the Access-Control-Expose-Headers header.
exposedHeaders: false
# Sets the Access-Control-Max-Age header.