KAPITEL 5.6: "Sammelstelle fuer Content-, Live- und Community-Ideen mit
Priorisierung." Fast nichts davon musste neu gebaut werden: `eintraege`
hat Titel, Text, Status und `dringlichkeit` (hoch/mittel/niedrig) -- und
das IST die Priorisierung. Eine eigene Tabelle daneben waere eine VIERTE
Sichtbarkeitsregel gewesen; genau deren Vervielfaeltigung hat heute
schon ein Leck verursacht.
Der Bereich gehoert niemandem einzeln (`ohneCreatorBezug`) -- eine Idee
gehoert der Runde. KEIN `fuerAlle`: Das waere der naheliegende Griff
gewesen und der falsche, denn es heisst woertlich JEDER. Wer die
Sammlung sieht, entscheidet dieselbe Regel wie ueberall.
DER RISKANTE TEIL WAR DIE DATENBANK. Die erlaubten Bereiche stehen als
CHECK-Regel, und SQLite kann die nicht aendern -- die Tabelle muss neu
gebaut werden. Die alte Umstellung fuer 'agentur' schreibt dafuer den
ganzen Bauplan von Hand ab; im Kommentar dort steht, dass dabei schon
einmal drei Spalten vergessen wurden. Statt einer vierten Abschrift ist
die Fassung von heute Morgen jetzt tabellenunabhaengig
(checkListeErweitern): Spaltenliste aus der Tabelle, Sicherung vorher,
Zaehlung innerhalb der Transaktion.
UND DABEI WAERE EIN STILLER TOTALAUSFALL PASSIERT. Das Muster fuer den
Tabellenkopf stand in einem Template-Literal -- dort verschluckt
JavaScript den Backslash, aus `\s` wird `s`, das Muster hiess
"CREATE TABLEs+..." und traf nie etwas. Die Umstellung haette
SCHWEIGEND nichts getan: kein Fehler, kein Hinweis, nur ein Bereich, den
es nie gegeben haette. Im Quelltext war das nicht zu sehen; gefunden hat
es eine Messung. Jetzt steht dort gar kein Muster mehr -- alles vor der
ersten Klammer IST der Tabellenkopf, und das kann man nicht falsch
maskieren.
Die Pruefung baut deshalb eine ECHTE ALTE Tabelle und laesst die
Umstellung darauf laufen. Eine frische Datenbank bringt den Bereich
schon mit -- die Umstellung liefe gar nicht erst an, und alles waere
gruen, ohne das Riskante angesehen zu haben.
=== DER GROESSERE FUND ===
FUENF VON ZEHN MODI-KACHELN FUEHRTEN INS LEERE. Der Server hat eine
Liste, welche Rolle welche Seite oeffnen darf; bereich.html und
profil.html schlossen 'modi' aus. Vier Bereichs-Kacheln und das eigene
Profil leiteten wortlos auf die Startseite zurueck.
Der Rollen-Rundgang meldete sie trotzdem als "ok", und zu Recht: Eine
Umleitung ist kein Fehler. Die Seite laedt, keine rote Konsole, keine
4xx-Antwort. Sie ist nur eine ANDERE. Das ist eine eigene Fehlerklasse
-- nicht "kaputt", sondern "fuehrt woandershin" -- und sie faellt nur
dem auf, der die Anwendung benutzt und merkt, dass ein Knopf nichts tut.
Beinahe waere meine eigene Pruefung darauf hereingefallen: Sie fand auf
der zurueckgeleiteten Startseite das Wort "Ideen-Board" -- den Text der
KACHEL -- und hielt sie fuer das Board. Jetzt steht die Adresse in der
Bedingung.
DIE SPERRE DAGEGEN GILT AB SOFORT FUER ALLE: pruef-rollen klickt fuer
JEDE Rolle jede Kachel durch, die sie angeboten bekommt, und verlangt,
dass sie dort ankommt. Geprueft wird die Zusage der Startseite, nicht
eine Liste daneben -- eine Liste koennte selbst veralten. 113 -> 243
Pruefungen; der Zuwachs ist genau das.
Er hat im ersten Anlauf zwei weitere Loecher gefunden:
* "Mein Profil" war die falsche Seite. profil.html ist der
Creator-Entwicklungsplan und antwortet mit 404, wenn die Person kein
Creator ist. Die eigene Seite heisst steckbrief.html.
* content.html stand auf `null` ("jede angemeldete Rolle") -- mit der
neuen Rolle also auch sie. Die Seite laedt, ihre Schnittstelle gibt
404. Das ist die Kehrseite von "geschuetzt ist die Regel, nicht die
Ausnahme": Eine NEUE ROLLE erbt jedes `null` automatisch.
Und ein Modi kommt nur in SEINE Bereiche -- sonst waere er ueber die
Adresszeile in der Agentur-Ablage gelandet. Welche erlaubt sind, wird
aus seinen Kacheln abgeleitet statt danebengeschrieben.
=== KLEINERES, ABER SICHTBARES ===
Ueber dem Board stand "Betreuung" -- die Beschriftung fuer Akten, die
UEBER jemanden gefuehrt werden. Eine Sammelstelle ist das Gegenteil.
Aufgefallen auf dem Bildschirmfoto, wie so oft heute.
Der Farbton der Kachel ist nicht nach Gefuehl gewaehlt: Alle 22
vorhandenen waren belegt, also wurde der Abstand zu jedem ausgerechnet
und der genommen, der sich am deutlichsten unterscheidet, ohne grau zu
wirken (#5f8a9f, Abstand 127).
BEINAHE HAETTE ICH EIN LOCH REPARIERT, DAS ES NICHT GIBT: Meine Pruefung
meldete, die Suche verrate die Ideen an Spicy Media. Tatsaechlich fand
sie null Treffer -- die Pruefung hatte ihren EIGENEN Suchbegriff
wiedergefunden, weil die Antwort ihn im Feld `frage` zurueckspiegelt.
Gezaehlt wird jetzt, was gefunden wurde.
pruef-spicy erwartete den alten Wortlaut der Umstellungsmeldung. Sie
nennt jetzt Tabelle und Spalte statt "Rolle"; geprueft wird der Sinn,
nicht der Satz.
GEPRUEFT: pruef-modi-ideen (30, neu), pruef-rollen (243 statt 113),
pruef-modi-verborgen (75), pruef-modi-katalog (29), pruef-spicy (60),
pruef-css-klassen, pruef-start-ansicht.
Co-Authored-By: Claude Opus 5 <[email protected]>
193 lines
11 KiB
HTML
193 lines
11 KiB
HTML
<!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 · Spicy & Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
|
||
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
|
||
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
|
||
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
|
||
eine Flaeche sind statt zweier. -->
|
||
<meta name="theme-color" content="#06090f" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609100219" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609100219" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609100219" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609100219" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609100219" />
|
||
<link rel="stylesheet" href="assets/css/wissen.css?v=202609100219" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609100219" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
|
||
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
|
||
Pseudo-Elements -- body hat nur ::before und ::after. -->
|
||
<div class="schleier" aria-hidden="true"></div>
|
||
|
||
<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"><span class="marke__text"><a class="zurueck" href="start.html">Creator Workspace</a> · Wissen</span></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">
|
||
<span class="feld-schild">Stufe</span>
|
||
<div class="filterreihe" id="f-stufe" role="radiogroup" aria-label="Stufe"></div>
|
||
<span class="feld-schild">Gerät</span>
|
||
<div class="filterreihe" id="f-geraet" role="radiogroup" aria-label="Gerät"></div>
|
||
<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">
|
||
<!-- Erst die Datei, dann die Angaben dazu: Man laedt etwas hoch und
|
||
beschreibt DANN, was es ist -- nicht umgekehrt. -->
|
||
<div class="feld feld--breit" id="n-datei-block">
|
||
<label class="feld-schild">PDF-Datei</label>
|
||
<div class="pdf-ablage" id="n-ablage" tabindex="0" role="button"
|
||
aria-label="PDF auswählen oder hierher ziehen">
|
||
<svg class="pdf-ablage__zeichen" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path d="M12 16V4m0 0L7.5 8.5M12 4l4.5 4.5" />
|
||
<path d="M4 15v3.5A1.5 1.5 0 0 0 5.5 20h13a1.5 1.5 0 0 0 1.5-1.5V15" />
|
||
</svg>
|
||
<p class="pdf-ablage__text" id="n-dateiname">PDF hierher ziehen oder <strong>auswählen</strong></p>
|
||
<p class="pdf-ablage__klein">Höchstens 40 MB · nur echte PDF-Dateien</p>
|
||
<input type="file" id="n-datei" accept="application/pdf,.pdf" hidden />
|
||
</div>
|
||
</div>
|
||
|
||
<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">
|
||
<span class="feld-schild">Hauptkategorie</span>
|
||
<!-- Kein Auswahlmenü: Zwanzig Einträge in einem aufgeklappten
|
||
Systemmenü sind unlesbar, und gestalten lässt es sich nicht
|
||
(weisses Windows-Menü in dunkler Oberfläche). Hier stehen
|
||
dieselben sechs Welten wie auf der Seite. -->
|
||
<div class="katwahl" id="n-kategorie" role="radiogroup" aria-label="Hauptkategorie"></div>
|
||
<p class="leise" id="n-kat-hinweis">Noch keine Kategorie gewählt.</p>
|
||
</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">(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>
|
||
|
||
<!-- Steht abgesetzt: Es ist keine Angabe zur PDF, sondern eine
|
||
Entscheidung darüber, wo sie erscheint. -->
|
||
<label class="schalter">
|
||
<input type="checkbox" id="n-wichtig" />
|
||
<span class="schalter__gleis"><span class="schalter__punkt"></span></span>
|
||
<span class="schalter__text">
|
||
<strong>Besonders wichtig</strong>
|
||
<span class="leise">Erscheint zusätzlich ganz oben unter „Neu & wichtig“.</span>
|
||
</span>
|
||
</label>
|
||
|
||
<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/wahl.js?v=202609100219" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609100219" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609100219" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609100219" defer></script>
|
||
<script src="assets/js/wissen.js?v=202609100219" defer></script>
|
||
</body>
|
||
</html>
|