add get team method

src/components/GameWindow.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { ref, nextTick, watch, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { encodeUTF8ToBase64, getApiUrl } from './utils';
 import VueQrcode from '@chenfengyuan/vue-qrcode';
 import BeltBlock from './BeltBlock.vue';
 import MetalPlate from './MetalPlate.vue';
 import GameHeader from './GameHeader.vue';
 import type { Action, Door, Team } from './models';
+import { apiGetTeam, encodeUTF8ToBase64, getApiUrl } from './client';
+import { UnauthorizedError } from './UnauthorizedError';
 
 const router = useRouter();
 const route = useRoute();
@@ -39,47 +40,37 @@ const qrOptions = ref<QROptions>({
   }
 });
 
-function getTeam() {
-  fetch(
-    getApiUrl("/team"),
-    {
-      method: "GET",
-      headers: {
-        "X-Id": encodeUTF8ToBase64(login.value),
-        "X-Password": password.value
-      },
+async function getTeam() {
+  let data: Team
+  try {
+    data = await apiGetTeam(login.value, password.value)
+  } catch (error: unknown) {
+    if (error instanceof UnauthorizedError) {
+      // Действия при 401:
+      // Сделать редирект на страницу логина
+      router.push('/login');
+    } else {
+      console.error('Неизвестная ошибка:', error);
     }
-  )
-    .then(response => {
-      if (response.status == 401) {
-        router.push('/login');
-        return
-      }
-      const res = response.json()
-      return res
-    })
-    .then(data => {
-      const oldActions = team.value.actions
+    return
+  }
 
-      team.value = data
-      const newActions = team.value?.actions
-      newActions.forEach(item => {
-        item.isOpen = true
-      })
-      for (let i = 0; i < actions.value.length; i++) {
-        newActions[i].isOpen = oldActions[i].isOpen
-      }
-      if (actions.value.length !== newActions?.length) {
-        actions.value = newActions
-      }
-      for (let i = 0; i < team.value.actions.length; i++) {
-        const element = team.value.actions[i];
-        team.value.actions[i].buttons = element.doors.filter((door: Door) => { return door.show })
-      }
-    })
-    .catch(error => {
-      console.error('Ошибка:', error)
-    });
+  const oldActions = team.value.actions
+  team.value = data
+  const newActions = team.value?.actions
+  newActions.forEach(item => {
+    item.isOpen = true
+  })
+  for (let i = 0; i < actions.value.length; i++) {
+    newActions[i].isOpen = oldActions[i].isOpen
+  }
+  if (actions.value.length !== newActions?.length) {
+    actions.value = newActions
+  }
+  for (let i = 0; i < team.value.actions.length; i++) {
+    const element = team.value.actions[i];
+    team.value.actions[i].buttons = element.doors.filter((door: Door) => { return door.show })
+  }
 }
 
 function addAction() {

src/components/LoginWindow.vue

@@ -1,56 +1,50 @@
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
-  import { useRouter } from 'vue-router';
-  import { encodeUTF8ToBase64, getApiUrl } from './utils';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { apiGetTeam } from './client';
+import { UnauthorizedError } from './UnauthorizedError';
 
-  const router = useRouter();
+const router = useRouter();
 
-  const login = ref("")
-  const password = ref("")
-  const buttonText = ref("Вход")
-  const errorMsg = ref("")
+const login = ref("")
+const password = ref("")
+const buttonText = ref("Вход")
+const errorMsg = ref("")
 
-  function onClickLogin() {
-    const oldText = buttonText.value
-    buttonText.value = "Загрузка..."
-    errorMsg.value = ""
-    fetch(
-      getApiUrl("/team"),
-      {
-        method: "GET",
-        headers: {
-          "X-Id": encodeUTF8ToBase64(login.value),
-          "X-Password": password.value
-        },
-      }
-    )
-    .then(response => {
-      if (response.status == 200) {
-        sessionStorage.setItem("teamId", login.value)
-        sessionStorage.setItem("password", password.value)
-        router.push('/');
+async function onClickLogin() {
+  const oldText = buttonText.value
+  buttonText.value = "Загрузка..."
+  errorMsg.value = ""
+
+  try {
+    await apiGetTeam(login.value, password.value)
+  } catch (error: unknown) {
+    if (error instanceof UnauthorizedError) {
+      // Действия при 401:
+      // Вывести ошибку
+      if (login.value == "" && password.value == "") {
         return
       }
-      if (response.status == 401) {
-        if (login.value == "" && password.value == "") {
-          return
-        }
-        errorMsg.value = "Не верны название команды или пароль"
-        return
-      }
-      errorMsg.value = "ХЗ что это " + response
-    })
-    .catch(() => {
+      errorMsg.value = "Не верны название команды или пароль"
+    } else {
       errorMsg.value = "Сервер не доступен"
-    })
-    .finally(() => {buttonText.value = oldText});
+    }
+    return
+  } finally {
+    buttonText.value = oldText
   }
-  onMounted(() => {
-    login.value = sessionStorage.getItem("teamId") || ""
-    password.value = sessionStorage.getItem("password") || ""
 
-    onClickLogin()
-  })
+  sessionStorage.setItem("teamId", login.value)
+  sessionStorage.setItem("password", password.value)
+  router.push('/');
+}
+
+onMounted(() => {
+  login.value = sessionStorage.getItem("teamId") || ""
+  password.value = sessionStorage.getItem("password") || ""
+
+  onClickLogin()
+})
 </script>
 
 <template>

src/components/UnauthorizedError.ts

@@ -0,0 +1,9 @@
+export class UnauthorizedError extends Error {
+  constructor(message: string = 'Пользователь не авторизован (401)') {
+    super(message)
+    this.name = 'UnauthorizedError'
+
+    // Восстанавливаем цепочку прототипов (нужно для корректной работы instanceof в TS)
+    Object.setPrototypeOf(this, UnauthorizedError.prototype)
+  }
+}

src/components/client.ts

@@ -0,0 +1,37 @@
+import type { Team } from './models'
+import { UnauthorizedError } from './UnauthorizedError'
+
+export const apiGetTeam = async (login: string, password: string): Promise<Team> => {
+  try {
+    const response = await fetch(getApiUrl('/team'), {
+      method: 'GET',
+      headers: {
+        'X-Id': encodeUTF8ToBase64(login),
+        'X-Password': password,
+      },
+    })
+    if (response.status === 401) {
+      throw new UnauthorizedError('Ошибка авторизации')
+    }
+    if (!response.ok) {
+      throw new Error(`http error status: ${response.status}`)
+    }
+    return await response.json()
+  } catch (error) {
+    console.error('[apiGetTeam] error:', error)
+    throw error
+  }
+}
+
+export function getApiUrl(path: string) {
+  const url = 'http://' + window.location.host.split(':')[0] + ':8090' + path
+  return url
+}
+
+export function encodeUTF8ToBase64(s: string) {
+  return btoa(
+    encodeURIComponent(s).replace(/%([0-9A-F]{2})/g, (_, p1) =>
+      String.fromCharCode(parseInt(p1, 16)),
+    ),
+  )
+}

src/components/utils.ts

@@ -1,8 +0,0 @@
-export function getApiUrl(path: string) {
-  const url =  "http://" + window.location.host.split(":")[0] + ":8090" + path
-  return url
-}
-
-export function encodeUTF8ToBase64(s: string) {
-  return btoa(encodeURIComponent(s).replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16))))
-}