add first custom component
This commit is contained in:
parent
695b5b149f
commit
bd71eee8fd
@ -1,10 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue';
|
||||
import router from '@/router';
|
||||
import VueQrcode from '@chenfengyuan/vue-qrcode';
|
||||
import type { Game, Teams } from './models';
|
||||
import { qrOptions } from './qr';
|
||||
import { apiGetTeams, apiAddTeam, apiGetGame, apiStartGame, apiStopGame, apiGaveApplication, apiDownloadQrCodesFile } from './client';
|
||||
import TeamQRCode from '../components/TeamQRCode.vue'
|
||||
|
||||
const qrurl = ref("-")
|
||||
const qrteam = ref("-")
|
||||
@ -20,12 +19,28 @@ async function addTeam() {
|
||||
teamName.value = ""
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
apiStartGame(gameState)
|
||||
async function startGame() {
|
||||
gameState.value = "Загрузка..."
|
||||
await apiStartGame()
|
||||
}
|
||||
|
||||
function stopGame() {
|
||||
apiStopGame(gameState)
|
||||
async function stopGame() {
|
||||
gameState.value = "Загрузка..."
|
||||
await apiStopGame()
|
||||
}
|
||||
|
||||
async function getGame() {
|
||||
game.value = await apiGetGame()
|
||||
|
||||
if (game.value.state === "NEW") {
|
||||
gameState.value = "Игра ещё не началась"
|
||||
}
|
||||
if (game.value.state === "RUN") {
|
||||
gameState.value = "Игра идет с " + game.value?.startAt.substring(11)
|
||||
}
|
||||
if (game.value.state === "STOP") {
|
||||
gameState.value = "Игра остановлена " + game.value?.startAt.substring(11) + " - " + game.value?.endAt.substring(11)
|
||||
}
|
||||
}
|
||||
|
||||
let intervalId = 0
|
||||
@ -34,7 +49,7 @@ onMounted(async () => {
|
||||
|
||||
intervalId = setInterval(async () => {
|
||||
teams.value = await apiGetTeams()
|
||||
apiGetGame(game, gameState)
|
||||
await getGame()
|
||||
}, 2000);
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
@ -49,12 +64,7 @@ onMounted(async () => {
|
||||
Вечерний детектив - {{ gameState }}
|
||||
</div>
|
||||
|
||||
<div class="qr">
|
||||
<VueQrcode :value="qrurl" :options="qrOptions" tag="svg" class="qr-code" />
|
||||
<div>
|
||||
{{ qrteam }}
|
||||
</div>
|
||||
</div>
|
||||
<TeamQRCode :data="qrurl" :title="qrteam" />
|
||||
|
||||
<div class="form-block buttons-block">
|
||||
<a v-on:click="startGame" class="button-menu">Начать</a>
|
||||
@ -241,14 +251,6 @@ a {
|
||||
}
|
||||
}
|
||||
|
||||
.qr {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
right: 30px;
|
||||
text-align: center;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
28
src/components/TeamQRCode.vue
Normal file
28
src/components/TeamQRCode.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import { qrOptions } from './qr';
|
||||
import VueQrcode from '@chenfengyuan/vue-qrcode';
|
||||
|
||||
defineProps({
|
||||
data: String,
|
||||
title: String
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="qr">
|
||||
<VueQrcode :value="data" :options="qrOptions" tag="svg" />
|
||||
<div>
|
||||
{{ title }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.qr {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
right: 30px;
|
||||
text-align: center;
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,3 @@
|
||||
import type { Ref } from 'vue';
|
||||
import { getApiUrl } from './net';
|
||||
import type { Game, Teams } from './models';
|
||||
import { downloadData } from './qr';
|
||||
|
||||
@ -32,83 +30,93 @@ export const apiAddTeam = async (teamName: string) => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`http error status: ${response.status}`)
|
||||
}
|
||||
return await response.json()
|
||||
} catch (error) {
|
||||
console.error('[apiAddTeam] error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export const apiGetGame = (game: Ref<Game | undefined>, gameState: Ref<string>) => {
|
||||
fetch(
|
||||
getApiUrl("/game")
|
||||
)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
game.value = data
|
||||
if (data.state === "NEW") {
|
||||
gameState.value = "Игра ещё не началась"
|
||||
export const apiGetGame = async (): Promise<Game> => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
getApiUrl("/game")
|
||||
)
|
||||
if (!response.ok) {
|
||||
throw new Error(`http error status: ${response.status}`)
|
||||
}
|
||||
if (data.state === "RUN") {
|
||||
gameState.value = "Игра идет с " + game.value?.startAt.substring(11)
|
||||
}
|
||||
if (data.state === "STOP") {
|
||||
gameState.value = "Игра остановлена " + game.value?.startAt.substring(11) + " - " + game.value?.endAt.substring(11)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error)
|
||||
});
|
||||
return await response.json()
|
||||
} catch (error) {
|
||||
console.error('[apiGetGame] error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export const apiStartGame = (gameState: Ref<string>) => {
|
||||
gameState.value = "Загрузка..."
|
||||
fetch(
|
||||
getApiUrl("/game/start"),
|
||||
{ method: "POST" }
|
||||
)
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error)
|
||||
});
|
||||
}
|
||||
|
||||
export const apiStopGame = (gameState: Ref<string>) => {
|
||||
gameState.value = "Загрузка..."
|
||||
fetch(
|
||||
getApiUrl("/game/stop"),
|
||||
{ method: "POST" }
|
||||
)
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error)
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
export const apiGaveApplication = (teamId: number, id: number) => {
|
||||
fetch(
|
||||
getApiUrl("/teams/" + teamId + "/applications"),
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
"applications": [{ "id": id }]
|
||||
})
|
||||
export const apiStartGame = async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
getApiUrl("/game/start"),
|
||||
{ method: "POST" }
|
||||
)
|
||||
if (!response.ok) {
|
||||
throw new Error(`http error status: ${response.status}`)
|
||||
}
|
||||
)
|
||||
.then(() => { })
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error)
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[apiStartGame] error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export const apiDownloadQrCodesFile = () => {
|
||||
fetch(
|
||||
getApiUrl("/teams/pdf")
|
||||
)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
export const apiStopGame = async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
getApiUrl("/game/stop"),
|
||||
{ method: "POST" }
|
||||
)
|
||||
if (!response.ok) {
|
||||
throw new Error(`http error status: ${response.status}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[apiStopGame] error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export const apiGaveApplication = async (teamId: number, id: number) => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
getApiUrl("/teams/" + teamId + "/applications"),
|
||||
{
|
||||
method: "POST",
|
||||
body: JSON.stringify({
|
||||
"applications": [{ "id": id }]
|
||||
})
|
||||
}
|
||||
)
|
||||
if (!response.ok) {
|
||||
throw new Error(`http error status: ${response.status}`)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[apiGaveApplication] error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export const apiDownloadQrCodesFile = async () => {
|
||||
try {
|
||||
const response = await fetch(
|
||||
getApiUrl("/teams/pdf")
|
||||
)
|
||||
if (!response.ok) {
|
||||
throw new Error(`http error status: ${response.status}`)
|
||||
}
|
||||
const data = await response.json();
|
||||
downloadData(data.result)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error)
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('[apiDownloadQrCodesFile] error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
function getApiUrl(path: string) {
|
||||
return "http://" + window.location.host.split(":")[0] + ":8090" + path
|
||||
}
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
export function getApiUrl(path: string) {
|
||||
const url = "http://" + window.location.host.split(":")[0] + ":8090" + path
|
||||
console.log(url)
|
||||
return url
|
||||
}
|
||||
@ -23,7 +23,7 @@ export const downloadData = (data: string) => {
|
||||
downloadFile(b, 'teams_qr_code.pdf', 'application/pdf;teams_qr_code.pdf')
|
||||
}
|
||||
|
||||
export const base64ToBytes = (base64: string): Uint8Array => {
|
||||
const base64ToBytes = (base64: string): Uint8Array => {
|
||||
const binaryString = atob(base64);
|
||||
const bytes = new Uint8Array(binaryString.length);
|
||||
for (let i = 0; i < binaryString.length; i++) {
|
||||
@ -32,7 +32,7 @@ export const base64ToBytes = (base64: string): Uint8Array => {
|
||||
return bytes;
|
||||
}
|
||||
|
||||
export const downloadFile = (bytes: Uint8Array, fileName: string, mimeType: string) => {
|
||||
const downloadFile = (bytes: Uint8Array, fileName: string, mimeType: string) => {
|
||||
const blob = new Blob([bytes], { type: mimeType });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user