4c7ef500a1
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 13s
541 lines
18 KiB
JavaScript
541 lines
18 KiB
JavaScript
const CONFIG_URL = '/services.json?v=1';
|
|
const LOCAL_CONFIG_KEY = 'mischlabs.dashboard.config';
|
|
|
|
const icons = {
|
|
shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path><path d="M9 12l2 2 4-4"></path>',
|
|
folder: '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>',
|
|
lock: '<rect x="3" y="11" width="18" height="11" rx="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path><circle cx="12" cy="16" r="1"></circle>',
|
|
film: '<rect x="2" y="2" width="20" height="20" rx="2.2"></rect><line x1="7" y1="2" x2="7" y2="22"></line><line x1="17" y1="2" x2="17" y2="22"></line><line x1="2" y1="12" x2="22" y2="12"></line>',
|
|
headphones: '<path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path>',
|
|
book: '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>',
|
|
git: '<circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line><path d="M12 1.05V7"></path><path d="M12 17.01v5.95"></path>',
|
|
chess: '<path d="M8 16l-1 4h10l-1-4"></path><path d="M6.5 16h11"></path><path d="M12 2a2 2 0 0 1 2 2c0 1.1-.9 2-2 3-1.1-1-2-1.9-2-3a2 2 0 0 1 2-2z"></path><path d="M9 7 6 10.5c-.6.7-.2 1.5.7 1.5h10.6c.9 0 1.3-.8.7-1.5L15 7"></path><path d="M9 12v4"></path><path d="M15 12v4"></path>',
|
|
user: '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>'
|
|
};
|
|
|
|
let cards = [];
|
|
let sections = [];
|
|
let config = null;
|
|
let favorites = [];
|
|
let activeFilter = 'all';
|
|
let categoryById = new Map();
|
|
|
|
const searchInput = document.querySelector('#serviceSearch');
|
|
const segments = [...document.querySelectorAll('.segment')];
|
|
const emptyState = document.querySelector('#emptyState');
|
|
const onlineCount = document.querySelector('#onlineCount');
|
|
const serviceCount = document.querySelector('#serviceCount');
|
|
const lastChecked = document.querySelector('#lastChecked');
|
|
const dashboardSections = document.querySelector('#dashboardSections');
|
|
const favoritesSections = document.querySelector('#favoritesSections');
|
|
const loginButton = document.querySelector('#dashboardLoginButton');
|
|
const logoutButton = document.querySelector('#dashboardLogoutButton');
|
|
const favoritesLink = document.querySelector('#favoritesLink');
|
|
const userBadge = document.querySelector('#dashboardUserBadge');
|
|
|
|
function normalize(value) {
|
|
return String(value || '').toLowerCase().trim();
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
return String(value || '')
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
function getLocalConfig() {
|
|
try {
|
|
const raw = window.localStorage.getItem(LOCAL_CONFIG_KEY);
|
|
return raw ? JSON.parse(raw) : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
async function loadConfig() {
|
|
const response = await fetch(CONFIG_URL, { cache: 'no-store' });
|
|
const baseConfig = await response.json();
|
|
return getLocalConfig() || baseConfig;
|
|
}
|
|
|
|
function serviceSearchText(service) {
|
|
return [
|
|
service.name,
|
|
service.description,
|
|
service.domain,
|
|
service.category,
|
|
service.keywords
|
|
].join(' ');
|
|
}
|
|
|
|
function isMobileDevice() {
|
|
return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
|
|
}
|
|
|
|
function getMobilePlatform() {
|
|
const userAgent = navigator.userAgent || '';
|
|
if (/Android/i.test(userAgent)) return 'android';
|
|
if (/iPhone|iPad|iPod/i.test(userAgent)) return 'ios';
|
|
return 'other';
|
|
}
|
|
|
|
function getMobileLaunch(service) {
|
|
if (service.id === 'drive') {
|
|
const fallbackUrl = service.url;
|
|
if (getMobilePlatform() === 'android') {
|
|
return {
|
|
url: `intent://openFiles#Intent;scheme=nextcloud;package=com.nextcloud.client;S.browser_fallback_url=${encodeURIComponent(fallbackUrl)};end`,
|
|
fallbackUrl
|
|
};
|
|
}
|
|
return {
|
|
url: 'nextcloud://openFiles',
|
|
fallbackUrl
|
|
};
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function openMobileLaunch(url, fallbackUrl) {
|
|
let didLeavePage = false;
|
|
let fallbackTimer = null;
|
|
|
|
const cleanup = () => {
|
|
window.removeEventListener('pagehide', markPageLeft);
|
|
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
|
if (fallbackTimer) window.clearTimeout(fallbackTimer);
|
|
};
|
|
|
|
const markPageLeft = () => {
|
|
didLeavePage = true;
|
|
cleanup();
|
|
};
|
|
|
|
const handleVisibilityChange = () => {
|
|
if (document.visibilityState === 'hidden') {
|
|
markPageLeft();
|
|
}
|
|
};
|
|
|
|
window.addEventListener('pagehide', markPageLeft, { once: true });
|
|
document.addEventListener('visibilitychange', handleVisibilityChange);
|
|
|
|
fallbackTimer = window.setTimeout(() => {
|
|
cleanup();
|
|
if (!didLeavePage && document.visibilityState === 'visible') {
|
|
window.location.href = fallbackUrl;
|
|
}
|
|
}, 2200);
|
|
|
|
if (/^https?:\/\//i.test(url) || /^intent:/i.test(url)) {
|
|
window.location.href = url;
|
|
return;
|
|
}
|
|
|
|
window.location.href = url;
|
|
}
|
|
|
|
function createServiceCard(service) {
|
|
const category = categoryById.get(service.category);
|
|
const card = document.createElement('a');
|
|
card.href = service.url;
|
|
card.target = '_blank';
|
|
card.rel = 'noopener';
|
|
card.className = 'card service-card';
|
|
card.dataset.category = service.category;
|
|
card.dataset.url = service.url;
|
|
card.dataset.name = serviceSearchText(service);
|
|
card.innerHTML = `
|
|
<span class="status-dot" aria-label="Status wird geprueft"></span>
|
|
<div class="card-icon" style="--accent: ${service.accent};">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
${icons[service.icon] || icons.folder}
|
|
</svg>
|
|
</div>
|
|
<div class="card-content">
|
|
<span class="card-category">${category?.label || 'Dienst'}</span>
|
|
<h3>${service.name}</h3>
|
|
<p>${service.description}</p>
|
|
</div>
|
|
<span class="card-domain">${service.domain}</span>
|
|
`;
|
|
|
|
const mobileLaunch = getMobileLaunch(service);
|
|
if (mobileLaunch) {
|
|
card.addEventListener('click', (e) => {
|
|
if (!isMobileDevice()) return;
|
|
|
|
e.preventDefault();
|
|
openMobileLaunch(mobileLaunch.url, mobileLaunch.fallbackUrl);
|
|
});
|
|
}
|
|
|
|
return card;
|
|
}
|
|
|
|
function createFavoriteCard(favorite) {
|
|
const card = document.createElement('a');
|
|
card.href = favorite.url;
|
|
card.target = '_blank';
|
|
card.rel = 'noopener';
|
|
card.className = 'card favorite-card';
|
|
card.style.setProperty('--accent', favorite.color || '#67e8f9');
|
|
|
|
const safeLogo = favorite.logoUrl ? escapeHtml(favorite.logoUrl) : '';
|
|
const safeName = escapeHtml(favorite.name);
|
|
const safeDescription = escapeHtml(favorite.description || favorite.group || 'Favorit');
|
|
const iconSvg = icons[favorite.icon] || icons.folder;
|
|
|
|
card.innerHTML = `
|
|
<div class="card-icon favorite-icon" style="--accent: ${favorite.color || '#67e8f9'};">
|
|
${safeLogo
|
|
? `<img src="${safeLogo}" alt="" loading="lazy">`
|
|
: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${iconSvg}</svg>`}
|
|
</div>
|
|
<div class="card-content">
|
|
<span class="card-category">${escapeHtml(favorite.group || 'Favorit')}</span>
|
|
<h3>${safeName}</h3>
|
|
<p>${safeDescription}</p>
|
|
</div>
|
|
<span class="card-domain">${escapeHtml(new URL(favorite.url).hostname)}</span>
|
|
`;
|
|
|
|
return card;
|
|
}
|
|
|
|
function renderFavorites() {
|
|
if (!favoritesSections) return;
|
|
|
|
if (!MischLabsAuth.isAuthenticated()) {
|
|
favoritesSections.innerHTML = `
|
|
<section class="section favorites-section">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="section-kicker">Persoenlich</p>
|
|
<h2>Deine Favoriten</h2>
|
|
</div>
|
|
</div>
|
|
<div class="favorites-empty">
|
|
<p>Melde dich mit SSO an, um eigene Kacheln und Weblinks zu speichern.</p>
|
|
<button class="ghost-button mini" id="favoritesLoginCallout" type="button">Mit SSO anmelden</button>
|
|
</div>
|
|
</section>
|
|
`;
|
|
document.querySelector('#favoritesLoginCallout')?.addEventListener('click', () => MischLabsAuth.login());
|
|
return;
|
|
}
|
|
|
|
if (!favorites.length) {
|
|
favoritesSections.innerHTML = `
|
|
<section class="section favorites-section">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="section-kicker">Persoenlich</p>
|
|
<h2>Deine Favoriten</h2>
|
|
</div>
|
|
<a class="ghost-button mini" href="/favorites.html">Favoriten erstellen</a>
|
|
</div>
|
|
<div class="favorites-empty">
|
|
<p>Noch keine Favoriten. Lege eigene Kacheln fuer YouTube, Notion, Tools oder beliebige Links an.</p>
|
|
</div>
|
|
</section>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
const groups = new Map();
|
|
favorites.forEach((favorite) => {
|
|
const group = favorite.group || 'Favoriten';
|
|
if (!groups.has(group)) groups.set(group, []);
|
|
groups.get(group).push(favorite);
|
|
});
|
|
|
|
favoritesSections.innerHTML = `
|
|
<section class="section favorites-section">
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="section-kicker">Persoenlich</p>
|
|
<h2>Deine Favoriten</h2>
|
|
</div>
|
|
<a class="ghost-button mini" href="/favorites.html">Bearbeiten</a>
|
|
</div>
|
|
<div class="favorite-groups"></div>
|
|
</section>
|
|
`;
|
|
|
|
const container = favoritesSections.querySelector('.favorite-groups');
|
|
[...groups.entries()].forEach(([group, items]) => {
|
|
const section = document.createElement('section');
|
|
section.className = 'favorite-group';
|
|
section.innerHTML = `
|
|
<div class="favorite-group-heading">
|
|
<h3>${escapeHtml(group)}</h3>
|
|
<span>${items.length} ${items.length === 1 ? 'Link' : 'Links'}</span>
|
|
</div>
|
|
<div class="grid favorite-grid"></div>
|
|
`;
|
|
const grid = section.querySelector('.grid');
|
|
items.forEach((favorite) => grid.appendChild(createFavoriteCard(favorite)));
|
|
container.appendChild(section);
|
|
});
|
|
}
|
|
|
|
async function loadFavorites() {
|
|
if (!MischLabsAuth.isAuthenticated()) {
|
|
favorites = [];
|
|
renderFavorites();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/favorites', {
|
|
cache: 'no-store',
|
|
headers: MischLabsAuth.authHeader()
|
|
});
|
|
if (!response.ok) throw new Error(`HTTP ${response.status}`);
|
|
const payload = await response.json();
|
|
favorites = Array.isArray(payload.favorites) ? payload.favorites : [];
|
|
} catch {
|
|
favorites = [];
|
|
}
|
|
|
|
renderFavorites();
|
|
}
|
|
|
|
function renderDashboard(nextConfig) {
|
|
dashboardSections.innerHTML = '';
|
|
serviceCount.textContent = String(nextConfig.services.length);
|
|
categoryById = new Map(nextConfig.categories.map((category) => [category.id, category]));
|
|
|
|
const section = document.createElement('section');
|
|
section.className = 'section service-overview';
|
|
section.innerHTML = `
|
|
<div class="section-heading">
|
|
<div>
|
|
<p class="section-kicker" id="overviewKicker">Dashboard</p>
|
|
<h2 id="overviewTitle">Alle Dienste</h2>
|
|
</div>
|
|
<span class="section-count" id="overviewCount">${nextConfig.services.length} Dienste</span>
|
|
</div>
|
|
<div class="grid"></div>
|
|
`;
|
|
|
|
const grid = section.querySelector('.grid');
|
|
nextConfig.services.forEach((service) => grid.appendChild(createServiceCard(service)));
|
|
dashboardSections.appendChild(section);
|
|
|
|
cards = [...document.querySelectorAll('.service-card')];
|
|
sections = [...document.querySelectorAll('.section')];
|
|
updateOverviewHeading(nextConfig.services.length);
|
|
}
|
|
|
|
function updateOverviewHeading(visibleCards) {
|
|
const activeCategory = categoryById.get(activeFilter);
|
|
const term = normalize(searchInput.value);
|
|
const kicker = document.querySelector('#overviewKicker');
|
|
const title = document.querySelector('#overviewTitle');
|
|
const count = document.querySelector('#overviewCount');
|
|
if (!kicker || !title || !count) return;
|
|
|
|
kicker.textContent = activeCategory ? activeCategory.label : 'Dashboard';
|
|
title.textContent = activeCategory ? activeCategory.title : 'Alle Dienste';
|
|
count.textContent = `${visibleCards} ${visibleCards === 1 ? 'Dienst' : 'Dienste'}${term ? ' gefunden' : ''}`;
|
|
}
|
|
|
|
function updateVisibility() {
|
|
const term = normalize(searchInput.value);
|
|
let visibleCards = 0;
|
|
|
|
cards.forEach((card) => {
|
|
const categoryMatches = activeFilter === 'all' || card.dataset.category === activeFilter;
|
|
const searchMatches = !term || normalize(card.dataset.name).includes(term);
|
|
const isVisible = 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;
|
|
});
|
|
|
|
updateOverviewHeading(visibleCards);
|
|
emptyState.hidden = visibleCards !== 0;
|
|
}
|
|
|
|
function setActiveFilter(nextFilter) {
|
|
activeFilter = nextFilter;
|
|
segments.forEach((segment) => {
|
|
const isActive = segment.dataset.filter === nextFilter;
|
|
segment.classList.toggle('is-active', isActive);
|
|
segment.setAttribute('aria-selected', String(isActive));
|
|
});
|
|
updateVisibility();
|
|
}
|
|
|
|
async function probeService(card) {
|
|
const controller = new AbortController();
|
|
const timeout = window.setTimeout(() => controller.abort(), 4500);
|
|
|
|
try {
|
|
await fetch(card.dataset.url, {
|
|
method: 'GET',
|
|
mode: 'no-cors',
|
|
cache: 'no-store',
|
|
signal: controller.signal
|
|
});
|
|
card.classList.add('is-online');
|
|
card.classList.remove('is-offline');
|
|
card.classList.remove('is-unknown');
|
|
card.querySelector('.status-dot').setAttribute('aria-label', 'Online');
|
|
return true;
|
|
} catch (error) {
|
|
const isTimeout = error.name === 'AbortError';
|
|
card.classList.toggle('is-offline', isTimeout);
|
|
card.classList.toggle('is-unknown', !isTimeout);
|
|
card.classList.remove('is-online');
|
|
card.querySelector('.status-dot').setAttribute(
|
|
'aria-label',
|
|
isTimeout ? 'Nicht erreichbar' : 'Im Browser nicht pruefbar'
|
|
);
|
|
return isTimeout ? false : null;
|
|
} finally {
|
|
window.clearTimeout(timeout);
|
|
}
|
|
}
|
|
|
|
async function refreshStatus() {
|
|
const results = await Promise.allSettled(cards.map(probeService));
|
|
const online = results.filter((result) => result.status === 'fulfilled' && result.value).length;
|
|
const unknown = results.filter((result) => result.status === 'fulfilled' && result.value === null).length;
|
|
onlineCount.textContent = String(online);
|
|
lastChecked.textContent = `Status geprueft: ${new Date().toLocaleTimeString('de-DE', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
})}${unknown ? `, ${unknown} im Browser nicht pruefbar` : ''}`;
|
|
}
|
|
|
|
function scheduleStatusRefresh() {
|
|
const run = () => refreshStatus().catch(() => {
|
|
onlineCount.textContent = '--';
|
|
lastChecked.textContent = 'Status aktuell nicht verfuegbar.';
|
|
});
|
|
|
|
if ('requestIdleCallback' in window) {
|
|
window.requestIdleCallback(run, { timeout: 2000 });
|
|
} else {
|
|
window.setTimeout(run, 600);
|
|
}
|
|
}
|
|
|
|
segments.forEach((segment) => {
|
|
segment.addEventListener('click', () => setActiveFilter(segment.dataset.filter));
|
|
});
|
|
|
|
searchInput.addEventListener('input', updateVisibility);
|
|
|
|
function updateAuthNav() {
|
|
const authenticated = MischLabsAuth.isAuthenticated();
|
|
if (loginButton) loginButton.hidden = authenticated;
|
|
if (logoutButton) logoutButton.hidden = !authenticated;
|
|
if (favoritesLink) favoritesLink.hidden = !authenticated;
|
|
if (userBadge) {
|
|
userBadge.hidden = !authenticated;
|
|
userBadge.textContent = authenticated ? MischLabsAuth.displayName() : '';
|
|
}
|
|
}
|
|
|
|
loginButton?.addEventListener('click', () => MischLabsAuth.login());
|
|
logoutButton?.addEventListener('click', () => MischLabsAuth.logout());
|
|
|
|
if ('serviceWorker' in navigator) {
|
|
window.addEventListener('load', () => {
|
|
navigator.serviceWorker.register('/sw.js').catch(() => {});
|
|
});
|
|
}
|
|
|
|
MischLabsAuth.handleCallback()
|
|
.catch((error) => {
|
|
lastChecked.textContent = error.message;
|
|
})
|
|
.then(() => loadConfig())
|
|
.then((nextConfig) => {
|
|
config = nextConfig;
|
|
updateAuthNav();
|
|
renderDashboard(config);
|
|
updateVisibility();
|
|
loadFavorites();
|
|
scheduleStatusRefresh();
|
|
})
|
|
.catch(() => {
|
|
dashboardSections.innerHTML = '<p class="empty-state">Dashboard-Konfiguration konnte nicht geladen werden.</p>';
|
|
onlineCount.textContent = '--';
|
|
});
|
|
|
|
// ==========================================================================
|
|
// Peeking Bongo Cat Easter Egg Logic
|
|
// ==========================================================================
|
|
(function initPeekingCat() {
|
|
const peekingCat = document.querySelector('#peekingCat');
|
|
const searchInput = document.querySelector('#serviceSearch');
|
|
|
|
if (!peekingCat) return;
|
|
|
|
let tapTimeout = null;
|
|
|
|
// Function to trigger heart popup on click
|
|
function createHeart(x, y) {
|
|
const heart = document.createElement('div');
|
|
heart.className = 'cat-heart';
|
|
heart.innerHTML = '❤️';
|
|
heart.style.left = `${x - 12}px`;
|
|
heart.style.top = `${y - 20}px`;
|
|
|
|
// Set random rotation angle in CSS custom variable
|
|
const randomRot = Math.random() * 40 - 20;
|
|
heart.style.setProperty('--rot', `${randomRot}deg`);
|
|
|
|
document.body.appendChild(heart);
|
|
|
|
// Cleanup heart after animation completes
|
|
setTimeout(() => heart.remove(), 800);
|
|
}
|
|
|
|
// Focus search box triggers peeking active state
|
|
if (searchInput) {
|
|
searchInput.addEventListener('focus', () => {
|
|
peekingCat.classList.add('is-active');
|
|
});
|
|
|
|
searchInput.addEventListener('blur', () => {
|
|
peekingCat.classList.remove('is-active');
|
|
peekingCat.classList.remove('is-tapping');
|
|
});
|
|
|
|
// Keyboard typing triggers tapping animation!
|
|
searchInput.addEventListener('input', () => {
|
|
peekingCat.classList.add('is-active');
|
|
peekingCat.classList.add('is-tapping');
|
|
|
|
if (tapTimeout) clearTimeout(tapTimeout);
|
|
tapTimeout = setTimeout(() => {
|
|
peekingCat.classList.remove('is-tapping');
|
|
}, 350); // Stop tapping 350ms after typing stops
|
|
});
|
|
}
|
|
|
|
// Click on cat triggers tapping + heart animation!
|
|
peekingCat.addEventListener('click', (e) => {
|
|
peekingCat.classList.add('is-tapping');
|
|
createHeart(e.clientX, e.clientY);
|
|
|
|
if (tapTimeout) clearTimeout(tapTimeout);
|
|
tapTimeout = setTimeout(() => {
|
|
peekingCat.classList.remove('is-tapping');
|
|
}, 800);
|
|
});
|
|
})();
|