Spenden: Stufen gestaltbar, Bild hochladen, Größe je Stufe

Filipes Wunsch: „mach paar fertige und so dass ich auch hochladen
kann. auch so dass ich das anders gestalten kann oder die größe
verändern kann. ... auch spezielle sachen bei speziellen spenden."

WAS ES SCHON GAB, WAS FEHLTE
Drei Stufen ab Werk, fünf gezeichnete Zeichen, Farbe und Dauer je
Stufe — und sogar schon ein Feld für ein eigenes Bild. Es fehlte der
Weg, das alles zu ÄNDERN: Um eine Stufe umzubenennen, hätte jemand in
die Datenbank greifen müssen.

DIE GRÖSSE IST DAS „SPEZIELLE BEI SPEZIELLEN SPENDEN"
Je Stufe, nicht einmal für alle: Eine Rudel-Legende darf größer
dastehen als ein Danke. Eine einzige Größe für alle wäre wieder eine
Preisliste. Umgesetzt als EINE Schriftgröße, alles darin in `em` —
nicht `transform: scale()`, denn die Karte kommt schon mit
`translateX()` herein, und zwei `transform` an derselben Stelle
schließen einander aus; außerdem wird Text beim Skalieren matschig.
Nur nach oben (1 bis 2,5), und das ist eine ehrliche Grenze: Das
kleinste Wort auf der Karte steht bei 11,52 px, die Hausgrenze ist
11,5. Ein Faktor von 0,8 machte daraus 9,2 px. Kleiner geht an der
richtigen Stelle — die OBS-Tafel hat ihren eigenen Regler in der
Adresse, dort ist es eine Videoeinblendung und kein Text zum Lesen.

AUSPROBIEREN, OHNE EINE SPENDE ANZULEGEN
Der naheliegende Weg wäre gewesen: eine Spende eintragen und danach
löschen. Das ist verboten — in ein laufendes System kommen keine
Testdaten, und „gelöscht" heißt bei Geld nicht „war nie da". Die
Probe schreibt deshalb NICHTS und geht nur an den, der drückt; eine
Probe im ganzen Saal wäre eine Spende, die es nicht gab.

DREI FEHLER, DIE DIE PRÜFUNG GEFUNDEN HAT

1. `protokolliere()` wurde an 17 Stellen falsch herum gerufen —
   `(personId, aktion, detail, ip)` statt `(aktion, {…})`. JavaScript
   beschwert sich nicht: Das zweite Argument war ein Text, und einen
   Text zu zerlegen ergibt lauter `undefined`. Auf dem echten Server
   nachgemessen: 39 Protokollzeilen mit Aktionen wie „16.0", alle
   ohne Person, ohne Detail, ohne IP. Betroffen waren Material,
   Hilfe, Bühne, Reaction und Spenden — also jede Änderung an
   Dogi-Media und jede Maßnahme im Live-Chat, ausgerechnet das,
   wofür es ein Protokoll gibt. Alle 17 berichtigt, und
   pruef-struktur wacht jetzt darüber (mit Gegenprobe).

2. Beim Speichern der Leiter bekam jede Stufe eine NEUE Kennung
   (DELETE + INSERT). Ein Bild-Hochladen gegen die eben noch gültige
   Kennung antwortete mit 404 — im Alltag trifft das jeden, der einen
   zweiten Bildschirm offen hat. Jetzt werden vorhandene Zeilen
   geändert statt ersetzt; das Bild bleibt von selbst daran hängen.

3. `ab_cent` ist eindeutig. Zwei Stufen ihre Beträge tauschen zu
   lassen scheiterte mit „UNIQUE constraint failed", obwohl das
   Ergebnis in Ordnung gewesen wäre: Beim Umschreiben stößt die
   Leiter auf sich selbst. Jetzt in drei Schritten — löschen,
   geparkte Zwischenwerte, endgültige Werte —, und das ist nach
   außen nie sichtbar.

