start places editor

src/components/PlaceBlock.vue

@@ -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

@@ -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-direction: column;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
-    justify-content: center;
     overflow-y: auto;
     padding: 40px 0;
     height: calc(100vh - 150px - 40px);