mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dev #84

Merged
ksenia_mikhailova merged 141 commits from dev into main 2024-10-03 15:30:24 +03:00
Conversation 0 Commits 141 Files Changed 62 +107 -96
2 changed files with 107 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b313da0a53 - Show all commits

10
assets/main.scss
View File

@ -181,7 +181,7 @@ a[href^="#"] {
// @apply;
.container {
@apply gap-4 items-start;
@apply gap-4 items-stretch;
}
}
@ -298,10 +298,14 @@ button {
}
.form {
@apply col-span-full grid grid-cols-12 gap-4;
@apply col-span-full h-full grid grid-cols-12 gap-4 justify-between;
&-group {
@apply col-span-full rounded gap-2;
}
&-row {
@apply col-span-full flex flex-row flex-wrap gap-4;
@apply col-span-full flex flex-row flex-wrap gap-2;
}
&-item {

193
components/calc/values.vue
View File

@ -183,110 +183,117 @@ const calc_table = computed(() => {
</script>
<template>
<div class="form">
<div class="form-row">
<div class="form-item form-item_color">
<label for="lamelle_color">Цвет ламелей</label>
<DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color"
:goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.75, 0)"
:goto_cam="new Vector3(0.75, 0.75, 0.75)">
<span
:style="[{ color: lamelle_text, backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent' }]">
{{ getColorNameFromRal(lamelle_color) }}
</span>
</DropdownPicker>
<div class="form-group">
<div class="form-row">
<div class="form-item form-item_color">
<label for="lamelle_color">Цвет ламелей</label>
<DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color"
:goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.75, 0)"
:goto_cam="new Vector3(0.75, 0.75, 0.75)">
<span
:style="[{ color: lamelle_text, backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent' }]">
{{ getColorNameFromRal(lamelle_color) }}
</span>
</DropdownPicker>
</div>
</div>
</div>
<div class="form-row">
<div class="form-item form-item_color">
<label for="pillar_color">Цвет столба</label>
<DropdownPicker type="color" :cb="setPillarColor" name="pillar_color"
:goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(-1, -1, 1)">
<span
:style="[{ color: pillar_text, backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent' }]">
{{ getColorNameFromRal(pillar_color) }}
</span>
</DropdownPicker>
<div class="form-row">
<div class="form-item form-item_color">
<label for="pillar_color">Цвет столба</label>
<DropdownPicker type="color" :cb="setPillarColor" name="pillar_color"
:goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(-1, -1, 1)">
<span
:style="[{ color: pillar_text, backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent' }]">
{{ getColorNameFromRal(pillar_color) }}
</span>
</DropdownPicker>
</div>
</div>
</div>
<div class="form-row">
<div class="form-item form-item_color">
<label for="pillar_pattern">Узор столба</label>
<DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern" :disabled="remove_pillar"
:goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(1, 2, -1)">
<span :style="getFilename(pillar_pattern) ? [{
backgroundImage: `url(${getFilename(pillar_pattern)})`,
backgroundSize: 'contain',
color: 'transparent'
}] : []">
{{ pillar_pattern }}
</span>
</DropdownPicker>
</div>
</div>
<div class="form-row">
<div class="form-item form-item_range w-full">
<label for="length">Длина ламельного блока, мм</label>
<div>
<span>{{ form_state.length.toFixed(0) }}&nbsp;мм</span>
<input id="length" type="range" v-bind="parametric.length" v-model="form_state.length"
:disabled="form_state.auto_length" :ref="form_refs.length" />
<div class="form-row">
<div class="form-item form-item_color">
<label for="pillar_pattern">Узор столба</label>
<DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
:disabled="remove_pillar"
:goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
:goto_cam="new Vector3(1, 2, -1)">
<span :style="getFilename(pillar_pattern) ? [{
backgroundImage: `url(${getFilename(pillar_pattern)})`,
backgroundSize: 'contain',
color: 'transparent'
}] : []">
{{ pillar_pattern }}
</span>
</DropdownPicker>
</div>
</div>
</div>
<div class="form-row">
<div class="form-item form-item_range w-full">
<label for="height">Высота забора, мм</label>
<div>
<span>{{ form_state.height }}&nbsp;мм</span>
<input id="height" type="range" v-bind="parametric.height" v-model="form_state.height"
:ref="form_refs.height" />
<div class="form-group shadow shadow-slate-400">
<div class="form-row">
<div class="form-item form-item_range w-full">
<label for="length">Длина ламельного блока, мм</label>
<div>
<span>{{ form_state.length.toFixed(0) }}&nbsp;мм</span>
<input id="length" type="range" v-bind="parametric.length" v-model="form_state.length"
:disabled="form_state.auto_length" :ref="form_refs.length" />
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-item w-full">
<label for="total_length">Общая длина забора, м</label>
<input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600"
v-model="form_state.total_length" :ref="form_refs.total_length" class="w-full" />
<div class="form-row">
<div class="form-item form-item_range w-full">
<label for="height">Высота забора, мм</label>
<div>
<span>{{ form_state.height }}&nbsp;мм</span>
<input id="height" type="range" v-bind="parametric.height" v-model="form_state.height"
:ref="form_refs.height" />
</div>
</div>
</div>
<div class="form-item text-sm xl:text-base">
<p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
размер, чтобы продолжить.
<div class="form-row">
<div class="form-item w-full">
<label for="total_length">Общая длина забора, м</label>
<input type="number" id="total_length" v-bind="parametric.total_length" min=0 max="600"
v-model="form_state.total_length" :ref="form_refs.total_length" class="w-full" />
</div>
<div class="form-item text-sm xl:text-base">
<p v-if="form_state.total_length_mm < parametric.length.min" class="text-ioprim">
Выбранный размер забора слишком мал для расчета стоимости. Пожалуйста, выберите больший
размер, чтобы продолжить.
</p>
</div>
</div>
<div class="form-row">
<div class="form-item form-item_checkbox">
<input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
<label for="auto_length">Автоматический подбор секции</label>
</div>
<p v-if="!form_state.auto_length" class="text-ioprim text-sm">
Рекомендуем вам включить автоподбор длины секции
</p>
</div>
</div>
<div class="form-row">
<div class="form-item form-item_checkbox">
<input id="auto_length" type="checkbox" v-model="form_state.auto_length" />
<label for="auto_length">Автоматический подбор секции</label>
</div>
<p v-if="!form_state.auto_length" class="text-ioprim text-sm">
Рекомендуем вам включить автоподбор длины секции
</p>
</div>
<div class="form-row">
<div class="form-item form-item_checkbox">
<input id="remove_pillar" type="checkbox" v-model="form_state.remove_pillar" />
<label for="remove_pillar">Без столбов</label>
</div>
</div>
<div class="form-row">
<template v-if="(form_state.total_length * 1000) >= parametric.length.min">
<div class="col-span-12 xl:col-span-6 xl:col-start-4 grid calc_table">
<div class="grid grid-cols-4 relative">
<template v-for="item in calc_table">
<div class="col-span-3 calc_table-maincell">
{{ item.name }}
</div>
<div class="col-span-1 calc_table-maincell">{{ item.value }}</div>
</template>
</div>
<button @click.prevent="toggleModal">Рассчитать</button>
<div class="form-row">
<div class="form-item form-item_checkbox">
<input id="remove_pillar" type="checkbox" v-model="form_state.remove_pillar" />
<label for="remove_pillar">Без столбов</label>
</div>
</template>
</div>
</div>
<div class="form-group">
<div class="form-row">
<template v-if="(form_state.total_length * 1000) >= parametric.length.min">
<div class="col-span-12 xl:col-span-6 xl:col-start-4 grid calc_table">
<div class="grid grid-cols-4 relative">
<template v-for="item in calc_table">
<div class="col-span-3 calc_table-maincell">
{{ item.name }}
</div>
<div class="col-span-1 calc_table-maincell">{{ item.value }}</div>
</template>
</div>
<button @click.prevent="toggleModal">Рассчитать</button>
</div>
</template>
</div>
</div>
</div>
</template>