Aufgabenverwaltung angepasst, Eventseite weiter bearbeitet

bin/main/static/community/event-detail.html

@@ -195,6 +195,7 @@ function renderPage(evt) {
 
     const totalAttendees = (evt.attendees || []).length;
     const attending = evt.attendingMe;
+    const isPast = new Date(evt.startAt) < new Date();
 
     document.getElementById('content').innerHTML = `
         <div class="evt-header">
@@ -211,11 +212,13 @@ function renderPage(evt) {
                         <button class="btn" style="background:#c0392b;font-size:0.85rem;" onclick="openDeleteConfirm()">Löschen</button>
                     </div>` : ''}
                     <div style="display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;">
-                        <button class="btn" id="attendBtn"
-                            style="${attending ? 'background:var(--color-secondary);color:var(--color-text);' : ''}"
-                            onclick="toggleAttend()">
-                            ${attending ? '✓ Ich bin dabei' : '+ Ich bin dabei'}
-                        </button>
+                        ${isPast
+                            ? `<span style="color:var(--color-muted);font-size:0.85rem;">Veranstaltung bereits beendet</span>`
+                            : `<button class="btn" id="attendBtn"
+                                style="${attending ? 'background:var(--color-secondary);color:var(--color-text);' : ''}"
+                                onclick="toggleAttend()">
+                                ${attending ? '✓ Ich bin dabei' : '+ Ich bin dabei'}
+                               </button>`}
                         <span style="color:var(--color-muted);font-size:0.85rem;" id="attendCount">${totalAttendees} Teilnehmer*in(nen)</span>
                     </div>
                 </div>

bin/main/static/community/location-detail.html

@@ -445,6 +445,9 @@ function renderPage() {
             ${isOwner ? `<button class="btn" style="font-size:0.8rem;" onclick="openEventModal()">+ Veranstaltung erstellen</button>` : ''}
         </div>
         <div class="event-list" id="eventList"><p style="color:var(--color-muted);font-size:0.9rem;">Wird geladen…</p></div>
+        <div id="allEventsLinkWrap" style="display:none;margin-top:0.75rem;">
+            <a id="allEventsLink" href="#" class="btn" style="display:inline-block;font-size:0.85rem;background:var(--color-secondary);color:var(--color-text);text-decoration:none;padding:0.45rem 1rem;border-radius:6px;">Alle Events anzeigen →</a>
+        </div>
         <div id="pastEventsSection" style="display:none;">
             <div class="section-title" style="margin-top:1.5rem;">Vergangene Veranstaltungen</div>
             <div class="event-list" id="pastEventList"></div>
@@ -517,8 +520,8 @@ function renderPage() {
             ${locHeaderHtml}
             ${hoursHtml}
             ${gallerySection}
-            ${feedSection}
-            ${eventsSection}`;
+            ${eventsSection}
+            ${feedSection}`;
     }
 }
 
