calc test

app.vue

@@ -47,7 +47,7 @@ const toggleModal = () => {
         </div>
       </div>
     </div>
-    <div class="siteblock bg-white" :id="about?.slug">
+    <div class="siteblock bg-white" :id="about?.slug" v-if="about">
       <div class="container">
         <div class="siteblock-content">
           <h2 class="siteblock-title">{{ about?.title }}</h2>
@@ -64,10 +64,10 @@ const toggleModal = () => {
       </div>
     </div>
     <div class="siteblock siteblock_imgbg bg-slate-500"
-      :style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]" :id="reviews?.slug">
+      :style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]" :id="reviews?.slug" v-if="reviews">
       <NuxtImg :src="[apiBase, reviews?.image].join('/')" class="invisible" />
     </div>
-    <div class="siteblock bg-white" :id="reviews?.slug">
+    <div class="siteblock bg-white" :id="reviews?.slug" v-if="reviews">
       <div class="container">
         <template v-for="item in reviewsData?.slice(0, 3)">
           <div class="review">
@@ -89,7 +89,7 @@ const toggleModal = () => {
     </div>
     <div class="siteblock siteblock_imgbg bg-slate-500"
       :style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
-      <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
+      <NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" v-if="delivery" />
     </div>
     <div class="siteblock siteblock_calc bg-white">
       <CalcValues />
@@ -103,7 +103,7 @@ const toggleModal = () => {
         <template v-for="item in footerData">
           <div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
         </template>
-        <div class="footer-text footer-text-social">
+        <div class="footer-text footer-text-social" v-if="social_networkData">
           <template v-for="item in social_networkData">
             <a :href="item.link" target="_blank">
               <Icon :name="item.icon" /> {{ item.name }}

assets/main.scss

@@ -66,6 +66,7 @@ a[href^="#"] {
             max-height: 50vh;
         }
     }
+
     &_calc {
         @apply py-0;
     }
@@ -117,13 +118,17 @@ a[href^="#"] {
 }
 
 label {
-    @apply inline-block text-sm font-medium text-gray-900 dark:text-white;
+    @apply inline-block text-sm font-medium text-gray-900 dark:text-white min-w-36;
 }
 
 input {
     @apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 disabled:bg-neutral disabled:cursor-not-allowed;
 }
 
+textarea {
+    @apply block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500
+}
+
 button {
     @apply rounded-full bg-primary hover:bg-primary-400 transition-colors px-10 py-3 inline-block text-lg font-bold shadow-lg cursor-pointer disabled:opacity-50 disabled:hover:bg-primary;
 
@@ -134,26 +139,35 @@ button {
 
 .form {
     @apply col-span-full flex flex-col gap-4;
+
     &-row {
-        @apply flex flex-row gap-4;
+        @apply flex flex-row flex-wrap gap-4;
     }
+
     &-item {
         @apply flex flex-row gap-4 items-center justify-center;
 
         .icon {
             @apply hover:text-primary cursor-pointer transition-colors text-2xl;
+
+            &.disabled {
+                @apply text-neutral pointer-events-none cursor-not-allowed;
+            }
         }
     }
 }
 
 .color_picker {
     @apply leading-none;
+
     &-selected {
         @apply size-10 rounded border-gray-300 shadow inline-block leading-none;
+
         &__active {
             @apply outline outline-2 outline-offset-2 outline-primary;
         }
     }
+
     &-changer {
         @apply absolute w-80 z-10 bg-white flex gap-0;
     }

components/calcValues.vue

@@ -10,6 +10,10 @@ const parametric = {
         max: 2400,
         step: 10,
     },
+    total_length: {
+        min: 0.1,
+        step: 0.1,
+    },
     height: {
         min: 220,
         max: 2400,
@@ -18,8 +22,13 @@ const parametric = {
 }
 const form_state = reactive({
     length: fence_section.value * 1000,
-    height: lamelles_count.value * parametric.height.step
+    height: lamelles_count.value * parametric.height.step,
+    total_length: fence_section.value,
+    total_length_mm: fence_section.value * 1000,
+    full_sections: 1,
+    extra_section: 0
 })
+const auto_section_width = ref<boolean>(false)
 
 const changeParametres = () => {
     const lamelles = Math.floor(form_state.height / parametric.height.step)
@@ -37,6 +46,27 @@ const changeParametres = () => {
             }
         }
     }
+    form_state.total_length_mm = form_state.total_length * 1000
+    if (auto_section_width.value) {
+        // form_state.length
+        if (form_state.total_length_mm % form_state.length) {
+            let w = parametric.length.max
+            while ((form_state.total_length_mm % form_state.length > 0) && w > parametric.length.min) {
+                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
+    }
+    form_state.full_sections = Math.ceil(form_state.total_length_mm / form_state.length)
+    form_state.extra_section = form_state.total_length_mm % form_state.length
+
+    if (form_state.extra_section < parametric.length.min) {
+        console.log('eh')
+    }
 }
 
 const setLamelleColor = (color: string) => {
@@ -59,11 +89,22 @@ const increment = (field: keyof typeof form_state, value: number) => {
         form_state[field] = v
     }
 }
+const autoSectionWidth = () => {
+    auto_section_width.value = !auto_section_width.value
+}
 
 const predefLamelleColors = ['#474B4E', '#705335', '#FDF4E3', '#2F4538']
 const predefPillarColors = ['#474B4E', '#6A5D4D', '#F4F4F4', '#2F4538']
 
 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
+})
 </script>
 <template>
     <div class="container py-4">
@@ -71,9 +112,13 @@ watch(form_state, changeParametres, { deep: true })
             <div class="form-row">
                 <div class="form-item">
                     <label for="length">Длина секции, мм</label>
-                    <Icon type="button" @click="increment('length', -1)" name="mdi:minus-circle-outline" />
+                    <Icon type="button" @click="increment('length', -1)" name="mdi:minus-circle-outline"
-                    <input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
+                        :class="auto_section_width ? `disabled` : ''" />
-                    <Icon type="button" @click="increment('length', 1)" name="mdi:plus-circle-outline" />
+                    <input id="length" type="number" v-bind="parametric.length" v-model="form_state.length"
+                        :disabled="auto_section_width" />
+                    <Icon type="button" @click="increment('length', 1)" name="mdi:plus-circle-outline"
+                        :class="auto_section_width ? `disabled` : ''" />
+                    <Icon name="mdi:calculator-variant" @click="autoSectionWidth" />
                 </div>
                 <div class="form-item">
                     <label for="height">Высота забора, мм</label>
@@ -101,6 +146,17 @@ watch(form_state, changeParametres, { deep: true })
                     <ColorPicker :cb="setPillarColor" />
                 </div>
             </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" />
+                </div>
+                <div class="form-item grow">
+                    <label for="calculation">Приблизительный расчет забора</label>
+                    <textarea id="calculation" disabled class="w-full">{{ calc_text }}</textarea>
+                </div>
+            </div>
         </form>
     </div>
 </template>

components/modal.vue

@@ -5,6 +5,7 @@ const apiBase = config.public.apiBase
 const isModalOpen = useState('modal_open', () => false)
 const toggleModal = () => {
     modal_phone.value = ''
+    modal_name.value = ''
     isModalOpen.value = !isModalOpen.value
 }
 const modal_phone = ref()

components/model/parametric.vue

@@ -33,8 +33,8 @@ const pbrTexture = await useTexture({
         </Suspense>
         <Suspense>
             <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
-                <TresMesh receive-shadow>
+                <TresMesh receive-shadow cast-shadow :translate-y="-0.25">
-                    <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5" />
+                    <TresCircleGeometry :args="[8, 8, 8]" :rotate-x="-Math.PI * 0.5"  />
                     <TresMeshStandardMaterial v-bind="pbrTexture" />
                 </TresMesh>
                 <ModelItem model-url="/models_one/bottom.glb"