fix
This commit is contained in:
parent
5b3203e5aa
commit
9bde8ff7ee
@ -1,73 +1,75 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick, watch, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { encodeUTF8ToBase64, getApiUrl } from './utils';
|
||||
import VueQrcode from '@chenfengyuan/vue-qrcode';
|
||||
import { ref, nextTick, watch, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { encodeUTF8ToBase64, getApiUrl } from './utils';
|
||||
import VueQrcode from '@chenfengyuan/vue-qrcode';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
type Application = {
|
||||
name: string
|
||||
type Application = {
|
||||
name: string
|
||||
}
|
||||
|
||||
type Action = {
|
||||
id: string
|
||||
place: string
|
||||
name: string
|
||||
text: string
|
||||
applications: Application[]
|
||||
}
|
||||
|
||||
type Team = {
|
||||
name: string
|
||||
actions: Action[]
|
||||
}
|
||||
|
||||
const login = ref("")
|
||||
const password = ref("")
|
||||
const place = ref("")
|
||||
const team = ref<Team>({ name: "", actions: [] })
|
||||
const actions = ref<Action[]>([])
|
||||
const scrollContainer = ref<HTMLDivElement | null>();
|
||||
const gameState = ref("STOP")
|
||||
const gameStateText = ref("")
|
||||
|
||||
const qrurl = ref("-")
|
||||
interface QROptions {
|
||||
width?: number;
|
||||
margin?: number;
|
||||
color?: {
|
||||
dark: string;
|
||||
light: string;
|
||||
};
|
||||
}
|
||||
const qrOptions = ref<QROptions>({
|
||||
width: 200,
|
||||
margin: 1,
|
||||
color: {
|
||||
dark: '#303030',
|
||||
light: 'f0f0f0'
|
||||
}
|
||||
});
|
||||
|
||||
type Action = {
|
||||
id: string
|
||||
place: string
|
||||
name: string
|
||||
text: string
|
||||
applications: Application[]
|
||||
}
|
||||
|
||||
type Team = {
|
||||
name: string
|
||||
actions: Action[]
|
||||
}
|
||||
|
||||
const login = ref("")
|
||||
const password = ref("")
|
||||
const place = ref("")
|
||||
const team = ref<Team>({name: "", actions: []})
|
||||
const actions = ref<Action[]>([])
|
||||
const scrollContainer = ref<HTMLDivElement | null>();
|
||||
const gameState = ref("STOP")
|
||||
const gameStateText = ref("")
|
||||
|
||||
const qrurl = ref("-")
|
||||
interface QROptions {
|
||||
width?: number;
|
||||
margin?: number;
|
||||
color?: {
|
||||
dark: string;
|
||||
light: string;
|
||||
};
|
||||
}
|
||||
const qrOptions = ref<QROptions>({
|
||||
width: 200,
|
||||
margin: 1,
|
||||
color: {
|
||||
dark: '#303030',
|
||||
light: 'f0f0f0'
|
||||
function getTeam() {
|
||||
fetch(
|
||||
getApiUrl("/team"),
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"X-Id": encodeUTF8ToBase64(login.value),
|
||||
"X-Password": password.value
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
function getTeam() {
|
||||
fetch(
|
||||
getApiUrl("/team"),
|
||||
{
|
||||
method: "GET",
|
||||
headers: {
|
||||
"X-Id": encodeUTF8ToBase64(login.value),
|
||||
"X-Password": password.value
|
||||
},
|
||||
}
|
||||
)
|
||||
)
|
||||
.then(response => {
|
||||
if (response.status == 401) {
|
||||
router.push('/login');
|
||||
return
|
||||
}
|
||||
return response.json()
|
||||
const res = response.json()
|
||||
console.log(res)
|
||||
return res
|
||||
})
|
||||
.then(data => {
|
||||
team.value = data
|
||||
@ -79,45 +81,45 @@
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error)
|
||||
});
|
||||
}
|
||||
|
||||
function addAction() {
|
||||
const placeValue = place.value.trim()
|
||||
if (placeValue === "") {
|
||||
place.value = ""
|
||||
return
|
||||
}
|
||||
|
||||
function addAction() {
|
||||
const placeValue = place.value.trim()
|
||||
if (placeValue === "") {
|
||||
place.value = ""
|
||||
return
|
||||
fetch(
|
||||
getApiUrl("/team/actions"),
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-Id": encodeUTF8ToBase64(login.value),
|
||||
"X-Password": password.value
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"place": placeValue
|
||||
})
|
||||
}
|
||||
fetch(
|
||||
getApiUrl("/team/actions"),
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-Id": encodeUTF8ToBase64(login.value),
|
||||
"X-Password": password.value
|
||||
},
|
||||
body: JSON.stringify({
|
||||
"place": placeValue
|
||||
})
|
||||
}
|
||||
)
|
||||
.then(async () => {place.value = ""})
|
||||
)
|
||||
.then(async () => { place.value = "" })
|
||||
}
|
||||
|
||||
const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
|
||||
await nextTick();
|
||||
if (scrollContainer.value) {
|
||||
scrollContainer.value.scrollTo({
|
||||
top: scrollContainer.value.scrollHeight,
|
||||
behavior
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const scrollToBottom = async (behavior: ScrollBehavior = 'smooth'): Promise<void> => {
|
||||
await nextTick();
|
||||
if (scrollContainer.value) {
|
||||
scrollContainer.value.scrollTo({
|
||||
top: scrollContainer.value.scrollHeight,
|
||||
behavior
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function getGame() {
|
||||
qrurl.value = location.href
|
||||
fetch(
|
||||
getApiUrl("/game")
|
||||
)
|
||||
function getGame() {
|
||||
qrurl.value = location.href
|
||||
fetch(
|
||||
getApiUrl("/game")
|
||||
)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
gameState.value = data.state
|
||||
@ -134,36 +136,40 @@
|
||||
.catch(error => {
|
||||
console.error('Ошибка:', error)
|
||||
});
|
||||
}
|
||||
|
||||
// Автоматическая прокрутка при изменении items
|
||||
watch(actions, () => {
|
||||
scrollToBottom();
|
||||
}, { deep: true });
|
||||
|
||||
let intervalId = 0
|
||||
onMounted(() => {
|
||||
login.value = sessionStorage.getItem("teamId") || ""
|
||||
password.value = sessionStorage.getItem("password") || ""
|
||||
if (login.value == "") {
|
||||
login.value = route.query["name"]?.toString() || ""
|
||||
password.value = route.query["password"]?.toString() || ""
|
||||
sessionStorage.setItem("teamId", login.value)
|
||||
sessionStorage.setItem("password", password.value)
|
||||
}
|
||||
|
||||
// Автоматическая прокрутка при изменении items
|
||||
watch(actions, () => {
|
||||
scrollToBottom();
|
||||
}, { deep: true });
|
||||
|
||||
let intervalId = 0
|
||||
onMounted(() => {
|
||||
login.value = sessionStorage.getItem("teamId") || ""
|
||||
password.value = sessionStorage.getItem("password") || ""
|
||||
if (login.value == "") {
|
||||
login.value = route.query["name"]?.toString() || ""
|
||||
password.value = route.query["password"]?.toString() || ""
|
||||
sessionStorage.setItem("teamId", login.value)
|
||||
sessionStorage.setItem("password", password.value)
|
||||
}
|
||||
getTeam()
|
||||
|
||||
intervalId = setInterval(() => {
|
||||
getTeam()
|
||||
getGame()
|
||||
}, 2000);
|
||||
|
||||
intervalId = setInterval(() => {
|
||||
getTeam()
|
||||
getGame()
|
||||
}, 1000);
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
clearInterval(intervalId);
|
||||
next();
|
||||
});
|
||||
router.beforeEach((to, from, next) => {
|
||||
clearInterval(intervalId);
|
||||
next();
|
||||
});
|
||||
});
|
||||
|
||||
// function formatText(text: string) {
|
||||
// return text.replaceAll(' ', ' ')
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -181,19 +187,12 @@
|
||||
<div class="center-block-custom">
|
||||
<form @submit.prevent="addAction">
|
||||
<div>
|
||||
<input
|
||||
class="input-custom"
|
||||
v-model="place"
|
||||
type="text"
|
||||
placeholder="Место назначения (А-1, а-1, а1)"
|
||||
<input class="input-custom" v-model="place" type="text" placeholder="Место назначения (А-1, а-1, а1)"
|
||||
:disabled="gameState !== 'RUN'">
|
||||
</div>
|
||||
<div class="button-container">
|
||||
<div class="second-color info-custom">{{ gameStateText }}</div>
|
||||
<button
|
||||
class="button-custom"
|
||||
type="submit"
|
||||
:disabled="gameState !== 'RUN'">Поехали</button>
|
||||
<button class="button-custom" type="submit" :disabled="gameState !== 'RUN'">Поехали</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -205,12 +204,7 @@
|
||||
<div v-if="!team || !team.actions.length">
|
||||
<div class="center-message">
|
||||
<div class="qr">
|
||||
<VueQrcode
|
||||
:value="qrurl"
|
||||
:options="qrOptions"
|
||||
tag="svg"
|
||||
class="qr-code"
|
||||
/>
|
||||
<VueQrcode :value="qrurl" :options="qrOptions" tag="svg" class="qr-code" />
|
||||
<div>
|
||||
Пора решать загадку
|
||||
</div>
|
||||
@ -223,11 +217,11 @@
|
||||
<div class="message-header">
|
||||
{{ action.place }}: {{ action.name }}
|
||||
</div>
|
||||
<hr class="hr"/>
|
||||
<hr class="hr" />
|
||||
<div class="message-content">
|
||||
{{ action.text }}
|
||||
{{ action.text }}
|
||||
</div>
|
||||
<hr class="hr" v-if="action.applications.length"/>
|
||||
<hr class="hr" v-if="action.applications.length" />
|
||||
<div class="message-footer" v-for="application in action.applications" :key="application.name">
|
||||
Приложение: {{ application.name }}
|
||||
</div>
|
||||
@ -298,7 +292,8 @@ body {
|
||||
|
||||
.message-content {
|
||||
font-weight: 500;
|
||||
white-space: pre-line;
|
||||
/* white-space: pre-line; */
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.message-footer {
|
||||
@ -332,4 +327,3 @@ body {
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user