add images

src/components/PlaceBlock.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch } from 'naive-ui'
+import { NDynamicInput, NInput, NInputGroup, NSpace, NSwitch, NText, NUpload, NUploadDragger } from 'naive-ui'
 import type { PropType } from 'vue'
 import { LockOutlined } from '@vicons/material'
 import { Icon } from '@vicons/utils'
@@ -87,7 +87,14 @@ function onCreateKey(): Key {
 
   <div v-if="mode == 'show-editor'" class="place-block-hover show-editor-block" @click="updateMode('edit')">
     <p>[{{ props.place.code }}] - {{ props.place.name }}</p>
-    <div class="message-content">{{ props.place.text }}</div>
+    <div class="message-content">
+      <div v-if="props.place.image">
+        <div class="message-image-border">
+          <img :src="props.place.image" class="message-image">
+        </div>
+      </div>
+      {{ props.place.text }}
+    </div>
 
     <div v-for="door in props.place.doors" v-bind:key="door.code" class="door-block">
       {{ door.name }} <span v-for="key in door.keys" class="key-block">
@@ -121,6 +128,16 @@ function onCreateKey(): Key {
       </n-input-group>
       <n-input v-model:value="props.place.text" type="textarea" :autosize="{ minRows: 3 }"
         placeholder="В начале было слово..." />
+
+      <p class="settings-header">Картинка</p>
+      <n-input v-model:value="props.place.image" type="text" placeholder="Не задано" disabled />
+      <n-upload directory-dnd :max="1" v-model:file-list="props.place.fileList">
+        <n-upload-dragger>
+          <n-text style="font-size: 16px">
+            Щелкните или перетащите файл в эту область для загрузки
+          </n-text>
+        </n-upload-dragger>
+      </n-upload>
       <n-switch v-model:value="props.place.hidden">
         <template #checked>
           Скрытая точка
@@ -284,4 +301,19 @@ function onCreateKey(): Key {
   cursor: pointer;
   color: #63e2b7;
 }
+
+.message-image-border {
+  width: 40%;
+  float: left;
+  padding: 7px;
+  margin-right: 15px;
+  background-image: url("@/assets/images/paper_white.jpg");
+  background-size: cover;
+  box-shadow: 0px 3px 15px rgb(98, 98, 98);
+  transform: rotate(-3deg);
+}
+
+.message-image {
+  width: 100%;
+}
 </style>

src/components/ScenariosEditorPage.vue

@@ -56,28 +56,45 @@ async function deleteScenario(id: number) {
   router.push('/scenarios')
 }
 
-async function updateScenario() {
-  const file = fileList.value[0].file
-  if (!file) return
+async function uploadFile(file: File | null, filename: string): Promise<string> {
+  if (!file) {
+    return ''
+  }
 
   // Читаем как ArrayBuffer
   const arrayBuffer = await file.arrayBuffer()
   const bytes = new Uint8Array(arrayBuffer)
 
   const resUploadFile = await client.UploadFile({
-    filename: 'scenarios_' + scenario.value.id + '_' + file.name,
+    filename: filename,
     data: uint8ToBase64(bytes),
   })
   if (resUploadFile.error != '') {
     message.error(resUploadFile.error!)
-    return
+    return ''
+  }
+
+  return resUploadFile.filename || ''
+}
+
+async function updateScenario() {
+  let resUploadFilename = ''
+  if (fileList.value.length > 0) {
+    const file = fileList.value[0].file || null
+    if (file == null) {
+      return
+    }
+    resUploadFilename = await uploadFile(file, 'scenarios_' + scenario.value.id + '_' + file.name)
+    if (resUploadFilename === '') {
+      return
+    }
   }
 
   const res = await client.UpdateScenario({
     id: scenario.value.id,
     name: scenario.value.name,
     description: scenario.value.description,
-    image: resUploadFile.filename,
+    image: resUploadFilename,
   })
   if (res.error != '') {
     message.error(res.error!)
@@ -160,10 +177,6 @@ async function addNotFoundDoors(scenario: Scenario, place: Place) {
   }
 }
 
-async function collapseAddPlace(place: Place) {
-  place.mode = 'mini-add'
-}
-
 async function cancelUpdatePlace(place: Place) {
   await getScenario(Number(scenarioId))
 
@@ -171,6 +184,18 @@ async function cancelUpdatePlace(place: Place) {
 }
 
 async function updatePlace(place: Place) {
+  if (place.fileList.length > 0) {
+    const file = place.fileList[0].file || null
+    if (file == null) {
+      return
+    }
+    const resUploadFilename = await uploadFile(file, 'scenarios_' + scenario.value.id + '_place_' + place.code + '_' + file.name)
+    if (resUploadFilename === '') {
+      return
+    }
+    place.image = resUploadFilename
+  }
+
   await addNotFoundDoors(scenario.value, place)
   const res = await client.UpdateScenarioPlace({
     id: scenario.value.id,
@@ -247,7 +272,7 @@ async function deletePlace(place: Place) {
 
         <p class="settings-header">Картинка</p>
         <n-input v-model:value="scenario.image" type="text" placeholder="default_scenario.png" disabled />
-        <n-upload multiple directory-dnd :max="1" v-model:file-list="fileList">
+        <n-upload directory-dnd :max="1" v-model:file-list="fileList">
           <n-upload-dragger>
             <n-text style="font-size: 16px">
               Щелкните или перетащите файл в эту область для загрузки