Merkliste: eigener Tab mit Bookmark-Übersicht, klickbar zum Detail

This commit is contained in:
Dotty Dotter 2026-04-10 22:24:43 +02:00
parent 4b40de4e93
commit e1deec8b53

View File

@ -697,6 +697,7 @@
</select>
<div class="mode-toggle">
<button class="mode-btn active" onclick="showMode('browse')">📋 Durchsuchen</button>
<button class="mode-btn" onclick="showMode('bookmarks')">⭐ Merkliste</button>
<button class="mode-btn" onclick="showMode('tags')">🏷️ Tags</button>
<button class="mode-btn" onclick="showMode('upload')">📤 Prüfen</button>
<a href="/auswertungen" class="mode-btn" style="text-decoration: none;">📈 Auswertungen</a>
@ -765,6 +766,16 @@
</main>
</div>
<!-- Bookmarks / Merkliste Mode -->
<div class="main-container" id="bookmarks-mode" style="display: none;">
<div class="list-panel" style="max-width: 100%;">
<h2 style="color: var(--color-blue); margin-bottom: 1rem;">⭐ Merkliste</h2>
<div id="bookmarks-content">
<p style="color: #888;">Lade Merkliste...</p>
</div>
</div>
</div>
<!-- Tags Mode -->
<div class="main-container" id="tags-mode" style="display: none;">
<aside class="list-panel" style="width: 100%; max-width: 400px;">
@ -1260,6 +1271,44 @@
}
}
// ─── Merkliste (#94) ────────────────────────────────────────
async function loadBookmarksList() {
const container = document.getElementById('bookmarks-content');
if (!currentUser) {
container.innerHTML = '<p style="color:#888;">Bitte anmelden um die Merkliste zu sehen.</p>';
return;
}
container.innerHTML = '<p style="color:#888;">Lade...</p>';
try {
const bookmarkIds = await fetch('/api/bookmarks').then(r => r.json());
if (bookmarkIds.length === 0) {
container.innerHTML = '<p style="color:#888;">Keine gemerkten Anträge. Klicke auf "🔖 Merken" bei einem Antrag.</p>';
return;
}
// Finde die Assessment-Daten für die gebookmarkten Drucksachen
const bookmarked = allAssessments.filter(a => bookmarkIds.includes(a.drucksache));
if (bookmarked.length === 0) {
container.innerHTML = '<p style="color:#888;">Gemerkte Anträge nicht in der aktuellen Auswahl gefunden. Wechsle zu "Bundesweit".</p>';
return;
}
container.innerHTML = bookmarked.map(item => {
const scoreClass = item.gwoeScore >= 8 ? 'score-high' : item.gwoeScore >= 5 ? 'score-mid' : item.gwoeScore >= 3 ? 'score-low' : 'score-negative';
const blBadge = item.bundesland ? `<span class="bl-badge">${item.bundesland}</span>` : '';
return `
<div class="list-item" onclick="showMode('browse'); setTimeout(() => showDetail('${item.drucksache}'), 100);" style="cursor:pointer;">
<div class="list-item-header">
<span class="list-item-id">${blBadge}${item.drucksache}</span>
<span class="list-item-score ${scoreClass}">${item.gwoeScore}/10</span>
</div>
<div class="list-item-title">${(item.title || '').substring(0, 80)}${(item.title || '').length > 80 ? '…' : ''}</div>
<div class="list-item-meta">${(item.fraktionen || []).join(', ')} · ${item.datum || ''}</div>
</div>`;
}).join('');
} catch (e) {
container.innerHTML = '<p style="color:#c00;">Fehler beim Laden der Merkliste.</p>';
}
}
// ─── Bookmarks + Comments (#94) ─────────────────────────────
async function toggleBookmark(drucksache, btn) {
const resp = await fetch('/api/bookmark', {
@ -1884,8 +1933,10 @@
}
document.getElementById('browse-mode').style.display = mode === 'browse' ? 'flex' : 'none';
document.getElementById('bookmarks-mode').style.display = mode === 'bookmarks' ? 'flex' : 'none';
document.getElementById('tags-mode').style.display = mode === 'tags' ? 'flex' : 'none';
document.getElementById('upload-mode').style.display = mode === 'upload' ? 'flex' : 'none';
if (mode === 'bookmarks') loadBookmarksList();
}
// Upload Tab Toggle