From c48decce3bf039cbcaa916fe5ab7da29e0b745c1 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Thu, 13 Jun 2024 15:33:59 +0300
Subject: [PATCH] remove pillar btn

---
 assets/main.scss           |   4 +-
 components/calcValues.vue  | 254 +++++++++++++++++++------------------
 components/model/fence.vue |   6 +-
 3 files changed, 136 insertions(+), 128 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index ab426e4..5f000f7 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -152,10 +152,10 @@ button {
 }
 
 .form {
-    @apply col-span-full flex flex-col gap-4;
+    @apply col-span-full grid grid-cols-12 gap-4;
 
     &-row {
-        @apply flex flex-row flex-wrap gap-4;
+        @apply col-span-full flex flex-row flex-wrap gap-4;
     }
 
     &-item {
diff --git a/components/calcValues.vue b/components/calcValues.vue
index e533d31..20f4844 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -4,6 +4,7 @@ import type { ralTypes } from '@/components/ral'
 
 const lamelles_count = useState('lamelles_count', () => 8)
 const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
+const remove_pillar = useState<boolean>('pillar_color', () => false)
 const pillar_color = useState<ralTypes>('pillar_color', () => '3009')
 const lamelle_color = useState<ralTypes>('lamelle_color', () => '3004')
 const section_count = useState('section_count', () => 1)
@@ -34,19 +35,18 @@ const form_state = reactive({
     total_length: fence_section.value * 2,
     total_length_mm: fence_section.value * 1000,
     full_sections: 1,
-    extra_section: 0
+    extra_section: 0,
+    auto_length: false,
+    remove_pillar: false
 })
 const form_refs = {
     length: ref(),
     height: ref(),
     total_length: ref(),
 }
-const auto_section_width = ref<boolean>(false)
 
 const changeParametres = () => {
     const lamelles = Math.floor(form_state.height / parametric.height.step)
-    lamelles_count.value = lamelles
-    fence_section.value = form_state.length * 0.001
 
     for (const key in form_state) {
         if (parametric.hasOwnProperty(key)) {
@@ -58,45 +58,48 @@ const changeParametres = () => {
                 }
             }
         }
-
-        form_state.total_length_mm = form_state.total_length * 1000
-        if (auto_section_width.value) {
-            let w = parametric.length.max
-            let tw_f = (form_state.total_length_mm - form_state.fence_length)
-            let iw_f = (w - form_state.fence_length)
-            while ((tw_f % iw_f) && w > (parametric.length.min + parametric.length.step * 10)) {
-                w -= parametric.length.step
-            }
-            form_state.length = w
-        }
-        if (form_state.total_length_mm < form_state.length) {
-            form_state.length = form_state.total_length_mm
-        }
-
-        const t_f = (form_state.total_length_mm - form_state.fence_length)
-        const i_f = (form_state.length - form_state.fence_length)
-        form_state.full_sections = Math.floor(t_f / i_f)
-        section_count.value = form_state.full_sections
-        if (t_f % i_f) {
-            form_state.extra_section = Math.round(t_f % i_f)
-        } 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) {
-            form_refs.total_length.value.setCustomValidity('Расчет невозможен')
-        }
-        setTimeout(() => {
-            if (form_state.total_length < parametric.total_length.min) {
-                form_state.total_length = parametric.total_length.min
-                form_state.length = parametric.length.min
-            }
-        }, 300)
-
-        total_length.value = form_state.total_length
     }
+
+    form_state.total_length_mm = form_state.total_length * 1000
+    if (form_state.auto_length) {
+        let w = parametric.length.max
+        let tw_f = (form_state.total_length_mm - form_state.fence_length)
+        let iw_f = (w - form_state.fence_length)
+        while ((tw_f % iw_f) && w > (parametric.length.min + parametric.length.step * 10)) {
+            w -= parametric.length.step
+        }
+        form_state.length = w
+    }
+    if (form_state.total_length_mm < form_state.length) {
+        form_state.length = form_state.total_length_mm
+    }
+
+    const t_f = (form_state.total_length_mm - form_state.fence_length)
+    const i_f = (form_state.length - form_state.fence_length)
+    form_state.full_sections = Math.floor(t_f / i_f)
+    if (t_f % i_f) {
+        form_state.extra_section = Math.round(t_f % i_f)
+    } else {
+        form_state.extra_section = 0
+    }
+
+    form_refs.total_length.value.setCustomValidity('')
+    if (form_state.extra_section && form_state.extra_section < parametric.length.min) {
+        form_refs.total_length.value.setCustomValidity('Расчет невозможен')
+    }
+    setTimeout(() => {
+        if (form_state.total_length < parametric.total_length.min) {
+            form_state.total_length = parametric.total_length.min
+            form_state.length = parametric.length.min
+        }
+    }, 300)
+
+    total_length.value = form_state.total_length
+    lamelles_count.value = lamelles
+    fence_section.value = form_state.length * 0.001
+    section_count.value = form_state.full_sections
+    extra_section.value = form_state.extra_section
+    remove_pillar.value = form_state.remove_pillar
 }
 
 const setLamelleColor = (color: ralTypes) => {
@@ -105,13 +108,6 @@ const setLamelleColor = (color: ralTypes) => {
 const setPillarColor = (color: ralTypes) => {
     pillar_color.value = color
 }
-const autoSectionWidth = () => {
-    const v = auto_section_width.value
-    auto_section_width.value = !auto_section_width.value
-    if (!v == true) {
-        // changeParametres()
-    }
-}
 
 const predefLamelleColors = ['3009', '9003', '6027', '5024', '9001', '1012', '3007', '4007']
 const predefPillarColors = ['3004', '7043', '6028', '5013', '8016', '1020', '3005', '4009']
@@ -132,86 +128,96 @@ const plurals = {
     <div class="container py-4">
         <ClientOnly fallback-tag="div" fallback="Загрузка 3D модели">
             <form class="form">
-                <div class="form-row">
-                    <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" />
-                        <Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
+                <div class="col-span-6">
+                    <div class="form-row">
+                        <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="form_state.auto_length"
+                                :ref="form_refs.length" />
+                        </div>
+                        <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" />
+                        </div>
+                        <div class="form-item">
+                            <label for="total_length">Общая длина забора, м</label>
+                            <input type="number" id="total_length" v-bind="parametric.total_length"
+                                v-model="form_state.total_length" :ref="form_refs.total_length" />
+                        </div>
+                        <div class="form-item">
+                            <input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
+                            <label for="auto_length">Автоматический подбор секции</label>
+                        </div>
+                        <div class="form-item">
+                            <input id="remove_pillar" type="checkbox" v-model="form_state.remove_pillar" />
+                            <label for="remove_pillar">Без столбов</label>
+                        </div>
                     </div>
                 </div>
-                <div class="form-row">
-                    <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" />
+                <div class="col-span-6">
+                    <div class="form-row">
+                        <div class="form-item">
+                            <label for="lamelle_color">Цвет ламелей</label>
+                            <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)"
+                                class="w-60" disabled />
+                        </div>
+                        <div class="form-item">
+                            <template v-for="item in predefLamelleColors">
+                                <ColorPicker :color="item" :cb="setLamelleColor" :open="false"
+                                    :active="lamelle_color == item" />
+                            </template>
+                            <ColorPicker :cb="setLamelleColor" />
+                        </div>
+                        <div class="form-item">
+                            <label for="pillar_color">Цвет столба</label>
+                            <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
+                                disabled />
+                        </div>
+                        <div class="form-item">
+                            <template v-for="item in predefPillarColors">
+                                <ColorPicker :color="item" :cb="setPillarColor" :open="false"
+                                    :active="pillar_color == item" />
+                            </template>
+                            <ColorPicker :cb="setPillarColor" />
+                        </div>
                     </div>
                 </div>
-                <div class="form-row">
-                    <div class="form-item">
-                        <label for="lamelle_color">Цвет ламелей</label>
-                        <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" class="w-60"
-                            disabled />
-                        <template v-for="item in predefLamelleColors">
-                            <ColorPicker :color="item" :cb="setLamelleColor" :open="false"
-                                :active="lamelle_color == item" />
-                        </template>
-                        <ColorPicker :cb="setLamelleColor" />
-                    </div>
-                    <div class="form-item">
-                        <label for="pillar_color">Цвет столба</label>
-                        <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" class="w-60"
-                            disabled />
-                        <template v-for="item in predefPillarColors">
-                            <ColorPicker :color="item" :cb="setPillarColor" :open="false"
-                                :active="pillar_color == item" />
-                        </template>
-                        <ColorPicker :cb="setPillarColor" />
-                    </div>
+                <div class="col-span-8 prose min-w-full">
+                    <p>
+                        Забор общей длиной {{ form_state.total_length }}{{ '\xa0' }}м,
+                        {{ section_count }}
+                        <Plural :n="section_count" :forms="plurals.section" /> по
+                        {{ form_state.length }}{{ '\xa0' }}мм<span class="contents" v-if="form_state.extra_section">
+                            и 1 дополнительная секция длиной {{ form_state.extra_section }}{{ '\xa0' }}мм</span>.
+                    </p>
+                    <p>
+                        Всего {{ section_count + ~~(!!form_state.extra_section) + 1 }}
+                        <Plural :forms="plurals.fence" :n="section_count + ~~(!!form_state.extra_section) + 1" />,
+                        {{ section_count * lamelles_count }}
+                        <Plural :n="section_count * lamelles_count" :forms="plurals.lamelle" />
+                        длиной {{ form_state.length }}{{ '\xa0' }}мм
+                        <span class="contents" v-if="form_state.extra_section">
+                            и {{ ~~(!!form_state.extra_section) * lamelles_count }}
+                            <Plural :n="~~(!!form_state.extra_section) * lamelles_count" :forms="plurals.lamelle" />
+                            длиной {{
+                                form_state.extra_section }}{{ '\xa0' }}мм
+                        </span>.
+                    </p>
+                    <p>
+                        Все элементы окрашиваются порошковым методом: <br />
+                        ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }};
+                        столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
+                    </p>
                 </div>
