From d0942f77e4dabafb14ef55bced18aa10e52e0c0a Mon Sep 17 00:00:00 2001
From: aarizona <ar.ariz.arizona@gmail.com>
Date: Thu, 29 Aug 2024 10:21:07 +0300
Subject: [PATCH] sidebar content

---
 front/src/assets/sidebar.scss              | 19 ++++++++++--
 front/src/components/Promo/load_models.vue |  2 +-
 front/src/components/Promo/sidebar.vue     | 34 ++++++++--------------
 front/src/index.d.ts                       |  1 +
 front/src/stores/promo_sidebar.ts          | 15 ++++++++--
 5 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/front/src/assets/sidebar.scss b/front/src/assets/sidebar.scss
index 20eaf6e..7b648fb 100644
--- a/front/src/assets/sidebar.scss
+++ b/front/src/assets/sidebar.scss
@@ -78,7 +78,13 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
             font-weight: 700;
             font-size: 1.25rem;
         }
-
+        
+        p {
+            &:not(:last-child) {
+                margin-bottom: 1rem;
+            }
+        }
+        
         &-title {
             display: flex;
             align-items: center;
@@ -86,15 +92,22 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
             gap: 1rem;
             color: var(--primary-color);
             cursor: pointer;
-
+            
             svg {
                 flex-shrink: 0;
             }
         }
-
+        
         &.open {
             max-height: 50vh;
         }
+
+        &-content {
+            max-height: 20vh;
+            overflow: auto;
+            margin-top: 1.125rem;
+        }
+
     }
 
     h2 {
diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 8a90b0e..c31c1b5 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -288,7 +288,7 @@ watch(() => sidebar, () => {
 
             el.getWorldPosition(target_vector);
             controls_targetto.value = target_vector;
-            camera_rotatetoto.value = new Quaternion(-0.5, -0.25, -0.125, 0.875,)
+            camera_rotatetoto.value = new Quaternion(Math.PI*0.5, Math.PI*0.5, Math.PI*0.5, Math.PI*0.5)
         }
     }
 }, { deep: true })
diff --git a/front/src/components/Promo/sidebar.vue b/front/src/components/Promo/sidebar.vue
index 5780e4b..1de0cf3 100644
--- a/front/src/components/Promo/sidebar.vue
+++ b/front/src/components/Promo/sidebar.vue
@@ -18,20 +18,10 @@ const openedChange = () => {
 watch(() => sidebar, () => {
     if (sidebar.is_open == false) {
         opened_desc.value = null;
-        open_accordions.value = []
     } else {
         opened_desc.value = sidebar.id_clickable
     }
 }, { deep: true })
-
-const open_accordions = ref([] as string[])
-const toggleAccordion = (name: string) => {
-    if (open_accordions.value.includes(name)) {
-        open_accordions.value.splice(open_accordions.value.indexOf(name), 1)
-    } else {
-        open_accordions.value.push(name)
-    }
-}
 </script>
 <template>
     <div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj">
@@ -39,28 +29,28 @@ const toggleAccordion = (name: string) => {
         <template v-else>
             <div class="sidebar-content">
                 <h2>{{ sidebar_scene.name }}</h2>
-                <div class="sidebar-accordion" :class="[{ 'open': open_accordions.includes('obj') }]">
-                    <div class="sidebar-accordion-title" @click="toggleAccordion('obj')">
-                        <i-mdi-minus-circle v-if="open_accordions.includes('obj')" />
+                <div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('obj') }]">
+                    <div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('obj')">
+                        <i-mdi-minus-circle v-if="sidebar.isAccOpen('obj')" />
                         <i-mdi-plus-circle v-else />
                         <h3>Объекты</h3>
                     </div>
 
-                    <div class="sidebar-accordion-content" v-if="open_accordions.includes('obj')">
+                    <div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('obj')">
                         <div class="sidebar-list-item" v-for="item in sidebar_scene.visible">
                             <input type="checkbox" v-model=item.is_enabled :value="item.id" :id="item.id.toString()" />
                             <label :for="item.id.toString()">{{ item.name }}</label>
                         </div>
                     </div>
                 </div>
-                <div class="sidebar-accordion" :class="[{ 'open': open_accordions.includes('clickable') }]">
-                    <div class="sidebar-accordion-title" @click="toggleAccordion('clickable')">
-                        <i-mdi-minus-circle v-if="open_accordions.includes('clickable')" />
+                <div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('clickable') }]">
+                    <div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('clickable')">
+                        <i-mdi-minus-circle v-if="sidebar.isAccOpen('clickable')" />
                         <i-mdi-plus-circle v-else />
                         <h3>Кликабельные области</h3>
                     </div>
 
-                    <div class="sidebar-accordion-content" v-if="open_accordions.includes('clickable')">
+                    <div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('clickable')">
                         <div class="sidebar-list-item" v-for="item in sidebar_scene.clickable">
                             <input type="radio" v-model=opened_desc :value="item.id" :id="item.id.toString()"
                                 :checked="opened_desc == item.id" @change="openedChange"
@@ -69,13 +59,13 @@ const toggleAccordion = (name: string) => {
                         </div>
                     </div>
                 </div>
-                <div class="sidebar-accordion" :class="[{ 'open': open_accordions.includes('desc') }]">
-                    <div class="sidebar-accordion-title" @click="toggleAccordion('desc')">
-                        <i-mdi-minus-circle v-if="open_accordions.includes('desc')" />
+                <div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('desc') }]">
+                    <div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('desc')">
+                        <i-mdi-minus-circle v-if="sidebar.isAccOpen('desc')" />
                         <i-mdi-plus-circle v-else />
                         <h3>Описание</h3>
                     </div>
-                    <div class="sidebar-accordion-content" v-if="open_accordions.includes('desc')">
+                    <div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('desc')">
                         <template
                             v-for="p in (sidebar.description || sidebar_scene.description || '').replace(/(\n|\r)+/g, '\n').split('\n')">
                             <p>{{ p }}</p>
diff --git a/front/src/index.d.ts b/front/src/index.d.ts
index aa839d9..02a5eb2 100644
--- a/front/src/index.d.ts
+++ b/front/src/index.d.ts
@@ -63,6 +63,7 @@ interface PromoSidebar extends PromoSidebarData {
     id_clickable?: number
     loading: boolean
     is_open: boolean
+    accordions: string[]
 }
 interface PromoScene {
     id: number
diff --git a/front/src/stores/promo_sidebar.ts b/front/src/stores/promo_sidebar.ts
index 2b41c75..9bfdfb3 100644
--- a/front/src/stores/promo_sidebar.ts
+++ b/front/src/stores/promo_sidebar.ts
@@ -10,7 +10,8 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
             target: undefined,
             target_name: undefined,
             loading: true,
-            is_open: false
+            is_open: false,
+            accordions: [],
         } as PromoSidebar
     },
     actions: {
@@ -29,12 +30,12 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
                     sidebar_data.target = target.target.toString()
                     sidebar_data.target_name = target.target_name
                 }
+                this.accordions.push('desc')
                 this.setData(sidebar_data)
             }
 
             this.is_open = true
             this.loading = true
-
         },
         setData(data: PromoSidebarData) {
             this.$state = Object.assign(this.$state, data)
@@ -44,6 +45,16 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
                 this.$reset()
                 this.is_open = false
             }
+        },
+        toggleAccordion(name: string) {
+            if (this.accordions.includes(name)) {
+                this.accordions.splice(this.accordions.indexOf(name), 1)
+            } else {
+                this.accordions.push(name)
+            }
+        },
+        isAccOpen(name: string) {
+            return this.accordions.includes(name)
         }
     }
 })