From df1ddf2992cd675d20c709a32768b89391a57b39 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 13 Jun 2024 14:28:25 +0300
Subject: [PATCH 1/2] fence modal

---
 components/calcValues.vue  |  4 ++++
 components/modal.vue       | 17 ++++++++++++++---
 components/model/fence.vue |  2 +-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/components/calcValues.vue b/components/calcValues.vue
index 2890cb2..cc5fa0d 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -8,6 +8,7 @@ const pillar_color = useState<ralTypes>('pillar_color', () => '3009')
 const lamelle_color = useState<ralTypes>('lamelle_color', () => '3004')
 const section_count = useState('section_count', () => 1)
 const extra_section = useState('extra_section', () => 0)
+const total_length = useState('total_length', () => 2000 * 0.001 * 2)
 
 const parametric = {
     length: {
@@ -79,6 +80,7 @@ const changeParametres = () => {
         } else {
             form_state.extra_section = 0
         }
+        extra_section.value = form_state.extra_section
 
         form_refs.total_length.value.setCustomValidity('')
         if (form_state.extra_section && form_state.extra_section < parametric.length.min) {
@@ -90,6 +92,8 @@ const changeParametres = () => {
                 form_state.length = parametric.length.min
             }
         }, 300)
+
+        total_length.value = form_state.total_length 
     }
 }
 
diff --git a/components/modal.vue b/components/modal.vue
index 5e12c5f..ef74957 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral'
+import { getColorNameFromRal } from '@/components/ral'
+import type { ralTypes } from '@/components/ral'
+
 const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
 
@@ -10,6 +12,8 @@ const fence_section = useState<number>('fence_section')
 const pillar_color = useState<ralTypes>('pillar_color')
 const lamelle_color = useState<ralTypes>('lamelle_color')
 const section_count = useState('section_count')
+const extra_section = useState('extra_section')
+const total_length = useState('total_length')
 
 const toggleModal = () => {
     modal_data.phone = undefined
@@ -67,7 +71,14 @@ const submit = (e: any) => {
         },
         body: JSON.stringify({
             name: modal_data.name || `ref from site ${new Date}`,
-            phone: modal_data.phone
+            phone: modal_data.phone,
+            fence_info: `Ширина секции: ${fence_section.value}
+            Ламелей в секции: ${lamelles_count.value}
+            Всего секций: ${section_count.value}
+            Дополнительная секция: ${extra_section.value}
+            Общая длина забора: ${total_length.value}
+            Цвет ламелей ${lamelle_color.value} (${getColorNameFromRal(lamelle_color.value)})
+            Цвет столбов ${pillar_color.value} (${getColorNameFromRal(pillar_color.value)})`
         })
     })
     modal_data.phone = undefined
@@ -106,7 +117,7 @@ const submit = (e: any) => {
                         Цвет столба: {{ getColorNameFromRal(pillar_color) }}
                     </div>
                     <div>
-                        Цвет ламелей: {{getColorNameFromRal(lamelle_color) }}
+                        Цвет ламелей: {{ getColorNameFromRal(lamelle_color) }}
                     </div>
                 </div>
                 <div class="flex gap-4">
diff --git a/components/model/fence.vue b/components/model/fence.vue
index 5b7d0a1..86d8896 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -20,7 +20,7 @@ watch([fence_section, lamelles_count], () => {
     pillar_one_pos.value = fence_section.value * -0.5 - 0.01
     pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
 })
-const scale_koef = 3
+const scale_koef = 2.5
 const show_pillar_one = ref(props.index == 1)
 const show_pillar_two = ref(true)
 const make_translate_to_section = () => {

From 4f867b832f2d68ab3ff939016e0de2f2961a9f07 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 13 Jun 2024 14:37:09 +0300
Subject: [PATCH 2/2] fix blocks

---
 components/calcValues.vue | 47 +++++++++------------------------------
 1 file changed, 11 insertions(+), 36 deletions(-)

diff --git a/components/calcValues.vue b/components/calcValues.vue
index 35a8d37..3c971ec 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -93,7 +93,7 @@ const changeParametres = () => {
             }
         }, 300)
 
-        total_length.value = form_state.total_length 
+        total_length.value = form_state.total_length
     }
 }
 
@@ -167,52 +167,27 @@ const toggleModal = () => {
                             v-model="form_state.total_length" :ref="form_refs.total_length" />
                     </div>
                 </div>
-                <div class="form-row prose">
-                    <p>
-                        Забор общей длиной {{ form_state.total_length }} м,
-                         {{ section_count }} секции по {{ form_state.length }}мм
-                        <span class="contents" v-if="form_state.extra_section">
-                             1 дополнительной секцией длинной {{ form_state.extra_section }}мм
-                        </span>.
-                    </p>
-                    <p>
-                        Всего {{ section_count + ~~(!!form_state.extra_section) + 1 }} столба
-                        {{ section_count * lamelles_count }} ламелей длинной {{ form_state.length }}мм
-                        <span class="contents" v-if="form_state.extra_section">
-                            и {{ ~~(!!form_state.extra_section) * lamelles_count }} ламелей длинной {{ form_state.extra_section }}мм
-                        </span>
-                    </p>
-                    <p>
-                        Все элементы окрашиваются порошковым методом.
-                    </p>
-                    <p>
-                        ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }};
-                        столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
-                    </p>
-                    <p v-if="form_state.extra_section" class="text-ioprim">
-                        Внимание! Дополнительная секция приводит к увеличению стоимости. Рекомендуем вам изменить длину
-                        забора или длину секции!
-                    </p>
                 <div class="form-row">
-                    <div class="prose col-span-6">
+
+                    <div class="col-span-6 prose">
                         <p>
                             Забор общей длиной {{ form_state.total_length }} м,
-                            всего секций {{ section_count }} по {{ form_state.length }}мм
+                            {{ section_count }} секции по {{ form_state.length }} мм
                             <span class="contents" v-if="form_state.extra_section">
-                                и 1 дополнительной секцией в {{ form_state.extra_section }}мм
+                                1 дополнительной секцией длинной {{ form_state.extra_section }} мм
                             </span>.
                         </p>
                         <p>
-                            Всего столбов {{ section_count + ~~(!!form_state.extra_section) + 1 }}.
-                            Всего ламелей {{ section_count * lamelles_count }} по {{ form_state.length }}мм
+                            Всего {{ section_count + ~~(!!form_state.extra_section) + 1 }} столба,
+                            {{ section_count * lamelles_count }} ламелей длинной {{ form_state.length }} мм
                             <span class="contents" v-if="form_state.extra_section">
-                                и {{ ~~(!!form_state.extra_section) * lamelles_count }} по {{ form_state.extra_section
-                                }}мм
+                                и {{ ~~(!!form_state.extra_section) * lamelles_count }} ламелей длинной {{
+                                    form_state.extra_section }} мм
                             </span>
                         </p>
                         <p>
-                            Окраска порошковым методом,
-                            ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }},
+                            Все элементы окрашиваются порошковым методом: <br />
+                            ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }};
                             столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
                         </p>
                     </div>