-                <div class="form-row">
-                    <div class="form-item">
-                        <label for="total_length">Общая длина забора, м</label>
-                        <input type="number" id="total_length" v-bind="parametric.total_length"
-                            v-model="form_state.total_length" :ref="form_refs.total_length" />
-                    </div>
-                </div>
-                <div class="form-row">
-                    <div class="col-span-8 prose">
-                        <p>
-                            Забор общей длиной {{ form_state.total_length }}{{ '\xa0' }}м,
-                            {{ section_count }}
-                            <Plural :n="section_count" :forms="plurals.section" /> по
-                            {{ form_state.length }}{{ '\xa0' }}мм<span class="contents" v-if="form_state.extra_section">
-                                и 1 дополнительная секция длиной {{ form_state.extra_section }}{{ '\xa0' }}мм</span>.
-                        </p>
-                        <p>
-                            Всего {{ section_count + ~~(!!form_state.extra_section) + 1 }}
-                            <Plural :forms="plurals.fence" :n="section_count + ~~(!!form_state.extra_section) + 1" />,
-                            {{ section_count * lamelles_count }}
-                            <Plural :n="section_count * lamelles_count" :forms="plurals.lamelle" />
-                            длиной {{ form_state.length }}{{ '\xa0' }}мм
-                            <span class="contents" v-if="form_state.extra_section">
-                                и {{ ~~(!!form_state.extra_section) * lamelles_count }}
-                                <Plural :n="~~(!!form_state.extra_section) * lamelles_count" :forms="plurals.lamelle" />
-                                длиной {{
-                                    form_state.extra_section }}{{ '\xa0' }}мм
-                            </span>.
-                        </p>
-                        <p>
-                            Все элементы окрашиваются порошковым методом: <br />
-                            ламели: {{ getColorNameFromRal(lamelle_color)?.toLowerCase() }};
-                            столбы: {{ getColorNameFromRal(pillar_color)?.toLowerCase() }}.
-                        </p>
-                    </div>
-                    <div class="prose col-span-4">
-                        <p v-if="form_state.extra_section" class="text-ioprim">
-                            Внимание! Дополнительная секция приводит к увеличению стоимости.
-                            Рекомендуем вам изменить длину забора или длину секции!
-                        </p>
-                    </div>
+                <div class="prose col-span-4">
+                    <p v-if="form_state.extra_section" class="text-ioprim">
+                        Внимание! Дополнительная секция приводит к увеличению стоимости.
+                        Рекомендуем вам изменить длину забора или длину секции!
+                    </p>
                 </div>
                 <div class="form-row justify-center">
                     <button @click.prevent="toggleModal">Купить прямо сейчас</button>
