302 lines
7.6 KiB
Vue
302 lines
7.6 KiB
Vue
<script setup>
|
|
import data from "@/data.json";
|
|
|
|
import { ref, computed } from "vue";
|
|
|
|
import { useStore } from "@/stores";
|
|
|
|
import { Splide, SplideSlide } from "@splidejs/vue-splide";
|
|
import "@splidejs/splide/dist/css/splide.min.css";
|
|
import ScoreHeader from "./ScoreHeader.vue";
|
|
|
|
const props = defineProps({
|
|
id: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const score = data.find((score) => score.id == props.id);
|
|
const slides = ref();
|
|
|
|
const store = useStore();
|
|
const language = store.language;
|
|
|
|
function formatAnswers(answers) {
|
|
return answers
|
|
.map((answer) => answer.answers_id)
|
|
.map((answer) => {
|
|
const translation = answer.translations.filter(
|
|
(item) => item.languages_code == language
|
|
);
|
|
return {
|
|
id: answer.id,
|
|
title: translation.length > 0 ? translation[0].title : "",
|
|
weight: answer.weight,
|
|
image: answer.image,
|
|
};
|
|
})
|
|
.filter((answer) => answer.title);
|
|
}
|
|
|
|
function formatScore(score) {
|
|
return score.questions
|
|
.map((question) => question.questions_id)
|
|
.map((question) => {
|
|
const translation = question.translations.filter(
|
|
(item) => item.languages_code == language
|
|
);
|
|
return {
|
|
id: question.id,
|
|
weight: null,
|
|
title: translation.length > 0 ? translation[0].title : "",
|
|
answers: formatAnswers(question.answers),
|
|
splide: ref(),
|
|
};
|
|
})
|
|
.filter((question) => question.title);
|
|
}
|
|
|
|
const title = score ? score.title : "";
|
|
const questions = ref(formatScore(score));
|
|
console.log(questions.value)
|
|
function nextQuestion() {
|
|
setTimeout(() => slides.value.go(">"), 100);
|
|
}
|
|
const scoreSum = computed(() => {
|
|
return questions.value
|
|
.map((question) => question.weight)
|
|
.reduce((value, currentValue) => value + currentValue, 0);
|
|
});
|
|
const displayScoreResult = computed(
|
|
() => !questions.value.filter((q) => q.weight == null).length
|
|
);
|
|
function getResultsFromScore(score) {
|
|
return score.results
|
|
.map((result) => result.results_id)
|
|
.map((result) => {
|
|
const translation = result.translations.filter(
|
|
(item) => item.languages_code == language
|
|
);
|
|
return {
|
|
id: result.id,
|
|
max: result.max,
|
|
min: result.min,
|
|
pde_qtra: result.pde_qtra,
|
|
effets: translation.length > 0 ? translation[0].effets : "",
|
|
facteur: translation.length > 0 ? translation[0].facteur : "",
|
|
pde: translation.length > 0 ? translation[0].pde : "",
|
|
};
|
|
});
|
|
}
|
|
const results = ref(getResultsFromScore(score));
|
|
const result = computed(() =>
|
|
displayScoreResult.value
|
|
? results.value
|
|
.filter((r) => r.min <= scoreSum.value)
|
|
.filter((r) => !r.max || r.max >= scoreSum.value)[0]
|
|
: 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()
|
|
}
|
|
function geQuestionSlide(question) {
|
|
slides.value.go(questions.value.findIndex((element, index) => element.id === question.id))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ScoreHeader v-if="title" :title="title" />
|
|
<Splide
|
|
ref="slides"
|
|
class="questions"
|
|
v-if="questions"
|
|
:options="{
|
|
pagination: false,
|
|
speed: 700,
|
|
height: '100%',
|
|
arrows: false,
|
|
direction: 'ttb',
|
|
wheel: true,
|
|
releaseWheel: true,
|
|
}"
|
|
>
|
|
<SplideSlide v-for="question in questions" :key="question.id">
|
|
<div class="main">
|
|
<div class="top">
|
|
<legend>{{ question.title }}</legend>
|
|
<template v-if="question.answers">
|
|
<div class="choice" v-for="answer in question.answers" :key="answer.id">
|
|
<label>
|
|
<input
|
|
type="radio"
|
|
:data-answerId="answer.id"
|
|
:name="`question_${question.id}`"
|
|
:value="answer.weight"
|
|
@change="(event) => {question.weight = parseFloat(event.target.value)}"
|
|
@click="nextQuestion"
|
|
/>
|
|
{{ answer.title }}
|
|
</label>
|
|
</div>
|
|
</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 class="latest">
|
|
<template v-if="displayScoreResult && result">
|
|
<ul>
|
|
<li>score : {{ scoreSum }}</li>
|
|
<li>pde : {{ result.pde }}</li>
|
|
<li>pde_qtra : {{ result.pde_qtra }}</li>
|
|
<li>effets : {{ result.effets }}</li>
|
|
<li>facteur : {{ result.facteur }}</li>
|
|
</ul>
|
|
<div class="gradient">
|
|
<div
|
|
v-for="(item, index) in [...Array(7).keys()]"
|
|
:class="{ active: result && result.pde_qtra === index + 1 }"
|
|
:key="item"
|
|
>
|
|
{{ index + 1 }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="noscore">
|
|
<p>
|
|
Aucun score peut vous être proposé, vous devez faire une selection sur les vecteurs suivants :
|
|
</p>
|
|
<ul>
|
|
<li v-for="question in questions.filter(q => q.weight == null)" :key="question.id">
|
|
<a @click="(event) => {geQuestionSlide(question);return false}" href="javascript:;">{{ question.title }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</SplideSlide>
|
|
</Splide>
|
|
</template>
|
|
|
|
<style lang="sass" scoped>
|
|
.noscore
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
height: 100%
|
|
color: var(--color-white)
|
|
flex-direction: column
|
|
|
|
p
|
|
font-size: 1rem
|
|
text-align: center
|
|
margin-bottom: 1rem
|
|
a
|
|
color: var(--color-white)
|
|
.questions
|
|
position: fixed
|
|
top: var(--header-size)
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
background: transparent
|
|
|
|
input[type=radio]
|
|
margin-right: .5rem
|
|
|
|
|
|
.splide__slide
|
|
background: transparent
|
|
position: relative
|
|
padding: 1rem
|
|
|
|
.splide__track
|
|
overflow: visible!important
|
|
|
|
legend
|
|
font-size: 1.1rem
|
|
font-weight: bold
|
|
|
|
label
|
|
display: inline-block
|
|
width: 100%
|
|
padding: .3rem
|
|
|
|
.latest
|
|
background-color: var(--color-green)
|
|
color: var(--color-black)
|
|
|
|
.gradient
|
|
width: calc(100% - 2rem)
|
|
padding: 0 1rem
|
|
height: 3rem
|
|
background-image: linear-gradient(to right, red, red, rgb(255, 255, 0), rgb(255, 255, 0), green, green)
|
|
display: flex
|
|
margin: 2.5rem 0
|
|
align-items: center
|
|
border-radius: 3px
|
|
position: absolute
|
|
bottom: 0
|
|
|
|
div
|
|
width: calc(100%/7)
|
|
text-align: center
|
|
align-self: center
|
|
|
|
.active
|
|
border: 1px solid black
|
|
border-radius: 3px
|
|
height: 200%
|
|
font-weight: bold
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
|
|
&::before
|
|
content: "PdE\AQTRA"
|
|
position: absolute
|
|
font-size: .5rem
|
|
top: 0
|
|
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>
|