DogFatherGitandClaude Opus 5
1816ed9e1f
Die Zeilen waren die letzten schmucklosen Elemente der Startseite. Jetzt
traegt jede das Zeichen UND die Farbe der Kachel, zu der sie fuehrt --
Hinweis und Ziel gehoeren dadurch sichtbar zusammen, ohne dass die
Zuordnung ein zweites Mal irgendwo steht (sie kommt aus derselben
Tabelle wie die Zahl auf der Kachel). Die Anzahl steht vorn, getrennt vom
Satz und in gleicher Zeichenbreite; beim Ueberfliegen von sieben Zeilen
liest man genau sie zuerst. Ueberfaellig schlaegt Bereichsfarbe und
bleibt rot -- wenn etwas brennt, zaehlt zuerst, DASS es brennt.
Dabei gefunden und behoben: Die Farbtoene hingen an .kachel[data-ton=n].
Um sie fuer die Hinweiszeilen mitzunutzen, wurde .kachel entfernt --
damit gewann aber die Voreinstellung ".kachel { --ton: var(--akzent) }"
weiter unten in der Datei den Wettstreit der Regeln, und alle siebzehn
Kacheln waeren blau gewesen. Die Voreinstellung steht jetzt in :where()
und zaehlt dabei als nicht vorhanden. Die Browserpruefung hat das
gemeldet ("1 Farbe auf 17 Kacheln"), nicht das Auge.
"Nichts offen" ist kein gestrichelter Kasten mehr, sondern eine gute
Nachricht mit ruhigem Gruen und Haken. Weil er jetzt display:flex hat,
war er staerker als das hidden des Browsers und haette IMMER dagestanden
-- eigene Regel dafuer plus eine Pruefung, die beide Richtungen misst.
Neue Pruefungen (pruef-start-ansicht): Zeichen, vorangestellte Zahl,
keine doppelte Zahl im Satz, ganzer Satz fuer Vorleseprogramme, Farbe
gleich der Kachelfarbe an echten Bildpunkten, rot nur bei ueberfaellig.
Co-Authored-By: Claude Opus 5 <[email protected]>
499 lines
22 KiB
JavaScript
499 lines
22 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';
|
||
|
||
const ROLLENTEXT = {
|
||
admin: 'DogFather · Gesamtübersicht und Freigaben',
|
||
manager: 'Manager · dieselben Rechte, ohne Personenverwaltung',
|
||
creator: 'Creator · dein eigener Bereich',
|
||
scout: 'Scout · deine Pipeline und die Creator, die du betreust',
|
||
};
|
||
|
||
/* ---------- Zeichen ------------------------------------------------------
|
||
|
||
Alle im selben Raster (24×24), alle nur aus Linien -- gefüllte Zeichen
|
||
wirken neben Text wie Flecken. Eigene statt einer Fremdbibliothek:
|
||
siebzehn Pfade sind kleiner als jede Schriftart und kosten keine
|
||
zusätzliche Lieferkette. */
|
||
|
||
const ZEICHEN = {
|
||
dashboard: ['M4.5 4.5h6v6h-6z', 'M13.5 4.5h6v4h-6z', 'M13.5 11.5h6v8h-6z', 'M4.5 13.5h6v6h-6z'],
|
||
aufgaben: ['M4.5 5h4v14h-4z', 'M10 5h4v9h-4z', 'M15.5 5h4v11.5h-4z'],
|
||
kalender: ['M4 6.5h16v13H4z', 'M4 10.5h16', 'M8.5 3.5v4', 'M15.5 3.5v4'],
|
||
calls: ['M3.5 7h11v10h-11z', 'M14.5 11l6-3.5v9l-6-3.5z'],
|
||
dateien: ['M3.5 6.5h5.5l2 2h9.5v11h-17z'],
|
||
profil: ['M12 7a3.2 3.2 0 1 0 0 6.4A3.2 3.2 0 0 0 12 7z',
|
||
'M5.5 20c.7-3.3 3.3-5.3 6.5-5.3s5.8 2 6.5 5.3'],
|
||
startcheck: ['M6 4.5h12v15H6z', 'M9.2 9.6l1.7 1.7 3.6-3.7', 'M9.2 15.2h5.6'],
|
||
live: ['M12 10.2a1.8 1.8 0 1 0 0 3.6 1.8 1.8 0 0 0 0-3.6z',
|
||
'M8.2 8.2a5.4 5.4 0 0 0 0 7.6', 'M15.8 15.8a5.4 5.4 0 0 0 0-7.6',
|
||
'M5.4 5.4a9.4 9.4 0 0 0 0 13.2', 'M18.6 18.6a9.4 9.4 0 0 0 0-13.2'],
|
||
content: ['M3.5 6h17v13h-17z', 'M3.5 10h17', 'M8 6l-1.4 4', 'M13 6l-1.4 4', 'M18 6l-1.4 4'],
|
||
technik: ['M4 7.5h16', 'M4 12h16', 'M4 16.5h16',
|
||
'M9 7.5a1.4 1.4 0 1 0 0-.02z', 'M15 12a1.4 1.4 0 1 0 0-.02z',
|
||
'M7.5 16.5a1.4 1.4 0 1 0 0-.02z'],
|
||
community: ['M9 8.6a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4z',
|
||
'M3.5 19.5c.6-2.8 2.8-4.5 5.5-4.5s4.9 1.7 5.5 4.5',
|
||
'M16 8.8a2.4 2.4 0 1 1 1.6 4.3', 'M17 15.2c2 .5 3.3 2 3.7 4.3'],
|
||
schutz: ['M12 3.6 5.6 6.3v5.1c0 3.8 2.6 7.2 6.4 8.4 3.8-1.2 6.4-4.6 6.4-8.4V6.3z',
|
||
'M9.4 11.8l1.9 1.9 3.4-3.6'],
|
||
reports: ['M4 19.5h16', 'M7.5 16.5V9.5', 'M12 16.5V5.5', 'M16.5 16.5v-5'],
|
||
personen: ['M14.4 6.2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z', 'M11.6 12.2 4 19.8',
|
||
'M6.4 17.4l2 2', 'M8.6 15.2l2 2'],
|
||
scouting: ['M3.5 5.5h17l-6.6 7.6v6.4l-3.8-2.1v-4.3z'],
|
||
wissen: ['M4 5h6.4c.9 0 1.6.7 1.6 1.6V19c0-.9-.7-1.6-1.6-1.6H4z',
|
||
'M20 5h-6.4c-.9 0-1.6.7-1.6 1.6V19c0-.9.7-1.6 1.6-1.6H20z'],
|
||
automation: ['M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'],
|
||
};
|
||
|
||
/* ---------- Die Bereiche -------------------------------------------------
|
||
|
||
`rollen` steuert, wem ein Bereich überhaupt erscheint -- serverseitig
|
||
wird es ohnehin noch einmal geprüft, das hier ist nur Höflichkeit.
|
||
|
||
`ton` ist der Farbplatz 1..17 -- JEDE Kachel hat ihre eigene Farbe.
|
||
|
||
Ein erster Versuch mit frei gewählten Farben ergab Paare mit einem
|
||
Abstand von 1,4: praktisch dieselbe Farbe, das sieht nach Zufall aus
|
||
statt nach Absicht. Deshalb sind Farben UND Zuordnung gerechnet, von
|
||
tools/kachel-farben.mjs. Die Überlegung dahinter: Das Auge vergleicht
|
||
nur, was nebeneinander liegt. Siebzehn Farben müssen sich also nicht
|
||
alle voneinander unterscheiden, sondern nur von ihren Nachbarn im
|
||
Raster -- und da sind es jetzt mindestens 105,9 Grad.
|
||
|
||
Wer hier Kacheln umsortiert oder eine hinzufügt, ändert damit die
|
||
Nachbarschaften. Dann gehört tools/kachel-farben.mjs neu gelaufen
|
||
(dort die Liste NACHBARN anpassen), sonst stimmt der Abstand nicht
|
||
mehr und niemand merkt es. */
|
||
|
||
const GRUPPEN = [
|
||
{
|
||
name: 'Täglich',
|
||
unter: 'Was du sowieso jeden Tag aufmachst',
|
||
bereiche: [
|
||
{ name: 'Dashboard', unter: 'Alle Creator auf einen Blick', zeichen: 'dashboard', ton: 3,
|
||
gross: true, rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'uebersicht.html' },
|
||
{ name: 'Aufgaben', unter: 'Offen, in Arbeit, Review', zeichen: 'aufgaben', ton: 9,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'aufgaben.html' },
|
||
{ name: 'Kalender', unter: 'Termine und Calls', zeichen: 'kalender', ton: 15,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'kalender.html' },
|
||
{ name: 'Calls & Protokolle', unter: 'Gespräche mit To-dos', zeichen: 'calls', ton: 8,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'calls.html' },
|
||
{ name: 'Dateien', unter: 'Ablage und Freigaben', zeichen: 'dateien', ton: 16,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'dateien.html' },
|
||
],
|
||
},
|
||
{
|
||
name: 'Rund um den Creator',
|
||
unter: 'Die Betreuungsakte – Stand, Zahlen, Verlauf',
|
||
bereiche: [
|
||
{ name: 'Creator-Profile', unter: 'Ziele und 90-Tage-Plan', zeichen: 'profil', ton: 4,
|
||
rollen: ['admin', 'manager', 'scout'], ziel: 'profil.html' },
|
||
{ name: 'Mein Profil', unter: 'Deine Ziele und Pläne', zeichen: 'profil', ton: 4,
|
||
rollen: ['creator'], ziel: 'profil.html' },
|
||
{ name: 'Start-Check', unter: 'Erstanalyse, 16 Punkte', zeichen: 'startcheck', ton: 14,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'startcheck.html' },
|
||
{ name: 'LIVE-Analyse', unter: 'Vorher, während, danach', zeichen: 'live', ton: 6,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=live' },
|
||
{ name: 'Content-Planung', unter: 'Idee bis Upload', zeichen: 'content', ton: 10,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'content.html' },
|
||
{ name: 'Community', unter: 'Moderation und Konflikte', zeichen: 'community', ton: 5,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=community' },
|
||
{ name: 'Technik', unter: 'Setup, Fehler, Lösungen', zeichen: 'technik', ton: 11,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=technik' },
|
||
{ name: 'Schutz & Regeln', unter: 'Richtlinien und Vorfälle', zeichen: 'schutz', ton: 1,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'bereich.html?b=schutz' },
|
||
{ name: 'Reports & Review', unter: 'Woche und Entscheidung', zeichen: 'reports', ton: 13,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'report.html' },
|
||
],
|
||
},
|
||
{
|
||
name: 'Team & System',
|
||
unter: 'Was den Laden am Laufen hält',
|
||
bereiche: [
|
||
{ name: 'Personen & Zugänge', unter: 'Rollen und Codes', zeichen: 'personen', ton: 7,
|
||
rollen: ['admin', 'manager'], ziel: 'personen.html' },
|
||
{ name: 'Scout-Pipeline', unter: 'Entdeckt bis übergeben', zeichen: 'scouting', ton: 12,
|
||
rollen: ['admin', 'manager', 'scout'], ziel: 'scouting.html' },
|
||
{ name: 'Wissens-Bibliothek', unter: 'Anleitungen und PDFs', zeichen: 'wissen', ton: 2,
|
||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'wissen.html' },
|
||
{ name: 'Automationen', unter: 'Was von allein passiert', zeichen: 'automation', ton: 17,
|
||
rollen: ['admin', 'manager'], ziel: 'automation.html' },
|
||
],
|
||
},
|
||
];
|
||
|
||
/* 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',
|
||
bereiche_dringend: 'LIVE-Analyse',
|
||
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',
|
||
};
|
||
|
||
/* 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. */
|
||
const bereichZu = (name) => {
|
||
if (!name) return null;
|
||
for (const g of GRUPPEN) {
|
||
const b = g.bereiche.find((x) => x.name === name);
|
||
if (b) return b;
|
||
}
|
||
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;
|
||
};
|
||
|
||
function zeichenBauen(name, klasse = 'kachel__svg') {
|
||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||
svg.setAttribute('viewBox', '0 0 24 24');
|
||
svg.setAttribute('aria-hidden', 'true');
|
||
svg.setAttribute('class', klasse);
|
||
for (const d of (ZEICHEN[name] || [])) {
|
||
const p = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||
p.setAttribute('d', d);
|
||
svg.append(p);
|
||
}
|
||
return svg;
|
||
}
|
||
|
||
let ich = 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. */
|
||
const zahlen = new Map();
|
||
for (const h of hinweise) {
|
||
const kachel = HINWEIS_ZU_KACHEL[h.art];
|
||
if (!kachel) continue;
|
||
const bisher = zahlen.get(kachel) || { n: 0, warn: false };
|
||
bisher.n += h.anzahl;
|
||
if (h.stufe === 'warnung') bisher.warn = true;
|
||
zahlen.set(kachel, bisher);
|
||
}
|
||
|
||
let laufNr = 0;
|
||
for (const gruppe of GRUPPEN) {
|
||
const meine = gruppe.bereiche.filter((b) => b.rollen.includes(ich.rolle));
|
||
if (!meine.length) continue;
|
||
|
||
const abschnitt = el('section', 'gruppe');
|
||
const kopf = el('div', 'gruppe__kopf');
|
||
kopf.append(el('h2', 'gruppe__name', gruppe.name));
|
||
kopf.append(el('span', 'gruppe__unter', gruppe.unter));
|
||
abschnitt.append(kopf);
|
||
|
||
const liste = el('ul', 'kacheln');
|
||
for (const b of meine) {
|
||
const li = el('li', 'kachel');
|
||
li.dataset.ton = String(b.ton);
|
||
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;
|
||
|
||
/* 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.name);
|
||
if (zahl && zahl.n > 0) {
|
||
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. */
|
||
marke.setAttribute('aria-label', `${zahl.n} offene Punkte in ${b.name}`);
|
||
a.append(marke);
|
||
} else {
|
||
a.append(el('span', 'kachel__pfeil', '→'));
|
||
}
|
||
|
||
li.append(a);
|
||
liste.append(li);
|
||
}
|
||
abschnitt.append(liste);
|
||
ziel.append(abschnitt);
|
||
}
|
||
lichtFolgen(ziel);
|
||
}
|
||
|
||
/* ---------- 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. */
|
||
function lichtFolgen(wurzel) {
|
||
const feinerZeiger = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
|
||
const ruhig = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||
if (!feinerZeiger || ruhig) return;
|
||
|
||
let warten = false;
|
||
let letzte = null;
|
||
|
||
wurzel.addEventListener('pointermove', (e) => {
|
||
const kachel = e.target.closest?.('.kachel');
|
||
if (!kachel) return;
|
||
letzte = { kachel, x: e.clientX, y: e.clientY };
|
||
if (warten) return;
|
||
warten = true;
|
||
requestAnimationFrame(() => {
|
||
warten = false;
|
||
if (!letzte) return;
|
||
const { kachel: k, x, y } = letzte;
|
||
const r = k.getBoundingClientRect();
|
||
k.style.setProperty('--mx', ((x - r.left) / r.width * 100).toFixed(1) + '%');
|
||
k.style.setProperty('--my', ((y - r.top) / r.height * 100).toFixed(1) + '%');
|
||
});
|
||
});
|
||
|
||
/* Beim Verlassen zurück in die Ruhelage. Ohne das bliebe der Fleck
|
||
dort stehen, wo der Zeiger die Kachel verlassen hat -- und die
|
||
Kacheln sähen nach einer Weile alle unterschiedlich beleuchtet aus,
|
||
ohne dass jemand wüsste, warum. */
|
||
wurzel.addEventListener('pointerleave', (e) => {
|
||
const kachel = e.target.closest?.('.kachel');
|
||
if (!kachel) return;
|
||
kachel.style.removeProperty('--mx');
|
||
kachel.style.removeProperty('--my');
|
||
}, true);
|
||
}
|
||
|
||
/* ---------- 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 {
|
||
location.assign('/workspace/');
|
||
return;
|
||
}
|
||
|
||
window.werZeigen?.(ich);
|
||
/* Tageszeit statt immer "Willkommen". Kostet nichts und macht aus
|
||
einer Maske eine Begrüßung. */
|
||
const stunde = new Date().getHours();
|
||
const tageszeit = stunde < 5 ? 'Noch wach' : stunde < 11 ? 'Guten Morgen'
|
||
: stunde < 18 ? 'Guten Tag' : 'Guten Abend';
|
||
$('gruss').textContent = `${tageszeit}, ${ich.name}`;
|
||
$('rollentext').textContent = ROLLENTEXT[ich.rolle] || ich.rolle;
|
||
|
||
/* Die Hinweise zuerst -- die Kacheln brauchen ihre Zahlen. */
|
||
await hinweiseLaden();
|
||
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. */
|
||
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 liegt' : 'Dateien liegen'} im Review`,
|
||
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`,
|
||
};
|
||
|
||
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 = '';
|
||
if (!hinweise.length) { $('dran-block').hidden = true; 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) 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;
|
||
|
||
if (kachel) {
|
||
const zeichen = el('span', 'dran__zeichen');
|
||
zeichen.append(zeichenBauen(kachel.zeichen, '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. */
|
||
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'));
|
||
$('dran-block').hidden = false;
|
||
}
|
||
|
||
/* 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: 'Review' },
|
||
{ schluessel: 'erledigt', name: 'Erledigt' },
|
||
];
|
||
|
||
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; }
|
||
|
||
/* Sechs Nullen nebeneinander sind kein Bericht, sondern Rauschen.
|
||
Wenn wirklich nichts offen ist, steht dort ein Satz -- und der
|
||
Platz gehört den Bereichen. */
|
||
const summe = ZAHLEN.reduce((n, z) => n + (daten[z.schluessel] ?? 0), 0);
|
||
const block = $('zahlen-block');
|
||
if (!summe) {
|
||
block.dataset.leer = 'ja';
|
||
$('zahlen').textContent = '';
|
||
$('zahlen-leer').hidden = false;
|
||
return;
|
||
}
|
||
block.removeAttribute('data-leer');
|
||
$('zahlen-leer').hidden = true;
|
||
|
||
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';
|
||
li.append(el('span', 'zahl__wert', String(wert)));
|
||
li.append(el('span', 'zahl__name', z.name));
|
||
liste.append(li);
|
||
}
|
||
}
|
||
|
||
laden();
|
||
})();
|