Highlights: drei Accounts nebeneinander, nach Zeit geteilt
DogFather, HasiDog und DogFather Clips haben eigene Zuschauer und einen eigenen Ton -- das steht so schon an KANAELE im Server. Eine gemeinsame Galerie behauptete, sie waeren ein Topf; wer fuer Clips schneidet, suchte in jeder Reihe nach den Kacheln, die ihn angehen. Jetzt drei Spalten nebeneinander, jede zuklappbar, jede mit ihrem Handle und ihrer Zahl. Eine vierte Spalte gibt es nur, wenn sie gebraucht wird: Bilder ohne TikTok-Link gehoeren zu keinem Account, und sie verschwinden zu lassen waere der schlimmere Fehler. Die Reihenfolge kommt vom SERVER. Der Browser hatte dafuer eine eigene kleine Liste (KANAL_WORT) -- dieselben drei Namen in anderer Reihenfolge, ohne Handles. Beim vierten Account waere genau diese Kopie die vergessene. Dazu eine Zeitleiste: Aktuell (heute), Diese Woche, Dieser Monat, Dieses Jahr, Alles. Kalenderzeitraeume, keine Rueckblicke -- wer am Dienstag "diese Woche" fragt, meint Montag und Dienstag. Jeder Knopf traegt seine Zahl; ohne sie klickt man ins Leere und weiss nicht, ob es am Filter lag. Und beim Anlegen laesst sich der Account waehlen -- fuer Bilder und Momente ohne Link. Bei einem TikTok-Link leitet der Server ihn weiterhin aus dem Handle ab; das ist genauer, weil niemand sich vertippen kann. Beim Bauen gemessen statt vermutet: Der Spaltenkasten lag IM Galerie-Raster von #liste und bekam eine Zelle von 376 px -- Elternbreite 1160. Die drei standen untereinander. Die Galerie gehoert jetzt in die Spalte, nicht um sie herum. pruef-highlights.mjs: 26 Pruefungen, mit Gegenproben (Gast bekommt die Liste nicht, erfundener Account wird abgelehnt, zweiter Klick hebt den Filter auf). pruef-video.mjs weiterhin 67/0. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -132,6 +132,12 @@
|
||||
let ich = null;
|
||||
let bereich = null;
|
||||
let einstellung = null;
|
||||
/* DIE ACCOUNTS, so wie der Server sie schickt (20.09.2026).
|
||||
Auf Modulebene, weil zwei Stellen sie brauchen: die Galerie (drei
|
||||
Spalten in DIESER Reihenfolge) und das Formular (Auswahlliste).
|
||||
Beide aus derselben Auskunft -- eine zweite Liste im Browser waere
|
||||
die, die beim vierten Account vergessen wird. */
|
||||
let kanaeleDa = [];
|
||||
/* Ist dies ein Brett des Treffs, und was darf ich dort? Beides sagt
|
||||
der Server (daten.treff und /api/treff/lage) -- im Browser steht
|
||||
keine Liste der Bretter und keine Rechteregel, sondern nur die
|
||||
@@ -165,6 +171,62 @@
|
||||
aber nie beides. Und genau das will man, sobald aus drei Kanälen
|
||||
Videos nebeneinander liegen. */
|
||||
let kanalFilter = '';
|
||||
|
||||
/* =====================================================================
|
||||
DIE HIGHLIGHTS NACH ZEIT (20.09.2026)
|
||||
|
||||
Filipe: "die videos will ich auch kategorisiert haben nach woche,
|
||||
monat, jahr und ganz oben aktuell also heute."
|
||||
|
||||
WARUM DAS NOETIG WURDE: Highlights sammeln sich. Nach einem halben
|
||||
Jahr steht das Beste vom Mai zwischen dem von gestern, und die
|
||||
Galerie beantwortet die Frage, die man wirklich hat ("was ist
|
||||
GERADE gut gelaufen"), gar nicht mehr.
|
||||
|
||||
DIE ZEITRAEUME SIND KALENDERZEITRAEUME, KEINE RUECKBLICKE. "Diese
|
||||
Woche" heisst seit Montag, nicht "die letzten sieben Tage". Wer am
|
||||
Dienstag "diese Woche" fragt, meint Montag und Dienstag -- nicht
|
||||
den Mittwoch davor. Ein rollendes Fenster waere leichter zu rechnen
|
||||
und beantwortet eine andere Frage.
|
||||
|
||||
UND SIE STAPELN SICH NICHT. Man waehlt EINEN -- "heute" ist auch
|
||||
in "diese Woche" enthalten, und zwei sich enthaltende Filter
|
||||
gleichzeitig anzubieten erzeugt nur die Frage, was ihre
|
||||
Kombination bedeutet. */
|
||||
let zeitFilter = '';
|
||||
|
||||
const ZEIT_WORT = {
|
||||
heute: 'Aktuell', woche: 'Diese Woche',
|
||||
monat: 'Dieser Monat', jahr: 'Dieses Jahr',
|
||||
};
|
||||
|
||||
/** Ab wann zaehlt dieser Zeitraum? Gibt einen Zeitstempel in
|
||||
* Millisekunden -- oder 0 fuer "alles". */
|
||||
function zeitAb(was) {
|
||||
const d = new Date();
|
||||
d.setHours(0, 0, 0, 0);
|
||||
if (was === 'heute') return d.getTime();
|
||||
if (was === 'woche') {
|
||||
/* Montag als Wochenanfang. `getDay()` liefert Sonntag = 0 --
|
||||
ohne die Korrektur faenge die Woche am Sonntag an, und in
|
||||
Deutschland steht der am Ende. */
|
||||
const wt = (d.getDay() + 6) % 7;
|
||||
d.setDate(d.getDate() - wt);
|
||||
return d.getTime();
|
||||
}
|
||||
if (was === 'monat') { d.setDate(1); return d.getTime(); }
|
||||
if (was === 'jahr') { d.setMonth(0, 1); return d.getTime(); }
|
||||
return 0;
|
||||
}
|
||||
|
||||
/** Wann ist dieser Eintrag entstanden? `erstellt` ist die Wahrheit --
|
||||
* `datum` ist ein Feld, das jemand von Hand setzen kann, und ein
|
||||
* Highlight vom Mai mit dem Datum von heute gehoert nicht unter
|
||||
* "Aktuell". */
|
||||
const entstandAm = (e) => {
|
||||
const t = Date.parse(e.erstellt || e.datum || '');
|
||||
return Number.isNaN(t) ? 0 : t;
|
||||
};
|
||||
/* Nur beim ersten Laden springen -- sonst reisst es die Seite nach
|
||||
jeder Bewertung erneut an dieselbe Stelle. */
|
||||
let gesprungen = false;
|
||||
@@ -1487,6 +1549,59 @@
|
||||
tut. Ein Knopf, der immer dasselbe zeigt, macht misstrauisch.
|
||||
|
||||
ERST AB ZWEI KANÄLEN. Bei einem gibt es nichts zu wählen. */
|
||||
/* ---- DIE ZEITLEISTE, NUR AUF DEN HIGHLIGHTS (20.09.2026) -------
|
||||
|
||||
Filipe: "die videos will ich auch kategorisiert haben nach
|
||||
woche, monat, jahr und ganz oben aktuell also heute."
|
||||
|
||||
SIE STEHT VOR der Kanal-Abbruchstelle darunter. Dort steigt die
|
||||
Funktion aus, wenn es weniger als zwei Kanaele gibt -- stuende
|
||||
die Zeitleiste dahinter, waere sie auf einem Brett mit nur
|
||||
einem Account nicht da. Und genau dann braucht man sie:
|
||||
Ein Kanal, viele Monate.
|
||||
|
||||
JEDER KNOPF TRAEGT SEINE ZAHL. Ohne sie klickt man auf
|
||||
"Aktuell" und landet auf einer leeren Seite, ohne zu wissen, ob
|
||||
der Filter greift oder nichts passiert ist. Mit ihr sieht man
|
||||
vorher, dass heute nichts dazugekommen ist -- und klickt gar
|
||||
nicht erst. */
|
||||
if (bereich === 'highlight' && eintraege.length) {
|
||||
const zeile = el('div', 'filter__zeiten');
|
||||
zeile.setAttribute('role', 'group');
|
||||
zeile.setAttribute('aria-label', 'Nach Zeitraum filtern');
|
||||
const zknopf = (wert, text) => {
|
||||
const b = el('button', 'schritt filter__zeit', text);
|
||||
b.type = 'button';
|
||||
if (wert) b.dataset.zeit = wert;
|
||||
b.setAttribute('aria-pressed', String(zeitFilter === wert));
|
||||
const ab = zeitAb(wert);
|
||||
const zahl = wert
|
||||
? eintraege.filter((e) => entstandAm(e) >= ab).length
|
||||
: eintraege.length;
|
||||
b.append(el('span', 'filter__zeit-zahl', String(zahl)));
|
||||
/* Ein Zeitraum ohne einen einzigen Eintrag laesst sich nicht
|
||||
waehlen. Er bleibt aber STEHEN, mit seiner Null -- ihn
|
||||
auszublenden hiesse, die Leiste wechselt ihre Form, sobald
|
||||
jemand etwas einstellt, und man sucht den Knopf, den man
|
||||
gestern noch hatte. */
|
||||
if (!zahl && wert) { b.disabled = true; b.title = 'Dafür gibt es nichts'; }
|
||||
b.addEventListener('click', async () => {
|
||||
/* Zweiter Klick hebt auf -- wie beim Kanalfilter daneben.
|
||||
Zwei Filter nebeneinander, die sich verschieden bedienen
|
||||
lassen, sind einer zu viel. */
|
||||
zeitFilter = (zeitFilter === wert) ? '' : wert;
|
||||
await laden();
|
||||
});
|
||||
return b;
|
||||
};
|
||||
zeile.append(zknopf('heute', ZEIT_WORT.heute));
|
||||
zeile.append(zknopf('woche', ZEIT_WORT.woche));
|
||||
zeile.append(zknopf('monat', ZEIT_WORT.monat));
|
||||
zeile.append(zknopf('jahr', ZEIT_WORT.jahr));
|
||||
zeile.append(zknopf('', 'Alles'));
|
||||
ziel.append(zeile);
|
||||
}
|
||||
|
||||
const kanaele = [...new Set(eintraege.map((e) => e.quelle_kanal).filter(Boolean))];
|
||||
if (kanaele.length < 2) { kanalFilter = ''; return; }
|
||||
|
||||
@@ -1786,6 +1901,7 @@
|
||||
if (!a.ok) { melde('Einträge konnten nicht geladen werden.'); return; }
|
||||
const daten = await a.json();
|
||||
einstellung = daten.einstellung;
|
||||
kanaeleDa = Array.isArray(daten.kanaele) ? daten.kanaele : [];
|
||||
treffBrett = !!daten.treff;
|
||||
kalenderOffen = daten.kalender_offen !== false;
|
||||
weiterZeigen(daten.weiter);
|
||||
@@ -1799,8 +1915,14 @@
|
||||
Raster steht hier und nicht fest im HTML, weil dieselbe Seite
|
||||
acht Bretter bedient -- ein Raster in der Datei waere fuer
|
||||
sieben davon falsch. */
|
||||
if (bereich === 'highlight') ziel.dataset.galerie = 'ja';
|
||||
else delete ziel.dataset.galerie;
|
||||
/* SEIT DEN KANALSPALTEN LIEGT DAS RASTER EINE EBENE TIEFER
|
||||
(20.09.2026). `#liste[data-galerie]` ist selbst ein Raster --
|
||||
der Spaltenkasten wurde darin zu EINER Zelle von 376 px, und
|
||||
die drei Accounts standen untereinander statt nebeneinander.
|
||||
Gemessen, nicht vermutet: Elternbreite 1160, Kind 376.
|
||||
Die Galerie gehoert jetzt in die einzelne Spalte (siehe
|
||||
`.kanalspalte__inhalt[data-galerie]`). */
|
||||
delete ziel.dataset.galerie;
|
||||
/* DAS ANSCHLAGBRETT IST EIN SCHWARZES BRETT: wenige, GROSSE
|
||||
Aushaenge. Ein Aushang zwischen dreissig anderen ist kein
|
||||
Aushang -- die Wirkung entsteht durch die Groesse und die
|
||||
@@ -1813,6 +1935,11 @@
|
||||
Art-Filter nicht aus, er kommt dazu. „Nur offene Clips von
|
||||
HasiDog" ist eine sinnvolle Frage. */
|
||||
if (kanalFilter && e.quelle_kanal !== kanalFilter) return false;
|
||||
/* DER ZEITFILTER GILT NUR FUER HIGHLIGHTS. Auf den anderen
|
||||
Brettern steht er gar nicht erst da -- eine Regel, die
|
||||
unsichtbar mitfiltert, ist ein Brett, das Dinge verschluckt. */
|
||||
if (bereich === 'highlight' && zeitFilter
|
||||
&& entstandAm(e) < zeitAb(zeitFilter)) return false;
|
||||
if (!filter) return true;
|
||||
if (filter === 'offen') return e.status === 'offen';
|
||||
return e.art === filter;
|
||||
@@ -1850,6 +1977,94 @@
|
||||
}
|
||||
const karten = new Map();
|
||||
|
||||
/* =====================================================================
|
||||
DIE HIGHLIGHTS: DREI KANAELE NEBENEINANDER (20.09.2026)
|
||||
|
||||
Filipe: "die highlights sollen in 3 kategorien sein
|
||||
nebeneinander, dogfather, hasidog und dogfather clips. und die
|
||||
liste soll man auch zu und auf klappen koennen."
|
||||
|
||||
WARUM DAS MEHR IST ALS EINE SORTIERUNG: Die drei Accounts haben
|
||||
eigene Zuschauer und einen eigenen Ton -- das steht so an
|
||||
KANAELE im Server. Eine gemeinsame Galerie behauptet, sie
|
||||
waeren ein Topf. Wer fuer Clips schneidet, sucht dann in jeder
|
||||
Reihe nach den Kacheln, die ihn angehen.
|
||||
|
||||
DIE REIHENFOLGE KOMMT VOM SERVER, nicht aus einer Liste hier.
|
||||
Der Browser hatte dafuer bis heute `KANAL_WORT` -- dieselben
|
||||
drei Namen in anderer Reihenfolge, ohne Handles. Beim vierten
|
||||
Account waere genau diese Kopie die vergessene.
|
||||
|
||||
EINE VIERTE SPALTE GIBT ES NUR, WENN SIE GEBRAUCHT WIRD:
|
||||
Bilder und Fanart ohne TikTok-Link gehoeren zu keinem Kanal.
|
||||
Sie verschwinden zu lassen waere der schlimmere Fehler -- ein
|
||||
Eintrag, den man angelegt hat und nirgends wiederfindet.
|
||||
|
||||
ZUKLAPPEN ueber dieselben zwei Hilfen wie ueberall
|
||||
(`abschnittKlappbar`, `klappPfeil`), mit einem Merker je Kanal.
|
||||
Ein zweiter Klappmechanismus waere eine zweite Sache zum
|
||||
Lernen und eine zweite zum Kaputtgehen.
|
||||
===================================================================== */
|
||||
if (bereich === 'highlight') {
|
||||
const kanaele = kanaeleDa.length
|
||||
? kanaeleDa
|
||||
/* Faellt die Auskunft aus (alte Auslieferung, fremde Rolle),
|
||||
wird aus den Eintraegen selbst abgeleitet -- lieber die
|
||||
Namen ohne Reihenfolge als eine leere Seite. */
|
||||
: [...new Set(sichtbar.map((e) => e.quelle_kanal).filter(Boolean))]
|
||||
.map((w) => ({ wert: w, name: KANAL_WORT[w] || w }));
|
||||
|
||||
const faecher = new Map(kanaele.map((k) => [k.wert, []]));
|
||||
const ohne = [];
|
||||
for (const e of sichtbar) {
|
||||
if (e.quelle_kanal && faecher.has(e.quelle_kanal)) faecher.get(e.quelle_kanal).push(e);
|
||||
else ohne.push(e);
|
||||
}
|
||||
|
||||
const spalten = el('div', 'kanalspalten');
|
||||
const bauen = (schluessel, name, handle, fach) => {
|
||||
const sp = el('section', 'kanalspalte');
|
||||
sp.dataset.kanal = schluessel || 'ohne';
|
||||
const kopf = el('button', 'kanalspalte__kopf');
|
||||
kopf.type = 'button';
|
||||
const wort = el('span', 'kanalspalte__wort', name);
|
||||
if (handle) wort.append(el('span', 'kanalspalte__handle', handle));
|
||||
kopf.append(wort);
|
||||
kopf.append(el('span', 'kanalspalte__zahl', String(fach.length)));
|
||||
if (window.klappPfeil) kopf.append(window.klappPfeil());
|
||||
sp.append(kopf);
|
||||
|
||||
const kasten = el('div', 'kanalspalte__inhalt');
|
||||
/* Die Galerie-Form kommt hierher -- in der Spalte, nicht um
|
||||
sie herum. In einer schmalen Spalte ergibt das eine Kachel
|
||||
je Reihe, bei viel Platz zwei. Gerechnet wird nichts. */
|
||||
kasten.dataset.galerie = 'ja';
|
||||
if (!fach.length) {
|
||||
/* Eine leere Spalte sagt, dass sie leer IST -- sonst sieht
|
||||
sie aus, als haette die Seite nicht fertig geladen. */
|
||||
kasten.append(el('p', 'leise kanalspalte__leer',
|
||||
zeitFilter
|
||||
? `Für ${ZEIT_WORT[zeitFilter].toLowerCase()} steht hier nichts.`
|
||||
: 'Hier steht noch nichts.'));
|
||||
}
|
||||
for (const e of fach) {
|
||||
const k = karte(e);
|
||||
karten.set(e.id, k);
|
||||
kasten.append(k);
|
||||
}
|
||||
sp.append(kasten);
|
||||
window.abschnittKlappbar?.(kopf, kasten, `highlight:kanal:${schluessel || 'ohne'}`);
|
||||
spalten.append(sp);
|
||||
};
|
||||
|
||||
for (const k of kanaele) bauen(k.wert, k.name, k.handle, faecher.get(k.wert) || []);
|
||||
if (ohne.length) bauen('', 'Ohne Account', null, ohne);
|
||||
|
||||
ziel.append(spalten);
|
||||
sprungZeigen(ziel, karten);
|
||||
return;
|
||||
}
|
||||
|
||||
/* ---- STUFE 7: JEDES BRETT BEKOMMT SEINE FORM ------------------
|
||||
"Regeln & Hilfe" ist ein NACHSCHLAGEWERK, kein Feed: Man
|
||||
schlaegt es im Streitfall auf und will finden, nicht scrollen.
|
||||
@@ -2169,6 +2384,13 @@
|
||||
unsichtbaren Feld stehenbleibt, wandert sonst beim naechsten
|
||||
Speichern mit -- und niemand sieht, woher er kommt. */
|
||||
if (einstellung.einsatzFeld && $('f-einsatz')) daten.einsatz = $('f-einsatz').value.trim();
|
||||
/* Nur, wenn das Feld auch sichtbar ist -- ein Wert aus einem
|
||||
verborgenen Feld wandert sonst beim naechsten Speichern mit, und
|
||||
niemand sieht, woher er kommt. Dieselbe Regel wie eine Zeile
|
||||
darueber. */
|
||||
if ($('feld-kanal') && !$('feld-kanal').hidden) {
|
||||
daten.quelle_kanal = $('f-kanal').value || null;
|
||||
}
|
||||
if (einstellung.bewertung) daten.bewertung = $('f-bewertung').value || null;
|
||||
if (event) {
|
||||
daten.event_ende = $('f-ende').value || null;
|
||||
@@ -2235,6 +2457,7 @@
|
||||
} catch { return; }
|
||||
|
||||
einstellung = daten.einstellung;
|
||||
kanaeleDa = Array.isArray(daten.kanaele) ? daten.kanaele : [];
|
||||
document.title = einstellung.name + ' · Creator Workspace';
|
||||
$('marke-bereich').textContent = einstellung.name;
|
||||
|
||||
@@ -2368,6 +2591,44 @@
|
||||
if (einstellung.bewertungName && $('bewertung-schild')) {
|
||||
$('bewertung-schild').textContent = `${einstellung.bewertungName} (1–5)`;
|
||||
}
|
||||
/* ---- ZU WELCHEM ACCOUNT? (20.09.2026) -------------------------
|
||||
|
||||
Filipe: "und wenn man was hinzufuegt soll man auch den account
|
||||
auswaehlen koennen."
|
||||
|
||||
Nur auf den Highlights und nur, wenn der Server die Kanaele
|
||||
ueberhaupt mitgeschickt hat. Eine leere Auswahlliste waere eine
|
||||
Frage ohne moegliche Antwort.
|
||||
|
||||
DIE LISTE KOMMT VOM SERVER, nicht aus KANAL_WORT hier. Beim
|
||||
vierten Account ist die Kopie hier die vergessene -- das steht
|
||||
so schon am Kanal-Begriff selbst. */
|
||||
const kanalFeld = $('feld-kanal'), kanalWahl = $('f-kanal');
|
||||
if (kanalFeld && kanalWahl) {
|
||||
const liste = kanaeleDa;
|
||||
kanalFeld.hidden = !(bereich === 'highlight' && liste.length);
|
||||
if (!kanalFeld.hidden && kanalWahl.dataset.stand !== String(liste.length)) {
|
||||
kanalWahl.dataset.stand = String(liste.length);
|
||||
kanalWahl.textContent = '';
|
||||
/* LEER ZUERST UND ALS VORGABE. Ein Pflichtfeld erzwaenge hier
|
||||
einen falschen Kanal, und ein falscher Eintrag ist
|
||||
schlechter als ein leerer. */
|
||||
const leer = document.createElement('option');
|
||||
leer.value = ''; leer.textContent = 'Noch offen';
|
||||
kanalWahl.append(leer);
|
||||
for (const k of liste) {
|
||||
const o = document.createElement('option');
|
||||
o.value = k.wert;
|
||||
o.textContent = k.handle ? `${k.name} (${k.handle})` : k.name;
|
||||
kanalWahl.append(o);
|
||||
}
|
||||
}
|
||||
if ($('hinweis-kanal')) {
|
||||
$('hinweis-kanal').textContent = 'Bei einem TikTok-Link erkennt die '
|
||||
+ 'Seite den Account selbst – das hier ist für Bilder und Momente ohne Link.';
|
||||
}
|
||||
}
|
||||
|
||||
/* Das Einsatz-Feld nur, wo der Bereich es kennt. */
|
||||
if ($('feld-einsatz')) $('feld-einsatz').hidden = !einstellung.einsatzFeld;
|
||||
if (einstellung.einsatzName && $('einsatz-schild')) {
|
||||
|
||||
Reference in New Issue
Block a user