generated from VLADIMIR/template_frontend
337 lines
9.7 KiB
Vue
337 lines
9.7 KiB
Vue
<script setup lang="ts">
|
|
|
|
import { Settings } from '@vicons/carbon'
|
|
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 HeaderMenu from '@/components/HeaderMenu.vue'
|
|
import { useMessage } from 'naive-ui';
|
|
import { ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
const client = getAuthClient()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const gameId = route.params.id
|
|
|
|
const message = useMessage()
|
|
|
|
const showSettingsModal = ref(false)
|
|
const showGiveApplicationModal = ref(false)
|
|
const showAddTeamModal = ref(false)
|
|
const showDeleteTeamModal = ref(false)
|
|
const newTeamName = ref('')
|
|
|
|
const game = ref<Game>({
|
|
id: undefined,
|
|
name: undefined,
|
|
description: undefined,
|
|
startAt: undefined,
|
|
status: undefined,
|
|
scenario: undefined,
|
|
teams: undefined,
|
|
})
|
|
|
|
async function getGame(id: number) {
|
|
const res = await client.GetGame({ id: id })
|
|
if (res.error != '') {
|
|
message.error(res.error!)
|
|
return
|
|
}
|
|
game.value = res.game!
|
|
}
|
|
getGame(Number(gameId))
|
|
|
|
async function toTeamStory(id: number, password: string) {
|
|
router.push('/team-story/' + id + '?password=' + password)
|
|
}
|
|
|
|
async function updateGame() {
|
|
const res = await client.UpdateGame({
|
|
id: game.value.id,
|
|
name: game.value.name,
|
|
description: game.value.description,
|
|
startAt: game.value.startAt,
|
|
scenarioId: game.value.scenario?.id,
|
|
})
|
|
if (res.error != '') {
|
|
message.error(res.error!)
|
|
return
|
|
}
|
|
await getGame(game.value.id!)
|
|
showSettingsModal.value = false
|
|
}
|
|
|
|
const giveApplicationTeam = ref<Team>({
|
|
id: 0,
|
|
name: '',
|
|
status: '',
|
|
password: '',
|
|
actionsCount: 0,
|
|
applications: []
|
|
})
|
|
|
|
const deletedTeamName = ref('')
|
|
const deletedTeam = 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 addTeam() {
|
|
const res = await client.AddTeam({
|
|
gameId: game.value.id,
|
|
name: newTeamName.value,
|
|
})
|
|
if (res.error != '') {
|
|
message.error(res.error!)
|
|
return
|
|
}
|
|
await getGame(game.value.id!)
|
|
showAddTeamModal.value = false
|
|
}
|
|
|
|
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
|
|
}
|
|
|
|
async function deleteTeam(team: Team) {
|
|
deletedTeam.value = team
|
|
showDeleteTeamModal.value = true
|
|
}
|
|
|
|
async function confirmDeleteTeam() {
|
|
const res = await client.DeleteTeam({
|
|
id: deletedTeam.value.id,
|
|
})
|
|
if (res.error != '') {
|
|
message.error(res.error!)
|
|
return
|
|
}
|
|
await getGame(game.value.id!)
|
|
showDeleteTeamModal.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="center-block-custom">
|
|
<div class="width1200">
|
|
|
|
<div class="settings-block">
|
|
Команд: {{ game.teams?.length }}
|
|
<n-button quaternary @click="showSettingsModal = true" class="settings-button">
|
|
<Icon class="settings-icon">
|
|
<Settings />
|
|
</Icon>
|
|
Настройки
|
|
</n-button>
|
|
</div>
|
|
|
|
<div class="team-block team-block-hover" @click="showAddTeamModal = true">
|
|
<p class="place-image-plus">+</p>
|
|
</div>
|
|
|
|
<div v-for="team in game.teams" class="team-block">
|
|
<div class="team-content-block">
|
|
<div class="title-block">
|
|
<span class="team-name-block">
|
|
{{ team.name }}
|
|
</span>
|
|
<div>
|
|
Поездки: {{ team.actionsCount }}
|
|
</div>
|
|
</div>
|
|
|
|
<n-flex justify="end">
|
|
<n-button @click="toTeamStory(team.id!, team.password!)">
|
|
Подсмотреть игру
|
|
</n-button>
|
|
<n-button type="error" ghost @click="deleteTeam(team)">
|
|
Удалить
|
|
</n-button>
|
|
</n-flex>
|
|
|
|
<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>
|
|
|
|
<!-- Окно настроек -->
|
|
<n-modal v-model:show="showSettingsModal">
|
|
<n-card style="width: 600px" title="Настройки игры" :bordered="false" size="huge" role="dialog"
|
|
aria-modal="true">
|
|
<template #header-extra>
|
|
<n-button @click="showSettingsModal = false"> x </n-button>
|
|
</template>
|
|
<n-space vertical>
|
|
<p>Название</p>
|
|
<n-input v-model:value="game.name" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
|
|
|
|
<p class="settings-header">Описание</p>
|
|
<n-input v-model:value="game.description" type="textarea" placeholder="Убийство пастуха..." />
|
|
|
|
</n-space>
|
|
<template #footer>
|
|
<n-flex justify="end">
|
|
<n-button @click="updateGame()" ghost> Сохранить изменения </n-button>
|
|
</n-flex>
|
|
</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-space>
|
|
<template #footer>
|
|
<n-flex justify="end">
|
|
<n-button @click="confirmGiveApplication()" ghost> Выдать </n-button>
|
|
</n-flex>
|
|
</template>
|
|
</n-card>
|
|
</n-modal>
|
|
|
|
<!-- Окно создания команды -->
|
|
<n-modal v-model:show="showAddTeamModal">
|
|
<n-card style="width: 600px" title="Создание команды" :bordered="false" size="huge" role="dialog"
|
|
aria-modal="true">
|
|
<template #header-extra>
|
|
<n-button @click="showAddTeamModal = false"> x </n-button>
|
|
</template>
|
|
<n-input v-model:value="newTeamName" type="text" placeholder='Три дебила' />
|
|
<template #footer>
|
|
<n-flex justify="end">
|
|
<n-button @click="addTeam()" :disabled="newTeamName.length == 0">
|
|
Создать
|
|
</n-button>
|
|
</n-flex>
|
|
</template>
|
|
</n-card>
|
|
</n-modal>
|
|
|
|
<!-- Окно создания команды -->
|
|
<n-modal v-model:show="showDeleteTeamModal">
|
|
<n-card style="width: 600px" title="Удаление команды" :bordered="false" size="huge" role="dialog"
|
|
aria-modal="true">
|
|
<template #header-extra>
|
|
<n-button @click="showDeleteTeamModal = false"> x </n-button>
|
|
</template>
|
|
<n-space vertical>
|
|
<p>
|
|
Введите название команды
|
|
<n-text class="name-text" strong>{{ deletedTeam.name }}</n-text> чтобы удалить его
|
|
</p>
|
|
<n-input v-model:value="deletedTeamName" type="text" placeholder='Три дебила' />
|
|
</n-space>
|
|
|
|
<template #footer>
|
|
<n-flex justify="end">
|
|
<n-button @click="confirmDeleteTeam()" :disabled="deletedTeamName != deletedTeam.name">
|
|
Удалить
|
|
</n-button>
|
|
</n-flex>
|
|
</template>
|
|
</n-card>
|
|
</n-modal>
|
|
|
|
<HeaderMenu active="games" />
|
|
</template>
|
|
|
|
<style scoped>
|
|
.team-block {
|
|
margin: 10px 0;
|
|
border-radius: 10px;
|
|
border: 1px solid #444;
|
|
}
|
|
|
|
.team-block-hover:hover {
|
|
color: #63e2b7;
|
|
cursor: pointer;
|
|
border: 1px solid #63e2b7;
|
|
}
|
|
|
|
.team-content-block {
|
|
padding: 20px;
|
|
}
|
|
|
|
.team-name-block {
|
|
font-weight: 600;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.settings-block {
|
|
height: 40px;
|
|
}
|
|
|
|
.settings-button {
|
|
float: right;
|
|
}
|
|
|
|
.settings-icon {
|
|
width: 20px;
|
|
}
|
|
|
|
.title-block {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.link-button {
|
|
margin-top: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.place-image-plus {
|
|
font-size: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.name-text {
|
|
padding: 3px;
|
|
border-radius: 3px;
|
|
background-color: rgb(255 255 255 / 10%);
|
|
}
|
|
</style>
|