add qr

src/components/GamePage.vue

@@ -5,11 +5,12 @@ import { getAuthClient } from '@/api/auth_client';
 import { Icon } from '@vicons/utils'
 import { NButton } from 'naive-ui'
 import type { Application, Game, Team } from '@/api/generated/crabs/evening_detective_server';
-import { NCard, NInput, NModal, NSpace, NFlex, NText } from 'naive-ui'
+import { NCard, NInput, NModal, NSpace, NFlex, NText, NQrCode } from 'naive-ui'
 import HeaderMenu from '@/components/HeaderMenu.vue'
 import { useMessage } from 'naive-ui';
 import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { getURL } from '@/api/generated/crabs/evening_detective_server/client';
 
 const client = getAuthClient()
 const router = useRouter()
@@ -23,6 +24,8 @@ const showGiveApplicationModal = ref(false)
 const showAddTeamModal = ref(false)
 const showDeleteTeamModal = ref(false)
 const newTeamName = ref('')
+const showQR = ref(false)
+const urlQR = ref('')
 
 const game = ref<Game>({
     id: undefined,
@@ -136,6 +139,15 @@ async function confirmDeleteTeam() {
     await getGame(game.value.id!)
     showDeleteTeamModal.value = false
 }
+
+function getTeamStoryURL(id: number, password: string): string {
+    return getURL() + '/team-story/' + id + '?password=' + password
+}
+
+async function openQR(url: string) {
+    urlQR.value = url
+    showQR.value = true
+}
 </script>
 
 <template>
@@ -168,6 +180,9 @@ async function confirmDeleteTeam() {
                     </div>
 
                     <n-flex justify="end">
+                        <n-button @click="openQR(getTeamStoryURL(team.id!, team.password!))">
+                            QR
+                        </n-button>
                         <n-button @click="toTeamStory(team.id!, team.password!)">
                             Подсмотреть игру
                         </n-button>
@@ -275,6 +290,23 @@ async function confirmDeleteTeam() {
         </n-card>
     </n-modal>
 
+    <!-- Окно qr -->
+    <n-modal v-model:show="showQR">
+        <n-card style="width: 600px" title="Подсмотреть игру" :bordered="false" size="huge" role="dialog"
+            aria-modal="true">
+            <template #header-extra>
+                <n-button @click="showQR = false"> x </n-button>
+            </template>
+            <n-space vertical>
+                <div class="qr-block">
+                    <n-qr-code :value="urlQR" :size="300" :padding="0" />
+                </div>
+            </n-space>
+
+            <template #footer></template>
+        </n-card>
+    </n-modal>
+
     <HeaderMenu active="games" />
 </template>
 
@@ -333,4 +365,10 @@ async function confirmDeleteTeam() {
     border-radius: 3px;
     background-color: rgb(255 255 255 / 10%);
 }
+
+.qr-block {
+    display: inline-block;
+    background-color: white;
+    padding: 12px;
+}
 </style>