add team form

src/components/AdminWindow.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { onMounted, ref } from 'vue';
-  import { getApiUrl } from './net';
+  import { getApiUrl, getClientUrl } from './net';
   import router from '@/router';
 
   type Application = {
@@ -11,6 +11,7 @@
   type Team = {
     id: number
     name: string
+    password: string
     spendTime: number
     applications: Application[]
   }
@@ -50,6 +51,23 @@
     });
   }
 
+  const teamName = ref("")
+  function addTeam() {
+    fetch(
+      getApiUrl("/teams"),
+      {
+        method: "POST",
+        body: JSON.stringify({
+            "teams": [{"name": teamName.value}]
+        })
+      }
+    )
+    .then(() => {teamName.value = ""})
+    .catch(error => {
+      console.error('Ошибка:', error)
+    });
+  }
+
   let intervalId = 0
   onMounted(() => {
     getTeams()
@@ -78,7 +96,7 @@
     </thead>
     <tbody>
       <tr v-for="team in teams.teams" :key="team.name">
-          <td class="team-name">{{ team.name }}</td>
+          <td class="team-name">{{ team.name }} <a :href="getClientUrl('?name=' + team.name + '&password=' + team.password)" target="_blank">[url]</a></td>
           <td>{{ team.spendTime }}</td>
           <td>
             <div v-for="application in team.applications" :key="application.id">
@@ -88,6 +106,20 @@
       </tr>
     </tbody>
   </table>
+
+  <div class="form-custom form-block">
+    <div class="center-block-custom">
+      <form @submit.prevent="addTeam">
+        <div>
+          <input class="input-custom" v-model="teamName" type="text" placeholder="Название команды">
+        </div>
+        <div class="button-container">
+          <button class="button-custom" type="submit">Добавить</button>
+        </div>
+      </form>
+    </div>
+  </div>
+
 </template>
 
 <style scoped>
@@ -164,4 +196,38 @@ tr:hover {
   text-decoration: none;
   box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3); /* Кастомный фокус */
 }
+
+.form-block {
+  width: 700px;
+  margin: 0 auto;
+}
+
+a {
+  /* Основные стили */
+  color: var(--second-color);
+  text-decoration: none;
+  transition: all 0.2s ease;
+  cursor: pointer;
+
+  /* Подчеркивание только при наведении */
+  &:hover {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 3px;
+  }
+
+  /* Состояние фокуса для доступности */
+  &:focus-visible {
+    outline: 2px solid #3182ce;
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  /* Отключенное состояние */
+  &[disabled] {
+    color: #a0aec0;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+}
 </style>

src/components/net.ts

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