DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Material: Bilder und Videos zum Posten, jedes nur einmal

Browse Source 
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:
DogFatherGit
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
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/material.css
+345
View File
@@ -0,0 +1,345 @@
/* =====================================================================
material.css — Bilder und Videos zum Posten
=====================================================================
Auftrag vom 22.09.2026.
DIE VORSCHAU IST DIE HAUPTSACHE. Wer entscheiden soll, ob er etwas
postet, muss es sehen -- deshalb nimmt das Bild den groesseren Teil
der Karte, und der Text steht darunter statt daneben.
WAS VERGEBEN IST, TRITT ZURUECK -- aber verschwindet nicht. Es ist
der Beleg dafuer, dass nichts zweimal gepostet wurde; ein leerer
Platz waere die schlechtere Auskunft.
Alle Farben kommen aus den Hausvariablen. `--ton` traegt die Seite
(data-ton="42" am body), also faerbt sich das Neue automatisch mit,
wenn die Kachelfarbe jemals wechselt.
===================================================================== */
/* ---------------------------------------------------------------------
BEREITSTELLEN
--------------------------------------------------------------------- */
.m-neu {
margin: 0 0 26px;
padding: 16px 18px;
border: 1px solid var(--rand);
border-left: 3px solid var(--ton, var(--akzent));
border-radius: var(--radius-klein, 12px);
background: color-mix(in srgb, var(--flaeche) 92%, transparent);
}
.m-neu__titel { margin: 0; font-size: 1rem; }
.m-neu__satz {
margin: 4px 0 14px;
font-size: .88rem;
line-height: 1.55;
color: var(--text-leise);
max-width: 62ch;
}
.m-neu__zeile { margin-bottom: 12px; }
.m-neu input[type="file"] {
display: block;
width: 100%;
min-height: 44px;
padding: 9px 11px;
border: 1px solid var(--rand-hell);
border-radius: var(--radius-klein, 10px);
background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
color: var(--text);
font: inherit;
font-size: .9rem;
}
.m-neu textarea {
display: block;
width: 100%;
box-sizing: border-box;
min-height: 60px;
padding: 9px 11px;
border: 1px solid var(--rand-hell);
border-radius: var(--radius-klein, 10px);
background: color-mix(in srgb, var(--tinte) 90%, #ffffff 10%);
color: var(--text);
font: inherit;
font-size: .92rem;
line-height: 1.5;
resize: vertical;
}
.m-neu__knoepfe {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.m-neu__stand {
font-size: .86rem;
color: var(--text-leise);
}
/* ---------------------------------------------------------------------
DIE LISTEN
--------------------------------------------------------------------- */
.m-liste-block { margin: 0 0 30px; }
.m-kopf { margin-bottom: 12px; }
.m-kopf__titel { margin: 0; font-size: 1.05rem; }
.m-kopf__satz {
margin: 3px 0 0;
font-size: .88rem;
line-height: 1.5;
color: var(--text-leise);
}
/* DIE SPALTENBREITE WÄCHST MIT DEM BILDSCHIRM — und das ist der Punkt.
Erster Entwurf war `minmax(min(100%, 240px), 1fr)`. Am Handy
(412 px, also 380 px Inhalt) passen dann 240 + 14 + 240 = 494 px
nicht nebeneinander, und es blieb bei EINER Spalte: gemessen
3062 px Seitenhöhe für fünf Stücke. Bei zwanzig wären es zwölf
Bildschirmlängen. Filipe am 22.09.: „es ist alles so lang gezogen,
muss ewig scrollen um alles zu sehen das ist uncool und scheisse."
Eine feste Umbruchschwelle wäre hier wieder „eine Rechnung von
gestern" (siehe die Kopfleiste am 06.09., zweimal an einem Tag).
Deshalb eine Regel: Die Mindestbreite ist der GRÖSSERE von 160 px
und 22 % der Rasterbreite. Am Handy gewinnen die 160 px → zwei
Spalten. Am Schreibtisch gewinnen die 22 % → die Karten werden
breiter statt zahlreicher, ohne dass irgendwo eine Zahl steht, die
beim nächsten Gerät nicht mehr stimmt.
`min(100%, …)` bleibt davor: Ohne das sprengt eine Spalte den
Rahmen, sobald der Bildschirm schmaler als die Mindestbreite ist. */
.m-raster {
display: grid;
gap: 14px;
/* Der Rückfall zuerst: Versteht ein Browser das `max()` in `minmax()`
nicht, wirft er die ZWEITE Zeile weg und behält diese. Dann sind
die Karten am Schreibtisch etwas schmaler als gedacht — aber am
Handy stehen immer noch zwei nebeneinander, und nichts läuft über
den Rand. Ohne diese Zeile bliebe gar keine Spaltenregel übrig. */
grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
grid-template-columns: repeat(auto-fill, minmax(min(100%, max(160px, 22%)), 1fr));
}
.m-leer {
grid-column: 1 / -1;
margin: 8px 0;
font-size: .92rem;
line-height: 1.6;
color: var(--text-leise);
}
/* ---------------------------------------------------------------------
EINE KARTE
--------------------------------------------------------------------- */
.m-karte {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--rand);
border-radius: var(--radius-klein, 12px);
background: color-mix(in srgb, var(--flaeche) 94%, transparent);
transition: border-color var(--tempo, .18s) ease,
transform var(--tempo, .18s) ease;
}
.m-karte:hover {
border-color: color-mix(in srgb, var(--ton, var(--akzent)) 45%, var(--rand));
transform: translateY(-1px);
}
/* Ein festes Seitenverhaeltnis, damit das Raster nicht springt,
waehrend die Bilder nachladen. 4:5 ist das Hochformat, in dem die
meisten Beitraege ohnehin gepostet werden. */
.m-karte__schau {
position: relative;
aspect-ratio: 4 / 5;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--tinte) 86%, #ffffff 14%);
border-bottom: 1px solid var(--rand);
overflow: hidden;
}
.m-karte__bild {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.m-karte__art,
.m-karte__weg-zeichen {
font-size: .9rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--text-still);
}
.m-karte__weg-zeichen { font-size: 2rem; letter-spacing: 0; }
/* DER KOERPER FUELLT DEN REST DER KARTE. Ohne `flex: 1` haette er
genau die Hoehe seines Inhalts, und `margin-top: auto` weiter unten
haette nichts, wovon es sich abstossen koennte. */
.m-karte__koerper {
display: flex;
flex-direction: column;
gap: 7px;
flex: 1;
padding: 13px 14px 14px;
}
.m-karte__name {
margin: 0;
font-size: .95rem;
font-weight: 600;
line-height: 1.35;
/* Ein Dateiname kann sehr lang sein -- zwei Zeilen genuegen, damit
die Karten gleich hoch bleiben. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.m-karte__text {
margin: 0;
font-size: .86rem;
line-height: 1.5;
color: var(--text-leise);
}
/* HIER FLUCHTET DIE KARTE.
Das Raster macht alle Karten einer Zeile gleich hoch -- die Knoepfe
standen trotzdem auf drei verschiedenen Hoehen, weil der eine
Beschreibungstext zwei Zeilen hatte, der naechste eine und der
dritte gar keine. Gemessen am 22.09.: 1127, 1155 und 1176 px.
`margin-top: auto` schiebt den Fuss und alles danach (Zustand,
Knopf) an den unteren Rand. Der Name bleibt oben, der Knopf steht
bei allen auf derselben Linie -- ohne eine Mindesthoehe zu raten,
die beim naechsten laengeren Text wieder falsch waere. */
.m-karte__fuss {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
margin: 2px 0 4px;
margin-top: auto;
}
.m-karte__marke {
padding: 2px 9px;
border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
border-radius: 999px;
font-size: .72rem;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--ton, var(--akzent));
}
.m-karte__leise { font-size: .78rem; color: var(--text-still); }
.m-karte__stand {
margin: 0;
font-size: .86rem;
line-height: 1.45;
color: var(--text-leise);
}
.m-karte__stand--meins { color: var(--text); font-weight: 600; }
.m-karte__meldung {
margin: 0;
font-size: .86rem;
line-height: 1.45;
color: var(--text);
}
.m-karte .knopf { min-height: 44px; }
.m-karte a.knopf {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
/* ---------------------------------------------------------------------
WAS SCHON WEG IST
---------------------------------------------------------------------
Es tritt zurueck, ohne zu verschwinden: Es ist der Beleg dafuer,
dass nichts zweimal gepostet wurde. Kein Grau-in-Grau -- der Text
muss lesbar bleiben, sonst kann man die Namen nicht nachlesen. */
.m-raster--weg .m-karte {
background: color-mix(in srgb, var(--flaeche) 80%, transparent);
border-style: dashed;
/* QUER STATT HOCH. Beim ersten Blick mit echten Augen stand hier
ein 16:9-Feld mit einem einzigen Zeichen darin -- 273 px Hoehe
fuer nichts, fuenfmal untereinander. Filipe am 22.09.: "es ist
alles so lang gezogen, muss ewig scrollen um alles zu sehen".
Das Bild ist ohnehin nicht mehr da: Der Server liefert es nach
dem Nehmen niemandem mehr aus. Was bleibt, ist die Auskunft --
welches Stueck, und wer es hat. Die passt in eine Zeile. */
flex-direction: row;
align-items: stretch;
}
.m-raster--weg .m-karte:hover { transform: none; }
.m-raster--weg .m-karte__schau {
aspect-ratio: 1;
flex: 0 0 58px;
border-bottom: none;
border-right: 1px solid var(--rand);
}
.m-raster--weg .m-karte__weg-zeichen { font-size: 1.35rem; }
.m-raster--weg .m-karte__koerper {
gap: 4px;
padding: 11px 13px;
justify-content: center;
}
/* Wofuer es gedacht war, hilft nur beim Aussuchen -- und aussuchen
kann es hier niemand mehr. Der Name und der Zustand bleiben. */
.m-raster--weg .m-karte__text { display: none; }
.m-raster--weg .m-karte__fuss { margin: 0; }
/* Breitere Spalten, weil eine Zeile laenger als hoch ist. */
.m-raster--weg {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.m-laedt {
margin: 18px 0;
color: var(--text-leise);
font-size: .92rem;
}
/* ---------------------------------------------------------------------
KONTRASTMODUS UND BEWEGUNGSARMUT
--------------------------------------------------------------------- */
@media (forced-colors: active) {
.m-karte,
.m-neu { border: 1px solid CanvasText; }
.m-raster--weg .m-karte { border-style: dashed; }
.m-karte__marke { border: 1px solid CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
.m-karte { transition: none; }
.m-karte:hover { transform: none; }
}
workspace/assets/css/start.css
+1
View File
@@ -1129,6 +1129,7 @@ body.start > main { position: relative; z-index: 1; }
[data-ton="39"] { --ton: #ff57ba; } /* Vertraulich melden */
[data-ton="40"] { --ton: #feb9b8; } /* Entwicklung (die Auswertung) */
[data-ton="41"] { --ton: #6d8cfe; } /* Treff-Chat */
[data-ton="42"] { --ton: #71a108; } /* Material (Platzhalter, wird gerechnet) */
/* Rückfallwert für alles, was einen Ton braucht, aber keine Nummer hat.
Steht bewusst in :where() -- damit zählt die Zeile beim Wettstreit der
workspace/assets/js/bereiche.js
+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'],
workspace/assets/js/material.js
+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();
})();
workspace/assets/js/meldung.js
+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?