50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import categories, { opis, wiek } from '~/categories';
|
|
|
|
onMounted(() => {
|
|
useHead({
|
|
title: 'Test na prawo jazdy',
|
|
});
|
|
});
|
|
|
|
const loading = ref(false);
|
|
|
|
const examStore = useExamStore();
|
|
await callOnce(() => examStore.resetExam(), { mode: 'navigation' });
|
|
|
|
function setAndGo(category: string) {
|
|
loading.value = true;
|
|
examStore.setCategory(category);
|
|
while (true) {
|
|
if (examStore.category === category) {
|
|
return navigateTo('/exam');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div v-if="!loading" class="text-3xl m-2 flex flex-col gap-2">
|
|
<span>Test na prawo jazdy</span>
|
|
<div
|
|
class="flex flex-col flex-wrap gap-2 items-start p-4 bg-slate-100 border-1 border-slate-500 rounded-xl w-fit"
|
|
>
|
|
<div
|
|
v-for="[index, category] of categories.entries()"
|
|
:key="`btn-${category}`"
|
|
class="flex flex-row gap-3 items-center"
|
|
>
|
|
<button class="btn btn-xl btn-secondary" @click="setAndGo(category)">
|
|
{{ category }}
|
|
</button>
|
|
<div class="flex flex-col text-sm">
|
|
<div>{{ opis[index] }}</div>
|
|
<div>{{ wiek[index] }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<LoadingScreen v-else />
|
|
</div>
|
|
</template>
|