diff --git a/components/model/fence.vue b/components/model/fence.vue
index 86d8896..a917f9e 100644
--- a/components/model/fence.vue
+++ b/components/model/fence.vue
@@ -8,6 +8,7 @@ const lamelles_count = useState<number>('lamelles_count')
 const fence_section = useState<number>('fence_section')
 const pillar_color = useState<ralTypes>('pillar_color')
 const lamelle_color = useState<ralTypes>('lamelle_color')
+const remove_pillar = useState<boolean>('pillar_color')
 
 const lSize = 0.115
 const bSize = 0.0235
@@ -23,6 +24,7 @@ watch([fence_section, lamelles_count], () => {
 const scale_koef = 2.5
 const show_pillar_one = ref(props.index == 1)
 const show_pillar_two = ref(true)
+
 const make_translate_to_section = () => {
     let r = ((props.index - 1) / 2) * (fence_section.value + pillar_size + bSize) * scale_koef
     if (props.index % 2 == 0) {
@@ -41,7 +43,7 @@ watch(fence_section, () => {
 </script>
 <template>
     <TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`">
-        <TresGroup name="pillar_one" v-if="show_pillar_one" :position-x="pillar_one_pos" :position-z="0">
+        <TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos" :position-z="0">
             <TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
                 <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
             </TresGroup>
@@ -55,7 +57,7 @@ watch(fence_section, () => {
             </TresGroup>
         </TresGroup>
 
-        <TresGroup name="pillar_two" v-if="show_pillar_two" :position-x="pillar_two_pos" :position-z="0">
+        <TresGroup name="pillar_two" v-if="!remove_pillar && show_pillar_two" :position-x="pillar_two_pos" :position-z="0">
             <TresGroup :position-y="(lSize * -0.5)" :scale="[-1, 0.5, 1]">
                 <ModelItem :model="props.models.fence" :color="getColorHexFromRal(pillar_color)" />
             </TresGroup>