UND DREI, DIE IN MEINER MESSUNG STECKTEN
Die Messung hat eine noch laufende Karte aus dem vorigen Abschnitt
erwischt und daraus drei Fehler gemeldet, die keine waren —
darunter „die Probe läuft im ganzen Saal". Sie zählte außerdem die
versteckten Dateifelder als zu kleine Tippziele. Jetzt räumt sie
vorher auf, wartet auf die Karte MIT DER ERWARTETEN GRÖSSE (die
Karten laufen in einer Schlange — einen Knoten zu entfernen beendet
sie nicht) und lässt die Einblendung zur Ruhe kommen, bevor sie misst.
Ein Bildschirmfoto aus der Einblendphase sah aus, als stünde die
Karte links heraus; nachgemessen: links 18 px, ganz im Bild.

GEMESSEN, NICHT ANGENOMMEN
Karte bei Größe 1: Schrift 16 px, Betrag 25,92 px. Bei Größe 2:
32 px und 51,84 px — Faktor exakt 2,00. Hätte eine einzige Regel noch
in `rem` gestanden, wäre die Karte ungleichmäßig gewachsen, und auf
einem Bild sieht beides nur „größer" aus.

AUCH DAS BILD IST GEPRÜFT
Es liegt am Bühnen-Router und nicht am Spenden-Router: Die
Spendentafel in OBS hat keine Anmeldung, und ein 401 als JSON in
einem `<img>` ergibt ein kaputtes Bild ohne jeden Hinweis. Ohne
Schlüssel, aber mit 128 Bit zufälligem Dateinamen — dieselbe
Größenordnung wie der Bühnenschlüssel, und es ist ein Zierbild, das
ohnehin im Stream steht. Kein Ausbruch aus dem Ordner (vier Wege
geprüft, gemessen wird die Wirkung und nicht der Statuscode).

NACHGETRAGEN AUS BLOCK 4
`reaktion_meldungen` fehlte im Löschkonzept — eine bestehende Prüfung
hat es gefunden. 30 Tage nach dem Erledigen; meistens sind sie
ohnehin früher weg, weil der Live-Chat beim Beenden gelöscht wird und
die Meldungen daran hängen. Wer meldet, muss sich darauf verlassen
können, dass daraus keine dauerhafte Liste wird.

GEPRUEFT
pruef-spenden: 95 Prüfungen (vorher 46), 0 Fehler.
pruef-reaktion 260, pruef-buehne 36, pruef-aufbewahrung 45,
pruef-struktur, pruef-meldungen, pruef-css-klassen, pruef-tippziele,
pruef-deutsche-texte, pruef-auskunft alle grün.
mess-reaktion und mess-buehne: Rückgabewert 0, kein ACHTUNG.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/js/meldung.js

@@ -217,6 +217,31 @@
     schon_im_bild:
       'Das läuft gerade schon. Ein Umschalter braucht zwei verschiedene Videos – '
       + 'sonst passiert beim Drücken nichts.',
+    /* ---- Die Gestaltung der Spendenkarten --------------------- */
+    stufen_fehlen:
+      'Da ist keine Stufenleiter angekommen. Lade die Seite neu und versuch es noch einmal.',
+    keine_stufe:
+      'Mindestens eine Stufe muss es geben – sonst erscheint bei einer Spende gar nichts.',
+    zu_viele_stufen:
+      'Mehr als sechs Stufen werden unübersichtlich. Nimm eine weg, dann geht es.',
+    stufe_betrag_unklar:
+      'Bei einer Stufe ergibt der Betrag keinen Sinn. Schreib ihn in Euro, zum Beispiel 5 oder 7,50.',
+    stufe_name_fehlt:
+      'Jede Stufe braucht einen Namen – er steht auf der Karte.',
+    stufe_doppelt:
+      'Zwei Stufen fangen beim selben Betrag an. Dann wäre nicht entschieden, welche gilt.',
+    vorlage_unbekannt:
+      'Dieses Zeichen gibt es nicht. Wähl eines aus der Liste.',
+    farbe_unklar:
+      'Diese Farbe verstehe ich nicht. Nimm den Farbwähler.',
+    groesse_unklar:
+      'Diese Größe geht nicht. Möglich ist 1 bis 2,5 – kleiner wäre auf der Karte nicht mehr zu lesen. '
+      + 'Für den Stream kannst du die Tafel über ihre Adresse kleiner stellen.',
+    kein_bild:
+      'Das ist kein Bild. Erlaubt sind JPG, PNG und WebP.',
+    bild_zu_gross:
+      'Das Bild ist zu groß. Erlaubt sind 3 MB.',
+
     kein_zweites:
       'Es liegt kein zweites Video bereit. Trag eins unter „Sendung" ein, '
       + 'dann kannst du hin und her wechseln.',

