nuxt-prawo-jazdy/pages/index.vue

<script setup lang="ts">
import CountryFlag from 'vue-country-flag-next';
import categories from '~/categories';

onMounted(() => {
  useHead({
    title: $t('mainTitle'),
  });
});

const { setLocale } = useI18n();

const loading = ref(false);

const examStore = useExamStore();
await callOnce(() => examStore.resetExam(), { mode: 'navigation' });

const localePath = useLocalePath();

function setAndGo(category: string) {
  loading.value = true;
  examStore.setCategory(category);
  while (true) {
    if (examStore.category === category) {
      return navigateTo(localePath('exam'));
    }
  }
}

const langSelect = ref(examStore.lang);

function changeLanguage() {
  examStore.setLang(langSelect.value);
  setLocale(langSelect.value as 'pl' | 'en' | 'de' | 'ua');
}

const dark = ref(false);

const prefersDark = computed(() =>
  window.matchMedia
    ? window.matchMedia('(prefers-color-scheme: dark)').matches
    : false,
);

function getTheme() {
  if (prefersDark.value) {
    dark.value = true;
  } else {
    dark.value = false;
  }
}

watchEffect(getTheme);

const themeStore = useThemeStore();

function themeAuto() {
  themeStore.set('');
  getTheme();
  themeStore.set('');
}
</script>

<template>
  <div>
    <div v-if="!loading" class="text-3xl flex flex-col gap-2 min-h-dvh">
      <div class="flex flex-col p-2 gap-2">
        <span>{{ $t('mainTitle') }}</span>
        <div class="flex gap-2">
          <CountryFlag
            class="block border border-1 border-black"
            :country="langSelect != 'en' ? langSelect : 'gb'"
            size="big"
          />
          <select v-model="langSelect" class="select" @change="changeLanguage">
            <option value="pl">Polish (Polski)</option>
            <option value="en">English</option>
            <option value="de">German (Deutsch)</option>
            <option value="ua">Ukrainian (Українська)</option>
          </select>
        </div>
        <div class="flex gap-2">
          <label class="flex cursor-pointer gap-2 text-lg items-center">
            {{ $t('theme') }}: {{ $t('light') }}
            <input
              v-model="dark"
              type="checkbox"
              value="dark"
              class="toggle theme-controller"
              @change="themeStore.set(dark ? 'dark' : 'light')"
            />
            {{ $t('dark') }}
          </label>
          <div class="btn btn-soft btn-sm" @click="themeAuto()">
            {{ $t('auto') }}
          </div>
        </div>
        <div
          class="flex flex-col flex-wrap gap-2 items-start p-4 bg-base-300 border-1 border-slate-500 rounded-xl w-fit"
        >
          <div
            v-for="category in categories"
            :key="`btn-${category}`"
            class="flex flex-row gap-3 items-center"
          >
            <button
              class="btn btn-xl btn-secondary"
              @click="setAndGo(category)"
            >
              {{ category }}
            </button>
            <div class="flex flex-col text-sm">
              <div>{{ $t(`category.description.${category}`) }}</div>
              <div>{{ $t(`category.age.${category}`) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1"></div>
      <div class="text-sm text-center bg-base-200 p-1">
        <!--
          You need to leave such an unavoidable mention as one below of the
          original software, its creator and license - this is required under AGPL.
          START MENTION
        -->
        <NuxtLink
          class="link"
          to="https://git.mandarynki.eu/netman/nuxt-prawo-jazdy"
        >
          nuxt-prawo-jazdy
        </NuxtLink>
        by
        <NuxtLink class="link" to="https://netman.ovh">netman</NuxtLink>
        (<NuxtLink
          class="link"
          to="https://git.mandarynki.eu/netman/nuxt-prawo-jazdy/src/branch/main/LICENSE"
          >AGPL-3.0-only</NuxtLink
        >)
        <!-- END MENTION -->
      </div>
    </div>
    <LoadingScreen v-else />
  </div>
</template>