nuxt-prawo-jazdy/pages/exam.vue

<script lang="ts" setup>
import {
  intervalToDuration,
  addMinutes,
  addSeconds,
  isEqual,
  isAfter,
} from 'date-fns';
import { useExamStore } from '~/store/examStore';

definePageMeta({
  middleware: 'exam',
});

const examStore = useExamStore();
const basicStore = useBasicStore();
const advancedStore = useAdvancedStore();
// await callOnce(() => examStore.mildReset(), { mode: 'navigation' });

useHead({
  title: 'Pytanie 1/20',
});

const now = ref('basic');

const nowTime = ref(new Date());
const timeEnd = addMinutes(new Date(), 25);

const timeRemainingTotal = computed(() =>
  intervalToDuration({
    start: nowTime.value,
    end: timeEnd,
  }),
);
// const timeRemainingQuestion - to implement

onMounted(() => {
  const endInterval = setInterval(() => {
    nowTime.value = addSeconds(nowTime.value, 1);
    if (isEqual(nowTime.value, timeEnd) || isAfter(nowTime.value, timeEnd)) {
      clearInterval(endInterval);
      endExam();
    }
  }, 999);

  watchEffect(() => {
    if (now.value === 'basic')
      useHead({ title: `Pytanie ${countBasic.value + 1}/20` });
    if (now.value === 'advanced')
      useHead({ title: `Pytanie ${countAdvanced.value + 1}/12` });
  });
});

const {
  data: dataBasic,
  error: errorBasic,
  status: statusBasic,
} = await useLazyFetch<BasicQuestion[]>(`/api/basic`, {
  query: {
    category: examStore.category,
  },
});

const {
  data: dataAdvanced,
  error: errorAdvanced,
  status: statusAdvanced,
} = await useLazyFetch<AdvancedQuestion[]>(`/api/advanced`, {
  query: {
    category: examStore.category,
  },
});

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

const answer = ref<string>('');

const ending = ref(false);

const questionBasic = computed<BasicQuestion | undefined>(() =>
  dataBasic.value?.at(countBasic.value),
);
const questionAdvanced = computed<AdvancedQuestion | undefined>(() =>
  dataAdvanced.value?.at(countAdvanced.value),
);

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

const result: Ref<ResultEndType> = ref({
  basic: [],
  advanced: [],
});

function next() {
  result.value[now.value as keyof ResultEndType].push({
    question: question.value,
    chosen_answer: answer.value,
    correct_answer: question.value?.correct_answer ?? null,
    chosen_is_correct: answer.value == question.value?.correct_answer,
  });
  answer.value = '';

  if (now.value === 'basic') {
    if (countBasic.value + 1 <= 19) {
      countBasic.value++;
    } else {
      now.value = 'advanced';
      countAdvanced.value++;
    }
  } else if (now.value === 'advanced') {
    if (countAdvanced.value + 1 <= 11) {
      countAdvanced.value++;
    } else if (countAdvanced.value + 1 >= 12) {
      ending.value = true;
    } else {
      // error?
    }
  }
}

function endExam() {
  loading.value = true;
  while (ending.value == false) next();
  examStore.setBasic(result.value.basic);
  examStore.setAdvanced(result.value.advanced);
  examStore.setEnd(true);
  while (true) {
    if (
      basicStore.basic == result.value.basic &&
      advancedStore.advanced == result.value.advanced &&
      examStore.end
    ) {
      return navigateTo(`/result`, { replace: true });
    }
  }
}

const loading = ref(false);
</script>

<template>
  <div>
    <!-- as in to transition to the next page -->
    <LoadingScreen v-if="loading" />
    <div v-if="statusBasic === 'success' && statusAdvanced === 'success'">
      <div class="grid grid-cols-4 min-h-dvh">
        <div class="col-span-3 flex flex-col">
          <BarTop
            :points="question?.weight"
            :category="examStore.category"
            :time-remaining="timeRemainingTotal"
          />
          <MediaBox :media-path="question?.media_url" />
          <QuestionBasic
            v-if="now === 'basic'"
            v-model="answer"
            phase="exam"
            :question="questionBasic"
          />
          <QuestionAdvanced
            v-else-if="now === 'advanced'"
            v-model="answer"
            phase="exam"
            :question="questionAdvanced"
          />
        </div>
        <BarRightExam
          :count-basic="countBasic"
          :count-advanced="countAdvanced"
          :now="now"
          :ending="ending"
          @next-question="next()"
          @end-exam="endExam()"
        />
      </div>
    </div>
    <div v-else-if="statusBasic === 'error' || statusAdvanced === 'error'">
      An API error occurred: {{ errorBasic }} {{ errorAdvanced }}
    </div>
    <LoadingScreen v-else />
  </div>
</template>