@@ -587,15 +590,27 @@ async function loadEvents() {
     if (!list) return;
 
     const now = new Date();
-    const future = events.filter(e => new Date(e.startAt) >= now);
+    const future = events.filter(e => new Date(e.startAt) >= now)
+                         .sort((a, b) => new Date(a.startAt) - new Date(b.startAt));
     const past   = events.filter(e => new Date(e.startAt) <  now)
-                         .slice(-5)          // letzte 5
+                         .slice(-3)          // letzte 3
                          .reverse();         // neueste zuerst
 
-    list.innerHTML = future.length
-        ? future.map(e => buildEventCard(e, false)).join('')
+    const preview = future.slice(0, 3);
+    list.innerHTML = preview.length
+        ? preview.map(e => buildEventCard(e, false)).join('')
         : '<p style="color:var(--color-muted);font-size:0.9rem;">Keine bevorstehenden Veranstaltungen.</p>';
 
+    const linkWrap = document.getElementById('allEventsLinkWrap');
+    if (linkWrap) {
+        if (future.length > 3) {
+            document.getElementById('allEventsLink').href = `/community/location-events.html?id=${locationId}`;
+            linkWrap.style.display = '';
+        } else {
+            linkWrap.style.display = 'none';
+        }
+    }
+
     const pastSection = document.getElementById('pastEventsSection');
     if (past.length && pastSection) {
         document.getElementById('pastEventList').innerHTML = past.map(e => buildEventCard(e, true)).join('');
@@ -1358,11 +1373,15 @@ function renderLocPost(p) {
             <button class="post-action-btn post-delete" onclick="event.stopPropagation();deleteLocPost('${p.postId}')" title="Löschen">🗑</button>
         </div>` : '';
 
+    const authorUrl = p.posterType === 'LOCATION'
+        ? `/community/location-detail.html?id=${p.locationId || p.authorId}`
+        : `/community/benutzer.html?userId=${p.authorId}`;
+
     return `<div class="post-card${clickableClass}" id="lp-${p.postId}"${onClickAttr}>
         <div class="post-header">
-            <div class="post-avatar">${avHtml}</div>
+            <div class="post-avatar"><a href="${authorUrl}" onclick="event.stopPropagation()" style="display:contents;">${avHtml}</a></div>
             <div>
-                <div class="post-author">${escHtml(p.authorName || p.locationName || '')}</div>
+                <div class="post-author"><a href="${authorUrl}" style="color:inherit;text-decoration:none;" onclick="event.stopPropagation()">${escHtml(p.authorName || p.locationName || '')}</a></div>
                 <div class="post-meta">${dateStr}${editedHtml}</div>
             </div>
             ${adminBtns}
@@ -1401,11 +1420,15 @@ function openLpLb(postId) {
         + ' ' + new Date(p.createdAt).toLocaleTimeString('de-DE', { hour:'2-digit', minute:'2-digit' });
     const editedHtml = p.editedAt ? ' <span style="font-size:0.7rem;color:var(--color-muted);">(bearbeitet)</span>' : '';
 
+    const lbAuthorUrl = p.posterType === 'LOCATION'
+        ? `/community/location-detail.html?id=${p.locationId || p.authorId}`
+        : `/community/benutzer.html?userId=${p.authorId}`;
+
     document.getElementById('lbPostBody').innerHTML = `
         <div class="post-header">
-            <div class="post-avatar">${avHtml}</div>
+            <div class="post-avatar"><a href="${lbAuthorUrl}" style="display:contents;">${avHtml}</a></div>
             <div>
-                <div class="post-author">${escHtml(p.authorName || p.locationName || '')}</div>
+                <div class="post-author"><a href="${lbAuthorUrl}" style="color:inherit;text-decoration:none;">${escHtml(p.authorName || p.locationName || '')}</a></div>
                 <div class="post-meta">${dateStr}${editedHtml}</div>
             </div>
         </div>

bin/main/static/community/location-events.html

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/img/icon.png" type="image/png">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alle Events – xXx Sphere</title>
+    <link rel="stylesheet" href="/css/variables.css">
+    <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/community.css">
+    <style>
+        .back-link { display:inline-flex; align-items:center; gap:0.35rem; color:var(--color-muted); font-size:0.88rem; text-decoration:none; margin-bottom:1rem; }
+        .back-link:hover { color:var(--color-primary); }
+
+        .page-title { font-size:1.15rem; font-weight:700; margin:0 0 1.25rem; }
+
+        .event-list { display:flex; flex-direction:column; gap:0.75rem; }
+        .event-card { background:var(--color-card); border:1px solid var(--color-secondary); border-radius:10px; display:flex; gap:0.75rem; padding:0.75rem; text-decoration:none; color:inherit; transition:border-color 0.15s; cursor:pointer; }
+        .event-card:hover { border-color:var(--color-primary); }
+        .event-card-img { width:64px; height:64px; border-radius:8px; object-fit:cover; background:var(--color-secondary); flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
+        .event-card-img img { width:100%; height:100%; object-fit:cover; }
+        .event-card-body { flex:1; min-width:0; }
+        .event-card-title { font-weight:600; font-size:0.92rem; margin:0 0 0.2rem; }
+        .event-card-date { font-size:0.78rem; color:var(--color-muted); }
+        .event-card-attendees { font-size:0.78rem; color:var(--color-muted); }
+
+        .paging-bar { display:flex; align-items:center; justify-content:center; gap:0.75rem; margin-top:1.25rem; flex-wrap:wrap; }
+        .paging-bar button { background:var(--color-secondary); border:none; color:var(--color-text); padding:0.45rem 1rem; border-radius:6px; font-size:0.88rem; cursor:pointer; transition:background 0.15s; }
+        .paging-bar button:hover:not(:disabled) { background:var(--color-primary); color:#fff; }
+        .paging-bar button:disabled { opacity:0.4; cursor:default; }
+        .paging-info { font-size:0.85rem; color:var(--color-muted); }
+
+        .empty-hint { color:var(--color-muted); font-size:0.9rem; }
+    </style>
+</head>
+<body class="app">
+
+<div class="main">
+    <div class="content">
+
+        <a class="back-link" id="backLink" href="#">‹ Zurück zur Location</a>
+
+        <div id="locName" class="page-title">Alle Events</div>
+
+        <div id="eventList" class="event-list">
+            <p class="empty-hint">Wird geladen…</p>
+        </div>
+
+        <div class="paging-bar" id="pagingBar" style="display:none;">
+            <button id="prevBtn" onclick="changePage(-1)" disabled>‹ Zurück</button>
+            <span class="paging-info" id="pagingInfo"></span>
+            <button id="nextBtn" onclick="changePage(1)">Weiter ›</button>
+        </div>
+
+    </div>
+</div>
+
+<script src="/js/nav.js"></script>
+<script>
+    const PAGE_SIZE = 10;
+    const params = new URLSearchParams(location.search);
+    const locationId = params.get('id');
+
+    let allEvents = [];
+    let currentPage = 0;
+
+    document.getElementById('backLink').href = `/community/location-detail.html?id=${locationId}`;
+
+    function escHtml(s) {
+        if (!s) return '';
+        return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
+    }
+
+    function formatDate(iso) {
+        if (!iso) return '';
+        const d = new Date(iso);
+        return d.toLocaleDateString('de-DE', { weekday:'short', day:'2-digit', month:'2-digit', year:'numeric' })
+             + ' ' + d.toLocaleTimeString('de-DE', { hour:'2-digit', minute:'2-digit' }) + ' Uhr';
+    }
+
+    function buildEventCard(e) {
+        const imgHtml = e.imageData
+            ? `<img src="data:image/jpeg;base64,${e.imageData}" alt="${escHtml(e.title)}">`
+            : '🗓';
+        return `
+            <a class="event-card" href="/community/event-detail.html?id=${e.eventId}">
+                <div class="event-card-img">${imgHtml}</div>
+                <div class="event-card-body">
+                    <div class="event-card-title">${escHtml(e.title)}</div>
+                    <div class="event-card-date">${formatDate(e.startAt)}</div>
+                    <div class="event-card-attendees">${e.attendeeCount} Teilnehmer*in(nen)${e.attendingMe ? ' · Du nimmst teil' : ''}</div>
+                </div>
+            </a>`;
+    }
+
+    function renderPage() {
+        const list = document.getElementById('eventList');
+        const totalPages = Math.ceil(allEvents.length / PAGE_SIZE);
+        const start = currentPage * PAGE_SIZE;
+        const slice = allEvents.slice(start, start + PAGE_SIZE);
+
+        list.innerHTML = slice.length
+            ? slice.map(buildEventCard).join('')
+            : '<p class="empty-hint">Keine weiteren Veranstaltungen.</p>';
+
+        const pagingBar = document.getElementById('pagingBar');
+        if (allEvents.length > PAGE_SIZE) {
+            pagingBar.style.display = '';
+            document.getElementById('prevBtn').disabled = currentPage === 0;
+            document.getElementById('nextBtn').disabled = currentPage >= totalPages - 1;
+            document.getElementById('pagingInfo').textContent =
+                `Seite ${currentPage + 1} von ${totalPages} (${allEvents.length} Events)`;
+        } else {
+            pagingBar.style.display = 'none';
+        }
+    }
+
+    function changePage(dir) {
+        const totalPages = Math.ceil(allEvents.length / PAGE_SIZE);
+        const next = currentPage + dir;
+        if (next < 0 || next >= totalPages) return;
+        currentPage = next;
+        renderPage();
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+
+    async function init() {
+        if (!locationId) {
+            document.getElementById('eventList').innerHTML = '<p class="empty-hint">Keine Location-ID angegeben.</p>';
+            return;
+        }
+
+        // Locationname laden
+        const locRes = await fetch(`/locations/${locationId}`);
+        if (locRes.ok) {
+            const loc = await locRes.json();
+            document.getElementById('locName').textContent = `Alle Events – ${loc.name}`;
+            document.title = `Events – ${loc.name} – xXx Sphere`;
+        }
+
+        // Events laden
+        const res = await fetch(`/locations/${locationId}/events`);
+        if (!res.ok) {
+            document.getElementById('eventList').innerHTML = '<p class="empty-hint">Events konnten nicht geladen werden.</p>';
+            return;
+        }
+        const events = await res.json();
+        const now = new Date();
+        allEvents = events
+            .filter(e => new Date(e.startAt) >= now)
+            .sort((a, b) => new Date(a.startAt) - new Date(b.startAt));
+
+        if (allEvents.length === 0) {
+            document.getElementById('eventList').innerHTML = '<p class="empty-hint">Keine bevorstehenden Veranstaltungen.</p>';
+            return;
+        }
+
+        renderPage();
+    }
+
+    init();
+</script>
+</body>
+</html>