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:
parent
9e71619a4a
commit
9be2ccfd9b
1 changed files with 60 additions and 1 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue