318 lines
9.8 KiB
HTML
318 lines
9.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Umfragen</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;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
button {
|
|
background: #2c7a3d;
|
|
border: none;
|
|
color: white;
|
|
padding: 8px 14px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
button.danger { background: #a83232; padding: 4px 10px; font-size: 12px; }
|
|
button.secondary { background: #555; padding: 4px 10px; font-size: 12px; }
|
|
button:hover { opacity: 0.85; }
|
|
|
|
.poll-item {
|
|
border-bottom: 1px solid #2a2a2a;
|
|
padding: 16px 0;
|
|
}
|
|
.poll-item:last-child { border-bottom: none; }
|
|
.poll-question { margin: 0 0 4px 0; font-size: 16px; }
|
|
.poll-meta { color: #777; font-size: 12px; margin-bottom: 10px; }
|
|
.closed-badge {
|
|
display: inline-block;
|
|
background: #444;
|
|
color: #ccc;
|
|
border-radius: 4px;
|
|
padding: 2px 8px;
|
|
font-size: 11px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.option-row {
|
|
margin-bottom: 6px;
|
|
}
|
|
.option-btn {
|
|
width: 100%;
|
|
text-align: left;
|
|
background: #222;
|
|
border: 1px solid #444;
|
|
color: #eee;
|
|
padding: 8px 10px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.option-btn.voted { border-color: #2c7a3d; }
|
|
.option-bar {
|
|
position: absolute;
|
|
left: 0; top: 0; bottom: 0;
|
|
background: rgba(44,122,61,0.35);
|
|
z-index: 0;
|
|
}
|
|
.option-label {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.option-input-row { display: flex; gap: 6px; margin-bottom: 6px; }
|
|
.option-input-row input { margin-bottom: 0; }
|
|
.option-input-row button { padding: 6px 10px; }
|
|
|
|
.admin-controls { margin-top: 10px; display: flex; gap: 6px; }
|
|
|
|
.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>📊 Umfragen</h1>
|
|
|
|
<main>
|
|
<div class="panel hidden" id="createPanel">
|
|
<h2>Neue Umfrage erstellen</h2>
|
|
<input id="pollQuestion" placeholder="Frage (z.B. 'Welches Feature als nächstes?')">
|
|
<div id="optionInputs"></div>
|
|
<button onclick="addOptionInput()" style="background:#555; margin-bottom:10px;">+ Option hinzufügen</button>
|
|
<br>
|
|
<button onclick="submitPoll()">Umfrage veröffentlichen</button>
|
|
<div class="msg" id="createMsg"></div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Alle Umfragen</h2>
|
|
<div id="pollList"></div>
|
|
<div class="empty-hint hidden" id="pollEmpty">Noch keine Umfragen 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";
|
|
}
|
|
|
|
if (isAdmin) {
|
|
document.getElementById("createPanel").classList.remove("hidden");
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
// -------------------------------------------------------------
|
|
// UMFRAGE ERSTELLEN (Admin)
|
|
// -------------------------------------------------------------
|
|
function addOptionInput() {
|
|
const wrap = document.getElementById("optionInputs");
|
|
const row = document.createElement("div");
|
|
row.className = "option-input-row";
|
|
row.innerHTML = `
|
|
<input type="text" class="pollOptionInput" placeholder="Antwortoption">
|
|
<button onclick="this.parentElement.remove()" class="danger">X</button>
|
|
`;
|
|
wrap.appendChild(row);
|
|
}
|
|
addOptionInput();
|
|
addOptionInput();
|
|
|
|
async function submitPoll() {
|
|
const question = document.getElementById("pollQuestion").value.trim();
|
|
const options = [...document.querySelectorAll(".pollOptionInput")]
|
|
.map(i => i.value.trim())
|
|
.filter(Boolean);
|
|
|
|
if (!question || options.length < 2) {
|
|
showMsg("createMsg", "Frage und mindestens 2 Optionen sind Pflicht.", true);
|
|
return;
|
|
}
|
|
|
|
const res = await authFetch("/api/admin/polls", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ question, options })
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showMsg("createMsg", "Umfrage veröffentlicht!");
|
|
document.getElementById("pollQuestion").value = "";
|
|
document.getElementById("optionInputs").innerHTML = "";
|
|
addOptionInput();
|
|
addOptionInput();
|
|
loadPolls();
|
|
} else {
|
|
showMsg("createMsg", "Fehler: " + (data.error || "unbekannt"), true);
|
|
}
|
|
}
|
|
|
|
// -------------------------------------------------------------
|
|
// UMFRAGEN LADEN/ANZEIGEN
|
|
// -------------------------------------------------------------
|
|
async function loadPolls() {
|
|
const res = await authFetch("/api/polls");
|
|
const data = await res.json();
|
|
renderPolls(data.polls || []);
|
|
}
|
|
|
|
function renderPolls(polls) {
|
|
const list = document.getElementById("pollList");
|
|
const empty = document.getElementById("pollEmpty");
|
|
list.innerHTML = "";
|
|
|
|
if (polls.length === 0) {
|
|
empty.classList.remove("hidden");
|
|
return;
|
|
}
|
|
empty.classList.add("hidden");
|
|
|
|
polls.forEach(poll => {
|
|
const totalVotes = poll.options.reduce((sum, o) => sum + o.votes, 0);
|
|
const date = new Date(poll.createdAt).toLocaleDateString("de-DE");
|
|
|
|
const div = document.createElement("div");
|
|
div.className = "poll-item";
|
|
|
|
const optionsHtml = poll.options.map(o => {
|
|
const pct = totalVotes > 0 ? Math.round((o.votes / totalVotes) * 100) : 0;
|
|
const voted = poll.myVote === o.id;
|
|
return `
|
|
<div class="option-row">
|
|
<button class="option-btn ${voted ? "voted" : ""}" data-poll="${poll.id}" data-option="${o.id}" ${poll.closed ? "disabled" : ""}>
|
|
<span class="option-bar" style="width:${pct}%;"></span>
|
|
<span class="option-label">
|
|
<span>${voted ? "✓ " : ""}${escapeHtml(o.text)}</span>
|
|
<span>${pct}% (${o.votes})</span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
`;
|
|
}).join("");
|
|
|
|
let adminHtml = "";
|
|
if (isAdmin) {
|
|
adminHtml = `
|
|
<div class="admin-controls">
|
|
${!poll.closed ? `<button class="secondary closePollBtn" data-id="${poll.id}">Schließen</button>` : ""}
|
|
<button class="danger deletePollBtn" data-id="${poll.id}">Löschen</button>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
div.innerHTML = `
|
|
<h3 class="poll-question">${escapeHtml(poll.question)}${poll.closed ? '<span class="closed-badge">Geschlossen</span>' : ""}</h3>
|
|
<div class="poll-meta">${date} — von ${escapeHtml(poll.createdBy)} — ${totalVotes} Stimme(n)</div>
|
|
${optionsHtml}
|
|
${adminHtml}
|
|
`;
|
|
list.appendChild(div);
|
|
});
|
|
|
|
list.querySelectorAll(".option-btn:not([disabled])").forEach(btn => {
|
|
btn.onclick = () => vote(btn.dataset.poll, btn.dataset.option);
|
|
});
|
|
list.querySelectorAll(".closePollBtn").forEach(btn => {
|
|
btn.onclick = () => closePoll(btn.dataset.id);
|
|
});
|
|
list.querySelectorAll(".deletePollBtn").forEach(btn => {
|
|
btn.onclick = () => deletePoll(btn.dataset.id);
|
|
});
|
|
}
|
|
|
|
async function vote(pollId, optionId) {
|
|
const res = await authFetch(`/api/polls/${pollId}/vote`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ optionId: Number(optionId) })
|
|
});
|
|
const data = await res.json();
|
|
if (data.ok) loadPolls();
|
|
else alert(data.error || "Abstimmen fehlgeschlagen.");
|
|
}
|
|
|
|
async function closePoll(id) {
|
|
if (!confirm("Diese Umfrage wirklich schließen? Es kann dann nicht mehr abgestimmt werden.")) return;
|
|
await authFetch(`/api/admin/polls/${id}/close`, { method: "POST" });
|
|
loadPolls();
|
|
}
|
|
|
|
async function deletePoll(id) {
|
|
if (!confirm("Diese Umfrage wirklich löschen?")) return;
|
|
await authFetch(`/api/admin/polls/${id}`, { method: "DELETE" });
|
|
loadPolls();
|
|
}
|
|
|
|
function showMsg(elId, text, isError) {
|
|
const el = document.getElementById(elId);
|
|
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
|
el.textContent = text;
|
|
setTimeout(() => { el.textContent = ""; }, 4000);
|
|
}
|
|
|
|
loadPolls();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |