From 64fe08f7490c7572a0034c5c96e096881fa2652e Mon Sep 17 00:00:00 2001
From: NetMan <13informatyka14@gmail.com>
Date: Sat, 8 Mar 2025 14:49:02 +0100
Subject: [PATCH] try to fix examstore value change between pages, improve &
 add loading screen

---
 components/AdvancedQuestionBlock.vue |  8 +++---
 pages/exam.vue                       | 12 +++++++--
 pages/index.vue                      | 38 ++++++++++++++++------------
 store/examStore.ts                   | 16 +++++++++++-
 4 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/components/AdvancedQuestionBlock.vue b/components/AdvancedQuestionBlock.vue
index f690eac..f3d5381 100644
--- a/components/AdvancedQuestionBlock.vue
+++ b/components/AdvancedQuestionBlock.vue
@@ -75,9 +75,11 @@ const abc_model = defineModel();
 <style scoped>
 label {
   @apply cursor-pointer flex flex-row gap-2 items-center;
+  &:hover {
+    @apply bg-slate-200;
+  }
 }
-
-label:hover {
-  @apply bg-slate-200;
+span {
+  @apply text-lg;
 }
 </style>
diff --git a/pages/exam.vue b/pages/exam.vue
index 4b1327e..a239917 100644
--- a/pages/exam.vue
+++ b/pages/exam.vue
@@ -101,6 +101,11 @@ async function next() {
     }
     if (countAdvanced.value + 1 < dataAdvanced.value?.length!) {
       countAdvanced.value++;
+      useHead({
+        title: `Pytanie ${countAdvanced.value + 1}/${
+          dataAdvanced.value?.length
+        }`,
+      });
     }
     if (countAdvanced.value == dataAdvanced.value?.length! - 1) {
       ending.value = true;
@@ -110,12 +115,13 @@ async function next() {
 }
 
 function endExam() {
+  loading.value = true;
   while (!ending.value) {
     next();
   }
   next();
-  examStore.result = result.value;
-  examStore.end = true;
+  examStore.setResult(result.value);
+  examStore.setEnd(true);
   return navigateTo("/result", { replace: true });
 }
 
@@ -149,10 +155,12 @@ const result: Ref<ResultEndType> = ref({
   basic: [],
   advanced: [],
 });
+const loading = ref(false);
 </script>
 
 <template>
   <div>
+    <Loading 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 gap-4">
diff --git a/pages/index.vue b/pages/index.vue
index f656631..51f2c69 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,30 +14,36 @@ const categories = [
   "PT",
 ];
 
+const loading = ref(false);
+
 const examStore = useExamStore();
 
 function setAndGo(category: string) {
-  examStore.category = category;
+  loading.value = true;
+  examStore.setCategory(category);
   return navigateTo("/exam");
 }
 </script>
 
 <template>
-  <div class="text-3xl">
-    <span>Test na prawo jazdy</span>
-    <p>
-      Witaj w teście na prawo jazdy, aby rozpocząć, naciśnij jeden z poniższych
-      przycisków:
-      <br />
-    </p>
-    <div class="flex flex-row flex-wrap gap-2">
-      <button
-        class="btn btn-xl btn-secondary"
-        v-for="category in categories"
-        @click="setAndGo(category)"
-      >
-        {{ category }}
-      </button>
+  <div>
+    <div v-if="!loading" class="text-3xl">
+      <span>Test na prawo jazdy</span>
+      <p>
+        Witaj w teście na prawo jazdy, aby rozpocząć, naciśnij jeden z
+        poniższych przycisków:
+        <br />
+      </p>
+      <div class="flex flex-row flex-wrap gap-2">
+        <button
+          class="btn btn-xl btn-secondary"
+          v-for="category in categories"
+          @click="setAndGo(category)"
+        >
+          {{ category }}
+        </button>
+      </div>
     </div>
+    <Loading v-else />
   </div>
 </template>
diff --git a/store/examStore.ts b/store/examStore.ts
index 176ba62..975ef52 100644
--- a/store/examStore.ts
+++ b/store/examStore.ts
@@ -18,12 +18,26 @@ export const useExamStore = defineStore("exam-store", () => {
       advanced: [],
     };
   }
-
+  function setEnd(value: boolean) {
+    end.value = value;
+    return end.value;
+  }
+  function setCategory(value: string) {
+    category.value = value;
+    return category.value;
+  }
+  function setResult(value: ResultEndType) {
+    result.value = value;
+    return result.value;
+  }
   return {
     category,
     end,
     result,
     resetExam,
     mildReset,
+    setEnd,
+    setCategory,
+    setResult,
   };
 });