first commit 😇
This commit is contained in:
217
src/components/Score.vue
Normal file
217
src/components/Score.vue
Normal file
@ -0,0 +1,217 @@
|
||||
<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,
|
||||
};
|
||||
})
|
||||
.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,
|
||||
value: null,
|
||||
title: translation.length > 0 ? translation[0].title : "",
|
||||
answers: formatAnswers(question.answers),
|
||||
};
|
||||
})
|
||||
.filter((question) => question.title);
|
||||
}
|
||||
|
||||
const title = score ? score.title : "";
|
||||
const questions = ref(formatScore(score));
|
||||
function nextQuestion() {
|
||||
setTimeout(() => slides.value.go(">"), 100);
|
||||
}
|
||||
const scoreSum = computed(() => {
|
||||
return questions.value
|
||||
.map((question) => question.value)
|
||||
.reduce((value, currentValue) => value + currentValue, 0);
|
||||
});
|
||||
const displayScoreResult = computed(
|
||||
() => !questions.value.filter((q) => q.value == 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
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ScoreHeader v-if="title" :title="title" />
|
||||
<Splide
|
||||
ref="slides"
|
||||
v-if="questions"
|
||||
:options="{
|
||||
pagination: false,
|
||||
speed: 700,
|
||||
height: '100vh - var(--header-size)',
|
||||
arrows: false,
|
||||
direction: 'ttb',
|
||||
wheel: true,
|
||||
releaseWheel: true,
|
||||
}"
|
||||
>
|
||||
<SplideSlide v-for="question in questions" :key="question.id">
|
||||
<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"
|
||||
:name="`question_${question.id}`"
|
||||
:value="answer.weight"
|
||||
@change="
|
||||
(event) => (question.value = parseFloat(event.target.value))
|
||||
"
|
||||
@click="nextQuestion"
|
||||
/>
|
||||
{{ answer.title }}
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
</SplideSlide>
|
||||
<SplideSlide>
|
||||
<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>
|
||||
Vous n'avez pas répondu à toutes les questions.
|
||||
</template>
|
||||
</SplideSlide>
|
||||
</Splide>
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
.splide
|
||||
position: fixed
|
||||
top: var(--header-size)
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: transparent
|
||||
|
||||
.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
|
||||
|
||||
.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
|
||||
</style>
|
||||
65
src/components/ScoreHeader.vue
Normal file
65
src/components/ScoreHeader.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<p>⇠</p>
|
||||
</router-link>
|
||||
<h1>{{ title }}</h1>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
height: var(--header-size);
|
||||
position: fixed;
|
||||
background: #ede0d4;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
border-bottom: 1px solid black;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
a {
|
||||
height: 100%;
|
||||
width: var(--header-size);
|
||||
min-width: var(--header-size);
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
border-right: 1px solid black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 auto;
|
||||
font-size: 2rem;
|
||||
color: black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 1rem;
|
||||
line-height: 0.9;
|
||||
flex: 1;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
p {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
45
src/components/ScoresList.vue
Normal file
45
src/components/ScoresList.vue
Normal file
@ -0,0 +1,45 @@
|
||||
<script setup>
|
||||
import data from "@/data.json";
|
||||
import { useStore } from "@/stores";
|
||||
|
||||
const store = useStore();
|
||||
const language = store.language;
|
||||
|
||||
const translationKey = "languages_id";
|
||||
const scores = data.filter((score) => {
|
||||
return (
|
||||
!!score.translations.find(
|
||||
(translation) => translation[translationKey] == language
|
||||
) &&
|
||||
score.results.length &&
|
||||
score.questions.length
|
||||
);
|
||||
});
|
||||
function getTranslation(translations, key) {
|
||||
return translations.find((translation) => translation[key] == language);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>Ceiba Scores App</h1>
|
||||
<template v-if="scores">
|
||||
<ul>
|
||||
<li v-for="score in scores" :key="score.id">
|
||||
<router-link :to="{ name: 'score', params: { id: score.id } }">{{
|
||||
getTranslation(score.translations, "languages_id").title
|
||||
}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
h1
|
||||
background: var(--color-background)
|
||||
text-align: center
|
||||
margin: 1rem
|
||||
padding: 0
|
||||
ul
|
||||
margin: 1rem
|
||||
padding: 0 0 0 1rem
|
||||
</style>
|
||||
Reference in New Issue
Block a user