merge basic and advanced "screen", fix category in api

components/BasicQuestionBlock.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import type { BasicQuestion } from "@/types/basic";
-
 defineProps<{
   question: BasicQuestion | undefined;
 }>();
@@ -9,7 +7,7 @@ const tak_nie_model = defineModel();
 </script>
 
 <template>
-  <div>
+  <div class="flex flex-col gap-3">
     <div>{{ question?.pytanie }}</div>
     <div>
       <div class="flex flex-row justify-around">

components/Media.vue

@@ -11,7 +11,7 @@ defineProps<{
   <div
     class="select-none z-[-1] w-full flex items-center justify-center *:object-contain *:object-contain *:*:object-contain flex-1"
   >
-    <div class="w-full *:w-full">
+    <div class="w-full *:w-full text-center">
       <img
         :src="cdnUrl + [media.fileName, media.fileType].join('.')"
         alt=""
@@ -23,7 +23,7 @@ defineProps<{
           type="video/mp4"
         />
       </video>
-      <span v-else>Brak mediów</span>
+      <span v-else class="text-4xl font-bold">Brak mediów</span>
     </div>
   </div>
 </template>

components/RightBar.vue

@@ -3,30 +3,32 @@ import "7.css/dist/7.scoped.css";
 
 defineProps<{
   questionaries: BasicQuestion[] | null;
-  count: number;
-  data: BasicQuestion[] | null;
+  countBasic: number;
+  countAdvanced: number;
+  dataBasic: BasicQuestion[] | null;
+  dataAdvanced: AdvancedQuestion[] | null;
 }>();
 </script>
 
 <template>
-  <div class="flex flex-col items-center">
+  <div class="flex flex-col items-center p-4 gap-10">
     <div>
       <button class="btn-major">Zakończ egzamin</button>
     </div>
-    <div class="flex flex-row">
+    <div class="flex flex-row gap-6">
       <div>
         Pytania podstawowe
         <div class="win7">
           <div
             role="progressbar"
-            class="animate"
+            class="animate relative min-h-6"
             aria-valuemin="0"
-            aria-valuemax="100"
-            aria-valuenow="80"
+            :aria-valuemax="dataBasic?.length"
+            :aria-valuenow="countBasic + 1"
           >
-            <div class="w-[60%] relative">
-              <div class="absolute top-0 w-full text-center">
-                {{ count + 1 }} / {{ data?.length }}
+            <div :class="`w-${countBasic + 1}/${dataBasic?.length}`">
+              <div class="absolute top-0 w-full text-center font-semibold">
+                {{ countBasic + 1 }} / {{ dataBasic?.length }}
               </div>
             </div>
           </div>
@@ -34,10 +36,43 @@ defineProps<{
       </div>
       <div>
         Pytania specjalistyczne
-        <div class="progressive">{{ count + 1 }} / {{ data?.length }}</div>
+        <div class="win7">
+          <div
+            role="progressbar"
+            class="animate relative min-h-6"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow="80"
+          >
+            <div class="w-[60%]">
+              <div class="absolute top-0 w-full text-center">
+                {{ countAdvanced + 1 }} / {{ dataAdvanced?.length }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div>
+      Czas na zapoznanie się z treścią pytania<br />
+      Czas na odpowiedź
+      <div class="btn-major">START</div>
+      <div class="win7">
+        <div
+          role="progressbar"
+          class="animate relative min-h-6"
+          aria-valuemin="0"
+          aria-valuemax="30"
+          aria-valuenow="10"
+        >
+          <div class="w-[60%]">
+            <div class="absolute top-0 w-full text-center font-semibold">
+              10 sekund
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-    <div>TimeLeft (implement)</div>
     <div>
       <button @click="$emit('next-question')" class="btn-major">
         Następne pytanie
@@ -45,6 +80,7 @@ defineProps<{
     </div>
 
     <br />
-    {{ questionaries }}
+
+    <div class="max-h-[300px] overflow-y-scroll">{{ questionaries }}</div>
   </div>
 </template>

pages/exam.vue

@@ -1,20 +1,29 @@
 <script lang="ts" setup>
-import type { BasicQuestion } from "@/types/basic";
-
 import "7.css/dist/7.scoped.css";
 
 useHead({
   title: "Pytanie 1/20",
 });
 
-const { data, error, status } = await useFetch<BasicQuestion[]>("/api/basic");
+const {
+  data: dataBasic,
+  error: errorBasic,
+  status: statusBasic,
+} = await useFetch<BasicQuestion[]>("/api/basic");
 
-const count = ref(0);
+const {
+  data: dataAdvanced,
+  error: errorAdvanced,
+  status: statusAdvanced,
+} = await useFetch<AdvancedQuestion[]>("/api/advanced");
+
+const countBasic = ref(0);
+const countAdvanced = ref(-1);
 
 const tak_nie_model = ref();
 
 async function next() {
-  if (count.value + 1 < data.value?.length!) {
+  if (countBasic.value + 1 < dataBasic.value?.length!) {
     questionaries.value.push({
       nr_pytania: question.value?.nr_pytania,
       chosen_answer: tak_nie_model.value ?? "",
@@ -24,16 +33,16 @@ async function next() {
       liczba_pkt: question.value?.liczba_pkt,
     });
     tak_nie_model.value = "";
-    count.value++;
+    countBasic.value++;
     useHead({
-      title: `Pytanie ${count.value + 1}/${data.value?.length}`,
+      title: `Pytanie ${countBasic.value + 1}/${dataBasic.value?.length}`,
     });
   } else {
     // await navigateTo("/advanced");
   }
 }
 
-const question = computed(() => data.value?.at(count.value));
+const question = computed(() => dataBasic.value?.at(countBasic.value));
 const media = computed(() => {
   const mediaSplit = question.value?.media?.split(".");
   return {
@@ -56,7 +65,7 @@ const questionaries: Ref<Array<any>> = ref([]);
 
 <template>
   <div>
-    <div v-if="status === 'success'">
+    <div v-if="statusBasic === 'success'">
       <div class="grid grid-cols-4 min-h-dvh">
         <div class="col-span-3 flex flex-col gap-4 p-4">
           <TopBar
@@ -70,13 +79,17 @@ const questionaries: Ref<Array<any>> = ref([]);
 
         <RightBar
           :questionaries="questionaries"
-          :data="data"
-          :count="count"
+          :data-basic="dataBasic"
+          :data-advanced="dataAdvanced"
+          :count-basic="countBasic"
+          :count-advanced="countAdvanced"
           @next-question="next()"
         />
       </div>
     </div>
-    <div v-else-if="status === 'error'">Error: {{ error }}</div>
+    <div v-else-if="statusBasic === 'error' || statusAdvanced === 'error'">
+      An API error occurred: {{ errorBasic }} {{ errorAdvanced }}
+    </div>
     <div v-else>Loading...</div>
   </div>
 </template>

pages/index.vue

@@ -5,6 +5,8 @@
       Witaj w teście na prawo jazdy kat.B, aby rozpocząć, naciśnij poniższy
       przycisk:
     </p>
-    <NuxtLink to="/basic">START!</NuxtLink>
+    <NuxtLink to="/exam" class="text-4xl font-bold bg-fuchsia-200"
+      >START!</NuxtLink
+    >
   </div>
 </template>

server/api/basic.get.ts

@@ -31,6 +31,12 @@ export default defineEventHandler(async (event) => {
   }
   const query = getQuery(event);
   const category = query.category;
+  console.log(typeof category);
+  if (typeof category != "undefined" && typeof category != "string") {
+    throw new Error(
+      "category argument has to be string (or not to be defined at all)"
+    );
+  }
   const db = drizzle(process.env.DATABASE_URL!);
 
   const randomizedQuestions: BasicQuestion[] = [];
@@ -51,13 +57,7 @@ export default defineEventHandler(async (event) => {
       if (
         questionsKeyPoints[randomized].kategorie
           .split(",")
-          .filter((q) =>
-            q
-              .toLowerCase()
-              .includes(
-                `${typeof category === "string" ? category.toLowerCase() : "b"}`
-              )
-          )
+          .includes(category ?? "B")
       ) {
         chosenRandomQuestions.push(questionsKeyPoints[randomized]);
       } else {