add scenarios editor

2026-07-19 19:23:21 +07:00
parent a97993c70b
commit 83b3ae5dfe
6 changed files with 211 additions and 64 deletions
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+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 { 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'
+
+const client = getAuthClient();
+const route = useRoute()
+const scenarioId = route.params.id
+
+const showSettingsScenarioModal = ref(false)
+const deletedScenarioName = ref('')
+
+const message = useMessage()
+
+const scenario = ref<Scenario>({
+    id: undefined,
+    name: undefined,
+    story: undefined,
+    author: undefined,
+    updatedAt: undefined,
+    createdAt: undefined,
+    publishedAt: undefined
+})
+
+async function getScenario(id: number) {
+    const res = await client.GetScenario({ id: id })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    scenario.value = res.scenario!
+}
+getScenario(Number(scenarioId))
+
+async function deleteScenario(id: number) {
+    const res = await client.DeleteScenario({ id: id })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    router.push('/scenarios')
+}
+
+</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">
+                <Icon class="settings-icon">
+                    <Settings />
+                </Icon>
+                Настройки
+            </n-button>
+        </n-flex>
+
+        <h1>
+            {{ scenario.name }}
+        </h1>
+
+        <div>
+            {{ scenario.story }}
+        </div>
+    </div>
+
+    <!-- Окно настроек сценария -->
+    <n-modal v-model:show="showSettingsScenarioModal">
+        <n-card style="width: 600px" title="Настройки сценария" :bordered="false" size="huge" role="dialog"
+            aria-modal="true">
+            <template #header-extra>
+                <n-button @click="showSettingsScenarioModal = false">
+                    x
+                </n-button>
+            </template>
+            <n-space vertical>
+                <p>
+                    Введите название сценария <n-text class="name-text" strong>{{ scenario.name }}</n-text> чтобы удалить
+                    его
+                </p>
+                <n-input v-model:value="deletedScenarioName" type="text"
+                    placeholder='Дело №0 "Следствие ведут овечки"' />
+                <n-button @click="deleteScenario(scenario.id!)" type="error" ghost
+                    :disabled="deletedScenarioName != scenario.name">
+                    Удалить сценарий
+                </n-button>
+            </n-space>
+            <template #footer>
+            </template>
+        </n-card>
+    </n-modal>
+</template>
+
+<style scoped>
+.settings-icon {
+    width: 20px;
+}
+
+.name-text {
+    padding: 3px;
+    border-radius: 3px;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+</style>