generated from VLADIMIR/template_frontend
update editor
This commit is contained in:
@@ -8,7 +8,7 @@ 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, NSwitch, NDynamicInput } from 'naive-ui'
|
||||
import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NFlex, NSwitch, NDynamicInput } from 'naive-ui'
|
||||
import PlaceBlock from '@/components/PlaceBlock.vue';
|
||||
|
||||
const client = getAuthClient();
|
||||
@@ -21,7 +21,6 @@ const deletedScenarioName = ref('')
|
||||
const message = useMessage()
|
||||
|
||||
const fileList = ref<UploadFileInfo[]>([])
|
||||
const newPlaceFileList = ref<UploadFileInfo[]>([])
|
||||
|
||||
const scenario = ref<Scenario>({
|
||||
id: undefined,
|
||||
@@ -41,7 +40,8 @@ const newPlace = ref<Place>({
|
||||
hidden: undefined,
|
||||
applications: undefined,
|
||||
doors: undefined,
|
||||
keys: undefined
|
||||
keys: undefined,
|
||||
mode: 'mini-add'
|
||||
})
|
||||
|
||||
async function getScenario(id: number) {
|
||||
@@ -51,6 +51,10 @@ async function getScenario(id: number) {
|
||||
return
|
||||
}
|
||||
scenario.value = res.scenario!
|
||||
scenario.value.story?.places?.forEach((item) => {
|
||||
item.oldCode = item.code
|
||||
item.mode = 'show-editor'
|
||||
})
|
||||
}
|
||||
getScenario(Number(scenarioId))
|
||||
|
||||
@@ -101,27 +105,6 @@ 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,
|
||||
@@ -145,91 +128,73 @@ async function addPlace() {
|
||||
}
|
||||
}
|
||||
|
||||
async function collapseAddPlace(place: Place) {
|
||||
place.mode = 'mini-add'
|
||||
}
|
||||
|
||||
async function cancelUpdatePlace(place: Place) {
|
||||
await getScenario(Number(scenarioId))
|
||||
|
||||
place.mode = 'show-editor'
|
||||
}
|
||||
|
||||
async function updatePlace(place: Place) {
|
||||
const res = await client.UpdateScenarioPlace({
|
||||
id: scenario.value.id,
|
||||
code: place.oldCode,
|
||||
place: place
|
||||
})
|
||||
if (res.error != '') {
|
||||
message.error(res.error!)
|
||||
return
|
||||
}
|
||||
await getScenario(Number(scenarioId))
|
||||
|
||||
place.mode = 'show-editor'
|
||||
}
|
||||
|
||||
async function deletePlace(place: Place) {
|
||||
const res = await client.DeleteScenarioPlace({
|
||||
id: scenario.value.id,
|
||||
code: place.oldCode,
|
||||
})
|
||||
if (res.error != '') {
|
||||
message.error(res.error!)
|
||||
return
|
||||
}
|
||||
await getScenario(Number(scenarioId))
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HeaderMenu :add-logout="true" active="scenarios" />
|
||||
|
||||
<div class="center-block-custom content-block">
|
||||
<div class="settings-block">
|
||||
<n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button">
|
||||
<Icon class="settings-icon">
|
||||
<Settings />
|
||||
</Icon>
|
||||
Настройки
|
||||
</n-button>
|
||||
<h3 class="settings-header">{{ scenario.name }}</h3>
|
||||
</div>
|
||||
|
||||
<div class="center-block-custom-big content-block">
|
||||
<div class="places-container">
|
||||
<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 class="settings-block">
|
||||
<n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button">
|
||||
<Icon class="settings-icon">
|
||||
<Settings />
|
||||
</Icon>
|
||||
Настройки
|
||||
</n-button>
|
||||
</div>
|
||||
|
||||
<PlaceBlock :place="place" mode="show" v-for="place in scenario.story?.places"></PlaceBlock>
|
||||
<PlaceBlock :place="newPlace" v-model:mode="newPlace.mode">
|
||||
<n-flex justify="end">
|
||||
<n-button @click="collapseAddPlace(newPlace)">Отмена</n-button>
|
||||
<n-button @click="addPlace()" :disabled="!newPlace.code">Добавить точку</n-button>
|
||||
</n-flex>
|
||||
</PlaceBlock>
|
||||
|
||||
<PlaceBlock :place="place" v-model:mode="place.mode" v-for="place in scenario.story?.places">
|
||||
<n-flex justify="end">
|
||||
<n-button @click="deletePlace(place)" type="error" ghost>Удалить</n-button>
|
||||
<n-button @click="cancelUpdatePlace(place)">Отмена</n-button>
|
||||
<n-button @click="updatePlace(place)">Сохранить</n-button>
|
||||
</n-flex>
|
||||
</PlaceBlock>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -295,10 +260,6 @@ async function addPlace() {
|
||||
/* background-color: brown; */
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
padding: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.settings-button {
|
||||
float: right;
|
||||
}
|
||||
@@ -326,14 +287,15 @@ async function addPlace() {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
overflow-y: auto;
|
||||
padding: 40px 0;
|
||||
height: calc(100vh - 150px - 40px);
|
||||
padding: 20px 0;
|
||||
height: calc(100vh - 150px);
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.places-container {
|
||||
height: calc(100vh - 70px - 40px);
|
||||
padding: 20px 250px;
|
||||
height: calc(100vh - 70px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user