generated from VLADIMIR/template_frontend
add give applications
This commit is contained in:
File diff suppressed because one or more lines are too long
Vendored
+2384
File diff suppressed because one or more lines are too long
Vendored
-2384
File diff suppressed because one or more lines are too long
Vendored
+2
-2
@@ -5,8 +5,8 @@
|
|||||||
<link rel="icon" href="/favicon.ico">
|
<link rel="icon" href="/favicon.ico">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Вечерний детектив</title>
|
<title>Вечерний детектив</title>
|
||||||
<script type="module" crossorigin src="/assets/index-dK2aD98P.js"></script>
|
<script type="module" crossorigin src="/assets/index-D3SxW14E.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-D9n48hm7.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-C6QiWdi-.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
+90
-10
@@ -4,8 +4,8 @@ import { Settings } from '@vicons/carbon'
|
|||||||
import { getAuthClient } from '@/api/auth_client';
|
import { getAuthClient } from '@/api/auth_client';
|
||||||
import { Icon } from '@vicons/utils'
|
import { Icon } from '@vicons/utils'
|
||||||
import { NButton } from 'naive-ui'
|
import { NButton } from 'naive-ui'
|
||||||
import type { Game } from '@/api/generated/crabs/evening_detective_server';
|
import type { Application, Game, Team } from '@/api/generated/crabs/evening_detective_server';
|
||||||
import { NCard, NInput, NModal, NSpace } from 'naive-ui'
|
import { NCard, NInput, NModal, NSpace, NFlex } from 'naive-ui'
|
||||||
import HeaderMenu from '@/components/HeaderMenu.vue'
|
import HeaderMenu from '@/components/HeaderMenu.vue'
|
||||||
import { useMessage } from 'naive-ui';
|
import { useMessage } from 'naive-ui';
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
@@ -19,6 +19,7 @@ const gameId = route.params.id
|
|||||||
const message = useMessage()
|
const message = useMessage()
|
||||||
|
|
||||||
const showSettingsModal = ref(false)
|
const showSettingsModal = ref(false)
|
||||||
|
const showGiveApplicationModal = ref(false)
|
||||||
|
|
||||||
const game = ref<Game>({
|
const game = ref<Game>({
|
||||||
id: undefined,
|
id: undefined,
|
||||||
@@ -59,6 +60,39 @@ async function updateGame() {
|
|||||||
await getGame(game.value.id!)
|
await getGame(game.value.id!)
|
||||||
showSettingsModal.value = false
|
showSettingsModal.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const giveApplicationTeam = ref<Team>({
|
||||||
|
id: 0,
|
||||||
|
name: '',
|
||||||
|
status: '',
|
||||||
|
password: '',
|
||||||
|
actionsCount: 0,
|
||||||
|
applications: []
|
||||||
|
})
|
||||||
|
|
||||||
|
const giveApplicationApplication = ref<Application>({
|
||||||
|
name: '',
|
||||||
|
image: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
function giveApplication(team: Team, application: Application) {
|
||||||
|
giveApplicationTeam.value = team
|
||||||
|
giveApplicationApplication.value = application
|
||||||
|
showGiveApplicationModal.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirmGiveApplication() {
|
||||||
|
const res = await client.GiveTeamApplications({
|
||||||
|
id: giveApplicationTeam.value.id,
|
||||||
|
name: giveApplicationApplication.value.name,
|
||||||
|
})
|
||||||
|
if (res.error != '') {
|
||||||
|
message.error(res.error!)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
await getGame(game.value.id!)
|
||||||
|
showGiveApplicationModal.value = false
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -66,7 +100,7 @@ async function updateGame() {
|
|||||||
<div class="width1200">
|
<div class="width1200">
|
||||||
|
|
||||||
<div class="settings-block">
|
<div class="settings-block">
|
||||||
{{ game.name }}
|
Команд: {{ game.teams?.length }}
|
||||||
<n-button quaternary @click="showSettingsModal = true" class="settings-button">
|
<n-button quaternary @click="showSettingsModal = true" class="settings-button">
|
||||||
<Icon class="settings-icon">
|
<Icon class="settings-icon">
|
||||||
<Settings />
|
<Settings />
|
||||||
@@ -75,9 +109,19 @@ async function updateGame() {
|
|||||||
</n-button>
|
</n-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-for="team in game.teams" class="team-block" @click="toTeamStory(team.id!, team.password!)">
|
<div v-for="team in game.teams" class="team-block">
|
||||||
<div class="team-title">
|
<div class="team-content-block">
|
||||||
|
<div class="team-name-block">
|
||||||
{{ team.name }}
|
{{ team.name }}
|
||||||
|
<n-button class="team-url" @click="toTeamStory(team.id!, team.password!)">
|
||||||
|
Подсмотреть игру
|
||||||
|
</n-button>
|
||||||
|
</div>
|
||||||
|
<div>Поездки: {{ team.actionsCount }}</div>
|
||||||
|
<n-button v-for="application in team.applications" :key="application.name" class="link-button"
|
||||||
|
@click="giveApplication(team, application)">
|
||||||
|
Выдать: {{ application.name }}
|
||||||
|
</n-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -97,8 +141,32 @@ async function updateGame() {
|
|||||||
<p class="settings-header">Описание</p>
|
<p class="settings-header">Описание</p>
|
||||||
<n-input v-model:value="game.description" type="textarea" placeholder="Убийство пастуха..." />
|
<n-input v-model:value="game.description" type="textarea" placeholder="Убийство пастуха..." />
|
||||||
|
|
||||||
|
<n-flex justify="end">
|
||||||
<n-button @click="updateGame()" ghost> Сохранить изменения </n-button>
|
<n-button @click="updateGame()" ghost> Сохранить изменения </n-button>
|
||||||
|
</n-flex>
|
||||||
|
</n-space>
|
||||||
|
<template #footer> </template>
|
||||||
|
</n-card>
|
||||||
|
</n-modal>
|
||||||
|
|
||||||
|
<!-- Окно выдачи улик -->
|
||||||
|
<n-modal v-model:show="showGiveApplicationModal">
|
||||||
|
<n-card style="width: 600px" title="Настройки игры" :bordered="false" size="huge" role="dialog"
|
||||||
|
aria-modal="true">
|
||||||
|
<template #header-extra>
|
||||||
|
<n-button @click="showGiveApplicationModal = false"> x </n-button>
|
||||||
|
</template>
|
||||||
|
<n-space vertical>
|
||||||
|
<p>Команда</p>
|
||||||
|
<h3>{{ giveApplicationTeam.name }}</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Улика</p>
|
||||||
|
<h3>{{ giveApplicationApplication.name }}</h3>
|
||||||
|
|
||||||
|
<n-flex justify="end">
|
||||||
|
<n-button @click="confirmGiveApplication()" ghost> Выдать </n-button>
|
||||||
|
</n-flex>
|
||||||
</n-space>
|
</n-space>
|
||||||
<template #footer> </template>
|
<template #footer> </template>
|
||||||
</n-card>
|
</n-card>
|
||||||
@@ -110,19 +178,26 @@ async function updateGame() {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.team-block {
|
.team-block {
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
border: 1px solid #444;
|
border: 1px solid #444;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-block:hover {
|
.team-url {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.team-url:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #63e2b7;
|
color: #63e2b7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.team-title {
|
.team-content-block {
|
||||||
font-size: 24px;
|
padding: 20px;
|
||||||
margin-bottom: 10px;
|
}
|
||||||
|
|
||||||
|
.team-name-block {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.settings-block {
|
.settings-block {
|
||||||
@@ -136,4 +211,9 @@ async function updateGame() {
|
|||||||
.settings-icon {
|
.settings-icon {
|
||||||
width: 20px;
|
width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.link-button {
|
||||||
|
margin-top: 10px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user