ceiba-scores/src/components/Score.vue

442 lines
11 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 Question from "./Question.vue";
import "@splidejs/splide/dist/css/splide.min.css";
import ScoreHeader from "./ScoreHeader.vue";
import { toPng } from "html-to-image";
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 : answer.title,
weight: answer.weight,
image: answer.image,
};
});
}
function formatScore(score) {
return score.questions
.map((question) => question.questions_id)
.map((question) => {
const translation = question.translations.filter(
(item) => item.languages_code == language,
);
const answers = formatAnswers(question.answers);
return {
id: question.id,
weight: answers[0].weight,
title: translation.length > 0 ? translation[0].title : question.title,
function: question.function,
answers: answers,
splide: ref(),
};
});
}
function getTranslation(translations, key) {
return translations.find((translation) => translation[key] == store.language);
}
const trad = getTranslation(score.translations, "languages_id");
const title = score ? trad.title : "";
const link = score ? trad.link : "";
const questions = ref(formatScore(score));
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 : "",
title: translation.length > 0 ? translation[0].title : "",
};
})
.reverse();
}
const results = ref(getResultsFromScore(score));
const result = computed(() =>
displayScoreResult.value
? results.value
.filter((r) => !r.min || r.min <= scoreSum.value)
.filter((r) => !r.max || r.max >= scoreSum.value)[0]
: null,
);
function goQuestionSlide(question) {
console.log(slides.value);
slides.value.go(
questions.value.findIndex((element) => element.id === question.id),
);
}
function answerSelected(question, answerWeight) {
questions.value.find((q) => q.id === question.id).weight = answerWeight;
}
function nextQuestion() {
setTimeout(() => {
slides.value.go(">");
console.log(slides);
}, 100);
}
const saveAs = (blob, fileName) => {
var elem = window.document.createElement("a");
elem.href = blob;
elem.download = fileName;
elem.style = "display:none;";
(document.body || document.documentElement).appendChild(elem);
if (typeof elem.click === "function") {
elem.click();
} else {
elem.target = "_blank";
elem.dispatchEvent(
new MouseEvent("click", {
view: window,
bubbles: true,
cancelable: true,
}),
);
}
URL.revokeObjectURL(elem.href);
elem.remove();
};
const sharing = ref(false);
async function share() {
sharing.value = true;
const filter = (node) => {
const exclusionClasses = ["btn"];
return !exclusionClasses.some((classname) =>
node.classList?.contains(classname),
);
};
const body = document.querySelector("body");
body.classList.add("print");
const dataUrl = await toPng(body, { filter: filter });
body.classList.remove("print");
const fileName = new Date()
.toISOString()
.replace(/T/, "_")
.replace(/\..+/, "")
.replaceAll(":", "-");
saveAs(dataUrl, `Ceiba-score-${fileName}.png`);
sharing.value = false;
}
</script>
<template>
<ScoreHeader v-if="title" :title="title" :link="link" />
<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">
<Question
:question="question"
@answerSelected="answerSelected"
@nextQuestion="nextQuestion"
/>
</SplideSlide>
<SplideSlide class="latest">
<template v-if="displayScoreResult && result">
<div>
<h2 class="center">{{ trad.result_title }}</h2>
<h2 class="center">{{ result.title }}</h2>
<div :class="'gradient size-' + results.length">
<div
v-for="item in results"
:class="{ active: result && result.pde_qtra === item.pde_qtra }"
:key="item"
:data-title="trad.result_sigle"
>
{{ item.title }}
</div>
</div>
<div class="details">
<p>{{ trad.result_params }} :</p>
<br />
<ul>
<li v-for="question in questions" :key="question.id">
{{ question.title }} :
{{
question.answers.find(
(answer) => answer.weight === question.weight,
).title
}}
</li>
</ul>
</div>
<button class="btn download" @click="() => share()" v-if="!sharing">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
<path
fill="#D99E82"
d="M36 32c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4v-9c0-2.209.791-3 3-3h30c2.209 0 3 .791 3 3v9z"
/>
<path
fill="#662113"
d="M25 20c0 3.866-3.134 7-7 7s-7-3.134-7-7h14z"
/>
<path
fill="#C1694F"
d="M4 36h28c2.209 0 4-1.791 4-4H0c0 2.209 1.791 4 4 4z"
/>
<path
fill="#77B255"
d="M26.716 8h-4.783V2c0-1.105-.896-2-2-2h-4.001c-1.104 0-1.999.896-1.999 2v6H9.148c-1.223 0-1.516.623-.651 1.489l7.863 7.863c.865.865 2.28.865 3.146 0l7.863-7.863C28.232 8.623 27.94 8 26.716 8z"
/>
</svg>
</button>
<button class="btn spin" v-if="sharing">
<img src="/spin.svg" />
</button>
</div>
</template>
<template v-else>
<div class="noscore">
<p>
Aucun score ne peut vous être proposé, vous devez faire une
sélection sur les paramètres suivants :
</p>
<ul>
<li
v-for="question in questions.filter((q) => q.weight == null)"
:key="question.id"
>
<a
@click="
(event) => {
goQuestionSlide(question);
return false;
}
"
href="javascript:;"
>{{ question.title }}</a
>
</li>
</ul>
</div>
</template>
</SplideSlide>
</Splide>
</template>
<style lang="sass" scoped>
.spin
bottom: 1.5rem
right: 1.5rem
img
position: absolute
top: 50%
left: 50%
width: 30px
height: 30px
margin: -15px 0 0 -15px
-webkit-animation: spin 2s linear infinite
-moz-animation: spin 2s linear infinite
animation: spin 2s linear infinite
@-moz-keyframes spin
100%
-moz-transform: rotate(360deg)
@-webkit-keyframes spin
100%
-webkit-transform: rotate(360deg)
@keyframes spin
100%
-webkit-transform: rotate(360deg)
transform: rotate(360deg)
.center
text-align: center
.download
bottom: 1.5rem
right: 1.5rem
opacity: .7
.noscore
display: flex
justify-content: center
align-items: center
height: 100%
color: var(--color-text)
flex-direction: column
p
font-size: 1rem
text-align: center
margin-bottom: 1rem
a
color: var(--color-text)
.questions
position: fixed
top: var(--header-size)
left: 0
right: 0
bottom: 0
background: transparent
.splide__slide
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-highlight-background)
color: var(--color-highlight-text)
display: flex
align-items: center
justify-content: center
h2
font-size: 2rem
font-weight: bold
line-height: 2.4rem
& + h2
line-height: 3rem
font-size: 2.6rem
@media (max-height: 600px)
font-size: 1.5rem
& + h2
font-size: 2rem
ul
text-align: left
padding-left: 1.5rem
list-style-type: disc
.details
text-align: left !important
font-size: 1.1rem
line-height: normal
background: var(--color-highlight-background)
border: 1px solid var(--color-highlight-text)
padding: 1rem
background: rgba(0,0,0,0.2)
li
line-height: 1.5rem
.gradient
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 auto
align-items: center
border-radius: 3px
max-width: 30rem
text-shadow: 1px 1px 4px var(--color-highlight-text-invert),-1px -1px 4px var(--color-highlight-text-invert), -1px 1px 4px var(--color-highlight-text-invert), 1px -1px 4px var(--color-highlight-text-invert)
color: var(--color-highlight-text)
&.size-3 div
width: calc(100%/3)
&.size-4 div
width: calc(100%/4)
&.size-5 div
width: calc(100%/5)
&.size-6 div
width: calc(100%/6)
&.size-7 div
width: calc(100%/7)
div
text-align: center
align-self: center
font-weight: bold
.active
position: relative
&:before
content: ""
border: 1px solid var(--color-highlight-text)
border-radius: 3px
top: -2.8rem
bottom: -1.5rem
position: absolute
width: 100%
font-weight: bold
display: flex
align-items: center
justify-content: center
&::after
content: attr(data-title)
position: absolute
font-size: 1rem
top: -2rem
bottom: -1.5rem
left: 0
right: 0
line-height: .7rem
text-shadow: none
.splide__arrows
position: inherit
</style>