82 lines
3.1 KiB
Vue
82 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
const lamelles_count = useState('lamelles_count', () => 8)
|
|
const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
|
|
const pillar_color = useState('pillar_color', () => '#828282')
|
|
const lamelle_color = useState('lamelle_color', () => '#C2B078')
|
|
|
|
const parametric = {
|
|
length: {
|
|
min: 100,
|
|
max: 2400,
|
|
step: 10,
|
|
},
|
|
height: {
|
|
min: 220,
|
|
max: 2400,
|
|
step: 115,
|
|
}
|
|
}
|
|
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 py-4">
|
|
<form class="form">
|
|
<div class="form-row">
|
|
<div class="form-item">
|
|
<label for="length">Длина секции, мм</label>
|
|
<Icon type="button" @click="increment('length')">-</Icon>
|
|
<input id="length" type="number" v-bind="parametric.length" v-model="form_state.length" />
|
|
<Icon type="button" @click="increment('length')">+</Icon>
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="height">Высота забора, мм</label>
|
|
<Icon type="button" @click="increment('length')">-</Icon>
|
|
<input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
|
|
<Icon type="button" @click="increment('length')">+</Icon>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-item">
|
|
<label for="lamelle_color">Цвет ламелей</label>
|
|
<input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
|
|
<ColorPicker :color="lamelle_color" :cb="setLamelleColor" />
|
|
</div>
|
|
<div class="form-item">
|
|
<label for="pillar_color">Цвет столба</label>
|
|
<input id="pillar_color" type="text" v-model="pillar_color" disabled />
|
|
<ColorPicker :color="pillar_color" :cb="setPillarColor" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template> |