From 4d53327521787ae982366a24dff8e39dc3ce5798 Mon Sep 17 00:00:00 2001
From: NetMan <13informatyka14@gmail.com>
Date: Mon, 3 Mar 2025 22:21:18 +0100
Subject: [PATCH] merge basic and advanced "screen", fix category in api

---
 components/BasicQuestionBlock.vue |  4 +-
 components/Media.vue              |  4 +-
 components/RightBar.vue           | 62 ++++++++++++++++++++++++-------
 pages/exam.vue                    | 37 ++++++++++++------
 pages/index.vue                   |  4 +-
 server/api/basic.get.ts           | 14 +++----
 6 files changed, 87 insertions(+), 38 deletions(-)

diff --git a/components/BasicQuestionBlock.vue b/components/BasicQuestionBlock.vue
index 138c9eb..e575d6e 100644
--- a/components/BasicQuestionBlock.vue
+++ b/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">
diff --git a/components/Media.vue b/components/Media.vue
index bee5e5f..8ed9ab1 100644
--- a/components/Media.vue
+++ b/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>
diff --git a/components/RightBar.vue b/components/RightBar.vue
index d322662..51b17fa 100644
--- a/components/RightBar.vue
+++ b/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>
diff --git a/pages/exam.vue b/pages/exam.vue
index fd4a914..185e5f4 100644
--- a/pages/exam.vue
+++ b/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>
diff --git a/pages/index.vue b/pages/index.vue
index edaa0c4..5fb517e 100644
--- a/pages/index.vue
+++ b/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>
diff --git a/server/api/basic.get.ts b/server/api/basic.get.ts
index 160f722..5026802 100644
--- a/server/api/basic.get.ts
+++ b/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 {