ceiba-scores/src/components/Score.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));

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) => 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
    position: relative

    &::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>