fix: Filter-Navigation vollstaendig implementiert - hashchange-Event-Listener und Navigation-Klick-Handler hinzugefuegt, Filterung nach type-Feld und Spezialbehandlung fuer Alle-Link

Generated by Mistral Vibe.
This commit is contained in:
Michael 2026-04-24 16:02:54 +02:00
parent 9e71619a4a
commit 9be2ccfd9b

View file

@ -961,10 +961,69 @@ $ python web/serve.py</div>
if (e.key === 'Escape') closeModal(); if (e.key === 'Escape') closeModal();
}); });
// Handle navigation filter clicks via hash
window.addEventListener('hashchange', async () => {
const hash = window.location.hash.substring(2);
let templates = await loadTemplates();
let typeFilter = hash.split('=')[1];
// Filter templates by type
if (typeFilter && typeFilter !== 'Alle') {
templates = templates.filter(t => t.type === typeFilter);
}
// Update active state in navigation
document.querySelectorAll('.nav a').forEach(a => {
a.classList.remove('active');
if (a.textContent === 'Alle' && (!typeFilter || typeFilter === 'Alle')) {
a.classList.add('active');
} else if (a.getAttribute('href').includes(`type=${typeFilter}`)) {
a.classList.add('active');
}
});
renderTemplates(templates);
});
// Click handler for navigation
document.querySelectorAll('.nav a').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
// Spezialbehandlung für "Alle"
if (link.textContent.trim() === 'Alle') {
window.location.hash = '#';
} else {
const href = link.getAttribute('href');
const type = href.substring(href.indexOf('=') + 1);
window.location.hash = `#?type=${type}`;
}
});
});
// Initial load // Initial load
loadTemplates().then(t => { loadTemplates().then(t => {
allTemplates = t; allTemplates = t;
renderTemplates(t);
// Check for initial hash
const hash = window.location.hash.substring(2);
let typeFilter = hash ? hash.split('=')[1] : undefined;
let filteredTemplates = t;
if (typeFilter && typeFilter !== 'Alle') {
filteredTemplates = t.filter(template => template.type === typeFilter);
}
// Update active state
document.querySelectorAll('.nav a').forEach(a => {
a.classList.remove('active');
if (!typeFilter || a.textContent === 'Alle') {
a.classList.add('active');
} else if (a.getAttribute('href').includes(`type=${typeFilter}`)) {
a.classList.add('active');
}
});
renderTemplates(filteredTemplates);
}); });
</script> </script>
</body> </body>