"); -} - -// setupClipboardPaste erlaubt Strg+V eines Bildes aus der Zwischenablage direkt -// im Formular: das Bild wandert in den File-Input (über DataTransfer, weil sich -// .files nicht direkt setzen lässt). Liegt kein Bild vor (Text o. Ä.), tun wir -// nichts und lassen den normalen Paste durchlaufen -> preventDefault nur, wenn -// wir wirklich ein Bild gegriffen haben. msgEl (optional) zeigt den Hinweis. -function setupClipboardPaste(form, msgEl) { - form.addEventListener("paste", (e) => { - const item = [...(e.clipboardData?.items ?? [])].find( - (it) => it.kind === "file" && it.type.startsWith("image/") - ); - if (!item) return; - - const original = item.getAsFile(); - if (!original) return; - e.preventDefault(); - - // Browser benennt Clipboard-Bilder uneinheitlich ("grafik.png" o. Ä.) -> neu - // verpacken mit sprechendem Namen. Endung aus dem MIME-Typ, sonst png. - const ext = (original.type.split("/")[1] || "png").toLowerCase(); - const file = new File([original], `zwischenablage.${ext}`, { type: original.type }); - - const input = form.querySelector("input[name='file']"); - const dt = new DataTransfer(); - dt.items.add(file); - input.files = dt.files; - - if (msgEl) msgEl.textContent = "Bild aus Zwischenablage übernommen."; - }); -} - -function renderEntry(e) { - const el = document.createElement("article"); - el.className = "card"; - - const when = new Date(e.created_at * 1000).toLocaleString("de-DE"); - - // Soft-gelöschter Beitrag: nur Platzhalter, damit der Thread navigierbar bleibt. - if (e.deleted) { - el.innerHTML = ` - -
-
-
- `;
- el.addEventListener("click", (ev) => {
- if (!ev.target.closest("a, button")) location.href = `/e/${e.pid}`;
- });
- return el;
- }
-
- const user = encodeURIComponent(e.username);
- let media = "";
- if (e.filepath) {
- media = `
-
- [deleted]
-
- })
- ${escapeHtml(e.username)} · ${when}
-
-
-
-
- `;
- setupVoting(el, e.pid);
- setupBump(el, e);
- el.addEventListener("click", (ev) => {
- if (!ev.target.closest("a, button")) location.href = `/e/${e.pid}`;
- });
- return el;
-}
-
-function setupVoting(el, pid) {
- const box = el.querySelector(".row");
- const counts = box.querySelector("span");
- const buttons = box.querySelectorAll(".ghost");
-
- function render(res) {
- if (!res.ok) {
- counts.textContent = errMsg(res.data, "Fehler");
- return;
- }
- const state = res.data;
- counts.textContent = `${state.left} / ${state.right}`;
- buttons.forEach((b) =>
- b.classList.toggle("selected", b.dataset.mode === state.selected)
- );
- }
-
- buttons.forEach((b) =>
- b.addEventListener("click", async () => {
- const fd = new FormData();
- fd.append("mode", b.dataset.mode);
- render(await api.post(`/entry/${pid}/vote`, fd));
- })
- );
-
- api.get(`/entry/${pid}/votes`).then(render);
-}
-
-// setupBump verdrahtet den Bump-Button. Der Cooldown wächst pro Beitrag linear
-// (Backend, siehe handleBump); hier wird nur angezeigt und auf 429 reagiert. Eine
-// Live-Aktualisierung gibt es bewusst nicht: der Zustand stammt aus den
-// Beitragsdaten beim Laden, plus die Antwort des eigenen Klicks.
-function setupBump(el, e) {
- const btn = el.querySelector(".bump");
- if (!btn) return;
- const cooldown = el.querySelector(".cooldown");
-
- // sekunden bis zum nächsten erlaubten Bump aus den geladenen Daten.
- const nowSec = () => Math.floor(Date.now() / 1000);
-
- // lock sperrt den Button; die Restzeit steht jetzt oben in der Byline, auf
- // Stunden aufgerundet (mindestens 1 -> nie "0h", solange Restzeit übrig ist).
- function lock(retryAfter) {
- btn.disabled = true;
- const hours = Math.max(1, Math.ceil(retryAfter / 3600));
- if (cooldown) cooldown.textContent = ` · Repost in ${hours}h`;
- }
-
- const remaining = e.last_bump + e.bump_count * 86400 - nowSec();
- if (e.bump_count > 0 && remaining > 0) lock(remaining);
-
- btn.addEventListener("click", async () => {
- const res = await api.post(`/entry/${e.pid}/bump`, new FormData());
- if (res.ok) {
- btn.textContent = `Repost (${res.data.bump_count})`;
- lock(res.data.retry_after || 86400);
- } else if (res.status === 429) {
- lock(res.data.retry_after || 86400);
- } else {
- // 401 (nicht angemeldet) o. Ä. -> Fehlertext zeigen, Button frei lassen.
- btn.textContent = errMsg(res.data, "Fehler");
- }
- });
-}
-
-// createFeed hängt Infinite-Scroll an feedEl/sentinelEl und lädt Seiten über
-// urlFor(page). Gibt { reset } zurück, um den Feed neu zu laden.
-function createFeed(feedEl, sentinelEl, urlFor) {
- let page = 0;
- let loading = false;
- let done = false;
-
- async function loadMore() {
- if (loading || done) return;
- loading = true;
-
- const res = await api.get(urlFor(page));
- if (!res.ok) {
- // Fehler nicht als "Ende" verbuchen: Meldung zeigen und weiteres
- // Nachladen stoppen, statt in einer Schleife neu anzufragen.
- done = true;
- const err = document.createElement("p");
- err.className = "msg";
- err.textContent = errMsg(res.data, "Feed konnte nicht geladen werden.");
- feedEl.appendChild(err);
- loading = false;
- return;
- }
- const entries = res.data;
- if (!entries.length) {
- done = true;
- const end = document.createElement("p");
- end.className = "muted";
- end.textContent = "YOU REACHED THE END!";
- feedEl.appendChild(end);
- } else {
- entries.forEach((e) => feedEl.appendChild(renderEntry(e)));
- page++;
- }
- loading = false;
-
- // Der IntersectionObserver feuert nur bei Zustandswechseln. Füllt die
- // gerade geladene Seite den Viewport nicht über den Sentinel hinaus, gäbe
- // es keinen Wechsel und nie ein Nachladen -> hier aktiv weiterladen, bis
- // der Sentinel aus dem Sichtbereich wandert oder das Ende erreicht ist.
- if (!done && sentinelVisible()) loadMore();
- }
-
- function sentinelVisible() {
- return sentinelEl.getBoundingClientRect().top <= window.innerHeight;
- }
-
- function reset() {
- page = 0;
- done = false;
- feedEl.innerHTML = "";
- loadMore();
- }
-
- // rootMargin lädt schon kurz vor Erreichen des Sentinels nach (flüssiger und
- // robust gegen den Fall eines 0-hohen Sentinels exakt am Dokumentende).
- const observer = new IntersectionObserver(
- (items) => {
- if (items.some((i) => i.isIntersecting)) loadMore();
- },
- { rootMargin: "300px" }
- );
- observer.observe(sentinelEl);
-
- loadMore();
- return { reset };
-}
diff --git a/web/js/stats.js b/web/js/stats.js
deleted file mode 100644
index 630b5a9..0000000
--- a/web/js/stats.js
+++ /dev/null
@@ -1,116 +0,0 @@
-"use strict";
-
-// Statistik-Seite: holt die Aggregate von /api/stats/detail und rendert Zahlen +
-// einfache CSS-Balken (keine Chart-Library, CSP-konform). Balkenbreiten werden
-// per CSSOM (el.style.width) gesetzt -> kein Inline-style-Attribut, daher von
-// der strikten CSP nicht betroffen.
-
-function plural(n, one, many) {
- return `${n} ${n === 1 ? one : many}`;
-}
-
-// numCard baut eine Kennzahl-Kachel: große Zahl + Beschriftung darunter.
-function numCard(value, label) {
- const cell = document.createElement("div");
- const num = document.createElement("span");
- num.className = "num";
- num.textContent = value;
- const cap = document.createElement("span");
- cap.className = "muted";
- cap.textContent = label;
- cell.append(num, cap);
- return cell;
-}
-
-// renderBars zeichnet eine Liste {label, value} als horizontale Balken. Die
-// Breite ist relativ zum größten Wert.
-function renderBars(container, items, formatLabel) {
- container.textContent = "";
- if (items.length === 0) {
- const p = document.createElement("p");
- p.className = "muted";
- p.textContent = "Noch keine Daten.";
- container.append(p);
- return;
- }
- const max = Math.max(...items.map((it) => it.value), 1);
- // Wertespalte für alle Zeilen gleich breit: an der längsten Zahl ausrichten
- // (in ch), damit die Tracks bündig sind und nicht je nach Stellenzahl wandern.
- const valWidth = Math.max(...items.map((it) => String(it.value).length));
- for (const it of items) {
- const row = document.createElement("div");
- row.className = "bar-row";
-
- const label = document.createElement("span");
- label.className = "bar-label";
- label.textContent = formatLabel ? formatLabel(it.label) : it.label;
-
- const track = document.createElement("div");
- track.className = "bar-track";
- const fill = document.createElement("div");
- fill.className = "bar-fill";
- fill.style.width = `${(it.value / max) * 100}%`;
- track.append(fill);
-
- const val = document.createElement("span");
- val.className = "bar-value";
- val.style.width = `${valWidth}ch`;
- val.textContent = it.value;
-
- row.append(label, track, val);
- container.append(row);
- }
-}
-
-async function render() {
- const res = await api.get("/stats/detail");
- if (!res.ok) {
- const p = document.createElement("p");
- p.className = "msg";
- p.textContent = errMsg(res.data, "Statistik konnte nicht geladen werden.");
- document.getElementById("stat-overview").append(p);
- return;
- }
- const s = res.data;
-
- // --- Auf einen Blick ---
- const overview = document.getElementById("stat-overview");
- overview.append(
- numCard(s.users ?? 0, s.users === 1 ? "Profil" : "Profile"),
- numCard(s.entries ?? 0, "Beiträge"),
- numCard(s.toplevel ?? 0, "davon Threads"),
- numCard(s.replies ?? 0, "davon Antworten"),
- numCard(s.votes?.left ?? 0, "Stimmen Links"),
- numCard(s.votes?.right ?? 0, "Stimmen Rechts"),
- );
-
- // --- Reichweite ---
- document.getElementById("stat-reach").append(
- numCard(s.impressions_total ?? 0, "Aufrufe gesamt"),
- numCard(s.visitors_total ?? 0, "Netze gesamt"),
- );
-
- // --- Netze nach Betreiber (ASN) ---
- renderBars(
- document.getElementById("stat-asns"),
- (s.top_asns ?? []).map((a) => ({ label: a.asn, value: a.hits })),
- );
-
- // --- Aufrufe pro Tag (Backend liefert absteigend -> für die Achse drehen) ---
- const daily = (s.daily ?? []).slice().reverse();
- const dayAxis = (day) => day.slice(5); // "MM-DD" reicht auf der Achse
- renderBars(
- document.getElementById("stat-daily"),
- daily.map((d) => ({ label: d.day, value: d.impressions })),
- dayAxis,
- );
-
- // --- Verschiedene Netze pro Tag ---
- renderBars(
- document.getElementById("stat-networks"),
- daily.map((d) => ({ label: d.day, value: d.visitors })),
- dayAxis,
- );
-}
-
-render();
diff --git a/web/js/user.js b/web/js/user.js
deleted file mode 100644
index 7fea2ec..0000000
--- a/web/js/user.js
+++ /dev/null
@@ -1,69 +0,0 @@
-"use strict";
-
-// Nutzername aus dem Pfad /u/
-
- ${linkify(e.content)}
- ${media}
-
- Antworten (${e.reply_count})
-
-
-
- – / –
-
-
-
- Kontrollverlust
- -Statistik
- -Auf einen Blick
- - -Reichweite
-- Seitenaufrufe werden mit anonymisierten Netzen gezählt (IPv4 /16, IPv6 /32). - „Netze" ist eine grobe Annäherung an Besucher, keine Personenzählung. -
- - -Netze nach Betreiber
-- Aufrufe je autonomem System (Netzbetreiber), aufgelöst über GeoLite2-ASN. -
- - -Aufrufe pro Tag
- - -Verschiedene Netze pro Tag
- -Kontrollverlust
- -
- 
-
-
-
-
-
-
-
-
-
-
-
-
-
- Einstellungen
-
-
- Profilbild ändern
- - -
-
- Name ändern
- - -
-
-