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);
|
||
}
|
||
}); |