feat: Ajout de la traduction par défaut
continuous-integration/drone Build was killed Details

This commit is contained in:
Simon 2023-01-17 16:46:50 +01:00
parent 5b990d98cc
commit 107425427b
3 changed files with 77 additions and 54 deletions

View File

@ -32,12 +32,11 @@ function formatAnswers(answers) {
); );
return { return {
id: answer.id, id: answer.id,
title: translation.length > 0 ? translation[0].title : "", title: translation.length > 0 ? translation[0].title : answer.title,
weight: answer.weight, weight: answer.weight,
image: answer.image, image: answer.image,
}; };
}) })
.filter((answer) => answer.title);
} }
function formatScore(score) { function formatScore(score) {
@ -51,12 +50,11 @@ function formatScore(score) {
return { return {
id: question.id, id: question.id,
weight: answers[0].weight, weight: answers[0].weight,
title: translation.length > 0 ? translation[0].title : "", title: translation.length > 0 ? translation[0].title : question.title,
answers: answers, answers: answers,
splide: ref(), splide: ref(),
}; };
}) })
.filter((question) => question.title);
} }
const title = score ? score.title : ""; const title = score ? score.title : "";

View File

@ -3,33 +3,39 @@ import data from "@/data.json";
import { useStore } from "@/stores"; import { useStore } from "@/stores";
const store = useStore(); const store = useStore();
const language = store.language;
const translationKey = "languages_id"; const translationKey = "languages_id";
const scores = data.filter((score) => { const scores = data.filter((score) => {
return ( return (
!!score.translations.find( !!score.translations.find(
(translation) => translation[translationKey] == language (translation) => translation[translationKey] == store.language
) && ) &&
score.results.length && score.results.length &&
score.questions.length score.questions.length
); );
}); });
function getTranslation(translations, key) { function getTranslation(translations, key) {
return translations.find((translation) => translation[key] == language); return translations.find((translation) => translation[key] == store.language);
}
function changeLanguage() {
store.changeLanguage()
} }
</script> </script>
<template> <template>
<header> <header>
<h1>Ceiba Scores App</h1> <h1>Ceiba Scores App</h1>
<ul>
<li v-if="store.language == 'en-US'" @click="changeLanguage">🇫🇷</li>
<li v-if="store.language == 'fr-FR'" @click="changeLanguage">🇺🇸</li>
</ul>
</header> </header>
<main> <main>
<div class="container" v-if="scores"> <div class="container" v-if="scores">
<ul> <ul>
<li v-for="score in scores" :key="score.id" :id="`score_${score.id}`"> <li v-for="score in scores" :key="score.id" :id="`score_${score.id}`">
<router-link :to="{ name: 'score', params: { id: score.id } }">{{ <router-link :to="{ name: 'score', params: { id: score.id } }">{{
getTranslation(score.translations, "languages_id").title1 getTranslation(score.translations, "languages_id").title
}}</router-link> }}</router-link>
</li> </li>
</ul> </ul>
@ -42,7 +48,7 @@ header
height: var(--header-size) height: var(--header-size)
overflow: hidden overflow: hidden
display: flex display: flex
justify-content: center justify-content: space-around
align-items: center align-items: center
border-bottom: 2px solid var(--color-text) border-bottom: 2px solid var(--color-text)
background: var(--color-green) background: var(--color-green)
@ -50,6 +56,20 @@ header
h1 h1
text-align: center text-align: center
ul
margin: 0
padding: 0
list-style: none
text-align: center
font-size: 1.5rem
a
text-decoration: none
.hidden
display: none
main main
width: 100% width: 100%
height: calc(100% - var(--header-size)) height: calc(100% - var(--header-size))
@ -72,53 +92,53 @@ main
width: 440px width: 440px
height: calc(440px * 1136 / 724) height: calc(440px * 1136 / 724)
ul ul
margin: 0 margin: 0
padding: 0 padding: 0
list-style: none list-style: none
position: absolute
top: 0
left: 0
bottom: 0
right: 0
background-image: url(/arbre.webp)
background-position: center
background-repeat: no-repeat
background-size: contain
border-radius: 10px
li
display: none
background: rgba(0, 0, 0, .5)
border-radius: 10px
position: absolute position: absolute
border: 2px solid var(--color-text) top: 0
left: 0
bottom: 0
right: 0
&#score_1 background-image: url(/arbre.webp)
background-position: center
background-repeat: no-repeat
background-size: contain
border-radius: 10px
li
display: none
background: rgba(0, 0, 0, .5)
border-radius: 10px
position: absolute
border: 2px solid var(--color-text)
&#score_1
display: flex
top: 40%
bottom: 35%
left: 20%
right: 20%
&#score_6
display: flex
top: 72%
bottom: 5%
left: 6%
right: 6%
a
color: var(--color-text)
display: block
width: 100%
height: 100%
display: flex display: flex
top: 40% align-items: center
bottom: 35% justify-content: center
left: 20% text-align: center
right: 20%
&#score_6
display: flex
top: 72%
bottom: 5%
left: 6%
right: 6%
a
color: var(--color-text)
display: block
width: 100%
height: 100%
display: flex
align-items: center
justify-content: center
text-align: center
</style> </style>

View File

@ -8,4 +8,9 @@ export const useStore = defineStore({
persist: { persist: {
enabled: true, enabled: true,
}, },
actions: {
changeLanguage() {
this.language = this.language == "fr-FR" ? "en-US" : "fr-FR"
},
},
}); });