up

src/components/AdminWindow.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import { onMounted, ref } from 'vue';
+  import { getApiUrl } from './net';
+  import router from '@/router';
 
   type Application = {
+    id: number
     name: string
   }
 
   type Team = {
+    id: number
     name: string
     spendTime: number
     applications: Application[]
@@ -19,7 +23,7 @@
 
   function getTeams() {
     fetch(
-        "/teams"
+        getApiUrl("/teams")
     )
     .then(response => response.json())
     .then(data => {
@@ -30,7 +34,33 @@
     });
   }
 
+  function gaveApplication(teamId: number, id: number) {
+    fetch(
+      getApiUrl("/teams/" + teamId + "/applications"),
+      {
+        method: "POST",
+        body: JSON.stringify({
+          "applications": [{"id": id}]
+        })
+      }
+    )
+    .then(() => {})
+    .catch(error => {
+      console.error('Ошибка:', error)
+    });
+  }
+
+  let intervalId = 0
+  onMounted(() => {
     getTeams()
+
+    intervalId = setInterval(() => {getTeams()}, 2000);
+
+    router.beforeEach((to, from, next) => {
+      clearInterval(intervalId);
+      next();
+    });
+  });
 </script>
 
 <template>
@@ -38,13 +68,100 @@
     Вечерний детектив
   </div>
 
-  <div v-for="team in teams.teams" :key="team.name">
-    {{ team.name }}
-    {{ team.spendTime }}
-    {{ team.applications }}
+  <table class="table-custom">
+    <thead>
+      <tr>
+        <th>Название команды</th>
+        <th>Время мин.</th>
+        <th>Приложения</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="team in teams.teams" :key="team.name">
+          <td class="team-name">{{ team.name }}</td>
+          <td>{{ team.spendTime }}</td>
+          <td>
+            <div v-for="application in team.applications" :key="application.id">
+              {{ application.name }} <button class="link-button" @click="gaveApplication(team.id, application.id)">Выдано</button>
             </div>
+          </td>
+      </tr>
+    </tbody>
+  </table>
 </template>
 
 <style scoped>
+body {
+    font-family: Arial, sans-serif;
+    margin: 20px;
+}
+table {
+    width: 700px;
+    border-collapse: collapse;
+    margin: 30px auto;
+}
+th, td {
+    padding: 12px;
+    text-align: left;
+}
+th {
+    background-color: var(--main-color);
+    color: white;
+    font-weight: bold;
+}
+tr:nth-child(odd) {
+    background-color: rgb(218, 232, 212);
+}
+tr:nth-child(even) {
+    background-color: rgb(216, 219, 215);
+}
+tr:hover {
+  background-color: rgb(207, 207, 207);
+}
+.time {
+    white-space: nowrap;
+}
+.team-name {
+  font-weight: 600;
+}
+.link-button {
+  /* Основные стили */
+  display: inline;
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  cursor: pointer;
+  color: var(--main-color); /* Стандартный цвет ссылки */
+  text-decoration: underline;
+  font-weight: 600;
 
+  /* Убираем стандартное оформление кнопки */
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  /* Дополнительные свойства для лучшего отображения */
+  line-height: inherit;
+  text-align: left;
+}
+
+/* Состояние при наведении */
+.link-button:hover {
+  color: var(--second-color); /* Немного темнее */
+  text-decoration: none;
+}
+
+/* Состояние при активации (нажатии) */
+.link-button:active {
+  color: #003366; /* Еще темнее */
+}
+
+/* Состояние фокуса (для доступности) */
+.link-button:focus {
+  outline: none; /* Убираем стандартный outline */
+  text-decoration: none;
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3); /* Кастомный фокус */
+}
 </style>

src/components/net.ts

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