88 lines
2.7 KiB
JavaScript
88 lines
2.7 KiB
JavaScript
|
document.addEventListener('DOMContentLoaded', async () => {
|
|||
|
|
const faqList = document.getElementById('faq-list');
|
|||
|
|
const searchInput = document.getElementById('search-input');
|
|||
|
|
|
|||
|
|
faqList.innerHTML = '<p class="loading">Загрузка...</p>';
|
|||
|
|
|
|||
|
|
let faqs = [];
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('http://backend.lc:8000/api/faq');
|
|||
|
|
faqs = await response.json();
|
|||
|
|
|
|||
|
|
faqList.innerHTML = '';
|
|||
|
|
|
|||
|
|
if (faqs.length === 0) {
|
|||
|
|
faqList.innerHTML = '<p>Пока нет вопросов.</p>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Функция для отображения вопросов
|
|||
|
|
function renderFaqs(filteredFaqs) {
|
|||
|
|
faqList.innerHTML = '';
|
|||
|
|
filteredFaqs.forEach(faq => {
|
|||
|
|
const item = document.createElement('div');
|
|||
|
|
item.className = 'faq-item';
|
|||
|
|
|
|||
|
|
// Кнопка +/−
|
|||
|
|
const button = document.createElement('button');
|
|||
|
|
button.textContent = '+';
|
|||
|
|
button.style.cssText = `
|
|||
|
|
background: none;
|
|||
|
|
border: none;
|
|||
|
|
font-size: 20px;
|
|||
|
|
color: #7f8c8d;
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
transition: transform 0.2s;
|
|||
|
|
`;
|
|||
|
|
button.onclick = () => {
|
|||
|
|
const answer = item.querySelector('.faq-answer');
|
|||
|
|
if (answer.style.display === 'block') {
|
|||
|
|
answer.style.display = 'none';
|
|||
|
|
button.textContent = '+';
|
|||
|
|
} else {
|
|||
|
|
answer.style.display = 'block';
|
|||
|
|
button.textContent = '−';
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Вопрос
|
|||
|
|
const questionEl = document.createElement('div');
|
|||
|
|
questionEl.className = 'faq-question';
|
|||
|
|
questionEl.textContent = faq.question;
|
|||
|
|
questionEl.appendChild(button);
|
|||
|
|
|
|||
|
|
// Ответ
|
|||
|
|
const answerEl = document.createElement('div');
|
|||
|
|
answerEl.className = 'faq-answer';
|
|||
|
|
answerEl.style.display = 'none';
|
|||
|
|
answerEl.textContent = faq.answer;
|
|||
|
|
|
|||
|
|
item.appendChild(questionEl);
|
|||
|
|
item.appendChild(answerEl);
|
|||
|
|
faqList.appendChild(item);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Показать все при старте
|
|||
|
|
renderFaqs(faqs);
|
|||
|
|
|
|||
|
|
// Поиск по вопросам
|
|||
|
|
searchInput.addEventListener('input', () => {
|
|||
|
|
const query = searchInput.value.toLowerCase().trim();
|
|||
|
|
if (query === '') {
|
|||
|
|
renderFaqs(faqs); // Показать все
|
|||
|
|
} else {
|
|||
|
|
const filtered = faqs.filter(faq =>
|
|||
|
|
faq.question.toLowerCase().includes(query)
|
|||
|
|
);
|
|||
|
|
renderFaqs(filtered);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
} catch (err) {
|
|||
|
|
faqList.innerHTML = `<p style="color: red;">Ошибка загрузки: ${err.message}</p>`;
|
|||
|
|
console.error(err);
|
|||
|
|
}
|
|||
|
|
});
|