generated from VLADIMIR/template_frontend
151 lines
3.7 KiB
Vue
151 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { getAuthClient } from '@/api/auth_client';
|
|
import type { Scenario } from '@/api/generated/crabs/evening_detective_server';
|
|
import HeaderMenu from '@/components/HeaderMenu.vue'
|
|
import { useMessage } from 'naive-ui';
|
|
import { ref } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { NCard, NModal, NButton, NInput } from 'naive-ui'
|
|
|
|
|
|
const client = getAuthClient();
|
|
|
|
const scenarios = ref<Scenario[]>([])
|
|
|
|
const router = useRouter()
|
|
|
|
const message = useMessage()
|
|
|
|
const showAddScenarioModal = ref(false)
|
|
const newScenarioName = ref('')
|
|
|
|
async function getScenarios() {
|
|
scenarios.value = []
|
|
const res = await client.GetMyScenarios({})
|
|
scenarios.value = res.scenarios!
|
|
}
|
|
|
|
async function addScenario(name: string) {
|
|
const res = await client.AddScenario({ name: name })
|
|
if (res.error != '') {
|
|
message.error(res.error!)
|
|
return
|
|
}
|
|
await toScenarioEditor(res.id!)
|
|
}
|
|
|
|
async function toScenarioEditor(id: number) {
|
|
router.push('/scenarios/' + id)
|
|
}
|
|
|
|
getScenarios()
|
|
</script>
|
|
|
|
<template>
|
|
<HeaderMenu :add-logout="true" active="scenarios" />
|
|
|
|
<div class="center-block-custom-big content-block">
|
|
|
|
<div class="scenarios-container">
|
|
|
|
<div class="scenario-block" @click="showAddScenarioModal = true">
|
|
<div class="scenario-image-block scenario-image-plus">+</div>
|
|
<p class="scenario-title">Создать новый сценарий</p>
|
|
</div>
|
|
|
|
<div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioEditor(scenario.id!)">
|
|
<div class="scenario-image-block scenario-image"
|
|
:style="{ backgroundImage: `url(${scenario.image})` }"></div>
|
|
<p class="scenario-title">{{ scenario.name }}</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Окно создания сценария -->
|
|
<n-modal v-model:show="showAddScenarioModal">
|
|
<n-card style="width: 600px" title="Создание сценария" :bordered="false" size="huge" role="dialog"
|
|
aria-modal="true">
|
|
<template #header-extra>
|
|
<n-button @click="showAddScenarioModal = false">
|
|
x
|
|
</n-button>
|
|
</template>
|
|
<n-input v-model:value="newScenarioName" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
|
|
<template #footer>
|
|
<n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0">
|
|
Создать
|
|
</n-button>
|
|
</template>
|
|
</n-card>
|
|
</n-modal>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
.scenarios-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
overflow-y: auto;
|
|
padding: 40px 0;
|
|
height: calc(100vh - 150px);
|
|
/* border: 1px solid red; */
|
|
}
|
|
|
|
.scenario-block {
|
|
margin: 10px;
|
|
width: 150px;
|
|
cursor: pointer;
|
|
/* background-color: #553333; */
|
|
}
|
|
|
|
.scenario-block:hover {
|
|
color: #63e2b7;
|
|
}
|
|
|
|
.scenario-image-block {
|
|
height: 150px;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.scenario-image-block:hover {
|
|
color: #63e2b7;
|
|
border: 2px solid #63e2b7;
|
|
}
|
|
|
|
.scenario-image-plus {
|
|
font-size: 120px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #333333;
|
|
}
|
|
|
|
.scenario-image {
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.scenario-title {
|
|
padding: 5px 0;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.scenarios-container {
|
|
height: calc(100vh - 70px);
|
|
}
|
|
|
|
.scenario-block {
|
|
width: 250px;
|
|
}
|
|
|
|
.scenario-image-block {
|
|
height: 250px;
|
|
border-radius: 10px;
|
|
}
|
|
}
|
|
</style>
|