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;
 }