${chips}
`);
+ };
+
+ pushMeta('Liederbuch', meta.Songbook);
+ pushMeta('ID', meta.ChurchSongID);
+ pushMeta('Stichworte', meta.Keywords, true);
+ pushMeta('Reihenfolge', meta.VerseOrder, true);
+ pushMeta('Sprache', meta.LangCount);
+
+ let html = '
';
+ html += ``;
+ if (metaRows.length) {
+ html += ``;
+ }
+
+ sections.forEach(section => {
+ const heading = section.title ? `
'); + html += `${heading} `;
});
+
+ html += '
';
+ return html;
+}
+
+function openSngModal(relUrl) {
+ if (!relUrl) return;
+ const modal = document.getElementById('transcriptModal');
+ const content = document.getElementById('transcriptContent');
+ if (!modal || !content) return;
+
+ const encodedPath = encodeSubpath(relUrl);
+ const filename = decodeURIComponent(relUrl.split('/').pop() || '').replace(/\.sng$/i, '');
+ content.innerHTML = '${escapeHtml(title)}
${escapeHtml(section.title)}
` : ''; + const body = section.lines.map(l => formatSngLine(l)).join(''); + html += `
${body}
Lade Liedtext…
'; + modal.style.display = 'block'; + + fetch(`/media/${encodedPath}`) + .then(response => { + if (!response.ok) throw new Error('Laden fehlgeschlagen'); + return response.arrayBuffer(); + }) + .then(buffer => { + let text = ''; + try { + text = new TextDecoder('utf-8', { fatal: true }).decode(buffer); + } catch (err) { + text = new TextDecoder('windows-1252').decode(buffer); + } + const parsed = parseSngText(text); + content.innerHTML = buildSngHtml(parsed, filename); + }) + .catch(() => { + content.innerHTML = 'Der Liedtext konnte nicht geladen werden.
'; + }); +} + +window.openSngModal = openSngModal; + +function initTranscriptModal() { + const modal = document.getElementById('transcriptModal'); + if (!modal || modal.dataset.bound) return; + + const closeBtn = modal.querySelector('.close'); + if (closeBtn) { + closeBtn.addEventListener('click', function () { + modal.style.display = 'none'; + }); + } window.addEventListener('click', function (event) { - if (event.target == document.getElementById('transcriptModal')) { - document.getElementById('transcriptModal').style.display = 'none'; + if (event.target === modal) { + modal.style.display = 'none'; } }); + modal.dataset.bound = '1'; +} + +function initAppPage() { + attachEventListeners(); + initTranscriptModal(); + if (typeof window.initSearch === 'function') window.initSearch(); + if (typeof window.initMessages === 'function') window.initMessages(); + if (typeof window.initGallery === 'function') window.initGallery(); + if (typeof window.initCalendar === 'function') window.initCalendar(); + + syncThemeColor(); // Load initial directory based on URL. let initialSubpath = ''; + const pendingFolderOpen = getPendingFolderOpen(); if (window.location.pathname.indexOf('/path/') === 0) { initialSubpath = window.location.pathname.substring(6); // remove "/path/" } - loadDirectory(initialSubpath); -}); + if (pendingFolderOpen?.folder !== undefined) { + initialSubpath = pendingFolderOpen.folder || ''; + } + loadDirectory(initialSubpath).then(() => { + if (pendingFolderOpen?.file) { + highlightPendingFile(pendingFolderOpen.file); + } + if (pendingFolderOpen) { + clearPendingFolderOpen(); + } + }); +} @@ -656,28 +860,32 @@ function reloadDirectory() { } -document.getElementById('globalAudio').addEventListener('ended', () => { - - reloadDirectory().then(() => { - - // If we had a track playing, try to find it in the updated list. - if (currentTrackPath) { - const newIndex = currentMusicFiles.findIndex(file => file.path === currentTrackPath); - currentMusicIndex = newIndex; - } - - // Now, if there's a next track, auto-play it. - if (currentMusicIndex >= 0 && currentMusicIndex < currentMusicFiles.length - 1) { - const nextFile = currentMusicFiles[currentMusicIndex + 1]; - const nextLink = document.querySelector(`.play-file[data-url="${nextFile.path}"]`); - if (nextLink) { - nextLink.click(); - } - } - }).catch(error => { - console.error('Error during reload:', error); - }); -}); +if (!window.__appAudioEndedBound) { + const globalAudio = document.getElementById('globalAudio'); + if (globalAudio) { + globalAudio.addEventListener('ended', () => { + reloadDirectory().then(() => { + // If we had a track playing, try to find it in the updated list. + if (currentTrackPath) { + const newIndex = currentMusicFiles.findIndex(file => file.path === currentTrackPath); + currentMusicIndex = newIndex; + } + + // Now, if there's a next track, auto-play it. + if (currentMusicIndex >= 0 && currentMusicIndex < currentMusicFiles.length - 1) { + const nextFile = currentMusicFiles[currentMusicIndex + 1]; + const nextLink = document.querySelector(`.play-file[data-url=\"${nextFile.path}\"]`); + if (nextLink) { + nextLink.click(); + } + } + }).catch(error => { + console.error('Error during reload:', error); + }); + }); + window.__appAudioEndedBound = true; + } +} // document.addEventListener("DOMContentLoaded", function() { // // Automatically reload every 5 minutes (300,000 milliseconds) @@ -701,4 +909,40 @@ function syncThemeColor() { .forEach(svg => svg.setAttribute('fill', cssVar)); } -document.addEventListener('DOMContentLoaded', syncThemeColor); +// syncThemeColor is called during app init. + +function getPendingFolderOpen() { + try { + const raw = sessionStorage.getItem('pendingFolderOpen'); + return raw ? JSON.parse(raw) : null; + } catch { + return null; + } +} + +function clearPendingFolderOpen() { + try { + sessionStorage.removeItem('pendingFolderOpen'); + } catch { + // ignore + } +} + +function highlightPendingFile(filePath) { + if (!filePath) return; + const target = document.querySelector(`.play-file[data-url=\"${filePath}\"]`); + if (target) { + target.classList.add('search-highlight'); + target.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } +} + +if (window.PageRegistry && typeof window.PageRegistry.register === 'function') { + window.PageRegistry.register('app', { init: initAppPage }); +} else { + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initAppPage); + } else { + initAppPage(); + } +} diff --git a/static/audioplayer.js b/static/audioplayer.js index d13b3a1..6d1d750 100644 --- a/static/audioplayer.js +++ b/static/audioplayer.js @@ -1,3 +1,5 @@ +const AUDIO_PLAYER_STATE_KEY = 'globalAudioPlayerState'; + class SimpleAudioPlayer { constructor({ audioSelector = '#globalAudio', @@ -53,6 +55,11 @@ class SimpleAudioPlayer { // Setup MediaSession handlers + heartbeat this._initMediaSession(); + + // Restore previous playback state (if any) and persist on navigation + this._restoreState(); + window.addEventListener('pagehide', () => this._saveState()); + window.addEventListener('beforeunload', () => this._saveState()); } /** @@ -68,9 +75,8 @@ class SimpleAudioPlayer { if (!Number.isFinite(duration) || duration <= 0) return; if (!Number.isFinite(position) || position < 0) return; - const playbackRate = this.audio.paused - ? 0 - : (Number.isFinite(this.audio.playbackRate) ? this.audio.playbackRate : 1); + let playbackRate = Number.isFinite(this.audio.playbackRate) ? this.audio.playbackRate : 1; + if (!playbackRate) playbackRate = 1; try { if ('playbackState' in navigator.mediaSession) { @@ -206,32 +212,96 @@ class SimpleAudioPlayer { } toggleCollapse() { - const collapsed = this.container.classList.toggle('collapsed'); + const collapsed = !this.container.classList.contains('collapsed'); + this._setCollapsed(collapsed); + this._saveState(); + } + + _setCollapsed(collapsed) { + if (!this.container) return; + this.container.classList.toggle('collapsed', collapsed); if (this.minBtn) { this.minBtn.setAttribute('aria-expanded', (!collapsed).toString()); this.minBtn.setAttribute('aria-label', collapsed ? 'Player ausklappen' : 'Player einklappen'); } } - async fileDownload() { - const src = this.audio.currentSrc || this.audio.src; - if (!src) return; + _saveState() { + try { + if (!this.currentRelUrl) { + sessionStorage.removeItem(AUDIO_PLAYER_STATE_KEY); + return; + } + const state = { + relUrl: this.currentRelUrl, + currentTime: Number.isFinite(this.audio.currentTime) ? this.audio.currentTime : 0, + paused: this.audio.paused, + collapsed: this.container?.classList.contains('collapsed') || false + }; + sessionStorage.setItem(AUDIO_PLAYER_STATE_KEY, JSON.stringify(state)); + } catch { + // Best-effort persistence only. + } + } - // Extract the subpath from the src - const urlObj = new URL(src, window.location.href); - let subpath = urlObj.pathname; - subpath = subpath.slice('/media'.length); + _restoreState() { + let stateRaw; + try { + stateRaw = sessionStorage.getItem(AUDIO_PLAYER_STATE_KEY); + } catch { + return; + } + if (!stateRaw) return; + + let state; + try { + state = JSON.parse(stateRaw); + } catch { + return; + } + if (!state || !state.relUrl) return; + + this._setCollapsed(Boolean(state.collapsed)); + const resumeTime = Number.isFinite(state.currentTime) ? state.currentTime : 0; + const autoplay = !state.paused; + this.loadTrack(state.relUrl, { autoplay, resumeTime }); + } + + async fileDownload() { + let relUrl = this.currentRelUrl || ''; + const src = this.audio.currentSrc || this.audio.src; + + if (!relUrl && src) { + try { + const urlObj = new URL(src, window.location.href); + if (urlObj.pathname.startsWith('/media/')) { + relUrl = urlObj.pathname.slice('/media/'.length); + } + } catch { + // ignore parsing errors + } + } + + if (!relUrl) return; + + const encodedSubpath = relUrl + .replace(/^\/+/, '') + .split('/') + .map(segment => encodeURIComponent(decodeURIComponent(segment))) + .join('/'); // Fetch the tokenized URL from your backend let tokenizedUrl; try { - const resp = await fetch(`/create_dltoken${subpath}`); + const resp = await fetch(`/create_dltoken/${encodedSubpath}`); if (!resp.ok) return; - tokenizedUrl = await resp.text(); + tokenizedUrl = (await resp.text()).trim(); } catch { return; } + if (!tokenizedUrl) return; + // Build the URL with cache-buster const downloadUrl = new URL(tokenizedUrl, window.location.href); @@ -243,7 +313,13 @@ class SimpleAudioPlayer { document.body.removeChild(a); } - async loadTrack(relUrl, reqId) { + async loadTrack(relUrl, reqId, options = {}) { + if (reqId && typeof reqId === 'object') { + options = reqId; + reqId = null; + } + const { autoplay = true, resumeTime = 0 } = options; + this.currentRelUrl = relUrl; const requestId = reqId || (crypto.randomUUID ? crypto.randomUUID() : (Date.now().toString(36) + Math.random().toString(36).slice(2))); const urlWithReq = `/media/${relUrl}${relUrl.includes('?') ? '&' : '?'}req=${encodeURIComponent(requestId)}`; @@ -277,7 +353,35 @@ class SimpleAudioPlayer { this.audio.src = urlWithReq; this.audio.load(); - await this.audio.play(); + + const wantsResume = Number.isFinite(resumeTime) && resumeTime > 0; + if (wantsResume) { + this.audio.addEventListener('loadedmetadata', () => { + const safeTime = Number.isFinite(this.audio.duration) + ? Math.min(resumeTime, this.audio.duration) + : resumeTime; + this.audio.currentTime = safeTime; + this.updateTimeline(); + + if (autoplay) { + this.audio.play().catch(() => this._updatePlayState()); + } else { + this._updatePlayState(); + } + }, { once: true }); + } + + if (!wantsResume) { + if (autoplay) { + try { + await this.audio.play(); + } catch { + this._updatePlayState(); + } + } else { + this._updatePlayState(); + } + } // Full breadcrumb const parts = relUrl.split('/'); @@ -293,6 +397,7 @@ class SimpleAudioPlayer { artwork: [{ src:'/icon/logo-192x192.png', sizes:'192x192', type:'image/png' }] }); } + this._saveState(); } catch (err) { if (err.name !== 'AbortError') { this.nowInfo.textContent = 'Error loading track'; @@ -325,6 +430,7 @@ class SimpleAudioPlayer { // Prev & Next navigator.mediaSession.setActionHandler('previoustrack', wrap(() => { + if (typeof currentMusicIndex !== 'number' || !Array.isArray(currentMusicFiles)) return; if (currentMusicIndex > 0) { const prevFile = currentMusicFiles[currentMusicIndex - 1]; const prevLink = document.querySelector(`.play-file[data-url="${prevFile.path}"]`); @@ -334,6 +440,7 @@ class SimpleAudioPlayer { } })); navigator.mediaSession.setActionHandler('nexttrack', wrap(() => { + if (typeof currentMusicIndex !== 'number' || !Array.isArray(currentMusicFiles)) return; if (currentMusicIndex < currentMusicFiles.length - 1) { const nextFile = currentMusicFiles[currentMusicIndex + 1]; const nextLink = document.querySelector(`.play-file[data-url="${nextFile.path}"]`); diff --git a/static/calendar.js b/static/calendar.js new file mode 100644 index 0000000..ce9e09f --- /dev/null +++ b/static/calendar.js @@ -0,0 +1,691 @@ + const toLocalISO = (d) => { + const year = d.getFullYear(); + const month = String(d.getMonth() + 1).padStart(2, '0'); + const day = String(d.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; + }; + + const holidayCache = new Map(); + + function calculateEasterSunday(year) { + const a = year % 19; + const b = Math.floor(year / 100); + const c = year % 100; + const d = Math.floor(b / 4); + const e = b % 4; + const f = Math.floor((b + 8) / 25); + const g = Math.floor((b - f + 1) / 3); + const h = (19 * a + b - d - g + 15) % 30; + const i = Math.floor(c / 4); + const k = c % 4; + const l = (32 + 2 * e + 2 * i - h - k) % 7; + const m = Math.floor((a + 11 * h + 22 * l) / 451); + const month = Math.floor((h + l - 7 * m + 114) / 31); + const day = ((h + l - 7 * m + 114) % 31) + 1; + return new Date(year, month - 1, day); + } + + function getGermanHolidays(year) { + if (holidayCache.has(year)) return holidayCache.get(year); + + const holidays = new Map(); + const add = (month, day, name) => { + holidays.set(toLocalISO(new Date(year, month - 1, day)), name); + }; + + add(1, 1, 'Neujahr'); + add(5, 1, 'Tag der Arbeit'); + add(10, 3, 'Tag der Deutschen Einheit'); + add(12, 25, '1. Weihnachtstag'); + add(12, 26, '2. Weihnachtstag'); + + const easterSunday = calculateEasterSunday(year); + const addOffset = (offset, name) => { + const d = new Date(easterSunday); + d.setDate(easterSunday.getDate() + offset); + holidays.set(toLocalISO(d), name); + }; + + addOffset(-2, 'Karfreitag'); + addOffset(0, 'Ostersonntag'); + addOffset(1, 'Ostermontag'); + addOffset(39, 'Christi Himmelfahrt'); + addOffset(49, 'Pfingstsonntag'); + addOffset(50, 'Pfingstmontag'); + + holidayCache.set(year, holidays); + return holidays; + } + + function getHolidayName(date) { + const holidays = getGermanHolidays(date.getFullYear()); + return holidays.get(toLocalISO(date)) || ''; + } + + function isDesktopView() { + return window.matchMedia && window.matchMedia('(min-width: 992px)').matches; + } + + function getCalendarRange() { + const weeks = window._calendarIsAdmin ? 12 : 4; + const start = new Date(); + start.setHours(0, 0, 0, 0); + + if (isDesktopView()) { + // shift back to Monday (0 = Sunday) + const diffToMonday = (start.getDay() + 6) % 7; + start.setDate(start.getDate() - diffToMonday); + } + + const end = new Date(start); + end.setDate(end.getDate() + (weeks * 7) - 1); + return { start, end }; + } + + function renderWeekdayHeader(startDate) { + const header = document.querySelector('.calendar-weekday-header'); + if (!header) return; + header.innerHTML = ''; + const formatDayShort = new Intl.DateTimeFormat('de-DE', { weekday: 'short' }); + for (let i = 0; i < 7; i++) { + const d = new Date(startDate); + d.setDate(startDate.getDate() + i); + const div = document.createElement('div'); + div.textContent = formatDayShort.format(d); + header.appendChild(div); + } + } + + function buildCalendarStructure(force = false) { + const daysContainer = document.getElementById('calendar-days'); + if (!daysContainer || (daysContainer.childElementCount > 0 && !force)) return; + + const isAdmin = typeof admin_enabled !== 'undefined' && admin_enabled; + const calendarColSpan = 3; + window._calendarColSpan = calendarColSpan; + window._calendarIsAdmin = isAdmin; + daysContainer.innerHTML = ''; + + const formatDayName = new Intl.DateTimeFormat('de-DE', { weekday: 'long' }); + const formatDate = new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' }); + const { start, end } = getCalendarRange(); + const todayIso = toLocalISO(new Date()); + renderWeekdayHeader(start); + const dayCount = Math.round((end - start) / (1000 * 60 * 60 * 24)) + 1; + + for (let i = 0; i < dayCount; i++) { + const date = new Date(start); + date.setDate(start.getDate() + i); + const isoDate = toLocalISO(date); + const isSunday = date.getDay() === 0; + const holidayName = getHolidayName(date); + const holidayBadge = holidayName ? `${holidayName}` : ''; + + const dayBlock = document.createElement('div'); + dayBlock.className = 'calendar-day empty'; + dayBlock.dataset.date = isoDate; + if (isoDate === toLocalISO(new Date())) { + dayBlock.classList.add('calendar-day-today'); + } + if (isSunday) { + dayBlock.classList.add('calendar-day-sunday'); + } + if (holidayName) { + dayBlock.classList.add('calendar-day-holiday'); + } + if (isDesktopView() && isoDate < todayIso) { + dayBlock.classList.add('calendar-day-hidden'); + } + + dayBlock.innerHTML = ` +
+
+ ${formatDayName.format(date)}
+ ${formatDate.format(date)}${holidayBadge}
+
+
+
+
+
+ `;
+
+ daysContainer.appendChild(dayBlock);
+ }
+ }
+
+ function resetDayBlock(block) {
+ const tbody = block.querySelector('.calendar-entries-list');
+ if (!tbody) return;
+ block.classList.add('empty');
+ tbody.innerHTML = `
+ | Zeit | +Titel | +Ort | +
|---|---|---|
| Keine Einträge | +
+
+
+
+ ` : '';
+ const detailsText = entry.details ? escapeHtml(entry.details) : '';
+ detailsRow.innerHTML = `${detailsText}
${actionsHtml}+ Connections: ${dot.mass}
+ Latest: ${new Date(location.timestamp).toLocaleString()} + `; + dot.marker.bindPopup(content); + } + + function getTimeAgo(timestamp) { + const seconds = Math.floor((Date.now() - timestamp) / 1000); + if (seconds < 60) return `${seconds}s ago`; + const minutes = Math.floor(seconds / 60); + if (minutes < 60) return `${minutes}m ago`; + const hours = Math.floor(minutes / 60); + return `${hours}h ago`; + } + + function updateMapStats() { + let mostRecent = null; + activeDots.forEach(dot => { + if (!mostRecent || dot.lastUpdate > mostRecent) { + mostRecent = dot.lastUpdate; + } + }); + + if (mostRecent) { + const timeAgo = getTimeAgo(mostRecent); + const lastConnection = document.getElementById('last-connection'); + if (lastConnection) lastConnection.textContent = timeAgo; + } + } + + function addOrUpdateDot(lat, lon, city, country, timestamp) { + const key = `${lat},${lon}`; + const now = Date.now(); + + if (activeDots.has(key)) { + const dot = activeDots.get(key); + dot.mass += 1; + dot.lastUpdate = now; + dot.connections.push({ city, country, timestamp }); + + const newRadius = 10 + Math.log(dot.mass) * 5; + dot.marker.setRadius(newRadius); + updatePopup(dot); + } else { + const marker = new PulsingMarker([lat, lon], { + radius: 10 + }).addTo(map); + + const dot = { + marker: marker, + mass: 1, + createdAt: now, + lastUpdate: now, + lat: lat, + lon: lon, + connections: [{ city, country, timestamp }] + }; + + activeDots.set(key, dot); + updatePopup(dot); + } + updateMapStats(); + } + + function formatBytes(bytes) { + if (!bytes && bytes !== 0) return '-'; + const units = ['B', 'KB', 'MB', 'GB', 'TB']; + let num = bytes; + let unitIndex = 0; + while (num >= 1024 && unitIndex < units.length - 1) { + num /= 1024; + unitIndex++; + } + const rounded = num % 1 === 0 ? num.toFixed(0) : num.toFixed(1); + return `${rounded} ${units[unitIndex]}`; + } + + function toBool(val) { + if (val === true || val === 1) return true; + if (typeof val === 'string') { + const lower = val.toLowerCase(); + return lower === 'true' || lower === '1' || lower === 'yes'; + } + return false; + } + + function animateDots() { + if (!map) return; + const now = Date.now(); + const fadeTime = 10 * 60 * 1000; // 10 minutes + + activeDots.forEach((dot, key) => { + const age = now - dot.lastUpdate; + + if (age > fadeTime) { + map.removeLayer(dot.marker); + activeDots.delete(key); + } else { + const fadeProgress = age / fadeTime; + const baseRadius = 10 + Math.log(dot.mass) * 5; + const currentRadius = baseRadius * (1 - fadeProgress * 0.8); + dot.marker.setRadius(Math.max(currentRadius, 2)); + + const opacity = 1 - fadeProgress * 0.7; + dot.marker.setStyle({ + fillOpacity: opacity * 0.8, + opacity: opacity + }); + } + }); + + updateMapStats(); + } + + animateInterval = setInterval(animateDots, 100); + statsInterval = setInterval(() => { + if (activeDots.size > 0) { + updateMapStats(); + } + }, 1000); + + // WebSocket connection + // Force polling to avoid websocket upgrade issues behind some proxies. + socket = io({ + transports: ['polling'], + upgrade: false + }); + socket.on('connect', () => { + socket.emit('request_initial_data'); + socket.emit('request_map_data'); + }); + + socket.on('map_initial_data', function(data) { + data.connections.forEach(conn => { + if (conn.lat && conn.lon) { + addOrUpdateDot(conn.lat, conn.lon, conn.city, conn.country, conn.timestamp); + } + }); + }); + + socket.on('new_connection', function(data) { + if (data.lat && data.lon) { + addOrUpdateDot(data.lat, data.lon, data.city, data.country, data.timestamp); + } + }); + + function updateStats(data) { + const headerCount = document.getElementById('connectionsTotalHeader'); + if (headerCount) headerCount.textContent = `${data.length} Verbindungen`; + const totalConnections = document.getElementById('totalConnections'); + if (totalConnections) totalConnections.textContent = data.length; + const totalBytes = data.reduce((sum, rec) => { + const val = parseFloat(rec.filesize); + return sum + (isNaN(val) ? 0 : val); + }, 0); + const totalSize = document.getElementById('totalSize'); + if (totalSize) totalSize.textContent = formatBytes(totalBytes); + const cachedCount = data.reduce((sum, rec) => sum + (toBool(rec.cached) ? 1 : 0), 0); + const pct = data.length ? ((cachedCount / data.length) * 100).toFixed(0) : 0; + const cachedPercent = document.getElementById('cachedPercent'); + if (cachedPercent) cachedPercent.textContent = `${pct}%`; + } + + function createRow(record, animate = true) { + const tr = document.createElement('tr'); + tr.dataset.timestamp = record.timestamp; + if (animate) { + tr.classList.add('slide-in'); + tr.addEventListener('animationend', () => + tr.classList.remove('slide-in'), { once: true }); + } + tr.innerHTML = ` +
+ Downloads: ${point.count} + `); + bounds.extend([point.lat, point.lon]); + }); + + if (mapData.length === 0) { + const msg = document.createElement('div'); + msg.textContent = 'Keine Geo-Daten für den ausgewählten Zeitraum.'; + msg.className = 'text-muted small mt-3'; + mapElement.appendChild(msg); + } + + if (bounds.isValid()) { + map.fitBounds(bounds, { padding: [24, 24] }); + } else { + map.setView(defaultCenter, defaultZoom); + } + + const refreshSize = () => setTimeout(() => map.invalidateSize(), 150); + refreshSize(); + window.addEventListener('resize', refreshSize); + window.addEventListener('orientationchange', refreshSize); + refreshHandlers.push(refreshSize); + return { map, refreshSize }; + } + + function initDashboardPage() { + const mapElement = document.getElementById('dashboard-map'); + if (!mapElement || mapElement.dataset.bound) return; + mapElement.dataset.bound = '1'; + + const data = parseDashboardData(); + if (!data) return; + + const mapData = Array.isArray(data.map_data) ? data.map_data : []; + const distinctDeviceData = Array.isArray(data.distinct_device_data) ? data.distinct_device_data : []; + const timeframeData = Array.isArray(data.timeframe_data) ? data.timeframe_data : []; + const userAgentData = Array.isArray(data.user_agent_data) ? data.user_agent_data : []; + const folderData = Array.isArray(data.folder_data) ? data.folder_data : []; + const timeframe = data.timeframe || ''; + + if (typeof L !== 'undefined') { + try { + mainMap = createLeafletMap(mapElement, mapData); + + const modalEl = document.getElementById('mapModal'); + if (modalEl) { + modalShownHandler = () => { + const modalMapElement = document.getElementById('dashboard-map-modal'); + if (!modalMapElement) return; + const modalBody = modalEl.querySelector('.modal-body'); + const modalHeader = modalEl.querySelector('.modal-header'); + if (modalBody && modalHeader) { + const availableHeight = window.innerHeight - modalHeader.offsetHeight; + modalBody.style.height = `${availableHeight}px`; + modalMapElement.style.height = '100%'; + } + if (!modalMap) { + modalMap = createLeafletMap(modalMapElement, mapData); + } + setTimeout(() => { + if (modalMap && modalMap.map) { + modalMap.map.invalidateSize(); + if (modalMap.refreshSize) modalMap.refreshSize(); + } + }, 200); + }; + modalEl.addEventListener('shown.bs.modal', modalShownHandler); + } + } catch (err) { + console.error('Dashboard map init failed:', err); + } + } + + if (typeof Chart === 'undefined') return; + + const shiftedLabels = timeframeData.map((item) => { + if (timeframe === 'last24hours') { + const bucketDate = new Date(item.bucket); + const now = new Date(); + const isCurrentHour = + bucketDate.getFullYear() === now.getFullYear() && + bucketDate.getMonth() === now.getMonth() && + bucketDate.getDate() === now.getDate() && + bucketDate.getHours() === now.getHours(); + const bucketEnd = isCurrentHour ? now : new Date(bucketDate.getTime() + 3600 * 1000); + return `${bucketDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${bucketEnd.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`; + } else if (timeframe === '7days' || timeframe === '30days') { + const localDate = new Date(item.bucket); + return localDate.toLocaleDateString(); + } else if (timeframe === '365days') { + const [year, month] = item.bucket.split('-'); + const dateObj = new Date(year, month - 1, 1); + return dateObj.toLocaleString([], { month: 'short', year: 'numeric' }); + } else { + return item.bucket; + } + }); + + const ctxDistinctDevice = document.getElementById('distinctDeviceChart'); + if (ctxDistinctDevice) { + charts.push(new Chart(ctxDistinctDevice.getContext('2d'), { + type: 'bar', + data: { + labels: shiftedLabels, + datasets: [{ + label: 'Device Count', + data: distinctDeviceData.map(item => item.count), + borderWidth: 2 + }] + }, + options: { + responsive: true, + plugins: { legend: { display: false } }, + scales: { + x: { title: { display: true, text: 'Time Range' } }, + y: { + title: { display: true, text: 'Device Count' }, + beginAtZero: true, + ticks: { maxTicksLimit: 10 } + } + } + } + })); + } + + const ctxTimeframe = document.getElementById('downloadTimeframeChart'); + if (ctxTimeframe) { + charts.push(new Chart(ctxTimeframe.getContext('2d'), { + type: 'bar', + data: { + labels: shiftedLabels, + datasets: [{ + label: 'Download Count', + data: timeframeData.map(item => item.count), + borderWidth: 2 + }] + }, + options: { + responsive: true, + plugins: { legend: { display: false } }, + scales: { + x: { title: { display: true, text: 'Time Range' } }, + y: { + title: { display: true, text: 'Download Count' }, + beginAtZero: true, + ticks: { maxTicksLimit: 10 } + } + } + } + })); + } + + const ctxUserAgent = document.getElementById('userAgentChart'); + if (ctxUserAgent) { + charts.push(new Chart(ctxUserAgent.getContext('2d'), { + type: 'pie', + data: { + labels: userAgentData.map(item => item.device), + datasets: [{ + data: userAgentData.map(item => item.count) + }] + }, + options: { responsive: true } + })); + } + + const ctxFolder = document.getElementById('folderChart'); + if (ctxFolder) { + charts.push(new Chart(ctxFolder.getContext('2d'), { + type: 'pie', + data: { + labels: folderData.map(item => item.folder), + datasets: [{ + data: folderData.map(item => item.count) + }] + }, + options: { responsive: true } + })); + } + } + + function destroyDashboardPage() { + charts.forEach(chart => { + try { + chart.destroy(); + } catch (err) { + // ignore + } + }); + charts = []; + + if (mainMap && mainMap.map) { + mainMap.map.remove(); + } + if (modalMap && modalMap.map) { + modalMap.map.remove(); + } + mainMap = null; + modalMap = null; + + refreshHandlers.forEach(handler => { + window.removeEventListener('resize', handler); + window.removeEventListener('orientationchange', handler); + }); + refreshHandlers = []; + + const modalEl = document.getElementById('mapModal'); + if (modalEl && modalShownHandler) { + modalEl.removeEventListener('shown.bs.modal', modalShownHandler); + } + modalShownHandler = null; + } + + if (window.PageRegistry && typeof window.PageRegistry.register === 'function') { + window.PageRegistry.register('dashboard', { + init: initDashboardPage, + destroy: destroyDashboardPage + }); + } +})(); diff --git a/static/file_access.js b/static/file_access.js new file mode 100644 index 0000000..edd0f68 --- /dev/null +++ b/static/file_access.js @@ -0,0 +1,98 @@ +(() => { + const audioExts = ['.mp3', '.wav', '.ogg', '.m4a', '.flac']; + + const safeDecode = (value) => { + try { + return decodeURIComponent(value); + } catch { + return value; + } + }; + + const normalizePath = (path) => { + if (!path) return ''; + return path + .replace(/\\/g, '/') + .replace(/^\/+/, ''); + }; + + const encodePath = (path) => { + const normalized = normalizePath(path); + if (!normalized) return ''; + return normalized + .split('/') + .map(segment => encodeURIComponent(safeDecode(segment))) + .join('/'); + }; + + const isAudio = (path) => + audioExts.some(ext => path.toLowerCase().endsWith(ext)); + + const highlightFile = (filePath) => { + const normalized = normalizePath(filePath); + const target = document.querySelector(`.play-file[data-url="${normalized}"]`); + if (target) { + target.classList.add('search-highlight'); + target.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + }; + + const openFolder = (folderPath, filePath) => { + const normalizedFolder = normalizePath(folderPath); + const normalizedFile = normalizePath(filePath); + const payload = { folder: normalizedFolder || '', file: normalizedFile || '' }; + sessionStorage.setItem('pendingFolderOpen', JSON.stringify(payload)); + + const url = normalizedFolder ? `/path/${encodePath(normalizedFolder)}` : '/'; + if (window.PageRouter && typeof window.PageRouter.loadPage === 'function') { + window.PageRouter.loadPage(url, { push: true, scroll: true }); + return; + } + window.location.href = url; + }; + + const initFileAccess = () => { + const table = document.getElementById('file-access-table'); + if (!table || table.dataset.bound) return; + table.dataset.bound = '1'; + + table.querySelectorAll('.play-access-btn').forEach(btn => { + const path = normalizePath(btn.dataset.path || ''); + if (!path) return; + + if (!isAudio(path)) { + btn.innerHTML = ''; + btn.setAttribute('title', 'Download'); + btn.setAttribute('aria-label', 'Download'); + btn.addEventListener('click', () => { + window.location.href = `/media/${encodePath(path)}`; + }); + return; + } + + btn.addEventListener('click', () => { + const activePlayer = (typeof player !== 'undefined' && player) ? player : window.player; + if (activePlayer && typeof activePlayer.loadTrack === 'function') { + activePlayer.loadTrack(path); + } + }); + }); + + table.querySelectorAll('.folder-open-btn').forEach(btn => { + const folder = normalizePath(btn.dataset.folder || ''); + const file = normalizePath(btn.dataset.file || ''); + btn.addEventListener('click', () => { + // If we're already on the app page, load directly. + if (window.PageRegistry?.getCurrent?.() === 'app' && typeof loadDirectory === 'function') { + loadDirectory(folder).then(() => highlightFile(file)); + } else { + openFolder(folder, file); + } + }); + }); + }; + + if (window.PageRegistry && typeof window.PageRegistry.register === 'function') { + window.PageRegistry.register('file_access', { init: initFileAccess }); + } +})(); diff --git a/static/folder_secret_config_editor.js b/static/folder_secret_config_editor.js new file mode 100644 index 0000000..bf2bef2 --- /dev/null +++ b/static/folder_secret_config_editor.js @@ -0,0 +1,503 @@ +(() => { + + let ALPHABET = []; + let data = []; + let editing = new Set(); + let pendingDelete = null; + + // QR Code generation function using backend + async function generateQRCode(secret, imgElement) { + try { + const response = await fetch(`/admin/generate_qr/${encodeURIComponent(secret)}`); + const data = await response.json(); + imgElement.src = `data:image/png;base64,${data.qr_code}`; + } catch (error) { + console.error('Error generating QR code:', error); + } + } + + // helper to format DD.MM.YYYY → YYYY-MM-DD + function formatISO(d) { + const [dd, mm, yyyy] = d.split('.'); + return (dd && mm && yyyy) ? `${yyyy}-${mm}-${dd}` : ''; + } + + // load from server + async function loadData() { + try { + const res = await fetch('/admin/folder_secret_config_editor/data'); + data = await res.json(); + render(); + } catch (err) { + console.error(err); + } + } + + // send delete/update actions + async function sendAction(payload) { + await fetch('/admin/folder_secret_config_editor/action', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload) + }); + await loadData(); + } + + // delete record after confirmation + function deleteRec(secret) { + sendAction({ action: 'delete', secret }); + } + + // build all cards + function render() { + const cont = document.getElementById('records'); + cont.innerHTML = ''; + + data.forEach(rec => { + const key = rec.secret; + const isEdit = editing.has(key); + const expired = (formatISO(rec.validity) && new Date(formatISO(rec.validity)) < new Date()); + const cls = isEdit ? 'unlocked' : 'locked'; + + // outer card + const wrapper = document.createElement('div'); + wrapper.className = 'card mb-3'; + wrapper.dataset.secret = key; + + // Card header for collapse toggle + const cardHeader = document.createElement('div'); + cardHeader.className = 'card-header'; + cardHeader.style.cursor = 'pointer'; + const collapseId = `collapse-${key}`; + cardHeader.setAttribute('data-bs-toggle', 'collapse'); + cardHeader.setAttribute('data-bs-target', `#${collapseId}`); + cardHeader.setAttribute('aria-expanded', 'false'); + cardHeader.setAttribute('aria-controls', collapseId); + + const headerTitle = document.createElement('div'); + headerTitle.className = 'd-flex justify-content-between align-items-center'; + const folderNames = rec.folders.map(f => f.foldername).join(', '); + headerTitle.innerHTML = `Ordner: ${folderNames}${expired ? ' ! abgelaufen !' : ''}`; + cardHeader.appendChild(headerTitle); + wrapper.appendChild(cardHeader); + + // Collapsible body + const collapseDiv = document.createElement('div'); + collapseDiv.className = 'collapse'; + collapseDiv.id = collapseId; + + const body = document.createElement('div'); + body.className = `card-body ${cls}`; + + // Create row for two-column layout (only if not editing) + if (!isEdit) { + const topRow = document.createElement('div'); + topRow.className = 'row mb-3'; + + // Left column for secret and validity + const leftCol = document.createElement('div'); + leftCol.className = 'col-md-8'; + + // secret input + const secDiv = document.createElement('div'); + secDiv.className = 'mb-2'; + secDiv.innerHTML = `Secret: `; + const secInput = document.createElement('input'); + secInput.className = 'form-control'; + secInput.type = 'text'; + secInput.value = rec.secret; + secInput.readOnly = true; + secInput.dataset.field = 'secret'; + secDiv.appendChild(secInput); + leftCol.appendChild(secDiv); + + // validity input + const valDiv = document.createElement('div'); + valDiv.className = 'mb-2'; + valDiv.innerHTML = `Gültig bis: `; + const valInput = document.createElement('input'); + valInput.className = 'form-control'; + valInput.type = 'date'; + valInput.value = formatISO(rec.validity); + valInput.readOnly = true; + valInput.dataset.field = 'validity'; + valDiv.appendChild(valInput); + leftCol.appendChild(valDiv); + + topRow.appendChild(leftCol); + + // Right column for QR code + const rightCol = document.createElement('div'); + rightCol.className = 'col-md-4 text-center'; + + const qrImg = document.createElement('img'); + qrImg.className = 'qr-code'; + qrImg.style.maxWidth = '200px'; + qrImg.style.width = '100%'; + qrImg.style.border = '1px solid #ddd'; + qrImg.style.padding = '10px'; + qrImg.style.borderRadius = '5px'; + qrImg.alt = 'QR Code'; + generateQRCode(key, qrImg); + rightCol.appendChild(qrImg); + + topRow.appendChild(rightCol); + body.appendChild(topRow); + } else { + // When editing, show fields vertically without QR code + // secret input + const secDiv = document.createElement('div'); + secDiv.className = 'mb-2'; + secDiv.innerHTML = `Secret: `; + const secInput = document.createElement('input'); + secInput.className = 'form-control'; + secInput.type = 'text'; + secInput.value = rec.secret; + secInput.readOnly = false; + secInput.dataset.field = 'secret'; + secDiv.appendChild(secInput); + body.appendChild(secDiv); + + // validity input + const valDiv = document.createElement('div'); + valDiv.className = 'mb-2'; + valDiv.innerHTML = `Gültig bis: `; + const valInput = document.createElement('input'); + valInput.className = 'form-control'; + valInput.type = 'date'; + valInput.value = formatISO(rec.validity); + valInput.readOnly = false; + valInput.dataset.field = 'validity'; + valDiv.appendChild(valInput); + body.appendChild(valDiv); + } + + // folders + const folderHeader = document.createElement('h6'); + folderHeader.textContent = 'Ordner'; + body.appendChild(folderHeader); + + rec.folders.forEach((f, i) => { + const fwrap = document.createElement('div'); + fwrap.style = 'border:1px solid #ccc; padding:10px; margin-bottom:10px; border-radius:5px;'; + + // name + fwrap.appendChild(document.createTextNode("Ordnername: ")); + const nameGroup = document.createElement('div'); + nameGroup.className = 'input-group mb-2'; + const nameInput = document.createElement('input'); + nameInput.className = 'form-control'; + nameInput.type = 'text'; + nameInput.value = f.foldername; + nameInput.readOnly = !isEdit; + nameInput.dataset.field = `foldername-${i}`; + nameGroup.appendChild(nameInput); + + if (isEdit) { + const remBtn = document.createElement('button'); + remBtn.className = 'btn btn-outline-danger'; + remBtn.type = 'button'; + remBtn.textContent = 'entfernen'; + remBtn.addEventListener('click', () => removeFolder(key, i)); + nameGroup.appendChild(remBtn); + } + fwrap.appendChild(nameGroup); + + // path + fwrap.appendChild(document.createTextNode("Ordnerpfad: ")); + const pathInput = document.createElement('input'); + pathInput.className = 'form-control mb-2'; + pathInput.type = 'text'; + pathInput.value = f.folderpath; + pathInput.readOnly = !isEdit; + pathInput.dataset.field = `folderpath-${i}`; + fwrap.appendChild(pathInput); + + body.appendChild(fwrap); + }); + + if (isEdit) { + const addFld = document.createElement('button'); + addFld.className = 'btn btn-sm btn-primary mb-2'; + addFld.type = 'button'; + addFld.textContent = 'Ordner hinzufügen'; + addFld.addEventListener('click', () => addFolder(key)); + body.appendChild(addFld); + } + + // actions row + const actions = document.createElement('div'); + + if (!isEdit) { + const openButton = document.createElement('button'); + openButton.className = 'btn btn-secondary btn-sm me-2'; + openButton.onclick = () => window.open(`/?secret=${rec.secret}`, '_self'); + openButton.textContent = 'Link öffnen'; + actions.appendChild(openButton); + } + + if (!isEdit) { + const openButton = document.createElement('button'); + openButton.className = 'btn btn-secondary btn-sm me-2'; + openButton.onclick = () => toClipboard(`${window.location.origin}/?secret=${rec.secret}`); + openButton.textContent = 'Link kopieren'; + actions.appendChild(openButton); + } + + const delBtn = document.createElement('button'); + delBtn.className = 'btn btn-danger btn-sm me-2 delete-btn'; + delBtn.type = 'button'; + delBtn.textContent = 'löschen'; + delBtn.dataset.secret = key; + actions.appendChild(delBtn); + + const cloneBtn = document.createElement('button'); + cloneBtn.className = 'btn btn-secondary btn-sm me-2'; + cloneBtn.type = 'button'; + cloneBtn.textContent = 'clonen'; + cloneBtn.addEventListener('click', () => cloneRec(key)); + actions.appendChild(cloneBtn); + + if (isEdit || expired) { + const renewBtn = document.createElement('button'); + renewBtn.className = 'btn btn-info btn-sm me-2'; + renewBtn.type = 'button'; + renewBtn.textContent = 'erneuern'; + renewBtn.addEventListener('click', () => renewRec(key)); + actions.appendChild(renewBtn); + } + + if (isEdit) { + const saveBtn = document.createElement('button'); + saveBtn.className = 'btn btn-success btn-sm me-2'; + saveBtn.type = 'button'; + saveBtn.textContent = 'speichern'; + saveBtn.addEventListener('click', () => saveRec(key)); + actions.appendChild(saveBtn); + + const cancelBtn = document.createElement('button'); + cancelBtn.className = 'btn btn-secondary btn-sm'; + cancelBtn.type = 'button'; + cancelBtn.textContent = 'abbrechen'; + cancelBtn.addEventListener('click', () => cancelEdit(key)); + actions.appendChild(cancelBtn); + } + + body.appendChild(actions); + collapseDiv.appendChild(body); + wrapper.appendChild(collapseDiv); + cont.appendChild(wrapper); + }); + } + + // generate a unique secret + function generateSecret(existing) { + let s; + do { + s = Array.from({length:32}, () => ALPHABET[Math.floor(Math.random()*ALPHABET.length)]).join(''); + } while (existing.includes(s)); + return s; + } + + // CRUD helpers + function cancelEdit(secret) { + editing.delete(secret); + // If this was a new record that was never saved, remove it + const originalExists = data.some(r => r.secret === secret && !editing.has(secret)); + loadData(); // Reload to discard changes + } + function cloneRec(secret) { + const idx = data.findIndex(r => r.secret === secret); + const rec = JSON.parse(JSON.stringify(data[idx])); + const existing = data.map(r => r.secret); + rec.secret = generateSecret(existing); + const futureDate = new Date(); + futureDate.setDate(futureDate.getDate() + 35); + // Format as DD.MM.YYYY for validity input + const dd = String(futureDate.getDate()).padStart(2, '0'); + const mm = String(futureDate.getMonth() + 1).padStart(2, '0'); + const yyyy = futureDate.getFullYear(); + rec.validity = `${dd}.${mm}.${yyyy}`; + data.splice(idx+1, 0, rec); + editing.add(rec.secret); + render(); + // Auto-expand the cloned item + setTimeout(() => { + const collapseEl = document.getElementById(`collapse-${rec.secret}`); + if (collapseEl) { + const bsCollapse = new bootstrap.Collapse(collapseEl, { toggle: false }); + bsCollapse.show(); + } + }, 100); + } + async function renewRec(secret) { + // find current record + const rec = data.find(r => r.secret === secret); + if (!rec) return; + + // generate a fresh unique secret + const existing = data.map(r => r.secret); + const newSecret = generateSecret(existing); + + // validity = today + 35 days, formatted as YYYY-MM-DD + const future = new Date(); + future.setDate(future.getDate() + 35); + const yyyy = future.getFullYear(); + const mm = String(future.getMonth() + 1).padStart(2, '0'); + const dd = String(future.getDate()).padStart(2, '0'); + const validity = `${yyyy}-${mm}-${dd}`; + + // keep folders unchanged + const folders = rec.folders.map(f => ({ + foldername: f.foldername, + folderpath: f.folderpath + })); + + // persist via existing endpoint + await sendAction({ + action: 'update', + oldSecret: secret, + newSecret, + validity, + folders + }); + } + function addFolder(secret) { + data.find(r => r.secret === secret).folders.push({foldername:'', folderpath:''}); + render(); + } + function removeFolder(secret, i) { + data.find(r => r.secret === secret).folders.splice(i,1); + render(); + } + + async function saveRec(secret) { + const card = document.querySelector(`[data-secret="${secret}"]`); + const newSecret = card.querySelector('input[data-field="secret"]').value.trim(); + const validity = card.querySelector('input[data-field="validity"]').value; + const rec = data.find(r => r.secret === secret); + const folders = rec.folders.map((_, i) => ({ + foldername: card.querySelector(`input[data-field="foldername-${i}"]`).value.trim(), + folderpath: card.querySelector(`input[data-field="folderpath-${i}"]`).value.trim() + })); + + if (!newSecret || data.some(r => r.secret !== secret && r.secret === newSecret)) { + return alert('Secret must be unique and non-empty'); + } + if (!validity) { + return alert('Validity required'); + } + if (folders.some(f => !f.foldername || !f.folderpath)) { + return alert('Folder entries cannot be empty'); + } + + await sendAction({ + action: 'update', + oldSecret: secret, + newSecret, + validity, + folders + }); + editing.delete(secret); + await loadData(); + } + + + let addBtnHandler = null; + let deleteClickHandler = null; + let confirmDeleteHandler = null; + + function bindHandlers() { + const root = document.getElementById('records'); + if (!root || root.dataset.bound) return false; + root.dataset.bound = '1'; + + const dataScript = document.getElementById('folder-config-page-data'); + if (dataScript) { + try { + const parsed = JSON.parse(dataScript.textContent || '{}'); + if (Array.isArray(parsed.alphabet)) { + ALPHABET = parsed.alphabet; + } else if (typeof parsed.alphabet === 'string') { + ALPHABET = parsed.alphabet.split(''); + } else { + ALPHABET = []; + } + } catch (err) { + console.error('Failed to parse folder config data', err); + } + } + + addBtnHandler = () => { + const existing = data.map(r => r.secret); + const newSecret = generateSecret(existing); + data.push({ secret: newSecret, validity: new Date().toISOString().slice(0,10), folders: [] }); + editing.add(newSecret); + render(); + setTimeout(() => { + const collapseEl = document.getElementById(`collapse-${newSecret}`); + if (collapseEl) { + const bsCollapse = new bootstrap.Collapse(collapseEl, { toggle: false }); + bsCollapse.show(); + } + }, 100); + }; + + const addBtn = document.getElementById('add-btn'); + if (addBtn) addBtn.addEventListener('click', addBtnHandler); + + deleteClickHandler = (e) => { + if (e.target.matches('.delete-btn')) { + pendingDelete = e.target.dataset.secret; + const modal = new bootstrap.Modal(document.getElementById('confirmDeleteModal')); + modal.show(); + } + }; + document.addEventListener('click', deleteClickHandler); + + confirmDeleteHandler = () => { + if (pendingDelete) deleteRec(pendingDelete); + pendingDelete = null; + const modal = bootstrap.Modal.getInstance(document.getElementById('confirmDeleteModal')); + if (modal) modal.hide(); + }; + const confirmBtn = document.querySelector('.confirm-delete'); + if (confirmBtn) confirmBtn.addEventListener('click', confirmDeleteHandler); + + return true; + } + + function unbindHandlers() { + const addBtn = document.getElementById('add-btn'); + if (addBtn && addBtnHandler) addBtn.removeEventListener('click', addBtnHandler); + addBtnHandler = null; + + if (deleteClickHandler) document.removeEventListener('click', deleteClickHandler); + deleteClickHandler = null; + + const confirmBtn = document.querySelector('.confirm-delete'); + if (confirmBtn && confirmDeleteHandler) confirmBtn.removeEventListener('click', confirmDeleteHandler); + confirmDeleteHandler = null; + } + + function initFolderConfigPage() { + data = []; + editing = new Set(); + pendingDelete = null; + + if (!bindHandlers()) return; + loadData(); + } + + function destroyFolderConfigPage() { + unbindHandlers(); + } + + if (window.PageRegistry && typeof window.PageRegistry.register === 'function') { + window.PageRegistry.register('folder_secret_config', { + init: initFolderConfigPage, + destroy: destroyFolderConfigPage + }); + } + +})(); diff --git a/static/gallery.js b/static/gallery.js index bf8a92d..878d40c 100644 --- a/static/gallery.js +++ b/static/gallery.js @@ -596,23 +596,19 @@ function initGalleryControls() { function initGallery() { + const galleryModal = document.getElementById('gallery-modal'); + if (!galleryModal || galleryModal.dataset.galleryBound) return; initGallerySwipe(); initGalleryControls(); // Close modal when clicking outside the image. - const galleryModal = document.getElementById('gallery-modal'); galleryModal.addEventListener('click', function(e) { if (e.target === galleryModal) { closeGalleryModal(); } }); - + galleryModal.dataset.galleryBound = '1'; } -// Initialize the gallery once the DOM content is loaded. -if (document.readyState === "loading") { - document.addEventListener('DOMContentLoaded', initGallery); -} else { - initGallery(); -} +window.initGallery = initGallery; diff --git a/static/messages.js b/static/messages.js index 767648d..e4a766d 100644 --- a/static/messages.js +++ b/static/messages.js @@ -5,11 +5,27 @@ let messageModal; let currentEditingId = null; // Initialize messages on page load -document.addEventListener('DOMContentLoaded', function() { +function initMessages() { + const container = document.getElementById('messages-container'); + if (!container || container.dataset.bound) return; + container.dataset.bound = '1'; // Initialize Bootstrap modal const modalElement = document.getElementById('messageModal'); if (modalElement) { messageModal = new bootstrap.Modal(modalElement); + if (!modalElement.dataset.focusGuard) { + modalElement.addEventListener('hide.bs.modal', () => { + const active = document.activeElement; + if (active && modalElement.contains(active)) { + active.blur(); + // Ensure focus isn't left on an element being hidden + requestAnimationFrame(() => { + if (document.body) document.body.focus({ preventScroll: true }); + }); + } + }); + modalElement.dataset.focusGuard = '1'; + } } // Tab switching @@ -146,7 +162,7 @@ document.addEventListener('DOMContentLoaded', function() { }); } -}); +} async function loadMessages() { try { @@ -479,3 +495,6 @@ function insertLink(path, name, type) { // Optionally close the browser after inserting fileBrowserCollapse.hide(); } + + +window.initMessages = initMessages; diff --git a/static/page_registry.js b/static/page_registry.js new file mode 100644 index 0000000..a8844e5 --- /dev/null +++ b/static/page_registry.js @@ -0,0 +1,37 @@ +(() => { + const registry = new Map(); + let currentId = null; + + async function destroyCurrent(ctx) { + if (!currentId) return; + const handlers = registry.get(currentId); + if (handlers && typeof handlers.destroy === 'function') { + await handlers.destroy(ctx || {}); + } + } + + async function initPage(id, ctx) { + currentId = id || null; + if (!currentId) return; + const handlers = registry.get(currentId); + if (handlers && typeof handlers.init === 'function') { + await handlers.init(ctx || {}); + } + } + + function register(id, handlers) { + if (!id) return; + registry.set(id, handlers || {}); + } + + function getCurrent() { + return currentId; + } + + window.PageRegistry = { + register, + destroyCurrent, + initPage, + getCurrent + }; +})(); diff --git a/static/page_router.js b/static/page_router.js new file mode 100644 index 0000000..a4391b3 --- /dev/null +++ b/static/page_router.js @@ -0,0 +1,135 @@ +(() => { + const pageContent = document.getElementById('page-content'); + if (!pageContent) return; + + const isModifiedEvent = (event) => + event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0; + + const isSameOrigin = (url) => { + try { + const target = new URL(url, window.location.href); + return target.origin === window.location.origin; + } catch { + return false; + } + }; + + const cloneWithAttributes = (node) => { + const clone = document.createElement(node.tagName.toLowerCase()); + Array.from(node.attributes).forEach(attr => { + clone.setAttribute(attr.name, attr.value); + }); + if (node.tagName === 'SCRIPT' && node.textContent) { + clone.textContent = node.textContent; + } + if (node.tagName === 'STYLE' && node.textContent) { + clone.textContent = node.textContent; + } + return clone; + }; + + const replaceHeadExtras = async (doc) => { + const oldNodes = Array.from(document.head.querySelectorAll('[data-page-head]')); + oldNodes.forEach(node => node.remove()); + + const newNodes = Array.from(doc.head.querySelectorAll('[data-page-head]')); + const loadPromises = []; + + newNodes.forEach(node => { + const clone = cloneWithAttributes(node); + if (clone.tagName === 'SCRIPT' && clone.src) { + loadPromises.push(new Promise(resolve => { + clone.onload = resolve; + clone.onerror = resolve; + })); + } + document.head.appendChild(clone); + }); + + if (loadPromises.length) { + await Promise.all(loadPromises); + } + }; + + const loadPage = async (url, { push = true, scroll = true } = {}) => { + try { + const response = await fetch(url, { + headers: { 'X-Requested-With': 'PageRouter' } + }); + + if (!response.ok) { + window.location.href = url; + return; + } + + const html = await response.text(); + const doc = new DOMParser().parseFromString(html, 'text/html'); + const nextContent = doc.getElementById('page-content'); + if (!nextContent) { + window.location.href = url; + return; + } + + const nextPageId = nextContent.dataset.pageId || ''; + const currentId = window.PageRegistry?.getCurrent?.() || pageContent.dataset.pageId || ''; + if (window.PageRegistry?.destroyCurrent) { + await window.PageRegistry.destroyCurrent({ from: currentId, to: nextPageId, url }); + } + + document.title = doc.title; + await replaceHeadExtras(doc); + + pageContent.innerHTML = nextContent.innerHTML; + pageContent.dataset.pageId = nextPageId; + + if (push) { + history.pushState({ url }, '', url); + } + + if (scroll) { + window.scrollTo(0, 0); + } + + if (window.PageRegistry?.initPage) { + await window.PageRegistry.initPage(nextPageId, { url, doc }); + } + } catch (err) { + window.location.href = url; + } + }; + + document.addEventListener('click', (event) => { + const link = event.target.closest('a[data-ajax-nav]'); + if (!link) return; + if (isModifiedEvent(event)) return; + if (link.target && link.target !== '_self') return; + if (link.hasAttribute('download')) return; + + const href = link.getAttribute('href'); + if (!href || href.startsWith('#')) return; + if (!isSameOrigin(href)) return; + + event.preventDefault(); + loadPage(href, { push: true, scroll: true }); + }); + + window.addEventListener('popstate', (event) => { + const url = (event.state && event.state.url) || window.location.href; + loadPage(url, { push: false, scroll: false }); + }); + + const boot = () => { + const initialId = pageContent.dataset.pageId || ''; + if (window.PageRegistry?.initPage) { + window.PageRegistry.initPage(initialId, { url: window.location.href, doc: document }); + } + }; + + window.PageRouter = { loadPage }; + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', boot); + } else { + boot(); + } +})(); diff --git a/static/search.js b/static/search.js index bb716df..d385c96 100644 --- a/static/search.js +++ b/static/search.js @@ -1,41 +1,68 @@ -document.addEventListener('DOMContentLoaded', function() { +function initSearch() { + const form = document.getElementById('searchForm'); + if (!form || form.dataset.bound) return; + form.dataset.bound = '1'; // Function to render search results from a response object function renderResults(data) { const resultsDiv = document.getElementById('results'); - resultsDiv.innerHTML = '
Suchergebnisse:
'; + const results = Array.isArray(data.results) ? data.results : []; + const total = Number.isFinite(data.total) ? data.total : results.length; + const shown = results.length; + const remaining = Math.max(0, total - shown); + resultsDiv.innerHTML = `${total} Treffer
`; const audioExts = ['.mp3', '.wav', '.ogg', '.m4a', '.flac']; - if (data.results && data.results.length > 0) { - data.results.forEach(file => { + if (results.length > 0) { + results.forEach(file => { const card = document.createElement('div'); const filenameWithoutExtension = file.filename.split('.').slice(0, -1).join('.'); const parentFolder = file.relative_path.split('/').slice(0, -1).join('/'); const transcriptURL = '/transcript/' + parentFolder + '/Transkription/' + filenameWithoutExtension + '.md'; const isAudio = audioExts.includes((file.filetype || '').toLowerCase()); + const isSng = (file.filetype || '').toLowerCase() === '.sng' || (file.filename || '').toLowerCase().endsWith('.sng'); const encodedRelPath = encodeURI(file.relative_path); + const fulltextType = file.fulltext_type || 'transcript'; + const fulltextUrl = file.fulltext_url || transcriptURL; + const fulltextLabel = 'Treffer im Volltext'; + const fulltextAction = fulltextType === 'sng' + ? `` + : ``; card.className = 'card'; - const fileAction = isAudio - ? `` - : ` ${file.filename}`; + let fileAction = ''; + if (isSng) { + fileAction = ``; + } else if (isAudio) { + fileAction = ``; + } else { + fileAction = ` ${file.filename}`; + } card.innerHTML = `${fileAction}
Anzahl Downloads: ${file.hitcount}
- ${ file.performance_date !== undefined ? `Datum: ${file.performance_date}
` : ``} - ${ file.transcript_hits !== undefined ? `Treffer im Transkript: ${file.transcript_hits}
` : ``} + ${ (file.performance_date !== undefined && file.performance_date !== null && String(file.performance_date).trim() !== '') ? `Datum: ${file.performance_date}
` : ``} + ${ file.transcript_hits !== undefined ? `${fulltextLabel}: ${file.transcript_hits} ${fulltextAction}
` : ``}No results found.
'; + resultsDiv.innerHTML = `${total} Treffer
Keine Treffer gefunden.
`; } } @@ -88,7 +115,7 @@ document.addEventListener('DOMContentLoaded', function() { } // Form submission event - document.getElementById('searchForm').addEventListener('submit', function(e) { + form.addEventListener('submit', function(e) { e.preventDefault(); const query = document.getElementById('query').value.trim(); const includeTranscript = document.getElementById('includeTranscript').checked; @@ -203,7 +230,7 @@ document.addEventListener('DOMContentLoaded', function() { // window.location.href = '/'; viewMain(); }); -}); +} function attachSearchFolderButtons() { document.querySelectorAll('.folder-open-btn').forEach(btn => { @@ -216,6 +243,30 @@ function attachSearchFolderButtons() { }); } +function attachSearchSngButtons() { + document.querySelectorAll('.open-sng-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + e.preventDefault(); + const path = btn.dataset.path; + if (typeof window.openSngModal === 'function') { + window.openSngModal(path); + } + }); + }); +} + +function attachSearchFulltextButtons() { + document.querySelectorAll('.open-sng-link').forEach(link => { + link.addEventListener('click', (e) => { + e.preventDefault(); + const path = link.dataset.path; + if (typeof window.openSngModal === 'function') { + window.openSngModal(path); + } + }); + }); +} + function openFolderAndHighlight(folderPath, filePath) { const targetFolder = folderPath || ''; // Switch back to main view before loading folder @@ -241,4 +292,7 @@ function syncThemeColor() { } // sync once on load - document.addEventListener('DOMContentLoaded', syncThemeColor); + // syncThemeColor handled by app init. + + +window.initSearch = initSearch; diff --git a/static/search_db_analyzer.js b/static/search_db_analyzer.js new file mode 100644 index 0000000..46d28ff --- /dev/null +++ b/static/search_db_analyzer.js @@ -0,0 +1,264 @@ +(() => { + function initSearchDbAnalyzer() { + const form = document.getElementById('analyzer-form'); + if (!form || form.dataset.bound) return; + form.dataset.bound = '1'; + + const dataScript = document.getElementById('search-db-analyzer-data'); + let foldersUrl = ''; + let queryUrl = ''; + if (dataScript) { + try { + const parsed = JSON.parse(dataScript.textContent || '{}'); + foldersUrl = parsed.folders_url || ''; + queryUrl = parsed.query_url || ''; + } catch (err) { + console.error('Failed to parse analyzer data', err); + } + } + + const feedback = document.getElementById('analyzer-feedback'); + const resultWrapper = document.getElementById('analyzer-result'); + const resultBody = document.getElementById('result-body'); + const filetypeBody = document.getElementById('filetype-body'); + const totalCount = document.getElementById('totalCount'); + const levelsContainer = document.getElementById('folder-levels'); + + const levelSelects = []; + + const createSelect = (level, options) => { + const wrapper = document.createElement('div'); + wrapper.className = 'folder-level'; + const select = document.createElement('select'); + select.className = 'form-select'; + select.dataset.level = level; + select.required = level === 0; + + const placeholder = document.createElement('option'); + placeholder.value = ''; + placeholder.textContent = level === 0 ? 'Bitte auswählen' : 'Optionaler Unterordner'; + select.appendChild(placeholder); + + options.forEach((opt) => { + const option = document.createElement('option'); + option.value = opt; + option.textContent = opt; + select.appendChild(option); + }); + + select.addEventListener('change', () => { + removeLevelsFrom(level + 1); + updateControlButtons(); + }); + + const controls = document.createElement('div'); + controls.className = 'd-flex gap-2 align-items-center'; + const btnGroup = document.createElement('div'); + btnGroup.className = 'btn-group btn-group-sm'; + + const addBtn = document.createElement('button'); + addBtn.type = 'button'; + addBtn.className = 'btn btn-outline-secondary'; + addBtn.textContent = '+'; + addBtn.addEventListener('click', () => handleAddLevel()); + btnGroup.appendChild(addBtn); + + let removeBtn = null; + if (level > 0) { + removeBtn = document.createElement('button'); + removeBtn.type = 'button'; + removeBtn.className = 'btn btn-outline-danger'; + removeBtn.textContent = '-'; + removeBtn.addEventListener('click', () => { + removeLevelsFrom(level); + updateControlButtons(); + }); + btnGroup.appendChild(removeBtn); + } + + controls.append(select, btnGroup); + wrapper.append(controls); + levelsContainer.appendChild(wrapper); + levelSelects.push({ wrapper, select, addBtn, removeBtn, btnGroup }); + }; + + const removeLevelsFrom = (startIndex) => { + while (levelSelects.length > startIndex) { + const item = levelSelects.pop(); + levelsContainer.removeChild(item.wrapper); + } + }; + + const currentPath = () => { + const parts = levelSelects + .map(({ select }) => select.value) + .filter((v) => v && v.trim() !== ''); + return parts.join('/'); + }; + + const fetchChildren = async (parentPath = '') => { + if (!foldersUrl) throw new Error('Ordner-Endpoint fehlt.'); + const params = parentPath ? `?parent=${encodeURIComponent(parentPath)}` : ''; + const response = await fetch(`${foldersUrl}${params}`); + const data = await response.json(); + if (!response.ok) { + throw new Error(data.error || 'Ordner konnten nicht geladen werden.'); + } + return data.children || []; + }; + + const updateControlButtons = () => { + if (!levelSelects.length) { + return; + } + levelSelects.forEach((item, idx) => { + const isLast = idx === levelSelects.length - 1; + if (item.btnGroup) { + item.btnGroup.classList.toggle('d-none', !isLast); + } + if (item.addBtn) { + item.addBtn.disabled = !item.select.value; + } + if (item.removeBtn) { + const hideRemove = !isLast || idx === 0; + item.removeBtn.classList.toggle('d-none', hideRemove); + item.removeBtn.disabled = hideRemove; + } + }); + }; + + const initBaseLevel = async () => { + try { + const children = await fetchChildren(''); + if (!children.length) { + feedback.textContent = 'Keine Ordner in der Datenbank gefunden.'; + feedback.style.display = 'block'; + return; + } + createSelect(0, children); + updateControlButtons(); + } catch (error) { + feedback.textContent = error.message; + feedback.style.display = 'block'; + } + }; + + const handleAddLevel = async () => { + feedback.style.display = 'none'; + const path = currentPath(); + if (!path) { + feedback.textContent = 'Bitte zuerst einen Hauptordner auswählen.'; + feedback.style.display = 'block'; + return; + } + try { + const children = await fetchChildren(path); + if (!children.length) { + feedback.textContent = 'Keine weiteren Unterordner vorhanden.'; + feedback.style.display = 'block'; + return; + } + createSelect(levelSelects.length, children); + updateControlButtons(); + } catch (error) { + feedback.textContent = error.message; + feedback.style.display = 'block'; + } + }; + + initBaseLevel(); + + form.addEventListener('submit', async (event) => { + event.preventDefault(); + feedback.style.display = 'none'; + resultWrapper.style.display = 'none'; + + const folderPath = currentPath(); + + if (!folderPath) { + feedback.textContent = 'Bitte einen Ordner auswählen.'; + feedback.style.display = 'block'; + return; + } + + const submitButton = form.querySelector('button[type="submit"]'); + submitButton.disabled = true; + submitButton.textContent = 'Wird geladen...'; + + try { + if (!queryUrl) throw new Error('Abfrage-Endpoint fehlt.'); + const response = await fetch(queryUrl, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ folder_path: folderPath }) + }); + + const data = await response.json(); + if (!response.ok) { + throw new Error(data.error || 'Abfrage fehlgeschlagen.'); + } + + resultBody.innerHTML = ''; + if (filetypeBody) { + filetypeBody.innerHTML = ''; + } + if (data.categories && data.categories.length) { + data.categories.forEach((row) => { + const tr = document.createElement('tr'); + const cat = document.createElement('td'); + const cnt = document.createElement('td'); + + cat.textContent = row.category || 'Keine Kategorie'; + cnt.textContent = row.count; + + tr.append(cat, cnt); + resultBody.appendChild(tr); + }); + } else { + const tr = document.createElement('tr'); + const td = document.createElement('td'); + td.colSpan = 2; + td.textContent = 'Keine Treffer gefunden.'; + tr.appendChild(td); + resultBody.appendChild(tr); + } + + if (filetypeBody) { + if (data.filetypes && data.filetypes.length) { + data.filetypes.forEach((row) => { + const tr = document.createElement('tr'); + const type = document.createElement('td'); + const cnt = document.createElement('td'); + + type.textContent = row.type || 'Misc'; + cnt.textContent = row.count; + + tr.append(type, cnt); + filetypeBody.appendChild(tr); + }); + } else { + const tr = document.createElement('tr'); + const td = document.createElement('td'); + td.colSpan = 2; + td.textContent = 'Keine Datei-Typen gefunden.'; + tr.appendChild(td); + filetypeBody.appendChild(tr); + } + } + + totalCount.textContent = `${data.total || 0} Dateien`; + resultWrapper.style.display = 'block'; + } catch (error) { + feedback.textContent = error.message; + feedback.style.display = 'block'; + } finally { + submitButton.disabled = false; + submitButton.textContent = 'Abfrage starten'; + } + }); + } + + if (window.PageRegistry && typeof window.PageRegistry.register === 'function') { + window.PageRegistry.register('search_db_analyzer', { init: initSearchDbAnalyzer }); + } +})(); diff --git a/templates/app.html b/templates/app.html index fb9a3bb..f7bba3e 100644 --- a/templates/app.html +++ b/templates/app.html @@ -1,33 +1,34 @@ {% extends 'base.html' %} {% block title %}{{ title_short }}{% endblock %} +{% block page_id %}app{% endblock %} {% block head_extra %} - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + {% endblock %} {% block content %} {% if features %} {% endif %} @@ -62,6 +63,11 @@ + +
+
+
+
@@ -80,6 +86,20 @@
+
+
+
+
+
+
+
+
+ +
@@ -113,19 +133,6 @@
- -
-
- -
-
-
-
-
- -
@@ -142,6 +149,10 @@
+
+
+
+
@@ -152,14 +163,6 @@
- -
-
- -
-
-
-
-
- -
@@ -184,45 +187,6 @@
-
-
-
@@ -253,11 +217,6 @@
{% endblock %}
{% block scripts %}
-
-
-
-
-
+
{% block head_extra %}{% endblock %}
-
+
+
{% block scripts %}{% endblock %}
+
+
+
+
+
+
+
+
+
+
+
+
{{ title_long }}
@@ -35,22 +37,22 @@
@@ -58,11 +60,65 @@
{% endif %}
- {% block content %}{% endblock %}
+
+ {% block content %}{% endblock %}
+
+
+
+