Erster Commit
This commit is contained in:
+318
@@ -0,0 +1,318 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user