add modal

src/components/AdminWindow.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import router from '@/router';
-import type { Game, Team, Teams } from './models';
+import type { Application, Game, Team, Teams } from './models';
 import { apiGetTeams, apiAddTeam, apiGetGame, apiStartGame, apiStopGame, apiGaveApplication, apiDownloadQrCodesFile } from './client';
 import TeamQRCode from '../components/TeamQRCode.vue'
 import HeaderBlock from './HeaderBlock.vue';
+import ModalWindow from './ModalWindow.vue';
 
 const qrurl = ref("-")
 const qrteam = ref("-")
+const isOpenModal = ref(false)
 
 const gameState = ref("")
 const game = ref<Game | undefined>()
@@ -62,6 +64,37 @@ onMounted(async () => {
     next();
   });
 });
+
+const gaveApplicationTeam = ref<Team>({
+  id: 0,
+  name: '',
+  password: '',
+  url: '',
+  spendTime: 0,
+  applications: []
+})
+
+const gaveApplicationApplication = ref<Application>({
+  id: 0,
+  name: ''
+})
+
+function gaveApplication(team: Team, application: Application) {
+  gaveApplicationTeam.value = team
+  gaveApplicationApplication.value = application
+  isOpenModal.value = true
+}
+
+async function confirm() {
+  console.log("confirm")
+  await apiGaveApplication(gaveApplicationTeam.value.id, gaveApplicationApplication.value.id)
+  isOpenModal.value = false
+}
+
+function close() {
+  console.log("close")
+  isOpenModal.value = false
+}
 </script>
 
 <template>
@@ -85,13 +118,18 @@ onMounted(async () => {
     <div class="team-block" v-for="team in teams.teams" :key="team.name">
       <div class="team-content-block">
         <div class="team-name-block">
-          <a v-on:click="qrurl = team.url, qrteam = team.name">QR</a>
+          <a v-on:click="qrurl = team.url, qrteam = team.name">
+            QR
+          </a>
+          <a :href="team.url" class="url-block" target="_blank">
+            URL
+          </a>
           {{ team.name }}
         </div>
         <div>Поездки: {{ team.spendTime }}</div>
       </div>
       <div v-for="application in team.applications" :key="application.id" class="link-button"
-        @click="apiGaveApplication(team.id, application.id)">
+        @click="gaveApplication(team, application)">
         Выдать: {{ application.name }}
       </div>
     </div>
@@ -106,6 +144,15 @@ onMounted(async () => {
     </form>
   </div>
 
+  <ModalWindow :is-open="isOpenModal" @confirm="confirm" @close="close">
+    <div>
+      Команда: {{ gaveApplicationTeam.name }}
+    </div>
+    <div>
+      Приложение: {{ gaveApplicationApplication.name }}
+    </div>
+  </ModalWindow>
+
 </template>
 
 <style scoped>
@@ -117,6 +164,10 @@ onMounted(async () => {
   margin: 5px 10px 5px 0;
 }
 
+.url-block {
+  margin: 5px 0;
+}
+
 .link-button {
   /* Основные стили */
   border: none;