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; // @apply;
.container { .container {
@apply gap-4 items-start; @apply gap-4 items-stretch;
} }
} }
@ -298,10 +298,14 @@ button {
} }
.form { .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 { &-row {
@apply col-span-full flex flex-row flex-wrap gap-4; @apply col-span-full flex flex-row flex-wrap gap-2;
} }
&-item { &-item {

193
components/calc/values.vue
View File

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