DogFatherGitandClaude Opus 5
e00a905ce8
Der neue Kasten von heute Mittag hat die alte Tagesblick-Zeile nicht
ersetzt, sondern sich darueber gesetzt. Beide sagten dasselbe,
untereinander, auf derselben Seite.
GEFUNDEN HAT DAS NUR EIN BILDSCHIRMFOTO. Beide Teile waren fuer sich
gruen: pruef-glocke verlangte die Zeile, pruef-push-hinweis den
Kasten, und keine der beiden konnte sehen, dass die andere existiert.
Zahlen zeigen so etwas nie. Deshalb macht pruef-push-hinweis jetzt
bei jedem Lauf ein Foto -- und scrollt vorher hin, weil der erste
Versuch brav die Begruessungskachel zeigte und den Kasten gar nicht
im Bild hatte. Ein Beweisbild ohne das, was es beweisen soll, ist
schlimmer als keins: Man glaubt ja, hingesehen zu haben.
Entfernt wurde die aeltere der beiden (19.09.2026). Sie war gut
gebaut, server-seitig und nicht wegklickbar -- aber sie hat das
Problem nicht geloest: Am 03.10. nachgemessen hatten immer noch
12 von 20 kein Geraet, darunter die linke Hand und ein Modi. Sie SAGT
es und man kann nichts tun; sie fuehrt nur auf eine andere Seite. Der
neue Kasten hat einen Knopf und erklaert den iPhone-Fall, in dem
Web-Push ohne Home-Bildschirm gar nicht geht.
Entscheidung von Filipe am 03.10. Offen gesagt, was damit aufgegeben
ist: Wer "Nicht jetzt" tippt, bekommt keine zweite Erinnerung mehr.
Gegensicherung ist die Personenliste -- dort steht seit heute bei
jeder Person, die nichts bekommt, genau das.
pruef-glocke 36 -> 33, und die Zahl ist erklaert: 5 Pruefungen zur
alten Zeile entfernt, 2 neue dafuer. Die neuen pruefen das
GEGENTEIL von vorher -- dass die Zeile nicht unbemerkt
zurueckkommt -- mit der Zahl der geprueften Hinweise in der
Bedingung, damit eine leere Antwort der Schnittstelle nicht als
"steht nicht drin" durchgeht.
Die alte Gegenprobe ("mit angemeldetem Geraet ist der Hinweis weg")
ist ersatzlos entfallen, nicht aus Bequemlichkeit: Sie waere ab jetzt
IMMER gruen, egal was das Haus tut. Eine Pruefung, die nichts mehr
widerlegen kann, taeuscht nur Deckung vor. Was sie geprueft hat,
prueft pruef-push-hinweis am neuen Kasten, mit einer echten
Anmeldung.
OHNE_ZAHL in start.js bleibt als leere Liste stehen -- der naechste
Zustandshinweis braucht sie wieder, und als Liste ist sie die eine
Stelle dafuer.
Gegengemessen: pruef-tagesblick 23, pruef-start-ansicht 160,
pruef-push-hinweis 16 -- alle 0 Fehler.
Co-Authored-By: Claude Opus 5 <[email protected]>
2003 lines
92 KiB
JavaScript
2003 lines
92 KiB
JavaScript
/* ===================================================================
|
||
Startseite nach dem Anmelden.
|
||
|
||
Sie war eine Wand aus siebzehn gleichen Rechtecken, auf denen jeweils
|
||
"ÖFFNEN" stand. Wenn alles gleich aussieht, ist alles gleich wichtig
|
||
-- also nichts. Und "ÖFFNEN" ist keine Information, das weiss man von
|
||
einer Kachel ohnehin.
|
||
|
||
Drei Dinge machen daraus etwas Brauchbares:
|
||
|
||
1. GRUPPEN. Was man täglich braucht, was zu einem Creator gehört, was
|
||
den Laden am Laufen hält -- das sind drei verschiedene Absichten
|
||
und nicht eine Liste.
|
||
|
||
2. ZAHLEN STATT "ÖFFNEN". Auf der Kachel steht, wo Arbeit liegt.
|
||
Dieselben Quellen wie die Hinweise darüber, kein zweiter Zähler.
|
||
Eine Kachel, die "3" sagt, ist zehnmal mehr wert als eine, die
|
||
"öffnen" sagt.
|
||
|
||
3. ZEICHEN UND FARBE. Ein eigenes Zeichen je Bereich und ein eigener
|
||
Farbton -- man findet sie nach kurzer Zeit blind.
|
||
|
||
Die Seite ist bereits serverseitig geschützt (workspace.js). Dieses
|
||
Skript holt nur noch, WER angemeldet ist.
|
||
=================================================================== */
|
||
(() => {
|
||
'use strict';
|
||
|
||
/** Hat diese Person ueberhaupt einen Arbeitsplatz hier?
|
||
|
||
GEFRAGT WIRD NICHT NACH DER ROLLE. Rollennamen der Community
|
||
gehoeren nicht in eine Datei, die jeder herunterladen kann --
|
||
darueber wacht pruef-modi-wortleck, und ROLLENTEXT unten laesst
|
||
sie aus demselben Grund aus.
|
||
|
||
Gefragt wird nach etwas, das der Server ohnehin schon beantwortet
|
||
hat: Hat sie die Aufgaben-Kachel? Er schickt nur, was jemand
|
||
sehen darf. Keine zweite Wahrheit, kein Rollenname -- und es
|
||
bleibt richtig, wenn sich die Rechte aendern. */
|
||
function hatArbeitsplatz() {
|
||
const liste = ich && ich.bereiche;
|
||
if (!Array.isArray(liste)) return true; /* im Zweifel wie bisher */
|
||
return liste.some((b) => String(b.ziel || '').split('?')[0] === 'aufgaben.html');
|
||
}
|
||
|
||
const ROLLENTEXT = {
|
||
spicy: 'Spicy Media · Überblick über alle, ohne Automationen',
|
||
admin: 'DogFather · Gesamtübersicht und Freigaben',
|
||
/* Der Satz stimmte bis zum 07.09.2026. Seither legen Manager
|
||
Creator an -- und ein Rollentext, der etwas anderes verspricht als
|
||
die Oberflaeche kann, ist schlimmer als gar keiner. */
|
||
manager: 'Manager · dieselben Rechte, ohne Personenverwaltung – legt Creator an',
|
||
creator: 'Creator · dein eigener Bereich',
|
||
scout: 'Scout · deine Pipeline und die Creator, die du betreust',
|
||
};
|
||
|
||
/* Zeichen und Bereiche kommen aus assets/js/bereiche.js -- derselben
|
||
Quelle, aus der auch die Kopfleisten der Unterseiten ihr Zeichen und
|
||
ihre Farbe nehmen. Zwei Listen wären der sichere Weg dazu, dass ein
|
||
Bereich hier gelb und dort grün ist. */
|
||
const { ZEICHEN, GRUPPEN, zeichenBauen } = window.Bereiche;
|
||
|
||
|
||
/* Welcher Hinweis gehört auf welche Kachel. Die Zahl auf der Kachel ist
|
||
damit KEIN neuer Zähler, sondern dieselbe Quelle wie die Liste
|
||
darüber -- sonst stünden irgendwann zwei verschiedene Wahrheiten
|
||
übereinander auf einem Bildschirm. */
|
||
const HINWEIS_ZU_KACHEL = {
|
||
aufgaben_ueberfaellig: 'Aufgaben',
|
||
aufgaben_heute: 'Aufgaben',
|
||
aufgaben_review: 'Aufgaben',
|
||
termine_heute: 'Kalender',
|
||
protokoll_fehlt: 'Calls & Protokolle',
|
||
dateien_review: 'Dateien',
|
||
/* DAS ZIEL STATT DES NAMENS (berichtigt 20.09.2026).
|
||
Hier stand „LIVE-Analyse". So heisst die Kachel auf der
|
||
AGENTURSEITE -- auf der Crew-Adresse heisst dieselbe Seite
|
||
„Live-Ablauf". Ein Name trifft immer nur ein Haus; ich hatte
|
||
ihn erst einfach umgedreht und damit das andere kaputt
|
||
gemacht (pruef-start-ansicht wurde sofort rot).
|
||
Das ZIEL gilt in beiden. */
|
||
bereiche_dringend: 'bereich.html?b=live',
|
||
startcheck_handlung: 'Start-Check',
|
||
ohne_startcheck: 'Start-Check',
|
||
followup_faellig: 'Scout-Pipeline',
|
||
uebergabe_offen: 'Scout-Pipeline',
|
||
review_faellig: 'Reports & Review',
|
||
review_bald: 'Reports & Review',
|
||
ohne_betreuung: 'Personen & Zugänge',
|
||
ohne_profil: 'Creator-Profile',
|
||
markiert_live: 'bereich.html?b=live',
|
||
markiert_content: 'Content-Ideen',
|
||
markiert_community: 'Community',
|
||
markiert_technik: 'Technik',
|
||
/* MANAGER-ZIELE (02.10.2026). Ueber das ZIEL und nicht ueber den
|
||
Namen -- ein Name wandert, ein Ziel nicht (gelernt am
|
||
20.09.2026, als "LIVE-Analyse" auf der Crew-Adresse anders
|
||
heisst). Hier faellt es ohnehin nicht auf: Die Kachel gibt es
|
||
nur im Agenturhaus. Genau deshalb steht sie trotzdem so da --
|
||
die naechste koennte es anders sein. */
|
||
mz_dringend: 'manager-ziele.html',
|
||
mz_offen: 'manager-ziele.html',
|
||
};
|
||
|
||
/* Diese Hinweise bekommen zusätzlich das Merkzeichen auf die Kachel.
|
||
Sie sind etwas anderes als "3 Aufgaben offen": Da hat jemand
|
||
persönlich etwas markiert und wartet auf eine Reaktion. Eine Zahl
|
||
allein macht diesen Unterschied nicht sichtbar. */
|
||
const MIT_MERKZEICHEN = new Set([
|
||
'markiert_live', 'markiert_content', 'markiert_community', 'markiert_technik',
|
||
]);
|
||
|
||
/* Findet einen Bereich über seinen Namen -- damit Hinweis und Kachel
|
||
dasselbe Zeichen und denselben Farbton benutzen, ohne dass die
|
||
Zuordnung ein zweites Mal irgendwo stünde. */
|
||
/** Die Kachel zu einem Hinweis -- GEFUNDEN UEBER DAS ZIEL, NICHT
|
||
* UEBER DEN NAMEN (20.09.2026).
|
||
*
|
||
* Hier stand `x.name === name`, und gesucht wurde nur in `GRUPPEN`
|
||
* -- der Kachelliste der AGENTUR aus bereiche.js. Zwei Fehler in
|
||
* einer Zeile, und beide waren unsichtbar:
|
||
*
|
||
* 1. Die Kacheln von Team Dogi schickt der SERVER (`ich.bereiche`).
|
||
* In GRUPPEN stehen sie nicht. Fuer einen Modi fand diese Zeile
|
||
* also entweder nichts -- oder eine AGENTUR-Kachel, die er gar
|
||
* nicht hat, und uebernahm deren Farbe.
|
||
*
|
||
* 2. Namen aendern sich. Gemessen am 20.09.2026: Sieben der
|
||
* dreizehn Hinweisziele hatten auf der Crew-Adresse keine Kachel
|
||
* dieses Namens. „LIVE-Analyse" zum Beispiel heisst dort
|
||
* „Live-Ablauf".
|
||
*
|
||
* Das Ziel bleibt. `bereich.js` sagt denselben Satz an einer
|
||
* anderen Stelle schon: „Gefunden wird ueber das ZIEL, nicht ueber
|
||
* den Namen: Der Name aendert sich, das Ziel bleibt." */
|
||
const bereichZu = (was) => {
|
||
if (!was) return null;
|
||
const passt = (k) => k && (k.name === was
|
||
|| String(k.ziel || '').split('#')[0] === was);
|
||
/* ZUERST DIE EIGENEN KACHELN. Hier wurde nur `GRUPPEN` durchsucht
|
||
-- die Liste der AGENTUR aus bereiche.js. Die Kacheln von Team
|
||
Dogi schickt der SERVER (`ich.bereiche`), und die standen dort
|
||
nie drin. Fuer einen Modi fand diese Zeile entweder nichts oder
|
||
eine Agenturkachel, die er gar nicht hat -- und uebernahm deren
|
||
Farbe. Dieselbe Fehlerklasse wie bei der Seitenfarbe am
|
||
19.09.2026, nur an einer anderen Stelle. */
|
||
for (const k of (ich?.bereiche || [])) if (passt(k)) return k;
|
||
for (const k of (ich?.bereiche_zusatz || [])) if (passt(k)) return k;
|
||
for (const g of GRUPPEN) {
|
||
const k = g.bereiche.find(passt);
|
||
if (k) return k;
|
||
}
|
||
return null;
|
||
};
|
||
|
||
const $ = (id) => document.getElementById(id);
|
||
const el = (tag, klasse, text) => {
|
||
const k = document.createElement(tag);
|
||
if (klasse) k.className = klasse;
|
||
if (text !== undefined) k.textContent = text;
|
||
return k;
|
||
};
|
||
|
||
let ich = null;
|
||
/* WESSEN ARBEITSPLATZ WIRD GEZEIGT (02.09.2026).
|
||
|
||
`ich` ist, WER ANGEMELDET ist -- das bleibt so und gilt fuer alles,
|
||
was schreibt oder Rechte hat. `zeigt` ist, WESSEN Arbeitsplatz auf
|
||
dem Bildschirm steht. Im Normalfall dasselbe.
|
||
|
||
Vorher gab es nur `ich`, und die Folge war ein halb gebauter
|
||
Umschalter: Die Listen kamen bereits von der gewaehlten Person,
|
||
Kacheln, Rolle und Begruessung aber weiterhin von DogFather. Er sah
|
||
einen Creator-Arbeitsplatz in seiner eigenen Verkleidung -- gemeldet
|
||
mit "ich seh immer noch die Seite genau wie meine". */
|
||
let zeigt = null;
|
||
let hinweise = [];
|
||
|
||
/* ---------- Aufbau ------------------------------------------------------- */
|
||
|
||
function bereicheBauen() {
|
||
const ziel = $('bereiche');
|
||
ziel.textContent = '';
|
||
|
||
/* Zahlen je Kachel aus den Hinweisen zusammenzählen. Warnstufe
|
||
schlägt durch: Eine Kachel mit etwas Überfälligem ist rot, auch
|
||
wenn daneben Harmloses mitgezählt wird. */
|
||
/* DIE ZAHL LANDET AUF DER AUFGELOESTEN KACHEL (20.09.2026).
|
||
----------------------------------------------------------------
|
||
Hier wurde nach dem SCHLUESSEL aus `HINWEIS_ZU_KACHEL` abgelegt
|
||
und unten nach `b.name` gesucht. Das ging genau so lange gut,
|
||
wie beide dasselbe Wort waren.
|
||
|
||
Dasselbe Brett heisst aber in den zwei Haeusern verschieden:
|
||
auf der Agenturseite „LIVE-Analyse", auf der Crew-Adresse
|
||
„Live-Ablauf". Ein Name trifft immer nur ein Haus -- ich hatte
|
||
den Schluessel erst einfach umgedreht und damit das andere
|
||
kaputt gemacht (`pruef-start-ansicht` wurde sofort rot).
|
||
|
||
Abgelegt wird jetzt unter dem ZIEL der Kachel. Das ist in
|
||
beiden Haeusern dasselbe und aendert sich nicht, wenn jemand
|
||
umbenennt. */
|
||
const zahlen = new Map();
|
||
for (const h of hinweise) {
|
||
const treffer = bereichZu(HINWEIS_ZU_KACHEL[h.art]);
|
||
const kachel = treffer?.ziel || HINWEIS_ZU_KACHEL[h.art];
|
||
if (!kachel) continue;
|
||
const bisher = zahlen.get(kachel) || { n: 0, warn: false, merk: 0 };
|
||
bisher.n += h.anzahl;
|
||
if (h.stufe === 'warnung') bisher.warn = true;
|
||
if (MIT_MERKZEICHEN.has(h.art)) bisher.merk += h.anzahl;
|
||
zahlen.set(kachel, bisher);
|
||
}
|
||
|
||
/* =================================================================
|
||
WELCHE KACHELN DIESE PERSON SIEHT (10.09.2026)
|
||
|
||
ZWEI QUELLEN, und die Reihenfolge ist die Aussage:
|
||
|
||
1. Schickt der Server eine Liste, gilt sie. Das ist der Weg fuer
|
||
Rollen, die in bereiche.js gar nicht vorkommen duerfen --
|
||
diese Datei bekommt jeder ausgeliefert, der die Seite
|
||
oeffnet, und ein Rollenname darin waere mit einem Blick in
|
||
den Quelltext gefunden.
|
||
2. Sonst wie bisher: die Rollenliste an der Kachel selbst.
|
||
|
||
Nach der ANGESEHENEN Rolle, nicht der eigenen -- sonst stuenden
|
||
bei der Sicht auf einen Creator weiterhin "Personen & Zugaenge"
|
||
und "Automationen" da, die er gar nicht hat. Genau daran war zu
|
||
sehen, dass die Sicht nicht greift. Der Server richtet sich beim
|
||
Bauen seiner Liste nach derselben Person.
|
||
|
||
`null` heisst "nimm deine eigene Liste", eine LEERE Liste hiesse
|
||
"keine Kacheln". Die beiden auseinanderzuhalten ist kein
|
||
Feinschliff: Verwechselte man sie, haetten die fuenf bekannten
|
||
Rollen ab sofort eine leere Startseite. */
|
||
/* Ist die Seite hinter diesem Ziel fuer mich offen?
|
||
Ohne Auskunft vom Server: ja -- siehe oben. */
|
||
function seiteOffen(ziel) {
|
||
const offen = ich?.seiten;
|
||
if (!Array.isArray(offen) || !offen.length) return true;
|
||
const z2 = String(ziel || "");
|
||
if (!z2) return true;
|
||
return offen.includes('/workspace/' + z2.split('?')[0]);
|
||
}
|
||
|
||
/* =====================================================================
|
||
DIE REIHENFOLGE DER GRUPPEN (19.09.2026)
|
||
|
||
Filipe: „ich will das oben die sachen für dogfather sind, dan die
|
||
sachen für modis und dan community bereich, und so soll die
|
||
reihenfolge überall perfekt ist, also mit dem was jede rolle eben
|
||
halt sieht. was sie nicht sehen sehen sie nicht."
|
||
|
||
BIS HEUTE ENTSCHIED DER ZUFALL. Die Gruppen kamen in der
|
||
Reihenfolge, in der die Kacheln zusammengesetzt wurden — und die
|
||
hängt davon ab, welche Liste an welche angehängt wurde. Beim Team
|
||
stand „Für dich" deshalb mitten zwischen der Arbeit, und die
|
||
Moderation ganz unten hinter allen sieben Brettern der Community.
|
||
|
||
JETZT GILT EINE ORDNUNG, und sie folgt Filipes Satz:
|
||
|
||
1. die eigene Arbeit (Täglich, Live, Creator, Entwicklung …)
|
||
2. die Arbeit am Treff (Moderation) — sieht nur, wer moderiert
|
||
3. der Raum der Zuschauer (Community)
|
||
4. das Eigene (Für dich)
|
||
|
||
„Was sie nicht sehen, sehen sie nicht" bleibt unberührt: Diese
|
||
Funktion sortiert nur, was ohnehin schon da ist. Wer keine
|
||
Moderationskachel bekommt, bekommt auch keine Gruppe dafür —
|
||
leere Gruppen fallen vorher heraus.
|
||
|
||
UNBEKANNTE GRUPPEN LANDEN BEI DER ARBEIT, nicht am Ende. Eine neu
|
||
erfundene Gruppe ist fast immer Arbeit; und sie am Ende
|
||
einzusortieren hieße, sie hinter dem Persönlichen zu verstecken,
|
||
wo sie niemand sucht. */
|
||
/* NUR DAS ENDE WIRD FESTGELEGT -- die Arbeitsgruppen behalten ihre
|
||
Reihenfolge.
|
||
|
||
Der erste Versuch schrieb auch die Arbeitsgruppen fest
|
||
(Täglich, Rund um das Team, …). Das war zu viel: Ihre Reihenfolge
|
||
ist an mehreren Stellen bewusst gewählt und mit Gründen versehen,
|
||
und eine Prüfung hat sie sofort als geändert gemeldet — zu Recht.
|
||
Wer eine bestehende Entscheidung überschreibt, ohne sie gelesen zu
|
||
haben, repariert nichts, sondern ersetzt sie durch seine eigene.
|
||
|
||
Also: Alles, was hier NICHT steht, bleibt, wo es war. Nur diese
|
||
drei wandern ans Ende, in genau dieser Folge. */
|
||
const GRUPPEN_ZULETZT = ['Moderation', 'Community', 'Für dich'];
|
||
|
||
function gruppenPlatz(name) {
|
||
const z = GRUPPEN_ZULETZT.indexOf(name);
|
||
return z >= 0 ? 1 + z : 0;
|
||
}
|
||
|
||
/** Sortiert die Gruppen, ohne innerhalb einer Gruppe etwas zu
|
||
* verschieben. `sort` ist seit ES2019 stabil — Kacheln gleicher
|
||
* Gruppe behalten also ihre Reihenfolge, und die ist an mehreren
|
||
* Stellen bewusst gewählt (die breite Treff-Kachel vorn). */
|
||
function nachOrdnung(gruppen) {
|
||
return [...gruppen].sort((a, b) => gruppenPlatz(a.name) - gruppenPlatz(b.name));
|
||
}
|
||
|
||
function eigeneGruppen(wer) {
|
||
const vomServer = ich && ich.bereiche;
|
||
if (Array.isArray(vomServer)) {
|
||
/* Nach Gruppen buendeln, in der Reihenfolge, in der sie kommen
|
||
-- eine Map behaelt sie, ein Objekt sortierte Zahlenschluessel
|
||
um. Hier sind es Woerter, aber darauf zu bauen waere die Art
|
||
Annahme, die spaeter jemanden Zeit kostet. */
|
||
const nach = new Map();
|
||
for (const b of vomServer) {
|
||
if (!nach.has(b.gruppe)) {
|
||
nach.set(b.gruppe, { name: b.gruppe, unter: b.gruppeUnter || '', bereiche: [] });
|
||
}
|
||
nach.get(b.gruppe).bereiche.push(b);
|
||
}
|
||
return nachOrdnung([...nach.values()]);
|
||
}
|
||
/* KACHELN, DIE DAZUKOMMEN (10.09.2026).
|
||
|
||
Anders als `ich.bereiche` (das die Liste ERSETZT) haengen
|
||
diese sich an eine vorhandene Gruppe an. Gebraucht wird das
|
||
fuer Kacheln, die nur eine einzige Rolle bekommt: In dieser
|
||
Datei duerften sie nicht stehen -- sie wird an jeden
|
||
ausgeliefert, und eine Kachel, die nur bei einem erscheint,
|
||
wirft die Frage auf, fuer wen sie ist.
|
||
|
||
Findet sich die genannte Gruppe nicht, wird eine eigene
|
||
angelegt. Sonst faellt die Kachel lautlos weg, sobald jemand
|
||
eine Gruppe umbenennt -- und niemand merkt es, weil nichts
|
||
kaputtgeht. */
|
||
const zusatz = Array.isArray(ich?.bereiche_zusatz) ? ich.bereiche_zusatz : [];
|
||
const gruppen = GRUPPEN
|
||
/* UND GEGEN DIE RECHTETAFEL (11.09.2026).
|
||
|
||
`rollen` an der Kachel ist die Liste in dieser Datei -- sie
|
||
wird von Hand gepflegt und kennt nichts davon, dass DogFather
|
||
eine Seite umgestellt hat. `ich.seiten` kommt vom Server und
|
||
ist dieselbe Auskunft, aus der auch die Schranke ihre
|
||
Entscheidung holt.
|
||
|
||
BEIDES UND NICHT NUR EINES: Die Liste hier entscheidet, was
|
||
ueberhaupt angeboten wird; die Tafel, ob es noch offen ist.
|
||
Faellt `ich.seiten` aus (alte Fassung im Zwischenspeicher),
|
||
bleibt es beim alten Verhalten -- eine Kachel zu viel ist
|
||
aergerlich, eine fehlende sieht aus wie ein Fehler. */
|
||
.map((g) => ({ ...g, bereiche: g.bereiche.filter((b) => b.rollen.includes(wer.rolle)
|
||
&& seiteOffen(b.ziel)) }))
|
||
.filter((g) => g.bereiche.length);
|
||
for (const b of zusatz) {
|
||
const g = gruppen.find((x) => x.name === b.gruppe);
|
||
if (g) { g.bereiche = [...g.bereiche, b]; continue; }
|
||
|
||
/* EINE NEUE GRUPPE DARF SAGEN, WO SIE HINGEHOERT (10.09.2026).
|
||
|
||
Bis hierhin wurde sie hinten angehaengt. Filipe: "ich will
|
||
dass die kacheln ... eine eigene kategorie haben. damit ich
|
||
nicht zwischen den kacheln suchen muss." Ganz unten waere
|
||
zwar eine eigene Kategorie -- aber immer noch Scrollen.
|
||
|
||
`gruppeNach` nennt die Gruppe, HINTER der sie stehen soll.
|
||
Findet sie sich nicht (umbenannt, fuer diese Rolle nicht
|
||
dabei), bleibt es beim Anhaengen: Eine Kachel, die wegen
|
||
einer Reihenfolge verschwindet, waere der schlechtere
|
||
Tausch. */
|
||
const neuGruppe = { name: b.gruppe, unter: b.gruppeUnter || '', bereiche: [b] };
|
||
const nach = b.gruppeNach
|
||
? gruppen.findIndex((x) => x.name === b.gruppeNach)
|
||
: -1;
|
||
if (nach >= 0) gruppen.splice(nach + 1, 0, neuGruppe);
|
||
else gruppen.push(neuGruppe);
|
||
}
|
||
return nachOrdnung(gruppen);
|
||
}
|
||
|
||
let laufNr = 0;
|
||
/* Alle Kacheln, die zum Live fuehren -- gesammelt, weil die
|
||
Antwort des Live-Dienstes erst nach dem Aufbau der Wand da ist
|
||
(ein Netzabruf, die Wand steht in Millisekunden). */
|
||
const liveKacheln = [];
|
||
for (const gruppe of eigeneGruppen(zeigt)) {
|
||
const meine = gruppe.bereiche;
|
||
if (!meine.length) continue;
|
||
|
||
const abschnitt = el('section', 'gruppe');
|
||
/* Manche Gruppen heißen für einen Creator anders -- siehe GRUPPEN. */
|
||
const istCreator = zeigt.rolle === 'creator';
|
||
|
||
/* ===============================================================
|
||
JEDE GRUPPE LAESST SICH ZUKLAPPEN (07.09.2026)
|
||
|
||
Wunsch Filipe: "diese kategorien soll man auch zu und aufmachen
|
||
koennen so wie es einem lieb ist gerade."
|
||
|
||
DER KOPF IST DER SCHALTER, nicht ein Knopf daneben. Eine
|
||
Ueberschrift, neben der ein kleines Dreieck sitzt, laedt zum
|
||
Zielen ein; eine Ueberschrift, die SELBST der Schalter ist,
|
||
trifft man immer. Deshalb <button> statt <div> -- damit kommt
|
||
die Tastaturbedienung und die Ansage fuer Vorleseprogramme
|
||
geschenkt, statt sie mit tabindex und role nachzubauen.
|
||
|
||
DER ZUSTAND WIRD GEMERKT. "So wie es einem lieb ist" heisst:
|
||
Er muss den naechsten Aufruf ueberleben. Gespeichert wird je
|
||
Gruppe und je ANGESEHENER Rolle -- DogFather, der sich einen
|
||
Creator ansieht, hat dort eine andere Aufteilung im Kopf als
|
||
auf seiner eigenen Seite.
|
||
|
||
Faellt localStorage aus (privates Fenster, volle Ablage), ist
|
||
das kein Fehler: Dann steht eben alles offen. Ein Merker, der
|
||
die Seite mitreisst, waere schlimmer als ein vergessener. */
|
||
const kopf = el('button', 'gruppe__kopf');
|
||
kopf.type = 'button';
|
||
const schluessel = `gruppe:${zeigt.rolle}:${gruppe.name}`;
|
||
let zu = false;
|
||
try { zu = localStorage.getItem(schluessel) === 'zu'; } catch { zu = false; }
|
||
|
||
kopf.append(el('h2', 'gruppe__name',
|
||
(istCreator && gruppe.nameCreator) || gruppe.name));
|
||
kopf.append(el('span', 'gruppe__unter',
|
||
(istCreator && gruppe.unterCreator) || gruppe.unter));
|
||
/* Die Zahl sagt, was hinter einer zugeklappten Gruppe steckt --
|
||
ohne sie klappt man drei Gruppen auf, um zu suchen. */
|
||
kopf.append(el('span', 'gruppe__zahl', String(meine.length)));
|
||
const pfeil = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||
pfeil.setAttribute('class', 'gruppe__pfeil');
|
||
pfeil.setAttribute('viewBox', '0 0 24 24');
|
||
pfeil.setAttribute('aria-hidden', 'true');
|
||
pfeil.innerHTML = '<path d="m6 9.5 6 6 6-6" fill="none" stroke="currentColor"'
|
||
+ ' stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>';
|
||
kopf.append(pfeil);
|
||
abschnitt.append(kopf);
|
||
|
||
const liste = el('ul', 'kacheln');
|
||
for (const b of meine) {
|
||
const li = el('li', 'kachel');
|
||
/* NUR SETZEN, WENN ES EINEN GIBT. `String(undefined)` schreibt
|
||
sonst data-ton="undefined" ins Dokument -- kein Selektor
|
||
trifft das, die Farbe stimmt also zufaellig, und jede
|
||
Pruefung, die Toene zaehlt, liest ein Wort statt einer Zahl.
|
||
Die Tuer ins andere Haus ist die einzige Kachel ohne Ton
|
||
(sie gehoert keinem Bereich an, siehe workspace.js). */
|
||
if (b.ton !== undefined && b.ton !== null) li.dataset.ton = String(b.ton);
|
||
/* Die Willkommenskachel traegt alle Farben des Hauses.
|
||
Das Merkmal steht hier und nicht am Ton, damit die
|
||
Farbwerkzeuge weiter mit Zahlen rechnen koennen. */
|
||
if (b.regenbogen) li.dataset.regenbogen = 'ja';
|
||
/* SILBER -- wie der Regenbogen ein Merkmal am Element und
|
||
nicht am Ton, damit die Farbwerkzeuge weiter mit Zahlen
|
||
rechnen koennen. */
|
||
if (b.silber) li.dataset.silber = 'ja';
|
||
/* PAPIER -- die Oberflaeche des Notizblocks. Dieselbe Bauart
|
||
wie Silber und Regenbogen: ein Merkmal am Element, damit
|
||
die Farbwerkzeuge weiter mit Zahlen rechnen koennen. */
|
||
if (b.papier) li.dataset.papier = 'ja';
|
||
/* LIVE -- die Flaeche der Reaction. Sie traegt keine
|
||
Ton-Nummer, sondern ihren Zustand; den holt start.js beim
|
||
Laden von /api/reaktion/stand nach und setzt ihn als
|
||
data-stand. Bis dahin steht sie geschlossen da, und das
|
||
ist die richtige Vorgabe: Wer nichts weiss, behauptet
|
||
nicht, es laufe etwas. */
|
||
if (b.live) { li.dataset.sendung = 'ja'; li.dataset.stand = 'zu'; }
|
||
if (b.gross) li.dataset.gross = 'ja';
|
||
/* Der Einlauf wird gestaffelt -- aber über eine Eigenschaft, die
|
||
bei "weniger Bewegung" nichts tut (siehe start.css). */
|
||
li.style.setProperty('--nr', String(laufNr++));
|
||
|
||
const a = el('a', 'kachel__link');
|
||
a.href = b.ziel;
|
||
|
||
/* DIE KACHEL, DIE ZUM LIVE FUEHRT, SAGT ES SELBST (22.09.2026).
|
||
==========================================================
|
||
Filipe: "in dieser kachel soll wenn ich live bin um 20h bis
|
||
22h ein live button der richtig geil ist mit einem live
|
||
roten punkt symbol".
|
||
|
||
WELCHE Kachel das ist, wird nicht am Namen erkannt, sondern
|
||
am ZIEL. Der Name hat sich in diesem Haus schon zweimal
|
||
geaendert ("Unsere Seiten" -> "Draussen"), das Ziel nie --
|
||
und am 21.09. hat genau dieser Unterschied eine ganze
|
||
Hinweisspalte lahmgelegt. */
|
||
if (typeof b.ziel === 'string' && b.ziel.indexOf('unsere-seiten.html') === 0) {
|
||
liveKacheln.push(li);
|
||
}
|
||
|
||
/* Das Wasserzeichen: dasselbe Zeichen noch einmal, riesig und
|
||
fast unsichtbar in der Ecke. Es macht jede Kachel auf den
|
||
ersten Blick unverwechselbar, ohne dass man es bewusst
|
||
wahrnimmt -- und es ist der Grund, warum siebzehn Kacheln
|
||
nicht mehr wie siebzehn Kästen aussehen.
|
||
|
||
Steht als Erstes im Aufbau, damit es HINTER allem liegt. */
|
||
const schatten = el('span', 'kachel__wasserzeichen');
|
||
schatten.append(zeichenBauen(b.zeichen));
|
||
a.append(schatten);
|
||
|
||
const zeichen = el('span', 'kachel__zeichen');
|
||
zeichen.append(zeichenBauen(b.zeichen));
|
||
a.append(zeichen);
|
||
|
||
const text = el('span', 'kachel__text');
|
||
text.append(el('span', 'kachel__name', b.name));
|
||
text.append(el('span', 'kachel__unter', b.unter));
|
||
a.append(text);
|
||
|
||
const zahl = zahlen.get(b.ziel) || zahlen.get(b.name);
|
||
|
||
/* Das Merkzeichen oben in der Kachel. Es sitzt im Link und nicht
|
||
im Text, damit es sich absolut an der Kachelecke ausrichten
|
||
kann statt im Fluss mitzuschwimmen. */
|
||
if (zahl && zahl.merk > 0) {
|
||
const m = window.Bereiche.merkzeichenBauen(zahl.merk, 'merk');
|
||
m.classList.add('kachel__merk');
|
||
a.append(m);
|
||
/* Die Kachel merkt sich das: Zahl und Pfeil ruecken dann nach
|
||
unten, damit sie dem Zeichen nicht ins Gehege kommen. Die
|
||
Browserpruefung hat genau diese Ueberdeckung gemeldet -- mit
|
||
blossem Auge waren es zwei Pixel. */
|
||
li.dataset.merk = 'ja';
|
||
}
|
||
|
||
/* Besteht die Zahl NUR aus Markierungen, waere sie dieselbe
|
||
Auskunft ein zweites Mal: Das Zeichen sagt bereits "hier ist
|
||
etwas", und bei mehreren steht die Anzahl darin. Dann lieber
|
||
der Pfeil -- zwei Marken uebereinander auf einer Kachel von
|
||
achtzig Pixeln sind Unruhe ohne Gewinn. */
|
||
/* DER FARBIGE RAND AN DER KACHEL SELBST (02.10.2026).
|
||
|
||
Bis hierher trug nur das ABZEICHEN die Warnfarbe -- eine
|
||
Marke von 32 Pixeln am rechten Rand einer Kachel von 96.
|
||
Auf einer Wand mit zwanzig Kacheln findet man sie nur,
|
||
wenn man sie sucht.
|
||
|
||
Verlangt hat es die Vorlage zur Kachel „Manager-Ziele"
|
||
(„farbiger Rand + Badge mit Anzahl offener Aufgaben") --
|
||
gebaut ist es aber fuer JEDE Kachel, nicht nur fuer die
|
||
eine. Eine Regel, die nur an einer Stelle gilt, ist
|
||
dieselbe Falle wie eine feste Zahl: Beim naechsten Mal
|
||
fehlt sie, und niemand weiss warum.
|
||
|
||
ES IST DIESELBE QUELLE wie das Abzeichen (`zahl.warn`),
|
||
kein zweiter Zaehler. Und es ersetzt die Marke nicht,
|
||
sondern steht daneben -- Farbe traegt im Haus nie allein
|
||
eine Aussage. */
|
||
if (zahl && zahl.warn) li.dataset.warn = 'ja';
|
||
|
||
if (zahl && zahl.n > 0 && zahl.n > zahl.merk) {
|
||
const marke = el('span', 'kachel__zahl', String(zahl.n));
|
||
if (zahl.warn) marke.dataset.warn = 'ja';
|
||
/* Vorlesende Programme bekommen einen Satz statt einer nackten
|
||
Zahl -- "Aufgaben, 3" sagt nichts.
|
||
|
||
NICHT "OFFENE PUNKTE" (17.09.2026). Gezaehlt werden
|
||
HINWEISE: bei Aufgaben etwa "2 ueberfaellig" plus "2 heute
|
||
faellig" -- also 4. Darunter steht im Zahlenblock aber "6
|
||
Offen", und beides ist richtig. Das Wort "offen" war die
|
||
einzige Stelle, an der daraus ein Widerspruch wurde: Wer
|
||
die Kachel vorgelesen bekam, hoerte eine Zahl offener
|
||
Aufgaben, die es so nicht gibt.
|
||
|
||
"Liegt an" ist das Wort, das im Haus ohnehin dafuer steht
|
||
-- der Block darueber heisst "Was ist dran". */
|
||
marke.setAttribute('aria-label',
|
||
`${b.name}: ${zahl.n} ${zahl.n === 1 ? 'Sache liegt an' : 'Sachen liegen an'}`);
|
||
a.append(marke);
|
||
} else {
|
||
a.append(el('span', 'kachel__pfeil', '→'));
|
||
}
|
||
|
||
li.append(a);
|
||
liste.append(li);
|
||
}
|
||
abschnitt.append(liste);
|
||
|
||
/* Das Aufklappen laeuft ueber ein Merkmal am Abschnitt, nicht ueber
|
||
`hidden` an der Liste: So kann das CSS den Uebergang zeichnen
|
||
und den Pfeil drehen, ohne dass das Skript etwas davon wissen
|
||
muss. */
|
||
const stand = (istZu) => {
|
||
abschnitt.dataset.zu = istZu ? 'ja' : 'nein';
|
||
kopf.setAttribute('aria-expanded', istZu ? 'false' : 'true');
|
||
liste.hidden = istZu;
|
||
};
|
||
stand(zu);
|
||
kopf.addEventListener('click', () => {
|
||
zu = !zu;
|
||
stand(zu);
|
||
try { localStorage.setItem(schluessel, zu ? 'zu' : 'auf'); } catch { /* egal */ }
|
||
});
|
||
|
||
ziel.append(abschnitt);
|
||
}
|
||
|
||
/* ===============================================================
|
||
DER LIVE-PUNKT AUF DER KACHEL (22.09.2026)
|
||
|
||
Er wird NICHT in den Aufbau der Wand hineingerechnet, sondern
|
||
nachtraeglich gesetzt: Der Live-Dienst steht draussen, sein
|
||
Abruf dauert. Wer die Wand darauf warten liesse, haette eine
|
||
Seite, die beim Laden haengt, weil jemand anderes gerade nicht
|
||
antwortet.
|
||
|
||
`live.js` liefert drei Antworten. Nur "live" setzt die Marke --
|
||
bei "weiss nicht" behauptet hier niemand etwas, weder in die
|
||
eine noch in die andere Richtung. */
|
||
/* ==== DIE REACTION-KACHEL HOLT IHREN ZUSTAND ===================
|
||
(28.09.2026.)
|
||
|
||
Sie steht als „geschlossen" in der Wand, bis der Server etwas
|
||
anderes sagt. Das ist die richtige Vorgabe: Wer nichts weiss,
|
||
behauptet nicht, es laufe gerade etwas.
|
||
|
||
DIE ABFRAGE HAENGT AN DER KACHEL UND NICHT AN DER SEITE. Gibt
|
||
es sie nicht -- im Agenturhaus zum Beispiel --, wird auch
|
||
nicht gefragt. Sonst stuende dort bei jedem Aufruf ein 404 in
|
||
der Konsole, und pruef-handy wuerde die Seite zu Recht
|
||
beanstanden; genau das ist am 27.09. beim Notizblock
|
||
passiert. */
|
||
const sendungsKachel = ziel.querySelector('.kachel[data-sendung="ja"]');
|
||
if (sendungsKachel) {
|
||
fetch('/workspace/api/reaktion', { credentials: 'same-origin' })
|
||
.then((a) => (a.ok ? a.json() : null))
|
||
.then((l) => {
|
||
if (l && typeof l.stand === 'string') sendungsKachel.dataset.stand = l.stand;
|
||
})
|
||
.catch(() => { /* Die Wand steht auch ohne diese Auskunft. */ });
|
||
}
|
||
|
||
if (liveKacheln.length && window.LiveStatus) {
|
||
window.LiveStatus.beobachten((lage) => {
|
||
for (const li of liveKacheln) {
|
||
const link = li.querySelector('.kachel__link');
|
||
const alt = li.querySelector('.kachel__live');
|
||
if (lage.zustand === 'live') {
|
||
if (!alt && link) {
|
||
const marke = window.LiveStatus.abzeichen('LIVE');
|
||
marke.classList.add('kachel__live');
|
||
link.append(marke);
|
||
}
|
||
li.dataset.live = 'ja';
|
||
} else {
|
||
if (alt) alt.remove();
|
||
delete li.dataset.live;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
}
|
||
|
||
/* =====================================================================
|
||
WARUM DIE GRUPPEN OFFEN BLEIBEN — nachgemessen am 20.09.2026
|
||
|
||
Der Gedanke war: Ein Modi sieht beim allerersten Besuch 25 Kacheln
|
||
in 5 Gruppen, eine rechte Hand 30 in 6, DogFather 39 in 8. Das ist
|
||
eine Wand. Naheliegend wäre, beim ersten Mal alles außer der ersten
|
||
Gruppe zuzuklappen -- dann stünde die Gliederung da wie ein
|
||
Inhaltsverzeichnis.
|
||
|
||
GEBAUT, GEMESSEN, WIEDER ENTFERNT. Drei Gründe, alle gemessen:
|
||
|
||
1. DIE ERSTE GRUPPE IST NICHT DIE WICHTIGSTE. Bei DogFather
|
||
heißt sie „Rund um das Team" und hat GENAU EINE Kachel. Er
|
||
hätte eine Kachel gesehen und sieben zugeklappte
|
||
Überschriften. Das ist keine Gliederung, das ist eine leere
|
||
Seite mit Beschriftung.
|
||
|
||
2. „PASST ES AUF DEN SCHIRM" KLAPPT FAST IMMER ZU. Gedacht war
|
||
die Regel als Selbstanpassung: nur einklappen, wenn die
|
||
letzte Überschrift unter den Rand rutscht. Bei 30 Kacheln
|
||
rutscht sie das auch auf einem 1280×900-Bildschirm. Die
|
||
Regel, die „nur auf dem Handy greifen" sollte, hätte überall
|
||
gegriffen.
|
||
|
||
3. ES GIBT KEINEN „ERSTEN BESUCH" MEHR. Der Merker entsteht erst,
|
||
wenn jemand eine Gruppe anfasst. Wer die Seite seit Wochen
|
||
benutzt und nie geklappt hat, sähe für das Skript aus wie ein
|
||
Neuling -- und fände am Morgen seine Startseite umgebaut. Eine
|
||
Verbesserung, die den Bestand überrumpelt, ist keine.
|
||
|
||
Was bleibt: Die Gruppen sind klappbar, die Zahl steht am Kopf, und
|
||
der Zustand wird gemerkt. Wer aufräumen will, kann es -- und es
|
||
bleibt so. Das ist die Entscheidung des Nutzers, nicht meine.
|
||
===================================================================== */
|
||
|
||
/* ---------- Das Licht folgt dem Zeiger -----------------------------------
|
||
|
||
Die Kachel trägt einen weichen Lichtfleck. Er sitzt ruhend oben links
|
||
und wandert unter dem Zeiger mit. Kein Blinken, keine Bewegung des
|
||
Inhalts -- es wird nur an einer anderen Stelle heller. Genau das ist
|
||
der Unterschied zwischen "sieht gut aus" und "fühlt sich gut an".
|
||
|
||
EIN Zuhörer für alle Kacheln statt siebzehn einzelner. Und in einem
|
||
Bild je Rahmen: pointermove feuert dutzendfach je Sekunde; wer bei
|
||
jedem Ereignis in den Stil schreibt, lässt den Browser das Bild
|
||
mehrfach umsonst neu berechnen.
|
||
|
||
Auf Fingerbedienung und bei "weniger Bewegung" bleibt es ganz aus --
|
||
dort gibt es keinen Zeiger, dem etwas folgen könnte. */
|
||
/* lichtFolgen steht seit dem 01.09.2026 in kopf.js und gilt fuer ALLE
|
||
Karten im Workspace, nicht nur fuer die Kacheln hier. Eine zweite
|
||
Fassung an dieser Stelle haette bedeutet: zwei Zuhoerer auf
|
||
denselben Bewegungen, und der Fehler waere erst aufgefallen, wenn
|
||
jemand die eine geaendert haette und sich nichts tat. */
|
||
|
||
|
||
/* ---------- Die Begrüßung ------------------------------------------------
|
||
|
||
Sie soll in drei Zeilen sagen, was man beim Reinkommen wissen will:
|
||
WANN ist es, WER bin ich, WIE steht es. Vorher stand dort "Angemeldet"
|
||
-- eine Zeile, die nichts hinzufügt, weil oben rechts der eigene Name
|
||
mit Rolle steht. */
|
||
|
||
const WOCHENTAGE = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch',
|
||
'Donnerstag', 'Freitag', 'Samstag'];
|
||
const MONATE = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
|
||
'August', 'September', 'Oktober', 'November', 'Dezember'];
|
||
|
||
/* Kalenderwoche nach ISO 8601 -- die Woche, in der der Donnerstag liegt.
|
||
Selbst gerechnet, weil eine falsche KW schlimmer ist als gar keine
|
||
und dafür keine fremde Bibliothek in die Seite gehört. */
|
||
function kalenderwoche(d) {
|
||
const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
|
||
t.setUTCDate(t.getUTCDate() + 4 - (t.getUTCDay() || 7));
|
||
const anfang = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
|
||
return Math.ceil(((t - anfang) / 86400000 + 1) / 7);
|
||
}
|
||
|
||
/* Manche Tage haben einen Charakter, und den zu benennen kostet nichts.
|
||
Bewusst NICHT für jeden Tag -- ein Wort, das immer da steht, liest
|
||
nach drei Tagen niemand mehr. */
|
||
const TAGESMARKER = {
|
||
1: 'Neue Woche',
|
||
5: 'Endspurt',
|
||
6: 'Wochenende',
|
||
0: 'Wochenende',
|
||
};
|
||
|
||
/* ---------- Die Uhr in der Begrüßungskachel -------------------------
|
||
Zwei Ringe um dieselbe Mitte: der äußere zeigt die Minute in der
|
||
Stunde, der innere die Sekunde. Beides als SVG-Kreis mit
|
||
`stroke-dasharray` -- ein Kegelverlauf (conic-gradient) hätte an
|
||
der Naht eine sichtbare Kante, ein Kreisbogen nicht.
|
||
|
||
UMFANG = 2 * pi * 44 = 276.46. Die Zahl steht hier ausgerechnet und
|
||
nicht als Formel im Stil: Ändert jemand den Radius im HTML, fällt
|
||
der Ring sofort auf, statt sich stillschweigend zu verrechnen.
|
||
|
||
KEIN setInterval(…, 1000). Ein Takt von genau einer Sekunde läuft
|
||
mit der Zeit aus dem Tritt (jeder Durchlauf kostet ein paar
|
||
Millisekunden), und die Anzeige springt dann gelegentlich zwei
|
||
Sekunden weiter. Stattdessen wird jedes Mal bis zur NÄCHSTEN vollen
|
||
Sekunde gewartet -- die Anzeige bleibt für immer im Takt der
|
||
Systemuhr. */
|
||
/* Drei Umfaenge, ausgerechnet und nicht als Formel im Stil: Aendert
|
||
jemand einen Radius im HTML, faellt der Ring sofort auf, statt sich
|
||
stillschweigend zu verrechnen. U = 2 * pi * r */
|
||
const UMFANG = { sekunde: 285.88, minute: 241.90, stunde: 197.92 }; // r = 45.5 / 38.5 / 31.5
|
||
|
||
function uhrStarten() {
|
||
const zeit = $('uhr-zeit'), sek = $('uhr-sek');
|
||
const ringe = {
|
||
stunde: $('uhr-stunde'), minute: $('uhr-minute'), sekunde: $('uhr-sekunde'),
|
||
};
|
||
if (!zeit || !ringe.sekunde) return;
|
||
const p = (n) => String(n).padStart(2, '0');
|
||
|
||
/* Voll = kein Versatz. Die Ringe wachsen im Uhrzeigersinn, weil das
|
||
SVG im Stil um 90 Grad zurueckgedreht ist. */
|
||
/* ALLE DREI LAGEN EINES RINGES AUF EINMAL (07.09.2026).
|
||
|
||
Seit jeder Ring aus Schatten, Koerper und Oberkante besteht,
|
||
muessen alle drei denselben Stand haben. Sie tragen dafuer
|
||
`data-ring`; einzeln gepflegte Verweise waeren drei Stellen, an
|
||
denen man eine vergessen kann -- und ein Schatten, der stehen
|
||
bleibt, sieht sofort kaputt aus. */
|
||
const lagen = {}, koepfe = {};
|
||
for (const welcher of ['sekunde', 'minute', 'stunde']) {
|
||
lagen[welcher] = [...document.querySelectorAll(`[data-ring="${welcher}"]`)];
|
||
koepfe[welcher] = document.querySelector(`[data-kopf="${welcher}"]`);
|
||
}
|
||
|
||
/* DIE SEKUNDE IST EINE PUNKTREIHE (08.09.2026).
|
||
|
||
Filipe: "ich will aber dass die sekunden wie punkte sind".
|
||
|
||
Sechzig Punkte auf der Bahn, einer je Sekunde, und es leuchten so
|
||
viele, wie vergangen sind. `stroke-linecap: round` macht aus einer
|
||
Strichlaenge nahe null einen Kreis vom Durchmesser der
|
||
Strichbreite -- so entsteht ein Punkt ohne ein einziges weiteres
|
||
Element.
|
||
|
||
DAS MUSTER MUSS MITWACHSEN, und genau das kann `dashoffset`
|
||
allein nicht: Es verschiebt ein festes Muster, es kuerzt es
|
||
nicht. Ein festes Punktmuster plus Offset ergaebe eine Reihe, die
|
||
WANDERT statt zu wachsen. Deshalb wird die Liste je Sekunde neu
|
||
gebaut: n Paare aus Punkt und Luecke, dahinter eine Luecke ueber
|
||
den ganzen Rest. Sechzig Zahlenpaare einmal je Sekunde sind
|
||
nichts -- die Alternative waeren sechzig Elemente im Dokument. */
|
||
/* Wie viele Glieder hat welche Bahn, und wie lang ist eines?
|
||
Die Sekunde bekommt PUNKTE (Laenge nahe null, runde Kappe), Minute
|
||
und Stunde BALKEN -- je langsamer, desto laenger das Glied. So
|
||
liest man die drei auch ohne Farbe auseinander. */
|
||
const GLIEDER = { sekunde: 60, minute: 60, stunde: 12 };
|
||
/* DIE STUNDE WAR BREITER ALS LANG (behoben 09.09.2026, screen5).
|
||
|
||
Filipe: "alles ist mega ausser die stunden muss du noch
|
||
perfektionnieren."
|
||
|
||
Nachgemessen war das der Grund: Ein Stundenglied war 5,5 lang
|
||
und 7 breit. Ein Segment, das breiter ist als lang, liest sich
|
||
nicht als Balken auf einer Bahn, sondern als Klotz quer darauf --
|
||
und weil die Kantenlage 0,4 nach oben versetzt ist, lief
|
||
zusaetzlich ein heller Strich mitten hindurch statt an der
|
||
Oberkante entlang.
|
||
|
||
Jetzt 10 lang bei 5,8 breit. Das Verhaeltnis ist damit 1,7:1
|
||
statt 0,79:1 -- aus dem Klotz wird ein Balken, und der helle
|
||
Strich sitzt wieder da, wo er hingehoert: auf der Kante.
|
||
|
||
Die Staffelung bleibt eindeutig: Punkt (0,01), kurzer Balken
|
||
(1,7), langer Balken (10). Je langsamer die Bahn, desto laenger
|
||
das Glied. */
|
||
const GLIED_LAENGE = { sekunde: 0.01, minute: 1.7, stunde: 10 };
|
||
|
||
const punktMuster = (U, n, gesamt, laenge) => {
|
||
const schritt = U / gesamt;
|
||
if (n <= 0) return `0 ${U}`;
|
||
/* 0.01 statt 0: Manche Browser zeichnen eine Strichlaenge von
|
||
exakt null gar nicht, auch mit runder Kappe. */
|
||
const paar = `${laenge} ${(schritt - laenge).toFixed(3)} `;
|
||
/* DIE REIHENFOLGE ENTSCHEIDET, OB DER REST EINE LUECKE IST.
|
||
|
||
In `dasharray` wechseln sich Strich und Luecke ab, beginnend
|
||
mit einem Strich. Nach n Paaren stehen 2n Werte -- der naechste
|
||
Wert sitzt damit an UNGERADER Stelle und ist ein STRICH.
|
||
|
||
Genau daran bin ich zweimal gescheitert. Erst haengte ich den
|
||
Rest direkt an (2n+1 Werte, ungerade -- SVG verdoppelt die
|
||
Liste und vertauscht dabei alles), dann setzte ich eine Null
|
||
hinterher (`rest 0`): Die Anzahl war gerade, aber der Rest
|
||
stand weiterhin an ungerader Stelle und wurde gezeichnet. Im
|
||
Bildschirmfoto lief beide Male ein durchgehender roter Bogen
|
||
ueber die halbe Uhr, neben den richtigen Punkten.
|
||
|
||
Richtig ist die Null ZUERST: Sie belegt die ungerade Stelle als
|
||
Strich der Laenge null, und der Rest landet an gerader Stelle --
|
||
als Luecke, wie gemeint. Zwei Zahlen in der richtigen
|
||
Reihenfolge, und der Rest verschwindet. */
|
||
return paar.repeat(n) + '0 ' + (U - n * schritt).toFixed(3);
|
||
};
|
||
|
||
const setze = (welcher, anteil) => {
|
||
const U = UMFANG[welcher];
|
||
|
||
/* ALLE DREI BAHNEN SIND REIHEN (08.09.2026).
|
||
|
||
Filipe: "ich will auch dass die stunden und minuten auch barren
|
||
oder punkte sind und nicht so eine durchlaufende schleife."
|
||
|
||
Ein durchgehender Bogen zeigt einen Stand, eine Reihe zeigt
|
||
SCHRITTE -- und Zeit besteht aus Schritten. Die Stunde bekommt
|
||
zwoelf Balken (ein Zifferblatt hat zwoelf), Minute und Sekunde
|
||
sechzig. Das erste Glied gehoert dem Wert 0: Bei 0 Sekunden
|
||
leuchtet eines, bei 59 alle sechzig. Ein Ring, der bei null
|
||
voellig leer ist, sieht eine Sekunde lang aus wie ein
|
||
Ladefehler. */
|
||
const gesamt = GLIEDER[welcher];
|
||
/* ABRUNDEN, NICHT RUNDEN -- der Unterschied ist ein ganzer Balken.
|
||
|
||
`Math.round` haette bei Minute und Stunde ab der HAELFTE
|
||
aufgerundet: Um 14:30 lief der Stundenring auf 2 + 0,5 = 2,5,
|
||
gerundet 3, plus eins = VIER Balken -- obwohl erst die dritte
|
||
Stunde laeuft. Dasselbe im Minutenring ab Sekunde 30. Die Uhr
|
||
war damit die halbe Zeit ueber einen Balken zu weit, und zwar
|
||
gerade dann nicht, wenn man hinsieht (zur vollen Stunde stimmte
|
||
sie). Nachgerechnet, nicht geschaetzt: 10:30 -> 11 Balken,
|
||
14:30 -> 3, 23:59 -> 12, 00:00 -> 1.
|
||
|
||
Bei der Sekunde macht es keinen Unterschied (sk ist ganz), bei
|
||
den anderen beiden ist es der ganze Unterschied. */
|
||
const n = Math.min(Math.floor(anteil * gesamt) + 1, gesamt);
|
||
const muster = punktMuster(U, n, gesamt, GLIED_LAENGE[welcher]);
|
||
|
||
/* JEDES GLIED SITZT AUF SEINER ZAHL, ES BEGINNT NICHT DORT
|
||
(09.09.2026, screen2).
|
||
|
||
Filipe: "oben in der mitte ist auch mittag, die stunden sehen
|
||
bissl verschoben aus."
|
||
|
||
Er hatte recht, und es ist ausrechenbar. Ein Strichmuster
|
||
beginnt bei Position null -- der erste Balken lief also von 12
|
||
Uhr aus im Uhrzeigersinn weg, statt unter der Zwoelf zu stehen.
|
||
Sein MITTELPUNKT lag damit um eine halbe Balkenlaenge daneben:
|
||
|
||
Stunde 10 von 197,92 Umfang -> 9,09 Grad
|
||
Minute 1,7 von 241,90 -> 1,27 Grad
|
||
Sekunde 0,01 von 285,88 -> 0,006 Grad
|
||
|
||
Deshalb faellt es nur bei den Stunden auf: Neun Grad sieht man,
|
||
eineinviertel nicht. Der Fehler steckte aber in allen dreien --
|
||
und genau so etwas faellt beim naechsten Umbau auf die Fuesse,
|
||
wenn die Glieder laenger werden.
|
||
|
||
Eine halbe Gliedlaenge zurueck, und jedes Glied steht mittig
|
||
auf seiner Zahl. `dashoffset` ist dabei POSITIV: Ein positiver
|
||
Wert schiebt das Muster rueckwaerts (siehe die Begruendung am
|
||
Kopf weiter unten, wo es aus demselben Grund negativ ist). */
|
||
const halb = GLIED_LAENGE[welcher] / 2;
|
||
for (const el of lagen[welcher]) {
|
||
el.style.strokeDasharray = muster;
|
||
el.style.strokeDashoffset = halb.toFixed(3);
|
||
}
|
||
|
||
/* DAS LETZTE GLIED, EINZELN (09.09.2026, screen5).
|
||
|
||
Filipe: "immer der letzte soll mehr strahlen oder so."
|
||
|
||
Vorher liefen dafuer drei HTML-Perlen auf eigenen Bahnen -- mit
|
||
einer EIGENEN Winkelrechnung. Zwei Rechnungen fuer denselben
|
||
Ort sind zwei Gelegenheiten auseinanderzulaufen, und genau das
|
||
ist am 08.09. passiert: Die Bahnen tauschten die Farben, die
|
||
Perlen nicht.
|
||
|
||
Jetzt zeichnet eine zweite Lage GENAU EIN Glied, aus denselben
|
||
Zahlen wie die Reihe darunter: Laenge unveraendert, alles
|
||
andere Luecke, Anfang um (n-1) Schritte verschoben.
|
||
|
||
`dashoffset` ist NEGATIV, und das ist keine Willkuer: Ein
|
||
positiver Wert schiebt das Muster rueckwaerts, der Strich
|
||
erschiene frueher. Um ihn bei p BEGINNEN zu lassen, braucht es
|
||
-p. */
|
||
const kopf = koepfe[welcher];
|
||
if (kopf) {
|
||
const schritt = U / gesamt;
|
||
const laenge = GLIED_LAENGE[welcher];
|
||
kopf.style.strokeDasharray = `${laenge} ${(U - laenge).toFixed(3)}`;
|
||
/* Derselbe Versatz wie bei der Reihe darunter -- sonst saesse der
|
||
Kopf um eine halbe Gliedlaenge neben seinem eigenen Glied. Zwei
|
||
Rechnungen fuer denselben Ort waren an dieser Stelle schon
|
||
einmal der Fehler. */
|
||
kopf.style.strokeDashoffset = `${(halb - (n - 1) * schritt).toFixed(3)}`;
|
||
}
|
||
};
|
||
|
||
const takt = () => {
|
||
const j = new Date();
|
||
const std = j.getHours(), min = j.getMinutes(), sk = j.getSeconds();
|
||
zeit.textContent = `${p(std)}:${p(min)}`;
|
||
sek.textContent = p(sk);
|
||
|
||
/* JEDER RING LAEUFT WEICH IN SEINER EIGENEN EINHEIT.
|
||
|
||
Die Sekunde springt (sie ist die Anzeige selbst), Minute und
|
||
Stunde nicht: Ein Minutenring, der einmal pro Minute einen
|
||
Sprung macht, sieht aus wie eine haengende Anzeige. Er bekommt
|
||
deshalb die Sekunden anteilig dazu -- und die Stunde die
|
||
Minuten. Genau das hat Filipe verlangt ("die minuten sollen
|
||
auch den minuten entsprechen mitlaufen").
|
||
|
||
Die Stunde ueber ZWOELF, nicht ueber 24: Ein Zifferblatt hat
|
||
zwoelf Stunden, und der Ring soll sich wie eines lesen. */
|
||
setze('sekunde', sk / 60);
|
||
|
||
/* HIER STAND DIE PERLENRECHNUNG -- 60 Zeilen, und sie ist mit den
|
||
Perlen zusammen weggefallen (09.09.2026, screen5).
|
||
|
||
Sie war ein Lehrstueck fuer sich: eine eigene Uhr ab dem ersten
|
||
Takt, weil die volle Unixzeit `rotate(1.07333e+10deg)` ergab und
|
||
die Nachkommastellen verlor; ein Startwinkel je Bahn; drei
|
||
Winkel, die die kleineren Einheiten anteilig mittragen mussten,
|
||
damit kein Kopf neben dem Ende seines Bogens steht.
|
||
|
||
All das war noetig, WEIL der Kopf ein zweites Ding an einer
|
||
zweiten Stelle war. Er ist jetzt das letzte Glied der Bahn
|
||
selbst und wird von derselben Funktion aus denselben Zahlen
|
||
gesetzt (siehe `setze`). Damit kann er gar nicht mehr
|
||
danebenstehen -- nicht weil die Rechnung besser ist, sondern
|
||
weil es nur noch eine gibt.
|
||
|
||
Der Rest, der hier stand (nullpunkt, startWinkel, minStart,
|
||
stdStart, sekStart), wird nirgends sonst gebraucht und ist
|
||
ebenfalls weg. Eine Variable, die nur noch gepflegt wird, ist
|
||
eine Falle fuer den naechsten Leser. */
|
||
setze('minute', (min + sk / 60) / 60);
|
||
setze('stunde', ((std % 12) + min / 60) / 12);
|
||
|
||
/* Der volle Zeitpunkt fuer Vorleseprogramme -- sichtbar steht dort
|
||
nur die Uhrzeit, vorgelesen wird der ganze Satz. */
|
||
const uhr = $('uhr');
|
||
if (uhr) uhr.setAttribute('aria-label', `${p(std)}:${p(min)} Uhr`);
|
||
|
||
/* KEIN setInterval(1000). Ein fester Takt laeuft mit der Zeit aus
|
||
dem Tritt (jeder Durchlauf kostet Millisekunden) und
|
||
ueberspringt dann gelegentlich eine Sekunde. Gewartet wird bis
|
||
zur naechsten VOLLEN Sekunde -- die Anzeige bleibt fuer immer im
|
||
Takt der Systemuhr. */
|
||
setTimeout(takt, 1000 - (Date.now() % 1000) + 8);
|
||
};
|
||
takt();
|
||
}
|
||
|
||
function grussZeigen() {
|
||
const jetzt = new Date();
|
||
const stunde = jetzt.getHours();
|
||
|
||
$('datum').textContent =
|
||
`${WOCHENTAGE[jetzt.getDay()]}, ${jetzt.getDate()}. ${MONATE[jetzt.getMonth()]}`
|
||
+ ` · KW ${kalenderwoche(jetzt)}`;
|
||
|
||
const marker = TAGESMARKER[jetzt.getDay()];
|
||
const mEl = $('tagesmarker');
|
||
if (marker) { mEl.textContent = marker; mEl.hidden = false; }
|
||
|
||
/* Feiner gestuft als vorher: Wer um kurz nach Mitternacht reinkommt,
|
||
liest nicht "Guten Abend", und wer um 13 Uhr kommt, nicht "Morgen". */
|
||
const tageszeit =
|
||
stunde < 5 ? 'Noch wach' :
|
||
stunde < 11 ? 'Guten Morgen' :
|
||
stunde < 14 ? 'Guten Mittag' :
|
||
stunde < 18 ? 'Guten Tag' :
|
||
stunde < 22 ? 'Guten Abend' : 'Späten Abend';
|
||
|
||
/* Der Name ist das Wichtigste an der Zeile und wird deshalb getrennt
|
||
ausgezeichnet -- der Gruß leiser, der Name kräftig. */
|
||
const g = $('gruss');
|
||
g.textContent = '';
|
||
g.append(el('span', 'gruss__wort', tageszeit + ', '));
|
||
g.append(el('span', 'gruss__name', ich.name));
|
||
|
||
/* Die Plakette: das eigene Bild, sonst der erste Buchstabe in der
|
||
Farbe der Rolle. Dieselbe Zuordnung wie im Kopf der Seite, damit
|
||
nichts auseinanderläuft.
|
||
|
||
DAS BILD FEHLTE HIER BIS ZUM 01.09.2026 -- und das ist ein
|
||
lehrreicher Fehler: Der Server liefert es längst mit, und im
|
||
Quelltext dort steht sogar ausdrücklich "es steht in der
|
||
Kopfleiste JEDER Seite UND IN DER BEGRÜSSUNG". Die Absicht war
|
||
aufgeschrieben, die Hälfte davon nie gebaut. Aufgefallen ist es
|
||
nicht, weil ein Buchstabe in einem Kreis nicht falsch aussieht --
|
||
nur eben nicht wie man selbst.
|
||
|
||
Ein Kommentar ist kein Beweis. Deshalb prüft pruef-start-ansicht
|
||
das jetzt mit einem echten Bild nach. */
|
||
const p = $('plakette');
|
||
p.textContent = '';
|
||
p.dataset.rolle = ich.rolle; /* die Plakette bleibt DEINE */
|
||
if (ich.bild) {
|
||
const b = el('img', 'willkommen__foto');
|
||
b.src = ich.bild;
|
||
b.alt = '';
|
||
/* Geht das Bild verloren (gelöschte Datei, kein Netz), erscheint
|
||
sonst ein kaputtes Bildsymbol. Dann lieber zurück zum
|
||
Buchstaben -- der ist immer richtig. */
|
||
b.addEventListener('error', () => {
|
||
b.remove();
|
||
p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
|
||
});
|
||
p.append(b);
|
||
} else {
|
||
p.textContent = (ich.name || '?').trim().charAt(0).toUpperCase();
|
||
}
|
||
|
||
/* Die Zeile unter dem Gruss sagt, WESSEN Arbeitsplatz man sieht.
|
||
Bei der eigenen Sicht wie bisher die eigene Rolle; bei fremder
|
||
Sicht der Name davor -- sonst liest man "Creator, dein eigener
|
||
Bereich" und haelt es fuer die eigene Lage. */
|
||
/* DER NAME DER EIGENEN ROLLE KOMMT NOTFALLS VOM SERVER (09.09.2026).
|
||
|
||
ROLLENTEXT steht in einer Datei, die JEDER bekommt, der die Seite
|
||
oeffnet -- auch jeder Manager, jeder Scout, jeder Creator. Eine
|
||
Rolle, von der ausser DogFather niemand wissen soll, darf deshalb
|
||
nicht darin stehen: Ein Blick in den Quelltext wuerde genuegen.
|
||
|
||
`rolle_name` kommt dagegen aus /workspace/api/ich und beschreibt
|
||
immer nur EINEN Menschen -- den, der gerade angemeldet ist. Wer
|
||
Manager ist, liest dort "Manager" und sonst nichts.
|
||
|
||
Die Reihenfolge ist Absicht: erst das ausfuehrliche Wort aus der
|
||
Liste (mit dem erklaerenden Zusatz dahinter), dann der Name vom
|
||
Server, zuletzt der nackte Schluessel. So aendert sich fuer die
|
||
fuenf bekannten Rollen nichts. */
|
||
/* DIE ZIERZEILE UEBER DEM TITEL (10.09.2026).
|
||
|
||
Sie nennt den Betrieb -- fest "Spicy Media" in start.html. Das
|
||
stimmt nicht fuer jeden, der hier arbeitet; wo es nicht stimmt,
|
||
schickt der Server den passenden Namen mit. WER das ist, steht
|
||
ausdruecklich nicht in dieser Datei: Sie bekommt jeder, der die
|
||
Seite oeffnet.
|
||
|
||
ERSETZT WIRD NUR DER TEXTKNOTEN, nicht der ganze Inhalt: In dem
|
||
Element sitzen zwei <i class="zraute"> als Zierrauten links und
|
||
rechts. Ein textContent darauf haette sie geloescht -- und zwar
|
||
lautlos, denn eine fehlende Raute sieht nicht nach Fehler aus,
|
||
sondern nach Absicht. Ein neues Element drumherum waere die
|
||
andere naheliegende Loesung und aendert die Flex-Aufteilung; das
|
||
hier aendert am Aufbau gar nichts. */
|
||
if (ich.marke) {
|
||
const marke = document.querySelector('.zmarke');
|
||
if (marke) {
|
||
for (const knoten of marke.childNodes) {
|
||
if (knoten.nodeType === 3 && knoten.textContent.trim()) {
|
||
knoten.textContent = ` ${ich.marke} `;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* DER GROSSE TITEL DARUNTER (24.09.2026).
|
||
|
||
Er sagt, WO man ist. In der Seite steht "Zentrale" -- das gilt
|
||
fuer das Agenturhaus. Fuer das Teamhaus schickt der Server ein
|
||
eigenes Wort, aus demselben Grund wie bei der Marke darueber:
|
||
Was nur dieses Haus angeht, gehoert nicht in eine Datei, die
|
||
jeder Creator herunterlaedt.
|
||
|
||
NUR ERSETZEN, WENN ETWAS KOMMT. Ohne Angabe bleibt stehen, was
|
||
in der Seite steht. Ein leerer Titel waere das Schlimmste von
|
||
beidem: Die groesste Schrift der Seite stuende leer da, und
|
||
niemand koennte sagen, ob das ein Fehler ist oder Absicht. */
|
||
if (ich.titel) {
|
||
const titel = $('ztitel');
|
||
if (titel) titel.textContent = ich.titel;
|
||
}
|
||
|
||
/* JETZT DUERFEN SIE GESEHEN WERDEN (27.09.2026).
|
||
|
||
Bis hierher waren Marke und Titel durchsichtig -- in der Seite
|
||
steht die Vorgabe des Agenturhauses, und die hat im Teamhaus
|
||
nichts verloren. Ab hier steht entweder das Wort des Servers
|
||
da oder die Vorgabe, und beide sind dann richtig.
|
||
|
||
AUCH OHNE ANGABE WEGNEHMEN: Das Agenturhaus bekommt keinen
|
||
eigenen Titel geschickt, dort gilt die Vorgabe. Wer das
|
||
Wegnehmen an `ich.titel` haengt, laesst die groesste Schrift
|
||
der Seite ausgerechnet dort unsichtbar. */
|
||
for (const e of document.querySelectorAll('[data-wartet]')) {
|
||
e.removeAttribute('data-wartet');
|
||
}
|
||
|
||
$('rollentext').textContent = ich.sicht
|
||
? `Arbeitsplatz von ${ich.sicht.name} · `
|
||
+ `${ROLLENTEXT[zeigt.rolle] || ich.sicht.rolle_name || zeigt.rolle}`
|
||
: (ROLLENTEXT[ich.rolle] || ich.rolle_text || ich.rolle_name || ich.rolle);
|
||
|
||
/* Datum und Rolle in der Anrede -- wie im Vorbild, wo unter "Noch
|
||
wach, Dogi" das Datum steht und daneben "ADMIN & PARTNER".
|
||
|
||
Das Datum steht damit ZWEIMAL auf der Kachel: oben in der
|
||
Zierzeile mit KW, hier ohne. Das ist Absicht und keine Doppelung:
|
||
Oben gehoert es zur Tafel ("welcher Tag ist heute"), hier zur
|
||
Anrede ("wann begruesse ich dich"). Im Vorbild ist es genauso,
|
||
und es liest sich dort natuerlich. Faellt es Filipe als Doppelung
|
||
auf, kommt die Zierzeile oben weg -- nicht diese Zeile. */
|
||
const jetzt2 = new Date();
|
||
const dat = $('zgruss-datum');
|
||
if (dat) {
|
||
dat.textContent = `${WOCHENTAGE[jetzt2.getDay()]}, `
|
||
+ `${jetzt2.getDate()}. ${MONATE[jetzt2.getMonth()]}`;
|
||
}
|
||
const rolleEl = $('zgruss-rolle');
|
||
if (rolleEl) {
|
||
/* Aus demselben Grund wie oben: Steht die Rolle nicht in der
|
||
Liste, fragt die Plakette den Server -- aber nur fuer die
|
||
EIGENE Sicht. In einer fremden Sicht gibt es kein rolle_name
|
||
zu dieser Person, und etwas anderes hinzuschreiben waere
|
||
geraten. */
|
||
const eigene = !ich.sicht;
|
||
rolleEl.textContent = (ROLLEN_KURZ[zeigt.rolle]
|
||
|| (eigene ? ich.rolle_name : '') || zeigt.rolle || '').toUpperCase();
|
||
rolleEl.hidden = false;
|
||
}
|
||
}
|
||
|
||
/* Kurzform der Rolle fuer die Plakette neben dem Namen. Der lange
|
||
Text ("Gesamtuebersicht und Freigaben") steht schon darunter --
|
||
hier braucht es das Wort, nicht die Erklaerung. */
|
||
const ROLLEN_KURZ = {
|
||
admin: 'DogFather', manager: 'Manager', scout: 'Scout',
|
||
creator: 'Creator', spicy: 'Spicy Media',
|
||
};
|
||
|
||
/* Ein Satz zur Lage -- gerechnet aus denselben Hinweisen, die darunter
|
||
stehen. Keine zweite Zählung, sonst gäbe es irgendwann zwei
|
||
Wahrheiten auf einem Bildschirm. */
|
||
function lageZeigen() {
|
||
const el2 = $('lage');
|
||
const gesamt = hinweise.reduce((s, h) => s + h.anzahl, 0);
|
||
const dringend = hinweise.filter((h) => h.stufe === 'warnung')
|
||
.reduce((s, h) => s + h.anzahl, 0);
|
||
|
||
let satz, stufe;
|
||
if (dringend > 0) {
|
||
satz = `${dringend} ${dringend === 1 ? 'Sache ist' : 'Sachen sind'} überfällig – das zuerst.`;
|
||
stufe = 'warnung';
|
||
} else if (gesamt > 0) {
|
||
satz = `${gesamt} ${gesamt === 1 ? 'Punkt steht' : 'Punkte stehen'} an, nichts davon brennt.`;
|
||
stufe = 'offen';
|
||
} else {
|
||
/* „VORARBEITEN" IST ARBEITSSPRACHE (18.09.2026).
|
||
|
||
Fuer jemanden mit Aufgabenliste ist der Satz richtig. Ein
|
||
Mitglied der Community arbeitet hier aber nicht vor -- es
|
||
schaut vorbei. Derselbe Satz fuer beide waere fuer die eine
|
||
Haelfte eine Aufforderung, die es nicht einloesen kann. */
|
||
satz = hatArbeitsplatz()
|
||
? 'Nichts liegt an – guter Tag zum Vorarbeiten.'
|
||
: 'Gerade ist nichts los. Guter Moment, um zu stöbern.';
|
||
stufe = 'ruhig';
|
||
}
|
||
el2.textContent = satz;
|
||
el2.dataset.stufe = stufe;
|
||
el2.hidden = false;
|
||
|
||
standSetzen('offen', gesamt === 0 ? '0' : String(gesamt), stufe);
|
||
}
|
||
|
||
/* ---------- Der Ring links ----------------------------------------------
|
||
Nach dem Vorbild von VanVans Werktisch. Zwei Bahnen:
|
||
|
||
INNEN eine feine Bahn mit EINEM Segment je Person (bzw. je
|
||
Stunde), eingefaerbt nach Lage -- dort sieht man jedes
|
||
Einzelne.
|
||
AUSSEN ein durchgehender Bogen, der GENAU auf der Prozentzahl in
|
||
der Mitte steht.
|
||
|
||
Die Trennung ist aus dem Vorbild uebernommen, samt Begruendung:
|
||
Dort zeigte der Ring erst die 162 Produkte je einzeln, und der
|
||
Anteil des Blauen entsprach dann der Zahl der fertigen AKTEN (44 %),
|
||
waehrend daneben die Zahl der erfuellten ANGABEN (91 %) stand. Zwei
|
||
Auskuenfte, die sich widersprechen, sind schlimmer als eine.
|
||
Deshalb: der Bogen sagt dasselbe wie die Zahl, immer. */
|
||
|
||
const RING_FARBE = {
|
||
frei: '#57b89b', /* nichts offen -- gedaempftes Petrol, kein Grasgruen */
|
||
dran: '#7fc4f2', /* heute versorgt */
|
||
offen: '#ff6b74', /* liegt liegen */
|
||
};
|
||
|
||
function bogen(cx, cy, r, von, bis) {
|
||
const x1 = cx + r * Math.cos(von), y1 = cy + r * Math.sin(von);
|
||
const x2 = cx + r * Math.cos(bis), y2 = cy + r * Math.sin(bis);
|
||
const gross = bis - von > Math.PI ? 1 : 0;
|
||
return `M ${x1.toFixed(2)} ${y1.toFixed(2)} A ${r} ${r} 0 ${gross} 1 ${x2.toFixed(2)} ${y2.toFixed(2)}`;
|
||
}
|
||
const svgEl = (name, attr) => {
|
||
const n = document.createElementNS('http://www.w3.org/2000/svg', name);
|
||
for (const [k, v] of Object.entries(attr)) n.setAttribute(k, v);
|
||
return n;
|
||
};
|
||
|
||
function ringZeichnen(daten) {
|
||
const svg = $('zring-bild');
|
||
if (!svg) return;
|
||
svg.replaceChildren();
|
||
const segmente = daten.segmente || [];
|
||
|
||
/* Der Verlauf fuer den Fortschrittsbogen -- eine Reise von Rot nach
|
||
Babyblau, dieselben zwei Farben wie in der Uhr daneben und im
|
||
Rahmen der Kachel. Keine dritte Handschrift. */
|
||
const defs = svgEl('defs', {});
|
||
const lauf = svgEl('linearGradient', { id: 'zring-lauf', x1: '0', y1: '0', x2: '1', y2: '1' });
|
||
for (const [o, f] of [['0%', '#ff5f6d'], ['46%', '#c07ad0'], ['100%', '#7fc4f2']]) {
|
||
lauf.appendChild(svgEl('stop', { offset: o, 'stop-color': f }));
|
||
}
|
||
defs.appendChild(lauf);
|
||
svg.appendChild(defs);
|
||
|
||
/* DIE RADIEN FUELLEN JETZT DEN KASTEN (09.09.2026, screen1).
|
||
|
||
Filipe: "der kreis soll die gleiche groesse wie die uhr haben."
|
||
|
||
Nachgemessen waren beide Kaesten schon exakt gleich gross
|
||
(248 x 248) -- der gezeichnete Ring aber nicht: Sein aeusserer
|
||
Bogen lag bei Radius 128 von 150, plus 4,5 halbe Strichbreite
|
||
also bei 132,5. Das sind 88 Prozent des Kastens, gerendert 219
|
||
statt 248 px. Die Uhr daneben fuellt ihren Kasten dagegen ganz
|
||
aus (ihr Leuchtkranz ragt sogar 7 px darueber hinaus). Zwei
|
||
gleich grosse Kaesten mit ungleich grossem Inhalt sehen ungleich
|
||
gross aus, und genau das war zu sehen.
|
||
|
||
Jetzt 145 statt 128 (aussen) und 120 statt 106 (die Segmente) --
|
||
dasselbe Verhaeltnis zueinander, nur bis an den Rand. 145 + 4,5
|
||
= 149,5 von 150: ein halber Pixel Luft, damit die runde Kappe
|
||
nicht abgeschnitten wird. */
|
||
const R_AUSSEN = 145;
|
||
const R_SEGMENTE = 120;
|
||
|
||
/* 1. Die leere Bahn zuerst -- damit der Ring auch bei 0 % ein Ring
|
||
ist und nicht ein Punkt. */
|
||
svg.appendChild(svgEl('path', {
|
||
d: bogen(150, 150, R_AUSSEN, 0, Math.PI * 1.9999),
|
||
stroke: 'rgba(120, 150, 185, .16)', 'stroke-width': '9',
|
||
fill: 'none', 'stroke-linecap': 'round',
|
||
}));
|
||
|
||
/* 2. Ein Segment je Person (oder Stunde), innen. Mit Luecke
|
||
dazwischen, sonst verschmelzen sie zu einem Ring und man
|
||
zaehlt nichts mehr. */
|
||
if (segmente.length) {
|
||
const schritt = (Math.PI * 2) / segmente.length;
|
||
const luecke = Math.min(schritt * 0.22, 0.06);
|
||
segmente.forEach((s, i) => {
|
||
const von = i * schritt + luecke / 2;
|
||
const bis = (i + 1) * schritt - luecke / 2;
|
||
const st = svgEl('path', {
|
||
d: bogen(150, 150, R_SEGMENTE, von, bis),
|
||
stroke: RING_FARBE[s.stufe] || '#8fb3cf',
|
||
'stroke-width': '7', fill: 'none', 'stroke-linecap': 'round',
|
||
opacity: s.stufe === 'offen' ? '.95' : '.72',
|
||
});
|
||
/* Der Name als Sprechblase. Nur der Vorname, und nur das, was
|
||
der Server ohnehin geschickt hat -- der Browser erfaehrt
|
||
nichts, was er nicht sehen darf. */
|
||
const titel = document.createElementNS('http://www.w3.org/2000/svg', 'title');
|
||
titel.textContent = s.name || '';
|
||
st.appendChild(titel);
|
||
svg.appendChild(st);
|
||
});
|
||
}
|
||
|
||
/* 3. Der Fortschrittsbogen aussen, genau auf der Prozentzahl. */
|
||
const anteil = Math.max(0, Math.min(100, Number(daten.prozent) || 0));
|
||
const bis = (anteil / 100) * Math.PI * 2;
|
||
if (bis > 0.01) {
|
||
const d = bogen(150, 150, R_AUSSEN, 0, Math.min(bis, Math.PI * 1.9999));
|
||
svg.appendChild(svgEl('path', {
|
||
d, stroke: 'url(#zring-lauf)', 'stroke-width': '9',
|
||
fill: 'none', 'stroke-linecap': 'round',
|
||
}));
|
||
/* Ein heller Punkt an der Spitze macht aus dem Bogen einen
|
||
Zeiger -- er markiert den Stand so genau, wie die Zahl es sagt. */
|
||
const px = 150 + R_AUSSEN * Math.cos(bis), py = 150 + R_AUSSEN * Math.sin(bis);
|
||
svg.appendChild(svgEl('circle', { cx: px, cy: py, r: '3.4', fill: '#eaf4ff' }));
|
||
}
|
||
|
||
/* `mitte` schlaegt die Prozentzahl, wenn der Server eine schickt.
|
||
Fuer die Community steht dort die Zahl der Termine -- „2" sagt
|
||
mehr als „50 %", und bei null Terminen waere jede Prozentangabe
|
||
eine Behauptung ueber nichts. Fehlt das Feld, bleibt alles wie
|
||
bisher. */
|
||
$('zring-prozent').textContent = daten.mitte ? String(daten.mitte) : `${anteil} %`;
|
||
$('zring-unter').textContent = daten.titel || '';
|
||
}
|
||
|
||
/* WENN DER RING NICHTS ZU SAGEN HAT, SAGT ER DAS (19.09.2026).
|
||
|
||
Vorher stand hier ein frueher `return`. Der liess die Startwerte
|
||
aus dem HTML unberuehrt -- und die lauten "–" und "wird geladen".
|
||
Bei einer 503 blieb mitten auf der Startseite dauerhaft ein leerer
|
||
Ring mit "wird geladen" stehen.
|
||
|
||
Das ist genau der Fall, den dieselbe Datei an anderer Stelle schon
|
||
richtig macht ("Auch der leere Fall wird GESETZT, nicht
|
||
uebersprungen"). Ein Platzhalter, der nie ersetzt wird, ist eine
|
||
Luege mit Fortschrittsanzeige. */
|
||
function ringStumm() {
|
||
const p = $('zring-prozent'), u = $('zring-unter');
|
||
if (p) p.textContent = '–';
|
||
if (u) u.textContent = 'gerade nicht abrufbar';
|
||
const ring = $('zring');
|
||
if (ring) ring.dataset.stumm = 'ja';
|
||
}
|
||
|
||
async function zentraleLaden() {
|
||
let daten;
|
||
try {
|
||
const antwort = await fetch('/workspace/api/zentrale', { credentials: 'same-origin' });
|
||
if (!antwort.ok) { ringStumm(); return; }
|
||
daten = await antwort.json();
|
||
} catch { ringStumm(); return; } /* Der Rest der Kachel steht trotzdem. */
|
||
|
||
ringZeichnen(daten);
|
||
|
||
/* Die drei Zahlen unter dem Titel kommen bei Leitung aus derselben
|
||
Antwort -- eine Abfrage, eine Wahrheit. Fuer die Tagesansicht
|
||
fuellen `lageZeigen` und `tagestermineLaden` sie weiter; deshalb
|
||
wird hier nur ueberschrieben, was der Server auch geschickt hat. */
|
||
const zahlen = daten.zahlen || [];
|
||
const felder = ['heute', 'naechster', 'offen'];
|
||
zahlen.slice(0, 3).forEach((z, i) => {
|
||
const wert = $('stand-' + felder[i]);
|
||
const schild = wert?.parentElement?.querySelector('.stand__schild');
|
||
if (!wert || !schild) return;
|
||
wert.textContent = String(z.wert);
|
||
schild.textContent = z.schild;
|
||
/* Die Farbe folgt der Bedeutung, nicht der Position: Was liegen
|
||
bleibt, ist rot -- egal an welcher Stelle es steht. */
|
||
const kasten = wert.closest('.stand');
|
||
if (kasten) {
|
||
kasten.dataset.stufe = /liegt|offen|fehlt/i.test(z.schild)
|
||
? (Number(z.wert) > 0 ? 'warnung' : 'ruhig') : '';
|
||
}
|
||
});
|
||
if (zahlen.length) {
|
||
standVonZentrale = true;
|
||
$('tagesstand').hidden = false;
|
||
}
|
||
}
|
||
|
||
/* ---------- Die drei Ablesungen in der Konsolenmitte --------------------- */
|
||
|
||
/* EINE Funktion fuer alle drei, und sie wird von den STELLEN gerufen,
|
||
die die Zahl ohnehin schon haben -- lageZeigen() und
|
||
tagestermineLaden(). Hier wird nichts nachgezaehlt: Zwei Rechenwege
|
||
fuer dieselbe Zahl laufen auseinander, und dann stehen zwei
|
||
Wahrheiten auf einem Bildschirm.
|
||
|
||
Der Kasten geht auf, sobald die ERSTE Zahl da ist. Er wartet nicht
|
||
auf beide: Wer nichts Offenes hat, aber drei Calls, soll seinen Tag
|
||
sehen, auch wenn die andere Abfrage haengt. Genau diesen Fehler hat
|
||
die Kachel darunter schon einmal gemacht. */
|
||
/* WER DIE FELDER BESETZT HAT, BEHAELT SIE (08.09.2026).
|
||
|
||
Seit der Ring da ist, schreiben ZWEI Quellen in dieselben drei
|
||
Felder: `zentraleLaden` (bei Leitung: im Team / heute dran / liegt
|
||
liegen) und `lageZeigen` + `tagestermineLaden` (Heute / Als
|
||
Naechstes / Offen). Beide laufen nebeneinander los -- wer zuletzt
|
||
ankommt, haette gewonnen, und das waere bei jedem Laden eine andere.
|
||
|
||
Ein Bildschirm, auf dem "heute dran: 2" steht und beim naechsten
|
||
Aufruf "Heute: 5", ist schlimmer als einer, der weniger zeigt.
|
||
Deshalb: Hat die Zentrale die Felder belegt, ruehrt sie niemand
|
||
mehr an. Die Reihenfolge des Eintreffens spielt dann keine Rolle. */
|
||
let standVonZentrale = false;
|
||
|
||
function standSetzen(welches, wert, stufe) {
|
||
if (standVonZentrale) return;
|
||
const feld = $('stand-' + welches);
|
||
if (!feld) return;
|
||
feld.textContent = wert;
|
||
if (stufe) feld.closest('.stand')?.setAttribute('data-stufe', stufe);
|
||
const kasten = $('tagesstand');
|
||
if (kasten) kasten.hidden = false;
|
||
}
|
||
|
||
/* ---------- Laden -------------------------------------------------------- */
|
||
|
||
async function laden() {
|
||
try {
|
||
const antwort = await fetch('/workspace/api/ich', { credentials: 'same-origin' });
|
||
if (!antwort.ok) { location.assign('/workspace/'); return; }
|
||
ich = await antwort.json();
|
||
} catch {
|
||
/* EIN FUNKLOCH IST KEIN RAUSWURF (20.09.2026).
|
||
------------------------------------------------------------
|
||
Hier stand `location.assign('/workspace/')` -- also: Netz kurz
|
||
weg, und der Mensch landet auf der Anmeldeseite. Er glaubt
|
||
dann, er sei rausgeworfen worden, und tippt seinen Code neu
|
||
ein. Im Aufzug, in der Bahn, im Funkloch.
|
||
|
||
Dabei ist er gar nicht abgemeldet: Die Sitzung haelt 12
|
||
Stunden. Nur die Anfrage ist nicht durchgekommen.
|
||
|
||
Umgeleitet wird deshalb nur noch bei einer ANTWORT, die das
|
||
sagt (401 -- die Zeile darueber). Ein Fehler ohne Antwort ist
|
||
ein Netzfehler, und der bekommt einen Satz und einen Knopf. */
|
||
window.ladefehler?.({
|
||
satz: 'Deine Startseite konnte gerade nicht geladen werden.',
|
||
grund: 'Du bist weiterhin angemeldet – es fehlt nur die Verbindung.',
|
||
nochmal: laden,
|
||
});
|
||
return;
|
||
}
|
||
|
||
/* Die Sicht steht in der Antwort von /api/ich. Ohne sie ist `zeigt`
|
||
schlicht die eigene Person -- der Normalfall. */
|
||
zeigt = ich.sicht || ich;
|
||
|
||
window.werZeigen?.(ich);
|
||
grussZeigen();
|
||
uhrStarten();
|
||
|
||
/* Die Hinweise zuerst -- die Kacheln brauchen ihre Zahlen.
|
||
Die Tagestermine laufen daneben her: Sie sind die rechte Hälfte
|
||
derselben Kachel, aber niemand soll auf sie warten. Scheitern
|
||
sie, steht die linke Hälfte trotzdem. */
|
||
/* Der Ring laeuft daneben her, wie die Tagestermine: Er ist die
|
||
linke Spalte der Kachel, aber niemand soll auf ihn warten.
|
||
Scheitert er, steht der Rest trotzdem. */
|
||
const ringLaeuft = zentraleLaden();
|
||
|
||
const termineLaeuft = tagestermineLaden();
|
||
await hinweiseLaden();
|
||
/* KEIN `await ringLaeuft` HIER (08.09.2026).
|
||
|
||
Genau das stand kurz an dieser Stelle, und pruef-start-ansicht
|
||
wurde daraufhin dreimal rot -- nicht am Ring, sondern am
|
||
MAUS-LICHT auf den Kacheln weiter unten. Der Grund: Alles, was
|
||
nach diesem `await` kommt, wartet mit. Der Ring braucht eine
|
||
Server-Abfrage, und in der Zeit war das Licht noch nicht
|
||
eingehaengt, als die Pruefung mit dem Zeiger darueberfuhr.
|
||
|
||
Gemessen, nicht vermutet: derselbe Lauf am alten Stand meldete
|
||
null Befunde, mit dem `await` drei. Ein zusaetzliches `await` in
|
||
einer Ladefolge ist nie nur eine Verzoegerung fuer sich selbst --
|
||
es verzoegert alles dahinter. */
|
||
await termineLaeuft;
|
||
/* Erst jetzt steht fest, wie die Lage ist. */
|
||
lageZeigen();
|
||
bereicheBauen();
|
||
await zahlenLaden();
|
||
}
|
||
|
||
/* Was ist dran? Erster Baustein der Automationen aus dem Konzept.
|
||
Fuehrt bewusst keine eigenen Daten -- jeder Hinweis ist nur eine
|
||
Sicht auf etwas, das schon da ist, und verschwindet von selbst,
|
||
sobald die Sache erledigt ist. Nichts zu quittieren. */
|
||
/* HINWEISE OHNE ZAHL (19.09.2026).
|
||
|
||
Vor jedem Hinweis steht seine Anzahl -- das ist richtig, solange
|
||
er Dinge zaehlt ("3 Aufgaben sind ueberfaellig"). Ein Hinweis,
|
||
der einen ZUSTAND beschreibt, zaehlt nichts; eine „1“ davor
|
||
liest sich dort wie ein Zaehlfehler.
|
||
|
||
Die Liste ist seit dem 03.10.2026 leer: Ihr einziger Eintrag war
|
||
„kein_geraet" („Bei dir klingelt nichts"), und der steht jetzt
|
||
als Kasten mit Anschalt-Knopf ueber dieser Liste -- siehe
|
||
workspace-hinweise.js, dort steht auch warum.
|
||
|
||
SIE BLEIBT TROTZDEM STEHEN, leer. Der naechste Zustandshinweis
|
||
braucht sie wieder, und als Liste ist sie die eine Stelle dafuer
|
||
-- ein Sonderfall im Aufbau waere die Stelle, an der es beim
|
||
naechsten Mal wieder schiefgeht. */
|
||
const OHNE_ZAHL = new Set([]);
|
||
|
||
const EINZAHL = {
|
||
aufgaben_ueberfaellig: (n) => `${n} ${n === 1 ? 'Aufgabe ist' : 'Aufgaben sind'} überfällig`,
|
||
aufgaben_heute: (n) => `${n} ${n === 1 ? 'Aufgabe ist' : 'Aufgaben sind'} heute fällig`,
|
||
aufgaben_review: (n) => `${n} ${n === 1 ? 'Aufgabe wartet' : 'Aufgaben warten'} auf Freigabe`,
|
||
termine_heute: (n) => `${n} ${n === 1 ? 'Termin steht' : 'Termine stehen'} heute an`,
|
||
protokoll_fehlt: (n) => `${n} ${n === 1 ? 'Gespräch hat' : 'Gespräche haben'} noch kein Protokoll`,
|
||
dateien_review: (n) => `${n} ${n === 1 ? 'Datei wartet' : 'Dateien warten'} auf Freigabe`,
|
||
bereiche_dringend: (n) => `${n} ${n === 1 ? 'dringender Punkt' : 'dringende Punkte'} in den Bereichen`,
|
||
followup_faellig: (n) => `${n} Follow-up${n === 1 ? '' : 's'} ${n === 1 ? 'ist' : 'sind'} fällig`,
|
||
uebergabe_offen: (n) => `${n} übergebene${n === 1 ? 'r Lead wartet' : ' Leads warten'} auf das Onboarding`,
|
||
review_faellig: (n) => `${n} Review-Termin${n === 1 ? ' ist' : 'e sind'} überfällig`,
|
||
review_bald: (n) => `${n} Review${n === 1 ? ' steht' : 's stehen'} in den nächsten 7 Tagen an`,
|
||
ohne_betreuung: (n) => `${n} Creator ${n === 1 ? 'hat' : 'haben'} noch keine zuständige Person`,
|
||
ohne_profil: (n) => `${n} Creator-Profil${n === 1 ? ' ist' : 'e sind'} noch leer`,
|
||
ohne_startcheck: (n) => `${n} Creator ${n === 1 ? 'hat' : 'haben'} noch keinen Start-Check`,
|
||
startcheck_handlung: (n) => `${n} ${n === 1 ? 'Punkt im Start-Check braucht' : 'Punkte im Start-Check brauchen'} Handlung`,
|
||
/* Diese vier beginnen mit der Zahl, wie alle anderen auch: Die Zeile
|
||
schneidet die führende Zahl ab und zeigt sie getrennt davor. Ein
|
||
Satz, der anders anfängt ("Deine Betreuung hat 3 …"), stünde
|
||
hinter der Marke ein zweites Mal mit der 3 -- kein Fehler, den ein
|
||
Programm meldet, aber einer, den jeder sieht. */
|
||
markiert_live: (n) => `${n} markierte${n === 1 ? 'r Punkt' : ' Punkte'} in der LIVE-Analyse`,
|
||
markiert_content: (n) => `${n} markierte ${n === 1 ? 'Content-Idee' : 'Content-Ideen'}`,
|
||
markiert_community: (n) => `${n} markierte${n === 1 ? 'r Punkt' : ' Punkte'} bei Community`,
|
||
/* Beide beginnen mit der Zahl, wie alle anderen auch -- die
|
||
Zeile schneidet die fuehrende Zahl ab und zeigt sie getrennt
|
||
davor. "Dir fehlen noch 2 Ziele" stuende sonst hinter einer
|
||
zweiten 2. */
|
||
mz_dringend: (n) => `${n} Monatsziel${n === 1 ? '' : 'e'} ${n === 1 ? 'ist' : 'sind'} dringend`,
|
||
mz_offen: (n) => `${n} Monatsziel${n === 1 ? ' ist' : 'e sind'} noch offen`,
|
||
markiert_technik: (n) => `${n} markierte${n === 1 ? 'r Punkt' : ' Punkte'} bei Technik`,
|
||
};
|
||
|
||
async function hinweiseLaden() {
|
||
let daten;
|
||
try {
|
||
const antwort = await fetch('/workspace/api/hinweise', { credentials: 'same-origin' });
|
||
if (!antwort.ok) return;
|
||
daten = await antwort.json();
|
||
} catch { return; }
|
||
|
||
hinweise = daten.hinweise || [];
|
||
const liste = $('dran');
|
||
liste.textContent = '';
|
||
|
||
/* DIE KACHEL HAT ZWEI HÄLFTEN (05.09.2026), und keine darf die
|
||
andere mitreißen.
|
||
|
||
Hier stand `if (!hinweise.length) { block.hidden = true; return; }`
|
||
-- solange die Kachel nur die Hinweise enthielt, war das richtig.
|
||
Jetzt stehen rechts die Termine des Tages: Wer nichts Offenes
|
||
hat, aber drei Calls, hätte seinen Tagesplan nicht mehr gesehen.
|
||
Über das Verstecken entscheidet deshalb tagesblickPruefen(),
|
||
wenn BEIDE Seiten geladen sind. */
|
||
$('dran-leer').hidden = hinweise.length > 0;
|
||
if (!hinweise.length) { tagesblickPruefen(); return; }
|
||
|
||
for (const h of hinweise) {
|
||
const li = el('li', 'dran__punkt');
|
||
li.dataset.stufe = h.stufe;
|
||
|
||
/* Ein Hinweis trägt ZEICHEN UND FARBE der Kachel, zu der er führt.
|
||
Dadurch gehört sichtbar zusammen, was zusammengehört: Wer die
|
||
rote Zeile „2 Aufgaben sind überfällig" sieht, erkennt weiter
|
||
unten dieselbe Farbe und dasselbe Zeichen auf der Kachel
|
||
wieder -- und weiß, wohin er muss, bevor er den Text zu Ende
|
||
gelesen hat. Beides kommt aus derselben Zuordnung wie die Zahl
|
||
auf der Kachel, es gibt also keine zweite Liste. */
|
||
const kachel = bereichZu(HINWEIS_ZU_KACHEL[h.art]);
|
||
if (kachel && kachel.ton !== undefined && kachel.ton !== null) {
|
||
li.dataset.ton = String(kachel.ton);
|
||
}
|
||
|
||
/* Jeder Hinweis führt irgendwohin -- ein Hinweis ohne Ziel ist
|
||
nur ein schlechtes Gewissen. */
|
||
const a = el('a', 'dran__link');
|
||
a.href = h.ziel;
|
||
|
||
const zeichen = el('span', 'dran__zeichen');
|
||
/* JEDE ZEILE BEKOMMT EIN ZEICHEN (20.09.2026).
|
||
----------------------------------------------------------
|
||
Hier stand `if (kachel) { … }` -- und seit gestern gibt es
|
||
einen Hinweis, der zu KEINEM Bereich gehoert: "Bei dir
|
||
klingelt nichts". Der hat absichtlich keine Kachel (die
|
||
Anruf-Probe ist ein Werkzeug, kein Bereich), und damit fiel
|
||
sein Zeichen weg.
|
||
|
||
Die Zeile stand dann als einzige ohne Zeichen zwischen allen
|
||
anderen -- der Text begann weiter links, und es sah aus, als
|
||
fehle etwas. Genau der stille Fehler, der wie Absicht
|
||
aussieht.
|
||
|
||
Die Farbe bleibt aus (kein `data-ton`): Sie soll KEINEN
|
||
Bereich behaupten, zu dem der Hinweis nicht gehoert. Das
|
||
Zeichen dagegen ist neutral -- ein Geraet. Darum geht es. */
|
||
zeichen.append(zeichenBauen(kachel ? kachel.zeichen : 'technik', 'dran__svg'));
|
||
a.append(zeichen);
|
||
|
||
/* Die Zahl steht vorn und getrennt vom Satz. Man liest sie zuerst,
|
||
und beim Überfliegen von sieben Zeilen zählt genau das. */
|
||
if (!OHNE_ZAHL.has(h.art)) a.append(el('span', 'dran__zahl', String(h.anzahl)));
|
||
|
||
const satz = (EINZAHL[h.art] || ((n) => `${n} × ${h.text}`))(h.anzahl);
|
||
/* Die Zahl steht schon davor -- im Satz wäre sie doppelt. */
|
||
a.append(el('span', 'dran__text', satz.replace(/^\d+\s+(×\s+)?/, '')));
|
||
|
||
const pfeil = el('span', 'dran__pfeil', '→');
|
||
pfeil.setAttribute('aria-hidden', 'true');
|
||
a.append(pfeil);
|
||
/* Vorleseprogramme bekommen den ganzen Satz, nicht die Bruchstücke. */
|
||
a.setAttribute('aria-label', satz);
|
||
li.append(a);
|
||
liste.append(li);
|
||
}
|
||
/* Sieben Hinweise untereinander sind eine Wand -- und die
|
||
wichtigsten stehen ohnehin oben (der Server sortiert nach Stufe).
|
||
Sichtbar bleiben vier, der Rest ist einen Klick entfernt.
|
||
Derselbe Helfer wie im Protokoll und im Verlauf. */
|
||
window.klappe?.(liste, $('dran-schalter'), $('dran-schalter-text'));
|
||
tagesblickPruefen();
|
||
}
|
||
|
||
/* ---------- Die rechte Hälfte: was heute ansteht ------------------------
|
||
|
||
Wunsch 05.09.2026: *"rechts in der kachel die termine vom tag."*
|
||
|
||
WARUM NEBEN DEN HINWEISEN: Links steht, was zu TUN ist, rechts,
|
||
was schon FESTSTEHT. Zusammen beantworten sie die Frage, die man
|
||
morgens hat -- und die man vorher nur durch Scrollen beantworten
|
||
konnte.
|
||
|
||
Die Daten kommen aus derselben Schnittstelle wie der Kalender, mit
|
||
`tage=1`. Keine zweite Abfrage, keine zweite Sichtbarkeitsregel:
|
||
Was jemand im Kalender nicht sehen darf, kommt hier gar nicht erst
|
||
an. */
|
||
|
||
let tagesterminGeladen = false;
|
||
|
||
/** Entscheidet, ob die Kachel überhaupt etwas zu zeigen hat.
|
||
*
|
||
* Läuft nach BEIDEN Hälften. Eine Kachel mit zwei leeren Seiten wäre
|
||
* ein Rahmen um nichts -- eine mit einer vollen Seite dagegen ist
|
||
* genau richtig, und welche das ist, steht vorher nicht fest. */
|
||
function tagesblickPruefen() {
|
||
/* ==== DER WEG ZUM KALENDER NUR FUER DIE, DIE IHN HABEN ==========
|
||
|
||
Der Verweis „Kalender" steht fest im HTML des Tagesblicks. Fuer
|
||
ein Mitglied der Community fuehrt er ins Leere -- es hat keine
|
||
Kalenderkachel und die Seite steht ihm nicht offen. Der Klick
|
||
landet wieder auf der Startseite: keine Meldung, kein Grund,
|
||
nichts passiert.
|
||
|
||
Gefunden von pruef-community-sicht, die genau danach sucht --
|
||
und zwar schon VOR den Aenderungen dieses Tages. Aufgefallen ist
|
||
es nur deshalb, weil dieselbe Pruefung heute noch einen zweiten
|
||
toten Weg fand, den ich selbst gebaut hatte.
|
||
|
||
ABGELEITET, NICHT ENTSCHIEDEN: Wer die Kachel hat, hat den Weg.
|
||
Eine zweite Liste („diese Rollen duerfen den Kalender") waere
|
||
die, die beim naechsten Umbau auseinanderlaeuft. */
|
||
const kalenderWeg = document.querySelector('.tagesblick__mehr[href^="kalender"]');
|
||
if (kalenderWeg && ich) {
|
||
const hatKalender = [...(ich.bereiche || []), ...(ich.bereiche_zusatz || [])]
|
||
.some((k) => String(k?.ziel || "").startsWith("kalender.html"));
|
||
/* `ich.bereiche === null` heisst "nimm die Liste aus dem
|
||
Browser" -- dann gilt die Agenturliste, und dort gibt es den
|
||
Kalender. Nur bei einer ECHTEN Liste ohne Kalender wird der
|
||
Weg entfernt. */
|
||
if (Array.isArray(ich.bereiche) && !hatKalender) kalenderWeg.remove();
|
||
}
|
||
|
||
const etwasLinks = hinweise.length > 0;
|
||
const etwasRechts = $('tagestermine').childElementCount > 0;
|
||
/* Solange die Termine noch unterwegs sind, wird nicht versteckt --
|
||
sonst blitzt die Kachel auf und verschwindet wieder. */
|
||
const kachel = $('dran-block');
|
||
if (!tagesterminGeladen) return; /* der Platzhalter haelt die Hoehe */
|
||
|
||
/* Jetzt steht beides fest: Der Platzhalter wird abgeraeumt, und die
|
||
Kachel bleibt nur, wenn sie etwas zu zeigen hat. */
|
||
delete kachel.dataset.laedt;
|
||
kachel.hidden = !etwasLinks && !etwasRechts;
|
||
|
||
/* DIE ERKLAERUNG GEHT MIT. Sie beschreibt genau diesen Kasten --
|
||
steht er nicht da, erklaert sie etwas, das es nicht gibt, und
|
||
man sucht danach. */
|
||
const fuss = $('fuss-dran');
|
||
if (fuss) fuss.hidden = kachel.hidden;
|
||
}
|
||
|
||
/** hh:mm aus einem Zeitstempel, ohne Zeitzonen-Rechnerei.
|
||
* Die Werte kommen als "2026-09-05T14:30" vom Server -- schon in
|
||
* Ortszeit. Ein `new Date()` darauf würde sie ein zweites Mal
|
||
* umrechnen und Termine um Stunden verschieben. */
|
||
const uhrzeit = (beginn) => String(beginn || '').slice(11, 16);
|
||
|
||
const ART_NAME = { call: 'Call', termin: 'Termin', review: 'Review', frist: 'Frist' };
|
||
|
||
async function tagestermineLaden() {
|
||
const liste = $('tagestermine');
|
||
let termine = [];
|
||
try {
|
||
const heute = window.heuteLokal();
|
||
const antwort = await fetch(
|
||
`/workspace/api/termine?von=${heute}&tage=1`, { credentials: 'same-origin' });
|
||
if (antwort.ok) {
|
||
const daten = await antwort.json();
|
||
/* `tage=1` liefert den Zeitraum bis morgen früh -- auf den
|
||
heutigen Tag wird hier noch einmal genau geschnitten. */
|
||
termine = (daten.termine || []).filter((t) => String(t.beginn).slice(0, 10) === heute);
|
||
}
|
||
} catch { /* die linke Hälfte steht trotzdem */ }
|
||
|
||
liste.textContent = '';
|
||
tagesterminGeladen = true;
|
||
|
||
/* Auch der leere Fall wird GESETZT, nicht uebersprungen. Ein Feld,
|
||
das bei null Terminen auf dem Strich stehen bleibt, sieht aus wie
|
||
eine Abfrage, die haengt -- und man wartet auf eine Zahl, die nie
|
||
kommt. "0" ist eine Auskunft, "–" ist keine. */
|
||
if (!termine.length) {
|
||
$('heute-leer').hidden = false;
|
||
standSetzen('heute', '0');
|
||
standSetzen('naechster', '–');
|
||
tagesblickPruefen();
|
||
return;
|
||
}
|
||
$('heute-leer').hidden = true;
|
||
|
||
/* Was ist gerade dran? Der erste Termin, der noch nicht vorbei ist.
|
||
Er wird hervorgehoben -- beim Überfliegen ist genau das die
|
||
Auskunft, die man sucht, und nicht "der erste des Tages". */
|
||
const jetzt = new Date();
|
||
const jetztText = `${String(jetzt.getHours()).padStart(2, '0')}:`
|
||
+ `${String(jetzt.getMinutes()).padStart(2, '0')}`;
|
||
const naechster = termine.find((t) => {
|
||
const ende = new Date(Date.parse(t.beginn.replace(' ', 'T'))
|
||
+ (Number(t.dauer_min) || 30) * 60000);
|
||
return !Number.isNaN(ende.getTime()) ? ende >= jetzt : uhrzeit(t.beginn) >= jetztText;
|
||
});
|
||
|
||
/* Die zwei Ablesungen fuer den Tag -- aus GENAU diesen Werten, die
|
||
die Liste darunter ohnehin benutzt.
|
||
|
||
"Als Naechstes" zeigt den Termin, der noch nicht vorbei ist. Ist
|
||
keiner mehr uebrig, steht dort "fertig" und nicht die Uhrzeit des
|
||
letzten: Ein vergangener Termin unter der Ueberschrift "Als
|
||
Naechstes" ist schlimmer als gar keine Angabe. */
|
||
standSetzen('heute', String(termine.length));
|
||
standSetzen('naechster', naechster ? uhrzeit(naechster.beginn) : 'fertig');
|
||
|
||
/* HÖCHSTENS FÜNF. Zwei Gründe, und beide zählen:
|
||
|
||
Fachlich: Eine Kachel auf der Startseite beantwortet "was kommt
|
||
als Nächstes", nicht "was war alles". Wer zwanzig Termine hat,
|
||
will die nächsten sehen und dann in den Kalender -- eine Liste,
|
||
die den halben Bildschirm füllt, nimmt den Blick auf alles
|
||
darunter.
|
||
|
||
Technisch: Ohne Grenze hängt die Höhe der Kachel an der Zahl der
|
||
Termine, und der reservierte Platz kann nie passen. Der
|
||
Layout-Sprung lag deshalb bei 0,93 -- alles unterhalb rutschte
|
||
beim Laden nach unten. Mit einer Obergrenze ist die Höhe
|
||
planbar.
|
||
|
||
Warum DREI und nicht fuenf: Gemessen wurde die Kachelhoehe --
|
||
ein Termin 169 px, drei 327 px, fuenf 486 px. Je weiter die
|
||
Spanne, desto weniger kann der reservierte Platz passen, und
|
||
desto staerker springt die Seite. Bei drei liegt die Spanne bei
|
||
gut 150 Pixeln statt bei 320.
|
||
|
||
Die weggelassenen werden GENANNT, nicht verschwiegen: Eine
|
||
Liste, die stillschweigend abschneidet, liest sich wie der
|
||
ganze Tag -- und man verpasst den Termin um sechs. */
|
||
const ZEIGE_HOECHSTENS = 3;
|
||
const gezeigt = termine.slice(0, ZEIGE_HOECHSTENS);
|
||
const weitere = termine.length - gezeigt.length;
|
||
|
||
for (const t of gezeigt) {
|
||
const li = el('li', 'tagesliste__punkt');
|
||
li.dataset.art = t.art || 'termin';
|
||
|
||
const beginn = uhrzeit(t.beginn);
|
||
if (t === naechster) li.dataset.naechster = 'ja';
|
||
/* Vorbei heißt nicht weg: Man will sehen, was man heute schon
|
||
hinter sich hat. Es tritt nur zurück. */
|
||
else if (beginn < jetztText) li.dataset.vorbei = 'ja';
|
||
|
||
/* ---- Links: Uhrzeit, Dauerbalken, Dauer ---- */
|
||
const zeit = el('span', 'tagesliste__zeit');
|
||
zeit.append(el('span', 'tagesliste__stunde', beginn));
|
||
|
||
if (t.dauer_min) {
|
||
/* DER BALKEN ZEIGT DIE LÄNGE. Bezugsgröße sind zwei Stunden --
|
||
darüber ist er voll. Das ist keine Skala, sondern ein
|
||
Verhältnis: Man soll auf einen Blick sehen, ob ein Termin
|
||
kurz oder lang ist, ohne "30 min" zu lesen.
|
||
|
||
Zwei Stunden als Vollausschlag, weil darüber im Alltag
|
||
kaum etwas liegt; ein Ganztagestermin würde jeden anderen
|
||
Balken sonst auf einen Strich zusammendrücken. */
|
||
const anteil = Math.max(12, Math.min(100, (Number(t.dauer_min) / 120) * 100));
|
||
const balken = el('span', 'tagesliste__balken');
|
||
balken.style.setProperty('--laenge', `${Math.round(anteil)}%`);
|
||
balken.setAttribute('aria-hidden', 'true'); // die Zahl daneben sagt es
|
||
const laenge = el('span', 'tagesliste__laenge');
|
||
laenge.append(balken, el('span', 'tagesliste__dauer', `${t.dauer_min} min`));
|
||
zeit.append(laenge);
|
||
}
|
||
li.append(zeit);
|
||
|
||
/* ---- Mitte: Titel und Beteiligte ---- */
|
||
const text = el('div', 'tagesliste__text');
|
||
text.append(el('p', 'tagesliste__titel', t.titel));
|
||
|
||
const unten = [];
|
||
if (t.teilnehmer_name) unten.push(t.teilnehmer_name);
|
||
else if (t.creator_name) unten.push(t.creator_name);
|
||
if (t.ort) unten.push(t.ort);
|
||
if (unten.length) text.append(el('p', 'tagesliste__unter', unten.join(' · ')));
|
||
li.append(text);
|
||
|
||
/* ---- Rechts: Art und, beim nächsten, die Jetzt-Marke ---- */
|
||
const rechts = el('div', 'tagesliste__rechts');
|
||
rechts.append(el('span', 'tagesliste__art', ART_NAME[t.art] || t.art || ''));
|
||
/* Steht im Markup immer, wird aber nur beim nächsten Termin
|
||
eingeblendet (CSS). Ein Wort sagt hier mehr als ein hellerer
|
||
Hintergrund -- und ein Vorleseprogramm bekommt es ebenfalls. */
|
||
rechts.append(el('span', 'tagesliste__jetzt', 'Jetzt'));
|
||
li.append(rechts);
|
||
|
||
/* Der ganze Eintrag führt in den Kalender, auf den richtigen Tag.
|
||
Ein Termin, den man nur anschauen kann, ist eine Sackgasse. */
|
||
const link = el('a', 'tagesliste__link');
|
||
link.href = `kalender.html?tag=${String(t.beginn).slice(0, 10)}`;
|
||
link.setAttribute('aria-label',
|
||
`${beginn} Uhr, ${t.titel}${unten.length ? ', ' + unten.join(', ') : ''}`);
|
||
li.append(link);
|
||
|
||
liste.append(li);
|
||
}
|
||
|
||
/* Was nicht mehr hineinpasste, wird gesagt -- mit dem Weg dorthin.
|
||
Eine Liste, die stillschweigend abschneidet, liest sich wie der
|
||
ganze Tag, und man verpasst den Termin um sechs. */
|
||
if (weitere > 0) {
|
||
const mehr = el('li', 'tagesliste__mehr');
|
||
const a = el('a', 'tagesliste__mehr-link',
|
||
`${weitere} weitere${weitere === 1 ? 'r Termin' : ' Termine'} heute →`);
|
||
a.href = 'kalender.html';
|
||
mehr.append(a);
|
||
liste.append(mehr);
|
||
}
|
||
|
||
tagesblickPruefen();
|
||
}
|
||
|
||
/* Die Zahlen kommen aus derselben Quelle wie das Brett und sind bereits
|
||
serverseitig auf die eigene Rolle eingegrenzt. */
|
||
const ZAHLEN = [
|
||
{ schluessel: 'ueberfaellig', name: 'Überfällig', warn: true },
|
||
{ schluessel: 'heute', name: 'Heute fällig' },
|
||
{ schluessel: 'offen', name: 'Offen' },
|
||
{ schluessel: 'arbeit', name: 'In Arbeit' },
|
||
{ schluessel: 'review', name: 'Zur Freigabe' },
|
||
{ schluessel: 'erledigt', name: 'Erledigt' },
|
||
/* ABGEBROCHEN als eigene Zahl (08.09.2026, screen12). Sie steht
|
||
hinten bei "Erledigt", weil beides dasselbe bedeutet: vom Tisch.
|
||
Vorher tauchte sie nirgends auf und schlug sich stattdessen
|
||
unsichtbar auf "Überfällig" und "Heute fällig" nieder -- eine
|
||
Aufgabe, die niemand mehr anfasst, mahnte weiter. */
|
||
{ schluessel: 'abgebrochen', name: 'Abgebrochen' },
|
||
];
|
||
|
||
async function zahlenLaden() {
|
||
let daten;
|
||
try {
|
||
const antwort = await fetch('/workspace/api/uebersicht', { credentials: 'same-origin' });
|
||
if (!antwort.ok) return;
|
||
daten = await antwort.json();
|
||
} catch { return; }
|
||
|
||
/* JEDE ROLLE SIEHT DIESELBEN KATEGORIEN (08.09.2026).
|
||
|
||
Filipe: "diese beiden kategorien sollen bei jedem in jeder rolle
|
||
gleich sein ... alles was kacheln ist und so soll gleich sein."
|
||
|
||
Hier stand: Ist die Summe null, wird die ganze Reihe GELÖSCHT und
|
||
durch einen Satz ersetzt -- mit der Begründung "sechs Nullen
|
||
nebeneinander sind kein Bericht, sondern Rauschen". Der Gedanke
|
||
war nicht falsch, die Folge aber schon: Nachgemessen über alle
|
||
fünf Rollen sah Spicy Media als EINZIGE keine Zahlenreihe,
|
||
sondern einen Satz -- die anderen vier sahen sieben Kategorien.
|
||
Wer zwischen zwei Rollen wechselt, findet die Seite dann anders
|
||
aufgebaut vor und sucht, was fehlt.
|
||
|
||
Jetzt steht die Reihe IMMER, mit denselben sieben Kategorien für
|
||
alle. Ist wirklich nichts offen, wird sie GEDÄMPFT (siehe
|
||
`[data-leer]` in start.css) und der Satz steht ZUSÄTZLICH
|
||
darunter statt an ihrer Stelle. Damit bleibt die Aussage "es ist
|
||
gerade nichts zu tun" erhalten, ohne dass die Seite ihre Form
|
||
ändert -- gedämpft ist auch eine Antwort, nur eben eine leise. */
|
||
/* ---- WER KEINE AUFGABEN HAT, BEKOMMT KEINE ZAHLEN (18.09.2026)
|
||
|
||
Ein Mitglied der Community sah hier „Deine Aufgaben" mit sieben
|
||
Zaehlern: Ueberfaellig, Heute faellig, Offen, In Arbeit, Zur
|
||
Freigabe,
|
||
Erledigt, Abgebrochen -- alle null. Darunter „Nichts offen.
|
||
Alles abgearbeitet – goenn dir was."
|
||
|
||
Das ist die Sprache eines Arbeitsplatzes, und ein Zuschauer hat
|
||
hier keinen. Schlimmer: Jede der sieben Zahlen ist ein LINK auf
|
||
aufgaben.html. Gemessen mit Gast-Augen -- ein Klick landet
|
||
wieder auf start.html. Sieben tote Knoepfe, und der Code
|
||
daneben sagt selbst: „Ein toter Knopf ist keine Antwort."
|
||
|
||
WORAN ERKANNT: nicht an der Rolle. Rollennamen der Community
|
||
gehoeren nicht in eine Datei, die jeder herunterladen kann
|
||
(darueber wacht pruef-modi-wortleck, und ROLLENTEXT oben laesst
|
||
sie aus demselben Grund aus). Entschieden wird deshalb an der
|
||
Frage, die ohnehin schon beantwortet ist: Hat diese Person die
|
||
Aufgaben-Kachel? Der Server schickt nur, was jemand sehen darf.
|
||
Keine zweite Wahrheit, kein Rollenname, und es bleibt richtig,
|
||
wenn sich die Rechte aendern. */
|
||
const summe = ZAHLEN.reduce((n, z) => n + (daten[z.schluessel] ?? 0), 0);
|
||
const block = $('zahlen-block');
|
||
if (!hatArbeitsplatz()) { block.hidden = true; return; }
|
||
block.hidden = false;
|
||
if (!summe) block.dataset.leer = 'ja';
|
||
else block.removeAttribute('data-leer');
|
||
$('zahlen-leer').hidden = !!summe;
|
||
|
||
/* JEDE ZAHL FUEHRT ZU IHREN AUFGABEN (09.09.2026, screen1).
|
||
|
||
Filipe: "wenn ich auf die druecke soll ich auf zu denen punkten
|
||
gebracht werden."
|
||
|
||
Der Weg dahin gab es schon: `aufgaben.html?zeigen=<schluessel>`
|
||
springt zu den passenden Karten und legt eine Zeile darueber,
|
||
was gerade gezeigt wird (kopf.js, `zielMarkieren`). Nur waren
|
||
diese sieben Karten `<li>` ohne Link -- die Auskunft war da, der
|
||
Weg dorthin nicht. Zwei fehlende Schluessel ("heute",
|
||
"abgebrochen") sind in aufgaben.js nachgetragen.
|
||
|
||
EIN <a> IM <li>, NICHT DAS <li> KLICKBAR. Ein Listenpunkt mit
|
||
einem Klick-Zuhoerer ist fuer Tastatur und Vorleseprogramm kein
|
||
Ziel -- man kann ihn nicht anspringen und bekommt nicht gesagt,
|
||
dass er irgendwohin fuehrt. Ein echter Link kann das alles, ohne
|
||
eine Zeile JavaScript.
|
||
|
||
DIE NULL BLEIBT EIN LINK. Es waere naheliegend, sie abzuschalten
|
||
("da ist ja nichts"). Aber der Sprung zeigt dann genau das --
|
||
eine leere Spalte mit der Zeile "Aufgaben, die offen sind". Das
|
||
ist eine Antwort. Ein toter Knopf ist keine.
|
||
|
||
Der volle Satz steht im `aria-label`: Vorgelesen wird "3 Aufgaben
|
||
sind überfällig — ansehen" und nicht "3 Überfällig". */
|
||
const liste = $('zahlen');
|
||
liste.textContent = '';
|
||
for (const z of ZAHLEN) {
|
||
const wert = daten[z.schluessel] ?? 0;
|
||
const li = el('li', 'zahl');
|
||
if (z.warn && wert > 0) li.dataset.warn = 'ja';
|
||
const a = el('a', 'zahl__link');
|
||
a.href = `aufgaben.html?zeigen=${encodeURIComponent(z.schluessel)}`;
|
||
a.setAttribute('aria-label',
|
||
`${wert} ${wert === 1 ? 'Aufgabe' : 'Aufgaben'}: ${z.name} — ansehen`);
|
||
a.append(el('span', 'zahl__wert', String(wert)));
|
||
a.append(el('span', 'zahl__name', z.name));
|
||
li.append(a);
|
||
liste.append(li);
|
||
}
|
||
}
|
||
|
||
laden();
|
||
})();
|