Material: Bilder und Videos zum Posten, jedes nur einmal

Filipe, 22.09.2026: "ich brauch auch noch eine neue kachel im bereich
community, wo wir als team ... bilder reinschicken koennen, mit text
und wo die leute sei es community oder modis sich die bilder nehmen
koennen zum posten. die community soll keine posten koennen ... sobald
ein bild oder ein video ... runtergeladen wurde, soll direkt blockiert
werden ... damit nie ein bild zwei mal gepostet wird ... und die rechte
hand und dogfather, nur die beiden sollen auch immer sehen koennen wer
das bild oder video runtergeladen hat."

DER KERN IST DIE EINMALIGKEIT, und deshalb sind Nehmen und Laden ZWEI
Schritte. "nehmen" schreibt in EINER Abfrage fest, wer es hat -- mit
`WHERE genommen_von IS NULL` in der Bedingung. Wer zu spaet kommt,
aendert null Zeilen und bekommt 409. Ein einziger Schritt ("laden und
dabei markieren") haette dieselbe Luecke wie ein Pool ohne Sperre:
zwei Anfragen, beide sehen "frei", beide laden.

UND DIE SPERRE GILT AUCH FUER DIE VORSCHAU. Waere sie offen
geblieben, waere sie der Weg, ein vergebenes Bild doch noch zu
bekommen (Rechtsklick, speichern) -- und die ganze Einmaligkeit eine
Behauptung. Ausnahme: wer es selbst genommen hat, sieht es weiter.

WER WEN SIEHT, entscheidet der Server, nicht die Seite. Fuer alle
ausser DogFather und der rechten Hand fehlt das Feld `genommen_von`
ganz -- nicht `null`: Ein Feld, das da ist und leer bleibt, laedt
dazu ein, es spaeter "zu fuellen".

pruef-material.mjs (70 Pruefungen, 0 Fehler) misst den ganzen Weg,
mit Gegenprobe zu jeder Grenze. Die Zahl der vergebenen Stuecke steht
in der BEDINGUNG -- ohne sie waere "keine Namen dabei" trivial wahr.

DREI DINGE HAT ERST DER BLICK MIT ECHTEN AUGEN GEFUNDEN
(tools/material-blick.mjs, drei Rollen, vier Bildschirmbreiten):

  * "hat es genommen am 22.09.." -- eine deutsche Datumsangabe endet
    selbst auf einen Punkt. Kein Pruefprogramm haette danach gefragt.
  * Die Knoepfe standen auf drei verschiedenen Hoehen (1127, 1155,
    1176), weil der eine Text zwei Zeilen hatte und der naechste
    keine. `margin-top: auto` am Fuss statt einer geratenen
    Mindesthoehe.
  * "Schon benutzt" nahm 273 px Hoehe je Stueck fuer ein einziges
    Zeichen -- das Bild ist dort ohnehin nicht mehr abrufbar. Jetzt
    eine Zeile mit 96 px.

Am Handy (412 px) blieb es bei EINER Spalte: 3062 px Seitenhoehe fuer
fuenf Stuecke. Filipe: "es ist alles so lang gezogen, muss ewig
scrollen". Statt einer festen Umbruchschwelle -- die am 06.09. schon
zweimal teuer war -- waechst die Spaltenbreite jetzt mit:
`max(160px, 22%)`. Gemessen 360/412/768/1500 px: 2/2/3/3 Spalten,
nirgends ein Ueberlauf, 412 px jetzt 2014 statt 3062 px.

Dazu neun Saetze in meldung.js. Der wichtigste ist "schon_genommen",
und er ist bewusst kein Fehler: Wer ihn liest, hat nichts falsch
gemacht. pruef-meldungen fand dabei einen Rest aus dem Aufgaben-Block
-- `nur_leitung_legt_an` hatte keinen Satz, ein Modi mit altem Tab
haette rohen Maschinentext gelesen.

pruef-material 70/0 · pruef-meldungen 8/0 · pruef-treff 80/0
pruef-rechtetafel 19/0 · pruef-sackgassen 13/0 · pruef-css-klassen ok
pruef-zwischenspeicher 27/0

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-09-22 02:27:21 +02:00
co-authored by Claude Opus 5
parent e4c6d69ce8
commit 06f3fecaa7
50 changed files with 2489 additions and 521 deletions
+21
View File
@@ -306,6 +306,27 @@
mit einem Pfeil, der ihn nach oben rechts verlaesst. Es zu
erfinden waere ein Fehler; wer es kennt, weiss sofort, dass sich
ein neues Fenster oeffnet. */
/* MATERIAL (22.09.2026) -- ein Bild mit einem zweiten dahinter.
------------------------------------------------------------------
Zwei Rahmen, versetzt: Es ist ein VORRAT, aus dem man sich etwas
nimmt, kein einzelnes Bild. Der vordere traegt eine kleine Sonne
und einen Huegel -- die kuerzeste Art, "Bild" zu sagen, ohne eine
Kamera zu zeichnen (die haette "aufnehmen" geheissen, und genau
das tut hier niemand).
Der Huegel ist Flaeche, alles andere Linie: Auf 19 Pixeln
verschwindet eine reine Strichzeichnung, und eine ganz gefuellte
sieht aus wie ein Klecks. */
galerie: {
/* Die Sonne ist ein Kreis-PFAD und kein <circle>:
`zeichenBauen` kennt nur `fuellung` und `linien` -- ein
drittes Feld waere stumm geblieben, und niemand haette
gesehen, warum die Sonne fehlt. */
fuellung: ['M8.6 15.2 11 12.6 13 14.6 15.6 11.4 18.4 15.2z',
'M11.2 9.25a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3z'],
linien: ['M8 7.6h11.2a1.2 1.2 0 0 1 1.2 1.2v8.4a1.2 1.2 0 0 1-1.2 1.2H8a1.2 1.2 0 0 1-1.2-1.2V8.8A1.2 1.2 0 0 1 8 7.6z',
'M4.6 16.6V5.6A1.2 1.2 0 0 1 5.8 4.4h10.6'],
},
hinaus: {
/* Nur der Pfeilkopf ist Flaeche -- er ist die Aussage. */
fuellung: ['M13.8 4H20v6.2z'],
+305
View File
@@ -0,0 +1,305 @@
/* =====================================================================
material.js — Bilder und Videos zum Posten, jedes nur einmal
=====================================================================
Auftrag vom 22.09.2026.
DIESE DATEI KENNT KEINEN ROLLENNAMEN. Ob jemand einstellen darf und
ob er sieht, wer sich etwas genommen hat, sagt der Server
(`darf_einstellen`, `sieht_wer`). Stünde es hier, stünde es in einer
Datei, die jeder herunterlädt — und wäre am Tag der nächsten
Änderung falsch.
DER WICHTIGSTE TEIL IST DAS NEHMEN, und es sind zwei Schritte:
erst festschreiben (`/nehmen`), dann herunterladen. Wer zu spät
kommt, bekommt 409 und sieht sofort, dass es weg ist — statt eine
Datei zu laden, die schon jemand anders postet.
===================================================================== */
(() => {
'use strict';
const $ = (id) => document.getElementById(id);
const el = (was, klasse, text) => {
const e = document.createElement(was);
if (klasse) e.className = klasse;
if (text !== undefined) e.textContent = text;
return e;
};
const melde = (t) => { const f = $('fehler'); if (f) f.textContent = t || ''; };
let stand = null;
/* Eine Größe, die ein Mensch lesen kann. */
function groesse(bytes) {
const mb = bytes / (1024 * 1024);
if (mb >= 1) return `${mb.toFixed(1).replace('.', ',')} MB`;
return `${Math.max(1, Math.round(bytes / 1024))} KB`;
}
function datum(roh) {
try {
const d = new Date(roh);
return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
} catch { return ''; }
}
/* EIN PUNKT, ABER KEIN ZWEITER. Eine deutsche Datumsangabe endet
selbst auf einen Punkt ("22.09."). Ein angehängter Satzpunkt
ergibt dann "am 22.09.." — auf dem Bildschirm sieht das nach
Tippfehler aus. Gefunden beim ersten Blick mit echten Augen,
nicht in einer Messung: Kein Prüfprogramm hätte danach gefragt. */
const punkt = (t) => (/[.!?]$/.test(t) ? t : t + '.');
/* ===================================================================
EINE KARTE
=================================================================== */
function karte(m) {
const k = el('article', 'm-karte');
k.dataset.id = String(m.id);
if (m.genommen) k.dataset.genommen = 'ja';
/* DIE VORSCHAU IST DIE HAUPTSACHE. Wer entscheiden soll, ob er
etwas postet, muss es sehen -- ein Dateiname reicht dafür nicht.
SIE LÄDT ERST BEIM SICHTBARWERDEN (`loading="lazy"`): Bei
dreißig Bildern wären das sonst dreißig Abrufe auf einmal, und
am Handy im Funkloch sieht man eine Minute lang nichts. */
const schau = el('div', 'm-karte__schau');
if (m.genommen) {
/* Was weg ist, wird nicht mehr ausgeliefert -- der Server gibt
die Datei nur dem, der sie genommen hat. Statt eines kaputten
Bildes steht hier ein ehrliches Feld. */
schau.append(el('span', 'm-karte__weg-zeichen', m.art === 'video' ? '▣' : '▤'));
} else if (m.art === 'bild') {
const bild = el('img', 'm-karte__bild');
bild.src = `/workspace/api/material/${m.id}/vorschau`;
bild.alt = '';
bild.loading = 'lazy';
bild.decoding = 'async';
schau.append(bild);
} else {
const v = el('span', 'm-karte__art', 'Video');
schau.append(v);
}
k.append(schau);
const koerper = el('div', 'm-karte__koerper');
koerper.append(el('p', 'm-karte__name', m.name));
if (m.text) koerper.append(el('p', 'm-karte__text', m.text));
const fuss = el('p', 'm-karte__fuss');
fuss.append(el('span', 'm-karte__marke', m.art === 'video' ? 'Video' : 'Bild'));
fuss.append(el('span', 'm-karte__leise', groesse(m.groesse)));
fuss.append(el('span', 'm-karte__leise', `von ${m.von}`));
koerper.append(fuss);
/* ---- Der Zustand ---- */
const meldung = el('p', 'm-karte__meldung');
meldung.hidden = true;
if (m.genommen) {
/* WER ES HAT, STEHT NUR FÜR ZWEI DA. Der Server schickt das Feld
den anderen gar nicht erst mit -- diese Zeile prüft deshalb
nicht auf eine Rolle, sondern darauf, ob die Angabe da ist. */
if (m.von_mir_genommen) {
koerper.append(el('p', 'm-karte__stand m-karte__stand--meins',
'Du hast es genommen.'));
const a = el('a', 'knopf knopf--klein', 'Noch einmal laden');
a.href = `/workspace/api/material/${m.id}/datei`;
a.setAttribute('download', m.name);
koerper.append(a);
} else if (m.genommen_von) {
koerper.append(el('p', 'm-karte__stand', punkt(
`${m.genommen_von} hat es genommen${m.genommen_am ? ' am ' + datum(m.genommen_am) : ''}`)));
} else {
koerper.append(el('p', 'm-karte__stand', 'Schon benutzt.'));
}
} else {
const knopf = el('button', 'knopf knopf--klein', 'Nehmen und laden');
knopf.type = 'button';
knopf.addEventListener('click', () => nehmen(m, knopf, meldung));
koerper.append(knopf);
}
koerper.append(meldung);
k.append(koerper);
return k;
}
/* ===================================================================
NEHMEN — erst festschreiben, dann laden
=================================================================== */
async function nehmen(m, knopf, meldung) {
knopf.disabled = true;
knopf.textContent = 'einen Moment …';
try {
const a = await fetch(`/workspace/api/material/${m.id}/nehmen`, { method: 'POST' });
if (a.status === 409) {
/* DER WICHTIGE FALL: Jemand war schneller. Kein Fehler, keine
rote Zeile -- eine Auskunft. Und die Liste wird neu geholt,
damit man sofort sieht, was noch da ist. */
const j = await a.json().catch(() => ({}));
meldung.textContent = j.wer
? `${j.wer} war ein paar Sekunden schneller.`
: 'Da war jemand schneller — das ist schon vergeben.';
meldung.hidden = false;
knopf.remove();
setTimeout(laden, 1400);
return;
}
if (!a.ok) {
const j = await a.json().catch(() => ({}));
meldung.textContent = window.sagWas?.(j.fehler, 'Ging gerade nicht.')
|| 'Ging gerade nicht.';
meldung.hidden = false;
knopf.disabled = false;
knopf.textContent = 'Nehmen und laden';
return;
}
/* ES GEHÖRT JETZT IHM. Der Download wird ausgelöst, ohne die
Seite zu verlassen -- ein `location.assign` hätte die Liste
weggeworfen, und danach wüsste niemand mehr, was er gerade
geholt hat. */
const weg = (await a.json().catch(() => ({}))).weg
|| `/workspace/api/material/${m.id}/datei`;
const link = document.createElement('a');
link.href = weg;
link.download = m.name;
document.body.append(link);
link.click();
link.remove();
meldung.textContent = 'Gehört dir. Der Download läuft.';
meldung.hidden = false;
knopf.remove();
setTimeout(laden, 1200);
} catch {
meldung.textContent = 'Das Netz war gerade weg. Versuch es noch einmal.';
meldung.hidden = false;
knopf.disabled = false;
knopf.textContent = 'Nehmen und laden';
}
}
/* ===================================================================
EINSTELLEN
=================================================================== */
function einstellenAufbauen() {
const knopf = $('m-hoch');
if (!knopf) return;
knopf.addEventListener('click', async () => {
const feld = $('m-datei');
const datei = feld?.files?.[0];
const stand2 = $('m-stand');
if (!datei) {
stand2.textContent = 'Such erst ein Bild oder Video aus.';
return;
}
if (stand?.max_bytes && datei.size > stand.max_bytes) {
stand2.textContent = `Das ist zu groß (${groesse(datei.size)}). `
+ `Mehr als ${groesse(stand.max_bytes)} geht nicht.`;
return;
}
knopf.disabled = true;
/* ÜBER DEN GEMEINSAMEN HOCHLADER -- er zeigt den Fortschritt und
lässt sich abbrechen. Genau dafür wurde er am 21.09. gebaut;
eine eigene Fassung hier wäre die zweite, die es nicht kann.
DIE SCHNITTSTELLE IST NACHGELESEN, NICHT GERATEN: `hochladen()`
nimmt (Pfad, Daten, {kopf, beiFortschritt}) und liefert
{fertig, abbrechen}; `fertig` löst mit {ok, status, daten} auf.
Mein erster Entwurf hatte sie sich ausgedacht. */
const anzeige = window.hochladeAnzeige?.($('m-fortschritt'), datei.name,
() => lauf?.abbrechen());
const lauf = window.hochladen?.('/workspace/api/material', datei, {
kopf: {
'Content-Type': datei.type || 'application/octet-stream',
'X-Datei-Name': encodeURIComponent(datei.name || ''),
'X-Text': encodeURIComponent(($('m-text')?.value || '').slice(0, 600)),
},
beiFortschritt: (anteil, gesendet, gesamt) => anzeige?.fortschritt(anteil, gesendet, gesamt),
beiVerarbeitung: () => anzeige?.verarbeiten(),
});
try {
const ergebnis = lauf
? await lauf.fertig
: { ok: false, netz: true };
anzeige?.weg();
if (ergebnis.abgebrochen) {
stand2.textContent = 'Abgebrochen. Es wurde nichts bereitgestellt.';
return;
}
if (!ergebnis.ok) {
stand2.textContent = ergebnis.netz
? 'Das Netz war gerade weg. Versuch es noch einmal.'
: (window.sagWas?.(ergebnis.daten?.fehler, 'Ging nicht.') || 'Ging nicht.');
return;
}
stand2.textContent = 'Steht jetzt bereit.';
feld.value = '';
const t = $('m-text'); if (t) t.value = '';
await laden();
} finally {
knopf.disabled = false;
}
});
}
/* ===================================================================
LADEN
=================================================================== */
async function laden() {
try {
const a = await fetch('/workspace/api/material');
if (!a.ok) {
window.ladefehler?.({ nochmal: laden });
return;
}
stand = await a.json();
$('neu-block').hidden = !stand.darf_einstellen;
const frei = (stand.material || []).filter((m) => !m.genommen);
const weg = (stand.material || []).filter((m) => m.genommen);
const zielFrei = $('frei');
zielFrei.replaceChildren();
zielFrei.setAttribute('aria-busy', 'false');
if (!frei.length) {
/* KEIN LEERER BILDSCHIRM. Ob das gut oder schlecht ist, hängt
davon ab, wer liest -- deshalb zwei Sätze. */
zielFrei.append(el('p', 'm-leer', stand.darf_einstellen
? 'Gerade nichts frei. Stell oben etwas bereit — dann können die anderen es sich holen.'
: 'Gerade ist nichts frei. Schau später noch einmal rein — hier kommt regelmäßig Neues dazu.'));
}
for (const m of frei) zielFrei.append(karte(m));
$('frei-satz').textContent = frei.length
? `${frei.length} ${frei.length === 1 ? 'Stück' : 'Stück'} zum Mitnehmen. `
+ 'Wer es nimmt, hat es — danach ist es für alle anderen weg.'
: '';
$('weg-block').hidden = !weg.length;
const zielWeg = $('weg');
zielWeg.replaceChildren();
for (const m of weg) zielWeg.append(karte(m));
if (weg.length) {
$('weg-satz').textContent = stand.sieht_wer
? `${weg.length} schon vergeben — mit Namen, damit du weißt, wer was postet.`
: `${weg.length} schon vergeben. Damit nichts zweimal gepostet wird.`;
}
$('laedt').hidden = true;
$('haupt')?.removeAttribute('aria-busy');
melde('');
} catch {
window.ladefehler?.({ nochmal: laden });
}
}
einstellenAufbauen();
laden();
})();
+47 -1
View File
@@ -157,6 +157,15 @@
text_fehlt: 'Zu „Verbesserungsmöglichkeiten" gehört ein Satz – sonst weiß niemand, was gemeint ist.',
text_zu_lang: 'Der Text ist zu lang. Kürze ihn etwas.',
noch_nicht_erledigt:'Rückmeldung gibt es erst, wenn die Aufgabe fertig ist.',
/* 22.09.2026: Seit die Modis sich keine Aufgaben mehr selbst geben,
kann dieser Weg abgelehnt werden. Erreichen tut ihn kaum jemand
— der Knopf „Neue Aufgabe" steht für sie gar nicht erst da —,
aber ein Tab von gestern reicht.
DER SATZ NENNT KEINE ROLLEN. Wer ihn liest, soll wissen, wie es
bei IHM weitergeht, nicht, wer über ihm steht. */
nur_leitung_legt_an:
'Aufgaben werden dir zugeteilt – anlegen kannst du hier keine. '
+ 'Wenn du eine Idee hast, sag kurz Bescheid.',
eintrag_nicht_gefunden: 'Den Eintrag gibt es nicht mehr. Lade die Seite neu.',
aufgabe_nicht_gefunden: 'Die Aufgabe gibt es nicht mehr. Lade die Seite neu.',
@@ -174,7 +183,44 @@
zu_viele_offen:
'Du hast schon mehrere Meldungen offen. Warte, bis eine davon beantwortet ist.',
nur_gruppe_oder_kanal:
'Das geht nur in einer Gruppe oder einem Kanal, nicht im Zweiergespräch.'
'Das geht nur in einer Gruppe oder einem Kanal, nicht im Zweiergespräch.',
/* ---- MATERIAL ZUM POSTEN (22.09.2026) ------------------------
Acht Kennungen kamen mit workspace-material.js dazu.
DER WICHTIGSTE SATZ IST „schon_genommen" — und er ist bewusst
KEIN Fehler. Wer ihn liest, hat nichts falsch gemacht; jemand
war ein paar Sekunden schneller. Stünde dort „Das hat nicht
geklappt", würde derselbe Mensch es dreimal versuchen und
dreimal dasselbe lesen.
„nur_team_stellt_ein" erreicht im Normalfall niemand: Der
Kasten zum Bereitstellen steht gar nicht erst da, wenn jemand
nicht darf. Der Satz sagt deshalb, was STATTDESSEN geht, und
zählt nicht auf, wer mehr darf. */
nur_team_stellt_ein:
'Hier stellt das Team die Bilder und Videos ein. Du kannst dir '
+ 'nehmen, was dasteht.',
schon_genommen:
'Da war jemand schneller – das ist schon vergeben. Such dir ein '
+ 'anderes aus, damit nichts zweimal gepostet wird.',
nicht_genommen:
'Dieses Bild gehört dir nicht. Nimm dir eines aus „Zum Mitnehmen", '
+ 'dann kannst du es laden.',
art_nicht_erlaubt:
'Das geht hier nicht – es nimmt nur Bilder (JPG, PNG, WebP, GIF, '
+ 'AVIF) und Videos (MP4, MOV, WebM).',
datei_fehlt:
'Da war keine Datei dabei. Such erst ein Bild oder Video aus.',
datei_zu_gross:
'Die Datei ist zu groß. Mehr als 60 MB gehen nicht – ein kürzerer '
+ 'Ausschnitt oder eine kleinere Auflösung hilft.',
datei_weg:
'Die Datei liegt nicht mehr da. Sag DogFather Bescheid, dann '
+ 'stellt er sie neu ein.',
nicht_deins:
'Das hat jemand anders eingestellt – wegnehmen kann es nur, wer '
+ 'es hergegeben hat.'
};
/* Sieht das wie eine Maschinenkennung aus?