95 lines
3.3 KiB
JavaScript
95 lines
3.3 KiB
JavaScript
export async function initKnowledgePage() {
|
|
const wissenList = document.getElementById('wissen-list');
|
|
const gebeteList = document.getElementById('gebete-list');
|
|
|
|
if (wissenList) {
|
|
try {
|
|
const knowledgeResponse = await fetch('data/knowledge/knowledge.json');
|
|
const knowledgeItems = await knowledgeResponse.json();
|
|
renderKnowledgeList(wissenList, knowledgeItems);
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Wissens-Übersicht:', error);
|
|
}
|
|
}
|
|
|
|
if (gebeteList) {
|
|
try {
|
|
const gebeteResponse = await fetch('data/prayers/prayers.json');
|
|
const gebeteItems = await gebeteResponse.json();
|
|
renderGebeteList(gebeteList, gebeteItems);
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden der Gebete:', error);
|
|
}
|
|
}
|
|
|
|
const tabs = document.querySelectorAll('.wissen-tab');
|
|
const panelGebete = document.getElementById('panel-gebete');
|
|
const panelWissen = document.getElementById('panel-wissen');
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
|
|
const target = tab.dataset.tab;
|
|
if (panelGebete) panelGebete.classList.toggle('active', target === 'gebete');
|
|
if (panelWissen) panelWissen.classList.toggle('active', target === 'wissen');
|
|
});
|
|
});
|
|
}
|
|
|
|
function createAccordionItem(title, filename, basePath) {
|
|
const element = document.createElement('div');
|
|
element.className = 'wissen-item';
|
|
|
|
element.innerHTML = `
|
|
<button class="wissen-header">
|
|
<span class="wissen-title">${title}</span>
|
|
<img src="assets/icons/arrow_down.svg" alt="Pfeil nach unten" class="wissen-arrow">
|
|
</button>
|
|
<div class="wissen-content">
|
|
<p class="loading">Loading...</p>
|
|
</div>
|
|
`;
|
|
|
|
const header = element.querySelector('.wissen-header');
|
|
const contentDiv = element.querySelector('.wissen-content');
|
|
let isLoaded = false;
|
|
|
|
header.addEventListener('click', async () => {
|
|
element.classList.toggle('active');
|
|
|
|
if (element.classList.contains('active') && !isLoaded) {
|
|
try {
|
|
const contentResponse = await fetch(`${basePath}/${filename}`);
|
|
if (!contentResponse.ok) throw new Error('Failed to load file');
|
|
|
|
const htmlContent = await contentResponse.text();
|
|
contentDiv.innerHTML = htmlContent;
|
|
isLoaded = true;
|
|
} catch (err) {
|
|
contentDiv.innerHTML = '<p>Failed to load content.</p>';
|
|
}
|
|
}
|
|
});
|
|
|
|
return element;
|
|
}
|
|
|
|
function renderKnowledgeList(container, items) {
|
|
container.innerHTML = '';
|
|
items.forEach(item => {
|
|
const title = item.titel || item.title;
|
|
const element = createAccordionItem(title, item.file, 'data/knowledge');
|
|
container.appendChild(element);
|
|
});
|
|
}
|
|
|
|
function renderGebeteList(container, items) {
|
|
container.innerHTML = '';
|
|
items.forEach(item => {
|
|
const title = item.title || item.titel;
|
|
const element = createAccordionItem(title, item.file, 'data/prayers');
|
|
container.appendChild(element);
|
|
});
|
|
} |