add qr

src/components/AdminWindow.vue

@@ -2,6 +2,7 @@
   import { onMounted, ref } from 'vue';
   import { getApiUrl } from './net';
   import router from '@/router';
+  import VueQrcode from '@chenfengyuan/vue-qrcode';
 
   type Application = {
     id: number
@@ -21,6 +22,9 @@
     teams: Team[]
   }
 
+  const qrurl = ref("-")
+  const qrteam = ref("-")
+
   const teams = ref<Teams>({teams: []})
 
   function getTeams() {
@@ -69,6 +73,23 @@
     });
   }
 
+  interface QROptions {
+    width?: number;
+    margin?: number;
+    color?: {
+      dark: string;
+      light: string;
+    };
+  }
+  const qrOptions = ref<QROptions>({
+    width: 100,
+    margin: 1,
+    color: {
+      dark: '#000000',
+      light: 'f0f0f0'
+    }
+  });
+
   let intervalId = 0
   onMounted(() => {
     getTeams()
@@ -87,16 +108,33 @@
     Вечерний детектив
   </div>
 
+  <div class="qr">
+    <VueQrcode
+      :value="qrurl"
+      :options="qrOptions"
+      tag="svg"
+      class="qr-code"
+    />
+    <div>
+    {{ qrteam }}
+    </div>
+  </div>
+
   <table class="table-custom">
     <thead>
       <tr>
+        <th>№</th>
         <th>Название команды</th>
         <th>Время мин.</th>
         <th>Приложения</th>
+        <th>Действия</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="team in teams.teams" :key="team.name">
+      <tr v-for="(team, number) in teams.teams" :key="team.name">
+          <td>
+            {{ number + 1 }}
+          </td>
           <td class="team-name">{{ team.name }}
             <a :href="team.url" target="_blank">[url]</a>
           </td>
@@ -106,6 +144,9 @@
               {{ application.name }} <button class="link-button" @click="gaveApplication(team.id, application.id)">Выдано</button>
             </div>
           </td>
+          <td>
+            <a v-on:click="qrurl = team.url, qrteam = team.name">QR</a>
+          </td>
       </tr>
     </tbody>
   </table>
@@ -233,4 +274,11 @@ a {
     cursor: not-allowed;
   }
 }
+
+.qr {
+  position: absolute;
+  top: 80px;
+  right: 30px;
+  text-align: center;
+}
 </style>