Workspace: "Was ist dran" -- erster Baustein der Automationen (Phase 4)
Bis hierher musste man selbst daran denken, in den richtigen Bereich zu
schauen. Das dreht die Uebersicht auf dem Dashboard jetzt um: Das System
sagt, was liegen bleibt.
Drei Regeln, an die sich das haelt:
1. KEINE eigenen Daten. Ein Hinweis ist immer nur eine Sicht auf etwas,
das ohnehin existiert. Wird die Aufgabe erledigt, verschwindet der
Hinweis von selbst -- es gibt nichts zu quittieren, nichts zu pflegen
und nichts, was veralten kann. Genau daran scheitern die meisten
Erinnerungssysteme.
2. JEDER HINWEIS FUEHRT IRGENDWOHIN. Ein Hinweis ohne Ziel ist nur ein
schlechtes Gewissen. Jeder traegt deshalb einen Link zu der Stelle,
an der sich die Sache tatsaechlich erledigen laesst. Geprueft: Ziel
erreichbar, keine Umleitung.
3. DIESELBE SICHTBARKEIT WIE UEBERALL. Die Regeln werden aus den
Fachmodulen importiert, nicht abgeschrieben (workspace-aufgaben,
-kalender, -dateien, -bereiche exportieren sie jetzt). Ein Hinweis
darf nie etwas verraten, das die zugehoerige Seite verbergen wuerde
-- sonst waere ausgerechnet die Uebersicht das Leck.
Dreizehn Hinweisarten, in drei Stufen. Nur die oberste ist farbig:
waere alles hervorgehoben, waere nichts hervorgehoben. Liegt nichts an,
verschwindet der ganze Block.
Steht bewusst VOR den Zahlen. Die Zahlen sagen, WIE VIEL anliegt --
diese Liste sagt, WAS zu tun ist.
Steuerungswissen bleibt beim Management: Review-Termine, Creator ohne
zustaendige Person und leere Profile erscheinen weder bei Creator noch
bei Scouts -- genau wie die zugehoerigen Profilfelder. Geprueft mit
einem eigenen Leck-Test ueber alle drei Rollen.
Zwei Hinweise, die es ohne diese Uebersicht gar nicht gaebe:
- Aufgaben, die im Review haengen. Sie warten auf jemanden -- die Sorte
Stillstand, die niemandem auffaellt, weil nichts ueberfaellig wird.
- Uebergebene Leads, aus denen nie ein Creator wurde. Sonst ist die
Uebergabe eine Sackgasse, die niemand bemerkt.
Nebenbei: Der Fusstext auf dem Dashboard stammte noch vom ersten Tag
("Die Bereiche werden nach dem Phasenplan gebaut") -- inzwischen sind
Phase 1 bis 3 fertig. Ersetzt durch eine Erklaerung, wie die Uebersicht
funktioniert.
This commit is contained in:
@@ -230,3 +230,49 @@ body.start {
|
||||
background: rgba(255, 255, 255, .04);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .knopf-still { transition: none; } }
|
||||
|
||||
/* ---------- Was ist dran ------------------------------------------------
|
||||
Steht vor den Zahlen. Zahlen sagen, WIE VIEL anliegt -- diese Liste
|
||||
sagt, WAS zu tun ist. Nur drei Stufen, und nur die oberste ist farbig:
|
||||
Waere alles hervorgehoben, waere nichts hervorgehoben. */
|
||||
.dran { margin-bottom: 30px; }
|
||||
.dran__liste { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
|
||||
|
||||
.dran__punkt {
|
||||
position: relative;
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
background: rgba(255, 255, 255, .028);
|
||||
transition: border-color .18s ease, background .18s ease;
|
||||
}
|
||||
.dran__punkt::before {
|
||||
content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: var(--rand);
|
||||
}
|
||||
.dran__punkt[data-stufe="warnung"] {
|
||||
border-color: rgba(255, 154, 162, .3);
|
||||
background: rgba(255, 154, 162, .055);
|
||||
}
|
||||
.dran__punkt[data-stufe="warnung"]::before { background: var(--warn); }
|
||||
.dran__punkt[data-stufe="offen"]::before { background: var(--akzent); opacity: .7; }
|
||||
.dran__punkt[data-stufe="ruhig"] { opacity: .78; }
|
||||
.dran__punkt:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }
|
||||
.dran__punkt[data-stufe="ruhig"]:hover { opacity: 1; }
|
||||
|
||||
.dran__link {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 14px;
|
||||
padding: 12px 15px 12px 18px;
|
||||
color: var(--text); text-decoration: none; font-size: .9rem;
|
||||
}
|
||||
.dran__punkt[data-stufe="warnung"] .dran__text { font-weight: 600; }
|
||||
.dran__pfeil {
|
||||
color: var(--text-still); font-size: .95rem;
|
||||
transition: transform .18s ease, color .18s ease;
|
||||
}
|
||||
.dran__link:hover .dran__pfeil { color: var(--akzent); transform: translateX(3px); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.dran__punkt, .dran__pfeil { transition: none; }
|
||||
.dran__link:hover .dran__pfeil { transform: none; }
|
||||
}
|
||||
|
||||
@@ -80,9 +80,69 @@
|
||||
liste.append(li);
|
||||
}
|
||||
|
||||
await hinweiseLaden();
|
||||
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`,
|
||||
};
|
||||
|
||||
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; }
|
||||
|
||||
const liste = $('dran');
|
||||
liste.textContent = '';
|
||||
if (!daten.hinweise.length) { $('dran-block').hidden = true; return; }
|
||||
|
||||
for (const h of daten.hinweise) {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'dran__punkt';
|
||||
li.dataset.stufe = h.stufe;
|
||||
|
||||
/* Jeder Hinweis fuehrt irgendwohin -- ein Hinweis ohne Ziel ist
|
||||
nur ein schlechtes Gewissen. */
|
||||
const a = document.createElement('a');
|
||||
a.className = 'dran__link';
|
||||
a.href = h.ziel;
|
||||
|
||||
const text = document.createElement('span');
|
||||
text.className = 'dran__text';
|
||||
text.textContent = (EINZAHL[h.art] || ((n) => `${n} × ${h.text}`))(h.anzahl);
|
||||
|
||||
const pfeil = document.createElement('span');
|
||||
pfeil.className = 'dran__pfeil';
|
||||
pfeil.setAttribute('aria-hidden', 'true');
|
||||
pfeil.textContent = '→';
|
||||
|
||||
a.append(text, pfeil);
|
||||
li.append(a);
|
||||
liste.append(li);
|
||||
}
|
||||
$('dran-block').hidden = false;
|
||||
}
|
||||
|
||||
/* Die Zahlen kommen aus derselben Quelle wie das Brett und sind bereits
|
||||
serverseitig auf die eigene Rolle eingegrenzt. */
|
||||
const ZAHLEN = [
|
||||
|
||||
+11
-2
@@ -28,6 +28,14 @@
|
||||
<p class="unterzeile" id="rollentext">…</p>
|
||||
</section>
|
||||
|
||||
<!-- Was ist dran? Steht VOR den Zahlen, weil es der Unterschied
|
||||
zwischen "wie viel liegt an" und "was muss ich jetzt tun" ist.
|
||||
Bleibt komplett weg, wenn nichts anliegt. -->
|
||||
<section class="dran" id="dran-block" hidden>
|
||||
<p class="feldschild">Was ist dran</p>
|
||||
<ul class="dran__liste" id="dran"></ul>
|
||||
</section>
|
||||
|
||||
<!-- Zahlen zuerst: Das Konzept will "Prioritäten statt Datenfriedhof". -->
|
||||
<section class="zahlen-block">
|
||||
<p class="feldschild">Deine Aufgaben</p>
|
||||
@@ -42,8 +50,9 @@
|
||||
</section>
|
||||
|
||||
<p class="fuss">
|
||||
Anmeldung, Sitzung und Protokoll funktionieren bereits.
|
||||
Die Bereiche werden nach dem Phasenplan gebaut.
|
||||
„Was ist dran" führt keine eigene Liste, sondern zeigt, was in den Bereichen
|
||||
schon liegt – ein Punkt verschwindet von selbst, sobald die Sache erledigt ist.
|
||||
Angezeigt wird nur, was du ohnehin sehen darfst.
|
||||
</p>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user