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

start places editor

Browse Source
This commit is contained in:
Владимир Фёдоров
2026-07-20 01:31:33 +07:00
parent b49074334d
commit a0dfa65be8
2 changed files with 249 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/PlaceBlock.vue
+119
View File
@@ -0,0 +1,119 @@
<script setup lang="ts">
import type { Application, Door, Key, Place, Scenario } from '@/api/generated/crabs/evening_detective_server';
import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NSwitch, NDynamicInput } from 'naive-ui'
import type { PropType } from 'vue';
const props = defineProps({
place: {
type: Object as PropType<Place>,
required: true
},
mode: {
type: String,
required: true
}
})
function onCreateApplication(): Application {
return {
name: undefined,
image: undefined
}
}
function onCreateDoor(): Door {
return {
code: undefined,
name: undefined,
keys: undefined
}
}
function onCreateKey(): Key {
return {
name: undefined
}
}
</script>
<template>
<div class="place-block">
<div v-if="mode == 'show'">
<p>{{ place.code }}</p>
<p>{{ place.name }}</p>
<p>{{ place.text }}</p>
</div>
<div v-if="mode == 'edit'">
<n-space vertical>
<n-input v-model:value="place.code" type="text" placeholder='Ы-1' />
<n-input v-model:value="place.name" type="text" placeholder='Дом №Ы' />
<n-input v-model:value="place.text" type="textarea" placeholder='В начале было слово...' />
<!-- <n-upload multiple directory-dnd :max="1" v-model:file-list="newPlaceFileList">
<n-upload-dragger>
<n-text style="font-size: 16px">
Щелкните или перетащите файл в эту область для загрузки
</n-text>
</n-upload-dragger>
</n-upload> -->
<n-switch v-model:value="place.hidden" />
<n-dynamic-input v-model:value="place.applications" :on-create="onCreateApplication">
<template #create-button-default>
Добавить улику
</template>
<template #default="{ value }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="value.name" type="text" />
</div>
</template>
</n-dynamic-input>
<n-dynamic-input v-model:value="place.doors" :on-create="onCreateDoor">
<template #create-button-default>
Добавить действие
</template>
<template #default="{ value: door }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="door.code" type="text" />
<n-input v-model:value="door.name" type="text" />
<n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey">
<template #create-button-default>
Добавить ключ
</template>
<template #default="{ value: key }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="key.name" type="text" />
</div>
</template>
</n-dynamic-input>
</div>
</template>
</n-dynamic-input>
<n-dynamic-input v-model:value="place.keys" :on-create="onCreateKey">
<template #create-button-default>
Добавить ключ
</template>
<template #default="{ value: key }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="key.name" type="text" />
</div>
</template>
</n-dynamic-input>
</n-space>
</div>
</div>
</template>
<style scoped>
.place-block {
margin: 20px 0;
padding: 20px;
border-radius: 10px;
border: 1px solid #444444;
}
</style>
src/components/ScenariosEditorPage.vue
+130 -7
View File
@@ -1,14 +1,15 @@
<script setup lang="ts">
import { getAuthClient } from '@/api/auth_client';
import type { Scenario } from '@/api/generated/crabs/evening_detective_server';
import type { Application, Door, Key, Place, Scenario } from '@/api/generated/crabs/evening_detective_server';
import HeaderMenu from '@/components/HeaderMenu.vue'
import { NButton, useMessage, NFlex, type UploadFileInfo } from 'naive-ui';
import { NButton, useMessage, type UploadFileInfo } from 'naive-ui';
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { Icon } from '@vicons/utils'
import { Settings } from '@vicons/carbon'
import router from '@/router';
import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NP } from 'naive-ui'
import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NSwitch, NDynamicInput } from 'naive-ui'
import PlaceBlock from '@/components/PlaceBlock.vue';
const client = getAuthClient();
const route = useRoute()
@@ -20,6 +21,7 @@ const deletedScenarioName = ref('')
const message = useMessage()
const fileList = ref<UploadFileInfo[]>([])
const newPlaceFileList = ref<UploadFileInfo[]>([])
const scenario = ref<Scenario>({
id: undefined,
@@ -31,6 +33,17 @@ const scenario = ref<Scenario>({
publishedAt: undefined
})
const newPlace = ref<Place>({
code: undefined,
name: undefined,
text: undefined,
image: undefined,
hidden: undefined,
applications: undefined,
doors: undefined,
keys: undefined
})
async function getScenario(id: number) {
const res = await client.GetScenario({ id: id })
if (res.error != '') {
@@ -88,6 +101,50 @@ function uint8ToBase64(uint8Array: Uint8Array) {
return btoa(binaryString);
}
function onCreateApplication(): Application {
return {
name: undefined,
image: undefined
}
}
function onCreateDoor(): Door {
return {
code: undefined,
name: undefined,
keys: undefined
}
}
function onCreateKey(): Key {
return {
name: undefined
}
}
async function addPlace() {
const res = await client.AddScenarioPlace({
id: scenario.value.id,
place: newPlace.value
})
if (res.error != '') {
message.error(res.error!)
return
}
await getScenario(Number(scenarioId))
newPlace.value = {
code: undefined,
name: undefined,
text: undefined,
image: undefined,
hidden: undefined,
applications: undefined,
doors: undefined,
keys: undefined
}
}
</script>
<template>
@@ -105,7 +162,74 @@ function uint8ToBase64(uint8Array: Uint8Array) {
</div>
<div class="places-container">
{{ scenario.story }}
<div class="place-block">
<n-space vertical>
<n-input v-model:value="newPlace.code" type="text" placeholder='Ы-1' />
<n-input v-model:value="newPlace.name" type="text" placeholder='Дом №Ы' />
<n-input v-model:value="newPlace.text" type="textarea" placeholder='В начале было слово...' />
<n-upload multiple directory-dnd :max="1" v-model:file-list="newPlaceFileList">
<n-upload-dragger>
<n-text style="font-size: 16px">
Щелкните или перетащите файл в эту область для загрузки
</n-text>
</n-upload-dragger>
</n-upload>
<n-switch v-model:value="newPlace.hidden" />
<n-dynamic-input v-model:value="newPlace.applications" :on-create="onCreateApplication">
<template #create-button-default>
Добавить улику
</template>
<template #default="{ value }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="value.name" type="text" />
</div>
</template>
</n-dynamic-input>
<n-dynamic-input v-model:value="newPlace.doors" :on-create="onCreateDoor">
<template #create-button-default>
Добавить действие
</template>
<template #default="{ value: door }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="door.code" type="text" />
<n-input v-model:value="door.name" type="text" />
<n-dynamic-input v-model:value="door.keys" :on-create="onCreateKey">
<template #create-button-default>
Добавить ключ
</template>
<template #default="{ value: key }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="key.name" type="text" />
</div>
</template>
</n-dynamic-input>
</div>
</template>
</n-dynamic-input>
<n-dynamic-input v-model:value="newPlace.keys" :on-create="onCreateKey">
<template #create-button-default>
Добавить ключ
</template>
<template #default="{ value: key }">
<div style="display: flex; align-items: center; width: 100%">
<n-input v-model:value="key.name" type="text" />
</div>
</template>
</n-dynamic-input>
<n-button @click="addPlace()" ghost>
Добавить место
</n-button>
</n-space>
</div>
<PlaceBlock :place="place" mode="show" v-for="place in scenario.story?.places"></PlaceBlock>
</div>
</div>
@@ -199,9 +323,8 @@ function uint8ToBase64(uint8Array: Uint8Array) {
.places-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
overflow-y: auto;
padding: 40px 0;
height: calc(100vh - 150px - 40px);