Social Features weiterentwickelt
This commit is contained in:
File diff suppressed because it is too large
Load Diff
655
xxxthegame/src/main/resources/static/feed.html
Normal file
655
xxxthegame/src/main/resources/static/feed.html
Normal file
@@ -0,0 +1,655 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Feed – XXX The Game</title>
|
||||
<link rel="stylesheet" href="/css/variables.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<style>
|
||||
.tabs { display:flex; gap:0; margin-bottom:1.5rem; border-bottom:1px solid var(--color-secondary); }
|
||||
.tab-btn { background:none; border:none; border-bottom:3px solid transparent; border-radius:0; padding:0.6rem 1.25rem; font-size:0.95rem; font-weight:600; color:var(--color-muted); cursor:pointer; margin-bottom:-1px; transition:color 0.15s,border-color 0.15s; }
|
||||
.tab-btn:hover { color:var(--color-text); background:none; }
|
||||
.tab-btn.active { color:var(--color-primary); border-bottom-color:var(--color-primary); }
|
||||
.tab-panel { display:none; }
|
||||
.tab-panel.active { display:block; }
|
||||
|
||||
.post-compose { background:var(--color-card); border:1px solid var(--color-secondary); border-radius:10px; padding:1rem; margin-bottom:1rem; transition:border-color 0.15s; }
|
||||
.post-compose.drag-over { border-color:var(--color-primary); background:rgba(var(--color-primary-rgb,180,0,60),0.06); }
|
||||
.compose-type { display:flex; gap:1.5rem; margin-bottom:0.75rem; }
|
||||
.compose-type label { display:flex; align-items:center; gap:0.4rem; font-size:0.9rem; cursor:pointer; }
|
||||
.post-compose textarea { width:100%; padding:0.6rem 0.85rem; border:1px solid var(--color-secondary); border-radius:6px; background:var(--color-secondary); color:var(--color-text); font-size:0.95rem; outline:none; transition:border-color 0.2s; resize:vertical; min-height:70px; box-sizing:border-box; }
|
||||
.post-compose textarea:focus { border-color:var(--color-primary); }
|
||||
.compose-thumbs { display:none; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem; }
|
||||
.compose-thumb { position:relative; width:64px; height:64px; flex-shrink:0; }
|
||||
.compose-thumb img { width:64px; height:64px; object-fit:cover; border-radius:6px; display:block; }
|
||||
.compose-thumb-remove { position:absolute; top:-5px; right:-5px; background:rgba(0,0,0,0.7); border:none; color:#fff; width:18px; height:18px; border-radius:50%; font-size:0.65rem; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; margin:0; width:auto; line-height:1; }
|
||||
.umfrage-options { margin-top:0.5rem; }
|
||||
.umfrage-option-row { display:flex; gap:0.5rem; margin-bottom:0.4rem; }
|
||||
.umfrage-option-row input { flex:1; }
|
||||
.umfrage-option-row button { width:auto; margin:0; padding:0.3rem 0.6rem; font-size:0.8rem; }
|
||||
.compose-footer { display:flex; justify-content:space-between; align-items:center; margin-top:0.75rem; flex-wrap:wrap; gap:0.5rem; }
|
||||
.multi-toggle { font-size:0.85rem; display:flex; align-items:center; gap:0.4rem; }
|
||||
.privacy-toggle { font-size:0.85rem; display:flex; align-items:center; gap:0.4rem; }
|
||||
.compose-action-btn { background:none; border:1px solid var(--color-secondary); color:var(--color-muted); border-radius:6px; padding:0.35rem 0.6rem; font-size:0.95rem; cursor:pointer; margin:0; width:auto; transition:border-color 0.15s,color 0.15s; }
|
||||
.compose-action-btn:hover { border-color:var(--color-primary); color:var(--color-primary); background:none; }
|
||||
label.compose-action-btn { display:inline-flex; align-items:center; }
|
||||
|
||||
.post-card { background:var(--color-card); border:1px solid var(--color-secondary); border-radius:10px; padding:1rem; margin-bottom:0.9rem; }
|
||||
.post-header { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.6rem; }
|
||||
.post-avatar { width:36px; height:36px; border-radius:50%; background:var(--color-secondary); display:flex; align-items:center; justify-content:center; font-size:0.95rem; flex-shrink:0; overflow:hidden; }
|
||||
.post-avatar img { width:100%; height:100%; object-fit:cover; }
|
||||
.post-author { font-weight:600; font-size:0.9rem; }
|
||||
.post-meta { font-size:0.75rem; color:var(--color-muted); }
|
||||
.post-date { font-size:0.75rem; color:var(--color-muted); margin-left:auto; }
|
||||
.post-text { font-size:0.95rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
|
||||
.post-bild { width:100%; max-height:400px; object-fit:contain; border-radius:6px; margin-top:0.5rem; display:block; }
|
||||
.post-actions { display:flex; gap:1rem; margin-top:0.75rem; align-items:center; flex-wrap:wrap; }
|
||||
.post-action-btn { background:none; border:none; color:var(--color-muted); cursor:pointer; font-size:0.85rem; padding:0; display:flex; align-items:center; gap:0.3rem; margin:0; width:auto; }
|
||||
.post-action-btn:hover { color:var(--color-primary); background:none; }
|
||||
.post-action-btn.active { color:var(--color-primary); }
|
||||
.post-delete { margin-left:auto; }
|
||||
.post-delete:hover { color:#c0392b !important; }
|
||||
|
||||
/* Carousel */
|
||||
.post-carousel { position:relative; margin-top:0.5rem; }
|
||||
.car-slide { display:none; }
|
||||
.car-slide.active { display:block; }
|
||||
.car-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.55); border:none; color:#fff; font-size:2.2rem; width:auto; min-width:2.4rem; height:3.2rem; border-radius:8px; cursor:pointer; z-index:5; display:flex; align-items:center; justify-content:center; padding:0 0.5rem; margin:0; line-height:1; }
|
||||
.car-prev { left:0.3rem; }
|
||||
.car-next { right:0.3rem; }
|
||||
.car-indicator { text-align:center; font-size:0.75rem; color:var(--color-muted); margin-top:0.25rem; }
|
||||
|
||||
.umfrage-option-bar { margin:0.3rem 0; cursor:pointer; border-radius:6px; overflow:hidden; border:1px solid var(--color-secondary); position:relative; transition:border-color 0.15s; }
|
||||
.umfrage-option-bar:hover { border-color:var(--color-primary); }
|
||||
.umfrage-option-bar.voted { border-color:var(--color-primary); }
|
||||
.umfrage-bar-fill { position:absolute; inset:0; background:rgba(var(--color-primary-rgb,180,0,60),0.15); transition:width 0.4s; }
|
||||
.umfrage-bar-content { position:relative; display:flex; justify-content:space-between; padding:0.45rem 0.75rem; font-size:0.88rem; }
|
||||
.umfrage-total { font-size:0.78rem; color:var(--color-muted); margin-top:0.3rem; }
|
||||
|
||||
.gruppe-badge { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.75rem; color:var(--color-muted); background:var(--color-secondary); border-radius:4px; padding:0.15rem 0.45rem; margin-top:0.1rem; }
|
||||
.gruppe-badge a { color:inherit; text-decoration:none; }
|
||||
.gruppe-badge a:hover { color:var(--color-primary); }
|
||||
|
||||
.empty-hint { color:var(--color-muted); font-size:0.9rem; margin-top:0.5rem; }
|
||||
.sentinel { height:1px; }
|
||||
|
||||
/* Lightbox */
|
||||
.lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:300; align-items:center; justify-content:center; }
|
||||
.lightbox.open { display:flex; }
|
||||
.lb-layout { display:flex; max-width:920px; width:95vw; max-height:90vh; background:var(--color-card); border-radius:12px; overflow:hidden; position:relative; }
|
||||
.lb-close { position:absolute; top:0.6rem; right:0.6rem; background:rgba(0,0,0,0.55); border:none; color:#fff; font-size:1.1rem; width:2rem; height:2rem; border-radius:50%; cursor:pointer; z-index:10; display:flex; align-items:center; justify-content:center; padding:0; margin:0; }
|
||||
.lb-post-side { flex:1; overflow-y:auto; padding:1.25rem; border-right:1px solid var(--color-secondary); min-width:0; }
|
||||
.lb-comments-panel { width:300px; flex-shrink:0; display:flex; flex-direction:column; }
|
||||
.lb-comments-header { font-size:0.78rem; font-weight:600; color:var(--color-muted); text-transform:uppercase; letter-spacing:0.06em; padding:0.7rem 1rem; border-bottom:1px solid var(--color-secondary); flex-shrink:0; }
|
||||
.lb-comments-list { flex:1; overflow-y:auto; padding:0.75rem; }
|
||||
.lb-comment-compose { padding:0.75rem; border-top:1px solid var(--color-secondary); display:flex; gap:0.5rem; flex-shrink:0; align-items:center; }
|
||||
.lb-comment-compose input { flex:1; font-size:0.85rem; padding:0.35rem 0.6rem; height:auto; }
|
||||
.lb-comment-compose button { width:auto; margin:0; padding:0.35rem 0.75rem; font-size:0.8rem; }
|
||||
@media (max-width:650px) { .lb-layout { flex-direction:column; max-height:95vh; } .lb-post-side { border-right:none; border-bottom:1px solid var(--color-secondary); max-height:55vh; } .lb-comments-panel { width:100%; } }
|
||||
|
||||
.comment-item { display:flex; gap:0.5rem; margin-bottom:0.5rem; }
|
||||
.comment-avatar { width:28px; height:28px; border-radius:50%; background:var(--color-secondary); display:flex; align-items:center; justify-content:center; font-size:0.75rem; flex-shrink:0; overflow:hidden; }
|
||||
.comment-avatar img { width:100%; height:100%; object-fit:cover; }
|
||||
.comment-body { flex:1; background:rgba(255,255,255,0.04); border-radius:6px; padding:0.5rem 0.65rem; }
|
||||
.comment-author { font-size:0.8rem; font-weight:600; }
|
||||
.comment-text { font-size:0.85rem; white-space:pre-wrap; word-break:break-word; margin-top:0.2rem; }
|
||||
.comment-date { font-size:0.72rem; color:var(--color-muted); margin-left:0.4rem; }
|
||||
.comment-actions { display:flex; gap:0.4rem; margin-top:0.3rem; align-items:center; }
|
||||
.btn-like { background:none; border:1px solid rgba(255,255,255,0.15); border-radius:20px; padding:0.2rem 0.65rem; color:var(--color-muted); font-size:0.78rem; cursor:pointer; display:inline-flex; align-items:center; gap:0.3rem; margin:0; width:auto; transition:border-color 0.15s, color 0.15s; }
|
||||
.btn-like:hover, .btn-like.liked { border-color:var(--color-primary); color:var(--color-primary); }
|
||||
.btn-delete-small { background:none; border:none; color:rgba(200,50,50,0.6); font-size:0.78rem; cursor:pointer; margin:0; width:auto; padding:0; }
|
||||
.btn-delete-small:hover { color:var(--color-primary); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" id="tabMine" onclick="switchTab('mine', this)">Mein Feed</button>
|
||||
<button class="tab-btn" id="tabPublic" onclick="switchTab('public', this)">Öffentlicher Feed</button>
|
||||
</div>
|
||||
|
||||
<!-- Mein Feed -->
|
||||
<div class="tab-panel active" id="tab-mine">
|
||||
<div class="post-compose" id="compose">
|
||||
<div class="compose-type">
|
||||
<label><input type="radio" name="beitragTyp" value="TEXT" checked onchange="toggleUmfrage()"> Text</label>
|
||||
<label><input type="radio" name="beitragTyp" value="UMFRAGE" onchange="toggleUmfrage()"> Umfrage</label>
|
||||
</div>
|
||||
<textarea id="composeText" placeholder="Was möchtest du teilen?" rows="3"></textarea>
|
||||
<div class="compose-thumbs" id="composeThumbs"></div>
|
||||
<div class="umfrage-options" id="umfrageOptions" style="display:none;">
|
||||
<div id="optionList"></div>
|
||||
<button onclick="addOption()" style="width:auto; margin:0; padding:0.3rem 0.75rem; font-size:0.8rem; margin-top:0.4rem;">+ Option</button>
|
||||
</div>
|
||||
<div class="compose-footer">
|
||||
<div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
|
||||
<label class="multi-toggle" id="multiChoiceRow" style="display:none;">
|
||||
<input type="checkbox" id="multiChoice"> Multi-Choice
|
||||
</label>
|
||||
<label class="privacy-toggle">
|
||||
<input type="checkbox" id="isPublic"> Öffentlich
|
||||
</label>
|
||||
</div>
|
||||
<div style="display:flex;gap:0.5rem;align-items:center;">
|
||||
<button type="button" class="compose-action-btn" onclick="toggleEmojiPicker(this,'composeText')" title="Emoji einfügen">😊</button>
|
||||
<label class="compose-action-btn" title="Fotos hinzufügen">📷
|
||||
<input type="file" id="composeBildFile" accept="image/*" multiple style="display:none;" onchange="selectComposeBilder(this)">
|
||||
</label>
|
||||
<button onclick="submitPost()" style="width:auto; margin:0;">Veröffentlichen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mineFeed"></div>
|
||||
<p class="empty-hint" id="mineEmpty" style="display:none;">Noch keine Beiträge. Schreib den ersten!</p>
|
||||
<div class="sentinel" id="mineSentinel"></div>
|
||||
</div>
|
||||
|
||||
<!-- Öffentlicher Feed -->
|
||||
<div class="tab-panel" id="tab-public">
|
||||
<div id="publicFeed"></div>
|
||||
<p class="empty-hint" id="publicEmpty" style="display:none;">Noch keine öffentlichen Beiträge.</p>
|
||||
<div class="sentinel" id="publicSentinel"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Post Lightbox -->
|
||||
<div class="lightbox" id="postLightbox">
|
||||
<div class="lb-layout">
|
||||
<button class="lb-close" onclick="closeLb()">✕</button>
|
||||
<div class="lb-post-side" id="lbPostBody"></div>
|
||||
<div class="lb-comments-panel">
|
||||
<div class="lb-comments-header">Kommentare</div>
|
||||
<div class="lb-comments-list" id="lbCommentsList"></div>
|
||||
<div class="lb-comment-compose">
|
||||
<input type="text" id="lbCommentInput" placeholder="Kommentar schreiben…" maxlength="500"
|
||||
onkeydown="if(event.key==='Enter') postLbComment()">
|
||||
<button type="button" class="compose-action-btn" onclick="toggleEmojiPicker(this,'lbCommentInput')" title="Emoji">😊</button>
|
||||
<button onclick="postLbComment()">Senden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/sidebar.js"></script>
|
||||
<script src="/js/social-sidebar.js"></script>
|
||||
<script>
|
||||
// ── State ──
|
||||
let myUserId = null;
|
||||
let activeLbPostId = null;
|
||||
let activeLbPostType = null;
|
||||
|
||||
const feedState = {
|
||||
mine: { page:0, hasMore:true, loading:false, loaded:false },
|
||||
public: { page:0, hasMore:true, loading:false, loaded:false }
|
||||
};
|
||||
|
||||
let composeBilderArr = [];
|
||||
|
||||
// ── Boot ──
|
||||
fetch('/login/me').then(r => r.ok ? r.json() : null).then(user => {
|
||||
if (user) {
|
||||
myUserId = user.userId;
|
||||
loadFeed('mine');
|
||||
}
|
||||
}).catch(() => {});
|
||||
|
||||
// ── Tab switching ──
|
||||
function switchTab(name, btn) {
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
||||
document.getElementById('tab-' + name).classList.add('active');
|
||||
if (!feedState[name].loaded) loadFeed(name);
|
||||
}
|
||||
|
||||
// ── Feed loading ──
|
||||
async function loadFeed(tab) {
|
||||
const state = feedState[tab];
|
||||
if (state.loading || !state.hasMore) return;
|
||||
state.loading = true;
|
||||
state.loaded = true;
|
||||
try {
|
||||
const endpoint = tab === 'mine' ? '/feed/mine' : '/feed/public';
|
||||
const res = await fetch(`${endpoint}?page=${state.page}&size=10`);
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
const feedEl = document.getElementById(tab + 'Feed');
|
||||
if (state.page === 0 && data.posts.length === 0) {
|
||||
document.getElementById(tab + 'Empty').style.display = '';
|
||||
}
|
||||
data.posts.forEach(p => feedEl.insertAdjacentHTML('beforeend', renderPostCard(p, tab)));
|
||||
state.hasMore = data.hasMore;
|
||||
state.page++;
|
||||
} finally {
|
||||
state.loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Infinite Scroll ──
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(e => {
|
||||
if (!e.isIntersecting) return;
|
||||
if (e.target.id === 'mineSentinel') loadFeed('mine');
|
||||
if (e.target.id === 'publicSentinel') loadFeed('public');
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
observer.observe(document.getElementById('mineSentinel'));
|
||||
observer.observe(document.getElementById('publicSentinel'));
|
||||
|
||||
// ── Carousel ──
|
||||
function bilderCarousel(bilder, postId) {
|
||||
if (!bilder || bilder.length === 0) return '';
|
||||
if (bilder.length === 1) {
|
||||
return `<div style="margin-top:0.5rem;"><img class="post-bild" src="data:image/jpeg;base64,${bilder[0]}" alt=""></div>`;
|
||||
}
|
||||
const slides = bilder.map((b, i) =>
|
||||
`<div class="car-slide${i === 0 ? ' active' : ''}"><img class="post-bild" src="data:image/jpeg;base64,${b}" alt=""></div>`
|
||||
).join('');
|
||||
return `<div class="post-carousel">
|
||||
${slides}
|
||||
<button class="car-btn car-prev" onclick="event.stopPropagation();carNav(this,-1)">‹</button>
|
||||
<button class="car-btn car-next" onclick="event.stopPropagation();carNav(this,1)">›</button>
|
||||
<div class="car-indicator"><span class="car-cur">1</span>/${bilder.length}</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function carNav(btn, dir) {
|
||||
const car = btn.closest('.post-carousel');
|
||||
const slides = Array.from(car.querySelectorAll('.car-slide'));
|
||||
const cur = slides.findIndex(s => s.classList.contains('active'));
|
||||
slides[cur].classList.remove('active');
|
||||
const next = (cur + dir + slides.length) % slides.length;
|
||||
slides[next].classList.add('active');
|
||||
const ind = car.querySelector('.car-cur');
|
||||
if (ind) ind.textContent = next + 1;
|
||||
}
|
||||
|
||||
// ── Render post card ──
|
||||
function renderPostCard(p, tab) {
|
||||
const avatarHtml = p.authorPicture
|
||||
? `<img src="data:image/png;base64,${p.authorPicture}" alt="">`
|
||||
: '◉';
|
||||
const privacyLabel = !p.isPublic ? ' <span style="font-size:0.7rem;color:var(--color-muted);">🔒</span>' : '';
|
||||
const groupBadge = p.postType === 'GROUP' && p.gruppeId
|
||||
? `<span class="gruppe-badge" onclick="event.stopPropagation()">👥 <a href="/gruppe.html?id=${p.gruppeId}" onclick="event.stopPropagation()">${esc(p.gruppeName)}</a></span>`
|
||||
: '';
|
||||
const bildHtml = bilderCarousel(p.bilder, p.postId);
|
||||
|
||||
let umfrageHtml = '';
|
||||
if (p.beitragTyp === 'UMFRAGE' && p.optionen && p.optionen.length > 0) {
|
||||
const totalVotes = p.optionen.reduce((s, o) => s + o.stimmenCount, 0);
|
||||
umfrageHtml = '<div style="margin-top:0.5rem;">' + p.optionen.map(o => {
|
||||
const pct = totalVotes > 0 ? Math.round(o.stimmenCount / totalVotes * 100) : 0;
|
||||
const voted = p.myVoteOptionIds && p.myVoteOptionIds.includes(o.optionId);
|
||||
return `<div class="umfrage-option-bar${voted ? ' voted' : ''}" onclick="event.stopPropagation(); votePost('${p.postId}','${o.optionId}','${tab}','${p.postType}')">
|
||||
<div class="umfrage-bar-fill" style="width:${pct}%"></div>
|
||||
<div class="umfrage-bar-content"><span>${esc(o.text)}</span><span>${pct}%</span></div>
|
||||
</div>`;
|
||||
}).join('') + `<div class="umfrage-total">${totalVotes} Stimme${totalVotes !== 1 ? 'n' : ''}</div></div>`;
|
||||
}
|
||||
|
||||
const canDelete = p.postType === 'FEED' && p.authorId === myUserId;
|
||||
const deleteBtn = canDelete
|
||||
? `<button class="post-action-btn post-delete" onclick="event.stopPropagation(); deletePost('${p.postId}')">🗑</button>`
|
||||
: '';
|
||||
|
||||
const gruppeIdAttr = p.gruppeId ? ` data-gruppe-id="${p.gruppeId}"` : '';
|
||||
return `<div class="post-card" id="pc-${p.postId}"${gruppeIdAttr} onclick="openLb('${p.postId}','${p.postType}')" style="cursor:pointer;">
|
||||
<div class="post-header">
|
||||
<div class="post-avatar">${avatarHtml}</div>
|
||||
<div>
|
||||
<div class="post-author"><a href="/benutzer.html?userId=${p.authorId}" style="color:inherit;text-decoration:none;" onclick="event.stopPropagation()">${esc(p.authorName)}</a>${privacyLabel}</div>
|
||||
<div class="post-meta">${fmtDate(p.createdAt)}${groupBadge}</div>
|
||||
</div>
|
||||
${deleteBtn}
|
||||
</div>
|
||||
<div class="post-text">${esc(p.text)}</div>
|
||||
${bildHtml}
|
||||
${umfrageHtml}
|
||||
<div class="post-actions">
|
||||
<button class="post-action-btn${p.likedByMe ? ' active' : ''}" id="lk-${p.postId}" onclick="event.stopPropagation(); likePost('${p.postId}','${p.postType}')">
|
||||
♥ <span id="lkc-${p.postId}">${p.likeCount}</span>
|
||||
</button>
|
||||
<button class="post-action-btn" onclick="event.stopPropagation(); openLb('${p.postId}','${p.postType}')">
|
||||
💬 <span id="kc-${p.postId}">${p.kommentarCount}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// ── Compose ──
|
||||
function toggleUmfrage() {
|
||||
const isUmfrage = document.querySelector('input[name="beitragTyp"]:checked').value === 'UMFRAGE';
|
||||
document.getElementById('umfrageOptions').style.display = isUmfrage ? '' : 'none';
|
||||
document.getElementById('multiChoiceRow').style.display = isUmfrage ? '' : 'none';
|
||||
if (isUmfrage && document.getElementById('optionList').children.length === 0) {
|
||||
addOption(); addOption();
|
||||
}
|
||||
}
|
||||
|
||||
function addOption() {
|
||||
const list = document.getElementById('optionList');
|
||||
const idx = list.children.length;
|
||||
const row = document.createElement('div');
|
||||
row.className = 'umfrage-option-row';
|
||||
row.innerHTML = `<input type="text" placeholder="Option ${idx + 1}" maxlength="100">
|
||||
<button onclick="this.parentElement.remove()">✕</button>`;
|
||||
list.appendChild(row);
|
||||
}
|
||||
|
||||
function selectComposeBilder(input) {
|
||||
[...input.files].forEach(f => { if (f.type.startsWith('image/')) processImageFile(f); });
|
||||
input.value = '';
|
||||
}
|
||||
|
||||
function processImageFile(file) {
|
||||
if (!file || !file.type.startsWith('image/')) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
const maxSize = 1024;
|
||||
const canvas = document.createElement('canvas');
|
||||
const scale = Math.min(maxSize / img.width, maxSize / img.height, 1);
|
||||
canvas.width = Math.round(img.width * scale);
|
||||
canvas.height = Math.round(img.height * scale);
|
||||
canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
|
||||
const data = canvas.toDataURL('image/jpeg', 0.85).split(',')[1];
|
||||
composeBilderArr.push(data);
|
||||
renderComposeThumbs();
|
||||
};
|
||||
img.src = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
function renderComposeThumbs() {
|
||||
const container = document.getElementById('composeThumbs');
|
||||
container.innerHTML = '';
|
||||
composeBilderArr.forEach((b, i) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'compose-thumb';
|
||||
div.innerHTML = `<img src="data:image/jpeg;base64,${b}" alt="">
|
||||
<button class="compose-thumb-remove" onclick="removeThumb(${i})" title="Entfernen">✕</button>`;
|
||||
container.appendChild(div);
|
||||
});
|
||||
container.style.display = composeBilderArr.length > 0 ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
function removeThumb(idx) {
|
||||
composeBilderArr.splice(idx, 1);
|
||||
renderComposeThumbs();
|
||||
}
|
||||
|
||||
// ── Drag & Drop ──
|
||||
const compose = document.getElementById('compose');
|
||||
compose.addEventListener('dragover', e => {
|
||||
e.preventDefault();
|
||||
if ([...e.dataTransfer.items].some(i => i.type.startsWith('image/')))
|
||||
compose.classList.add('drag-over');
|
||||
});
|
||||
compose.addEventListener('dragleave', e => {
|
||||
if (!compose.contains(e.relatedTarget)) compose.classList.remove('drag-over');
|
||||
});
|
||||
compose.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
compose.classList.remove('drag-over');
|
||||
[...e.dataTransfer.files]
|
||||
.filter(f => f.type.startsWith('image/'))
|
||||
.forEach(f => processImageFile(f));
|
||||
});
|
||||
|
||||
async function submitPost() {
|
||||
const text = document.getElementById('composeText').value.trim();
|
||||
if (!text) return;
|
||||
const beitragTyp = document.querySelector('input[name="beitragTyp"]:checked').value;
|
||||
const multiChoice = document.getElementById('multiChoice').checked;
|
||||
const isPublic = document.getElementById('isPublic').checked;
|
||||
|
||||
let optionen = [];
|
||||
if (beitragTyp === 'UMFRAGE') {
|
||||
optionen = Array.from(document.getElementById('optionList').querySelectorAll('input'))
|
||||
.map(i => i.value.trim()).filter(v => v);
|
||||
if (optionen.length < 2) { alert('Mindestens 2 Optionen erforderlich.'); return; }
|
||||
}
|
||||
|
||||
const res = await fetch('/feed/posts', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ beitragTyp, text, multiChoice, optionen, bilder: [...composeBilderArr], isPublic })
|
||||
});
|
||||
if (!res.ok) return;
|
||||
const post = await res.json();
|
||||
|
||||
// Reset compose
|
||||
document.getElementById('composeText').value = '';
|
||||
composeBilderArr = [];
|
||||
renderComposeThumbs();
|
||||
document.querySelector('input[name="beitragTyp"][value="TEXT"]').checked = true;
|
||||
toggleUmfrage();
|
||||
document.getElementById('multiChoice').checked = false;
|
||||
document.getElementById('isPublic').checked = false;
|
||||
document.getElementById('optionList').innerHTML = '';
|
||||
|
||||
// Prepend to mine feed
|
||||
document.getElementById('mineEmpty').style.display = 'none';
|
||||
document.getElementById('mineFeed').insertAdjacentHTML('afterbegin', renderPostCard(post, 'mine'));
|
||||
|
||||
if (isPublic) {
|
||||
document.getElementById('publicEmpty').style.display = 'none';
|
||||
document.getElementById('publicFeed').insertAdjacentHTML('afterbegin', renderPostCard(post, 'public'));
|
||||
}
|
||||
}
|
||||
|
||||
// ── Like ──
|
||||
async function likePost(postId, postType) {
|
||||
let likeEndpoint;
|
||||
if (postType === 'GROUP') {
|
||||
const card = document.getElementById('pc-' + postId);
|
||||
const gruppeId = card?.dataset?.gruppeId;
|
||||
if (!gruppeId) return;
|
||||
likeEndpoint = `/gruppen/${gruppeId}/posts/${postId}/like`;
|
||||
} else {
|
||||
likeEndpoint = `/feed/posts/${postId}/like`;
|
||||
}
|
||||
await fetch(likeEndpoint, { method: 'POST' });
|
||||
const btn = document.getElementById('lk-' + postId);
|
||||
const lc = document.getElementById('lkc-' + postId);
|
||||
const was = btn.classList.contains('active');
|
||||
btn.classList.toggle('active', !was);
|
||||
lc.textContent = parseInt(lc.textContent) + (was ? -1 : 1);
|
||||
}
|
||||
|
||||
// ── Vote ──
|
||||
async function votePost(postId, optionId, tab, postType) {
|
||||
if (postType === 'GROUP') {
|
||||
const card = document.getElementById('pc-' + postId);
|
||||
const gruppeId = card?.dataset?.gruppeId;
|
||||
if (!gruppeId) return;
|
||||
await fetch(`/gruppen/${gruppeId}/posts/${postId}/vote`, {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ optionId })
|
||||
});
|
||||
} else {
|
||||
await fetch('/feed/posts/' + postId + '/vote', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ optionId })
|
||||
});
|
||||
}
|
||||
reloadPost(postId, tab);
|
||||
}
|
||||
|
||||
async function reloadPost(postId, tab) {
|
||||
const state = feedState[tab];
|
||||
state.page = 0; state.hasMore = true; state.loaded = false;
|
||||
document.getElementById(tab + 'Feed').innerHTML = '';
|
||||
document.getElementById(tab + 'Empty').style.display = 'none';
|
||||
await loadFeed(tab);
|
||||
}
|
||||
|
||||
// ── Delete ──
|
||||
async function deletePost(postId) {
|
||||
if (!confirm('Post löschen?')) return;
|
||||
const res = await fetch('/feed/posts/' + postId, { method: 'DELETE' });
|
||||
if (res.ok) {
|
||||
document.getElementById('pc-' + postId)?.remove();
|
||||
}
|
||||
}
|
||||
|
||||
// ── Lightbox ──
|
||||
function openLb(postId, postType) {
|
||||
activeLbPostId = postId;
|
||||
activeLbPostType = postType;
|
||||
const card = document.getElementById('pc-' + postId);
|
||||
if (card) {
|
||||
const clone = card.cloneNode(true);
|
||||
clone.querySelectorAll('.post-actions').forEach(el => el.remove());
|
||||
document.getElementById('lbPostBody').innerHTML = clone.innerHTML;
|
||||
}
|
||||
loadLbComments(postId, postType);
|
||||
document.getElementById('postLightbox').classList.add('open');
|
||||
}
|
||||
|
||||
function closeLb() {
|
||||
document.getElementById('postLightbox').classList.remove('open');
|
||||
activeLbPostId = null;
|
||||
activeLbPostType = null;
|
||||
}
|
||||
|
||||
document.getElementById('postLightbox').addEventListener('click', e => {
|
||||
if (e.target === document.getElementById('postLightbox')) closeLb();
|
||||
});
|
||||
document.addEventListener('keydown', e => {
|
||||
if (e.key === 'Escape' && document.getElementById('postLightbox').classList.contains('open')) closeLb();
|
||||
});
|
||||
|
||||
async function loadLbComments(postId, postType) {
|
||||
const targetType = postType === 'GROUP' ? 'GROUP_POST' : 'FEED_POST';
|
||||
const res = await fetch(`/social/kommentare?targetType=${targetType}&targetId=${postId}`);
|
||||
const comments = await res.json();
|
||||
document.getElementById('lbCommentsList').innerHTML = comments.length === 0
|
||||
? '<p style="color:var(--color-muted);font-size:0.82rem;margin:0.4rem;">Noch keine Kommentare.</p>'
|
||||
: comments.map(k => renderKommentarHtml(k, targetType, postId)).join('');
|
||||
}
|
||||
|
||||
async function postLbComment() {
|
||||
if (!activeLbPostId) return;
|
||||
const input = document.getElementById('lbCommentInput');
|
||||
const text = input.value.trim();
|
||||
if (!text) return;
|
||||
const targetType = activeLbPostType === 'GROUP' ? 'GROUP_POST' : 'FEED_POST';
|
||||
await fetch('/social/kommentare', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ targetType, targetId: activeLbPostId, text })
|
||||
});
|
||||
input.value = '';
|
||||
await loadLbComments(activeLbPostId, activeLbPostType);
|
||||
const kcEl = document.getElementById('kc-' + activeLbPostId);
|
||||
if (kcEl) kcEl.textContent = parseInt(kcEl.textContent) + 1;
|
||||
}
|
||||
|
||||
function renderKommentarHtml(k, targetType, targetId) {
|
||||
const avatarHtml = k.authorPicture
|
||||
? `<img src="data:image/png;base64,${k.authorPicture}" alt="">`
|
||||
: '◉';
|
||||
const canDelete = k.authorId === myUserId;
|
||||
return `<div class="comment-item" id="kom-${k.kommentarId}">
|
||||
<div class="comment-avatar">${avatarHtml}</div>
|
||||
<div class="comment-body">
|
||||
<span class="comment-author">${esc(k.authorName)}</span>
|
||||
<span class="comment-date">${fmtDate(k.createdAt)}</span>
|
||||
<div class="comment-text">${esc(k.text)}</div>
|
||||
<div class="comment-actions">
|
||||
<button class="btn-like${k.likedByMe ? ' liked' : ''}" onclick="likeKommentar('${k.kommentarId}')">
|
||||
♥ <span id="lkk-${k.kommentarId}">${k.likeCount}</span>
|
||||
</button>
|
||||
${canDelete ? `<button class="btn-delete-small" onclick="deleteKommentar('${k.kommentarId}','${targetType}','${targetId}')">✕</button>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
async function likeKommentar(kommentarId) {
|
||||
await fetch('/social/kommentare/' + kommentarId + '/like', { method: 'POST' });
|
||||
const btn = document.getElementById('lkk-' + kommentarId)?.parentElement;
|
||||
const lc = document.getElementById('lkk-' + kommentarId);
|
||||
if (!btn || !lc) return;
|
||||
const was = btn.classList.contains('liked');
|
||||
btn.classList.toggle('liked', !was);
|
||||
lc.textContent = parseInt(lc.textContent) + (was ? -1 : 1);
|
||||
}
|
||||
|
||||
async function deleteKommentar(kommentarId, targetType, targetId) {
|
||||
await fetch('/social/kommentare/' + kommentarId, { method: 'DELETE' });
|
||||
await loadLbComments(targetId, activeLbPostType);
|
||||
}
|
||||
|
||||
// ── Emoji Picker ──
|
||||
const EMOJIS = ['😊','😂','❤️','😍','🔥','👍','🥰','😎','🤔','😘','💕','🎉','✨','💋','😈','🫦','🍑','🍆','🔞','🥵','😭','😢','😤','🙄','🤦','🤷','🙏','💪','😏','🤩'];
|
||||
let emojiTarget = null;
|
||||
|
||||
function toggleEmojiPicker(btn, targetId) {
|
||||
emojiTarget = document.getElementById(targetId);
|
||||
let picker = document.getElementById('emojiPicker');
|
||||
if (!picker) {
|
||||
picker = document.createElement('div');
|
||||
picker.id = 'emojiPicker';
|
||||
picker.style.cssText = 'position:fixed;z-index:1000;background:var(--color-card);border:1px solid var(--color-secondary);border-radius:10px;padding:0.5rem;display:flex;flex-wrap:wrap;gap:0.2rem;max-width:260px;box-shadow:0 4px 20px rgba(0,0,0,0.5);';
|
||||
EMOJIS.forEach(em => {
|
||||
const b = document.createElement('button');
|
||||
b.textContent = em;
|
||||
b.style.cssText = 'background:none;border:none;font-size:1.3rem;cursor:pointer;padding:0.2rem;margin:0;width:auto;line-height:1;';
|
||||
b.onclick = e => { e.stopPropagation(); insertEmoji(em); };
|
||||
picker.appendChild(b);
|
||||
});
|
||||
document.body.appendChild(picker);
|
||||
}
|
||||
if (picker.style.display === 'flex') { picker.style.display = 'none'; return; }
|
||||
picker.style.display = 'flex';
|
||||
requestAnimationFrame(() => {
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const ph = picker.offsetHeight, pw = picker.offsetWidth;
|
||||
let top = rect.top - ph - 8;
|
||||
let left = rect.left;
|
||||
if (top < 8) top = rect.bottom + 8;
|
||||
if (left + pw > window.innerWidth - 8) left = window.innerWidth - pw - 8;
|
||||
picker.style.top = top + 'px';
|
||||
picker.style.left = left + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
function insertEmoji(emoji) {
|
||||
if (!emojiTarget) return;
|
||||
const start = emojiTarget.selectionStart ?? emojiTarget.value.length;
|
||||
const end = emojiTarget.selectionEnd ?? start;
|
||||
emojiTarget.value = emojiTarget.value.slice(0, start) + emoji + emojiTarget.value.slice(end);
|
||||
emojiTarget.selectionStart = emojiTarget.selectionEnd = start + emoji.length;
|
||||
emojiTarget.focus();
|
||||
}
|
||||
|
||||
document.addEventListener('click', e => {
|
||||
const picker = document.getElementById('emojiPicker');
|
||||
if (picker && picker.style.display === 'flex' && !picker.contains(e.target) && !e.target.closest('[onclick*="toggleEmojiPicker"]')) {
|
||||
picker.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// ── Helpers ──
|
||||
function esc(str) {
|
||||
if (!str) return '';
|
||||
return str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
|
||||
.replace(/"/g,'"').replace(/\n/g,'<br>');
|
||||
}
|
||||
|
||||
function fmtDate(iso) {
|
||||
if (!iso) return '';
|
||||
const d = new Date(iso);
|
||||
return d.toLocaleDateString('de-DE') + ' ' + d.toLocaleTimeString('de-DE', { hour:'2-digit', minute:'2-digit' });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -88,6 +88,31 @@
|
||||
|
||||
.empty-hint { color: var(--color-muted); font-size: 0.9rem; margin-top: 0.5rem; }
|
||||
|
||||
/* ── Confirm dialog ── */
|
||||
.dialog-backdrop {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index: 200;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.dialog-backdrop.visible { display: flex; }
|
||||
.dialog {
|
||||
background: var(--color-card);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 12px;
|
||||
padding: 1.75rem;
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.6);
|
||||
}
|
||||
.dialog h3 { color: var(--color-primary); font-size: 1.05rem; margin-bottom: 0.75rem; }
|
||||
.dialog p { color: var(--color-muted); font-size: 0.88rem; margin-bottom: 1.25rem; }
|
||||
.dialog-actions { display: flex; gap: 0.75rem; }
|
||||
.dialog-actions button { flex: 1; margin-top: 0; }
|
||||
|
||||
.tab-badge {
|
||||
display: inline-block;
|
||||
background: var(--color-primary);
|
||||
@@ -128,6 +153,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm remove dialog -->
|
||||
<div class="dialog-backdrop" id="removeDialog">
|
||||
<div class="dialog">
|
||||
<h3>Freundschaft beenden</h3>
|
||||
<p id="removeDialogText">Möchtest du diese Freundschaft wirklich beenden?</p>
|
||||
<div class="dialog-actions">
|
||||
<button class="secondary" onclick="closeRemoveDialog()">Abbrechen</button>
|
||||
<button id="removeConfirmBtn" style="background:#c0392b;" onclick="confirmRemove()">Entfernen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/sidebar.js"></script>
|
||||
<script src="/js/social-sidebar.js"></script>
|
||||
<script>
|
||||
@@ -253,24 +290,52 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function removeFriend(friendshipId, btn) {
|
||||
let pendingRemoveFriendshipId = null;
|
||||
let pendingRemoveBtn = null;
|
||||
|
||||
function removeFriend(friendshipId, btn) {
|
||||
pendingRemoveFriendshipId = friendshipId;
|
||||
pendingRemoveBtn = btn;
|
||||
document.getElementById('removeDialogText').textContent =
|
||||
'Möchtest du ' + (btn.closest('.user-item').querySelector('.user-name')?.textContent || 'diese Person') + ' wirklich aus deiner Freundesliste entfernen?';
|
||||
document.getElementById('removeDialog').classList.add('visible');
|
||||
}
|
||||
|
||||
function closeRemoveDialog() {
|
||||
document.getElementById('removeDialog').classList.remove('visible');
|
||||
pendingRemoveFriendshipId = null;
|
||||
pendingRemoveBtn = null;
|
||||
}
|
||||
|
||||
async function confirmRemove() {
|
||||
if (!pendingRemoveFriendshipId) return;
|
||||
const btn = document.getElementById('removeConfirmBtn');
|
||||
btn.disabled = true;
|
||||
btn.textContent = '…';
|
||||
try {
|
||||
await fetch('/social/friends/reject', {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ friendshipId })
|
||||
body: JSON.stringify({ friendshipId: pendingRemoveFriendshipId })
|
||||
});
|
||||
document.getElementById('friend-' + friendshipId)?.remove();
|
||||
document.getElementById('friend-' + pendingRemoveFriendshipId)?.remove();
|
||||
const list = document.getElementById('friendsList');
|
||||
if (list.children.length === 0) {
|
||||
document.getElementById('friendsEmpty').style.display = '';
|
||||
}
|
||||
closeRemoveDialog();
|
||||
} catch (e) {
|
||||
if (pendingRemoveBtn) pendingRemoveBtn.disabled = false;
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Entfernen';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('removeDialog').addEventListener('click', e => {
|
||||
if (e.target === document.getElementById('removeDialog')) closeRemoveDialog();
|
||||
});
|
||||
|
||||
loadFriends();
|
||||
loadPending();
|
||||
</script>
|
||||
|
||||
1179
xxxthegame/src/main/resources/static/gruppe.html
Normal file
1179
xxxthegame/src/main/resources/static/gruppe.html
Normal file
File diff suppressed because it is too large
Load Diff
403
xxxthegame/src/main/resources/static/gruppen.html
Normal file
403
xxxthegame/src/main/resources/static/gruppen.html
Normal file
@@ -0,0 +1,403 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Gruppen – XXX The Game</title>
|
||||
<link rel="stylesheet" href="/css/variables.css">
|
||||
<link rel="stylesheet" href="/css/style.css">
|
||||
<style>
|
||||
.tabs { display:flex; gap:0; margin-bottom:1.5rem; border-bottom:1px solid var(--color-secondary); }
|
||||
.tab-btn { background:none; border:none; border-bottom:3px solid transparent; border-radius:0; padding:0.6rem 1.25rem; font-size:0.95rem; font-weight:600; color:var(--color-muted); cursor:pointer; margin-bottom:-1px; transition:color 0.15s,border-color 0.15s; }
|
||||
.tab-btn:hover { color:var(--color-text); background:none; }
|
||||
.tab-btn.active { color:var(--color-primary); border-bottom-color:var(--color-primary); }
|
||||
.tab-panel { display:none; }
|
||||
.tab-panel.active { display:block; }
|
||||
|
||||
.gruppe-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin-top:0.5rem; }
|
||||
.gruppe-card { background:var(--color-card); border:1px solid var(--color-secondary); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
|
||||
.gruppe-card-img { width:100%; height:110px; object-fit:cover; background:var(--color-secondary); display:flex; align-items:center; justify-content:center; font-size:2.5rem; }
|
||||
.gruppe-card-img img { width:100%; height:100%; object-fit:cover; }
|
||||
.gruppe-card-body { padding:0.85rem; flex:1; display:flex; flex-direction:column; gap:0.4rem; }
|
||||
.gruppe-card-name { font-weight:700; font-size:1rem; }
|
||||
.gruppe-card-meta { font-size:0.78rem; color:var(--color-muted); }
|
||||
.gruppe-card-actions { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:auto; padding-top:0.5rem; }
|
||||
.gruppe-card-actions button, .gruppe-card-actions a.btn { margin-top:0; padding:0.3rem 0.7rem; font-size:0.8rem; width:auto; }
|
||||
|
||||
.role-badge { font-size:0.7rem; font-weight:700; padding:0.1rem 0.4rem; border-radius:4px; background:var(--color-primary); color:#fff; display:inline-block; }
|
||||
.role-badge.mitglied { background:var(--color-secondary); color:var(--color-text); }
|
||||
|
||||
.search-row { display:flex; gap:0.75rem; margin-bottom:1rem; }
|
||||
.search-row input { flex:1; }
|
||||
.search-row button { white-space:nowrap; width:auto; margin-top:0; }
|
||||
|
||||
.anfrage-list { list-style:none; margin:0; padding:0; }
|
||||
.anfrage-item { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0.75rem 0; border-bottom:1px solid var(--color-secondary); }
|
||||
.anfrage-item:last-child { border-bottom:none; }
|
||||
.anfrage-name { font-weight:600; }
|
||||
.anfrage-status { font-size:0.8rem; color:var(--color-muted); }
|
||||
|
||||
.empty-hint { color:var(--color-muted); font-size:0.9rem; margin-top:0.5rem; }
|
||||
|
||||
/* Dialog */
|
||||
.dialog-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; align-items:center; justify-content:center; }
|
||||
.dialog-backdrop.visible { display:flex; }
|
||||
.dialog { background:var(--color-card); border:1px solid var(--color-secondary); border-radius:12px; padding:1.75rem; width:100%; max-width:420px; box-shadow:0 8px 32px rgba(0,0,0,0.6); max-height:90vh; overflow-y:auto; }
|
||||
.dialog h3 { color:var(--color-primary); font-size:1.1rem; margin-bottom:1.25rem; }
|
||||
.dialog label { display:block; font-size:0.8rem; color:#aaa; margin-bottom:0.3rem; margin-top:1rem; }
|
||||
.dialog input, .dialog textarea { width:100%; box-sizing:border-box; }
|
||||
.dialog textarea { width:100%; padding:0.6rem 0.85rem; border:1px solid var(--color-secondary); border-radius:6px; background:var(--color-secondary); color:var(--color-text); font-size:0.95rem; outline:none; transition:border-color 0.2s; resize:vertical; min-height:80px; box-sizing:border-box; }
|
||||
.dialog textarea:focus { border-color:var(--color-primary); }
|
||||
.dialog-actions { display:flex; justify-content:flex-end; gap:0.75rem; margin-top:1.5rem; }
|
||||
.dialog-actions button { flex:none; margin:0; padding:0.55rem 1.1rem; font-size:0.9rem; width:auto; }
|
||||
.toggle-row { display:flex; align-items:center; gap:0.75rem; margin-top:0.75rem; }
|
||||
.toggle-row label { margin:0; font-size:0.9rem; color:var(--color-text); }
|
||||
|
||||
.img-preview { width:100%; max-height:140px; object-fit:cover; border-radius:6px; margin-top:0.5rem; display:none; }
|
||||
|
||||
.card-notif { font-size:0.75rem; font-weight:700; color:#fff; background:#e67e22; border-radius:4px; padding:0.15rem 0.45rem; display:none; width:fit-content; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem;">
|
||||
<h1 style="margin:0;">Gruppen</h1>
|
||||
<button onclick="openCreateDialog()" style="width:auto; padding:0.4rem 1rem; font-size:0.9rem; margin:0;">+ Erstellen</button>
|
||||
</div>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab-btn active" onclick="switchTab('mine', this)">Meine Gruppen</button>
|
||||
<button class="tab-btn" onclick="switchTab('discover', this)">Entdecken</button>
|
||||
<button class="tab-btn" onclick="switchTab('requests', this)">Meine Anfragen</button>
|
||||
</div>
|
||||
|
||||
<!-- Meine Gruppen -->
|
||||
<div class="tab-panel active" id="tab-mine">
|
||||
<div class="gruppe-grid" id="mineGrid"></div>
|
||||
<p class="empty-hint" id="mineEmpty" style="display:none;">Du bist noch in keiner Gruppe.</p>
|
||||
</div>
|
||||
|
||||
<!-- Entdecken -->
|
||||
<div class="tab-panel" id="tab-discover">
|
||||
<div class="search-row">
|
||||
<input type="text" id="searchInput" placeholder="Gruppenname suchen…" onkeydown="if(event.key==='Enter')doSearch()">
|
||||
<button onclick="doSearch()">Suchen</button>
|
||||
</div>
|
||||
<div class="gruppe-grid" id="discoverGrid"></div>
|
||||
<p class="empty-hint" id="discoverHint">Gib einen Suchbegriff ein.</p>
|
||||
</div>
|
||||
|
||||
<!-- Meine Anfragen -->
|
||||
<div class="tab-panel" id="tab-requests">
|
||||
<ul class="anfrage-list" id="requestsList"></ul>
|
||||
<p class="empty-hint" id="requestsEmpty" style="display:none;">Keine ausstehenden Anfragen.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Gruppe erstellen Dialog -->
|
||||
<div class="dialog-backdrop" id="createDialog">
|
||||
<div class="dialog">
|
||||
<h3>Gruppe erstellen</h3>
|
||||
<label>Name *</label>
|
||||
<input type="text" id="createName" maxlength="100" placeholder="Gruppenname">
|
||||
<label>Beschreibung</label>
|
||||
<textarea id="createDesc" maxlength="1000" placeholder="Worum geht es in dieser Gruppe?"></textarea>
|
||||
<label>Bild (optional)</label>
|
||||
<input type="file" id="createBildFile" accept="image/*" onchange="previewBild(this,'createBildPreview','createBildData')">
|
||||
<img id="createBildPreview" class="img-preview" alt="">
|
||||
<input type="hidden" id="createBildData">
|
||||
<div class="toggle-row">
|
||||
<input type="checkbox" id="createPrivate">
|
||||
<label for="createPrivate">Private Gruppe (Beitritt nur per Anfrage)</label>
|
||||
</div>
|
||||
<p class="message error" id="createError" style="display:none; margin-top:0.75rem;"></p>
|
||||
<div class="dialog-actions">
|
||||
<button class="secondary" onclick="closeCreateDialog()">Abbrechen</button>
|
||||
<button onclick="createGruppe()">Erstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Beitrittsanfrage Dialog -->
|
||||
<div class="dialog-backdrop" id="joinDialog">
|
||||
<div class="dialog">
|
||||
<h3>Beitrittsanfrage senden</h3>
|
||||
<p id="joinDialogGroupName" style="font-weight:600; margin-bottom:0.5rem;"></p>
|
||||
<label>Nachricht (optional)</label>
|
||||
<textarea id="joinNachricht" placeholder="Warum möchtest du beitreten?"></textarea>
|
||||
<p class="message error" id="joinError" style="display:none; margin-top:0.75rem;"></p>
|
||||
<div class="dialog-actions">
|
||||
<button class="secondary" onclick="closeJoinDialog()">Abbrechen</button>
|
||||
<button onclick="sendJoinRequest()">Anfrage senden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/sidebar.js"></script>
|
||||
<script src="/js/social-sidebar.js"></script>
|
||||
<script>
|
||||
function switchTab(name, btn) {
|
||||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
document.getElementById('tab-' + name).classList.add('active');
|
||||
if (name === 'mine') loadMine();
|
||||
if (name === 'requests') loadRequests();
|
||||
}
|
||||
|
||||
function esc(s) { const d = document.createElement('div'); d.textContent = s ?? ''; return d.innerHTML; }
|
||||
|
||||
function gruppeCard(g, showJoin = false) {
|
||||
const img = g.bild
|
||||
? `<div class="gruppe-card-img"><img src="data:image/jpeg;base64,${g.bild}" alt=""></div>`
|
||||
: `<div class="gruppe-card-img">👥</div>`;
|
||||
const roleBadge = g.myRole
|
||||
? `<span class="role-badge ${g.myRole === 'ADMIN' ? '' : 'mitglied'}">${g.myRole === 'ADMIN' ? 'Admin' : 'Mitglied'}</span>`
|
||||
: '';
|
||||
const privBadge = g.isPrivate ? ' 🔒' : '';
|
||||
let actions = '';
|
||||
if (showJoin && !g.myRole) {
|
||||
if (g.myRequestStatus === 'AUSSTEHEND') {
|
||||
actions = `<button disabled style="opacity:0.6;" onclick="event.stopPropagation()">Anfrage ausstehend</button>`;
|
||||
} else if (g.isPrivate) {
|
||||
actions = `<button onclick="event.stopPropagation(); openJoinDialog('${g.gruppeId}','${esc(g.name)}')">Anfrage senden</button>`;
|
||||
} else {
|
||||
actions = `<button onclick="event.stopPropagation(); joinGruppe('${g.gruppeId}', this)">Beitreten</button>`;
|
||||
}
|
||||
}
|
||||
return `
|
||||
<div class="gruppe-card" id="gc-${g.gruppeId}" onclick="location.href='/gruppe.html?gruppeId=${g.gruppeId}'" style="cursor:pointer;">
|
||||
${img}
|
||||
<div class="gruppe-card-body">
|
||||
<div class="gruppe-card-name">${esc(g.name)}${privBadge} ${roleBadge}</div>
|
||||
<div class="gruppe-card-meta">${g.memberCount} Mitglied${g.memberCount !== 1 ? 'er' : ''} · ${g.postCount} Beiträge</div>
|
||||
${g.beschreibung ? `<div style="font-size:0.82rem;color:var(--color-muted);">${esc(g.beschreibung.substring(0,80))}${g.beschreibung.length>80?'…':''}</div>` : ''}
|
||||
<div class="card-notif" id="notif-${g.gruppeId}"></div>
|
||||
${actions ? `<div class="gruppe-card-actions">${actions}</div>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
async function loadMine() {
|
||||
try {
|
||||
const res = await fetch('/gruppen/mine');
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
const grid = document.getElementById('mineGrid');
|
||||
grid.innerHTML = '';
|
||||
if (data.length === 0) { document.getElementById('mineEmpty').style.display = ''; return; }
|
||||
document.getElementById('mineEmpty').style.display = 'none';
|
||||
data.forEach(g => grid.insertAdjacentHTML('beforeend', gruppeCard(g)));
|
||||
loadAdminBadges(data);
|
||||
} catch(e) { console.error(e); }
|
||||
}
|
||||
|
||||
async function loadAdminBadges(groups) {
|
||||
const adminGroups = groups.filter(g => g.myRole === 'ADMIN');
|
||||
await Promise.all(adminGroups.map(async g => {
|
||||
const [reqRes, repRes] = await Promise.all([
|
||||
fetch('/gruppen/' + g.gruppeId + '/requests'),
|
||||
fetch('/gruppen/' + g.gruppeId + '/reports')
|
||||
]);
|
||||
const reqs = reqRes.ok ? await reqRes.json() : [];
|
||||
const reps = repRes.ok ? await repRes.json() : [];
|
||||
const total = reqs.length + reps.length;
|
||||
if (total === 0) return;
|
||||
const el = document.getElementById('notif-' + g.gruppeId);
|
||||
if (!el) return;
|
||||
const parts = [];
|
||||
if (reqs.length > 0) parts.push(reqs.length + ' Anfrage' + (reqs.length !== 1 ? 'n' : ''));
|
||||
if (reps.length > 0) parts.push(reps.length + ' Meldung' + (reps.length !== 1 ? 'en' : ''));
|
||||
el.textContent = '🔔 ' + parts.join(' · ');
|
||||
el.style.display = '';
|
||||
}));
|
||||
}
|
||||
|
||||
async function doSearch() {
|
||||
const q = document.getElementById('searchInput').value.trim();
|
||||
if (!q) return;
|
||||
try {
|
||||
const res = await fetch('/gruppen/search?q=' + encodeURIComponent(q));
|
||||
if (!res.ok) return;
|
||||
const data = await res.json();
|
||||
const grid = document.getElementById('discoverGrid');
|
||||
const hint = document.getElementById('discoverHint');
|
||||
grid.innerHTML = '';
|
||||
if (data.length === 0) { hint.textContent = 'Keine Gruppen gefunden.'; hint.style.display = ''; return; }
|
||||
hint.style.display = 'none';
|
||||
data.forEach(g => grid.insertAdjacentHTML('beforeend', gruppeCard(g, true)));
|
||||
} catch(e) { console.error(e); }
|
||||
}
|
||||
|
||||
async function joinGruppe(gruppeId, btn) {
|
||||
btn.disabled = true;
|
||||
btn.textContent = '…';
|
||||
try {
|
||||
const res = await fetch('/gruppen/' + gruppeId + '/join', { method: 'POST', headers:{'Content-Type':'application/json'}, body:'{}' });
|
||||
if (res.ok || res.status === 201) {
|
||||
btn.textContent = 'Beigetreten ✓';
|
||||
setTimeout(loadMine, 500);
|
||||
} else {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Beitreten';
|
||||
}
|
||||
} catch(e) { btn.disabled = false; btn.textContent = 'Beitreten'; }
|
||||
}
|
||||
|
||||
async function loadRequests() {
|
||||
try {
|
||||
const reqRes = await fetch('/gruppen/requests/mine');
|
||||
if (!reqRes.ok) { document.getElementById('requestsEmpty').style.display = ''; return; }
|
||||
const data = await reqRes.json();
|
||||
const list = document.getElementById('requestsList');
|
||||
list.innerHTML = '';
|
||||
if (data.length === 0) { document.getElementById('requestsEmpty').style.display = ''; return; }
|
||||
document.getElementById('requestsEmpty').style.display = 'none';
|
||||
data.forEach(r => {
|
||||
list.insertAdjacentHTML('beforeend', `
|
||||
<li class="anfrage-item" id="req-${r.anfrageId}">
|
||||
<div>
|
||||
<div class="anfrage-name">${esc(r.gruppeName)}</div>
|
||||
<div class="anfrage-status">Ausstehend seit ${fmtDate(r.angefragtAt)}</div>
|
||||
${r.nachricht ? `<div style="font-size:0.82rem;color:var(--color-muted);margin-top:0.2rem;">"${esc(r.nachricht)}"</div>` : ''}
|
||||
</div>
|
||||
<button class="secondary" onclick="withdrawRequest('${r.gruppeId}', '${r.anfrageId}', this)">Zurückziehen</button>
|
||||
</li>`);
|
||||
});
|
||||
} catch(e) { console.error(e); }
|
||||
}
|
||||
|
||||
async function withdrawRequest(gruppeId, anfrageId, btn) {
|
||||
btn.disabled = true;
|
||||
try {
|
||||
await fetch('/gruppen/' + gruppeId + '/requests/mine', { method: 'DELETE' });
|
||||
document.getElementById('req-' + anfrageId)?.remove();
|
||||
if (document.getElementById('requestsList').children.length === 0)
|
||||
document.getElementById('requestsEmpty').style.display = '';
|
||||
} catch(e) { btn.disabled = false; }
|
||||
}
|
||||
|
||||
function fmtDate(iso) {
|
||||
if (!iso) return '';
|
||||
return new Date(iso).toLocaleDateString('de-DE', { day:'2-digit', month:'2-digit', year:'numeric' });
|
||||
}
|
||||
|
||||
// ── Create dialog ──
|
||||
|
||||
function openCreateDialog() {
|
||||
document.getElementById('createName').value = '';
|
||||
document.getElementById('createDesc').value = '';
|
||||
document.getElementById('createPrivate').checked = false;
|
||||
document.getElementById('createBildData').value = '';
|
||||
document.getElementById('createBildPreview').style.display = 'none';
|
||||
document.getElementById('createBildFile').value = '';
|
||||
document.getElementById('createDialog').classList.add('visible');
|
||||
}
|
||||
function closeCreateDialog() { document.getElementById('createDialog').classList.remove('visible'); document.getElementById('createError').style.display = 'none'; }
|
||||
|
||||
function showCreateError(text) {
|
||||
const el = document.getElementById('createError');
|
||||
el.textContent = text;
|
||||
el.style.display = 'block';
|
||||
}
|
||||
|
||||
async function createGruppe() {
|
||||
const name = document.getElementById('createName').value.trim();
|
||||
if (!name) { showCreateError('Bitte einen Namen eingeben.'); return; }
|
||||
document.getElementById('createError').style.display = 'none';
|
||||
const body = {
|
||||
name,
|
||||
beschreibung: document.getElementById('createDesc').value.trim() || null,
|
||||
bild: document.getElementById('createBildData').value || null,
|
||||
isPrivate: document.getElementById('createPrivate').checked
|
||||
};
|
||||
try {
|
||||
const res = await fetch('/gruppen', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) });
|
||||
if (res.ok || res.status === 201) {
|
||||
const g = await res.json();
|
||||
closeCreateDialog();
|
||||
window.location.href = '/gruppe.html?gruppeId=' + g.gruppeId;
|
||||
} else {
|
||||
showCreateError('Fehler beim Erstellen der Gruppe.');
|
||||
}
|
||||
} catch(e) { showCreateError('Fehler: ' + e.message); }
|
||||
}
|
||||
|
||||
// ── Join dialog ──
|
||||
|
||||
let pendingJoinGruppeId = null;
|
||||
function openJoinDialog(gruppeId, name) {
|
||||
pendingJoinGruppeId = gruppeId;
|
||||
document.getElementById('joinDialogGroupName').textContent = name;
|
||||
document.getElementById('joinNachricht').value = '';
|
||||
document.getElementById('joinDialog').classList.add('visible');
|
||||
}
|
||||
function closeJoinDialog() { document.getElementById('joinDialog').classList.remove('visible'); pendingJoinGruppeId = null; }
|
||||
|
||||
async function sendJoinRequest() {
|
||||
if (!pendingJoinGruppeId) return;
|
||||
document.getElementById('joinError').style.display = 'none';
|
||||
const nachricht = document.getElementById('joinNachricht').value.trim() || null;
|
||||
try {
|
||||
const res = await fetch('/gruppen/' + pendingJoinGruppeId + '/join', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type':'application/json'},
|
||||
body: JSON.stringify({ nachricht })
|
||||
});
|
||||
if (res.ok || res.status === 201) {
|
||||
closeJoinDialog();
|
||||
doSearch();
|
||||
} else {
|
||||
const el = document.getElementById('joinError');
|
||||
el.textContent = 'Fehler beim Senden der Anfrage.';
|
||||
el.style.display = 'block';
|
||||
}
|
||||
} catch(e) {
|
||||
const el = document.getElementById('joinError');
|
||||
el.textContent = 'Fehler: ' + e.message;
|
||||
el.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// ── Image preview ──
|
||||
|
||||
function previewBild(input, previewId, dataId) {
|
||||
const file = input.files[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
const original = new Image();
|
||||
original.onload = () => {
|
||||
const MAX = 256;
|
||||
let w = original.width, h = original.height;
|
||||
if (w > MAX || h > MAX) {
|
||||
if (w > h) { h = Math.round(h * MAX / w); w = MAX; }
|
||||
else { w = Math.round(w * MAX / h); h = MAX; }
|
||||
}
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = w; canvas.height = h;
|
||||
canvas.getContext('2d').drawImage(original, 0, 0, w, h);
|
||||
const scaled = canvas.toDataURL('image/jpeg', 0.85);
|
||||
const img = document.getElementById(previewId);
|
||||
img.src = scaled;
|
||||
img.style.display = 'block';
|
||||
document.getElementById(dataId).value = scaled.split(',')[1];
|
||||
};
|
||||
original.src = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
|
||||
document.getElementById('createDialog').addEventListener('click', e => {
|
||||
if (e.target === document.getElementById('createDialog')) closeCreateDialog();
|
||||
});
|
||||
document.getElementById('joinDialog').addEventListener('click', e => {
|
||||
if (e.target === document.getElementById('joinDialog')) closeJoinDialog();
|
||||
});
|
||||
|
||||
loadMine();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -136,7 +136,7 @@
|
||||
);
|
||||
overlay.addEventListener('click', closeMenu);
|
||||
sidebar.querySelectorAll('a:not([href="/login/logout"]):not(.sidebar-group-toggle)').forEach(l =>
|
||||
l.addEventListener('click', () => { if (window.innerWidth <= 768) closeMenu(); })
|
||||
l.addEventListener('click', () => { if (window.innerWidth <= (parseInt(getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-mobile').trim()) || 768)) closeMenu(); })
|
||||
);
|
||||
|
||||
// Social sidebar auf allen App-Seiten nachladen
|
||||
|
||||
@@ -5,9 +5,11 @@
|
||||
const path = window.location.pathname;
|
||||
|
||||
const links = [
|
||||
{ href: '/feed.html', icon: '📰', label: 'Feed', badgeId: null, mobileBadgeId: null },
|
||||
{ href: '/personen-suchen.html', icon: '⊕', label: 'Personen suchen', badgeId: null, mobileBadgeId: null },
|
||||
{ href: '/freunde.html', icon: '♡', label: 'Freunde', badgeId: 'socialFriendsBadge', mobileBadgeId: 'socialMobileFriendsBadge' },
|
||||
{ href: '/nachrichten.html', icon: '✉', label: 'Nachrichten', badgeId: 'socialMsgBadge', mobileBadgeId: 'socialMobileMsgBadge' },
|
||||
{ href: '/gruppen.html', icon: '👥', label: 'Gruppen', badgeId: 'socialGruppenBadge', mobileBadgeId: 'socialMobileGruppenBadge' },
|
||||
];
|
||||
|
||||
const profileActive = (path === '/benutzer.html' || path === '/profile.html') ? ' class="active"' : '';
|
||||
@@ -108,4 +110,10 @@
|
||||
.then(r => r.ok ? r.json() : 0)
|
||||
.then(n => setBadge(['socialMsgBadge', 'socialMobileMsgBadge'], n))
|
||||
.catch(() => {});
|
||||
|
||||
Promise.all([
|
||||
fetch('/gruppen/requests/pending/count').then(r => r.ok ? r.json() : 0).catch(() => 0),
|
||||
fetch('/gruppen/reports/pending/count').then(r => r.ok ? r.json() : 0).catch(() => 0)
|
||||
]).then(([joins, reports]) => setBadge(['socialGruppenBadge', 'socialMobileGruppenBadge'], joins + reports))
|
||||
.catch(() => {});
|
||||
})();
|
||||
|
||||
@@ -168,6 +168,60 @@
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ── Profile extras ── */
|
||||
.profile-extras-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.75rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.profile-extras-grid .full-col {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.65rem 0.9rem;
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 6px;
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
select:focus { border-color: var(--color-primary); }
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.65rem 0.9rem;
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: 6px;
|
||||
background: var(--color-secondary);
|
||||
color: var(--color-text);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
resize: vertical;
|
||||
min-height: 100px;
|
||||
transition: border-color 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
textarea:focus { border-color: var(--color-primary); }
|
||||
|
||||
.char-count {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-muted);
|
||||
text-align: right;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.char-count.over { color: var(--color-primary); }
|
||||
|
||||
/* ── Modal ── */
|
||||
.modal-backdrop {
|
||||
display: none;
|
||||
@@ -237,6 +291,60 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Freiwillige Profilangaben -->
|
||||
<div class="gallery-section-label" style="margin-top:1.25rem;">Freiwillige Angaben</div>
|
||||
<div class="profile-extras-grid">
|
||||
<div>
|
||||
<label>Alter</label>
|
||||
<input type="number" id="profileAlter" min="18" max="99" placeholder="—">
|
||||
</div>
|
||||
<div>
|
||||
<label>Größe (cm)</label>
|
||||
<input type="number" id="profileGroesse" min="100" max="250" placeholder="—">
|
||||
</div>
|
||||
<div>
|
||||
<label>Gewicht (kg)</label>
|
||||
<input type="number" id="profileGewicht" min="30" max="300" placeholder="—">
|
||||
</div>
|
||||
<div>
|
||||
<label>Geschlecht</label>
|
||||
<select id="profileGeschlecht">
|
||||
<option value="">— keine Angabe —</option>
|
||||
<option value="WEIBLICH">weiblich</option>
|
||||
<option value="DIVERS">divers</option>
|
||||
<option value="MAENNLICH">männlich</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="full-col">
|
||||
<label>Neigung</label>
|
||||
<select id="profileNeigung">
|
||||
<option value="">— keine Angabe —</option>
|
||||
<option value="DEVOT">devot</option>
|
||||
<option value="EHER_DEVOT">eher devot</option>
|
||||
<option value="SWITCHER">Switcher</option>
|
||||
<option value="EHER_DOMINANT">eher dominant</option>
|
||||
<option value="DOMINANT">dominant</option>
|
||||
<option value="KEINES">keines</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="full-col">
|
||||
<label>Beziehungsstatus</label>
|
||||
<select id="profileBeziehungsstatus">
|
||||
<option value="">— keine Angabe —</option>
|
||||
<option value="SINGLE">single</option>
|
||||
<option value="IN_EINER_BEZIEHUNG">in einer Beziehung</option>
|
||||
<option value="VERHEIRATET">verheiratet</option>
|
||||
<option value="IN_EINER_OFFENEN_BEZIEHUNG">in einer offenen Beziehung</option>
|
||||
<option value="IN_EINER_OFFENEN_EHE">in einer offenen Ehe</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="full-col">
|
||||
<label>Über mich</label>
|
||||
<textarea id="profileBeschreibung" maxlength="600" placeholder="Erzähl etwas über dich…" oninput="updateCharCount()"></textarea>
|
||||
<div class="char-count" id="charCount">0 / 600</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-delete-row">
|
||||
<button class="btn-delete" onclick="openDeleteDialog()">Konto löschen</button>
|
||||
</div>
|
||||
@@ -303,6 +411,7 @@
|
||||
<script>
|
||||
let currentPicture = null;
|
||||
let currentPictureHq = null;
|
||||
let pictureDirty = false;
|
||||
|
||||
fetch('/login/me')
|
||||
.then(r => {
|
||||
@@ -317,6 +426,17 @@
|
||||
currentPicture = user.profilePicture;
|
||||
renderPicture(currentPicture);
|
||||
}
|
||||
// Fill optional profile fields
|
||||
if (user.alter) document.getElementById('profileAlter').value = user.alter;
|
||||
if (user.groesse) document.getElementById('profileGroesse').value = user.groesse;
|
||||
if (user.gewicht) document.getElementById('profileGewicht').value = user.gewicht;
|
||||
if (user.geschlecht) document.getElementById('profileGeschlecht').value = user.geschlecht;
|
||||
if (user.neigung) document.getElementById('profileNeigung').value = user.neigung;
|
||||
if (user.beziehungsstatus) document.getElementById('profileBeziehungsstatus').value = user.beziehungsstatus;
|
||||
if (user.beschreibung) {
|
||||
document.getElementById('profileBeschreibung').value = user.beschreibung;
|
||||
updateCharCount();
|
||||
}
|
||||
myUserId = user.userId;
|
||||
loadOwnGallery();
|
||||
})
|
||||
@@ -331,6 +451,7 @@
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
[currentPicture, currentPictureHq] = await Promise.all([toBase64(file, 96), toBase64(file, 1024)]);
|
||||
pictureDirty = true;
|
||||
renderPicture(currentPicture);
|
||||
});
|
||||
|
||||
@@ -339,30 +460,69 @@
|
||||
el.innerHTML = `<img src="data:image/png;base64,${base64}" alt="Profilbild">`;
|
||||
}
|
||||
|
||||
function updateCharCount() {
|
||||
const ta = document.getElementById('profileBeschreibung');
|
||||
const el = document.getElementById('charCount');
|
||||
const len = ta.value.length;
|
||||
el.textContent = len + ' / 600';
|
||||
el.classList.toggle('over', len > 600);
|
||||
}
|
||||
|
||||
async function saveProfile() {
|
||||
const btn = document.getElementById('saveBtn');
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'Wird gespeichert…';
|
||||
hideMessage();
|
||||
|
||||
const beschreibung = document.getElementById('profileBeschreibung').value.trim();
|
||||
if (beschreibung.length > 600) {
|
||||
showMessage('Die Beschreibung darf maximal 600 Zeichen lang sein.', 'error');
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Profil speichern';
|
||||
return;
|
||||
}
|
||||
|
||||
const toNullOrInt = id => {
|
||||
const v = document.getElementById(id).value;
|
||||
return v ? parseInt(v, 10) : null;
|
||||
};
|
||||
const toNullOrStr = id => {
|
||||
const v = document.getElementById(id).value;
|
||||
return v || null;
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch('/user/me/picture', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ picture: currentPicture, pictureHq: currentPictureHq })
|
||||
});
|
||||
if (response.ok) {
|
||||
window.location.href = '/userhome.html';
|
||||
const [picRes, profileRes] = await Promise.all([
|
||||
pictureDirty ? fetch('/user/me/picture', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ picture: currentPicture, pictureHq: currentPictureHq })
|
||||
}) : Promise.resolve({ ok: true }),
|
||||
fetch('/user/me/profile', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
alter: toNullOrInt('profileAlter'),
|
||||
groesse: toNullOrInt('profileGroesse'),
|
||||
gewicht: toNullOrInt('profileGewicht'),
|
||||
geschlecht: toNullOrStr('profileGeschlecht'),
|
||||
neigung: toNullOrStr('profileNeigung'),
|
||||
beziehungsstatus: toNullOrStr('profileBeziehungsstatus'),
|
||||
beschreibung: beschreibung || null
|
||||
})
|
||||
})
|
||||
]);
|
||||
if (picRes.ok && profileRes.ok) {
|
||||
showMessage('Gespeichert!', 'success');
|
||||
} else {
|
||||
showMessage(`Fehler: HTTP ${response.status}`, 'error');
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Profil speichern';
|
||||
showMessage(`Fehler beim Speichern.`, 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showMessage('Server nicht erreichbar.', 'error');
|
||||
console.error(err);
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Profil speichern';
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user