From cbbbfac6b390544e3387e99cda5d5d0d7a098d88 Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 7 Jun 2024 15:44:29 +0300
Subject: [PATCH] + -

---
 assets/main.scss          |  6 +++++-
 components/calcValues.vue | 23 ++++++++++++++++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index 57562f9..dfbd046 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 disabled:bg-neutral disabled:cursor-not-allowed;
+    @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;
 }
 
 button {
@@ -139,6 +139,10 @@ button {
     }
     &-item {
         @apply flex flex-row gap-4 items-center justify-center;
+
+        .icon {
+            @apply hover:text-primary cursor-pointer transition-colors text-2xl;
+        }
     }
 }
 
diff --git a/components/calcValues.vue b/components/calcValues.vue
index e7b7313..7661c27 100644
--- a/components/calcValues.vue
+++ b/components/calcValues.vue
@@ -45,7 +45,20 @@ const setLamelleColor = (color: string) => {
 const setPillarColor = (color: string) => {
     pillar_color.value = color
 }
-
+const increment = (field: keyof typeof form_state, value: number) => {
+    if (form_state.hasOwnProperty(field)) {
+        let v = form_state[field] + value * parametric[field].step ?? 1
+        if (parametric.hasOwnProperty(field)) {
+            if (v > parametric[field].max) {
+                v = parametric[field].max
+            }
+            if (v < parametric[field].min) {
+                v = parametric[field].min
+            }
+        }
+        form_state[field] = v
+    }
+}
 watch(form_state, changeParametres, { deep: true })
 </script>
 <template>
@@ -54,15 +67,15 @@ watch(form_state, changeParametres, { deep: true })
             <div class="form-row">
                 <div class="form-item">
                     <label for="length">Длина секции, мм</label>
-                    <Icon type="button" @click="increment('length')">-</Icon>
+                    <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" />
-                    <Icon type="button" @click="increment('length')">+</Icon>
+                    <Icon type="button" @click="increment('length', 1)" name="mdi:plus-circle-outline" />
                 </div>
                 <div class="form-item">
                     <label for="height">Высота забора, мм</label>
-                    <Icon type="button" @click="increment('length')">-</Icon>
+                    <Icon type="button" @click="increment('height', -1)" name="mdi:minus-circle-outline" />
                     <input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
-                    <Icon type="button" @click="increment('length')">+</Icon>
+                    <Icon type="button" @click="increment('height', 1)" name="mdi:plus-circle-outline" />
                 </div>
             </div>
             <div class="form-row">