Workspace: Wissens-Bibliothek -- 20 Kategorien, Suche, Filter, Pflege
Wichtigster Befund vorab: Es gab noch KEINEN PDF-Bereich. Weder auf der Website (28 Seiten, keine davon Anleitungen) noch auf dem Server (null PDFs). Es wurde also nichts umstrukturiert, sondern neu gebaut -- und damit war die erste Frage nicht "wie sieht es aus", sondern "wie kommen die PDFs spaeter rein". Eine feste Liste im Code waere nach drei Monaten unbrauchbar gewesen. Filipe hat entschieden: eigener Pflegebereich, und alles nur fuer das Team. Die Bibliothek liegt deshalb komplett im Workspace hinter dem Login, nicht auf der oeffentlichen Seite. GLIEDERUNG Zwanzig Kategorien woertlich nach Vorgabe, gebuendelt in sechs Welten: TikTok, Streaming einrichten, Bild & Ton, Uebertragung & Aussehen, Inhalt & Menschen, Hilfe & Schnellstart. Zwanzig gleich aussehende Kacheln untereinander findet niemand -- gebuendelt sucht man erst die Welt, und darin stehen nur noch drei bis vier. Jede Welt hat ihre eigene Farbe, jede Kategorie ihr eigenes Symbol (20 verschiedene, keins doppelt). Die Kategorietexte sind Filipes Beschreibungen -- sie beantworten beim Einsortieren die einzige Frage, die man wirklich hat. Die Gliederung steht im Code, nicht in der Datenbank: Sie ist eine bewusste Ordnung, keine Nutzdaten. JEDE PDF HAT GENAU EINE HAUPTKATEGORIE, alles Weitere laeuft ueber Tags -- so gibt es jede Anleitung nur einmal, sie ist aber ueber mehrere Begriffe auffindbar. Genau wie gefordert. SUCHE UND FILTER Suche ueber Titel, Beschreibung, Tags und Dateiname. Filter nach Stufe (Einsteiger / Fortgeschritten / Profi), Geraet und Tag. Zwei Details: - "PC" zeigt auch die Anleitungen, die fuer BEIDE Geraete gelten -- sonst filtert man sich versehentlich die Haelfte weg. - Der Tag-Filter sucht mit Kommas drumherum, sonst wuerde "pc" auch bei "pc-spiele" anschlagen. Sobald gesucht oder gefiltert wird, verschwinden die Kacheln und es erscheinen Treffer. Wer sucht, will nicht erst noch klicken. Der Zustand steht in der Adresse (?k=obs&tag=...). Damit funktionieren Zurueck-Taste, Neuladen und Weiterschicken. Eine Kategorie, die man niemandem verlinken kann, ist keine Seite. Geprueft. SICHERHEIT Hochgeladen wird nur, was WIRKLICH eine PDF ist -- geprueft an den ersten Bytes (%PDF-), nicht an der Dateiendung. Die kann jeder umbenennen. Geprueft mit einer als .pdf getarnten HTML-Datei mit Skript: abgewiesen. Nur weil diese Pruefung existiert, darf die Datei ueberhaupt im Browser angezeigt werden statt bloss heruntergeladen -- und selbst dann mit strenger CSP und nosniff. Lesen darf jeder Angemeldete, pflegen nur DogFather. Geprueft: Creator und Scout bekommen 403 beim Hochladen und sehen keine Bearbeiten-Knoepfe. Ohne Anmeldung ist auch die Datei selbst nicht erreichbar (401). Bricht das Anlegen nach dem Schreiben ab, wird die Datei wieder geloescht -- sonst laege sie fuer immer verwaist auf der Platte. Beim Bearbeiten wird die Datei bewusst NICHT ersetzt. Wer eine neue Fassung hat, stellt sie neu ein. So bleibt nachvollziehbar, was wann galt. Geprueft: 20 Kacheln, 20 verschiedene Symbole, Kategorie oeffnen, Suche, Tag-Klick, Browser-Zurueck, Handy ohne Ueberlauf, 0 Konsolenfehler.
This commit is contained in:
@@ -26,6 +26,7 @@ import { callRouter } from "./workspace-calls.js";
|
||||
import { hinweisRouter } from "./workspace-hinweise.js";
|
||||
import { sucheRouter } from "./workspace-suche.js";
|
||||
import { startcheckRouter } from "./workspace-startcheck.js";
|
||||
import { wissenRouter } from "./workspace-wissen.js";
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const SITE_DIR = join(__dirname, "..");
|
||||
@@ -92,6 +93,7 @@ app.use(callRouter);
|
||||
app.use(hinweisRouter);
|
||||
app.use(sucheRouter);
|
||||
app.use(startcheckRouter);
|
||||
app.use(wissenRouter);
|
||||
|
||||
/* Sicherheits-Fix 20.08.2026 (Audit vor dem geplanten öffentlichen Start morgen).
|
||||
SITE_DIR ist der GESAMTE Repo-Ordner (join(__dirname, "..")) — express.static liefert
|
||||
|
||||
@@ -0,0 +1,485 @@
|
||||
/* =====================================================================
|
||||
workspace-wissen.js — Wissens-Bibliothek (Anleitungen als PDF).
|
||||
|
||||
Die Gliederung ist der eigentliche Wert dieses Bereichs, deshalb steht
|
||||
sie hier im Code und nicht in der Datenbank: zwanzig Kategorien, von
|
||||
Filipe vorgegeben, in sechs Welten gebuendelt. Zwanzig gleich
|
||||
aussehende Kacheln untereinander findet niemand -- gebuendelt sucht
|
||||
man erst die Welt und dann die Kategorie, und das geht mit einem Blick.
|
||||
|
||||
JEDE PDF HAT GENAU EINE HAUPTKATEGORIE. So gibt es sie nur einmal, es
|
||||
entstehen keine Doppelungen und keine Frage "wo lag die noch mal".
|
||||
Alles Weitere laeuft ueber Tags -- damit ist dieselbe Anleitung
|
||||
trotzdem ueber mehrere Suchbegriffe auffindbar.
|
||||
|
||||
Sicherheit beim Ausliefern: Hochgeladen wird nur, was wirklich eine
|
||||
PDF ist (geprueft an den ersten Bytes, nicht an der Dateiendung -- die
|
||||
kann jeder umbenennen). Nur deshalb darf die Datei ueberhaupt im
|
||||
Browser angezeigt statt bloss heruntergeladen werden.
|
||||
===================================================================== */
|
||||
|
||||
import express from "express";
|
||||
import { randomBytes } from "node:crypto";
|
||||
import { join } from "node:path";
|
||||
import { mkdirSync, createReadStream, writeFileSync, unlinkSync, statSync } from "node:fs";
|
||||
import { db, protokolliere, echteIp, sitzungLesen, DATEN_ORDNER } from "./workspace.js";
|
||||
|
||||
export const wissenRouter = express.Router();
|
||||
|
||||
const ORDNER = join(DATEN_ORDNER, "wissen");
|
||||
const MAX_BYTES = 40 * 1024 * 1024; // 40 MB je Anleitung
|
||||
const TITEL_MAX = 140;
|
||||
const TEXT_MAX = 400;
|
||||
const TAGS_MAX = 8;
|
||||
|
||||
const jetzt = () => new Date().toISOString();
|
||||
const heute = () => new Date().toISOString().slice(0, 10);
|
||||
|
||||
/* ---------- Die Gliederung ------------------------------------------------
|
||||
Die Beschreibungen sind woertlich Filipes Vorgabe -- sie sagen, was in
|
||||
die Kategorie gehoert, und beantworten damit die einzige Frage, die
|
||||
man beim Einsortieren wirklich hat. */
|
||||
|
||||
export const WELTEN = [
|
||||
{ schluessel: "tiktok", name: "TikTok" },
|
||||
{ schluessel: "aufbau", name: "Streaming einrichten" },
|
||||
{ schluessel: "bildton", name: "Bild & Ton" },
|
||||
{ schluessel: "technik", name: "Übertragung & Aussehen" },
|
||||
{ schluessel: "inhalt", name: "Inhalt & Menschen" },
|
||||
{ schluessel: "hilfe", name: "Hilfe & Schnellstart" },
|
||||
];
|
||||
|
||||
export const KATEGORIEN = [
|
||||
{ nr: 1, schluessel: "tiktok-grundlagen", welt: "tiktok", symbol: "tiktok",
|
||||
name: "TikTok – Grundlagen & Funktionen",
|
||||
beschreibung: "Allgemeine TikTok-Erklärungen, Einstellungen, LIVE-Funktionen, Gäste, Co-Hosts, Abos, Geschenke, Coins und neue Features." },
|
||||
{ nr: 2, schluessel: "tiktok-regeln", welt: "tiktok", symbol: "schild",
|
||||
name: "TikTok – Regeln & Sicherheit",
|
||||
beschreibung: "Community-Richtlinien, erlaubte und verbotene Inhalte, Altersprüfung, Sperren, Verwarnungen, Datenschutz, Jugendschutz und sicheres Verhalten." },
|
||||
{ nr: 17, schluessel: "events-einnahmen", welt: "tiktok", symbol: "pokal",
|
||||
name: "Events, Kampagnen & Einnahmen",
|
||||
beschreibung: "TikTok-Events, Ranglisten, Kampagnen, LIVE-Geschenke, Abonnements, Monetarisierung und Teilnahmebedingungen." },
|
||||
{ nr: 20, schluessel: "neuigkeiten", welt: "tiktok", symbol: "glocke",
|
||||
name: "Neuigkeiten & Updates",
|
||||
beschreibung: "Neue TikTok-Funktionen, Änderungen an Regeln, Software-Updates und aktuelle Entwicklungen im Streaming-Bereich." },
|
||||
|
||||
{ nr: 3, schluessel: "streaming-pc", welt: "aufbau", symbol: "monitor",
|
||||
name: "Streaming mit PC",
|
||||
beschreibung: "Komplettes Streaming-Setup am Computer, TikTok LIVE Studio, PC-Einstellungen, Leistung, Verkabelung und Einrichtung." },
|
||||
{ nr: 4, schluessel: "obs", welt: "aufbau", symbol: "ebenen",
|
||||
name: "OBS & Streaming-Software",
|
||||
beschreibung: "OBS Studio, Szenen, Quellen, Übergänge, Plugins, virtuelle Kamera, TikTok-Anbindung und weitere Streaming-Programme." },
|
||||
{ nr: 5, schluessel: "streaming-handy", welt: "aufbau", symbol: "handy",
|
||||
name: "Streaming mit Handy & Outdoor-Lives",
|
||||
beschreibung: "Mobile Livestreams, IRL-Streaming, Internetverbindung unterwegs, Powerbanks, Smartphone-Halterungen, mobile Mikrofone und Outdoor-Ausrüstung." },
|
||||
|
||||
{ nr: 6, schluessel: "kamera", welt: "bildton", symbol: "kamera",
|
||||
name: "Kamera & Bildqualität",
|
||||
beschreibung: "Webcams, Kameras, Kameraeinstellungen, Auflösung, FPS, Belichtung, Fokus, Unschärfe, Bildausschnitt, Filter und optimale Bildqualität." },
|
||||
{ nr: 7, schluessel: "licht", welt: "bildton", symbol: "licht",
|
||||
name: "Licht & Hintergrund",
|
||||
beschreibung: "Beleuchtung, Ringlichter, Softboxen, LED-Lichter, Greenscreen, Hintergrundgestaltung und richtige Positionierung." },
|
||||
{ nr: 8, schluessel: "audio", welt: "bildton", symbol: "mikrofon",
|
||||
name: "Mikrofone & Audio",
|
||||
beschreibung: "Mikrofone, Audioeinstellungen, Lautstärke, Rauschunterdrückung, Equalizer, Sprachqualität, Musik und Soundprobleme." },
|
||||
{ nr: 9, schluessel: "mischpulte", welt: "bildton", symbol: "regler",
|
||||
name: "Mischpulte, Soundboards & Effekte",
|
||||
beschreibung: "Maono, RØDECaster, Stream Deck, Soundpads, Sprach- und Soundeffekte sowie das Belegen von Tasten mit Sounds." },
|
||||
{ nr: 10, schluessel: "hardware", welt: "bildton", symbol: "stecker",
|
||||
name: "Streaming-Hardware & Zubehör",
|
||||
beschreibung: "Computer, Monitore, Capture Cards, Kabel, Adapter, Stative, Kopfhörer, Stream Decks und weiteres Zubehör." },
|
||||
|
||||
{ nr: 11, schluessel: "internet", welt: "technik", symbol: "wlan",
|
||||
name: "Internet & Stream-Qualität",
|
||||
beschreibung: "WLAN, LAN, Upload-Geschwindigkeit, Bitrate, Verbindungsabbrüche, Lags, eingefrorene Bilder und Optimierung der Übertragung." },
|
||||
{ nr: 12, schluessel: "design", welt: "technik", symbol: "rahmen",
|
||||
name: "Stream-Design & Darstellung",
|
||||
beschreibung: "Overlays, Rahmen, Szenen, Animationen, Einblendungen, Alerts, Logos, Chat-Anzeigen und ein professionelles Stream-Layout." },
|
||||
{ nr: 13, schluessel: "tools", welt: "technik", symbol: "zahnrad",
|
||||
name: "Tools, Bots & Automatisierungen",
|
||||
beschreibung: "Tikfinity, Discord-Bots, Benachrichtigungen, automatische Aktionen, Chat-Befehle und weitere hilfreiche Programme." },
|
||||
|
||||
{ nr: 14, schluessel: "content", welt: "inhalt", symbol: "kalender",
|
||||
name: "Content & Stream-Planung",
|
||||
beschreibung: "Stream-Ideen, Vorbereitung, Ablaufpläne, Challenges, Spiele, Themenstreams, Zuschauerbindung und Content-Planung." },
|
||||
{ nr: 15, schluessel: "community", welt: "inhalt", symbol: "menschen",
|
||||
name: "Community & Moderation",
|
||||
beschreibung: "Aufgaben der Modis, Chatregeln, Deeskalation, Community-Aufbau, Umgang mit Zuschauern, Trollen und Konflikten." },
|
||||
{ nr: 16, schluessel: "reichweite", welt: "inhalt", symbol: "wachstum",
|
||||
name: "Reichweite & Wachstum",
|
||||
beschreibung: "TikTok-Wachstum, Videos, Clips, Highlights, Hashtags, Stream-Zeiten, Zuschauergewinnung und Verbesserung der Reichweite." },
|
||||
|
||||
{ nr: 18, schluessel: "fehler", welt: "hilfe", symbol: "werkzeug",
|
||||
name: "Fehlerbehebung & Problemlösungen",
|
||||
beschreibung: "Lösungen für technische Fehler, fehlenden Ton, schlechtes Bild, Abstürze, Verbindungsprobleme, OBS-Fehler und TikTok-LIVE-Probleme." },
|
||||
{ nr: 19, schluessel: "checklisten", welt: "hilfe", symbol: "haken",
|
||||
name: "Checklisten & Schnellstart-Anleitungen",
|
||||
beschreibung: "Kurze Schritt-für-Schritt-Anleitungen, Einsteiger-Checklisten, Stream-Vorbereitung und schnelle Einrichtungshilfen." },
|
||||
];
|
||||
|
||||
const KAT_SCHLUESSEL = new Set(KATEGORIEN.map((k) => k.schluessel));
|
||||
|
||||
export const STUFEN = { einsteiger: "Einsteiger", fortgeschritten: "Fortgeschritten", profi: "Profi" };
|
||||
export const GERAETE = { egal: "Egal", pc: "PC", handy: "Handy", beide: "PC & Handy" };
|
||||
|
||||
/* Vorschlaege, keine Vorschrift -- eigene Tags bleiben moeglich. */
|
||||
export const TAG_VORSCHLAEGE = [
|
||||
"tiktok", "obs", "pc", "handy", "audio", "kamera", "licht", "internet",
|
||||
"overlay", "moderation", "einnahmen", "sicherheit", "checkliste",
|
||||
];
|
||||
|
||||
/* ---------- Zugang ------------------------------------------------------
|
||||
Lesen darf jeder Angemeldete -- die Bibliothek ist fuer das ganze Team.
|
||||
Pflegen darf nur DogFather: Es ist kuratiertes Wissen, kein Ablageort. */
|
||||
|
||||
function angemeldet(req, res, next) {
|
||||
const person = sitzungLesen(req);
|
||||
if (!person) return res.status(401).json({ fehler: "nicht_angemeldet" });
|
||||
req.person = person;
|
||||
next();
|
||||
}
|
||||
function nurDogFather(req, res, next) {
|
||||
if (req.person.rolle !== "admin") {
|
||||
return res.status(403).json({ fehler: "Die Bibliothek pflegt DogFather." });
|
||||
}
|
||||
next();
|
||||
}
|
||||
function gleicheHerkunft(req, res, next) {
|
||||
const herkunft = req.get("origin");
|
||||
if (!herkunft) return next();
|
||||
let erlaubt;
|
||||
try { erlaubt = new URL(herkunft).host === req.get("host"); } catch { erlaubt = false; }
|
||||
if (!erlaubt) return res.status(403).json({ fehler: "fremde_herkunft" });
|
||||
next();
|
||||
}
|
||||
|
||||
wissenRouter.use("/workspace/api/wissen", angemeldet);
|
||||
|
||||
/* ---------- Aufbau: Kategorien mit Anzahl -------------------------------- */
|
||||
|
||||
wissenRouter.get("/workspace/api/wissen/aufbau", (req, res) => {
|
||||
try {
|
||||
const zaehler = new Map(db().prepare(
|
||||
"SELECT kategorie, COUNT(*) AS n FROM wissen GROUP BY kategorie")
|
||||
.all().map((z) => [z.kategorie, z.n]));
|
||||
|
||||
/* Tags, die tatsaechlich benutzt werden -- eine Filterliste mit
|
||||
Begriffen ohne Treffer waere eine Einladung ins Leere. */
|
||||
const benutzt = new Set();
|
||||
for (const z of db().prepare("SELECT tags FROM wissen WHERE tags IS NOT NULL").all()) {
|
||||
for (const t of String(z.tags).split(",")) if (t.trim()) benutzt.add(t.trim());
|
||||
}
|
||||
|
||||
res.json({
|
||||
welten: WELTEN,
|
||||
kategorien: KATEGORIEN.map((k) => ({ ...k, anzahl: zaehler.get(k.schluessel) || 0 })),
|
||||
stufen: STUFEN,
|
||||
geraete: GERAETE,
|
||||
tags: [...benutzt].sort(),
|
||||
tag_vorschlaege: TAG_VORSCHLAEGE,
|
||||
darf_pflegen: req.person.rolle === "admin",
|
||||
gesamt: [...zaehler.values()].reduce((s, n) => s + n, 0),
|
||||
});
|
||||
} catch (fehler) {
|
||||
console.error("[workspace] Wissen Aufbau:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------- Liste, Suche und Filter -------------------------------------- */
|
||||
|
||||
function muster(text) {
|
||||
return "%" + text.replace(/[\\%_]/g, (z) => "\\" + z) + "%";
|
||||
}
|
||||
|
||||
wissenRouter.get("/workspace/api/wissen", (req, res) => {
|
||||
try {
|
||||
const bedingungen = [];
|
||||
const werte = [];
|
||||
|
||||
const k = String(req.query.k ?? "").trim();
|
||||
if (k && KAT_SCHLUESSEL.has(k)) { bedingungen.push("w.kategorie = ?"); werte.push(k); }
|
||||
|
||||
const stufe = String(req.query.stufe ?? "").trim();
|
||||
if (stufe && Object.hasOwn(STUFEN, stufe)) { bedingungen.push("w.stufe = ?"); werte.push(stufe); }
|
||||
|
||||
/* "PC" soll auch die Anleitungen zeigen, die fuer beide Geraete
|
||||
gelten -- sonst filtert man sich versehentlich das Halbe weg. */
|
||||
const geraet = String(req.query.geraet ?? "").trim();
|
||||
if (geraet === "pc" || geraet === "handy") {
|
||||
bedingungen.push("(w.geraet = ? OR w.geraet = 'beide')");
|
||||
werte.push(geraet);
|
||||
}
|
||||
|
||||
const tag = String(req.query.tag ?? "").trim().toLowerCase();
|
||||
if (tag) {
|
||||
/* Kommas drumherum, sonst wuerde der Filter "pc" auch bei
|
||||
"pc-spiele" anschlagen. COALESCE, weil Tags leer sein duerfen --
|
||||
NULL || ',' waere NULL und die Zeile fiele stumm raus. */
|
||||
bedingungen.push("(',' || COALESCE(w.tags, '') || ',') LIKE ? ESCAPE '\\'");
|
||||
werte.push(muster("," + tag + ","));
|
||||
}
|
||||
|
||||
const q = String(req.query.q ?? "").trim().slice(0, 80);
|
||||
if (q.length >= 2) {
|
||||
const m = muster(q);
|
||||
bedingungen.push("(w.titel LIKE ? ESCAPE '\\' OR w.beschreibung LIKE ? ESCAPE '\\' OR w.tags LIKE ? ESCAPE '\\' OR w.name_original LIKE ? ESCAPE '\\')");
|
||||
werte.push(m, m, m, m);
|
||||
}
|
||||
|
||||
const wo = bedingungen.length ? "WHERE " + bedingungen.join(" AND ") : "";
|
||||
const liste = db().prepare(`
|
||||
SELECT w.id, w.titel, w.beschreibung, w.kategorie, w.stufe, w.geraet, w.tags,
|
||||
w.name_original, w.groesse, w.wichtig, w.veroeffentlicht, w.aktualisiert,
|
||||
p.name AS von
|
||||
FROM wissen w LEFT JOIN personen p ON p.id = w.erstellt_von
|
||||
${wo}
|
||||
ORDER BY w.wichtig DESC,
|
||||
COALESCE(w.aktualisiert, w.veroeffentlicht) DESC,
|
||||
w.titel`).all(...werte);
|
||||
|
||||
for (const e of liste) e.tags = e.tags ? String(e.tags).split(",").filter(Boolean) : [];
|
||||
|
||||
/* Neu und wichtig -- der Einstieg fuer alle, die nicht suchen,
|
||||
sondern schauen wollen, was sich getan hat. */
|
||||
const neu = !k && !q && !stufe && !geraet && !tag
|
||||
? liste.filter((e) => e.wichtig
|
||||
|| (Date.now() - Date.parse(e.aktualisiert || e.veroeffentlicht) < 30 * 86400_000))
|
||||
.slice(0, 6)
|
||||
: [];
|
||||
|
||||
res.json({ eintraege: liste, neu, gesamt: liste.length });
|
||||
} catch (fehler) {
|
||||
console.error("[workspace] Wissen lesen:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------- Angaben pruefen ---------------------------------------------- */
|
||||
|
||||
function pruefe(kopf, { neu }) {
|
||||
const fehler = [];
|
||||
const aus = {};
|
||||
const hole = (name) => {
|
||||
const roh = kopf[name];
|
||||
if (roh === undefined) return undefined;
|
||||
try { return decodeURIComponent(String(roh)); } catch { return String(roh); }
|
||||
};
|
||||
|
||||
const titel = hole("titel");
|
||||
if (neu || titel !== undefined) {
|
||||
const t = String(titel ?? "").trim();
|
||||
if (t.length < 3) fehler.push("Der Titel fehlt.");
|
||||
else if (t.length > TITEL_MAX) fehler.push("Der Titel ist zu lang.");
|
||||
else aus.titel = t;
|
||||
}
|
||||
|
||||
const besch = hole("beschreibung");
|
||||
if (besch !== undefined) aus.beschreibung = String(besch).trim().slice(0, TEXT_MAX) || null;
|
||||
|
||||
const kat = hole("kategorie");
|
||||
if (neu || kat !== undefined) {
|
||||
if (!KAT_SCHLUESSEL.has(String(kat))) fehler.push("Diese Kategorie gibt es nicht.");
|
||||
else aus.kategorie = String(kat);
|
||||
}
|
||||
|
||||
const stufe = hole("stufe");
|
||||
if (stufe !== undefined) {
|
||||
if (!Object.hasOwn(STUFEN, String(stufe))) fehler.push("Unbekannte Stufe.");
|
||||
else aus.stufe = String(stufe);
|
||||
}
|
||||
|
||||
const geraet = hole("geraet");
|
||||
if (geraet !== undefined) {
|
||||
if (!Object.hasOwn(GERAETE, String(geraet))) fehler.push("Unbekanntes Gerät.");
|
||||
else aus.geraet = String(geraet);
|
||||
}
|
||||
|
||||
const tags = hole("tags");
|
||||
if (tags !== undefined) {
|
||||
/* Klein geschrieben und ohne Komma gespeichert -- sonst waeren
|
||||
"OBS" und "obs" zwei verschiedene Filter, und ein Komma im Tag
|
||||
wuerde die Liste zerlegen. */
|
||||
const liste = [...new Set(String(tags).split(",")
|
||||
.map((t) => t.trim().toLowerCase().replace(/[^a-z0-9äöüß+\- ]/g, "").trim())
|
||||
.filter(Boolean))].slice(0, TAGS_MAX);
|
||||
aus.tags = liste.length ? liste.join(",") : null;
|
||||
}
|
||||
|
||||
const wichtig = hole("wichtig");
|
||||
if (wichtig !== undefined) aus.wichtig = (wichtig === "1" || wichtig === "true") ? 1 : 0;
|
||||
|
||||
const datum = hole("veroeffentlicht");
|
||||
if (datum !== undefined && String(datum).trim()) {
|
||||
const d = String(datum).trim();
|
||||
if (!/^\d{4}-\d{2}-\d{2}$/.test(d) || Number.isNaN(Date.parse(d))) {
|
||||
fehler.push("Das Veröffentlichungsdatum ist ungültig.");
|
||||
} else aus.veroeffentlicht = d;
|
||||
}
|
||||
|
||||
return { aus, fehler };
|
||||
}
|
||||
|
||||
/* ---------- Hochladen ----------------------------------------------------
|
||||
Angaben stehen in Kopfzeilen, weil der Rumpf die Datei selbst ist --
|
||||
dieselbe Loesung wie bei den Dateien, kein multipart-Paket noetig. */
|
||||
|
||||
wissenRouter.post(
|
||||
"/workspace/api/wissen",
|
||||
gleicheHerkunft,
|
||||
nurDogFather,
|
||||
express.raw({ type: "*/*", limit: MAX_BYTES }),
|
||||
(req, res) => {
|
||||
let pfad = null;
|
||||
try {
|
||||
if (!req.body?.length) return res.status(400).json({ fehler: "Keine Datei angekommen." });
|
||||
|
||||
/* Ist das wirklich eine PDF? Geprueft an den ersten Bytes, nicht an
|
||||
der Endung -- die kann jeder umbenennen. Nur weil das hier sicher
|
||||
ist, darf die Datei spaeter im Browser angezeigt werden. */
|
||||
const kopf = req.body.subarray(0, 5).toString("latin1");
|
||||
if (kopf !== "%PDF-") {
|
||||
return res.status(400).json({ fehler: "Das ist keine PDF-Datei." });
|
||||
}
|
||||
|
||||
const felder = {};
|
||||
for (const n of ["titel", "beschreibung", "kategorie", "stufe", "geraet", "tags", "wichtig", "veroeffentlicht"]) {
|
||||
const w = req.get("x-" + n);
|
||||
if (w !== undefined) felder[n] = w;
|
||||
}
|
||||
const { aus, fehler } = pruefe(felder, { neu: true });
|
||||
if (fehler.length) return res.status(400).json({ fehler: fehler.join(" ") });
|
||||
|
||||
let name = "anleitung.pdf";
|
||||
try { name = decodeURIComponent(req.get("x-dateiname") || "").trim() || name; } catch { /* Vorgabe */ }
|
||||
name = name.replace(/[\x00-\x1f\x7f/\\<>:"|?*]/g, "").slice(0, 160) || "anleitung.pdf";
|
||||
|
||||
mkdirSync(ORDNER, { recursive: true });
|
||||
const dateiname = `${Date.now().toString(36)}-${randomBytes(8).toString("hex")}.pdf`;
|
||||
pfad = join(ORDNER, dateiname);
|
||||
writeFileSync(pfad, req.body, { flag: "wx" });
|
||||
|
||||
const { lastInsertRowid } = db().prepare(`
|
||||
INSERT INTO wissen
|
||||
(titel, beschreibung, kategorie, stufe, geraet, tags,
|
||||
name_original, name_datei, groesse, wichtig, veroeffentlicht, erstellt_von)
|
||||
VALUES (?,?,?,?,?,?,?,?,?,?,?,?)`).run(
|
||||
aus.titel, aus.beschreibung ?? null, aus.kategorie,
|
||||
aus.stufe ?? "einsteiger", aus.geraet ?? "egal", aus.tags ?? null,
|
||||
name, dateiname, req.body.length, aus.wichtig ?? 0,
|
||||
aus.veroeffentlicht ?? heute(), req.person.id);
|
||||
|
||||
protokolliere("wissen_hochgeladen", {
|
||||
personId: req.person.id, rolle: req.person.rolle, ip: echteIp(req),
|
||||
detail: `#${lastInsertRowid} ${aus.titel} (${Math.round(req.body.length / 1024)} KB)`.slice(0, 120),
|
||||
});
|
||||
res.status(201).json({ id: Number(lastInsertRowid) });
|
||||
} catch (fehler) {
|
||||
/* Liegt die Datei schon auf der Platte, der Eintrag aber nicht in
|
||||
der Datenbank, waere sie fuer immer verwaist. */
|
||||
if (pfad) { try { unlinkSync(pfad); } catch { /* war nie da */ } }
|
||||
console.error("[workspace] Wissen hochladen:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------- Angaben aendern ---------------------------------------------- */
|
||||
|
||||
wissenRouter.patch("/workspace/api/wissen/:id", gleicheHerkunft, nurDogFather, express.json(), (req, res) => {
|
||||
try {
|
||||
const id = Number(req.params.id);
|
||||
if (!Number.isInteger(id)) return res.status(400).json({ fehler: "ungueltig" });
|
||||
const vorhanden = db().prepare("SELECT id FROM wissen WHERE id = ?").get(id);
|
||||
if (!vorhanden) return res.status(404).json({ fehler: "nicht_gefunden" });
|
||||
|
||||
/* Der Aenderungsweg nimmt die Werte im Rumpf, nicht in Kopfzeilen --
|
||||
hier haengt keine Datei dran. */
|
||||
const felder = {};
|
||||
for (const n of ["titel", "beschreibung", "kategorie", "stufe", "geraet", "tags", "wichtig", "veroeffentlicht"]) {
|
||||
if (req.body?.[n] !== undefined) felder[n] = encodeURIComponent(String(req.body[n]));
|
||||
}
|
||||
const { aus, fehler } = pruefe(felder, { neu: false });
|
||||
if (fehler.length) return res.status(400).json({ fehler: fehler.join(" ") });
|
||||
const namen = Object.keys(aus);
|
||||
if (!namen.length) return res.status(400).json({ fehler: "nichts_zu_aendern" });
|
||||
|
||||
const setz = namen.map((n) => `${n} = ?`);
|
||||
const daten = namen.map((n) => aus[n]);
|
||||
setz.push("aktualisiert = ?"); daten.push(heute());
|
||||
|
||||
db().prepare(`UPDATE wissen SET ${setz.join(", ")} WHERE id = ?`).run(...daten, id);
|
||||
protokolliere("wissen_geaendert", {
|
||||
personId: req.person.id, rolle: req.person.rolle, ip: echteIp(req),
|
||||
detail: `#${id} ${namen.join(",")}`.slice(0, 120),
|
||||
});
|
||||
res.json({ ok: true });
|
||||
} catch (fehler) {
|
||||
console.error("[workspace] Wissen ändern:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
wissenRouter.delete("/workspace/api/wissen/:id", gleicheHerkunft, nurDogFather, (req, res) => {
|
||||
try {
|
||||
const id = Number(req.params.id);
|
||||
if (!Number.isInteger(id)) return res.status(400).json({ fehler: "ungueltig" });
|
||||
const e = db().prepare("SELECT titel, name_datei FROM wissen WHERE id = ?").get(id);
|
||||
if (!e) return res.status(404).json({ fehler: "nicht_gefunden" });
|
||||
|
||||
db().prepare("DELETE FROM wissen WHERE id = ?").run(id);
|
||||
try { unlinkSync(join(ORDNER, e.name_datei)); } catch { /* schon weg */ }
|
||||
|
||||
protokolliere("wissen_geloescht", {
|
||||
personId: req.person.id, rolle: req.person.rolle, ip: echteIp(req),
|
||||
detail: `#${id} ${e.titel}`.slice(0, 120),
|
||||
});
|
||||
res.json({ ok: true });
|
||||
} catch (fehler) {
|
||||
console.error("[workspace] Wissen löschen:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
/* ---------- Ausliefern ---------------------------------------------------- */
|
||||
|
||||
wissenRouter.get("/workspace/api/wissen/:id/datei", (req, res) => {
|
||||
try {
|
||||
const id = Number(req.params.id);
|
||||
if (!Number.isInteger(id)) return res.status(400).json({ fehler: "ungueltig" });
|
||||
const e = db().prepare("SELECT titel, name_original, name_datei FROM wissen WHERE id = ?").get(id);
|
||||
if (!e) return res.status(404).json({ fehler: "nicht_gefunden" });
|
||||
|
||||
const pfad = join(ORDNER, e.name_datei);
|
||||
try { statSync(pfad); } catch { return res.status(410).json({ fehler: "Datei fehlt auf der Platte." }); }
|
||||
|
||||
/* Anzeigen ist nur erlaubt, weil beim Hochladen geprueft wurde, dass
|
||||
es wirklich eine PDF ist. Die strenge Regel darunter verbietet der
|
||||
Datei trotzdem jeden Nachladeversuch und jedes Skript. */
|
||||
const ansehen = req.query.modus === "ansehen";
|
||||
res.setHeader("Content-Type", ansehen ? "application/pdf" : "application/octet-stream");
|
||||
res.setHeader("X-Content-Type-Options", "nosniff");
|
||||
res.setHeader("Content-Security-Policy", "default-src 'none'; object-src 'self'; sandbox");
|
||||
res.setHeader("Content-Disposition",
|
||||
`${ansehen ? "inline" : "attachment"}; filename*=UTF-8''${encodeURIComponent(e.name_original)}`);
|
||||
|
||||
protokolliere(ansehen ? "wissen_angesehen" : "wissen_geladen", {
|
||||
personId: req.person.id, rolle: req.person.rolle, ip: echteIp(req),
|
||||
detail: `#${id} ${e.titel}`.slice(0, 120),
|
||||
});
|
||||
createReadStream(pfad).pipe(res);
|
||||
} catch (fehler) {
|
||||
console.error("[workspace] Wissen ausliefern:", fehler?.message);
|
||||
res.status(503).json({ fehler: "nicht_verfuegbar" });
|
||||
}
|
||||
});
|
||||
|
||||
/* Grosse Datei: express.raw bricht ab, BEVOR der eigene Code laeuft --
|
||||
ohne diesen Fanghaken kaeme ein nackter 500er. */
|
||||
wissenRouter.use((fehler, req, res, next) => {
|
||||
if (fehler?.type === "entity.too.large" || fehler?.status === 413) {
|
||||
return res.status(413).json({
|
||||
fehler: `Die PDF ist zu groß – erlaubt sind ${Math.round(MAX_BYTES / 1024 / 1024)} MB.`,
|
||||
});
|
||||
}
|
||||
return next(fehler);
|
||||
});
|
||||
@@ -237,6 +237,32 @@ export function db() {
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_eintraege_bereich ON eintraege (bereich, creator_id);
|
||||
|
||||
/* Wissens-Bibliothek: Anleitungen als PDF, hinter dem Login.
|
||||
Jede PDF hat GENAU EINE Hauptkategorie -- so gibt es sie nur
|
||||
einmal. Zusaetzliche Themen laufen ueber Tags, damit dieselbe
|
||||
Anleitung trotzdem ueber mehrere Suchbegriffe auffindbar ist.
|
||||
Die Kategorien selbst stehen im Code (workspace-wissen.js),
|
||||
nicht hier: Sie sind eine bewusste Gliederung, keine Nutzdaten. */
|
||||
CREATE TABLE IF NOT EXISTS wissen (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
titel TEXT NOT NULL,
|
||||
beschreibung TEXT,
|
||||
kategorie TEXT NOT NULL,
|
||||
stufe TEXT NOT NULL DEFAULT 'einsteiger'
|
||||
CHECK (stufe IN ('einsteiger','fortgeschritten','profi')),
|
||||
geraet TEXT NOT NULL DEFAULT 'egal'
|
||||
CHECK (geraet IN ('pc','handy','beide','egal')),
|
||||
tags TEXT,
|
||||
name_original TEXT NOT NULL,
|
||||
name_datei TEXT NOT NULL,
|
||||
groesse INTEGER NOT NULL,
|
||||
wichtig INTEGER NOT NULL DEFAULT 0,
|
||||
veroeffentlicht TEXT NOT NULL,
|
||||
aktualisiert TEXT,
|
||||
erstellt_von INTEGER REFERENCES personen(id) ON DELETE SET NULL
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_wissen_kat ON wissen (kategorie);
|
||||
|
||||
/* Start-Check / Erstanalyse (Konzept, Seite 5). Eine Zeile je
|
||||
geprueftem Punkt -- ungeprueft heisst: gar keine Zeile. So sieht
|
||||
man am Bestand sofort, wie weit die Analyse ist, ohne leere
|
||||
@@ -462,6 +488,7 @@ const GESCHUETZT = {
|
||||
"/workspace/scouting.html": ["admin", "scout"],
|
||||
"/workspace/calls.html": null,
|
||||
"/workspace/startcheck.html": null,
|
||||
"/workspace/wissen.html": null,
|
||||
};
|
||||
|
||||
workspaceRouter.use((req, res, next) => {
|
||||
|
||||
@@ -0,0 +1,241 @@
|
||||
/* ===================================================================
|
||||
Wissens-Bibliothek.
|
||||
|
||||
Zwanzig Kategorien sind viel. Damit sie trotzdem in einem Blick
|
||||
erfassbar bleiben, sind sie in sechs Welten gebuendelt, und jede Welt
|
||||
hat ihre eigene Farbe. Man sucht dann nicht unter zwanzig gleichen
|
||||
Kacheln, sondern erst die Welt -- und da stehen nur noch drei bis vier.
|
||||
|
||||
Die Farben sind gedeckt und tragen nur den Symbolring, nicht die
|
||||
ganze Kachel. Zwanzig farbige Flaechen waeren ein Flickenteppich.
|
||||
=================================================================== */
|
||||
|
||||
/* ---------- Suche und Filter ---------------------------------------------- */
|
||||
|
||||
.suchleiste {
|
||||
display: grid; gap: 12px; margin-bottom: 30px;
|
||||
padding: 16px 18px;
|
||||
background: rgba(255, 255, 255, .028);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius);
|
||||
}
|
||||
.suchleiste__feld { position: relative; display: flex; align-items: center; }
|
||||
.suchleiste__lupe {
|
||||
position: absolute; left: 13px; width: 17px; height: 17px;
|
||||
fill: none; stroke: var(--text-still); stroke-width: 1.8; stroke-linecap: round;
|
||||
pointer-events: none;
|
||||
}
|
||||
.suchleiste__feld input {
|
||||
width: 100%; padding: 11px 14px 11px 40px;
|
||||
background: rgba(255, 255, 255, .05);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text); font: inherit;
|
||||
}
|
||||
.suchleiste__feld input:focus {
|
||||
outline: none; border-color: rgba(63, 189, 245, .6);
|
||||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
||||
}
|
||||
.suchleiste__feld input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
|
||||
|
||||
.suchleiste__filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||
.suchleiste__filter .feld-schild { margin: 0; }
|
||||
.suchleiste__filter select {
|
||||
padding: 8px 11px; min-width: 118px;
|
||||
background: rgba(255, 255, 255, .05);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text); font: inherit; font-size: .85rem;
|
||||
}
|
||||
.suchleiste__filter select:focus {
|
||||
outline: none; border-color: rgba(63, 189, 245, .6);
|
||||
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
||||
}
|
||||
|
||||
/* ---------- Bloecke -------------------------------------------------------- */
|
||||
|
||||
.block { margin-bottom: 34px; }
|
||||
.block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
|
||||
.block__titel {
|
||||
margin: 0; font-size: .78rem; font-weight: 700;
|
||||
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
||||
}
|
||||
.block__zahl {
|
||||
min-width: 22px; padding: 1px 8px; text-align: center;
|
||||
font-size: .74rem; font-weight: 700; color: var(--text-still);
|
||||
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
||||
}
|
||||
|
||||
/* ---------- Kacheln --------------------------------------------------------- */
|
||||
|
||||
.kacheln {
|
||||
display: grid; gap: 11px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
|
||||
}
|
||||
|
||||
.kachel {
|
||||
--w: var(--akzent);
|
||||
position: relative; display: flex; align-items: flex-start; gap: 14px;
|
||||
padding: 15px 16px;
|
||||
text-decoration: none; color: var(--text);
|
||||
border: 1px solid transparent; border-radius: 13px;
|
||||
background:
|
||||
linear-gradient(#111825, #0c1320) padding-box,
|
||||
linear-gradient(150deg,
|
||||
color-mix(in srgb, var(--w) 42%, transparent),
|
||||
rgba(255, 255, 255, .06) 55%,
|
||||
color-mix(in srgb, var(--w) 16%, transparent)) border-box;
|
||||
transition: transform .16s ease, box-shadow .2s ease;
|
||||
}
|
||||
.kachel::after {
|
||||
content: ""; position: absolute; left: 14px; right: 14px; top: 1px; height: 1px;
|
||||
background: linear-gradient(90deg, transparent,
|
||||
color-mix(in srgb, var(--w) 45%, transparent), transparent);
|
||||
}
|
||||
.kachel:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--w) 85%, transparent);
|
||||
}
|
||||
.kachel:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--w) 32%, transparent);
|
||||
}
|
||||
.kachel[data-leer="ja"] { opacity: .55; }
|
||||
.kachel[data-leer="ja"]:hover { opacity: 1; }
|
||||
|
||||
.kachel__ring {
|
||||
flex: none; display: grid; place-items: center;
|
||||
width: 42px; height: 42px; border-radius: 12px;
|
||||
background: color-mix(in srgb, var(--w) 13%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--w) 30%, transparent);
|
||||
}
|
||||
.kachel__symbol {
|
||||
width: 21px; height: 21px;
|
||||
fill: none; stroke: var(--w); stroke-width: 1.6;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
.kachel__text { min-width: 0; flex: 1; }
|
||||
.kachel__name { display: block; font-size: .93rem; font-weight: 650; line-height: 1.3; }
|
||||
.kachel__beschreibung {
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
|
||||
overflow: hidden; margin-top: 3px;
|
||||
font-size: .78rem; color: var(--text-still); line-height: 1.45;
|
||||
}
|
||||
.kachel__zahl {
|
||||
flex: none; min-width: 26px; padding: 2px 8px; align-self: flex-start;
|
||||
text-align: center; font-size: .75rem; font-weight: 700;
|
||||
color: color-mix(in srgb, var(--w) 55%, #ffffff);
|
||||
background: color-mix(in srgb, var(--w) 12%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--w) 26%, transparent);
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
/* Eine Farbe je Welt -- die Reihenfolge folgt der Gliederung. */
|
||||
.block[data-welt="tiktok"] .kachel { --w: #3fbdf5; }
|
||||
.block[data-welt="aufbau"] .kachel { --w: #8a76ff; }
|
||||
.block[data-welt="bildton"] .kachel { --w: #5fc99a; }
|
||||
.block[data-welt="technik"] .kachel { --w: #e8b877; }
|
||||
.block[data-welt="inhalt"] .kachel { --w: #e88fb4; }
|
||||
.block[data-welt="hilfe"] .kachel { --w: #8e9cb0; }
|
||||
|
||||
/* ---------- Karte einer Anleitung -------------------------------------------- */
|
||||
|
||||
.karten { display: grid; gap: 10px; }
|
||||
|
||||
.pdf {
|
||||
padding: 15px 17px;
|
||||
background: rgba(255, 255, 255, .03);
|
||||
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
||||
transition: border-color .18s ease;
|
||||
}
|
||||
.pdf:hover { border-color: rgba(255, 255, 255, .18); }
|
||||
.pdf[data-wichtig="ja"] {
|
||||
border-color: rgba(232, 192, 125, .32);
|
||||
background: rgba(232, 192, 125, .045);
|
||||
}
|
||||
|
||||
.pdf__kopf { display: flex; gap: 14px; align-items: flex-start; }
|
||||
.pdf__ring {
|
||||
flex: none; display: grid; place-items: center;
|
||||
width: 38px; height: 38px; border-radius: 11px;
|
||||
background: rgba(63, 189, 245, .1);
|
||||
border: 1px solid rgba(63, 189, 245, .24);
|
||||
}
|
||||
.pdf__symbol {
|
||||
width: 19px; height: 19px;
|
||||
fill: none; stroke: var(--akzent); stroke-width: 1.6;
|
||||
stroke-linecap: round; stroke-linejoin: round;
|
||||
}
|
||||
.pdf__mitte { min-width: 0; flex: 1; }
|
||||
.pdf__titel { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.35; }
|
||||
.pdf__text { margin: 4px 0 0; font-size: .86rem; color: var(--text-leise); max-width: 78ch; }
|
||||
.pdf__fuss { margin: 9px 0 0; font-size: .75rem; color: var(--text-still); }
|
||||
|
||||
.pdf__marken { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
|
||||
.marke-stufe, .marke-geraet, .marke-wichtig, .marke-tag {
|
||||
padding: 3px 9px; border-radius: 999px;
|
||||
font: inherit; font-size: .71rem; font-weight: 600;
|
||||
border: 1px solid var(--rand); color: var(--text-still);
|
||||
background: transparent;
|
||||
}
|
||||
.marke-stufe[data-stufe="einsteiger"] {
|
||||
color: #5fc99a; border-color: rgba(95, 201, 154, .38); background: rgba(95, 201, 154, .1);
|
||||
}
|
||||
.marke-stufe[data-stufe="fortgeschritten"] {
|
||||
color: #e8b877; border-color: rgba(232, 184, 119, .38); background: rgba(232, 184, 119, .1);
|
||||
}
|
||||
.marke-stufe[data-stufe="profi"] {
|
||||
color: #e88fb4; border-color: rgba(232, 143, 180, .4); background: rgba(232, 143, 180, .1);
|
||||
}
|
||||
.marke-geraet { color: var(--text-leise); }
|
||||
.marke-wichtig {
|
||||
color: #e8c07d; border-color: rgba(232, 192, 125, .4); background: rgba(232, 192, 125, .1);
|
||||
}
|
||||
.marke-tag { cursor: pointer; transition: color .16s ease, border-color .16s ease; }
|
||||
.marke-tag:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .42); }
|
||||
|
||||
.pdf__knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
|
||||
|
||||
/* ---------- Formular ---------------------------------------------------------- */
|
||||
|
||||
.haken { display: flex; align-items: center; gap: 9px; font-size: .87rem; cursor: pointer; }
|
||||
.haken input { width: 17px; height: 17px; accent-color: var(--akzent); cursor: pointer; }
|
||||
|
||||
.tag-vorschlag { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
|
||||
.tag-knopf {
|
||||
padding: 4px 10px; cursor: pointer;
|
||||
background: transparent; border: 1px dashed var(--rand); border-radius: 999px;
|
||||
color: var(--text-still); font: inherit; font-size: .74rem;
|
||||
transition: color .16s ease, border-color .16s ease;
|
||||
}
|
||||
.tag-knopf:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .45); border-style: solid; }
|
||||
|
||||
#n-datei {
|
||||
width: 100%; padding: 10px 12px;
|
||||
background: rgba(255, 255, 255, .04);
|
||||
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
||||
color: var(--text-leise); font: inherit; font-size: .85rem; cursor: pointer;
|
||||
}
|
||||
#n-datei::file-selector-button {
|
||||
margin-right: 12px; padding: 6px 13px; cursor: pointer;
|
||||
background: rgba(63, 189, 245, .12);
|
||||
border: 1px solid rgba(63, 189, 245, .3); border-radius: 8px;
|
||||
color: var(--akzent); font: inherit; font-size: .8rem; font-weight: 600;
|
||||
}
|
||||
|
||||
.leer-hinweis {
|
||||
display: grid; gap: 12px; justify-items: center;
|
||||
padding: 34px 22px; margin-bottom: 26px; text-align: center;
|
||||
color: var(--text-still); font-size: .92rem;
|
||||
border: 1px dashed var(--rand); border-radius: var(--radius);
|
||||
}
|
||||
.leer-hinweis p { margin: 0; max-width: 52ch; }
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.kacheln { grid-template-columns: 1fr; }
|
||||
.suchleiste__filter { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; }
|
||||
.suchleiste__filter .knopf-still { grid-column: 1 / -1; justify-self: start; }
|
||||
.pdf__ring { display: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.kachel, .pdf, .marke-tag, .tag-knopf { transition: none; }
|
||||
.kachel:hover { transform: none; }
|
||||
}
|
||||
@@ -21,6 +21,7 @@
|
||||
{ name: 'Creator-Profile', phase: 1, rollen: ['admin', 'scout'], ziel: 'profil.html' },
|
||||
{ name: 'Mein Profil', phase: 1, rollen: ['creator'], ziel: 'profil.html' },
|
||||
{ name: 'Start-Check', phase: 1, rollen: ['admin', 'creator', 'scout'], ziel: 'startcheck.html' },
|
||||
{ name: 'Wissens-Bibliothek', phase: 1, rollen: ['admin', 'creator', 'scout'], ziel: 'wissen.html' },
|
||||
{ name: 'Aufgaben', phase: 1, rollen: ['admin', 'creator', 'scout'], ziel: 'aufgaben.html' },
|
||||
{ name: 'Kalender', phase: 1, rollen: ['admin', 'creator', 'scout'], ziel: 'kalender.html' },
|
||||
{ name: 'Dateien', phase: 1, rollen: ['admin', 'creator', 'scout'], ziel: 'dateien.html' },
|
||||
|
||||
@@ -0,0 +1,444 @@
|
||||
/* ===================================================================
|
||||
Wissens-Bibliothek.
|
||||
|
||||
Zwei Ansichten, eine Seite: die Übersicht mit den Kacheln und die
|
||||
Liste innerhalb einer Kategorie. Der Zustand steht in der Adresse
|
||||
(?k=...), damit Zurück, Neuladen und Weiterschicken funktionieren --
|
||||
eine Kategorie, die man niemandem verlinken kann, ist keine Seite.
|
||||
|
||||
Sobald gesucht oder gefiltert wird, verschwinden die Kacheln und es
|
||||
erscheinen Treffer. Wer sucht, will nicht erst noch klicken.
|
||||
=================================================================== */
|
||||
(() => {
|
||||
'use strict';
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
let aufbau = null;
|
||||
let bearbeite = null; // id, wenn ein vorhandener Eintrag geändert wird
|
||||
|
||||
const el = (tag, klasse, text) => {
|
||||
const k = document.createElement(tag);
|
||||
if (klasse) k.className = klasse;
|
||||
if (text !== undefined) k.textContent = text;
|
||||
return k;
|
||||
};
|
||||
const melde = (t) => { $('fehler').textContent = t || ''; };
|
||||
const datum = (iso) => (iso ? iso.slice(0, 10).split('-').reverse().join('.') : '');
|
||||
const groesse = (b) => (b >= 1048576 ? (b / 1048576).toFixed(1) + ' MB' : Math.round(b / 1024) + ' KB');
|
||||
|
||||
function symbol(name, klasse) {
|
||||
const s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
s.setAttribute('viewBox', '0 0 24 24');
|
||||
s.setAttribute('aria-hidden', 'true');
|
||||
if (klasse) s.setAttribute('class', klasse);
|
||||
const u = document.createElementNS('http://www.w3.org/2000/svg', 'use');
|
||||
u.setAttribute('href', '#s-' + name);
|
||||
s.append(u);
|
||||
return s;
|
||||
}
|
||||
|
||||
async function hole(pfad, optionen = {}) {
|
||||
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
|
||||
return a;
|
||||
}
|
||||
|
||||
/* ---------- Zustand in der Adresse ------------------------------------- */
|
||||
|
||||
const zustand = () => {
|
||||
const p = new URLSearchParams(location.search);
|
||||
return {
|
||||
k: p.get('k') || '', q: p.get('q') || '',
|
||||
stufe: p.get('stufe') || '', geraet: p.get('geraet') || '', tag: p.get('tag') || '',
|
||||
};
|
||||
};
|
||||
|
||||
function setzeZustand(neu, ersetzen = false) {
|
||||
const z = { ...zustand(), ...neu };
|
||||
const p = new URLSearchParams();
|
||||
for (const [n, w] of Object.entries(z)) if (w) p.set(n, w);
|
||||
const ziel = location.pathname + (p.toString() ? '?' + p : '');
|
||||
if (ersetzen) history.replaceState(null, '', ziel); else history.pushState(null, '', ziel);
|
||||
/* Gefiltert wird auf dem Server, nicht im Browser. Sonst muesste die
|
||||
ganze Bibliothek beim ersten Aufruf mitgeladen werden, auch wenn
|
||||
man nur eine Kategorie sehen will. */
|
||||
laden_();
|
||||
}
|
||||
|
||||
const filtertAktiv = () => {
|
||||
const z = zustand();
|
||||
return !!(z.q || z.stufe || z.geraet || z.tag);
|
||||
};
|
||||
|
||||
/* ---------- Kachelübersicht -------------------------------------------- */
|
||||
|
||||
function uebersicht(ziel, neuLetzte) {
|
||||
/* Neu & wichtig zuerst -- der Einstieg für alle, die nicht suchen,
|
||||
sondern sehen wollen, was dazugekommen ist. */
|
||||
if (neuLetzte.length) {
|
||||
const s = el('section', 'block');
|
||||
const kopf = el('div', 'block__kopf');
|
||||
kopf.append(el('h2', 'block__titel', 'Neu & wichtig'));
|
||||
s.append(kopf);
|
||||
const box = el('div', 'karten');
|
||||
for (const e of neuLetzte) box.append(karte(e));
|
||||
s.append(box);
|
||||
ziel.append(s);
|
||||
}
|
||||
|
||||
for (const welt of aufbau.welten) {
|
||||
const kats = aufbau.kategorien.filter((k) => k.welt === welt.schluessel);
|
||||
if (!kats.length) continue;
|
||||
const s = el('section', 'block');
|
||||
/* Traegt die Farbe der Welt an alle Kacheln darin weiter. */
|
||||
s.dataset.welt = welt.schluessel;
|
||||
const kopf = el('div', 'block__kopf');
|
||||
kopf.append(el('h2', 'block__titel', welt.name));
|
||||
const summe = kats.reduce((n, k) => n + k.anzahl, 0);
|
||||
kopf.append(el('span', 'block__zahl', String(summe)));
|
||||
s.append(kopf);
|
||||
|
||||
const raster = el('div', 'kacheln');
|
||||
for (const k of kats) {
|
||||
const a = el('a', 'kachel');
|
||||
a.href = '?k=' + encodeURIComponent(k.schluessel);
|
||||
a.addEventListener('click', (e) => { e.preventDefault(); setzeZustand({ k: k.schluessel, q: '' }); });
|
||||
if (!k.anzahl) a.dataset.leer = 'ja';
|
||||
|
||||
const ring = el('span', 'kachel__ring');
|
||||
ring.append(symbol(k.symbol, 'kachel__symbol'));
|
||||
a.append(ring);
|
||||
|
||||
const text = el('span', 'kachel__text');
|
||||
text.append(el('span', 'kachel__name', k.name));
|
||||
text.append(el('span', 'kachel__beschreibung', k.beschreibung));
|
||||
a.append(text);
|
||||
|
||||
const zahl = el('span', 'kachel__zahl', k.anzahl ? String(k.anzahl) : '–');
|
||||
zahl.title = k.anzahl === 1 ? '1 Anleitung' : k.anzahl + ' Anleitungen';
|
||||
a.append(zahl);
|
||||
raster.append(a);
|
||||
}
|
||||
s.append(raster);
|
||||
ziel.append(s);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Karte einer Anleitung -------------------------------------- */
|
||||
|
||||
function karte(e) {
|
||||
const kat = aufbau.kategorien.find((k) => k.schluessel === e.kategorie);
|
||||
const k = el('article', 'pdf');
|
||||
if (e.wichtig) k.dataset.wichtig = 'ja';
|
||||
|
||||
const kopf = el('div', 'pdf__kopf');
|
||||
const ring = el('span', 'pdf__ring');
|
||||
ring.append(symbol(kat ? kat.symbol : 'haken', 'pdf__symbol'));
|
||||
kopf.append(ring);
|
||||
|
||||
const mitte = el('div', 'pdf__mitte');
|
||||
mitte.append(el('h3', 'pdf__titel', e.titel));
|
||||
if (e.beschreibung) mitte.append(el('p', 'pdf__text', e.beschreibung));
|
||||
|
||||
const marken = el('div', 'pdf__marken');
|
||||
const stufe = el('span', 'marke-stufe', aufbau.stufen[e.stufe] || e.stufe);
|
||||
stufe.dataset.stufe = e.stufe;
|
||||
marken.append(stufe);
|
||||
if (e.geraet && e.geraet !== 'egal') marken.append(el('span', 'marke-geraet', aufbau.geraete[e.geraet]));
|
||||
if (e.wichtig) marken.append(el('span', 'marke-wichtig', 'Wichtig'));
|
||||
for (const t of e.tags) {
|
||||
const b = el('button', 'marke-tag', '#' + t);
|
||||
b.type = 'button';
|
||||
b.title = 'Nach diesem Tag filtern';
|
||||
b.addEventListener('click', () => setzeZustand({ tag: t }));
|
||||
marken.append(b);
|
||||
}
|
||||
mitte.append(marken);
|
||||
|
||||
const fuss = el('p', 'pdf__fuss');
|
||||
fuss.append(document.createTextNode(
|
||||
(kat ? kat.name + ' · ' : '')
|
||||
+ 'veröffentlicht ' + datum(e.veroeffentlicht)
|
||||
+ (e.aktualisiert && e.aktualisiert !== e.veroeffentlicht
|
||||
? ' · aktualisiert ' + datum(e.aktualisiert) : '')
|
||||
+ ' · ' + groesse(e.groesse)));
|
||||
mitte.append(fuss);
|
||||
kopf.append(mitte);
|
||||
k.append(kopf);
|
||||
|
||||
const knoepfe = el('div', 'pdf__knoepfe');
|
||||
const ansehen = el('a', 'knopf knopf--klein', 'Öffnen');
|
||||
ansehen.href = `/workspace/api/wissen/${e.id}/datei?modus=ansehen`;
|
||||
ansehen.target = '_blank';
|
||||
ansehen.rel = 'noopener';
|
||||
const laden = el('a', 'knopf-still', 'Herunterladen');
|
||||
laden.href = `/workspace/api/wissen/${e.id}/datei`;
|
||||
knoepfe.append(ansehen, laden);
|
||||
|
||||
if (aufbau.darf_pflegen) {
|
||||
const aendern = el('button', 'knopf-still', 'Bearbeiten');
|
||||
aendern.type = 'button';
|
||||
aendern.addEventListener('click', () => formularOeffnen(e));
|
||||
const weg = el('button', 'knopf-still knopf-still--warn', 'Löschen');
|
||||
weg.type = 'button';
|
||||
weg.addEventListener('click', async () => {
|
||||
if (!confirm(`„${e.titel}" wirklich löschen?\n\nDie PDF wird dabei auch vom Server entfernt.`)) return;
|
||||
const a = await hole('/workspace/api/wissen/' + e.id, { method: 'DELETE' });
|
||||
if (!a.ok) { melde('Löschen hat nicht geklappt.'); return; }
|
||||
await laden_();
|
||||
});
|
||||
knoepfe.append(aendern, weg);
|
||||
}
|
||||
k.append(knoepfe);
|
||||
return k;
|
||||
}
|
||||
|
||||
/* ---------- Zeichnen ----------------------------------------------------- */
|
||||
|
||||
let daten = { eintraege: [], neu: [] };
|
||||
|
||||
function zeichne() {
|
||||
const z = zustand();
|
||||
const ziel = $('inhalt');
|
||||
ziel.textContent = '';
|
||||
ziel.setAttribute('aria-busy', 'false');
|
||||
|
||||
/* Kopf an die Ansicht anpassen */
|
||||
const kat = aufbau.kategorien.find((k) => k.schluessel === z.k);
|
||||
if (kat) {
|
||||
$('titel').textContent = kat.name;
|
||||
$('unterzeile').textContent = kat.beschreibung;
|
||||
} else {
|
||||
$('titel').textContent = 'Wissens-Bibliothek';
|
||||
$('unterzeile').textContent = aufbau.gesamt
|
||||
? `${aufbau.gesamt} Anleitung${aufbau.gesamt === 1 ? '' : 'en'} zu TikTok, Livestreaming, Technik und Content.`
|
||||
: 'Noch keine Anleitung eingestellt.';
|
||||
}
|
||||
$('f-weg').hidden = !(filtertAktiv() || z.k);
|
||||
|
||||
/* Suchen oder filtern schlägt die Kachelansicht -- wer sucht, will
|
||||
Treffer sehen, nicht erst noch eine Kachel anklicken. */
|
||||
if (!z.k && !filtertAktiv()) {
|
||||
if (!aufbau.gesamt) {
|
||||
const leer = el('div', 'leer-hinweis');
|
||||
leer.append(el('p', null, 'Die Bibliothek ist noch leer.'));
|
||||
leer.append(el('p', 'leise', aufbau.darf_pflegen
|
||||
? 'Mit „PDF hinzufügen“ oben rechts geht es los. Die zwanzig Kategorien stehen schon bereit.'
|
||||
: 'Sobald DogFather Anleitungen einstellt, erscheinen sie hier.'));
|
||||
ziel.append(leer);
|
||||
}
|
||||
uebersicht(ziel, daten.neu);
|
||||
return;
|
||||
}
|
||||
|
||||
const liste = daten.eintraege;
|
||||
if (!liste.length) {
|
||||
const leer = el('div', 'leer-hinweis');
|
||||
leer.append(el('p', null, kat && !filtertAktiv()
|
||||
? 'In dieser Kategorie liegt noch keine Anleitung.'
|
||||
: 'Dazu wurde nichts gefunden.'));
|
||||
const b = el('button', 'knopf-still', 'Filter zurücksetzen');
|
||||
b.type = 'button';
|
||||
b.addEventListener('click', () => setzeZustand({ k: '', q: '', stufe: '', geraet: '', tag: '' }));
|
||||
leer.append(b);
|
||||
ziel.append(leer);
|
||||
return;
|
||||
}
|
||||
|
||||
const kopf = el('div', 'block__kopf');
|
||||
kopf.append(el('h2', 'block__titel', filtertAktiv() ? 'Treffer' : 'Anleitungen'));
|
||||
kopf.append(el('span', 'block__zahl', String(liste.length)));
|
||||
ziel.append(kopf);
|
||||
|
||||
const box = el('div', 'karten');
|
||||
for (const e of liste) box.append(karte(e));
|
||||
ziel.append(box);
|
||||
}
|
||||
|
||||
async function laden_() {
|
||||
const z = zustand();
|
||||
const p = new URLSearchParams();
|
||||
for (const [n, w] of Object.entries(z)) if (w) p.set(n, w);
|
||||
try {
|
||||
const [a1, a2] = await Promise.all([
|
||||
hole('/workspace/api/wissen/aufbau'),
|
||||
hole('/workspace/api/wissen?' + p),
|
||||
]);
|
||||
if (!a1.ok || !a2.ok) { melde('Die Bibliothek konnte nicht geladen werden.'); return; }
|
||||
aufbau = await a1.json();
|
||||
daten = await a2.json();
|
||||
fuelleFilter();
|
||||
zeichne();
|
||||
} catch { /* umgeleitet */ }
|
||||
}
|
||||
|
||||
/* ---------- Filterfelder ------------------------------------------------- */
|
||||
|
||||
let filterGefuellt = false;
|
||||
function fuelleFilter() {
|
||||
const z = zustand();
|
||||
const setz = (id, eintraege, wert) => {
|
||||
const f = $(id);
|
||||
f.textContent = '';
|
||||
const alle = document.createElement('option');
|
||||
alle.value = ''; alle.textContent = 'Alle';
|
||||
f.append(alle);
|
||||
for (const [w, name] of eintraege) {
|
||||
const o = document.createElement('option');
|
||||
o.value = w; o.textContent = name;
|
||||
f.append(o);
|
||||
}
|
||||
f.value = wert || '';
|
||||
};
|
||||
setz('f-stufe', Object.entries(aufbau.stufen), z.stufe);
|
||||
setz('f-geraet', [['pc', 'PC'], ['handy', 'Handy']], z.geraet);
|
||||
setz('f-tag', aufbau.tags.map((t) => [t, '#' + t]), z.tag);
|
||||
$('q').value = z.q;
|
||||
|
||||
if (filterGefuellt) return;
|
||||
filterGefuellt = true;
|
||||
$('f-stufe').addEventListener('change', () => setzeZustand({ stufe: $('f-stufe').value }));
|
||||
$('f-geraet').addEventListener('change', () => setzeZustand({ geraet: $('f-geraet').value }));
|
||||
$('f-tag').addEventListener('change', () => setzeZustand({ tag: $('f-tag').value }));
|
||||
$('f-weg').addEventListener('click', () => setzeZustand({ k: '', q: '', stufe: '', geraet: '', tag: '' }));
|
||||
let warte = null;
|
||||
$('q').addEventListener('input', () => {
|
||||
clearTimeout(warte);
|
||||
warte = setTimeout(() => setzeZustand({ q: $('q').value.trim() }, true), 260);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('popstate', laden_);
|
||||
|
||||
/* ---------- Formular ------------------------------------------------------ */
|
||||
|
||||
function formularOeffnen(eintrag) {
|
||||
bearbeite = eintrag ? eintrag.id : null;
|
||||
$('neu-titel').textContent = eintrag ? 'Anleitung bearbeiten' : 'Neue Anleitung';
|
||||
$('n-speichern').textContent = eintrag ? 'Änderungen speichern' : 'Veröffentlichen';
|
||||
/* Beim Bearbeiten wird die Datei nicht ersetzt -- wer eine neue
|
||||
Fassung hat, stellt sie neu ein und löscht die alte. So bleibt
|
||||
nachvollziehbar, was wann galt. */
|
||||
$('n-datei-block').hidden = !!eintrag;
|
||||
$('n-titel').value = eintrag ? eintrag.titel : '';
|
||||
$('n-beschreibung').value = eintrag ? (eintrag.beschreibung || '') : '';
|
||||
$('n-kategorie').value = eintrag ? eintrag.kategorie : (zustand().k || aufbau.kategorien[0].schluessel);
|
||||
$('n-stufe').value = eintrag ? eintrag.stufe : 'einsteiger';
|
||||
$('n-geraet').value = eintrag ? eintrag.geraet : 'egal';
|
||||
$('n-tags').value = eintrag ? eintrag.tags.join(', ') : '';
|
||||
$('n-wichtig').checked = !!(eintrag && eintrag.wichtig);
|
||||
$('n-datum').value = eintrag ? eintrag.veroeffentlicht : new Date().toISOString().slice(0, 10);
|
||||
$('n-fehler').textContent = '';
|
||||
$('neu-block').hidden = false;
|
||||
$('neu-auf').hidden = true;
|
||||
$('n-titel').focus();
|
||||
$('neu-block').scrollIntoView({ block: 'start', behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function formularSchliessen() {
|
||||
$('neu-block').hidden = true;
|
||||
$('neu-auf').hidden = !aufbau.darf_pflegen;
|
||||
$('neu-form').reset();
|
||||
$('n-dateiname').textContent = 'Höchstens 40 MB. Nur echte PDF-Dateien.';
|
||||
bearbeite = null;
|
||||
}
|
||||
|
||||
function fuelleFormular() {
|
||||
const setz = (id, eintraege) => {
|
||||
const f = $(id);
|
||||
f.textContent = '';
|
||||
for (const [w, name] of eintraege) {
|
||||
const o = document.createElement('option');
|
||||
o.value = w; o.textContent = name;
|
||||
f.append(o);
|
||||
}
|
||||
};
|
||||
setz('n-kategorie', aufbau.kategorien.map((k) => [k.schluessel, k.nr + '. ' + k.name]));
|
||||
setz('n-stufe', Object.entries(aufbau.stufen));
|
||||
setz('n-geraet', Object.entries(aufbau.geraete));
|
||||
|
||||
const v = $('n-vorschlaege');
|
||||
v.textContent = '';
|
||||
for (const t of aufbau.tag_vorschlaege) {
|
||||
const b = el('button', 'tag-knopf', '#' + t);
|
||||
b.type = 'button';
|
||||
b.addEventListener('click', () => {
|
||||
const jetzt = $('n-tags').value.split(',').map((x) => x.trim()).filter(Boolean);
|
||||
if (jetzt.includes(t)) return;
|
||||
jetzt.push(t);
|
||||
$('n-tags').value = jetzt.join(', ');
|
||||
});
|
||||
v.append(b);
|
||||
}
|
||||
}
|
||||
|
||||
$('neu-auf').addEventListener('click', () => formularOeffnen(null));
|
||||
$('neu-zu').addEventListener('click', formularSchliessen);
|
||||
$('n-datei').addEventListener('change', () => {
|
||||
const d = $('n-datei').files[0];
|
||||
$('n-dateiname').textContent = d
|
||||
? `${d.name} · ${groesse(d.size)}`
|
||||
: 'Höchstens 40 MB. Nur echte PDF-Dateien.';
|
||||
});
|
||||
|
||||
$('neu-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
$('n-fehler').textContent = '';
|
||||
const knopf = $('n-speichern');
|
||||
const angaben = {
|
||||
titel: $('n-titel').value.trim(),
|
||||
beschreibung: $('n-beschreibung').value.trim(),
|
||||
kategorie: $('n-kategorie').value,
|
||||
stufe: $('n-stufe').value,
|
||||
geraet: $('n-geraet').value,
|
||||
tags: $('n-tags').value,
|
||||
wichtig: $('n-wichtig').checked ? '1' : '0',
|
||||
veroeffentlicht: $('n-datum').value,
|
||||
};
|
||||
if (angaben.titel.length < 3) { $('n-fehler').textContent = 'Der Titel fehlt.'; return; }
|
||||
|
||||
knopf.disabled = true;
|
||||
try {
|
||||
let a;
|
||||
if (bearbeite) {
|
||||
a = await hole('/workspace/api/wissen/' + bearbeite, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(angaben),
|
||||
});
|
||||
} else {
|
||||
const datei = $('n-datei').files[0];
|
||||
if (!datei) { $('n-fehler').textContent = 'Wähle eine PDF-Datei aus.'; return; }
|
||||
const kopf = { 'Content-Type': 'application/pdf', 'x-dateiname': encodeURIComponent(datei.name) };
|
||||
for (const [n, w] of Object.entries(angaben)) kopf['x-' + n] = encodeURIComponent(w);
|
||||
a = await hole('/workspace/api/wissen', { method: 'POST', headers: kopf, body: datei });
|
||||
}
|
||||
if (!a.ok) {
|
||||
$('n-fehler').textContent = (await a.json().catch(() => ({}))).fehler || 'Das hat nicht geklappt.';
|
||||
return;
|
||||
}
|
||||
formularSchliessen();
|
||||
melde('');
|
||||
$('n-stand').textContent = '';
|
||||
await laden_();
|
||||
} catch { /* umgeleitet */ } finally { knopf.disabled = false; }
|
||||
});
|
||||
|
||||
/* ---------- Start --------------------------------------------------------- */
|
||||
|
||||
(async () => {
|
||||
let ich;
|
||||
try {
|
||||
const a = await hole('/workspace/api/ich');
|
||||
if (!a.ok) { location.assign('/workspace/'); return; }
|
||||
ich = await a.json();
|
||||
} catch { return; }
|
||||
$('wer').textContent = ich.name + ' · ' + (ich.rolle_name || ich.rolle);
|
||||
|
||||
await laden_();
|
||||
if (aufbau) {
|
||||
fuelleFormular();
|
||||
$('neu-auf').hidden = !aufbau.darf_pflegen;
|
||||
}
|
||||
})();
|
||||
})();
|
||||
@@ -0,0 +1,151 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>Wissens-Bibliothek · Creator Workspace</title>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<meta name="theme-color" content="#05070d" />
|
||||
<link rel="icon" href="assets/img/favicon.png" />
|
||||
<link rel="stylesheet" href="assets/css/gate.css" />
|
||||
<link rel="stylesheet" href="assets/css/start.css" />
|
||||
<link rel="stylesheet" href="assets/css/aufgaben.css" />
|
||||
<link rel="stylesheet" href="assets/css/wissen.css" />
|
||||
</head>
|
||||
|
||||
<body class="start">
|
||||
|
||||
<header class="kopfleiste">
|
||||
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
|
||||
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M14.5 5.5 8 12l6.5 6.5" />
|
||||
</svg>
|
||||
<span class="zurueck-knopf__text">Zurück</span>
|
||||
</button>
|
||||
<p class="marke"><a class="zurueck" href="start.html">Creator Workspace</a> · Wissen</p>
|
||||
<div class="kopfleiste__rechts">
|
||||
<span class="wer" id="wer">…</span>
|
||||
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Symbolvorrat. Einmal im Dokument, überall per <use> verwendbar -->
|
||||
<svg style="display:none" aria-hidden="true">
|
||||
<defs>
|
||||
<g id="s-tiktok"><path d="M14 4v9.2a3.3 3.3 0 1 1-2.6-3.2"/><path d="M14 4c.4 2.2 2 3.7 4.4 3.9"/></g>
|
||||
<g id="s-schild"><path d="M12 3.6 5.6 6.2v5c0 3.6 2.5 6.9 6.4 8.2 3.9-1.3 6.4-4.6 6.4-8.2v-5z"/><path d="m9.4 11.8 1.9 1.9 3.4-3.6"/></g>
|
||||
<g id="s-pokal"><path d="M8 4h8v4.5a4 4 0 0 1-8 0z"/><path d="M8 5.5H5.6v1.2A2.6 2.6 0 0 0 8.2 9.3"/><path d="M16 5.5h2.4v1.2a2.6 2.6 0 0 1-2.6 2.6"/><path d="M12 12.6V16"/><path d="M8.8 19.4h6.4l-.8-3.4H9.6z"/></g>
|
||||
<g id="s-glocke"><path d="M6.6 17.2c1-.9 1.4-2 1.4-3.4v-2.5a4 4 0 0 1 8 0v2.5c0 1.4.4 2.5 1.4 3.4z"/><path d="M10.2 20a2 2 0 0 0 3.6 0"/></g>
|
||||
<g id="s-monitor"><rect x="3.4" y="5" width="17.2" height="11.4" rx="1.6"/><path d="M9 20h6M12 16.6V20"/></g>
|
||||
<g id="s-ebenen"><path d="m12 3.6 8 4-8 4-8-4z"/><path d="m4.6 12 7.4 3.7 7.4-3.7"/><path d="m4.6 16.2 7.4 3.7 7.4-3.7"/></g>
|
||||
<g id="s-handy"><rect x="7" y="2.8" width="10" height="18.4" rx="2.2"/><path d="M10.6 5.6h2.8"/><path d="M11.2 18.4h1.6"/></g>
|
||||
<g id="s-kamera"><rect x="3" y="6.6" width="13.4" height="10.8" rx="2"/><path d="m16.4 12 4.6-3v6z"/></g>
|
||||
<g id="s-licht"><circle cx="12" cy="10.6" r="4.2"/><path d="M12 2.6v1.8M12 16.8v1.6M4.2 10.6H2.6M21.4 10.6h-1.6M6.5 5.1 5.3 3.9M18.7 3.9l-1.2 1.2M6.5 16.1l-1.2 1.2M18.7 17.3l-1.2-1.2"/><path d="M10.2 20.8h3.6"/></g>
|
||||
<g id="s-mikrofon"><rect x="9.4" y="2.8" width="5.2" height="10.4" rx="2.6"/><path d="M6 11.4a6 6 0 0 0 12 0"/><path d="M12 17.4V21M9.4 21h5.2"/></g>
|
||||
<g id="s-regler"><path d="M6.5 3.6v6.2M6.5 14.2v6.2M12 3.6v10.6M12 18.6v1.8M17.5 3.6v2.2M17.5 10.2v10.2"/><circle cx="6.5" cy="12" r="2.2"/><circle cx="12" cy="16.4" r="2.2"/><circle cx="17.5" cy="8" r="2.2"/></g>
|
||||
<g id="s-stecker"><path d="M9 2.8v5.4M15 2.8v5.4"/><path d="M6.4 8.2h11.2v3a5.6 5.6 0 0 1-11.2 0z"/><path d="M12 16.8V21"/></g>
|
||||
<g id="s-wlan"><path d="M3.2 8.6a13 13 0 0 1 17.6 0"/><path d="M6.4 12.2a8.4 8.4 0 0 1 11.2 0"/><path d="M9.5 15.7a4 4 0 0 1 5 0"/><circle cx="12" cy="19.2" r="1.1" fill="currentColor" stroke="none"/></g>
|
||||
<g id="s-rahmen"><rect x="3.2" y="4.6" width="17.6" height="14.8" rx="2"/><path d="M3.2 9.2h17.6"/><path d="M8 9.2v10.2"/></g>
|
||||
<g id="s-zahnrad"><circle cx="12" cy="12" r="3.2"/><path d="M12 2.8v2.6M12 18.6v2.6M21.2 12h-2.6M5.4 12H2.8M18.5 5.5l-1.9 1.9M7.4 16.6l-1.9 1.9M18.5 18.5l-1.9-1.9M7.4 7.4 5.5 5.5"/></g>
|
||||
<g id="s-kalender"><rect x="3.6" y="5" width="16.8" height="15" rx="2"/><path d="M3.6 9.8h16.8M8.4 2.8v4M15.6 2.8v4"/><path d="M8 13.6h3M8 16.8h8"/></g>
|
||||
<g id="s-menschen"><circle cx="9" cy="8.4" r="3.2"/><path d="M3.4 19.4c0-3.1 2.5-5.6 5.6-5.6s5.6 2.5 5.6 5.6"/><path d="M16.2 6.2a3 3 0 0 1 0 5.8"/><path d="M17 14.2c2.1.6 3.6 2.5 3.6 5.2"/></g>
|
||||
<g id="s-wachstum"><path d="M3.6 18.6 9 12l3.6 3.2 7.2-8"/><path d="M15.4 6.6h4.8v4.8"/></g>
|
||||
<g id="s-werkzeug"><path d="M15.4 7.4a3.8 3.8 0 0 1 5-5l-2.7 2.7.6 2.4 2.4.6 2.7-2.7"/><path d="M15.4 7.4 4.2 18.6a2 2 0 0 0 2.8 2.8L18.2 10.2"/></g>
|
||||
<g id="s-haken"><rect x="4" y="3.4" width="16" height="17.2" rx="2.2"/><path d="m8.2 9.6 2 2 4-4.2"/><path d="m8.2 16 2 2 4-4.2"/></g>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
<main class="inhalt inhalt--breit">
|
||||
|
||||
<section class="kopf-zeile">
|
||||
<div>
|
||||
<p class="marke">Anleitungen & Checklisten</p>
|
||||
<h1 class="titel" id="titel">Wissens-Bibliothek</h1>
|
||||
<p class="unterzeile" id="unterzeile">Alles zu TikTok, Livestreaming, Technik und Content – an einer Stelle.</p>
|
||||
</div>
|
||||
<div class="steuerung">
|
||||
<button type="button" class="knopf knopf--klein" id="neu-auf" hidden>PDF hinzufügen</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||||
|
||||
<!-- Suche und Filter: gelten immer, auch innerhalb einer Kategorie -->
|
||||
<section class="suchleiste">
|
||||
<div class="suchleiste__feld">
|
||||
<svg class="suchleiste__lupe" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="11" cy="11" r="6.5"/><path d="M15.8 15.8 20 20"/>
|
||||
</svg>
|
||||
<input id="q" type="search" placeholder="Anleitung suchen – Titel, Beschreibung oder Tag" aria-label="Suchen" maxlength="80" />
|
||||
</div>
|
||||
<div class="suchleiste__filter">
|
||||
<label class="feld-schild" for="f-stufe">Stufe</label>
|
||||
<select id="f-stufe"><option value="">Alle</option></select>
|
||||
<label class="feld-schild" for="f-geraet">Gerät</label>
|
||||
<select id="f-geraet"><option value="">Alle</option></select>
|
||||
<label class="feld-schild" for="f-tag">Tag</label>
|
||||
<select id="f-tag"><option value="">Alle</option></select>
|
||||
<button type="button" class="knopf-still" id="f-weg" hidden>Filter zurücksetzen</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Formular zum Anlegen und Ändern (nur DogFather) -->
|
||||
<section class="neu" id="neu-block" hidden>
|
||||
<h2 class="neu__titel" id="neu-titel">Neue Anleitung</h2>
|
||||
<form id="neu-form">
|
||||
<div class="neu__raster">
|
||||
<div class="feld feld--breit">
|
||||
<label class="feld-schild" for="n-titel">Titel</label>
|
||||
<input id="n-titel" maxlength="140" required placeholder="z. B. OBS für TikTok LIVE einrichten" />
|
||||
</div>
|
||||
<div class="feld feld--breit">
|
||||
<label class="feld-schild" for="n-beschreibung">Kurze Beschreibung</label>
|
||||
<input id="n-beschreibung" maxlength="400" placeholder="In einem Satz: Was lernt man hier?" />
|
||||
</div>
|
||||
<div class="feld feld--breit">
|
||||
<label class="feld-schild" for="n-kategorie">Hauptkategorie</label>
|
||||
<select id="n-kategorie" required></select>
|
||||
</div>
|
||||
<div class="feld">
|
||||
<label class="feld-schild" for="n-stufe">Stufe</label>
|
||||
<select id="n-stufe"></select>
|
||||
</div>
|
||||
<div class="feld">
|
||||
<label class="feld-schild" for="n-geraet">Gerät</label>
|
||||
<select id="n-geraet"></select>
|
||||
</div>
|
||||
<div class="feld">
|
||||
<label class="feld-schild" for="n-datum">Veröffentlicht am</label>
|
||||
<input id="n-datum" type="date" />
|
||||
</div>
|
||||
<div class="feld feld--breit">
|
||||
<label class="feld-schild" for="n-tags">Tags <span class="leise">(mit Komma trennen, höchstens 8)</span></label>
|
||||
<input id="n-tags" maxlength="200" placeholder="tiktok, obs, pc" />
|
||||
<div class="tag-vorschlag" id="n-vorschlaege"></div>
|
||||
</div>
|
||||
<div class="feld feld--breit" id="n-datei-block">
|
||||
<label class="feld-schild" for="n-datei">PDF-Datei</label>
|
||||
<input id="n-datei" type="file" accept="application/pdf,.pdf" />
|
||||
<p class="leise" id="n-dateiname">Höchstens 40 MB. Nur echte PDF-Dateien.</p>
|
||||
</div>
|
||||
<div class="feld feld--breit">
|
||||
<label class="haken"><input type="checkbox" id="n-wichtig" /> <span>Als besonders wichtig oben anzeigen</span></label>
|
||||
</div>
|
||||
</div>
|
||||
<p class="fehler" id="n-fehler" role="alert" aria-live="polite"></p>
|
||||
<div class="neu__knoepfe">
|
||||
<button type="submit" class="knopf knopf--klein" id="n-speichern">Veröffentlichen</button>
|
||||
<button type="button" class="knopf-still" id="neu-zu">Abbrechen</button>
|
||||
<span class="leise" id="n-stand"></span>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<div id="inhalt" aria-busy="true"><p class="leise">Bibliothek wird geladen …</p></div>
|
||||
|
||||
</main>
|
||||
|
||||
<script src="assets/js/kopf.js" defer></script>
|
||||
<script src="assets/js/wissen.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user