nuxt-prawo-jazdy/pages/result.vue

132 lines
3.2 KiB
Vue

<script setup lang="ts">
import { ModalsContainer, useModal } from "vue-final-modal";
import ResultModal from "~/components/ResultModal.vue";
definePageMeta({
layout: "exam",
});
const examStore = useExamStore();
const points = ref<number>();
if (!examStore.end) {
examStore.resetExam();
await navigateTo("/");
} else {
let sum = 0;
examStore.result.basic.forEach((answer) => {
if (answer.chosen_is_correct) {
sum += answer.question?.liczba_pkt ?? 0;
}
});
examStore.result.advanced.forEach((answer) => {
if (answer.chosen_is_correct) {
sum += answer.question?.liczba_pkt ?? 0;
}
});
points.value = sum;
}
const countBasic = ref(0);
const countAdvanced = ref(0);
const resultQuestionBasic = computed<ResultType<BasicQuestion> | undefined>(
() => examStore.result.basic.at(countBasic.value)
);
const resultQuestionAdvanced = computed<
ResultType<AdvancedQuestion> | undefined
>(() => examStore.result.advanced.at(countAdvanced.value));
const questionBasic = computed<BasicQuestion | undefined>(
() => resultQuestionBasic.value?.question
);
const questionAdvanced = computed<AdvancedQuestion | undefined>(
() => 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;
}
});
const tak_nie_model = computed(() =>
resultQuestionBasic.value?.chosen_answer.toLowerCase()
);
const abc_model = computed(() =>
resultQuestionAdvanced.value?.chosen_answer.toLowerCase()
);
const media = computed(() => {
const mediaSplit = question.value?.media?.split(".");
return {
fileType: mediaSplit?.pop()?.toLowerCase(),
fileName: mediaSplit?.join("."),
ogName: question.value?.media,
};
});
const { open, close } = useModal({
component: ResultModal,
attrs: {
title: "Egzamin teorytyczny",
onClose() {
close();
},
onHomepage() {
return navigateTo("/");
},
onNewExam() {
return navigateTo("/exam");
},
},
slots: {
points: `${points.value}`,
},
});
open();
</script>
<template>
<div>
<ModalsContainer />
<div>
<div class="grid grid-cols-4 min-h-dvh">
<div class="col-span-3 flex flex-col gap-4">
<TopBar :points="question?.liczba_pkt" :category="`B`" />
<Media :media="media" />
<BasicQuestionBlock
v-if="now == 'basic'"
:question="questionBasic"
v-model="tak_nie_model"
class="select-none z-[-1]"
/>
<AdvancedQuestionBlock
v-else-if="now == 'advanced'"
:question="questionAdvanced"
v-model="abc_model"
class="select-none z-[-1]"
/>
</div>
<RightBarResult
:question="question"
:question-basic="questionBasic"
:question-advanced="questionAdvanced"
:count-basic="countBasic"
:count-advanced="countAdvanced"
:now="now"
/>
<!-- :result="result" -->
<!-- @next-question="next()" -->
</div>
</div>
</div>
</template>