280 lines
8.3 KiB
HTML
280 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Wünsche</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #111;
|
|
color: #eee;
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
}
|
|
h1 { margin-top: 0; }
|
|
a.back { color: #6fbf73; text-decoration: none; font-size: 14px; }
|
|
a.back:hover { text-decoration: underline; }
|
|
|
|
main { max-width: 700px; margin: 20px auto 0; }
|
|
|
|
.panel {
|
|
background: #1a1a1a;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.panel h2 { margin-top: 0; }
|
|
|
|
input, textarea {
|
|
width: 100%;
|
|
background: #222;
|
|
border: 1px solid #444;
|
|
color: #eee;
|
|
padding: 8px 10px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
}
|
|
textarea { min-height: 80px; resize: vertical; margin-top: 8px; }
|
|
|
|
button {
|
|
background: #2c7a3d;
|
|
border: none;
|
|
color: white;
|
|
padding: 8px 14px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
margin-top: 10px;
|
|
}
|
|
button.danger { background: #a83232; }
|
|
button:hover { opacity: 0.85; }
|
|
|
|
.wish-item {
|
|
border-bottom: 1px solid #2a2a2a;
|
|
padding: 14px 0;
|
|
display: flex;
|
|
gap: 14px;
|
|
}
|
|
.wish-item:last-child { border-bottom: none; }
|
|
|
|
.vote-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-width: 50px;
|
|
}
|
|
.vote-btn {
|
|
background: #222;
|
|
border: 1px solid #444;
|
|
color: #eee;
|
|
border-radius: 6px;
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
margin-top: 0;
|
|
}
|
|
.vote-btn.voted { background: #2c7a3d; border-color: #2c7a3d; }
|
|
.vote-count { font-size: 13px; color: #999; margin-top: 4px; }
|
|
|
|
.wish-body { flex: 1; }
|
|
.wish-body h3 { margin: 0 0 4px 0; }
|
|
.wish-meta { color: #777; font-size: 12px; margin-bottom: 6px; }
|
|
.wish-content { white-space: pre-wrap; line-height: 1.5; }
|
|
|
|
.status-badge {
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
padding: 2px 8px;
|
|
font-size: 11px;
|
|
margin-left: 6px;
|
|
}
|
|
.status-open { background: #444; color: #ccc; }
|
|
.status-planned { background: #2f4a7a; color: #a6c6ff; }
|
|
.status-done { background: #1a4d2a; color: #6fbf73; }
|
|
.status-rejected { background: #5a2a2a; color: #e08a8a; }
|
|
|
|
.admin-controls { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.admin-controls select {
|
|
background: #222; border: 1px solid #444; color: #eee;
|
|
padding: 4px 6px; border-radius: 4px; font-size: 12px;
|
|
}
|
|
.admin-controls button { padding: 4px 8px; font-size: 12px; margin-top: 0; }
|
|
|
|
.msg { font-size: 13px; color: #6fbf73; min-height: 18px; margin-top: 8px; }
|
|
.empty-hint { color: #666; padding: 10px 0; }
|
|
.hidden { display: none !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<a class="back" href="/index.html">← zurück zur Startseite</a>
|
|
<h1>💡 Wünsche</h1>
|
|
|
|
<main>
|
|
<div class="panel">
|
|
<h2>Neuen Wunsch einreichen</h2>
|
|
<input id="wishTitle" placeholder="Kurzer Titel">
|
|
<textarea id="wishContent" placeholder="Was wünschst du dir für das Spiel?"></textarea>
|
|
<button onclick="submitWish()">Einreichen</button>
|
|
<div class="msg" id="wishMsg"></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Alle Wünsche</h2>
|
|
<div id="wishList"></div>
|
|
<div class="empty-hint hidden" id="wishEmpty">Noch keine Wünsche vorhanden.</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
const token = localStorage.getItem("token");
|
|
const isAdmin = localStorage.getItem("isAdmin") === "true";
|
|
|
|
if (!token) {
|
|
alert("Bitte zuerst auf der Startseite einloggen.");
|
|
location.href = "/index.html";
|
|
}
|
|
|
|
async function authFetch(url, options = {}) {
|
|
options.headers = { ...(options.headers || {}), "Authorization": "Bearer " + token };
|
|
const res = await fetch(url, options);
|
|
if (res.status === 401) {
|
|
alert("Sitzung abgelaufen. Bitte erneut einloggen.");
|
|
location.href = "/index.html";
|
|
throw new Error("Nicht autorisiert");
|
|
}
|
|
return res;
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
const div = document.createElement("div");
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
async function loadWishes() {
|
|
const res = await authFetch("/api/wishes");
|
|
const data = await res.json();
|
|
renderWishes(data.wishes || []);
|
|
}
|
|
|
|
function renderWishes(items) {
|
|
const list = document.getElementById("wishList");
|
|
const empty = document.getElementById("wishEmpty");
|
|
list.innerHTML = "";
|
|
|
|
if (items.length === 0) {
|
|
empty.classList.remove("hidden");
|
|
return;
|
|
}
|
|
empty.classList.add("hidden");
|
|
|
|
items.forEach(w => {
|
|
const div = document.createElement("div");
|
|
div.className = "wish-item";
|
|
|
|
const date = new Date(w.created_at).toLocaleDateString("de-DE");
|
|
const statusLabels = { open: "Offen", planned: "Geplant", done: "Erledigt", rejected: "Abgelehnt" };
|
|
|
|
let adminHtml = "";
|
|
if (isAdmin) {
|
|
adminHtml = `
|
|
<div class="admin-controls">
|
|
<select data-id="${w.id}" class="statusSelect">
|
|
${Object.entries(statusLabels).map(([val, label]) =>
|
|
`<option value="${val}" ${w.status === val ? "selected" : ""}>${label}</option>`
|
|
).join("")}
|
|
</select>
|
|
<button class="danger deleteWishBtn" data-id="${w.id}">Löschen</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
div.innerHTML = `
|
|
<div class="vote-col">
|
|
<button class="vote-btn ${w.hasVoted ? "voted" : ""}" data-id="${w.id}">▲</button>
|
|
<div class="vote-count">${w.votes}</div>
|
|
</div>
|
|
<div class="wish-body">
|
|
<h3>${escapeHtml(w.title)} <span class="status-badge status-${w.status}">${statusLabels[w.status] || w.status}</span></h3>
|
|
<div class="wish-meta">${date} — ${escapeHtml(w.username)}</div>
|
|
<div class="wish-content">${escapeHtml(w.content)}</div>
|
|
${adminHtml}
|
|
</div>
|
|
`;
|
|
list.appendChild(div);
|
|
});
|
|
|
|
list.querySelectorAll(".vote-btn").forEach(btn => {
|
|
btn.onclick = () => voteWish(btn.dataset.id);
|
|
});
|
|
list.querySelectorAll(".deleteWishBtn").forEach(btn => {
|
|
btn.onclick = () => deleteWish(btn.dataset.id);
|
|
});
|
|
list.querySelectorAll(".statusSelect").forEach(sel => {
|
|
sel.onchange = () => setWishStatus(sel.dataset.id, sel.value);
|
|
});
|
|
}
|
|
|
|
async function submitWish() {
|
|
const title = document.getElementById("wishTitle").value.trim();
|
|
const content = document.getElementById("wishContent").value.trim();
|
|
|
|
if (!title || !content) {
|
|
showWishMsg("Titel und Inhalt sind Pflicht.", true);
|
|
return;
|
|
}
|
|
|
|
const res = await authFetch("/api/wishes", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ title, content })
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showWishMsg("Wunsch eingereicht!");
|
|
document.getElementById("wishTitle").value = "";
|
|
document.getElementById("wishContent").value = "";
|
|
loadWishes();
|
|
} else {
|
|
showWishMsg("Fehler: " + (data.error || "unbekannt"), true);
|
|
}
|
|
}
|
|
|
|
async function voteWish(id) {
|
|
await authFetch(`/api/wishes/${id}/vote`, { method: "POST" });
|
|
loadWishes();
|
|
}
|
|
|
|
async function deleteWish(id) {
|
|
if (!confirm("Diesen Wunsch wirklich löschen?")) return;
|
|
await authFetch("/api/admin/wishes/" + id, { method: "DELETE" });
|
|
loadWishes();
|
|
}
|
|
|
|
async function setWishStatus(id, status) {
|
|
await authFetch(`/api/admin/wishes/${id}/status`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ status })
|
|
});
|
|
loadWishes();
|
|
}
|
|
|
|
function showWishMsg(text, isError) {
|
|
const el = document.getElementById("wishMsg");
|
|
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
|
el.textContent = text;
|
|
setTimeout(() => { el.textContent = ""; }, 4000);
|
|
}
|
|
|
|
loadWishes();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |