From 3a3b8deaa36cf3cc296a60d3230fb83d610889f6 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 13 Jun 2024 13:52:58 +0300
Subject: [PATCH 1/2] colors

---
 components/calcValues.vue | 24 +++++++-----------------
 components/modal.vue      | 11 ++++-------
 2 files changed, 11 insertions(+), 24 deletions(-)

diff --git a/components/calcValues.vue b/components/calcValues.vue
index 8101ee2..4f23ddc 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral'
+import { getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
 
 const lamelles_count = useState('lamelles_count', () => 8)
@@ -107,15 +107,6 @@ const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '1012', '30
 const predefPillarColors = ['3004', '7043', '6028', '5013', '8016', '1020', '3005', '4009']
 
 watch(form_state, changeParametres, { deep: true })
-watch(form_state, changeParametres, { deep: true })
-
-const calc_text = computed(() => {
-    let txt = `Всего секций: ${form_state.full_sections} по ${form_state.length}мм`
-    if (form_state.extra_section) {
-        txt += `, 1 по ${form_state.extra_section}мм`
-    }
-    return txt
-})
 
 const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
@@ -130,8 +121,8 @@ const toggleModal = () => {
                     <div class="form-item w-full">
                         <label for="length">Длина секции, мм</label>
                         <input disabled :value="`${form_state.length} мм`" class="w-28" />
-                        <input id="length" type="range" class="w-full" v-bind="parametric.length" v-model="form_state.length"
-                            :disabled="auto_section_width" :ref="form_refs.length" />
+                        <input id="length" type="range" class="w-full" v-bind="parametric.length"
+                            v-model="form_state.length" :disabled="auto_section_width" :ref="form_refs.length" />
                         <Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
                     </div>
                 </div>
@@ -139,8 +130,8 @@ const toggleModal = () => {
                     <div class="form-item w-full">
                         <label for="height">Высота забора, мм</label>
                         <input disabled :value="`${form_state.height} мм`" class="w-28" />
-                        <input id="height" type="range" class="w-full" v-bind="parametric.height" v-model="form_state.height"
-                            :ref="form_refs.height" />
+                        <input id="height" type="range" class="w-full" v-bind="parametric.height"
+                            v-model="form_state.height" :ref="form_refs.height" />
                     </div>
                 </div>
                 <div class="form-row">
@@ -193,9 +184,8 @@ const toggleModal = () => {
                         столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
                     </p>
                     <p v-if="form_state.extra_section" class="text-ioprim">
-                        Внимание! Дополнительная секция приводит к увеличению стоимости. Рекомендуем вам изменить длину
-                        забора или длину
-                        секции!
+                        Внимание! Дополнительная секция приводит к увеличению стоимости.
+                        Рекомендуем вам изменить длину забора или длину секции!
                     </p>
                 </div>
                 <div class="form-row justify-center">
diff --git a/components/modal.vue b/components/modal.vue
index ae024d9..5e12c5f 100644
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -7,8 +7,8 @@ const isModalOpen = useState('modal_open', () => false)
 
 const lamelles_count = useState<number>('lamelles_count')
 const fence_section = useState<number>('fence_section')
-const pillar_color = useState('pillar_color')
-const lamelle_color = useState('lamelle_color')
+const pillar_color = useState<ralTypes>('pillar_color')
+const lamelle_color = useState<ralTypes>('lamelle_color')
 const section_count = useState('section_count')
 
 const toggleModal = () => {
@@ -103,13 +103,10 @@ const submit = (e: any) => {
                         Секций: {{ section_count }}
                     </div>
                     <div>
-                        Цвет столба:
-                        <input id="pillar_color" :value="getColorNameFromRal(pillar_color)" />
-                       
+                        Цвет столба: {{ getColorNameFromRal(pillar_color) }}
                     </div>
                     <div>
-                        Цвет ламелей:
-                        <input id="lamelle_color" :value="getColorNameFromRal(lamelle_color)" />
+                        Цвет ламелей: {{getColorNameFromRal(lamelle_color) }}
                     </div>
                 </div>
                 <div class="flex gap-4">

From 107798df0e534394e01d137f93bf56e84ddc57b0 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 13 Jun 2024 13:57:33 +0300
Subject: [PATCH 2/2] columns

---
 components/calcValues.vue | 53 +++++++++++++++++++++------------------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/components/calcValues.vue b/components/calcValues.vue
index 4f23ddc..2890cb2 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -163,30 +163,35 @@ 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>
-                        Окраска порошковым методом,
-                        ламели: {{ 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">
+                        <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>
+                            Окраска порошковым методом,
+                            ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }},
+                            столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
+                        </p>
+                    </div>
+                    <div class="prose col-span-6">
+                        <p v-if="form_state.extra_section" class="text-ioprim">
+                            Внимание! Дополнительная секция приводит к увеличению стоимости.
+                            Рекомендуем вам изменить длину забора или длину секции!
+                        </p>
+                    </div>
                 </div>
                 <div class="form-row justify-center">
                     <button @click.prevent="toggleModal">Купить прямо сейчас</button>