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];

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">
+        <div class="sidebar-content">
-            <h2>{{ sidebar.title }}</h2>
+            <template v-if="!sidebar.is_open"></template>
-            <template v-for="p in sidebar.description.split('\n')">
+            <template v-else-if="(sidebar.description && sidebar.title)">
-                <p>{{ p }}</p>
+                <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">
+            <template v-else>
-                {{ sidebar.target_name }}
+                <template v-for="item in scene.list">
-            </RouterLink>
+                    <h3>{{ item.name }}</h3>
-
+                    <p>{{ item.description }}</p>
-        </template>
+                </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;

front/src/index.d.ts

@@ -40,8 +40,8 @@ interface clickableAreaType {
     target_name?: string
 }
 interface PromoSidebarData {
-    title: string
+    title?: string
-    description: string
+    description?: string
     target?: string
     target_name?: string
 }
@@ -49,3 +49,11 @@ 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
+}

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
         }
     }
 })

front/src/stores/promo_sidebar.ts

@@ -3,10 +3,10 @@ import { defineStore } from 'pinia'
 export const usePromoSidebar = defineStore('promo_sidebar', {
     state: () => {
         return {
-            title: 'Сайдбар',
+            title: undefined,
-            description: 'Описание',
+            description: undefined,
             target: undefined,
-            target_name: 'Перейти дальше',
+            target_name: undefined,
             loading: true,
             is_open: false
         } as PromoSidebar