update scenario editor

src/components/HeaderMenu.vue

@@ -28,6 +28,7 @@ import { Key24Regular } from '@vicons/fluent'
 import { DoorOpen } from '@vicons/fa'
 import { h } from 'vue'
 import { DoorFrontFilled } from '@vicons/material'
+import { Icon } from '@vicons/utils'
 
 const authStore = useAuthStore();
 authStore.initFromStorage()

src/components/ScenariosEditorPage.vue

@@ -2,13 +2,13 @@
 import { getAuthClient } from '@/api/auth_client';
 import type { Scenario } from '@/api/generated/crabs/evening_detective_server';
 import HeaderMenu from '@/components/HeaderMenu.vue'
-import { NButton, useMessage, NFlex } from 'naive-ui';
+import { NButton, useMessage, NFlex, 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 } from 'naive-ui'
+import { NCard, NModal, NInput, NSpace, NText, NUpload, NUploadDragger, NP } from 'naive-ui'
 
 const client = getAuthClient();
 const route = useRoute()
@@ -19,6 +19,8 @@ const deletedScenarioName = ref('')
 
 const message = useMessage()
 
+const fileList = ref<UploadFileInfo[]>([])
+
 const scenario = ref<Scenario>({
     id: undefined,
     name: undefined,
@@ -48,26 +50,61 @@ async function deleteScenario(id: number) {
     router.push('/scenarios')
 }
 
+async function updateScenario() {
+    const file = fileList.value[0].file
+    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,
+        data: uint8ToBase64(bytes)
+    })
+    if (resUploadFile.error != '') {
+        message.error(resUploadFile.error!)
+        return
+    }
+
+    const res = await client.UpdateScenario({
+        id: scenario.value.id,
+        name: scenario.value.name,
+        description: scenario.value.description,
+        image: resUploadFile.filename,
+    })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    await getScenario(Number(scenarioId))
+    showSettingsScenarioModal.value = false
+}
+
+function uint8ToBase64(uint8Array: Uint8Array) {
+    // Преобразуем Uint8Array в двоичную строку
+    const binaryString = String.fromCharCode(...uint8Array);
+    // Кодируем в Base64
+    return btoa(binaryString);
+}
+
 </script>
 
 <template>
     <HeaderMenu :add-logout="true" active="scenarios" />
 
     <div class="center-block-custom content-block">
-        <n-flex justify="end">
-            <n-button quaternary @click="showSettingsScenarioModal = true">
+        <div class="settings-block">
+            <n-button quaternary @click="showSettingsScenarioModal = true" class="settings-button">
                 <Icon class="settings-icon">
                     <Settings />
                 </Icon>
                 Настройки
             </n-button>
-        </n-flex>
+            <h3 class="settings-header">{{ scenario.name }}</h3>
+        </div>
 
-        <h1>
-            {{ scenario.name }}
-        </h1>
-
-        <div>
+        <div class="places-container">
             {{ scenario.story }}
         </div>
     </div>
@@ -83,7 +120,36 @@ async function deleteScenario(id: number) {
             </template>
             <n-space vertical>
                 <p>
-                    Введите название сценария <n-text class="name-text" strong>{{ scenario.name }}</n-text> чтобы удалить
+                    Название
+                </p>
+                <n-input v-model:value="scenario.name" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
+
+                <p class="settings-header">
+                    Описание
+                </p>
+                <n-input v-model:value="scenario.description" type="textarea" placeholder='Убийство пастуха...' />
+
+                <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-dragger>
+                        <n-text style="font-size: 16px">
+                            Щелкните или перетащите файл в эту область для загрузки
+                        </n-text>
+                    </n-upload-dragger>
+                </n-upload>
+
+                <n-button @click="updateScenario()" ghost>
+                    Сохранить изменения
+                </n-button>
+
+                <hr class="settings-hr">
+
+                <p>
+                    Введите название сценария <n-text class="name-text" strong>{{ scenario.name }}</n-text> чтобы
+                    удалить
                     его
                 </p>
                 <n-input v-model:value="deletedScenarioName" type="text"
@@ -100,6 +166,19 @@ async function deleteScenario(id: number) {
 </template>
 
 <style scoped>
+.settings-block {
+    height: 40px;
+    /* background-color: brown; */
+}
+
+.settings-header {
+    padding: 5px 0 0 5px;
+}
+
+.settings-button {
+    float: right;
+}
+
 .settings-icon {
     width: 20px;
 }
@@ -109,4 +188,29 @@ async function deleteScenario(id: number) {
     border-radius: 3px;
     background-color: rgba(255, 255, 255, 0.1);
 }
+
+.settings-header {
+    margin-top: 20px;
+}
+
+.settings-hr {
+    margin: 20px 0;
+}
+
+.places-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    overflow-y: auto;
+    padding: 40px 0;
+    height: calc(100vh - 150px - 40px);
+    /* border: 1px solid red; */
+}
+
+@media (min-width: 1024px) {
+    .places-container {
+        height: calc(100vh - 70px - 40px);
+    }
+}
 </style>

src/components/ScenariosPage.vue

@@ -54,7 +54,8 @@ getScenarios()
             </div>
 
             <div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioEditor(scenario.id!)">
-                <div class="scenario-image-block scenario-image"></div>
+                <div class="scenario-image-block scenario-image"
+                    :style="{ backgroundImage: `url(${scenario.image})` }"></div>
                 <p class="scenario-title">{{ scenario.name }}</p>
             </div>
 
@@ -124,7 +125,6 @@ getScenarios()
 }
 
 .scenario-image {
-    background-image: url('https://avatars.mds.yandex.net/i?id=6afaa986a0a8ca7c47697195bc71a531_l-4510207-images-thumbs&n=13');
     background-size: cover;
     background-position: center;
 }