add scenarios editor

src/components/HeaderMenu.vue

@@ -30,6 +30,8 @@ import { h } from 'vue'
 import { DoorFrontFilled } from '@vicons/material'
 
 const authStore = useAuthStore();
+authStore.initFromStorage()
+
 const router = useRouter()
 const client = getAuthClient();
 const message = useMessage()

src/components/OfficePage.vue

@@ -25,11 +25,11 @@ getPermissions()
         <p>
             Доброго времени суток, {{ authStore.username }}.
         </p>
-        <!-- <p>
+        <p>
             {{ authStore.userRoles }}
         </p>
 
-        {{ permissions }} -->
+        {{ permissions }}
     </div>
 </template>
 

src/components/ScenariosEditorPage.vue

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

src/components/ScenariosPage.vue

@@ -1,5 +1,44 @@
 <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 { useMessage } from 'naive-ui';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { NCard, NModal, NButton, NInput } from 'naive-ui'
+
+
+const client = getAuthClient();
+
+const scenarios = ref<Scenario[]>([])
+
+const router = useRouter()
+
+const message = useMessage()
+
+const showAddScenarioModal = ref(false)
+const newScenarioName = ref('')
+
+async function getScenarios() {
+    scenarios.value = []
+    const res = await client.GetMyScenarios({})
+    scenarios.value = res.scenarios!
+}
+
+async function addScenario(name: string) {
+    const res = await client.AddScenario({ name: name })
+    if (res.error != '') {
+        message.error(res.error!)
+        return
+    }
+    await toScenarioEditor(res.id!)
+}
+
+async function toScenarioEditor(id: number) {
+    router.push('/scenarios/' + id)
+}
+
+getScenarios()
 </script>
 
 <template>
@@ -9,74 +48,38 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 
         <div class="scenarios-container">
 
-            <div class="scenario-block">
+            <div class="scenario-block" @click="showAddScenarioModal = true">
                 <div class="scenario-image-block scenario-image-plus">+</div>
                 <p class="scenario-title">Создать новый сценарий</p>
             </div>
 
-            <div class="scenario-block">
+            <div class="scenario-block" v-for="scenario in scenarios" @click="toScenarioEditor(scenario.id!)">
                 <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
+                <p class="scenario-title">{{ scenario.name }}</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
-            </div>
-
-            <div class="scenario-block">
-                <div class="scenario-image-block scenario-image"></div>
-                <p class="scenario-title">Дело №1 "Последний костёр"</p>
             </div>
 
         </div>
 
     </div>
+
+    <!-- Окно создания сценария -->
+    <n-modal v-model:show="showAddScenarioModal">
+        <n-card style="width: 600px" title="Создание сценария" :bordered="false" size="huge" role="dialog"
+            aria-modal="true">
+            <template #header-extra>
+                <n-button @click="showAddScenarioModal = false">
+                    x
+                </n-button>
+            </template>
+            <n-input v-model:value="newScenarioName" type="text" placeholder='Дело №0 "Следствие ведут овечки"' />
+            <template #footer>
+                <n-button @click="addScenario(newScenarioName)" :disabled="newScenarioName.length == 0">
+                    Создать
+                </n-button>
+            </template>
+        </n-card>
+    </n-modal>
+
 </template>
 
 <style scoped>
@@ -87,12 +90,13 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
     justify-content: center;
     overflow-y: auto;
     padding: 40px 0;
-    height: calc(100vh - 70px);
+    height: calc(100vh - 150px);
+    /* border: 1px solid red; */
 }
 
 .scenario-block {
     margin: 10px;
-    width: 250px;
+    width: 150px;
     cursor: pointer;
     /* background-color: #553333; */
 }
@@ -102,8 +106,7 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 }
 
 .scenario-image-block {
-    width: 250px;
+    height: 150px;
-    height: 250px;
     border-radius: 10px;
 }
 
@@ -129,4 +132,19 @@ import HeaderMenu from '@/components/HeaderMenu.vue'
 .scenario-title {
     padding: 5px 0;
 }
+
+@media (min-width: 1024px) {
+    .scenarios-container {
+        height: calc(100vh - 70px);
+    }
+
+    .scenario-block {
+        width: 250px;
+    }
+
+    .scenario-image-block {
+        height: 250px;
+        border-radius: 10px;
+    }
+}
 </style>

src/router/index.ts

@@ -7,6 +7,7 @@ import PrivacyPolicyView from '../views/PrivacyPolicyView.vue'
 import GamesView from '../views/GamesView.vue'
 import ScenariosView from '../views/ScenariosView.vue'
 import UsersView from '../views/UsersView.vue'
+import ScenariosEditorView from '../views/ScenariosEditorView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -46,6 +47,11 @@ const router = createRouter({
       name: 'scenarios',
       component: ScenariosView,
     },
+    {
+      path: '/scenarios/:id',           // Динамический параметр id
+      name: 'ScenariosEditorView',
+      component: ScenariosEditorView,
+    },
     {
       path: '/users',
       name: 'users',

src/views/ScenariosEditorView.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import ScenariosEditorPage from '@/components/ScenariosEditorPage.vue';
+</script>
+
+<template>
+  <ScenariosEditorPage />
+</template>
+
+<style lang="css"></style>