workspace/assets/js/reaktion.js

@@ -1607,6 +1607,10 @@
     $('obs-neu').addEventListener('click', buehneNeu);
     buehneHolen();
 
+    /* ---- Gestaltung ---- */
+    $('stufe-neu').addEventListener('click', stufeDazu);
+    $('stufen-sichern').addEventListener('click', stufenSichern);
+
     /* ---- Spenden ---- */
     $('sp-zeigen').addEventListener('click', spendeEintragen);
     $('sp-betrag').addEventListener('keydown', (e) => {
@@ -2542,6 +2546,213 @@
   let spendenLage = null;
   let gemeldeterBetrag = 0;
 
+  /* =================================================================
+     DIE STUFENLEITER
+
+     Filipe: „mach paar fertige und so dass ich auch hochladen kann.
+     auch so dass ich das anders gestalten kann oder die größe
+     verändern kann. ... auch spezielle sachen bei speziellen spenden."
+
+     ALLES AUF EINMAL SPEICHERN UND NICHT ZEILE FÜR ZEILE. Eine
+     Stufenleiter ist keine Liste unabhängiger Zeilen — sie muss als
+     GANZES stimmen: aufsteigende Grenzen, keine zwei mit demselben
+     Betrag, mindestens eine. Wer einzeln speichert, geht durch
+     Zwischenzustände, in denen sie das nicht tut, und mitten in einer
+     Sendung fiele dann eine Spende in die falsche Stufe.
+
+     Das Bild ist die Ausnahme: Es wird sofort hochgeladen. Eine
+     Datei in einem Formular zwischenzuhalten, bis jemand
+     „Übernehmen" drückt, heißt, sie bei jedem Versehen wieder zu
+     verlieren. */
+  let stufen = null;
+
+  function stufenZeichnen() {
+    const kasten = $('stufen');
+    if (!kasten || !stufen) return;
+    const g = stufen.gestaltung;
+    kasten.textContent = '';
+
+    stufen.liste.forEach((st, i) => {
+      const zeile = el('div', 'stufe-zeile');
+      zeile.dataset.platz = String(i);
+
+      const feld = (wort, knoten) => {
+        const l = el('label', 'stufe-feld');
+        l.append(el('span', null, wort));
+        l.append(knoten);
+        return l;
+      };
+      const eingabe = (art, wert, wie) => {
+        const e = document.createElement('input');
+        e.type = art;
+        e.value = wert;
+        Object.assign(e, wie || {});
+        e.addEventListener('input', () => { stufenGeaendert(); });
+        return e;
+      };
+
+      /* Der Betrag steht in EURO im Feld und in CENT in der Leitung.
+         Gerechnet wird nie mit dem, was hier steht. */
+      zeile.append(feld('Ab', eingabe('text', (st.ab_cent / 100)
+        .toString().replace('.', ','), { inputMode: 'decimal', className: 'stufe-ab' })));
+      zeile.append(feld('Name', eingabe('text', st.name,
+        { maxLength: 40, className: 'stufe-name' })));
+
+      const wahl = document.createElement('select');
+      wahl.className = 'stufe-vorlage';
+      for (const v of g.vorlagen) {
+        const o = document.createElement('option');
+        o.value = v;
+        o.textContent = v.charAt(0).toUpperCase() + v.slice(1);
+        wahl.append(o);
+      }
+      wahl.value = st.vorlage;
+      wahl.addEventListener('change', stufenGeaendert);
+      zeile.append(feld('Zeichen', wahl));
+
+      zeile.append(feld('Farbe', eingabe('color', st.farbe, { className: 'stufe-farbe' })));
+      zeile.append(feld('Sekunden', eingabe('number', String(Math.round(st.dauer_ms / 1000)), {
+        min: String(Math.round(g.dauer_min / 1000)),
+        max: String(Math.round(g.dauer_max / 1000)),
+        step: '1', className: 'stufe-dauer',
+      })));
+      zeile.append(feld('Größe', eingabe('number', String(st.groesse), {
+        min: String(g.groesse_min), max: String(g.groesse_max),
+        step: '0.05', className: 'stufe-groesse',
+      })));
+
+      /* ---- Das eigene Bild ---- */
+      const bildTeil = el('div', 'stufe-bild');
+      if (st.bild) {
+        const b = document.createElement('img');
+        b.src = st.bild;
+        b.alt = '';
+        bildTeil.append(b);
+      }
+      const hoch = el('label', 'stufe-tun', st.bild ? 'Anderes Bild' : 'Bild hochladen');
+      const wahlfeld = document.createElement('input');
+      wahlfeld.type = 'file';
+      wahlfeld.accept = 'image/jpeg,image/png,image/webp';
+      wahlfeld.hidden = true;
+      wahlfeld.addEventListener('change', () => bildHoch(st, wahlfeld));
+      hoch.append(wahlfeld);
+      /* NUR WER SCHON GESPEICHERT IST, KANN EIN BILD BEKOMMEN. Eine
+         frische Zeile hat noch keine Kennung, an der es hängen
+         könnte -- der Knopf sagt das, statt ins Leere zu greifen. */
+      if (!st.id) {
+        hoch.classList.add('stufe-tun--aus');
+        hoch.textContent = 'Erst übernehmen';
+        wahlfeld.disabled = true;
+      }
+      bildTeil.append(hoch);
+      if (st.bild) {
+        const weg = el('button', 'stufe-tun stufe-tun--weg', 'Bild weg');
+        weg.type = 'button';
+        weg.addEventListener('click', () => bildWeg(st));
+        bildTeil.append(weg);
+      }
+      zeile.append(bildTeil);
+
+      const probe = el('button', 'stufe-tun', 'Ausprobieren');
+      probe.type = 'button';
+      probe.title = 'Zeigt dir eine Karte — es wird keine Spende daraus';
+      probe.addEventListener('click', () => stufeProbe(st));
+      zeile.append(probe);
+
+      const weg = el('button', 'stufe-tun stufe-tun--weg', 'Stufe weg');
+      weg.type = 'button';
+      weg.addEventListener('click', () => { stufen.liste.splice(i, 1); stufenZeichnen(); stufenGeaendert(); });
+      zeile.append(weg);
+
+      kasten.append(zeile);
+    });
+
+    $('stufe-neu').disabled = stufen.liste.length >= stufen.gestaltung.stufen_max;
+  }
+
+  function stufenGeaendert() {
+    const st = $('stufen-stand');
+    if (st) { st.textContent = 'Noch nicht übernommen'; st.dataset.offen = 'ja'; }
+  }
+
+  function stufeDazu() {
+    if (!stufen || stufen.liste.length >= stufen.gestaltung.stufen_max) return;
+    const hoechste = stufen.liste.reduce((a, b) => Math.max(a, b.ab_cent), 0);
+    stufen.liste.push({
+      id: 0, ab_cent: hoechste ? hoechste * 2 : 100, name: 'Neue Stufe',
+      vorlage: 'stern', bild: '', farbe: '#8ec9ff', dauer_ms: 7000, groesse: 1,
+    });
+    stufenZeichnen();
+    stufenGeaendert();
+  }
+
+  /** Was in den Feldern steht, zurück in Zahlen. */
+  function stufenAusFeldern() {
+    return [...$('stufen').children].map((zeile, i) => ({
+      id: stufen.liste[i]?.id || 0,
+      ab_cent: eurosInCent(zeile.querySelector('.stufe-ab').value),
+      name: zeile.querySelector('.stufe-name').value.trim(),
+      vorlage: zeile.querySelector('.stufe-vorlage').value,
+      farbe: zeile.querySelector('.stufe-farbe').value,
+      dauer_ms: Math.round(Number(zeile.querySelector('.stufe-dauer').value) * 1000),
+      groesse: Number(zeile.querySelector('.stufe-groesse').value),
+    }));
+  }
+
+  async function stufenSichern() {
+    const liste = stufenAusFeldern();
+    const a = await hole('/workspace/api/spenden/stufen', {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ stufen: liste }),
+    });
+    if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
+    const d = await a.json();
+    stufen.liste = d.stufen;
+    stufenZeichnen();
+    const st = $('stufen-stand');
+    st.textContent = 'Übernommen';
+    st.dataset.offen = 'nein';
+  }
+
+  async function bildHoch(stufe, feld) {
+    const datei = feld.files && feld.files[0];
+    if (!datei) return;
+    feld.value = '';
+    const a = await hole(`/workspace/api/spenden/stufe/${stufe.id}/bild`, {
+      method: 'POST',
+      headers: { 'Content-Type': datei.type || 'application/octet-stream' },
+      body: datei,
+    });
+    if (!a.ok) { melde(await a.json().catch(() => null), 'Das Bild ging nicht.'); return; }
+    const d = await a.json();
+    stufen.liste = d.stufen;
+    stufenZeichnen();
+  }
+
+  async function bildWeg(stufe) {
+    const a = await hole(`/workspace/api/spenden/stufe/${stufe.id}/bild`, { method: 'DELETE' });
+    if (!a.ok) { melde(await a.json().catch(() => null), 'Das ging nicht.'); return; }
+    const d = await a.json();
+    stufen.liste = d.stufen;
+    stufenZeichnen();
+  }
+
+  /** Einmal ansehen -- ohne dass eine Spende daraus wird.
+   *
+   *  DER NAHELIEGENDE WEG WÄRE FALSCH GEWESEN: eine Spende von Hand
+   *  eintragen und danach löschen. In ein laufendes System kommen
+   *  keine Testdaten, und „gelöscht" heißt bei Geld nicht „war nie
+   *  da" -- der Eintrag stünde im Verlauf und in der Aufbewahrung. */
+  async function stufeProbe(stufe) {
+    const a = await hole('/workspace/api/spenden/probe', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ betrag_cent: stufe.ab_cent }),
+    });
+    if (!a.ok) melde(await a.json().catch(() => null), 'Das ging nicht.');
+  }
+
   async function spendenHolen() {
     try {
       const a = await hole('/workspace/api/spenden');
@@ -2549,6 +2760,15 @@
       spendenLage = await a.json();
       gebenZeichnen();
       if (lage && lage.ich.host) spendenPultZeichnen();
+      /* DIE STUFENLEITER NUR BEIM ERSTEN MAL AUS DER LEITUNG NEHMEN.
+         Wer gerade an den Feldern tippt und dabei eine Spende
+         hereinbekommt, verlöre sonst mitten im Satz, was er
+         eingetragen hat -- `spendenHolen()` läuft bei jeder
+         Meldung. */
+      if (lage && lage.ich.host && spendenLage.gestaltung && !stufen) {
+        stufen = { liste: spendenLage.stufen, gestaltung: spendenLage.gestaltung };
+        stufenZeichnen();
+      }
     } catch { /* ohne Feld ist die Seite vollständig */ }
   }
 

workspace/assets/js/spendenkarte.js

@@ -115,6 +115,16 @@
     const farbe = karte.stufe?.farbe || '#8ec9ff';
     const tafel = el('div', 'spendenkarte');
     tafel.style.setProperty('--sp-farbe', farbe);
+    /* DIE GROESSE KOMMT VON DER STUFE. Genau das ist „spezielle
+       sachen bei speziellen spenden": Eine Rudel-Legende darf
+       größer dastehen als ein Danke.
+       BEGRENZT, obwohl der Server schon prüft -- diese Datei läuft
+       auch auf der OBS-Tafel, und dort kommt der Wert über den
+       Bühnenstrom. Eine Zahl, die aus der Leitung kommt, wird nicht
+       ungeprüft in ein Stilblatt geschrieben. */
+    const g = Number(karte.stufe?.groesse);
+    tafel.style.setProperty('--sp-gross',
+      String(Number.isFinite(g) && g >= 1 && g <= 2.5 ? g : 1));
     tafel.dataset.stufe = karte.stufe?.name || '';
     tafel.setAttribute('role', 'status');