369 lines
14 KiB
JavaScript
369 lines
14 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const nameInput = document.getElementById('name');
|
|
const phoneInput = document.getElementById('phone');
|
|
const emailInput = document.getElementById('email');
|
|
const vkInput = document.getElementById('vk');
|
|
const agreeOfertaInput = document.getElementById('agreeOferta');
|
|
const agreePolicyInput = document.getElementById('agreePolicy');
|
|
const agreeNewsletterInput = document.getElementById('agreeNewsletter');
|
|
|
|
const form = document.getElementById('ikpForm');
|
|
const formContainer = document.getElementById('formContainer');
|
|
const successContainer = document.getElementById('successContainer');
|
|
const resetBtn = document.getElementById('resetBtn');
|
|
|
|
// Service display elements
|
|
const serviceDisplay = document.getElementById('serviceDisplay');
|
|
const serviceNameDisplay = document.getElementById('serviceNameDisplay');
|
|
const servicePriceDisplay = document.getElementById('servicePriceDisplay');
|
|
const serviceIdInput = document.getElementById('serviceId');
|
|
|
|
// Parse URL query parameters
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const serviceIdParam = urlParams.get('service_id');
|
|
const successParam = urlParams.get('success');
|
|
|
|
// If redirected back from payment successfully
|
|
if (successParam === 'true') {
|
|
formContainer.style.display = 'none';
|
|
successContainer.style.display = 'flex';
|
|
successContainer.style.opacity = '1';
|
|
}
|
|
|
|
let services = {};
|
|
|
|
const servicesUrl = window.location.protocol === 'file:' ? 'http://localhost:8000/api/services' : '/api/services';
|
|
|
|
fetch(servicesUrl)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Не удалось загрузить список услуг');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
services = data.services;
|
|
initializeServiceDisplay();
|
|
} else {
|
|
console.error('Error loading services:', data.message);
|
|
fallbackServiceDisplay();
|
|
}
|
|
})
|
|
.catch(err => {
|
|
console.error('Error fetching services:', err);
|
|
fallbackServiceDisplay();
|
|
});
|
|
|
|
function initializeServiceDisplay() {
|
|
if (serviceIdParam && services[serviceIdParam]) {
|
|
const selectedService = services[serviceIdParam];
|
|
serviceNameDisplay.textContent = selectedService.name;
|
|
const price = selectedService.price_numeric || parseFloat(selectedService.price) || 0;
|
|
servicePriceDisplay.textContent = price.toLocaleString('ru-RU') + ' ₽';
|
|
serviceIdInput.value = serviceIdParam;
|
|
serviceDisplay.style.display = 'block';
|
|
} else {
|
|
// Default to web_1
|
|
serviceIdInput.value = "web_1";
|
|
if (services["web_1"]) {
|
|
const selectedService = services["web_1"];
|
|
serviceNameDisplay.textContent = selectedService.name;
|
|
const price = selectedService.price_numeric || parseFloat(selectedService.price) || 0;
|
|
servicePriceDisplay.textContent = price.toLocaleString('ru-RU') + ' ₽';
|
|
serviceDisplay.style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
|
|
function fallbackServiceDisplay() {
|
|
services = {
|
|
"web_1": { name: "Разовая тренировка", price_numeric: 870 },
|
|
"web_2": { name: "Абонемент на 4 занятия (Групповой)", price_numeric: 2790 },
|
|
"web_3": { name: "Абонемент на 8 занятий (Групповой)", price_numeric: 4990 },
|
|
"web_4": { name: "Абонемент на 4 занятия (Индивидуальный)", price_numeric: 3290 },
|
|
"web_5": { name: "Абонемент на 8 занятий (Индивидуальный)", price_numeric: 5990 }
|
|
};
|
|
initializeServiceDisplay();
|
|
}
|
|
|
|
// List of fields to manage focus and validation state
|
|
const fields = [
|
|
{ input: nameInput, check: checkName, dirty: false },
|
|
{ input: phoneInput, check: checkPhone, dirty: false },
|
|
{ input: emailInput, check: checkEmail, dirty: false },
|
|
{ input: vkInput, check: checkVK, dirty: false },
|
|
{ input: agreeOfertaInput, check: checkOferta, dirty: false },
|
|
{ input: agreePolicyInput, check: checkPolicy, dirty: false }
|
|
];
|
|
|
|
/* ====================================================
|
|
Validation Functions
|
|
==================================================== */
|
|
function showError(input, show) {
|
|
const group = input.closest('.form-group') || input.closest('.checkbox-group');
|
|
if (show) {
|
|
group.classList.add('has-error');
|
|
} else {
|
|
group.classList.remove('has-error');
|
|
}
|
|
}
|
|
|
|
function checkName() {
|
|
const val = nameInput.value.trim();
|
|
const isValid = val.length >= 2;
|
|
showError(nameInput, !isValid);
|
|
return isValid;
|
|
}
|
|
|
|
function checkPhone() {
|
|
const val = phoneInput.value;
|
|
const digits = val.replace(/\D/g, '');
|
|
const isValid = digits.length === 11 && val.startsWith('+7') && val.length === 18;
|
|
showError(phoneInput, !isValid);
|
|
return isValid;
|
|
}
|
|
|
|
function checkEmail() {
|
|
const val = emailInput.value.trim();
|
|
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
|
|
const isValid = emailRegex.test(val);
|
|
showError(emailInput, !isValid);
|
|
return isValid;
|
|
}
|
|
|
|
function checkVK() {
|
|
const val = vkInput.value.trim().toLowerCase();
|
|
const isValid = val.length > 0;
|
|
showError(vkInput, !isValid);
|
|
return isValid;
|
|
}
|
|
|
|
if (agreeOfertaInput) {
|
|
agreeOfertaInput.addEventListener('change', checkOferta);
|
|
}
|
|
if (agreePolicyInput) {
|
|
agreePolicyInput.addEventListener('change', checkPolicy);
|
|
}
|
|
|
|
function checkOferta() {
|
|
const isValid = agreeOfertaInput.checked;
|
|
showError(agreeOfertaInput, !isValid);
|
|
return isValid;
|
|
}
|
|
|
|
function checkPolicy() {
|
|
const isValid = agreePolicyInput.checked;
|
|
showError(agreePolicyInput, !isValid);
|
|
return isValid;
|
|
}
|
|
|
|
/* ====================================================
|
|
Interaction Listeners (UX enhancements)
|
|
==================================================== */
|
|
fields.forEach(field => {
|
|
field.input.addEventListener('blur', () => {
|
|
field.dirty = true;
|
|
field.check();
|
|
});
|
|
|
|
const eventType = field.input.type === 'checkbox' ? 'change' : 'input';
|
|
field.input.addEventListener(eventType, () => {
|
|
if (field.dirty) {
|
|
field.check();
|
|
}
|
|
});
|
|
});
|
|
|
|
/* ====================================================
|
|
Phone Input Mask Implementation
|
|
==================================================== */
|
|
phoneInput.addEventListener('input', (e) => {
|
|
let value = e.target.value;
|
|
let digits = value.replace(/\D/g, '');
|
|
|
|
if (digits.startsWith('7') || digits.startsWith('8')) {
|
|
digits = digits.substring(1);
|
|
}
|
|
|
|
digits = digits.substring(0, 10);
|
|
|
|
let formatted = '';
|
|
if (digits.length > 0) {
|
|
formatted = '+7 (' + digits.substring(0, 3);
|
|
}
|
|
if (digits.length >= 3) {
|
|
formatted += ') ';
|
|
}
|
|
if (digits.length > 3) {
|
|
formatted += digits.substring(3, 6);
|
|
}
|
|
if (digits.length > 6) {
|
|
formatted += '-' + digits.substring(6, 8);
|
|
}
|
|
if (digits.length > 8) {
|
|
formatted += '-' + digits.substring(8, 10);
|
|
}
|
|
|
|
e.target.value = formatted;
|
|
|
|
const phoneField = fields.find(item => item.input === phoneInput);
|
|
if (phoneField && phoneField.dirty) {
|
|
checkPhone();
|
|
}
|
|
});
|
|
|
|
phoneInput.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Backspace') {
|
|
const val = e.target.value;
|
|
if (val === '+7 ' || val === '+7' || val === '+') {
|
|
e.target.value = '';
|
|
}
|
|
}
|
|
});
|
|
|
|
phoneInput.addEventListener('focus', (e) => {
|
|
if (!e.target.value) {
|
|
e.target.value = '+7 ';
|
|
}
|
|
});
|
|
|
|
phoneInput.addEventListener('blur', (e) => {
|
|
if (e.target.value === '+7 ' || e.target.value === '+7') {
|
|
e.target.value = '';
|
|
}
|
|
const phoneField = fields.find(item => item.input === phoneInput);
|
|
if (phoneField) {
|
|
phoneField.dirty = true;
|
|
checkPhone();
|
|
}
|
|
});
|
|
|
|
/* ====================================================
|
|
Form Submission
|
|
==================================================== */
|
|
form.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
|
|
fields.forEach(field => {
|
|
field.dirty = true;
|
|
});
|
|
|
|
const isNameValid = checkName();
|
|
const isPhoneValid = checkPhone();
|
|
const isEmailValid = checkEmail();
|
|
const isVKValid = checkVK();
|
|
const isOfertaValid = checkOferta();
|
|
const isPolicyValid = checkPolicy();
|
|
|
|
if (isNameValid && isPhoneValid && isEmailValid && isVKValid && isOfertaValid && isPolicyValid) {
|
|
const formData = {
|
|
name: nameInput.value.trim(),
|
|
phone: phoneInput.value,
|
|
email: emailInput.value.trim(),
|
|
vk: vkInput.value.trim(),
|
|
agreeOferta: agreeOfertaInput.checked,
|
|
agreePolicy: agreePolicyInput.checked,
|
|
agreeNewsletter: agreeNewsletterInput.checked,
|
|
serviceId: serviceIdInput.value || "web_1"
|
|
};
|
|
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
const originalBtnText = submitBtn.textContent;
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Отправка...';
|
|
|
|
const submitUrl = window.location.protocol === 'file:' ? 'http://localhost:8000/submit' : '/submit';
|
|
|
|
fetch(submitUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formData)
|
|
})
|
|
.then(response => {
|
|
return response.json().then(data => {
|
|
if (!response.ok) {
|
|
throw new Error(data.message || 'Ошибка сервера');
|
|
}
|
|
return data;
|
|
}).catch(err => {
|
|
if (!response.ok) {
|
|
throw new Error('Ошибка сети или сервера');
|
|
}
|
|
throw err;
|
|
});
|
|
})
|
|
.then(data => {
|
|
if (data.payment_url) {
|
|
// Redirect directly to YooKassa payment gateway
|
|
window.location.href = data.payment_url;
|
|
return;
|
|
}
|
|
|
|
// Fallback success UI container (if YooKassa keys not configured in server)
|
|
formContainer.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
|
|
formContainer.style.opacity = '0';
|
|
formContainer.style.transform = 'translateY(-10px)';
|
|
|
|
setTimeout(() => {
|
|
formContainer.style.display = 'none';
|
|
successContainer.style.display = 'flex';
|
|
successContainer.style.opacity = '0';
|
|
successContainer.style.transform = 'translateY(10px)';
|
|
|
|
successContainer.offsetHeight;
|
|
|
|
successContainer.style.transition = 'opacity 0.4s ease, transform 0.4s ease';
|
|
successContainer.style.opacity = '1';
|
|
successContainer.style.transform = 'translateY(0)';
|
|
}, 300);
|
|
|
|
form.reset();
|
|
fields.forEach(field => {
|
|
field.dirty = false;
|
|
});
|
|
|
|
serviceDisplay.style.display = 'none';
|
|
})
|
|
.catch(error => {
|
|
console.error('Error submitting form:', error);
|
|
alert('Произошла ошибка при отправке заявки: ' + error.message + '. Пожалуйста, убедитесь, что сервер server.py запущен.');
|
|
})
|
|
.finally(() => {
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = originalBtnText;
|
|
});
|
|
} else {
|
|
const firstInvalid = fields.find(field => {
|
|
if (field.input === nameInput) return !isNameValid;
|
|
if (field.input === phoneInput) return !isPhoneValid;
|
|
if (field.input === emailInput) return !isEmailValid;
|
|
if (field.input === vkInput) return !isVKValid;
|
|
if (field.input === agreeOfertaInput) return !isOfertaValid;
|
|
if (field.input === agreePolicyInput) return !isPolicyValid;
|
|
return false;
|
|
});
|
|
|
|
if (firstInvalid) {
|
|
firstInvalid.input.focus();
|
|
}
|
|
}
|
|
});
|
|
|
|
/* ====================================================
|
|
"На главную" Button Handler
|
|
==================================================== */
|
|
resetBtn.addEventListener('click', () => {
|
|
successContainer.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
|
|
successContainer.style.opacity = '0';
|
|
successContainer.style.transform = 'translateY(10px)';
|
|
|
|
setTimeout(() => {
|
|
// Редиректим на главную страницу сайта
|
|
window.location.href = '/';
|
|
}, 300);
|
|
});
|
|
});
|