Verwaltungsseite perfektioniert: Team-Verwaltung für Modis/Scouts/Creator/Manager

Nutzer-Wunsch 21.08.2026: "überall wo Modis sind oder Scouts oder Manager, oder Creator, will ich dass ich die easy über meine Verwaltungsseite hinzufüge und die automatisch in der Website hinzugefügt werden ... auch mit Fotos und TikTok Link." Backend (server-internal, braucht Filipes manuellen Deploy): - Neue Tabelle team_members (Migration 0007) für alle vier Kategorien gemeinsam -- ergänzt, überschreibt NIE die von Hand gepflegten Einträge in data-modis.js/data-scouts.js/data-creator.js. - routes/team.js: öffentliches Lesen (nur aktive Mitglieder, optional nach Kategorie gefiltert), TEAM_MANAGE-geschütztes Anlegen/Bearbeiten/ Löschen, Foto-Upload (gleiches Muster wie "Event des Jahres"), automatische Übersetzung von Rolle/Bio/Zitat wie bei anderen admin-gepflegten Texten. Slug global eindeutig (mit automatischer Kollisionsauflösung), TikTok-Kurzname wird zu voller URL ergänzt. 27 Tests in isolierter Testumgebung geprüft (kein better-sqlite3 lokal kompilierbar). Frontend: - window.dogiTeamLaden() in main.js: holt admin-gepflegte Mitglieder einer (oder aller) Kategorien und bringt sie in exakt dieselbe Form wie die bestehenden data-*.js-Einträge. - team-scouts.html/team-modis.html/creator.html hängen das Ergebnis einfach an ihre bestehenden Arrays an und rendern erneut -- exakt derselbe Look wie die schon bestehenden Profile (Foto/Avatar-Initiale, Rolle, Zitat, TikTok-Button). creator.html hatte bisher ein "return" bei leerem CREATORS-Array, wodurch admin-Creator NIE geladen worden wären -- gefixt. team-modis.html berücksichtigt Rang/Rang-Bezeichnung für die Pyramide. - Neue Sektion "Weitere Manager" auf manager.html, komplett unsichtbar bis der erste Manager angelegt wird (data-manager.js neu, wie data-creator.js aktuell leer). - profil.html sucht jetzt kategorieübergreifend auch in admin-gepflegten Profilen, inkl. korrektem Theme/Zurück-Link auch für Manager. Verwaltung: neue Sektion "Team verwalten" (TEAM_MANAGE-Berechtigung) -- ein Formular für alle vier Kategorien mit Foto-Sofort-Upload, TikTok-Feld, Bio/Zitat, bedingten Rang-Feldern (nur Modi), Kategorie- Filterleiste und Bearbeiten/Löschen pro Eintrag. Beim Testen mit Playwright einen echten Syntaxfehler gefunden und gefixt (ASCII-Anführungszeichen statt schließendem „" in einem Statustext), der das GESAMTE Verwaltungs-Skript und damit die komplette Seite lahmgelegt hätte. Cache-Busting-Version auf 20260821j erhöht. Co-Authored-By: Claude Sonnet 5 <[email protected]>
2026-08-21 03:06:21 +02:00
parent 8ead1b750b
commit 7060a4a6ae
45 changed files with 1077 additions and 247 deletions
@@ -30,6 +30,7 @@ const MIGRATION_FILES = [
  "0004_supporter_oauth_providers.sql",
  "0005_supporter_polls.sql",
  "0006_testimonials.sql",
+  "0007_team_members.sql",
 ];

 function alreadyApplied(name) {
@@ -71,6 +71,9 @@ import {
 import {
  createPoll, listPolls, closePoll, reopenPoll, deletePoll, getActivePollPublic, voteOnPoll,
 } from "./routes/polls.js";
+import {
+  getTeamPublic, getTeamAdmin, saveTeamMember, deleteTeamMember, uploadTeamPhoto,
+} from "./routes/team.js";

 initDb();

@@ -86,6 +89,10 @@ app.disable("x-powered-by"); // verrät sonst unnötig den eingesetzten Technik-
 const UPLOADS_BASIS_DIR = process.env.UPLOADS_DIR || "/var/lib/dogfather-internal/uploads";
 const EVENTS_UPLOADS_DIR = `${UPLOADS_BASIS_DIR}/events`;
 mkdirSync(EVENTS_UPLOADS_DIR, { recursive: true });
+// Team-Fotos (21.08.2026, "Verwaltungsseite perfektionieren"-Auftrag) --
+// eigener Unterordner, gleiches Muster wie bei den Event-Bildern oben.
+const TEAM_UPLOADS_DIR = `${UPLOADS_BASIS_DIR}/team`;
+mkdirSync(TEAM_UPLOADS_DIR, { recursive: true });

 const ERLAUBTE_BILD_TYPEN = new Set(["image/jpeg", "image/png", "image/webp"]);
 const bildUpload = multer({
@@ -99,6 +106,14 @@ const bildUpload = multer({
  limits: { fileSize: 5 * 1024 * 1024 }, // 5 MB
  fileFilter: (req, file, cb) => cb(null, ERLAUBTE_BILD_TYPEN.has(file.mimetype)),
 });
+const teamBildUpload = multer({
+  storage: multer.diskStorage({
+    destination: (req, file, cb) => cb(null, TEAM_UPLOADS_DIR),
+    filename: (req, file, cb) => cb(null, `${crypto.randomUUID()}${extname(file.originalname).toLowerCase()}`),
+  }),
+  limits: { fileSize: 5 * 1024 * 1024 }, // 5 MB
+  fileFilter: (req, file, cb) => cb(null, ERLAUBTE_BILD_TYPEN.has(file.mimetype)),
+});

 app.use((req, res, next) => {
  res.setHeader("X-Content-Type-Options", "nosniff");
@@ -164,6 +179,7 @@ app.get("/events-of-year", wrap(getEventsPublic));
 app.get("/special-event", wrap(getSpecialEventPublic));
 app.post("/testimonials/submit", wrap(submitTestimonial));
 app.get("/testimonials", wrap(getApprovedTestimonialsPublic));
+app.get("/team", wrap(getTeamPublic));

 app.post("/supporter/register", wrap(registerSupporter));
 app.post("/supporter/verify-email", wrap(verifySupporterEmail));
@@ -210,6 +226,12 @@ app.post("/admin/testimonials/list", requireTeamSession, withSession(getTestimon
 app.post("/admin/testimonials/status", requireTeamSession, withSession(setTestimonialStatus));
 app.post("/admin/testimonials/delete", requireTeamSession, withSession(deleteTestimonial));

+// Team-Mitglieder (Modis/Scouts/Creator/Manager) — 21.08.2026
+app.post("/admin/team/list", requireTeamSession, withSession(getTeamAdmin));
+app.post("/admin/team/save", requireTeamSession, withSession(saveTeamMember));
+app.post("/admin/team/delete", requireTeamSession, withSession(deleteTeamMember));
+app.post("/admin/team/upload-photo", requireTeamSession, teamBildUpload.single("image"), withSession(uploadTeamPhoto));
+
 app.post("/admin/roles/list", requireTeamSession, withSession(listRoles));
 app.post("/admin/roles/create", requireTeamSession, withSession(createRole));
 app.post("/admin/roles/update", requireTeamSession, withSession(updateRole));
@@ -49,6 +49,7 @@ export const PERMISSIONS = {

  EVENTS_MANAGE: "Startseite: \"Event des Jahres\" verwalten",
  TESTIMONIALS_MANAGE: "Stimmen/Testimonials verwalten",
+  TEAM_MANAGE: "Team-Mitglieder verwalten (Modis/Scouts/Creator/Manager)",
 };

 export const PERMISSION_GROUPS = [
@@ -61,6 +62,7 @@ export const PERMISSION_GROUPS = [
  { label: "DogiCrew 🩵", keys: ["SUPPORTER_VIEW", "SUPPORTER_MANAGE_PREMIUMS", "SUPPORTER_MANAGE_COLLECTIONS", "POLLS_MANAGE"] },
  { label: "Startseite", keys: ["EVENTS_MANAGE"] },
  { label: "Stimmen", keys: ["TESTIMONIALS_MANAGE"] },
+  { label: "Team", keys: ["TEAM_MANAGE"] },
 ];

 export const OWNER_ONLY_ACTIONS = [
@@ -0,0 +1,228 @@
+/* =====================================================================
+   routes/team.js — Team-Mitglieder-Verwaltung (21.08.2026, Nutzer-Wunsch:
+   "überall wo Modis sind oder Scouts oder Manager, oder Creator, will ich
+   dass ich die easy über meine Verwaltungsseite hinzufüge und die
+   automatisch in der Website hinzugefügt werden ... auch mit Fotos und
+   TikTok Link").
+
+   Ergänzt (überschreibt NICHT) die von Hand gepflegten Einträge in
+   assets/js/data-modis.js/data-scouts.js/data-creator.js/data-manager.js.
+   Die Website mischt beide Quellen zu einer gemeinsamen Liste (siehe
+   window.dogiTeamLaden() in main.js) -- ein Fehler hier kann die
+   bestehenden, fest einprogrammierten Profile (VanVan, Patrick, ...) nie
+   verschwinden lassen.
+
+   Öffentlicher Lesezugriff (getTeamPublic) ohne Session, nur AKTIVE
+   Mitglieder -- Schreibzugriff nur mit TEAM_MANAGE-Berechtigung.
+   ===================================================================== */
+import { db } from "../db.js";
+import { generateId, nowIso } from "../lib/crypto.js";
+import { hasPermission } from "../lib/permissions.js";
+import { json } from "../lib/http.js";
+import { logAction } from "../lib/audit.js";
+import { uebersetzeAlleSprachen } from "../lib/translate.js";
+
+const KATEGORIEN = ["modi", "scout", "creator", "manager"];
+
+function can(session, key) {
+  if (!session) return false;
+  if (session.isOwner) return true;
+  return hasPermission(session.permissions, session.overrides, key);
+}
+
+function forbidden(res) {
+  return json(res, { ok: false, error: "Keine Berechtigung." }, 403);
+}
+
+function parseJsonFeld(text) {
+  if (!text) return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return null;
+  }
+}
+
+/** Slug aus dem Namen ableiten (Kleinbuchstaben, Umlaute vereinfacht,
+    alles außer a-z0-9 wird zu "-"), falls die Verwaltung keinen eigenen
+    Slug mitschickt -- selbes Muster wie an anderen Stellen der Seite. */
+function slugAusName(name) {
+  return String(name || "")
+    .toLowerCase()
+    .replace(/ä/g, "ae").replace(/ö/g, "oe").replace(/ü/g, "ue").replace(/ß/g, "ss")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 60);
+}
+
+function oeffentlichesFeld(row) {
+  return {
+    id: row.id,
+    kategorie: row.kategorie,
+    name: row.name,
+    slug: row.slug,
+    rolle: parseJsonFeld(row.rolle_json),
+    foto: row.foto_url || "",
+    tiktok: row.tiktok_url || "",
+    bio: parseJsonFeld(row.bio_json),
+    zitat: parseJsonFeld(row.zitat_json),
+    rang: row.rang,
+    rangLabel: parseJsonFeld(row.rang_label_json),
+  };
+}
+
+function vollesFeld(row) {
+  return {
+    ...oeffentlichesFeld(row),
+    status: row.status,
+    reihenfolge: row.reihenfolge,
+    erstelltAm: row.erstellt_am,
+    geaendertAm: row.geaendert_am,
+  };
+}
+
+/** Öffentlich, keine Session: nur AKTIVE Mitglieder. Ohne ?kategorie=
+    kommen alle vier Kategorien zusammen zurück (genutzt von profil.html,
+    das vorab nicht weiß, zu welcher Kategorie ein slug gehört). */
+export async function getTeamPublic(req, res) {
+  const kategorie = String(req.query?.kategorie || "").trim();
+  let rows;
+  if (kategorie && KATEGORIEN.includes(kategorie)) {
+    rows = db
+      .prepare(`SELECT * FROM team_members WHERE kategorie = ? AND status = 'aktiv' ORDER BY reihenfolge ASC, erstellt_am ASC`)
+      .all(kategorie);
+  } else {
+    rows = db
+      .prepare(`SELECT * FROM team_members WHERE status = 'aktiv' ORDER BY reihenfolge ASC, erstellt_am ASC`)
+      .all();
+  }
+  return json(res, { ok: true, mitglieder: rows.map(oeffentlichesFeld) });
+}
+
+/** Für die Verwaltung: ALLE Mitglieder aller Kategorien/Status. */
+export async function getTeamAdmin(req, res, session) {
+  if (!can(session, "TEAM_MANAGE")) return forbidden(res);
+  const rows = db.prepare(`SELECT * FROM team_members ORDER BY kategorie ASC, reihenfolge ASC, erstellt_am ASC`).all();
+  return json(res, { ok: true, mitglieder: rows.map(vollesFeld) });
+}
+
+/** NUR Foto-Upload, kein JSON-Body (multipart, siehe index.js multer-Middleware). */
+export async function uploadTeamPhoto(req, res, session) {
+  if (!can(session, "TEAM_MANAGE")) return forbidden(res);
+  if (!req.file) return json(res, { ok: false, error: "Keine Bilddatei erhalten." }, 400);
+  const url = `/uploads/team/${req.file.filename}`;
+  logAction(session.actor, "team.photo_uploaded", req.file.filename, null);
+  return json(res, { ok: true, url });
+}
+
+export async function saveTeamMember(req, res, session) {
+  if (!can(session, "TEAM_MANAGE")) return forbidden(res);
+  const body = req.body || {};
+  const id = String(body.id || "").trim() || null;
+
+  const kategorie = String(body.kategorie || "").trim();
+  if (!KATEGORIEN.includes(kategorie)) {
+    return json(res, { ok: false, error: "Ungültige Kategorie." }, 400);
+  }
+  const name = String(body.name || "").trim().slice(0, 60);
+  if (!name) return json(res, { ok: false, error: "Name ist Pflicht." }, 400);
+
+  const rolleDe = String(body.rolle || "").trim().slice(0, 120);
+  if (!rolleDe) return json(res, { ok: false, error: "Rolle ist Pflicht." }, 400);
+
+  let slug = String(body.slug || "").trim().toLowerCase().replace(/[^a-z0-9-]/g, "").slice(0, 60) || slugAusName(name);
+  if (!slug) return json(res, { ok: false, error: "Konnte keinen gültigen Slug ableiten -- bitte Namen prüfen." }, 400);
+
+  // Slug muss GLOBAL eindeutig sein (profil.html sucht kategorieübergreifend).
+  // Kollidiert er mit einem ANDEREN Eintrag (nicht dem gerade bearbeiteten),
+  // wird er automatisch mit "-2", "-3", ... eindeutig gemacht statt hart
+  // abzulehnen -- Dogi/VanVan sollen nicht wegen eines Namensdopplers
+  // (z.B. zwei Personen mit Spitzname "Foxy") hängen bleiben.
+  const slugBelegt = (kandidat) => {
+    const row = db.prepare(`SELECT id FROM team_members WHERE slug = ?`).get(kandidat);
+    return row && row.id !== id;
+  };
+  if (slugBelegt(slug)) {
+    let zaehler = 2;
+    while (slugBelegt(`${slug}-${zaehler}`)) zaehler++;
+    slug = `${slug}-${zaehler}`;
+  }
+
+  const tiktokRoh = String(body.tiktok || "").trim().slice(0, 200);
+  let tiktokUrl = null;
+  if (tiktokRoh) {
+    if (/^https?:\/\//i.test(tiktokRoh)) {
+      tiktokUrl = tiktokRoh;
+    } else {
+      // Bequemlichkeit: reiner Benutzername (mit oder ohne @) wird
+      // automatisch zu einer vollen TikTok-URL ergänzt.
+      tiktokUrl = `https://www.tiktok.com/@${tiktokRoh.replace(/^@/, "")}`;
+    }
+  }
+
+  const bioDe = String(body.bio || "").trim().slice(0, 800);
+  const zitatDe = String(body.zitat || "").trim().slice(0, 200);
+  const fotoUrl = String(body.foto || "").trim().slice(0, 300) || null;
+
+  const rang = body.rang !== undefined && body.rang !== null && body.rang !== ""
+    ? Math.max(1, Math.min(99, Number(body.rang) || 0)) : null;
+  const rangLabelDe = String(body.rangLabel || "").trim().slice(0, 40);
+
+  const reihenfolge = Number.isFinite(Number(body.reihenfolge)) ? Number(body.reihenfolge) : 0;
+  const status = body.status === "pausiert" ? "pausiert" : "aktiv";
+
+  const [rolle, bio, zitat, rangLabel] = await Promise.all([
+    uebersetzeAlleSprachen(rolleDe),
+    bioDe ? uebersetzeAlleSprachen(bioDe) : Promise.resolve(null),
+    zitatDe ? uebersetzeAlleSprachen(zitatDe) : Promise.resolve(null),
+    rangLabelDe ? uebersetzeAlleSprachen(rangLabelDe) : Promise.resolve(null),
+  ]);
+
+  const jetzt = nowIso();
+
+  if (id) {
+    const info = db
+      .prepare(
+        `UPDATE team_members SET
+           kategorie = ?, name = ?, slug = ?, rolle_json = ?, foto_url = ?, tiktok_url = ?,
+           bio_json = ?, zitat_json = ?, rang = ?, rang_label_json = ?, reihenfolge = ?,
+           status = ?, geaendert_am = ?, geaendert_von = ?
+         WHERE id = ?`
+      )
+      .run(
+        kategorie, name, slug, JSON.stringify(rolle), fotoUrl, tiktokUrl,
+        bio ? JSON.stringify(bio) : null, zitat ? JSON.stringify(zitat) : null,
+        rang, rangLabel ? JSON.stringify(rangLabel) : null, reihenfolge,
+        status, jetzt, session.actor, id
+      );
+    if (info.changes === 0) return json(res, { ok: false, error: "Nicht gefunden." }, 404);
+    logAction(session.actor, "team.updated", id, { name, kategorie });
+    const row = db.prepare(`SELECT * FROM team_members WHERE id = ?`).get(id);
+    return json(res, { ok: true, mitglied: vollesFeld(row) });
+  }
+
+  const neueId = generateId();
+  db.prepare(
+    `INSERT INTO team_members
+       (id, kategorie, name, slug, rolle_json, foto_url, tiktok_url, bio_json, zitat_json,
+        rang, rang_label_json, reihenfolge, status, erstellt_am, geaendert_am, erstellt_von, geaendert_von)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+  ).run(
+    neueId, kategorie, name, slug, JSON.stringify(rolle), fotoUrl, tiktokUrl,
+    bio ? JSON.stringify(bio) : null, zitat ? JSON.stringify(zitat) : null,
+    rang, rangLabel ? JSON.stringify(rangLabel) : null, reihenfolge,
+    status, jetzt, jetzt, session.actor, session.actor
+  );
+  logAction(session.actor, "team.created", neueId, { name, kategorie });
+  const row = db.prepare(`SELECT * FROM team_members WHERE id = ?`).get(neueId);
+  return json(res, { ok: true, mitglied: vollesFeld(row) });
+}
+
+export async function deleteTeamMember(req, res, session) {
+  if (!can(session, "TEAM_MANAGE")) return forbidden(res);
+  const id = String(req.body?.id || "");
+  const info = db.prepare(`DELETE FROM team_members WHERE id = ?`).run(id);
+  if (info.changes === 0) return json(res, { ok: false, error: "Nicht gefunden." }, 404);
+  logAction(session.actor, "team.deleted", id, null);
+  return json(res, { ok: true });
+}