The_evening_detective/evening_detective_frontend
1
0
Fork 0
generated from VLADIMIR/template_frontend
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add scenarios editor

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-07-19 19:23:21 +07:00
parent a97993c70b
commit 83b3ae5dfe
6 changed files with 211 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ScenariosPage.vue
+80 -62
View File
@@ -1,5 +1,44 @@
<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>
@@ -9,74 +48,38 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
<div class="scenarios-container">
<div class="scenario-block">
<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">
<div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioEditor(scenario.id!)">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
</div>
<div class="scenario-block">
<div class="scenario-image-block scenario-image"></div>
<p class="scenario-title">Дело №1 "Последний костёр"</p>
<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>
@@ -87,12 +90,13 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
justify-content: center;
overflow-y: auto;
padding: 40px 0;
height: calc(100vh - 70px);
height: calc(100vh - 150px);
/* border: 1px solid red; */
}
.scenario-block {
margin: 10px;
width: 250px;
width: 150px;
cursor: pointer;
/* background-color: #553333; */
}
@@ -102,8 +106,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
}
.scenario-image-block {
width: 250px;
height: 250px;
height: 150px;
border-radius: 10px;
}
@@ -129,4 +132,19 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
.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>