add game

src/components/AdminWindow.vue

@@ -25,6 +25,8 @@
   const qrurl = ref("-")
   const qrteam = ref("-")
 
+  const gameState = ref("")
+
   const teams = ref<Teams>({teams: []})
 
   function getTeams() {
@@ -90,11 +92,57 @@
     }
   });
 
+  function getGame() {
+    fetch(
+        getApiUrl("/game")
+    )
+    .then(response => response.json())
+    .then(data => {
+      if (data.state === "NEW") {
+        gameState.value = "Игра ещё не началась"
+      }
+      if (data.state === "RUN") {
+        gameState.value = "Игра идет"
+      }
+      if (data.state === "STOP") {
+        gameState.value = "Игра остановлена"
+      }
+    })
+    .catch(error => {
+      console.error('Ошибка:', error)
+    });
+  }
+
+  function startGame() {
+    gameState.value = "Загрузка..."
+    fetch(
+      getApiUrl("/game/start"),
+      {method: "POST"}
+    )
+    .catch(error => {
+      console.error('Ошибка:', error)
+    });
+  }
+
+  function stopGame() {
+    gameState.value = "Загрузка..."
+    fetch(
+      getApiUrl("/game/stop"),
+      {method: "POST"}
+    )
+    .catch(error => {
+      console.error('Ошибка:', error)
+    });
+  }
+
   let intervalId = 0
   onMounted(() => {
     getTeams()
 
-    intervalId = setInterval(() => {getTeams()}, 2000);
+    intervalId = setInterval(() => {
+      getTeams()
+      getGame()
+    }, 2000);
 
     router.beforeEach((to, from, next) => {
       clearInterval(intervalId);
@@ -105,7 +153,7 @@
 
 <template>
   <div class="header-block">
-    Вечерний детектив
+    Вечерний детектив - {{ gameState }}
   </div>
 
   <div class="qr">
@@ -120,6 +168,11 @@
     </div>
   </div>
 
+  <div class="form-block buttons-block">
+    <a v-on:click="startGame" class="button-menu">Начать</a>
+    <a v-on:click="stopGame" class="button-menu">Остановить</a>
+  </div>
+
   <table class="table-custom">
     <thead>
       <tr>
@@ -171,6 +224,12 @@ body {
     font-family: Arial, sans-serif;
     margin: 20px;
 }
+.buttons-block {
+  padding-top: 20px;
+}
+.button-menu {
+  margin: 5px;
+}
 table {
     width: 700px;
     border-collapse: collapse;