From 27fea6f0ed73a1eb8e18350443e7cff1d171412b Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Mon, 1 Jul 2024 10:06:52 +0300
Subject: [PATCH] sidebar with elements

---
 front/src/components/Promo/load_models.vue |  6 +++
 front/src/components/Promo/sidebar.vue     | 57 ++++++++++++++++------
 front/src/index.d.ts                       | 12 ++++-
 front/src/stores/promo_scene.ts            |  4 +-
 front/src/stores/promo_sidebar.ts          |  6 +--
 5 files changed, 62 insertions(+), 23 deletions(-)

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 7ecd0d3..07ce951 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -6,6 +6,7 @@ import { useGLTF } from '@tresjs/cientos'
 
 import { IMAGE_URL, SERVER_URL, } from '../../constants'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
+import { usePromoScene } from '../../stores/promo_scene';
 
 const props = defineProps(['source', 'loaded', 'loaded_pan'])
 
@@ -22,6 +23,7 @@ const clickable = ref<clickableAreaType[]>([])
 const clickable_objects = ref<any[]>([])
 const clickable_items = ref<any[]>([])
 const sidebar = usePromoSidebar();
+const sidebar_scene = usePromoScene()
 const { controls, camera, scene } = useTresContext()
 const { seekByName } = useSeek()
 
