200 lines
5.6 KiB
HTML
200 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Anmerkungen</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; }
|
|
|
|
textarea {
|
|
width: 100%;
|
|
min-height: 100px;
|
|
background: #222;
|
|
border: 1px solid #444;
|
|
color: #eee;
|
|
padding: 8px 10px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
}
|
|
|
|
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; padding: 4px 8px; font-size: 12px; margin-top: 0; }
|
|
button:hover { opacity: 0.85; }
|
|
|
|
.remark-item {
|
|
border-bottom: 1px solid #2a2a2a;
|
|
padding: 12px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
.remark-item:last-child { border-bottom: none; }
|
|
.remark-meta { color: #777; font-size: 12px; margin-bottom: 4px; }
|
|
.remark-content { white-space: pre-wrap; line-height: 1.5; }
|
|
|
|
.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>📝 Anmerkungen</h1>
|
|
|
|
<main>
|
|
<div class="panel">
|
|
<h2>Anmerkung schreiben</h2>
|
|
<p style="color:#888; font-size:13px; margin-top:0;">
|
|
Geht direkt und privat an die Admins - z.B. Bug-Meldungen, Kritik, Lob.
|
|
</p>
|
|
<textarea id="remarkContent" placeholder="Deine Anmerkung..."></textarea>
|
|
<button onclick="submitRemark()">Absenden</button>
|
|
<div class="msg" id="remarkMsg"></div>
|
|
</div>
|
|
|
|
<div class="panel hidden" id="adminPanel">
|
|
<h2>Eingegangene Anmerkungen (nur Admins)</h2>
|
|
<div id="remarkList"></div>
|
|
<div class="empty-hint hidden" id="remarkEmpty">Noch keine Anmerkungen 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 submitRemark() {
|
|
const content = document.getElementById("remarkContent").value.trim();
|
|
if (!content) {
|
|
showMsg("Bitte einen Text eingeben.", true);
|
|
return;
|
|
}
|
|
|
|
const res = await authFetch("/api/remarks", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ content })
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (data.ok) {
|
|
showMsg("Danke, deine Anmerkung wurde übermittelt!");
|
|
document.getElementById("remarkContent").value = "";
|
|
if (isAdmin) loadRemarks();
|
|
} else {
|
|
showMsg("Fehler: " + (data.error || "unbekannt"), true);
|
|
}
|
|
}
|
|
|
|
async function loadRemarks() {
|
|
if (!isAdmin) return;
|
|
document.getElementById("adminPanel").classList.remove("hidden");
|
|
|
|
const res = await authFetch("/api/admin/remarks");
|
|
const data = await res.json();
|
|
renderRemarks(data.remarks || []);
|
|
}
|
|
|
|
function renderRemarks(items) {
|
|
const list = document.getElementById("remarkList");
|
|
const empty = document.getElementById("remarkEmpty");
|
|
list.innerHTML = "";
|
|
|
|
if (items.length === 0) {
|
|
empty.classList.remove("hidden");
|
|
return;
|
|
}
|
|
empty.classList.add("hidden");
|
|
|
|
items.forEach(r => {
|
|
const date = new Date(r.created_at).toLocaleString("de-DE");
|
|
const div = document.createElement("div");
|
|
div.className = "remark-item";
|
|
div.innerHTML = `
|
|
<div>
|
|
<div class="remark-meta">${date} — ${escapeHtml(r.username)}</div>
|
|
<div class="remark-content">${escapeHtml(r.content)}</div>
|
|
</div>
|
|
<button class="danger deleteBtn" data-id="${r.id}">Löschen</button>
|
|
`;
|
|
list.appendChild(div);
|
|
});
|
|
|
|
list.querySelectorAll(".deleteBtn").forEach(btn => {
|
|
btn.onclick = () => deleteRemark(btn.dataset.id);
|
|
});
|
|
}
|
|
|
|
async function deleteRemark(id) {
|
|
if (!confirm("Diese Anmerkung wirklich löschen?")) return;
|
|
await authFetch("/api/admin/remarks/" + id, { method: "DELETE" });
|
|
loadRemarks();
|
|
}
|
|
|
|
function showMsg(text, isError) {
|
|
const el = document.getElementById("remarkMsg");
|
|
el.style.color = isError ? "#e06c6c" : "#6fbf73";
|
|
el.textContent = text;
|
|
setTimeout(() => { el.textContent = ""; }, 4000);
|
|
}
|
|
|
|
loadRemarks();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |