feature: Добавлены страницы выбора филиалы и роли

pages/setup/branch.vue

@@ -1,13 +1,118 @@
 <template>
+  <form
+    class="w-full h-full flex flex-col items-center justify-between pt-8 text-white"
+    @submit.prevent="nextPage"
+  >
+    <div class="flex flex-col justify-center items-center">
+      <h1 class="text-4xl font-bold text-center">
+        Филиал
+      </h1>
+      <p class="opacity-50">
+        Где именно вы находитесь?
+      </p>
+    </div>
+
     <div>
+      <ClientOnly>
+        <lottie-player
+          class="w-[200px] h-[200px]"
+          autoplay
+          loop
+          mode="normal"
+          src="/lottie/student.json"
+        />
+      </ClientOnly>
+    </div>
 
+    <div
+      v-if="branches"
+      class="mx-10"
+    >
+      <BaseSelect
+        id="id"
+        v-model:selected="selectedBranch"
+        name="title"
+        :data="branches"
+      />
     </div>
+    <Icon
+      v-else
+      name="svg-spinners:ring-resize"
+      class="show w-20 h-20 text-white"
+    />
+
+    <div />
+
+    <button
+      class="w-full py-2 bg-primary flex gap-3 justify-center items-center group disabled:opacity-50 duration-150"
+      type="submit"
+    >
+      <svg
+        class="w-6 h-6 opacity-75 rotate-180 group-hover:opacity-100"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8 24.0002H40"
+          stroke="black"
+          stroke-width="4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M20 12.0002L8.12502 23.8752C8.05598 23.9442 8.05598 24.0562 8.12502 24.1252L20 36.0002"
+          stroke="black"
+          stroke-width="4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+
+      <p
+        class="text-2xl text-background-100 font-semibold opacity-75 group-hover:opacity-100 duration-150"
+        v-text="'Далее'"
+      />
+    </button>
+  </form>
 </template>
 
 <script setup lang="ts">
+definePageMeta({
+  layout: 'none',
+  middleware: ['user-only'],
+})
+
+const selectedBranch = ref()
+const api = useApi()
+const router = useRouter()
+const branches = await api.get('/branches', {
+  squeeze: true,
+})
 
+function nextPage() {
+  if (selectedBranch.value !== null) {
+    router.push('/setup/role')
+  }
+  else {
+    alert('Выберите филиал')
+  }
+}
 </script>
 
 <style scoped>
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 
-</style>
+.show {
+  animation: show ease-in-out 300ms;
+}
+</style>

pages/setup/role.vue

@@ -1,11 +1,17 @@
 <template>
   <form
     class="w-full h-full flex flex-col items-center justify-between pt-8 text-white"
+    @submit.prevent="nextPage"
   >
     <div class="flex flex-col justify-center items-center">
-      <h1 class="text-4xl font-bold text-center">Филиал</h1>
-      <p class="opacity-50">Где именно вы находитесь?</p>
+      <h1 class="text-4xl font-bold text-center">
+        Какая у вас роль?
+      </h1>
+      <p class="opacity-50">
+        Вы студент?
+      </p>
     </div>
+
     <div>
       <ClientOnly>
         <lottie-player
@@ -18,56 +24,94 @@
       </ClientOnly>
     </div>
 
-    <Icon name="svg-spinners:ring-resize" class="show w-20 h-20 text-white" />
-    <Select :data="[]" v-model:selected="selectedBranch" />
+    <BaseSelect
+      id="id"
+      v-model:selected="user.isStudent"
+      :data="userTypes"
+      name="name"
+    />
 
     <div />
 
-    <div class="w-full">
-      <div
-        class="w-full flex gap-2 justify-center items-center py-2 opacity-50 hover:opacity-100 duration-150 mb-0.5 cursor-pointer"
+    <button
+      class="w-full py-2 bg-primary flex gap-3 justify-center items-center group disabled:opacity-50 duration-150"
+      type="submit"
+    >
+      <svg
+        svg
+        class="w-6 h-6 opacity-75 rotate-180 group-hover:opacity-100"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <img
-          src="@/assets/icons/alert-circle 1.svg"
-          alt="alert circle"
-          class="h-7 w-7 text-background-100 rotate-180"
+        <path
+          d="M8 24.0002H40"
+          stroke="black"
+          stroke-width="4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
-        <p class="font-light text-lg">Откуда брать данные?</p>
-      </div>
-
-      <button
-        class="w-full py-2 bg-primary flex gap-3 justify-center items-center group disabled:opacity-50 duration-150"
-        type="submit"
-      >
-        <p
-          class="text-2xl text-background-100 font-semibold opacity-75 group-hover:opacity-100 duration-150"
-          v-text="'Войти в аккаунт'"
+        <path
+          d="M20 12.0002L8.12502 23.8752C8.05598 23.9442 8.05598 24.0562 8.12502 24.1252L20 36.0002"
+          stroke="black"
+          stroke-width="4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         />
-      </button>
-    </div>
+      </svg>
+
+      <p
+        class="text-2xl text-background-100 font-semibold opacity-75 group-hover:opacity-100 duration-150"
+        v-text="'Далее'"
+      />
+    </button>
   </form>
 </template>
 
 <script setup lang="ts">
+import { useUser } from '~/store/useUser'
+
 definePageMeta({
-  layout: "none",
-  middleware: ["user-only"],
-});
+  layout: 'none',
+  middleware: ['user-only'],
+})
 
-const selectedBranch = ref();
+const router = useRouter()
+const user = useUser()
+const userTypes = [
+  {
+    id: 0,
+    name: 'Преподаватель',
+  },
+  {
+    id: 1,
+    name: 'Студент',
+  },
+]
+
+function nextPage() {
+  if (user.isStudent !== null) {
+    router.push('/timetable')
+  }
+  else {
+    alert('Выберите филиал')
+  }
+}
 </script>
 
 <style scoped>
 @keyframes show {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 .show {
-    animation: show ease-in-out 300ms;
+  animation: show ease-in-out 300ms;
 }
 </style>

plugins/lottieplayer.client.ts

@@ -1,3 +1,3 @@
-import * as LottiePlayer from "@lottiefiles/lottie-player";
+import * as LottiePlayer from '@lottiefiles/lottie-player'
 
-export default defineNuxtPlugin(() => LottiePlayer);
+export default defineNuxtPlugin(() => LottiePlayer)