@@ -39,8 +41,10 @@ const loadModels = async () => {
     camera.value?.position.set(1, 1, 1);
     camera.value?.lookAt(new Vector3(1, 1, 1));
 
+    const sidebar_items = []
     for (let index = 0; index < data.length; index++) {
         const element = data[index];
+        sidebar_items.push({ ...element, is_enabled: true })
         const item = {} as model3DType
 
         item.modelUrl = `${IMAGE_URL}/${element.model_file}`
@@ -55,6 +59,8 @@ const loadModels = async () => {
         const clickable_areas = await res.json()
         clickable.value.push(...clickable_areas)
     }
+    sidebar_scene.setData(sidebar_items)
+    sidebar.open()
 
     for (let index = 0; index < clickable.value.length; index++) {
         const element = clickable.value[index];
diff --git a/front/src/components/Promo/sidebar.vue b/front/src/components/Promo/sidebar.vue
index 827fc71..3ee5b05 100644
--- a/front/src/components/Promo/sidebar.vue
+++ b/front/src/components/Promo/sidebar.vue
@@ -3,10 +3,12 @@ import { ref } from 'vue';
 import { RouterLink } from 'vue-router';
 import { onClickOutside } from '@vueuse/core'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
+import { usePromoScene } from '../../stores/promo_scene';
 
 const sidebar = usePromoSidebar()
+const scene = usePromoScene()
 const sidebar_obj = ref()
-
+console.log(scene.list)
 // onClickOutside(sidebar_obj, () => sidebar.close())
 </script>
 <template>
@@ -14,16 +16,24 @@ const sidebar_obj = ref()
         <a href="#" @click.prevent="sidebar.close" class="sidebar-close">
             <i-mdi-close />
         </a>
-        <template v-if="sidebar.is_open">
-            <h2>{{ sidebar.title }}</h2>
-            <template v-for="p in sidebar.description.split('\n')">
-                <p>{{ p }}</p>
+        <div class="sidebar-content">
+            <template v-if="!sidebar.is_open"></template>
+            <template v-else-if="(sidebar.description && sidebar.title)">
+                <h2>{{ sidebar.title }}</h2>
+                <template v-for="p in sidebar.description.split('\n')">
+                    <p>{{ p }}</p>
+                </template>
+                <RouterLink class="btn" :to="`/promo/main/${sidebar.target}`" v-if="sidebar.target">
+                    {{ sidebar.target_name }}
+                </RouterLink>
             </template>
-            <RouterLink class="btn" :to="`/promo/main/${sidebar.target}`" v-if="sidebar.target">
-                {{ sidebar.target_name }}
-            </RouterLink>
-
-        </template>
+            <template v-else>
+                <template v-for="item in scene.list">
+                    <h3>{{ item.name }}</h3>
+                    <p>{{ item.description }}</p>
+                </template>
+            </template>
+        </div>
     </div>
 </template>
 <style scoped lang="scss">
@@ -35,8 +45,9 @@ const sidebar_obj = ref()
     right: -27vw;
     bottom: 0;
     transition: all 300ms linear;
+    line-height: 1.25;
 
-    padding: 2rem;
+    padding: 3rem 2rem 2rem;
 
     &.open {
         right: 0
@@ -50,17 +61,31 @@ const sidebar_obj = ref()
         color: black;
     }
 
+    &-content {
+        max-height: 100%;
+        overflow: auto;
+    }
+
     h2 {
         text-align: center;
         font-size: 2rem;
         margin: 1rem
     }
 
-    p {
+    p,
+    h3 {
         margin: 1rem 0;
+    }
+
+    p {
         font-size: 1.25rem;
     }
 
+    h3 {
+        font-size: 1.5rem;
+        font-weight: bold
+    }
+
     .btn {
         display: block;
         margin: 0 auto;
@@ -69,21 +94,21 @@ const sidebar_obj = ref()
         background: linear-gradient(90deg, rgba(129, 230, 217, 1) 0%, rgba(79, 209, 197, 1) 100%);
         color: #313133;
         transition: .2s linear;
-        
+
         padding: 1rem 1.5rem;
         font-size: 1.25rem;
         font-weight: 700;
 
         text-align: center;
         text-decoration: none;
-        
+
         align-items: center;
         justify-content: center;
         text-transform: uppercase;
         letter-spacing: 1.3px;
-        
+
         border-radius: 1000px;
-        
+
         box-shadow: 12px 12px 24px rgba(79, 209, 197, .64);
     }
 
diff --git a/front/src/index.d.ts b/front/src/index.d.ts
index 7e432e4..235d506 100644
--- a/front/src/index.d.ts
+++ b/front/src/index.d.ts
@@ -40,12 +40,20 @@ interface clickableAreaType {
     target_name?: string
 }
 interface PromoSidebarData {
-    title: string
-    description: string
+    title?: string
+    description?: string
     target?: string
     target_name?: string
 }
 interface PromoSidebar extends PromoSidebarData {
     loading: boolean
     is_open: boolean
+}
+interface PromoScene {
+    id: number
+    model_file: string
+    name: string
+    description: string
+    parent?: number
+    is_enabled: boolean
 }
\ No newline at end of file
diff --git a/front/src/stores/promo_scene.ts b/front/src/stores/promo_scene.ts
index d6c5777..c16c854 100644
--- a/front/src/stores/promo_scene.ts
+++ b/front/src/stores/promo_scene.ts
@@ -2,11 +2,11 @@ import { defineStore } from 'pinia'
 
 export const usePromoScene = defineStore('promo_scene', {
     state: () => {
-        return [] as PromoScene[]
+        return { list: [] as PromoScene[] }
     },
     actions: {
         setData(data: PromoScene[]) {
-            this.$state = data
+            this.list = data
         }
     }
 })
diff --git a/front/src/stores/promo_sidebar.ts b/front/src/stores/promo_sidebar.ts
index 0921385..1d2067b 100644
--- a/front/src/stores/promo_sidebar.ts
+++ b/front/src/stores/promo_sidebar.ts
@@ -3,10 +3,10 @@ import { defineStore } from 'pinia'
 export const usePromoSidebar = defineStore('promo_sidebar', {
     state: () => {
         return {
-            title: 'Сайдбар',
-            description: 'Описание',
+            title: undefined,
+            description: undefined,
             target: undefined,
-            target_name: 'Перейти дальше',
+            target_name: undefined,
             loading: true,
             is_open: false
         } as PromoSidebar