From e45c19124a0f0d5aaa364dd2d597387bfc7596de Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 7 Jun 2024 12:34:06 +0300
Subject: [PATCH] pillar color

---
 assets/main.scss                |  7 ++--
 components/calcValues.vue       | 63 ++++++++++++++++++++++++++-------
 components/model/parametric.vue |  2 +-
 3 files changed, 57 insertions(+), 15 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index 508c89e..123ae5e 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -121,7 +121,7 @@ label {
 }
 
 input {
-    @apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg w-full 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;
+    @apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg w-full 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;
 }
 
 button {
@@ -133,5 +133,8 @@ button {
 }
 
 .form {
-    @apply col-span-full flex gap-4
+    @apply col-span-full flex flex-col gap-4;
+    &-row {
+        @apply flex flex-row gap-4;
+    }
 }
\ No newline at end of file
diff --git a/components/calcValues.vue b/components/calcValues.vue
index f3a5042..fc6335e 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -21,33 +21,72 @@ const form_state = reactive({
     length: fence_section.value * 1000,
     height: lamelles_count.value * parametric.height.step
 })
+
 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) && parametric[key].max) {
+            if (form_state[key] > parametric[key].max) {
+                form_state[key] = parametric[key].max
+            }
+        }
+        if (parametric.hasOwnProperty(key) && parametric[key].min) {
+            if (form_state[key] < parametric[key].min) {
+                form_state[key] = parametric[key].min
+            }
+        }
+    }
 }
+
 const setLamelleColor = (color: string) => {
     lamelle_color.value = color
 }
+const setPillarColor = (color: string) => {
+    pillar_color.value = color
+}
+
 watch(form_state, changeParametres, { deep: true })
 </script>
 <template>
     <div class="container">
         <form class="form">
-            <div class="form-item">
-                <label for="length">Длина секции, мм</label>
-                <input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
+            <div class="form-row">
+                <div class="form-item">
+                    <label for="length">Длина секции, мм</label>
+                    <input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
+                </div>
+                <div class="form-item">
+                    <label for="height">Высота забора, мм</label>
+                    <input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
+                </div>
             </div>
-            <div class="form-item">
-                <label for="height">Высота забора, мм</label>
-                <input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
+            <div class="form-row">
+                <div class="form-item">
+                    <label for="lamelle_color">Цвет ламелей</label>
+                    <input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
+                </div>
+                <div class="colors flex flex-wrap">
+                    <template v-for="color in converter.hex">
+                        <div class="color size-5" :class="[{ 'outline outline-primary': color == lamelle_color }]"
+                            :style="[{ backgroundColor: color }]" @click="setLamelleColor(color)">
+                        </div>
+                    </template>
+                </div>
             </div>
-            <div class="colors flex flex-wrap">
-                <template v-for="color in converter.hex">
-                    <div class="color size-5" :class="[{ 'outline outline-primary': color == lamelle_color }]"
-                        :style="[{ backgroundColor: color }]" @click="setLamelleColor(color)">
-                    </div>
-                </template>
+            <div class="form-row">
+                <div class="form-item">
+                    <label for="pillar_color">Цвет столба</label>
+                    <input id="pillar_color" type="text" v-model="pillar_color" disabled />
+                </div>
+                <div class="colors flex flex-wrap">
+                    <template v-for="color in converter.hex">
+                        <div class="color size-5" :class="[{ 'outline outline-primary': color == pillar_color }]"
+                            :style="[{ backgroundColor: color }]" @click="setPillarColor(color)">
+                        </div>
+                    </template>
+                </div>
             </div>
         </form>
     </div>
diff --git a/components/model/parametric.vue b/components/model/parametric.vue
index d26083e..60482ec 100644
--- a/components/model/parametric.vue
+++ b/components/model/parametric.vue
@@ -20,7 +20,7 @@ renderer.value.toneMapping = NeutralToneMapping
             <Environment files='/hdrmaps/skukuza_golf_4k.hdr' :background="true" />
         </Suspense>
         <Suspense>
-            <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3">
+            <TresGroup :scale="3" :rotate-y="-Math.PI * -0.5" :translate-y="-3.25">
                 <ModelItem model-url="/models_one/bottom.glb"
                     :position="[-fence_section * 0.5 - pillar_size, -bSize, 0]" :remove-pos="true"
                     :color="pillar_color" />