add first custom component

src/components/AdminWindow.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import router from '@/router';
-import VueQrcode from '@chenfengyuan/vue-qrcode';
 import type { Game, Teams } from './models';
-import { qrOptions } from './qr';
 import { apiGetTeams, apiAddTeam, apiGetGame, apiStartGame, apiStopGame, apiGaveApplication, apiDownloadQrCodesFile } from './client';
+import TeamQRCode from '../components/TeamQRCode.vue'
 
 const qrurl = ref("-")
 const qrteam = ref("-")
@@ -20,12 +19,28 @@ async function addTeam() {
   teamName.value = ""
 }
 
-function startGame() {
-  apiStartGame(gameState)
+async function startGame() {
+  gameState.value = "Загрузка..."
+  await apiStartGame()
 }
 
-function stopGame() {
-  apiStopGame(gameState)
+async function stopGame() {
+  gameState.value = "Загрузка..."
+  await apiStopGame()
+}
+
+async function getGame() {
+  game.value = await apiGetGame()
+
+  if (game.value.state === "NEW") {
+    gameState.value = "Игра ещё не началась"
+  }
+  if (game.value.state === "RUN") {
+    gameState.value = "Игра идет с " + game.value?.startAt.substring(11)
+  }
+  if (game.value.state === "STOP") {
+    gameState.value = "Игра остановлена " + game.value?.startAt.substring(11) + " - " + game.value?.endAt.substring(11)
+  }
 }
 
 let intervalId = 0
@@ -34,7 +49,7 @@ onMounted(async () => {
 
   intervalId = setInterval(async () => {
     teams.value = await apiGetTeams()
-    apiGetGame(game, gameState)
+    await getGame()
   }, 2000);
 
   router.beforeEach((to, from, next) => {
@@ -49,12 +64,7 @@ onMounted(async () => {
     Вечерний детектив - {{ gameState }}
   </div>
 
-  <div class="qr">
-    <VueQrcode :value="qrurl" :options="qrOptions" tag="svg" class="qr-code" />
-    <div>
-      {{ qrteam }}
-    </div>
-  </div>
+  <TeamQRCode :data="qrurl" :title="qrteam" />
 
   <div class="form-block buttons-block">
     <a v-on:click="startGame" class="button-menu">Начать</a>
@@ -241,14 +251,6 @@ a {
   }
 }
 
-.qr {
-  position: absolute;
-  top: 80px;
-  right: 30px;
-  text-align: center;
-  width: 120px;
-}
-
 .button-container {
   margin-bottom: 30px;
 }

src/components/TeamQRCode.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import { qrOptions } from './qr';
+  import VueQrcode from '@chenfengyuan/vue-qrcode';
+
+  defineProps({
+    data: String,
+    title: String
+  });
+</script>
+
+<template>
+  <div class="qr">
+    <VueQrcode :value="data" :options="qrOptions" tag="svg" />
+    <div>
+      {{ title }}
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .qr {
+    position: absolute;
+    top: 80px;
+    right: 30px;
+    text-align: center;
+    width: 120px;
+  }
+</style>

src/components/client.ts

@@ -1,5 +1,3 @@
-import type { Ref } from 'vue';
-import { getApiUrl } from './net';
 import type { Game, Teams } from './models';
 import { downloadData } from './qr';
 
@@ -32,60 +30,60 @@ export const apiAddTeam = async (teamName: string) => {
     if (!response.ok) {
       throw new Error(`http error status: ${response.status}`)
     }
-    return await response.json()
   } catch (error) {
     console.error('[apiAddTeam] error:', error)
     throw error
   }
 }
 
-export const apiGetGame = (game: Ref<Game | undefined>, gameState: Ref<string>) => {
-  fetch(
+export const apiGetGame = async (): Promise<Game> => {
+  try {
+    const response = await fetch(
       getApiUrl("/game")
     )
-  .then(response => response.json())
-  .then(data => {
-    game.value = data
-    if (data.state === "NEW") {
-      gameState.value = "Игра ещё не началась"
+    if (!response.ok) {
+      throw new Error(`http error status: ${response.status}`)
     }
-    if (data.state === "RUN") {
-      gameState.value = "Игра идет с " + game.value?.startAt.substring(11)
+    return await response.json()
+  } catch (error) {
+    console.error('[apiGetGame] error:', error)
+    throw error
   }
-    if (data.state === "STOP") {
-      gameState.value = "Игра остановлена " + game.value?.startAt.substring(11) + " - " + game.value?.endAt.substring(11)
-    }
-  })
-  .catch(error => {
-    console.error('Ошибка:', error)
-  });
 }
 
-export const apiStartGame = (gameState: Ref<string>) => {
-  gameState.value = "Загрузка..."
-  fetch(
+export const apiStartGame = async () => {
+  try {
+    const response = await fetch(
       getApiUrl("/game/start"),
       { method: "POST" }
     )
-    .catch(error => {
-      console.error('Ошибка:', error)
-    });
+    if (!response.ok) {
+      throw new Error(`http error status: ${response.status}`)
+    }
+  } catch (error) {
+    console.error('[apiStartGame] error:', error)
+    throw error
+  }
 }
 
-export const apiStopGame = (gameState: Ref<string>) => {
-  gameState.value = "Загрузка..."
-  fetch(
+export const apiStopGame = async () => {
+  try {
+    const response = await fetch(
       getApiUrl("/game/stop"),
       { method: "POST" }
     )
-  .catch(error => {
-    console.error('Ошибка:', error)
-  });
+    if (!response.ok) {
+      throw new Error(`http error status: ${response.status}`)
+    }
+  } catch (error) {
+    console.error('[apiStopGame] error:', error)
+    throw error
+  }
 }
 
-
-export const apiGaveApplication = (teamId: number, id: number) => {
-  fetch(
+export const apiGaveApplication = async (teamId: number, id: number) => {
+  try {
+    const response = await fetch(
       getApiUrl("/teams/" + teamId + "/applications"),
       {
         method: "POST",
@@ -94,21 +92,31 @@ export const apiGaveApplication = (teamId: number, id: number) => {
         })
       }
     )
-  .then(() => { })
-  .catch(error => {
-    console.error('Ошибка:', error)
-  });
+    if (!response.ok) {
+      throw new Error(`http error status: ${response.status}`)
+    }
+  } catch (error) {
+    console.error('[apiGaveApplication] error:', error)
+    throw error
+  }
 }
 
-export const apiDownloadQrCodesFile = () => {
-  fetch(
+export const apiDownloadQrCodesFile = async () => {
+  try {
+    const response = await fetch(
       getApiUrl("/teams/pdf")
     )
-  .then(response => response.json())
-  .then(data => {
+    if (!response.ok) {
+      throw new Error(`http error status: ${response.status}`)
+    }
+    const data = await response.json();
     downloadData(data.result)
-  })
-  .catch(error => {
-    console.error('Ошибка:', error)
-  });
+  } catch (error) {
+    console.error('[apiDownloadQrCodesFile] error:', error)
+    throw error
+  }
+}
+
+function getApiUrl(path: string) {
+  return  "http://" + window.location.host.split(":")[0] + ":8090" + path
 }

src/components/net.ts

@@ -1,5 +0,0 @@
-export function getApiUrl(path: string) {
-  const url =  "http://" + window.location.host.split(":")[0] + ":8090" + path
-  console.log(url)
-  return url
-}

src/components/qr.ts

@@ -23,7 +23,7 @@ export const downloadData = (data: string) => {
   downloadFile(b, 'teams_qr_code.pdf', 'application/pdf;teams_qr_code.pdf')
 }
 
-export const base64ToBytes = (base64: string): Uint8Array => {
+const base64ToBytes = (base64: string): Uint8Array => {
     const binaryString = atob(base64);
     const bytes = new Uint8Array(binaryString.length);
     for (let i = 0; i < binaryString.length; i++) {
@@ -32,7 +32,7 @@ export const base64ToBytes = (base64: string): Uint8Array => {
     return bytes;
 }
 
-export const downloadFile = (bytes: Uint8Array, fileName: string, mimeType: string) => {
+const downloadFile = (bytes: Uint8Array, fileName: string, mimeType: string) => {
   const blob = new Blob([bytes], { type: mimeType });
   const url = URL.createObjectURL(blob);
   const link = document.createElement('a');