nuxt-prawo-jazdy/pages/basic.vue

<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">
        <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"
          >
            <div class="w-[650px] *: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>
        </div>
      </div>
      <br />
      {{ questionaries }}
    </div>
    <div v-else-if="status === 'error'">Error: {{ error }}</div>
    <div v-else>Loading...</div>
    <progress max="100" ref="progres">Aha...</progress>
  </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>