DogFatherGitandClaude Opus 5
2b3f140112
workspace/assets/js/wissen.js:556
... legst du unter „Dateien" ab. (gerades ")
... legst du unter „Dateien“ ab.
Die Zeile ist nicht von mir: Sie kam heute um 14:33 aus einer
zweiten Sitzung im selben Verzeichnis (Commit 63a56980). Die Wache,
die ich heute Vormittag gebaut habe (95c4599b), hat sie beim ersten
Lauf danach gemeldet — mit Datei und Zeile.
GENAU DAFUER WAR SIE DA. 199 Stellen aufzuraeumen ist nichts wert,
wenn am Abend desselben Tages die naechste dazukommt. Zwischen
Aufraeumen und erstem Rueckfall lagen fuenf Stunden.
NACH DEM FREMDEN ZUSAMMENLAUF DAS HAUS DURCHGESEHEN:
pruef-struktur 68 / 0 (nach dieser Berichtigung)
pruef-wissen-formular 30 / 0 (neu, aus der anderen Sitzung)
pruef-dateien-liste 15 / 0 (neu, aus der anderen Sitzung)
pruef-wissen-neu 16 / 0
pruef-ports 10 / 0 460 Ports durchprobiert
pruef-portnummern 41 / 0
pruef-fingermass 5 / 0
UND EINE WACHE, DIE ICH BEWUSST NICHT GEBAUT HABE: Nach den zwei
Zeitbomben von heute (pruef-dabei-optik, pruef-chat-anhaenge — beide
gruen allein, rot unter Last) habe ich die ganze Klasse
nachgemessen. 850 feste Wartezeiten in 139 Dateien — dagegen eine
Wache zu bauen waere eine Warnung, die immer kommt.
Das engere Merkmal der beiden echten Faelle: Sie lasen einen Wert,
den eine Ueberblendung DURCHLAEUFT (`opacity`), nach einer festen
Wartezeit. Gemessen: 8 solche Stellen im ganzen Haus, 4 ohne
Absicherung — drei davon sind die heute reparierten, und die vierte
(pruef-glocke:380) ist keine: Am `.glocke__strich` haengt gar keine
Blende, nur an Rahmen, Hintergrund und Farbe.
Also null echte Funde und vier Fehlalarme. Eine solche Wache ist
schlechter als keine. Die Lehre steht stattdessen ausfuehrlich an
den zwei Stellen, an denen sie etwas gekostet hat.
Co-Authored-By: Claude Opus 5 <[email protected]>
687 lines
27 KiB
JavaScript
687 lines
27 KiB
JavaScript
/* ===================================================================
|
||
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;
|
||
};
|
||
/* Dieselbe Zeile fuer Fehler und Bestaetigungen -- aber nicht
|
||
dieselbe Farbe. Eine Erfolgsmeldung in Warnrot liest sich wie ein
|
||
Problem. */
|
||
const melde = (text, gut = false) => {
|
||
const e = $('fehler');
|
||
e.textContent = text || '';
|
||
if (gut) e.dataset.gut = 'ja'; else delete e.dataset.gut;
|
||
};
|
||
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'));
|
||
|
||
/* NUR JE EINER SICHTBAR (Wunsch vom 01.09.2026).
|
||
|
||
Vorher standen bis zu sechs Karten untereinander, jede mit vier
|
||
Knoepfen -- der Einstieg in die Bibliothek war damit eine halbe
|
||
Bildschirmseite, bevor ueberhaupt eine Kategorie zu sehen war.
|
||
|
||
Jetzt: der wichtigste Eintrag und der neueste. Beide sind
|
||
verschiedene Antworten ("was soll ich unbedingt lesen" und "was
|
||
ist dazugekommen"), deshalb je einer und nicht einfach die
|
||
ersten zwei. Alles Weitere ist einen Klick entfernt.
|
||
|
||
Der Server sortiert bereits Wichtiges nach vorn; hier wird nur
|
||
noch der erste jeder Sorte gesucht. */
|
||
const ersterWichtiger = neuLetzte.find((e) => e.ist_wichtig);
|
||
const ersterNeuer = neuLetzte.find((e) => e.ist_neu && e !== ersterWichtiger);
|
||
const sofort = [ersterWichtiger, ersterNeuer].filter(Boolean);
|
||
const rest = neuLetzte.filter((e) => !sofort.includes(e));
|
||
|
||
if (rest.length) {
|
||
const knopf = el('button', 'knopf-still');
|
||
knopf.type = 'button';
|
||
knopf.setAttribute('aria-expanded', 'false');
|
||
knopf.setAttribute('aria-controls', 'neu-rest');
|
||
const text = el('span', null, `Alle ${neuLetzte.length} zeigen`);
|
||
knopf.append(text);
|
||
const pfeil = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||
pfeil.setAttribute('class', 'klapp-pfeil');
|
||
pfeil.setAttribute('viewBox', '0 0 24 24');
|
||
pfeil.setAttribute('aria-hidden', 'true');
|
||
const pfad = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||
pfad.setAttribute('d', 'm6 9.5 6 6 6-6');
|
||
pfeil.append(pfad);
|
||
knopf.append(pfeil);
|
||
kopf.append(knopf);
|
||
|
||
knopf.addEventListener('click', () => {
|
||
const offen = knopf.getAttribute('aria-expanded') === 'true';
|
||
knopf.setAttribute('aria-expanded', offen ? 'false' : 'true');
|
||
const kasten = document.getElementById('neu-rest');
|
||
if (kasten) kasten.hidden = offen;
|
||
text.textContent = offen
|
||
? `Alle ${neuLetzte.length} zeigen`
|
||
: 'Nur die wichtigsten';
|
||
});
|
||
}
|
||
s.append(kopf);
|
||
|
||
s.append(el('p', 'block__frage',
|
||
'Neu Eingestelltes und als wichtig Markiertes steht 48 Stunden hier. '
|
||
+ 'Danach ist es in seiner Kategorie zu finden.'));
|
||
|
||
const box = el('div', 'karten');
|
||
for (const e of sofort) box.append(karte(e));
|
||
s.append(box);
|
||
|
||
if (rest.length) {
|
||
const mehr = el('div', 'karten');
|
||
mehr.id = 'neu-rest';
|
||
mehr.hidden = true;
|
||
for (const e of rest) mehr.append(karte(e));
|
||
s.append(mehr);
|
||
}
|
||
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]));
|
||
/* "Neu" laeuft ab, "Wichtig" nicht -- deshalb zwei Marken und nicht
|
||
eine. Sonst waere nicht erkennbar, warum etwas oben steht. */
|
||
if (e.ist_neu) marken.append(el('span', 'marke-neu', 'Neu'));
|
||
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 (!await frageNach({
|
||
titel: `„${e.titel}“ löschen?`,
|
||
was: 'Der Eintrag verschwindet aus dem Wissen. Die PDF wird dabei '
|
||
+ 'auch vom Server entfernt.',
|
||
bleibt: 'Wer sie schon heruntergeladen hat, behält seine Kopie.',
|
||
endgueltig: true, ja: 'Löschen',
|
||
})) 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();
|
||
/* Stufe und Geraet als Schalterreihe: zwei bis vier Werte, die sich
|
||
nie aendern -- dafuer ein Auswahlmenue zu oeffnen ist ein Klick zu
|
||
viel, und aufgeklappt liesse es sich ohnehin nicht gestalten. */
|
||
const reihe = (id, eintraege, wert, feldname) => {
|
||
const f = $(id);
|
||
f.textContent = '';
|
||
for (const [w, name] of [['', 'Alle'], ...eintraege]) {
|
||
const b = el('button', 'filterreihe__knopf', name);
|
||
b.type = 'button';
|
||
b.setAttribute('role', 'radio');
|
||
const an = (wert || '') === w;
|
||
b.setAttribute('aria-checked', an ? 'true' : 'false');
|
||
if (an) b.dataset.an = 'ja';
|
||
if (w) b.dataset.wert = w;
|
||
b.addEventListener('click', () => setzeZustand({ [feldname]: w }));
|
||
f.append(b);
|
||
}
|
||
};
|
||
reihe('f-stufe', Object.entries(aufbau.stufen), z.stufe, 'stufe');
|
||
reihe('f-geraet', [['pc', 'PC'], ['handy', 'Handy']], z.geraet, 'geraet');
|
||
|
||
/* Die Tags wachsen mit dem Bestand -- dafuer bleibt ein Auswahlfeld
|
||
richtig, eine Schalterreihe waere irgendwann zwei Zeilen lang. */
|
||
const f = $('f-tag');
|
||
f.textContent = '';
|
||
const alle = document.createElement('option');
|
||
alle.value = ''; alle.textContent = 'Alle';
|
||
f.append(alle);
|
||
for (const tg of aufbau.tags) {
|
||
const o = document.createElement('option');
|
||
o.value = tg; o.textContent = '#' + tg;
|
||
f.append(o);
|
||
}
|
||
f.value = z.tag || '';
|
||
$('q').value = z.q;
|
||
|
||
if (filterGefuellt) return;
|
||
filterGefuellt = true;
|
||
$('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_);
|
||
|
||
/* ---------- Kategoriewahl ------------------------------------------------ */
|
||
|
||
function setzeKategorie(schluessel) {
|
||
for (const b of document.querySelectorAll('.katwahl__knopf')) {
|
||
const an = b.dataset.kategorie === schluessel;
|
||
if (an) b.dataset.an = 'ja'; else delete b.dataset.an;
|
||
b.setAttribute('aria-checked', an ? 'true' : 'false');
|
||
}
|
||
const hinweis = $('n-kat-hinweis');
|
||
if (hinweis) {
|
||
const k = aufbau?.kategorien.find((x) => x.schluessel === schluessel);
|
||
hinweis.textContent = k ? k.beschreibung : 'Noch keine Kategorie gewählt.';
|
||
}
|
||
}
|
||
|
||
const gewaehlteKategorie = () =>
|
||
document.querySelector('.katwahl__knopf[data-an="ja"]')?.dataset.kategorie || '';
|
||
|
||
/* ---------- 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 || '') : '';
|
||
/* NICHT die erste Kategorie vorbelegen. Genau daran ist eine PDF
|
||
ueber TikTok LIVE Studio unter "TikTok - Grundlagen" gelandet:
|
||
Das Feld stand still auf dem ersten Eintrag der Liste, und wer es
|
||
nicht bewusst aendert, merkt es nicht. Vorbelegt wird nur, wenn
|
||
man aus EINER Kategorie heraus hochlaedt -- dann ist es eine
|
||
informierte Annahme, keine geratene. */
|
||
setzeKategorie(eintrag ? eintrag.kategorie : (zustand().k || ''));
|
||
$('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 : window.heuteLokal();
|
||
$('n-fehler').textContent = '';
|
||
$('neu-block').hidden = false;
|
||
$('neu-auf').hidden = true;
|
||
$('n-titel').focus();
|
||
$('neu-block').scrollIntoView({ block: 'start', behavior: window.sanft?.() || 'auto' });
|
||
}
|
||
|
||
function formularSchliessen() {
|
||
$('neu-block').hidden = true;
|
||
$('neu-auf').hidden = !aufbau.darf_pflegen;
|
||
$('neu-form').reset();
|
||
zeigeDatei();
|
||
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);
|
||
}
|
||
};
|
||
/* Nach Welten gruppiert -- dieselbe Gliederung und dieselben Farben
|
||
wie die Kacheln auf der Seite. Man waehlt aus demselben Regal, in
|
||
dem man sonst stoebert. */
|
||
const kf = $('n-kategorie');
|
||
kf.textContent = '';
|
||
for (const welt of aufbau.welten) {
|
||
const kats = aufbau.kategorien.filter((x) => x.welt === welt.schluessel);
|
||
if (!kats.length) continue;
|
||
const gruppe = el('div', 'katwahl__welt');
|
||
gruppe.dataset.welt = welt.schluessel;
|
||
gruppe.append(el('p', 'katwahl__weltname', welt.name));
|
||
const reihe = el('div', 'katwahl__reihe');
|
||
for (const k of kats) {
|
||
const b = el('button', 'katwahl__knopf');
|
||
b.type = 'button';
|
||
b.dataset.kategorie = k.schluessel;
|
||
b.setAttribute('role', 'radio');
|
||
b.setAttribute('aria-checked', 'false');
|
||
b.title = k.beschreibung;
|
||
b.append(symbol(k.symbol, 'katwahl__symbol'));
|
||
b.append(el('span', 'katwahl__name', k.name));
|
||
b.addEventListener('click', () => setzeKategorie(k.schluessel));
|
||
reihe.append(b);
|
||
}
|
||
gruppe.append(reihe);
|
||
kf.append(gruppe);
|
||
}
|
||
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);
|
||
/* ---------- Ablagefläche ---------------------------------------------- */
|
||
|
||
const ablage = $('n-ablage');
|
||
|
||
function zeigeDatei() {
|
||
const d = $('n-datei').files[0];
|
||
const text = $('n-dateiname');
|
||
text.textContent = '';
|
||
if (!d) {
|
||
text.append(document.createTextNode('PDF hierher ziehen oder '));
|
||
text.append(el('strong', null, 'auswählen'));
|
||
delete ablage.dataset.fertig;
|
||
return;
|
||
}
|
||
text.append(el('strong', null, d.name));
|
||
text.append(document.createTextNode(' · ' + groesse(d.size)));
|
||
ablage.dataset.fertig = 'ja';
|
||
/* Ist der Titel noch leer, den Dateinamen als Vorschlag nehmen --
|
||
er ist fast immer schon die halbe Miete. */
|
||
if (!$('n-titel').value.trim()) {
|
||
$('n-titel').value = d.name.replace(/\.pdf$/i, '').replace(/[_-]+/g, ' ').trim().slice(0, 140);
|
||
}
|
||
}
|
||
|
||
function nimmDatei(d) {
|
||
if (!d) return;
|
||
if (!/\.pdf$/i.test(d.name) && d.type !== 'application/pdf') {
|
||
/* SAGEN, WOHIN SIE GEHOERT (01.10.2026).
|
||
Vorher stand hier nur "Das ist keine PDF-Datei." -- richtig, aber
|
||
eine Sackgasse. Filipe hat eine HTML-Praesentation abzulegen
|
||
versucht, bekam keinen Weg genannt und suchte den Fehler bei
|
||
sich. Eine Absage ohne Alternative ist eine halbe Antwort.
|
||
Beim Auswaehlen ueber den Knopf greift schon `accept` und die
|
||
Datei ist gar nicht erst anklickbar -- deshalb ist DIESER
|
||
Hinweis beim Hineinziehen die einzige Stelle, an der wir es
|
||
ueberhaupt sagen koennen. */
|
||
$('n-fehler').textContent =
|
||
'Das ist keine PDF-Datei. Ins Wissen kommen nur PDFs — '
|
||
+ 'Präsentationen und alles andere legst du unter „Dateien“ ab.';
|
||
return;
|
||
}
|
||
const dt = new DataTransfer();
|
||
dt.items.add(d);
|
||
$('n-datei').files = dt.files;
|
||
$('n-fehler').textContent = '';
|
||
zeigeDatei();
|
||
}
|
||
|
||
ablage.addEventListener('click', () => $('n-datei').click());
|
||
ablage.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); $('n-datei').click(); }
|
||
});
|
||
$('n-datei').addEventListener('change', zeigeDatei);
|
||
for (const art of ['dragenter', 'dragover']) {
|
||
ablage.addEventListener(art, (e) => { e.preventDefault(); ablage.dataset.drueber = 'ja'; });
|
||
}
|
||
for (const art of ['dragleave', 'drop']) {
|
||
ablage.addEventListener(art, () => { delete ablage.dataset.drueber; });
|
||
}
|
||
ablage.addEventListener('drop', (e) => {
|
||
e.preventDefault();
|
||
nimmDatei(e.dataTransfer?.files?.[0]);
|
||
});
|
||
|
||
$('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: gewaehlteKategorie(),
|
||
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; }
|
||
if (!angaben.kategorie) {
|
||
$('n-fehler').textContent = 'Wähle die Kategorie aus, in der die Anleitung stehen soll.';
|
||
$('n-kategorie').scrollIntoView({ block: 'center', behavior: window.sanft?.() || 'auto' });
|
||
$('n-kategorie').querySelector('.katwahl__knopf')?.focus();
|
||
return;
|
||
}
|
||
|
||
knopf.disabled = true;
|
||
let anzeige = null;
|
||
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);
|
||
/* MIT FORTSCHRITT UND ABBRUCH (19.09.2026). Eine Schulungs-PDF
|
||
hat gern zwanzig Megabyte -- ohne Balken sieht das Formular
|
||
die ganze Zeit aus, als sei der Knopf nicht angekommen. */
|
||
let lauf = null;
|
||
anzeige = hochladeAnzeige($('n-stand'), datei.name,
|
||
() => lauf && lauf.abbrechen());
|
||
lauf = hochladen('/workspace/api/wissen', datei, {
|
||
kopf, beiFortschritt: anzeige.fortschritt,
|
||
beiVerarbeitung: anzeige.verarbeiten,
|
||
});
|
||
const ergebnis = await lauf.fertig;
|
||
if (ergebnis.abgebrochen) {
|
||
anzeige.abschluss('Abgebrochen – es wurde nichts gespeichert.');
|
||
anzeige = null;
|
||
return;
|
||
}
|
||
if (!ergebnis.ok) {
|
||
$('n-fehler').textContent = ergebnis.netz
|
||
? 'Keine Verbindung – die Datei wurde nicht hochgeladen.'
|
||
: sagWas(ergebnis.daten?.fehler, 'Das hat nicht geklappt.');
|
||
return;
|
||
}
|
||
a = { ok: true };
|
||
}
|
||
if (!a.ok) {
|
||
$('n-fehler').textContent = sagWas((await a.json().catch(() => ({}))).fehler, 'Das hat nicht geklappt.');
|
||
return;
|
||
}
|
||
const kat = aufbau.kategorien.find((k) => k.schluessel === angaben.kategorie);
|
||
formularSchliessen();
|
||
/* Sagen, WO sie gelandet ist -- sonst merkt man einen Irrtum erst,
|
||
wenn man sie irgendwann sucht. */
|
||
melde(`„${angaben.titel}“ liegt jetzt unter „${kat ? kat.name : angaben.kategorie}“.`, true);
|
||
setTimeout(() => melde(''), 7000);
|
||
$('n-stand').textContent = '';
|
||
await laden_();
|
||
} catch { /* umgeleitet */ } finally {
|
||
if (anzeige) anzeige.weg();
|
||
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 {
|
||
/* NICHT MEHR STUMM (20.09.2026). Hier stand `catch { return; }`
|
||
-- und damit blieb die Seite bei jedem Netzaussetzer fuer
|
||
immer auf "wird geladen …" stehen. Gemessen auf 13 von 21
|
||
Seiten. `ladefehler()` sagt, was los ist, und bietet einen
|
||
Knopf an, der es noch einmal versucht. */
|
||
window.ladefehler?.();
|
||
return;
|
||
}
|
||
window.werZeigen?.(ich);
|
||
|
||
await laden_();
|
||
if (aufbau) {
|
||
fuelleFormular();
|
||
$('neu-auf').hidden = !aufbau.darf_pflegen;
|
||
}
|
||
})();
|
||
})();
|