add qr

src/components/AdminWindow.vue

@@ -10,6 +10,7 @@ import ModalWindow from './ModalWindow.vue';
 const qrurl = ref("-")
 const qrteam = ref("-")
 const isOpenModal = ref(false)
+const isOpenQrModal = ref(false)
 
 const gameState = ref("")
 const game = ref<Game | undefined>()
@@ -91,10 +92,20 @@ async function confirm() {
   isOpenModal.value = false
 }
 
+function closeQrModal() {
+  isOpenQrModal.value = false
+}
+
 function close() {
   console.log("close")
   isOpenModal.value = false
 }
+
+function adminClientQr() {
+  qrurl.value = location.href
+  qrteam.value = "Админ панель"
+  isOpenQrModal.value = true
+}
 </script>
 
 <template>
@@ -107,18 +118,17 @@ function close() {
       <button v-on:click="startGame" class="button-menu button-custom-inline">Начать</button>
       <button v-on:click="stopGame" class="button-menu button-custom-inline">Остановить</button>
       <button v-on:click="apiDownloadQrCodesFile" class="button-menu button-custom-inline">Скачать&nbsp;qr‑ы</button>
+      <button v-on:click="adminClientQr" class="button-menu button-custom-inline">Qr</button>
     </div>
   </HeaderBlock>
 
-  <TeamQRCode :data="qrurl" :title="qrteam" />
-
   <div class="center-block-custom content-block">
     <div class="team-header-block">Команды</div>
 
     <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">
+          <a v-on:click="qrurl = team.url, qrteam = team.name, isOpenQrModal = true">
             QR
           </a>
           <a :href="team.url" class="url-block" target="_blank">
@@ -144,7 +154,7 @@ function close() {
     </form>
   </div>
 
-  <ModalWindow :is-open="isOpenModal" @confirm="confirm" @close="close">
+  <ModalWindow :is-open="isOpenModal" @confirm="confirm" @close="close" buttonText="Выдано">
     <div>
       Команда: {{ gaveApplicationTeam.name }}
     </div>
@@ -153,6 +163,9 @@ function close() {
     </div>
   </ModalWindow>
 
+  <ModalWindow :is-open="isOpenQrModal" @confirm="closeQrModal" @close="closeQrModal" buttonText="Ок" title="Код">
+    <TeamQRCode :data="qrurl" :title="qrteam" />
+  </ModalWindow>
 </template>
 
 <style scoped>

src/components/ModalWindow.vue

@@ -10,6 +10,10 @@ const props = defineProps({
   title: {
     type: String,
     default: 'Внимание'
+  },
+  buttonText: {
+    type: String,
+    required: true
   }
 })
 
@@ -67,7 +71,7 @@ onUnmounted(() => {
             <div class="modal-footer">
               <slot name="footer">
                 <button class="btn-cancel" @click="closeModal">Отмена</button>
-                <button class="btn-primary" @click="confirmModal">Выдано</button>
+                <button class="btn-primary" @click="confirmModal">{{ buttonText }}</button>
               </slot>
             </div>
 

src/components/TeamQRCode.vue

@@ -19,10 +19,6 @@
 
 <style scoped>
   .qr {
-    position: absolute;
-    top: 130px;
-    right: 30px;
     text-align: center;
-    width: 120px;
   }
 </style>

src/components/qr.ts

@@ -10,11 +10,11 @@ interface QROptions {
 }
 
 export const qrOptions = ref<QROptions>({
-  width: 100,
+  width: 200,
   margin: 1,
   color: {
     dark: '#000000',
-    light: 'f0f0f0'
+    light: 'ffffff'
   }
 });