diff --git a/app.js b/app.js index f9edad6..4057002 100644 --- a/app.js +++ b/app.js @@ -18,10 +18,12 @@ let sections = []; let config = null; let favorites = []; let activeFilter = 'all'; +let activeView = window.localStorage.getItem('mischlabs.dashboard.view') || 'all'; let categoryById = new Map(); const searchInput = document.querySelector('#serviceSearch'); const segments = [...document.querySelectorAll('.segment')]; +const viewOptions = [...document.querySelectorAll('.view-option')]; const emptyState = document.querySelector('#emptyState'); const onlineCount = document.querySelector('#onlineCount'); const serviceCount = document.querySelector('#serviceCount'); @@ -183,6 +185,12 @@ function createFavoriteCard(favorite) { card.rel = 'noopener'; card.className = 'card favorite-card'; card.style.setProperty('--accent', favorite.color || '#67e8f9'); + card.dataset.name = [ + favorite.name, + favorite.description, + favorite.group, + favorite.url + ].join(' '); const safeLogo = favorite.logoUrl ? escapeHtml(favorite.logoUrl) : ''; const safeName = escapeHtml(favorite.name); @@ -225,6 +233,7 @@ function renderFavorites() { `; document.querySelector('#favoritesLoginCallout')?.addEventListener('click', () => MischLabsAuth.login()); + updateVisibility(); return; } @@ -243,6 +252,7 @@ function renderFavorites() { `; + updateVisibility(); return; } @@ -281,6 +291,8 @@ function renderFavorites() { items.forEach((favorite) => grid.appendChild(createFavoriteCard(favorite))); container.appendChild(section); }); + + updateVisibility(); } async function loadFavorites() { @@ -348,22 +360,48 @@ function updateOverviewHeading(visibleCards) { function updateVisibility() { const term = normalize(searchInput.value); let visibleCards = 0; + let visibleFavorites = 0; + const showServices = activeView === 'all' || activeView === 'services'; + const showFavorites = activeView === 'all' || activeView === 'favorites'; + + if (dashboardSections) { + dashboardSections.hidden = !showServices; + } + + if (favoritesSections) { + favoritesSections.hidden = !showFavorites; + } cards.forEach((card) => { const categoryMatches = activeFilter === 'all' || card.dataset.category === activeFilter; const searchMatches = !term || normalize(card.dataset.name).includes(term); - const isVisible = categoryMatches && searchMatches; + const isVisible = showServices && categoryMatches && searchMatches; card.hidden = !isVisible; if (isVisible) visibleCards += 1; }); sections.forEach((section) => { const hasVisibleCards = [...section.querySelectorAll('.service-card')].some((card) => !card.hidden); - section.hidden = !hasVisibleCards; + section.hidden = !showServices || !hasVisibleCards; + }); + + document.querySelectorAll('.favorite-card').forEach((card) => { + const isVisible = showFavorites && (!term || normalize(card.dataset.name).includes(term)); + card.hidden = !isVisible; + if (isVisible) visibleFavorites += 1; + }); + + document.querySelectorAll('.favorite-group').forEach((group) => { + const hasVisibleCards = [...group.querySelectorAll('.favorite-card')].some((card) => !card.hidden); + group.hidden = !showFavorites || !hasVisibleCards; }); updateOverviewHeading(visibleCards); - emptyState.hidden = visibleCards !== 0; + const hasVisibleContent = visibleCards + visibleFavorites > 0; + emptyState.hidden = hasVisibleContent; + emptyState.textContent = term + ? 'Kein Eintrag passt zur Suche.' + : 'In dieser Ansicht gibt es noch keine Eintraege.'; } function setActiveFilter(nextFilter) { @@ -376,6 +414,17 @@ function setActiveFilter(nextFilter) { updateVisibility(); } +function setActiveView(nextView) { + activeView = nextView; + window.localStorage.setItem('mischlabs.dashboard.view', nextView); + viewOptions.forEach((option) => { + const isActive = option.dataset.view === nextView; + option.classList.toggle('is-active', isActive); + option.setAttribute('aria-selected', String(isActive)); + }); + updateVisibility(); +} + async function probeService(card) { const controller = new AbortController(); const timeout = window.setTimeout(() => controller.abort(), 4500); @@ -435,6 +484,10 @@ segments.forEach((segment) => { segment.addEventListener('click', () => setActiveFilter(segment.dataset.filter)); }); +viewOptions.forEach((option) => { + option.addEventListener('click', () => setActiveView(option.dataset.view)); +}); + searchInput.addEventListener('input', updateVisibility); function updateAuthNav() { @@ -466,6 +519,7 @@ MischLabsAuth.handleCallback() config = nextConfig; updateAuthNav(); renderDashboard(config); + setActiveView(activeView); updateVisibility(); loadFavorites(); scheduleStatusRefresh(); diff --git a/index.html b/index.html index 1becadf..ea4ef13 100644 --- a/index.html +++ b/index.html @@ -70,6 +70,12 @@ + +