feat: Ajout du slider avec les photos

This commit is contained in:
Simon 2022-04-05 12:05:59 +02:00
parent 2ab3ecd9ef
commit 128c675f2a
2 changed files with 74 additions and 21 deletions

View File

@ -36,7 +36,6 @@
*::after { *::after {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
position: relative;
font-weight: normal; font-weight: normal;
} }

View File

@ -33,6 +33,7 @@ function formatAnswers(answers) {
id: answer.id, id: answer.id,
title: translation.length > 0 ? translation[0].title : "", title: translation.length > 0 ? translation[0].title : "",
weight: answer.weight, weight: answer.weight,
image: answer.image,
}; };
}) })
.filter((answer) => answer.title); .filter((answer) => answer.title);
@ -47,9 +48,10 @@ function formatScore(score) {
); );
return { return {
id: question.id, id: question.id,
value: null, weight: null,
title: translation.length > 0 ? translation[0].title : "", title: translation.length > 0 ? translation[0].title : "",
answers: formatAnswers(question.answers), answers: formatAnswers(question.answers),
splide: ref(),
}; };
}) })
.filter((question) => question.title); .filter((question) => question.title);
@ -57,16 +59,17 @@ function formatScore(score) {
const title = score ? score.title : ""; const title = score ? score.title : "";
const questions = ref(formatScore(score)); const questions = ref(formatScore(score));
console.log(questions.value)
function nextQuestion() { function nextQuestion() {
setTimeout(() => slides.value.go(">"), 100); setTimeout(() => slides.value.go(">"), 100);
} }
const scoreSum = computed(() => { const scoreSum = computed(() => {
return questions.value return questions.value
.map((question) => question.value) .map((question) => question.weight)
.reduce((value, currentValue) => value + currentValue, 0); .reduce((value, currentValue) => value + currentValue, 0);
}); });
const displayScoreResult = computed( const displayScoreResult = computed(
() => !questions.value.filter((q) => q.value == null).length () => !questions.value.filter((q) => q.weight == null).length
); );
function getResultsFromScore(score) { function getResultsFromScore(score) {
return score.results return score.results
@ -94,12 +97,21 @@ const result = computed(() =>
.filter((r) => !r.max || r.max >= scoreSum.value)[0] .filter((r) => !r.max || r.max >= scoreSum.value)[0]
: null : null
); );
function selectImage(event, question, answer) {
const input = document.querySelector(`input[name='question_${question.id}'][value='${answer.weight}']`)
if (input) {
input.checked = true
input.dispatchEvent(new Event("change"))
}
nextQuestion()
}
</script> </script>
<template> <template>
<ScoreHeader v-if="title" :title="title" /> <ScoreHeader v-if="title" :title="title" />
<Splide <Splide
ref="slides" ref="slides"
class="questions"
v-if="questions" v-if="questions"
:options="{ :options="{
pagination: false, pagination: false,
@ -112,23 +124,35 @@ const result = computed(() =>
}" }"
> >
<SplideSlide v-for="question in questions" :key="question.id"> <SplideSlide v-for="question in questions" :key="question.id">
<div class="main">
<div class="top">
<legend>{{ question.title }}</legend> <legend>{{ question.title }}</legend>
<template v-if="question.answers"> <template v-if="question.answers">
<div class="choice" v-for="answer in question.answers" :key="answer.id"> <div class="choice" v-for="answer in question.answers" :key="answer.id">
<label> <label>
<input <input
type="radio" type="radio"
:data-answerId="answer.id"
:name="`question_${question.id}`" :name="`question_${question.id}`"
:value="answer.weight" :value="answer.weight"
@change=" @change="(event) => {question.weight = parseFloat(event.target.value)}"
(event) => (question.value = parseFloat(event.target.value))
"
@click="nextQuestion" @click="nextQuestion"
/> />
{{ answer.title }} {{ answer.title }}
</label> </label>
</div> </div>
</template> </template>
</div>
<div class="bottom">
<template v-if="question.answers">
<Splide class="answers" :id="`question_${question.id}`" ref="question.splide">
<SplideSlide v-for="answer in question.answers" :key="answer.id" @click="(event) => selectImage(event, {...question}, {...answer})">
<img width="200" height="200" :src="`/answers/${answer.image}.png`">
</SplideSlide>
</Splide>
</template>
</div>
</div>
</SplideSlide> </SplideSlide>
<SplideSlide class="latest"> <SplideSlide class="latest">
<template v-if="displayScoreResult && result"> <template v-if="displayScoreResult && result">
@ -157,7 +181,7 @@ const result = computed(() =>
</template> </template>
<style lang="sass" scoped> <style lang="sass" scoped>
.splide .questions
position: fixed position: fixed
top: var(--header-size) top: var(--header-size)
left: 0 left: 0
@ -165,6 +189,10 @@ const result = computed(() =>
bottom: 0 bottom: 0
background: transparent background: transparent
input[type=radio]
margin-right: .5rem
.splide__slide .splide__slide
background: transparent background: transparent
position: relative position: relative
@ -217,4 +245,30 @@ label
font-size: .5rem font-size: .5rem
top: 0 top: 0
line-height: .7rem line-height: .7rem
.main
height: 100%
max-width: 100%
display: flex
flex-direction: column
justify-content: space-around
align-items: center
.bottom
width: 400px
max-width: 100%
min-width: 280px
.answers
text-align: center
.splide__arrows
position: inherit
@media only screen and (orientation : landscape)
.main
flex-direction: row
.bottom
max-width: 50%
</style> </style>