From af20ec21eef9a1bb28481cb4130c15984a652a83 Mon Sep 17 00:00:00 2001
From: NetMan <13informatyka14@gmail.com>
Date: Mon, 3 Mar 2025 21:40:50 +0100
Subject: [PATCH] divide page into components, add 7.css progressbar

---
 components/AdvancedQuestionBlock.vue |   0
 components/BasicQuestionBlock.vue    |  53 +++++++
 components/Media.vue                 |  29 ++++
 components/RightBar.vue              |  50 +++++++
 components/TopBar.vue                |  26 ++++
 package.json                         |   1 +
 pages/advanced.vue                   |  37 -----
 pages/basic.vue                      | 207 ---------------------------
 pages/exam.vue                       | 108 ++++++++++++++
 pnpm-lock.yaml                       |   8 ++
 10 files changed, 275 insertions(+), 244 deletions(-)
 create mode 100644 components/AdvancedQuestionBlock.vue
 create mode 100644 components/BasicQuestionBlock.vue
 create mode 100644 components/Media.vue
 create mode 100644 components/RightBar.vue
 create mode 100644 components/TopBar.vue
 delete mode 100644 pages/advanced.vue
 delete mode 100644 pages/basic.vue
 create mode 100644 pages/exam.vue

diff --git a/components/AdvancedQuestionBlock.vue b/components/AdvancedQuestionBlock.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/BasicQuestionBlock.vue b/components/BasicQuestionBlock.vue
new file mode 100644
index 0000000..138c9eb
--- /dev/null
+++ b/components/BasicQuestionBlock.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import type { BasicQuestion } from "@/types/basic";
+
+defineProps<{
+  question: BasicQuestion | undefined;
+}>();
+
+const tak_nie_model = defineModel();
+</script>
+
+<template>
+  <div>
+    <div>{{ question?.pytanie }}</div>
+    <div>
+      <div class="flex flex-row justify-around">
+        <input
+          type="radio"
+          name="tak_nie"
+          id="odp_tak"
+          v-model="tak_nie_model"
+          value="tak"
+          class="hidden"
+        />
+        <label for="odp_tak">
+          <div
+            :class="`btn-answer ${
+              tak_nie_model == 'tak' ? ' !bg-fuchsia-500' : ''
+            }`"
+          >
+            TAK
+          </div>
+        </label>
+        <input
+          type="radio"
+          name="tak_nie"
+          id="odp_nie"
+          v-model="tak_nie_model"
+          value="nie"
+          class="hidden"
+        />
+        <label for="odp_nie">
+          <div
+            :class="`btn-answer ${
+              tak_nie_model == 'nie' ? ' !bg-fuchsia-500' : ''
+            }`"
+          >
+            NIE
+          </div>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/components/Media.vue b/components/Media.vue
new file mode 100644
index 0000000..bee5e5f
--- /dev/null
+++ b/components/Media.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const runtimeConfig = useRuntimeConfig();
+const cdnUrl = runtimeConfig.public.cdn_url;
+
+defineProps<{
+  media: { fileName: string | undefined; fileType: string | undefined };
+}>();
+</script>
+
+<template>
+  <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">
+      <img
+        :src="cdnUrl + [media.fileName, media.fileType].join('.')"
+        alt=""
+        v-if="media.fileType == 'jpg'"
+      />
+      <video v-else-if="media.fileType == 'wmv'" :key="media.fileName" autoplay>
+        <source
+          :src="cdnUrl + [media.fileName, 'mp4'].join('.')"
+          type="video/mp4"
+        />
+      </video>
+      <span v-else>Brak mediów</span>
+    </div>
+  </div>
+</template>
diff --git a/components/RightBar.vue b/components/RightBar.vue
new file mode 100644
index 0000000..d322662
--- /dev/null
+++ b/components/RightBar.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import "7.css/dist/7.scoped.css";
+
+defineProps<{
+  questionaries: BasicQuestion[] | null;
+  count: number;
+  data: BasicQuestion[] | null;
+}>();
+</script>
+
+<template>
+  <div class="flex flex-col items-center">
+    <div>
+      <button class="btn-major">Zakończ egzamin</button>
+    </div>
+    <div class="flex flex-row">
+      <div>
+        Pytania podstawowe
+        <div class="win7">
+          <div
+            role="progressbar"
+            class="animate"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow="80"
+          >
+            <div class="w-[60%] relative">
+              <div class="absolute top-0 w-full text-center">
+                {{ count + 1 }} / {{ data?.length }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        Pytania specjalistyczne
+        <div class="progressive">{{ count + 1 }} / {{ data?.length }}</div>
+      </div>
+    </div>
+    <div>TimeLeft (implement)</div>
+    <div>
+      <button @click="$emit('next-question')" class="btn-major">
+        Następne pytanie
+      </button>
+    </div>
+
+    <br />
+    {{ questionaries }}
+  </div>
+</template>
diff --git a/components/TopBar.vue b/components/TopBar.vue
new file mode 100644
index 0000000..33bf668
--- /dev/null
+++ b/components/TopBar.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  points: number | undefined;
+  category: string | undefined;
+  timeRemaining: string | undefined;
+}>();
+</script>
+
+<template>
+  <div class="flex flex-row gap-5">
+    <div>
+      Wartość punktowa
+      <div class="info-little-box">
+        {{ points }}
+      </div>
+    </div>
+    <div>
+      Aktualna kategoria (implement)
+      <div class="info-little-box">{{ category }}</div>
+    </div>
+    <div>
+      Czas do końca egzaminu (implement)
+      <div class="info-little-box">{{ timeRemaining }}</div>
+    </div>
+  </div>
+</template>
diff --git a/package.json b/package.json
index 029da58..8277082 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "7.css": "^0.17.0",
     "@nuxt/fonts": "0.10.3",
     "@nuxtjs/tailwindcss": "6.13.1",
     "array-shuffle": "^3.0.0",
diff --git a/pages/advanced.vue b/pages/advanced.vue
deleted file mode 100644
index 05b8bba..0000000
--- a/pages/advanced.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts" setup>
-const {data} = await useFetch("/api/advanced");
-
-const count = ref(0);
-
-function next() {
-    if (count.value + 1 < data.value.length) {
-        count.value++;
-    } else {
-        console.log("Ok!");
-    }
-}
-</script>
-
-<template>
-    <div>
-        <div v-if="data">
-            {{ data[count].nr_pytania }}: {{ data[count].pytanie }}
-            <!-- {{ data[count].poprawna_odp }} -->
-            {{ data[count].odp_a }}
-            {{ data[count].odp_b }}
-            {{ data[count].odp_c }}
-            <div v-if="data[count].media">
-                <img :src="'http://localhost:8081/'+data[count].media" alt="" v-if="data[count].media.split('.').at(-1).toLowerCase() == 'jpg'">
-                <video controls width="650" v-else-if="data[count].media.split('.').at(-1).toLowerCase() == 'mp4'">
-                    <source :src="'http://localhost:8081/'+data[count].media" type="video/mp4" />
-                </video>
-            </div>
-            <div v-else>
-                No Media.
-            </div>
-
-        </div>
-        <button @click="next()">Next</button>
-        {{count}}
-    </div>
-</template>
\ No newline at end of file
diff --git a/pages/basic.vue b/pages/basic.vue
deleted file mode 100644
index 6cd6d2d..0000000
--- a/pages/basic.vue
+++ /dev/null
@@ -1,207 +0,0 @@
-<script lang="ts" setup>
-import type { BasicQuestion } from "@/types/basic";
-
-useHead({
-  title: "Pytanie 1/20",
-});
-
-const { data, error, status, refresh } = await useFetch<BasicQuestion[]>(
-  "/api/basic"
-);
-
-const runtimeConfig = useRuntimeConfig();
-const cdnUrl = runtimeConfig.public.cdn_url;
-
-const count = ref(0);
-
-const tak_nie_model = ref();
-
-async function next() {
-  if (count.value + 1 < data.value?.length!) {
-    questionaries.value.push({
-      nr_pytania: question.value?.nr_pytania,
-      chosen_answer: tak_nie_model.value ?? "",
-      correct_answer: question.value?.poprawna_odp?.toLowerCase(),
-      chosen_is_correct:
-        tak_nie_model.value == question.value?.poprawna_odp?.toLowerCase(),
-      liczba_pkt: question.value?.liczba_pkt,
-    });
-    tak_nie_model.value = "";
-    count.value++;
-    useHead({
-      title: `Pytanie ${count.value + 1}/${data.value?.length}`,
-    });
-  } else {
-    // await navigateTo("/advanced");
-  }
-}
-
-const question = computed(() => data.value?.at(count.value));
-const media = computed(() => {
-  const mediaSplit = question.value?.media?.split(".");
-  return {
-    fileType: mediaSplit?.pop()?.toLowerCase(),
-    fileName: mediaSplit?.join("."),
-  };
-});
-
-const questionaries: Ref<Array<any>> = ref([]);
-
-const progres = ref();
-
-onMounted(() => {
-  const progresInterval = setInterval(() => {
-    progres.value.value = +progres.value.value + 1;
-    if (progres.value.value >= 100) {
-      clearInterval(progresInterval);
-    }
-  }, 100);
-});
-</script>
-
-<template>
-  <div>
-    <div v-if="status === 'success'">
-      <div class="grid grid-cols-4 min-h-dvh">
-        <div class="col-span-3 flex flex-col gap-4 p-4">
-          <div class="flex flex-row gap-5">
-            <div>
-              Wartość punktowa
-              <div class="info-little-box">
-                {{ question?.liczba_pkt }}
-              </div>
-            </div>
-            <div>
-              Aktualna kategoria (implement)
-              <div class="info-little-box">B</div>
-            </div>
-            <div>
-              Czas do końca egzaminu (implement)
-              <div class="info-little-box">25:00</div>
-            </div>
-          </div>
-          <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">
-              <img
-                :src="cdnUrl + [media.fileName, media.fileType].join('.')"
-                alt=""
-                v-if="media.fileType == 'jpg'"
-              />
-              <video
-                v-else-if="media.fileType == 'wmv'"
-                :key="media.fileName"
-                autoplay
-              >
-                <source
-                  :src="cdnUrl + [media.fileName, 'mp4'].join('.')"
-                  type="video/mp4"
-                />
-              </video>
-              <span v-else>Brak mediów</span>
-            </div>
-          </div>
-          <div>{{ question?.pytanie }}</div>
-          <div>
-            <div class="flex flex-row justify-around">
-              <input
-                type="radio"
-                name="tak_nie"
-                id="odp_tak"
-                v-model="tak_nie_model"
-                value="tak"
-                class="hidden"
-              />
-              <label for="odp_tak">
-                <div
-                  :class="`btn-answer ${
-                    tak_nie_model == 'tak' ? ' !bg-fuchsia-500' : ''
-                  }`"
-                >
-                  TAK
-                </div>
-              </label>
-              <input
-                type="radio"
-                name="tak_nie"
-                id="odp_nie"
-                v-model="tak_nie_model"
-                value="nie"
-                class="hidden"
-              />
-              <label for="odp_nie">
-                <div
-                  :class="`btn-answer ${
-                    tak_nie_model == 'nie' ? ' !bg-fuchsia-500' : ''
-                  }`"
-                >
-                  NIE
-                </div>
-              </label>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex flex-col items-center">
-          <div>
-            <button class="btn-major">Zakończ egzamin</button>
-          </div>
-          <div class="flex flex-row">
-            <div>
-              Pytania podstawowe
-              <div class="progressive">
-                {{ count + 1 }} / {{ data?.length }}
-              </div>
-            </div>
-            <div>
-              Pytania specjalistyczne
-              <div class="progressive">
-                {{ count + 1 }} / {{ data?.length }}
-              </div>
-            </div>
-          </div>
-          <div>TimeLeft (implement)</div>
-          <div>
-            <button @click="next()" class="btn-major">Następne pytanie</button>
-          </div>
-
-          <br />
-          {{ questionaries }}
-          <progress max="100" ref="progres">Aha...</progress>
-        </div>
-      </div>
-    </div>
-    <div v-else-if="status === 'error'">Error: {{ error }}</div>
-    <div v-else>Loading...</div>
-  </div>
-</template>
-
-<style scoped>
-.btn {
-  @apply box-border text-white font-bold p-3 rounded-md w-fit cursor-pointer border-[4px];
-}
-
-.btn-answer {
-  @apply btn bg-blue-500 text-xl;
-}
-
-.btn-answer:hover {
-  @apply bg-blue-300;
-}
-
-.btn-answer:active {
-  @apply bg-blue-400;
-}
-
-.btn-major {
-  @apply btn bg-orange-400 text-base;
-}
-
-.info-little-box {
-  @apply inline-block px-[15px] py-[8px] bg-blue-500 text-white font-bold;
-}
-/* 
-.progressive {
-} */
-</style>
diff --git a/pages/exam.vue b/pages/exam.vue
new file mode 100644
index 0000000..fd4a914
--- /dev/null
+++ b/pages/exam.vue
@@ -0,0 +1,108 @@
+<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 count = ref(0);
+
+const tak_nie_model = ref();
+
+async function next() {
+  if (count.value + 1 < data.value?.length!) {
+    questionaries.value.push({
+      nr_pytania: question.value?.nr_pytania,
+      chosen_answer: tak_nie_model.value ?? "",
+      correct_answer: question.value?.poprawna_odp?.toLowerCase(),
+      chosen_is_correct:
+        tak_nie_model.value == question.value?.poprawna_odp?.toLowerCase(),
+      liczba_pkt: question.value?.liczba_pkt,
+    });
+    tak_nie_model.value = "";
+    count.value++;
+    useHead({
+      title: `Pytanie ${count.value + 1}/${data.value?.length}`,
+    });
+  } else {
+    // await navigateTo("/advanced");
+  }
+}
+
+const question = computed(() => data.value?.at(count.value));
+const media = computed(() => {
+  const mediaSplit = question.value?.media?.split(".");
+  return {
+    fileType: mediaSplit?.pop()?.toLowerCase(),
+    fileName: mediaSplit?.join("."),
+  };
+});
+
+const questionaries: Ref<Array<any>> = ref([]);
+
+// onMounted(() => {
+//   const progresInterval = setInterval(() => {
+//     progres.value.value = +progres.value.value + 1;
+//     if (progres.value.value >= 100) {
+//       clearInterval(progresInterval);
+//     }
+//   }, 100);
+// });
+</script>
+
+<template>
+  <div>
+    <div v-if="status === 'success'">
+      <div class="grid grid-cols-4 min-h-dvh">
+        <div class="col-span-3 flex flex-col gap-4 p-4">
+          <TopBar
+            :points="question?.liczba_pkt"
+            :category="`B`"
+            :time-remaining="`25:00`"
+          />
+          <Media :media="media" />
+          <BasicQuestionBlock :question="question" v-model="tak_nie_model" />
+        </div>
+
+        <RightBar
+          :questionaries="questionaries"
+          :data="data"
+          :count="count"
+          @next-question="next()"
+        />
+      </div>
+    </div>
+    <div v-else-if="status === 'error'">Error: {{ error }}</div>
+    <div v-else>Loading...</div>
+  </div>
+</template>
+
+<style>
+.btn {
+  @apply box-border text-white font-bold p-3 rounded-md w-fit cursor-pointer border-[4px] transition duration-100;
+}
+
+.btn-answer {
+  @apply btn bg-blue-500 text-xl;
+}
+
+.btn-answer:hover {
+  @apply bg-blue-300;
+}
+
+.btn-answer:active {
+  @apply bg-blue-400 duration-0;
+}
+
+.btn-major {
+  @apply btn bg-orange-400 text-base;
+}
+
+.info-little-box {
+  @apply inline-block px-[15px] py-[8px] bg-blue-500 text-white font-bold;
+}
+</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1b3b1d6..f8e8185 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
 
   .:
     dependencies:
+      7.css:
+        specifier: ^0.17.0
+        version: 0.17.0
       '@nuxt/fonts':
         specifier: 0.10.3
         version: 0.10.3(db0@0.2.4(drizzle-orm@0.40.0(@types/pg@8.11.11)(gel@2.0.0)(pg@8.13.3)))(ioredis@5.5.0)(magicast@0.3.5)(vite@6.1.1(@types/node@22.13.4)(jiti@2.4.2)(terser@5.39.0)(tsx@4.19.3)(yaml@2.7.0))
@@ -51,6 +54,9 @@ importers:
 
 packages:
 
+  7.css@0.17.0:
+    resolution: {integrity: sha512-U4DqX1WDFDbG6C9Myw/s2tgPapP8bkEYAd4tCchv3Zrjuugye3Fjv3IK32nq2cRO1Y4SnkbsBlyvu+o51rnPGg==}
+
   '@alloc/quick-lru@5.2.0':
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -4073,6 +4079,8 @@ packages:
 
 snapshots:
 
+  7.css@0.17.0: {}
+
   '@alloc/quick-lru@5.2.0': {}
 
   '@ampproject/remapping@2.3.0':