89
sendSubmit(event) {
event.preventDefault();
let userDate = {
email: this.state.email,
pas: this.state.pas,
repPas: this.state.repPas,
}
this.props.sendUserInfoAction(userDate);
}
render() {
// console.log("props", this.props);
const {
email,
pas,
repPas
} = this.state;
return ( <
Modal className = "bg-register-form" >
<
form className = "register-form flex flex-column items-
center" > {
/* <Router> */ } <
div
// onClick={this.props.togleVisibaleAuth}
className = "cross" > {
/* <Link to="/">Назад</Link> */ } <
/div> <
input className = "register-form__email register-input mb25"
type = "emil"
placeholder = "Email"
value = {
email
}
onChange = {
this.changeEmail
}
/> <
input className = "register-form__pass register-input mb25"
90
type = "password"
placeholder = "Password"
value = {
pas
}
onChange = {
this.changePass
}
/> <
input className = "register-form__pass register-input"
type = "password"
placeholder = "Replace password"
value = {
repPas
}
onChange = {
this.changeRepPass
}
/> <
button className = "register-form__btn-sub"
onClick = {
this.sendSubmit
} >
Submit <
/button> {
/* <Switch>
<Route
path="/"
component={() => (
<Sprint />
)}
/>
</Switch>
</Router> */
} <
/form> <
/Modal>
);
}
91
}
export default ReqisterForm;
const DAY_STRING = ['день', 'дня', 'дней']
const DATA = {
whichSite: ['landing', 'multiPage', 'onlineStore'],
price: [4000, 8000, 26000],
desktopTemplates: [50, 40, 30],
adapt: 20,
mobileTemplates: 15,
editable: 10,
metrikaYandex: [500, 1000, 2000],
analyticsGoogle: [850, 1350, 3000],
sendOrder: 500,
deadlineDay: [
[2, 7],
[3, 10],
[7, 14]
],
deadlinePercent: [20, 17, 15]
};
const startButton = document.querySelector('.start-button'),
firstScreen = document.querySelector('.first-screen'),
mainForm = document.querySelector('.main-form'),
formCalculate = document.querySelector('.form-calculate'),
endButton = document.querySelector('.end-button'),
total = document.querySelector('.total'),
fastRange = document.querySelector('.fast-range'),
totalPriceSum = document.querySelector('.total_price__sum'),
adapt = document.getElementById('adapt'),
mobileTemplates = document.getElementById('mobileTemplates'),
desktopTemplates = document.getElementById('desktopTemplates'),
editable = document.getElementById('editable'),
adaptValue = document.querySelector('.adapt_value'),
92
mobileTemplatesValue = document.querySelector('.mobileTemplates_value'
),
desktopTemplatesValue = document.querySelector('.desktopTemplates_valu
e'),
editableValue = document.querySelector('.editable_value'),
typeSite = document.querySelector('.type-site'),
maxDeadline = document.querySelector('.max-deadline'),
rangeDeadline = document.querySelector('.range-deadline'),
deadlineValue = document.querySelector('.deadline-value'),
calcDescription = document.querySelector('.calc-description'),
metrikaYandex = document.getElementById('metrikaYandex'),
analyticsGoogle = document.getElementById('analyticsGoogle'),
sendOrder = document.getElementById('sendOrder'),
cardHead = document.querySelector('.card-head'),
totalPrice = document.querySelector('.total_price'),
firstFieldset = document.querySelector('.first-fieldset');
function declOfNum(n, titles) {
return n + ' ' + titles[n % 10 === 1 && n % 100 !== 11 ?
0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)
? 1 : 2];
}
function showElem(elem) {
elem.style.display = 'block';
};
function hideElem(elem) {
elem.style.display = 'none';
};
function renderTextContent(total, site, maxDay, minDay) {
totalPriceSum.textContent = total;
typeSite.textContent = site;
maxDeadline.textContent = declOfNum(maxDay, DAY_STRING);
rangeDeadline.min = minDay;
rangeDeadline.max = maxDay;
deadlineValue.textContent = declOfNum(rangeDeadline.value, DAY_STRING)
;
93
adaptValue.textContent = adapt.checked ? 'Да' : 'Нет';
mobileTemplatesValue.textContent = mobileTemplates.checked ? 'Да' : 'Н
ет';
desktopTemplatesValue.textContent = desktopTemplates.checked ? 'Да' :
'Нет';
editableValue.textContent = editable.checked ? 'Да' : 'Нет';
}
function priceCalculation(elem = {}) {
let result = 0,
index = 0,
options = [],
site = '',
maxDeadlineDay = DATA.deadlineDay[index][1],
minDeadlineDay = DATA.deadlineDay[index][0],
overPercent = 0;
if (elem.name === 'whichSite') {
for (const item of formCalculate.elements) {
if (item.type === 'checkbox') {
item.checked = false;
}
}
hideElem(fastRange);
}
for (const item of formCalculate.elements) {
if (item.name == 'whichSite' && item.checked) {
index = DATA.whichSite.indexOf(item.value);
site = item.dataset.site;
maxDeadlineDay = DATA.deadlineDay[index][1];
minDeadlineDay = DATA.deadlineDay[index][0];
} else if (item.classList.contains('calc-
handler') && item.checked) {
options.push(item.value);
} else if (item.classList.contains('want-
faster') && item.checked) {
94
const overDay = maxDeadlineDay - rangeDeadline.value;
overPercent = overDay * (DATA.deadlinePercent[index] / 100);
}
}
result += DATA.price[index];
options.forEach(function (key) {
if (typeof (DATA[key]) === 'number') {
if (key === 'sendOrder') {
result += DATA[key]
} else {
result += DATA.price[index] * DATA[key] / 100
}
} else {
if (key === 'desktopTemplates') {
result += DATA.price[index] * DATA[key][index] / 100
} else {
result += DATA[key][index]
}
}
})
result += result * overPercent
renderTextContent(result, site, maxDeadlineDay, minDeadlineDay);
}
function handlerCallBackForm(event) {
const target = event.target;
if (adapt.checked) {
mobileTemplates.disabled = false;
} else {
mobileTemplates.disabled = true;
mobileTemplates.checked = false;
}
if (target.classList.contains('want-faster')) {
95
target.checked ? showElem(fastRange) : hideElem(fastRange);
}
if (target.classList.contains('calc-handler')) {
priceCalculation(target);
}
};
function moveBackTotal() {
if (document.documentElement.getBoundingClientRect().bottom > document
.documentElement.clientHeight + 200) {
totalPrice.classList.remove('totalPriceBottom');
firstFieldset.after(totalPrice);
window.removeEventListener('scroll', moveBackTotal);
window.addEventListener('scroll', moveTotal);
}
}
function moveTotal() {
if (document.documentElement.getBoundingClientRect().bottom < document
.documentElement.clientHeight + 200) {
totalPrice.classList.add('totalPriceBottom');
endButton.before(totalPrice);
window.removeEventListener('scroll', moveTotal);
window.addEventListener('scroll', moveBackTotal);
}
}
startButton.addEventListener('click', function () {
showElem(mainForm);
hideElem(firstScreen);
window.addEventListener('scroll', moveTotal);
});
endButton.addEventListener('click', function () {
for (const elem of formCalculate.elements) {
if (elem.tagName === 'FIELDSET') {
hideElem(elem);
}
96
}
cardHead.textContent = 'Заявка на разработку сайта';
hideElem(totalPrice);
showElem(total);
});
formCalculate.addEventListener('change', handlerCallBackForm);
priceCalculation();