add qr

src/assets/main.css

@@ -23,7 +23,18 @@
   color: white;
 }
 
-.button-custom:hover {
+.button-custom-inline {
+  margin: 10px;
+  background-color: var(--main-color);
+  font-weight: 600;
+  color: white;
+  padding: 6px 8px;
+  border: 1px solid #ddd;
+  border-radius: 15px;
+  font-size: 14px;
+}
+
+.button-custom:hover, .button-custom-inline:hover {
   background-color: var(--second-color);
 }
 

src/components/AdminWindow.vue

@@ -143,6 +143,39 @@
     });
 }
 
+function base64ToBytes(base64: string): Uint8Array {
+    const binaryString = atob(base64);
+    const bytes = new Uint8Array(binaryString.length);
+    for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+    }
+    return bytes;
+}
+
+function downloadQrCodesFile() {
+  fetch(
+    getApiUrl("/teams/pdf")
+  )
+    .then(response => response.json())
+    .then(data => {
+      const b = base64ToBytes(data.result)
+      downloadFile(b, 'teams_qr_code.pdf', 'application/pdf;teams_qr_code.pdf')
+    })
+    .catch(error => {
+      console.error('Ошибка:', error)
+    });
+}
+
+function downloadFile(bytes: Uint8Array, fileName: string, mimeType: string) {
+  const blob = new Blob([bytes], { type: mimeType });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = fileName;
+  link.click();
+  URL.revokeObjectURL(url);
+};
+
 let intervalId = 0
 onMounted(() => {
   getTeams()
@@ -165,12 +198,7 @@
   </div>
 
   <div class="qr">
-    <VueQrcode
+    <VueQrcode :value="qrurl" :options="qrOptions" tag="svg" class="qr-code" />
-      :value="qrurl"
-      :options="qrOptions"
-      tag="svg"
-      class="qr-code"
-    />
     <div>
       {{ qrteam }}
     </div>
@@ -181,14 +209,14 @@
     <a v-on:click="stopGame" class="button-menu">Остановить</a>
   </div>
 
-  <table class="table-custom">
+  <table>
     <thead>
       <tr>
         <th>№</th>
         <th>Название команды</th>
         <th>Поездки</th>
         <th>Приложения</th>
-        <th>Действия</th>
+        <th><button v-on:click="downloadQrCodesFile" class="button-custom-inline">Скачать qr-ы</button></th>
       </tr>
     </thead>
     <tbody>
@@ -202,7 +230,8 @@
         <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>
+            {{ application.name }} <button class="link-button"
+              @click="gaveApplication(team.id, application.id)">Выдано</button>
           </div>
         </td>
         <td>
@@ -232,42 +261,54 @@ body {
   font-family: Arial, sans-serif;
   margin: 20px;
 }
+
 .buttons-block {
   padding-top: 20px;
 }
+
 .button-menu {
   margin: 5px;
 }
+
 table {
   width: 700px;
   border-collapse: collapse;
   margin: 30px auto;
   border: 1px solid #444444;
 }
-th, td {
+
+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(239, 239, 239);
 }
+
 tr:nth-child(even) {
   background-color: rgb(255, 255, 255);
 }
+
 tr:hover {
   background-color: rgb(207, 207, 207);
 }
+
 .time {
   white-space: nowrap;
 }
+
 .team-name {
   font-weight: 600;
 }
+
 .link-button {
   /* Основные стили */
   display: inline;
@@ -277,7 +318,8 @@ tr:hover {
   margin: 0;
   font: inherit;
   cursor: pointer;
-  color: var(--main-color); /* Стандартный цвет ссылки */
+  color: var(--main-color);
+  /* Стандартный цвет ссылки */
   text-decoration: underline;
   font-weight: 600;
 
@@ -293,20 +335,24 @@ tr:hover {
 
 /* Состояние при наведении */
 .link-button:hover {
-  color: var(--second-color); /* Немного темнее */
+  color: var(--second-color);
+  /* Немного темнее */
   text-decoration: none;
 }
 
 /* Состояние при активации (нажатии) */
 .link-button:active {
-  color: #003366; /* Еще темнее */
+  color: #003366;
+  /* Еще темнее */
 }
 
 /* Состояние фокуса (для доступности) */
 .link-button:focus {
-  outline: none; /* Убираем стандартный outline */
+  outline: none;
+  /* Убираем стандартный outline */
   text-decoration: none;
-  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3); /* Кастомный фокус */
+  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3);
+  /* Кастомный фокус */
 }
 
 .form-block {