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();
|
||||
});
|
||||
|
||||
// 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
|
||||
loadTemplates().then(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>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue