Доступ в каталог с контактами и фото
Ответьте на несколько вопросов и получите помощь в подборе, доступ в личный кабинет и к телеграм боту
// Конфигурация Airtable
// ВАЖНО: В реальном проекте храните эти данные в переменных окружения
const AIRTABLE_CONFIG = {
BASE_ID: 'ВАШ_BASE_ID', // Замените на ваш Base ID
API_KEY: 'ВАШ_API_KEY', // Замените на ваш API ключ
TABLES: {
VILLAS: 'Villas',
ROOMS: 'Rooms',
RESIDENTS: 'Residents'
}
};
// Глобальные переменные
let currentVillaId = 1; // ID виллы (можно получать из URL)
let roomsData = [];
let residentsData = [];
// Инициализация при загрузке страницы
document.addEventListener('DOMContentLoaded', function() {
// Загружаем данные виллы и комнат
loadVillaData();
loadRoomsData();
// Настройка модального окна
setupModal();
});
// Загрузка данных виллы
async function loadVillaData() {
try {
const url = `https://api.airtable.com/v0/${AIRTABLE_CONFIG.BASE_ID}/${AIRTABLE_CONFIG.TABLES.VILLAS}/${currentVillaId}`;
const response = await fetch(url, {
headers: {
'Authorization': `Bearer ${AIRTABLE_CONFIG.API_KEY}`
}
});
if (!response.ok) throw new Error('Ошибка загрузки данных виллы');
const data = await response.json();
// Заполняем данные виллы на странице
document.getElementById('villa-name').textContent = data.fields.name || 'Название виллы';
document.getElementById('villa-location').innerHTML = ` ${data.fields.location || 'Локация не указана'}`;
document.getElementById('villa-description').textContent = data.fields.description || 'Описание отсутствует';
if (data.fields.photo_url) {
document.getElementById('villa-photo').src = data.fields.photo_url;
}
} catch (error) {
console.error('Ошибка загрузки данных виллы:', error);
document.getElementById('villa-name').textContent = 'Ошибка загрузки';
}
}
// Загрузка данных комнат
async function loadRoomsData() {
try {
const url = `https://api.airtable.com/v0/${AIRTABLE_CONFIG.BASE_ID}/${AIRTABLE_CONFIG.TABLES.ROOMS}?filterByFormula={villa_id}='${currentVillaId}'`;
const response = await fetch(url, {
headers: {
'Authorization': `Bearer ${AIRTABLE_CONFIG.API_KEY}`
}
});
if (!response.ok) throw new Error('Ошибка загрузки данных комнат');
const data = await response.json();
roomsData = data.records;
// Для каждой занятой комнаты загружаем данные жильца
await loadResidentsForRooms();
// Отображаем комнаты на странице
displayRooms();
} catch (error) {
console.error('Ошибка загрузки данных комнат:', error);
document.getElementById('rooms-container').innerHTML = ' 
${isOccupied && resident ? renderResidentInfo(resident) : ''}
${!isOccupied ?
``
:
``
}
`;
});
container.innerHTML = html;
}
// Рендеринг информации о жильце
function renderResidentInfo(resident) {
const fields = resident.fields;
// Создаем теги из вопросов
const tags = [];
for (let i = 1; i <= 5; i++) {
if (fields[`q${i}`] && fields[`q${i}`].trim()) {
tags.push(fields[`q${i}`]);
}
}
const tagsHtml = tags.slice(0, 3).map(tag =>
`${tag}`
).join('');
return `
`;
}
// Настройка модального окна
function setupModal() {
const modal = document.getElementById('booking-modal');
const closeBtn = document.querySelector('.close');
const cancelBtn = document.querySelector('.btn-cancel');
const form = document.getElementById('booking-form');
// Закрытие модального окна
closeBtn.onclick = function() {
modal.style.display = 'none';
};
cancelBtn.onclick = function() {
modal.style.display = 'none';
};
// Закрытие при клике вне модального окна
window.onclick = function(event) {
if (event.target === modal) {
modal.style.display = 'none';
}
};
// Обработка отправки формы
form.onsubmit = async function(e) {
e.preventDefault();
await submitBookingForm();
};
}
// Открытие модального окна для бронирования
function openBookingModal(roomId) {
document.getElementById('selected-room-id').value = roomId;
document.getElementById('booking-modal').style.display = 'block';
}
// Отправка формы бронирования
async function submitBookingForm() {
const roomId = document.getElementById('selected-room-id').value;
const form = document.getElementById('booking-form');
// Собираем данные из формы
const residentData = {
name: document.getElementById('name').value,
age: parseInt(document.getElementById('age').value),
occupation: document.getElementById('occupation').value,
city: document.getElementById('city').value,
telegram: document.getElementById('telegram').value,
q1: document.getElementById('q1').value,
q2: document.getElementById('q2').value,
q3: document.getElementById('q3').value,
q4: document.getElementById('q4').value,
q5: document.getElementById('q5').value,
move_in_date: new Date().toISOString().split('T')[0] // Сегодняшняя дата
};
try {
// Шаг 1: Создаем запись жильца
const residentResponse = await fetch(`https://api.airtable.com/v0/${AIRTABLE_CONFIG.BASE_ID}/${AIRTABLE_CONFIG.TABLES.RESIDENTS}`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${AIRTABLE_CONFIG.API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
fields: residentData
})
});
if (!residentResponse.ok) throw new Error('Ошибка создания записи жильца');
const residentResult = await residentResponse.json();
const residentId = residentResult.id;
// Шаг 2: Обновляем комнату (меняем статус и привязываем жильца)
const roomUpdateResponse = await fetch(`https://api.airtable.com/v0/${AIRTABLE_CONFIG.BASE_ID}/${AIRTABLE_CONFIG.TABLES.ROOMS}/${roomId}`, {
method: 'PATCH',
headers: {
'Authorization': `Bearer ${AIRTABLE_CONFIG.API_KEY}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
fields: {
status: 'occupied',
resident_id: [residentId]
}
})
});
if (!roomUpdateResponse.ok) throw new Error('Ошибка обновления комнаты');
// Успешное завершение
alert('Заявка успешно отправлена! Вы заселены в комнату.');
document.getElementById('booking-modal').style.display = 'none';
form.reset();
// Перезагружаем данные комнат для отображения изменений
await loadRoomsData();
} catch (error) {
console.error('Ошибка отправки формы:', error);
alert('Произошла ошибка при отправке заявки. Пожалуйста, попробуйте снова.');
}
}
// Утилита для получения параметров из URL
function getUrlParams() {
const params = new URLSearchParams(window.location.search);
const villaId = params.get('villa_id');
if (villaId && !isNaN(villaId)) {
currentVillaId = parseInt(villaId);
}
}
// Инициализация параметров из URL
getUrlParams();
Ошибка загрузки комнат. Пожалуйста, попробуйте позже.
';
}
}
// Загрузка данных жильцов для занятых комнат
async function loadResidentsForRooms() {
try {
// Собираем ID всех жильцов из занятых комнат
const residentIds = roomsData
.filter(room => room.fields.status === 'occupied' && room.fields.resident_id)
.map(room => room.fields.resident_id[0]);
if (residentIds.length === 0) return;
// Формируем формулу для поиска всех жильцов
const formula = `OR(${residentIds.map(id => `RECORD_ID()='${id}'`).join(',')})`;
const url = `https://api.airtable.com/v0/${AIRTABLE_CONFIG.BASE_ID}/${AIRTABLE_CONFIG.TABLES.RESIDENTS}?filterByFormula=${encodeURIComponent(formula)}`;
const response = await fetch(url, {
headers: {
'Authorization': `Bearer ${AIRTABLE_CONFIG.API_KEY}`
}
});
if (!response.ok) throw new Error('Ошибка загрузки данных жильцов');
const data = await response.json();
residentsData = data.records;
} catch (error) {
console.error('Ошибка загрузки данных жильцов:', error);
}
}
// Отображение комнат на странице
function displayRooms() {
const container = document.getElementById('rooms-container');
if (!roomsData || roomsData.length === 0) {
container.innerHTML = 'Нет доступных комнат на этой вилле.
';
return;
}
let html = '';
roomsData.forEach(room => {
const roomFields = room.fields;
const isOccupied = roomFields.status === 'occupied';
const resident = isOccupied ? residentsData.find(r => r.id === roomFields.resident_id?.[0]) : null;
html += `
${roomFields.room_number || 'Комната'}
${isOccupied ? 'Занята' : 'Свободна'}
Жилец: ${fields.name || 'Не указано'}
${fields.age || 'Не указан'} лет
${fields.occupation || 'Не указано'}
${fields.city || 'Не указано'}
${fields.telegram || 'Не указан'}
${tagsHtml ? `
` : ''}