nuxt-prawo-jazdy/pages/result.vue

<script setup lang="ts">
import ResultModal from '~/components/ResultModal.vue';

definePageMeta({ middleware: ['result'] });

const examStore = useExamStore();

const basicStore = useBasicStore();
const advancedStore = useAdvancedStore();

const loading = ref(false);

const points = ref<number>(0);

basicStore.basic.forEach((answer) => {
  if (answer.chosen_is_correct) {
    points.value += answer.question?.weight ?? 0;
  }
});
advancedStore.advanced.forEach((answer) => {
  if (answer.chosen_is_correct) {
    points.value += answer.question?.weight ?? 0;
  }
});

const resultTrueFalse = ref(
  points.value >= 68 ? $t('positive') : $t('negative'),
);

onMounted(() => {
  useHead({
    title: `${
      String(resultTrueFalse.value[0]).toUpperCase() +
      String(resultTrueFalse.value).slice(1)
    } (${points.value}/74)`,
  });
});

const countBasic = ref(0);
const countAdvanced = ref(0);

const resultQuestionBasic = computed<ResultType | undefined>(() =>
  basicStore.basic.at(countBasic.value),
);
const resultQuestionAdvanced = computed<ResultType | undefined>(() =>
  advancedStore.advanced.at(countAdvanced.value),
);

const questionBasic = computed<Question>(
  () => resultQuestionBasic.value?.question,
);
const questionAdvanced = computed<Question>(
  () => resultQuestionAdvanced.value?.question,
);

const now = ref('basic');

const question = computed(() => {
  if (now.value === 'basic') {
    return questionBasic.value;
  } else if (now.value === 'advanced') {
    return questionAdvanced.value;
  } else {
    return null;
  }
});

const resultQuestion = computed(() => {
  if (now.value === 'basic') {
    return resultQuestionBasic.value;
  } else if (now.value === 'advanced') {
    return resultQuestionAdvanced.value;
  } else {
    return null;
  }
});

const answer = computed(() => resultQuestion.value?.chosen_answer);

function changeNow(to: string) {
  now.value = to;
}

function changeCount(num: number) {
  if (now.value === 'basic') {
    countBasic.value = num;
  } else if (now.value === 'advanced') {
    countAdvanced.value = num;
  }
}

const localePath = useLocalePath();

async function again() {
  loading.value = true;
  await examStore.mildReset();
  return await navigateTo(localePath('exam'));
}

async function home() {
  loading.value = true;
  await examStore.resetExam();
  return await navigateTo(localePath('index'));
}
</script>

<template>
  <div>
    <LoadingScreen v-if="loading" />
    <div v-else>
      <ResultModal @again="again" @home="home">
        <template #title>{{ $t('theoreticalExam') }}</template>
        <template #category>{{ examStore.category }}</template>
        <template #points>{{ points }}</template>
        <template #resultTrueFalse>{{ resultTrueFalse }} </template>
      </ResultModal>
      <div>
        <div class="grid grid-cols-4 min-h-dvh">
          <div class="col-span-3 flex flex-col">
            <BarTop :points="question?.weight" :category="examStore.category" />
            <MediaBox :media-path="question?.media_url" phase="" />
            <div>
              <QuestionBasic
                v-if="now === 'basic'"
                v-model="answer"
                :question="questionBasic"
                phase="result"
                class="select-none z-[-1]"
              />
              <QuestionAdvanced
                v-else-if="now === 'advanced'"
                v-model="answer"
                :question="questionAdvanced"
                phase="result"
                class="select-none z-[-1]"
              />
            </div>
          </div>
          <BarRightResult
            :result="{
              basic: basicStore.basic,
              advanced: advancedStore.advanced,
            }"
            :count-basic="countBasic"
            :count-advanced="countAdvanced"
            :now="now"
            @change-now="changeNow"
            @change-count="changeCount"
            @home="home"
            @again="again"
          >
            <template #points>{{ points }}</template>
            <template #resultTrueFalse>{{ resultTrueFalse }}</template>
          </BarRightResult>
        </div>
      </div>
    </div>
  </div>
</template>