Zahlen bekommen eine Oberflaeche, das Dashboard bekommt Zahlen
Der Server konnte seit gestern rechnen -- und niemand konnte etwas
eintragen. Ein Rechenwerk ohne Oberflaeche ist kein Modul, sondern ein
Versprechen. Das ist jetzt eingeloest:
* leistung.html: Wochenkarten (Wert, Vergleich zur Vorwoche,
Verlaufslinie), Ziele als Fortschrittsbalken, die letzten 14 Tage
zum Eintragen -- auch die LEEREN, denn eine Luecke ist selbst die
Auskunft. Import aus dem TikTok-Export mit Vorschau VOR dem
Schreiben.
* Kachel "Zahlen" als erste der Gruppe "Rund um den Creator", eigenes
Zeichen (steigende Linie, kein zweites Balkendiagramm).
* Dashboard: jede Creator-Karte traegt jetzt Diamanten, LIVE-Tage und
Verweildauer. Bis heute zeigte sie ausschliesslich ARBEIT -- ein
Creator konnte null ueberfaellige Aufgaben haben und gleichzeitig
seit drei Wochen einbrechen, und die Karte sah tadellos aus.
* Die Fruehwarnung steht oben im Dashboard. Sechs benannte Signale im
Klartext mit Beleg, bewusst OHNE Punktzahl -- ein Wert wie
"Abwanderungsrisiko 73" klingt nach Wissenschaft und ist eine
Behauptung, der man nicht widersprechen kann.
* chat.html?mit=<person>: der Weg von der Warnung ins Gespraech. Gab
es vorher nicht; ein Hinweis ohne Weg dahin ist nur ein schlechtes
Gewissen.
GEFUNDEN VON DEN PRUEFUNGEN, nicht von der Theorie:
1. Die Verlaufslinie zeichnete fuer vier der sieben Groessen NICHTS.
Der Server liefert im Verlauf nur drei Reihen; fuer den Rest kam
undefined an. `=== null` faengt das nicht, Number(undefined) ist
NaN, und ein <polyline points="NaN,NaN"> ist im DOM vorhanden und
auf dem Bildschirm unsichtbar -- ohne Fehlermeldung. Die Pruefung
misst deshalb die PUNKTE, nicht die Anwesenheit des Elements.
2. Fuenf Schriftgroessen im CHAT lagen unter 11,5 px (.68/.7 rem) und
waren seit vorgestern drin. Die Grundlinie der Groessenpruefung
stand auf 43, gemessen wurden 48. Nicht die Grundlinie angehoben,
sondern die fuenf Stellen behoben: Eine Grundlinie, die mitwaechst,
ist keine mehr.
pruef-leistung-optik.mjs: 57 Pruefungen, zwei echte Browser, Gegenprobe
zu jeder Aussage -- auch dazu, dass die Vorschau vor dem Bestaetigen
wirklich noch nichts geschrieben hat und dass ein Creator seine Zahlen
zwar SIEHT, sie aber weder eintragen noch die Fruehwarnung ueber sich
lesen kann (auch nicht ueber eine von Hand gebaute Anfrage).
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -178,7 +178,7 @@
|
||||
}
|
||||
.chat-raum__zeit {
|
||||
flex: none;
|
||||
font-size: .7rem; color: var(--text-still);
|
||||
font-size: .75rem; color: var(--text-still);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.chat-raum__vorschau {
|
||||
@@ -266,7 +266,7 @@
|
||||
grid-column: 1;
|
||||
width: 30px; height: 30px; border-radius: 50%;
|
||||
display: grid; place-items: center;
|
||||
font-size: .7rem; font-weight: 700;
|
||||
font-size: .75rem; font-weight: 700;
|
||||
color: var(--r);
|
||||
background: color-mix(in srgb, var(--r) 13%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--r) 28%, transparent);
|
||||
@@ -326,7 +326,7 @@
|
||||
margin-top: 4px;
|
||||
}
|
||||
.chat-nachricht__zeit {
|
||||
font-size: .68rem; color: var(--text-still);
|
||||
font-size: .75rem; color: var(--text-still);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* Der Zurücknehmen-Knopf erscheint erst beim Darüberfahren -- er ist
|
||||
@@ -334,7 +334,7 @@
|
||||
Geräten ohne Zeiger steht er immer da (siehe unten). */
|
||||
.chat-nachricht__weg-knopf {
|
||||
padding: 0; border: 0; background: none;
|
||||
font: inherit; font-size: .68rem;
|
||||
font: inherit; font-size: .75rem;
|
||||
color: var(--text-still); cursor: pointer;
|
||||
opacity: 0; transition: opacity .16s ease, color .16s ease;
|
||||
}
|
||||
@@ -389,7 +389,7 @@
|
||||
.chat-wahl__titel {
|
||||
margin: 0 0 7px;
|
||||
display: flex; align-items: center; gap: 7px;
|
||||
font-size: .68rem; font-weight: 700;
|
||||
font-size: .75rem; font-weight: 700;
|
||||
letter-spacing: .08em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,284 @@
|
||||
/* ===================================================================
|
||||
Zahlen. Baut auf gate.css, start.css und aufgaben.css auf.
|
||||
|
||||
DER GESTALTERISCHE GRUNDSATZ dieser Seite ist ein anderer als auf den
|
||||
uebrigen: Hier steht nicht die Flaeche im Vordergrund, sondern die
|
||||
ZAHL. Alles andere -- Rahmen, Beschriftung, Vergleich, Linie --
|
||||
ordnet sich ihr unter und wird leiser, je weiter es von ihr weg ist.
|
||||
|
||||
Deshalb:
|
||||
* Die Zahl in Tabellenziffern (font-variant-numeric), damit
|
||||
untereinanderstehende Werte auf derselben Stelle sitzen. Ohne das
|
||||
tanzen 1.240 und 987 gegeneinander, und man vergleicht schlechter.
|
||||
* Der Vergleich in GEDECKTEM Gruen/Rot, nicht in Signalfarbe. Ein
|
||||
Minus ist eine Auskunft, kein Alarm -- und die Seite soll
|
||||
augenschonend bleiben (Dauerregel).
|
||||
* Die Verlaufslinie ohne Achsen, Gitter und Beschriftung. Sie
|
||||
beantwortet genau eine Frage ("geht es hoch oder runter?"), und
|
||||
jede weitere Linie darin macht diese Antwort langsamer.
|
||||
=================================================================== */
|
||||
|
||||
/* ---------- Kopf ------------------------------------------------------- */
|
||||
|
||||
.leistung__wahl { display: grid; gap: 6px; min-width: 220px; }
|
||||
|
||||
/* Wie vollstaendig die Woche erfasst ist. Steht neben der Ueberschrift
|
||||
und nicht darunter: Wer die Zahlen liest, muss diesen Satz VORHER
|
||||
gesehen haben -- eine Woche aus zwei Tagen ist etwas anderes als eine
|
||||
aus sieben. */
|
||||
.leistung__erfassung {
|
||||
margin: 0; font-size: 13px; color: var(--text-still);
|
||||
}
|
||||
.leistung__erfassung[data-knapp="ja"] { color: #d9a441; }
|
||||
|
||||
.leistung__leer {
|
||||
margin: 0; padding: 18px; text-align: center;
|
||||
color: var(--text-leise); font-size: 14px; line-height: 1.6;
|
||||
}
|
||||
|
||||
.leistung-woche, .leistung-ziele, .leistung-tage { margin: 0 0 30px; }
|
||||
|
||||
/* ---------- Die Wochenkarten -------------------------------------------- */
|
||||
|
||||
.zahlkarten {
|
||||
display: grid; gap: 14px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
||||
}
|
||||
|
||||
.zahlkarte {
|
||||
position: relative; overflow: hidden;
|
||||
padding: 16px 16px 12px;
|
||||
background: var(--flaeche);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
display: grid; gap: 4px;
|
||||
/* Alle Karten gleich hoch, auch die ohne Verlaufslinie. Sonst
|
||||
entsteht eine Treppe, und eine Treppe liest man als Bedeutung
|
||||
("die kurze Karte ist weniger wichtig"), obwohl sie nur ein
|
||||
Nebeneffekt ist. */
|
||||
align-content: start; min-height: 132px;
|
||||
}
|
||||
|
||||
/* DIE LEITZAHL. Die Verweildauer ist seit 2026 die Groesse, an der der
|
||||
Algorithmus alles aufhaengt -- sie darf nicht eine von sieben
|
||||
gleichaussehenden Karten sein. Ein feiner Rand und ein Hauch Farbe
|
||||
reichen; ein Kasten in Signalfarbe waere Laerm. */
|
||||
.zahlkarte[data-leit="ja"] {
|
||||
border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
|
||||
background:
|
||||
radial-gradient(120% 100% at 0% 0%,
|
||||
color-mix(in srgb, var(--akzent) 9%, transparent), transparent 70%),
|
||||
var(--flaeche);
|
||||
}
|
||||
|
||||
.zahlkarte__name {
|
||||
margin: 0; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
}
|
||||
|
||||
.zahlkarte__wert {
|
||||
margin: 0; font-size: 30px; line-height: 1.1; font-weight: 650;
|
||||
color: var(--text);
|
||||
/* Tabellenziffern: gleiche Breite je Ziffer. Damit stehen die Werte
|
||||
mehrerer Karten auf derselben senkrechten Linie. */
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.zahlkarte__wandel {
|
||||
margin: 2px 0 0; font-size: 12.5px; line-height: 1.45;
|
||||
}
|
||||
/* Gedeckt, nicht grell. Gruen und Rot sind hier Auskunft, nicht Ampel --
|
||||
und beide bleiben ueber 4,5:1 gegen die Kachelflaeche. */
|
||||
.zahlkarte__wandel[data-richtung="hoch"] { color: #6fc38a; }
|
||||
.zahlkarte__wandel[data-richtung="runter"] { color: #e08c93; }
|
||||
.zahlkarte__wandel[data-richtung="gleich"] { color: var(--text-still); }
|
||||
|
||||
/* Die kleine Verlaufslinie. Sie sitzt unten in der Karte und laeuft
|
||||
ueber die ganze Breite -- als Untergrund, nicht als eigenes Bild. */
|
||||
.zahlkarte__linie {
|
||||
width: 100%; height: 30px; margin-top: 8px; display: block;
|
||||
overflow: visible;
|
||||
}
|
||||
.zahlkarte__linie polyline {
|
||||
fill: none; stroke: var(--akzent); stroke-width: 1.6;
|
||||
stroke-linejoin: round; stroke-linecap: round;
|
||||
/* Nicht mitskalieren: preserveAspectRatio="none" streckt das Bild in
|
||||
die Breite und wuerde die Linie sonst hauchduenn ziehen. */
|
||||
vector-effect: non-scaling-stroke;
|
||||
opacity: .8;
|
||||
}
|
||||
.zahlkarte__linie circle {
|
||||
fill: var(--akzent); stroke: none;
|
||||
/* Der letzte Punkt ist das Jetzt. Er wird durch die Streckung zum
|
||||
Ei -- deshalb bleibt er klein genug, dass es nicht auffaellt. */
|
||||
}
|
||||
.zahlkarte[data-leit="ja"] .zahlkarte__linie polyline { opacity: 1; }
|
||||
|
||||
/* ---------- Ziele -------------------------------------------------------- */
|
||||
|
||||
.zielbalken { display: grid; gap: 16px; }
|
||||
|
||||
.zielbalken__zeile {
|
||||
padding: 14px 16px;
|
||||
background: var(--flaeche);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
}
|
||||
.zielbalken__kopf {
|
||||
display: flex; justify-content: space-between; align-items: baseline;
|
||||
gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
|
||||
}
|
||||
.zielbalken__name { font-size: 14px; color: var(--text); }
|
||||
.zielbalken__zahl {
|
||||
font-size: 14px; color: var(--text-leise); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.zielbalken__spur {
|
||||
height: 10px; border-radius: 999px; overflow: hidden;
|
||||
background: rgba(150, 186, 220, 0.12);
|
||||
}
|
||||
.zielbalken__fuell {
|
||||
height: 100%; border-radius: 999px;
|
||||
background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
|
||||
transition: width var(--tempo);
|
||||
}
|
||||
/* Ein erreichtes Ziel wechselt die Farbe, nicht die Groesse. Ein
|
||||
springender Balken waere Bewegung ohne Aussage. */
|
||||
.zielbalken__fuell[data-voll="ja"] {
|
||||
background: linear-gradient(90deg, #2f8f5b, #55c184);
|
||||
}
|
||||
.zielbalken__anteil {
|
||||
margin: 8px 0 0; font-size: 12.5px; color: var(--text-still);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.zielbalken__fuell { transition: none; }
|
||||
}
|
||||
|
||||
/* ---------- Die Tageszeilen ---------------------------------------------- */
|
||||
|
||||
.tagetabelle {
|
||||
display: grid; gap: 8px;
|
||||
}
|
||||
|
||||
.tagzeile {
|
||||
display: grid; align-items: center; gap: 6px 16px;
|
||||
grid-template-columns: 74px 1fr auto;
|
||||
padding: 12px 16px;
|
||||
background: var(--flaeche);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
}
|
||||
/* EIN TAG OHNE EINTRAG BLEIBT SICHTBAR -- er ist selbst die Auskunft.
|
||||
Er wird nur leiser, damit die erfassten Tage vorn stehen. */
|
||||
.tagzeile[data-leer="ja"] {
|
||||
background: transparent;
|
||||
border-style: dashed;
|
||||
border-color: rgba(150, 186, 220, 0.13);
|
||||
}
|
||||
/* Woher die Zeile kommt. Ein schmaler Streifen links, kein Etikett:
|
||||
Man muss es wissen KOENNEN, nicht bei jedem Blick lesen. */
|
||||
.tagzeile[data-quelle="import"] {
|
||||
border-left: 3px solid color-mix(in srgb, var(--violett) 55%, transparent);
|
||||
}
|
||||
|
||||
.tagzeile__datum { display: grid; gap: 1px; }
|
||||
.tagzeile__wochentag {
|
||||
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
}
|
||||
.tagzeile__zahl {
|
||||
font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.tagzeile__werte {
|
||||
display: flex; flex-wrap: wrap; gap: 6px 22px; min-width: 0;
|
||||
}
|
||||
.tagzeile__wert { display: grid; gap: 1px; min-width: 0; }
|
||||
.tagzeile__wertname {
|
||||
font-size: 12px; letter-spacing: .05em; color: var(--text-still);
|
||||
}
|
||||
.tagzeile__wertzahl {
|
||||
font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.tagzeile__leer { font-size: 13.5px; color: var(--text-still); }
|
||||
|
||||
/* Die Notiz laeuft ueber die ganze Zeilenbreite unter den Werten --
|
||||
sie ist der Kontext, ohne den eine eingebrochene Zahl in die Irre
|
||||
fuehrt ("krank", "Technik ausgefallen"). */
|
||||
.tagzeile__notiz {
|
||||
grid-column: 2 / -1;
|
||||
margin: 2px 0 0; font-size: 13px; line-height: 1.5;
|
||||
color: var(--text-leise);
|
||||
}
|
||||
|
||||
.tagzeile__knopf {
|
||||
grid-row: 1; grid-column: 3;
|
||||
padding: 8px 14px; min-height: 38px;
|
||||
font: inherit; font-size: 13px;
|
||||
color: var(--text-leise); cursor: pointer;
|
||||
background: transparent;
|
||||
border: 1px solid var(--rand); border-radius: 999px;
|
||||
transition: color var(--tempo), border-color var(--tempo);
|
||||
}
|
||||
.tagzeile__knopf:hover, .tagzeile__knopf:focus-visible {
|
||||
color: var(--text); border-color: var(--rand-hell);
|
||||
}
|
||||
|
||||
/* ---------- Der Import --------------------------------------------------- */
|
||||
|
||||
.dialog--breit { max-width: 720px; }
|
||||
|
||||
.import-vorschau {
|
||||
margin: 4px 0 14px; padding: 16px;
|
||||
background: rgba(150, 186, 220, 0.05);
|
||||
border: 1px solid var(--rand);
|
||||
border-radius: var(--radius-klein);
|
||||
}
|
||||
|
||||
.import-zahlen { display: flex; flex-wrap: wrap; gap: 12px 28px; }
|
||||
.import-zahl { display: grid; gap: 2px; }
|
||||
.import-zahl__wert {
|
||||
font-size: 26px; font-weight: 650; line-height: 1.1;
|
||||
color: var(--text); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.import-zahl__name { font-size: 12px; color: var(--text-still); }
|
||||
.import-zahl[data-warn="ja"] .import-zahl__wert { color: #d9a441; }
|
||||
|
||||
.import-spalten {
|
||||
margin: 14px 0 0; font-size: 13px; line-height: 1.6;
|
||||
color: var(--text-leise);
|
||||
}
|
||||
.import-probleme {
|
||||
margin: 10px 0 0; padding-left: 20px;
|
||||
font-size: 12.5px; line-height: 1.7; color: #d9a441;
|
||||
}
|
||||
|
||||
/* ---------- Handy --------------------------------------------------------- */
|
||||
|
||||
@media (max-width: 640px) {
|
||||
/* Die Wochenkarten werden EINSPALTIG, nicht enger. Zwei Karten
|
||||
nebeneinander auf 360 px lassen fuer die Zahl 150 px uebrig -- ein
|
||||
vierstelliger Wert bricht dann um, und eine umgebrochene Zahl ist
|
||||
keine Zahl mehr. */
|
||||
.zahlkarten { grid-template-columns: 1fr; }
|
||||
.zahlkarte { min-height: 0; }
|
||||
.zahlkarte__wert { font-size: 27px; }
|
||||
|
||||
.leistung__wahl { min-width: 0; width: 100%; }
|
||||
|
||||
/* Die Tageszeile wird zweizeilig: Datum und Knopf oben, die Werte
|
||||
darunter. Drei Spalten nebeneinander quetschen den Knopf sonst auf
|
||||
unter 44 px -- und darunter trifft man ihn mit dem Daumen nicht
|
||||
mehr zuverlaessig. */
|
||||
.tagzeile {
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 10px 12px;
|
||||
}
|
||||
.tagzeile__datum { grid-row: 1; grid-column: 1; }
|
||||
.tagzeile__knopf { grid-row: 1; grid-column: 2; }
|
||||
.tagzeile__werte { grid-row: 2; grid-column: 1 / -1; gap: 8px 18px; }
|
||||
.tagzeile__notiz { grid-row: 3; grid-column: 1 / -1; }
|
||||
|
||||
.import-zahl__wert { font-size: 23px; }
|
||||
}
|
||||
@@ -172,6 +172,104 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
|
||||
}
|
||||
.creator__luecke:hover { color: var(--akzent); border-color: rgba(63, 189, 245, .35); }
|
||||
|
||||
/* ---------- Die Zahlen in der Karte (06.09.2026) --------------------------
|
||||
|
||||
Eine eigene Zeile unter den Arbeitszahlen, durch eine feine Linie
|
||||
abgesetzt: Es sind zwei verschiedene Sorten Auskunft. Oben steht, was
|
||||
WIR schulden (überfällig, im Review), unten, was der Kanal HERGIBT.
|
||||
Ohne die Trennung liest man sie als eine Reihe und vergleicht Zahlen,
|
||||
die nichts miteinander zu tun haben. */
|
||||
.kzahlen {
|
||||
display: flex; flex-wrap: wrap; gap: 8px 26px;
|
||||
margin: 12px 0 0; padding: 12px 0 0;
|
||||
border-top: 1px solid var(--rand);
|
||||
text-decoration: none; color: inherit;
|
||||
}
|
||||
.kzahlen:hover .kzahlen__wert, .kzahlen:focus-visible .kzahlen__wert { color: var(--akzent); }
|
||||
.kzahlen[data-leer="ja"] { border-top-style: dashed; }
|
||||
|
||||
.kzahlen__feld { display: grid; gap: 1px; min-width: 0; }
|
||||
.kzahlen__name {
|
||||
font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
|
||||
color: var(--text-still);
|
||||
}
|
||||
.kzahlen__wert {
|
||||
font-size: 1.05rem; color: var(--text);
|
||||
/* Tabellenziffern: gleiche Breite je Ziffer, damit die Werte mehrerer
|
||||
Karten untereinander auf derselben Stelle sitzen. */
|
||||
font-variant-numeric: tabular-nums;
|
||||
transition: color var(--tempo);
|
||||
}
|
||||
.kzahlen__wandel { margin-left: 7px; font-size: .8rem; }
|
||||
/* Gedeckt, nicht grell -- eine Auskunft, kein Alarm. */
|
||||
.kzahlen__wandel[data-richtung="hoch"] { color: #6fc38a; }
|
||||
.kzahlen__wandel[data-richtung="runter"] { color: #e08c93; }
|
||||
.kzahlen__wandel[data-richtung="gleich"] { color: var(--text-still); }
|
||||
|
||||
.kzahlen__leer { font-size: .82rem; color: var(--text-still); }
|
||||
|
||||
/* ---------- Die Frühwarnung ------------------------------------------------
|
||||
|
||||
Bernstein, nicht Rot. "Hier würde ich nachfassen" ist ein Auftrag,
|
||||
kein Fehler -- und Rot wäre auf einer Seite, die man jeden Morgen
|
||||
aufmacht, nach drei Tagen Tapete. Dieselbe Farbe wie das Merkzeichen
|
||||
in den Bereichen, aus demselben Grund. */
|
||||
.warnblock { margin: 0 0 26px; }
|
||||
|
||||
.warnliste {
|
||||
display: grid; gap: 12px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
}
|
||||
|
||||
.warnkarte {
|
||||
padding: 14px 16px 12px;
|
||||
background:
|
||||
radial-gradient(120% 100% at 0% 0%, rgba(217, 164, 65, .07), transparent 68%),
|
||||
var(--flaeche);
|
||||
border: 1px solid rgba(217, 164, 65, .28);
|
||||
border-radius: var(--radius-klein);
|
||||
}
|
||||
.warnkarte__kopf {
|
||||
display: flex; align-items: baseline; justify-content: space-between;
|
||||
gap: 12px; margin-bottom: 10px;
|
||||
}
|
||||
.warnkarte__name {
|
||||
font-size: 1rem; font-weight: 600; color: var(--text); text-decoration: none;
|
||||
}
|
||||
.warnkarte__name:hover, .warnkarte__name:focus-visible { color: var(--akzent); }
|
||||
|
||||
/* Der Weg zum Gespräch. Klein und ruhig -- er soll da sein, wenn man
|
||||
ihn sucht, und nicht mit dem Namen um Aufmerksamkeit ringen. */
|
||||
.warnkarte__weg {
|
||||
flex: none;
|
||||
padding: 5px 12px; min-height: 32px;
|
||||
display: inline-flex; align-items: center;
|
||||
font-size: .8rem; color: var(--text-leise); text-decoration: none;
|
||||
border: 1px solid var(--rand); border-radius: 999px;
|
||||
transition: color var(--tempo), border-color var(--tempo);
|
||||
}
|
||||
.warnkarte__weg:hover, .warnkarte__weg:focus-visible {
|
||||
color: var(--akzent); border-color: rgba(63, 189, 245, .35);
|
||||
}
|
||||
|
||||
.warnkarte__signale { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
|
||||
|
||||
.warnsignal {
|
||||
display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
|
||||
padding-left: 14px; position: relative;
|
||||
}
|
||||
/* Ein kleiner Punkt statt eines Aufzählungszeichens -- sechs Signale
|
||||
untereinander mit Spiegelstrichen sähen aus wie eine Mängelliste. */
|
||||
.warnsignal::before {
|
||||
content: ''; position: absolute; left: 0; top: .55em;
|
||||
width: 5px; height: 5px; border-radius: 50%;
|
||||
background: rgba(217, 164, 65, .75);
|
||||
}
|
||||
.warnsignal__text { font-size: .84rem; line-height: 1.55; color: var(--text); }
|
||||
.warnsignal__beleg {
|
||||
font-size: .8rem; color: var(--text-still); font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ---------- Rest ----------------------------------------------------------- */
|
||||
|
||||
.stand {
|
||||
@@ -188,6 +286,12 @@ a.wert:hover { border-color: var(--rand-hell); background: rgba(255, 255, 255, .
|
||||
.naechstes { justify-items: flex-start; text-align: left; }
|
||||
.summen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.stand { text-align: left; }
|
||||
|
||||
/* Drei Zahlen nebeneinander lassen auf 360 px je 100 px -- "Ø
|
||||
Verweildauer" bricht dann in drei Zeilen um. Zwei Spalten, die
|
||||
dritte darunter. */
|
||||
.kzahlen { gap: 10px 20px; }
|
||||
.warnliste { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
@@ -125,6 +125,16 @@
|
||||
],
|
||||
automation: [
|
||||
'M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'
|
||||
],
|
||||
/* Zahlen (06.09.2026): die Flaeche UNTER einem steigenden
|
||||
Linienzug. Bewusst kein zweites Balkendiagramm -- "Reports &
|
||||
Review" hat schon eins, und zwei Kacheln mit demselben Zeichen
|
||||
sind schlimmer als eine ohne: Man klickt zweimal falsch, bevor
|
||||
man merkt, dass es zwei verschiedene Sachen sind. Eine Linie
|
||||
ist auch die richtige Aussage: Es geht hier nicht um einen
|
||||
Bericht, sondern um einen VERLAUF. */
|
||||
zahlen: [
|
||||
'M4 16 9.5 11.5 13 14 20 6.5 20 19.5 4 19.5z'
|
||||
]
|
||||
};
|
||||
|
||||
@@ -247,6 +257,15 @@
|
||||
fuellung: ['M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'],
|
||||
linien: ['M13.2 3.2 6 13.4h5.2l-.8 7.4 7.6-10.6h-5.2z'],
|
||||
},
|
||||
zahlen: {
|
||||
fuellung: ['M4 16 9.5 11.5 13 14 20 6.5 20 19.5 4 19.5z'],
|
||||
/* Der Linienzug selbst, die Grundlinie darunter und ein Punkt am
|
||||
oberen Ende -- der letzte Messwert, das Jetzt. Genau dieselbe
|
||||
Bildsprache wie die kleine Linie in jeder Zahlkarte: Wer die
|
||||
Kachel gesehen hat, erkennt die Karten wieder. */
|
||||
linien: ['M4 16 9.5 11.5 13 14 20 6.5', 'M3.6 19.8h16.8',
|
||||
'M20 5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z'],
|
||||
},
|
||||
};
|
||||
|
||||
/* ---------- Die Bereiche -------------------------------------------------
|
||||
@@ -315,6 +334,22 @@
|
||||
Ein Creator sieht nur seine eigene Akte (dort steht auch sein
|
||||
Steckbrief mit drin, er hat ja nur eine Seite). Alle anderen
|
||||
bekommen beide Kacheln getrennt. */
|
||||
/* ZAHLEN STEHT VORN (06.09.2026).
|
||||
Der Workspace organisierte bis dahin ARBEIT hervorragend und
|
||||
wusste über das GESCHÄFT nichts -- keine Diamanten, keine
|
||||
LIVE-Tage, keine Verweildauer. Damit hing die ganze Gruppe
|
||||
hier in der Luft: Der Start-Check bewertet, ohne zu messen,
|
||||
der Report fragt "was hat funktioniert?" ohne Beleg, und das
|
||||
90-Tage-Ziel war ein Satz statt eines Fortschritts. Deshalb
|
||||
die erste Kachel der Gruppe, nicht die letzte.
|
||||
|
||||
Ton 4 (Violett) ist von Hand gewählt und nicht gerechnet: Er
|
||||
liegt weit von seinem Nachbarn 15 (Blaugrün) und von 8
|
||||
(Orangerot) darunter. Wer diese Gruppe umsortiert, lässt
|
||||
tools/kachel-farben.mjs neu laufen -- die Nachbarschaften
|
||||
haben sich durch diese Kachel geändert. */
|
||||
{ name: 'Zahlen', unter: 'Diamanten, LIVE-Tage, Verweildauer', zeichen: 'zahlen', ton: 4,
|
||||
rollen: ['admin', 'manager', 'creator', 'scout'], ziel: 'leistung.html', szene: 'arena' },
|
||||
{ name: 'Mein Steckbrief', unter: 'Dein Bild und deine Kanäle', zeichen: 'steckbrief', ton: 15,
|
||||
rollen: ['admin', 'manager', 'scout'], ziel: 'steckbrief.html', szene: 'halle' },
|
||||
{ name: 'Creator-Profile', unter: 'Ziele und 90-Tage-Plan', zeichen: 'profil', ton: 8,
|
||||
|
||||
@@ -637,7 +637,31 @@
|
||||
|
||||
/* Kommt man aus einer Benachrichtigung, steht das Gespräch in der
|
||||
Adresse -- dann direkt hinein. */
|
||||
const wunsch = Number(new URLSearchParams(location.search).get('raum'));
|
||||
if (Number.isInteger(wunsch) && wunsch > 0) await raumOeffnen(wunsch);
|
||||
const suche = new URLSearchParams(location.search);
|
||||
const wunsch = Number(suche.get('raum'));
|
||||
if (Number.isInteger(wunsch) && wunsch > 0) { await raumOeffnen(wunsch); return; }
|
||||
|
||||
/* ?mit=<Person> -- der Weg von woanders her (06.09.2026).
|
||||
Die Frühwarnung im Dashboard schlägt vor nachzufassen; ohne
|
||||
diesen Einstieg müsste man danach die Gesprächsliste durchsuchen
|
||||
oder ein Gespräch von Hand anlegen, das vielleicht schon
|
||||
existiert. `/direkt` legt beim ersten Mal an und findet beim
|
||||
zweiten dasselbe wieder -- ein Aufruf für beide Fälle.
|
||||
|
||||
Die Berechtigung prüft der Server (darfSchreibenMit). Eine von
|
||||
Hand getippte Personennummer bringt hier nichts. */
|
||||
const mit = Number(suche.get('mit'));
|
||||
if (!Number.isInteger(mit) || mit < 1) return;
|
||||
try {
|
||||
const a = await hole('/workspace/api/chat/direkt', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ mit }),
|
||||
});
|
||||
if (!a.ok) return; /* die Liste steht ja */
|
||||
const { raum_id: raumId } = await a.json();
|
||||
await raeumeLaden();
|
||||
await raumOeffnen(raumId);
|
||||
} catch { /* die Liste steht ja */ }
|
||||
})();
|
||||
})();
|
||||
|
||||
@@ -0,0 +1,590 @@
|
||||
/* =====================================================================
|
||||
leistung.js — die Zahlen über das Geschäft.
|
||||
|
||||
Stufe 1 des Plans vom 31.08.2026. Der Server rechnet (siehe
|
||||
workspace-leistung.js), diese Datei zeigt und nimmt entgegen.
|
||||
|
||||
DREI DINGE, die jede Zahl hier mitbringt -- sonst fliegt sie raus:
|
||||
1. den WERT
|
||||
2. den VERGLEICH zur Vorwoche ("+23 %")
|
||||
3. den VERLAUF als kleine Linie
|
||||
|
||||
Eine Zahl ohne diese drei ist eine Eitelkeitszahl. Sie sieht nach
|
||||
Auskunft aus, und man kann nichts entscheiden.
|
||||
===================================================================== */
|
||||
(() => {
|
||||
'use strict';
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
const LEITUNG = new Set(['admin', 'manager']);
|
||||
let ich = null;
|
||||
let creator = [];
|
||||
let offenerCreator = 0;
|
||||
let stand = null;
|
||||
let importText = '';
|
||||
let importSpalten = null;
|
||||
|
||||
async function hole(weg, einst) {
|
||||
const a = await fetch(weg, { credentials: 'same-origin', ...einst });
|
||||
if (a.status === 401) { location.assign('/workspace/'); throw new Error('weg'); }
|
||||
return a;
|
||||
}
|
||||
const melde = (t) => { $('fehler').textContent = t || ''; };
|
||||
|
||||
/* ---------- Zahlen lesbar machen ---------------------------------------- */
|
||||
|
||||
/** 1240 → "1.240". Tausenderpunkte, damit man vierstellige Zahlen
|
||||
* auf einen Blick erfasst. */
|
||||
const zahl = (n) => (n === null || n === undefined ? '–' : Number(n).toLocaleString('de-DE'));
|
||||
|
||||
/** Sekunden → "3:30 Min". Eine Verweildauer von 210 Sekunden liest
|
||||
* niemand als dreieinhalb Minuten, wenn sie als "210" dasteht. */
|
||||
function dauer(s) {
|
||||
if (s === null || s === undefined) return '–';
|
||||
const m = Math.floor(s / 60);
|
||||
const rest = Math.round(s % 60);
|
||||
return m ? `${m}:${String(rest).padStart(2, '0')} Min` : `${rest} Sek`;
|
||||
}
|
||||
|
||||
/** Minuten → "1 Std 35". */
|
||||
function stunden(min) {
|
||||
if (min === null || min === undefined) return '–';
|
||||
const h = Math.floor(min / 60);
|
||||
const m = min % 60;
|
||||
return h ? `${h} Std ${m}` : `${m} Min`;
|
||||
}
|
||||
|
||||
/* ---------- Die Wochenkarten -------------------------------------------- */
|
||||
|
||||
const FELDER = [
|
||||
/* Die Verweildauer steht VORN. Sie ist die Leitzahl (Recherche
|
||||
06.09.2026), nicht eine von acht. */
|
||||
{ key: 'verweildauer_s', name: 'Ø Verweildauer', form: dauer, leit: true },
|
||||
{ key: 'diamanten', name: 'Diamanten', form: zahl },
|
||||
{ key: 'gueltige_tage', name: 'LIVE-Tage', form: (n) => `${n} von 7` },
|
||||
{ key: 'dauer_min', name: 'LIVE-Zeit', form: stunden },
|
||||
{ key: 'zuschauer_avg', name: 'Ø Zuschauer', form: zahl },
|
||||
{ key: 'schenker', name: 'Schenker', form: zahl },
|
||||
{ key: 'follower_neu', name: 'Neue Follower', form: zahl },
|
||||
];
|
||||
|
||||
function wochenKartenBauen() {
|
||||
const ziel = $('zahlkarten');
|
||||
ziel.textContent = '';
|
||||
if (!stand) return;
|
||||
|
||||
for (const f of FELDER) {
|
||||
const w = stand.woche[f.key];
|
||||
if (!w) continue;
|
||||
|
||||
const karte = el('article', 'zahlkarte');
|
||||
if (f.leit) karte.dataset.leit = 'ja';
|
||||
|
||||
karte.append(el('p', 'zahlkarte__name', f.name));
|
||||
karte.append(el('p', 'zahlkarte__wert', f.form(w.wert)));
|
||||
|
||||
/* DER VERGLEICH. Ohne ihn ist die Zahl eine Behauptung. */
|
||||
const v = el('p', 'zahlkarte__wandel');
|
||||
if (w.wandel?.prozent !== undefined) {
|
||||
const p = w.wandel.prozent;
|
||||
v.dataset.richtung = p > 0 ? 'hoch' : p < 0 ? 'runter' : 'gleich';
|
||||
v.textContent = `${p > 0 ? '+' : ''}${p} % gegenüber der Vorwoche`;
|
||||
} else if (w.wandel?.neu) {
|
||||
/* "Von null auf 500" -- keine Prozent, sondern die Auskunft,
|
||||
die dahintersteckt. */
|
||||
v.dataset.richtung = 'hoch';
|
||||
v.textContent = 'neu – vorher nichts';
|
||||
} else {
|
||||
v.dataset.richtung = 'gleich';
|
||||
v.textContent = w.vorher === null ? 'kein Vergleich' : 'wie in der Vorwoche';
|
||||
}
|
||||
karte.append(v);
|
||||
|
||||
/* DER VERLAUF als kleine Linie. Acht Wochen -- ohne Richtung ist
|
||||
ein Wert nur ein Punkt. */
|
||||
const linie = verlaufsLinie(stand.verlauf, f.key);
|
||||
if (linie) karte.append(linie);
|
||||
|
||||
ziel.append(karte);
|
||||
}
|
||||
}
|
||||
|
||||
/** Eine kleine Linie aus den letzten acht Wochen.
|
||||
*
|
||||
* Selbst gezeichnet als SVG-Pfad, kein Diagrammpaket: Für acht
|
||||
* Punkte eine Bibliothek zu laden wäre in einem Haus mit drei
|
||||
* Abhängigkeiten die vierte -- und sie brächte Farben, Achsen und
|
||||
* Beschriftungen mit, die hier alle stören würden. */
|
||||
function verlaufsLinie(verlauf, key) {
|
||||
if (!Array.isArray(verlauf) || verlauf.length < 3) return null;
|
||||
/* == null FAENGT AUCH undefined -- und genau darauf kam es an.
|
||||
Der Server liefert im Verlauf nur drei der sieben Groessen
|
||||
(Diamanten, LIVE-Tage, Verweildauer); fuer alle anderen ist
|
||||
w[key] undefined. Mit `=== null` rutschte das durch, wurde zu
|
||||
Number(undefined) = NaN, und die Linie bekam Punkte wie
|
||||
"NaN,NaN" -- der Browser zeichnet dann gar nichts und sagt
|
||||
nichts. Eine leere Stelle in der Karte, ohne Fehlermeldung. */
|
||||
const werte = verlauf.map((w) => {
|
||||
const r = w?.[key];
|
||||
if (r === null || r === undefined) return null;
|
||||
const n = Number(r);
|
||||
return Number.isFinite(n) ? n : null;
|
||||
});
|
||||
const echte = werte.filter((w) => w !== null);
|
||||
if (echte.length < 3) return null;
|
||||
|
||||
const max = Math.max(...echte);
|
||||
const min = Math.min(...echte);
|
||||
const spanne = max - min || 1;
|
||||
const B = 100, H = 26;
|
||||
|
||||
const punkte = werte.map((w, i) => {
|
||||
if (w === null) return null;
|
||||
const x = (i / (werte.length - 1)) * B;
|
||||
/* Von unten nach oben: In SVG wächst y nach unten. */
|
||||
const y = H - ((w - min) / spanne) * (H - 4) - 2;
|
||||
return `${x.toFixed(1)},${y.toFixed(1)}`;
|
||||
}).filter(Boolean);
|
||||
|
||||
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
svg.setAttribute('class', 'zahlkarte__linie');
|
||||
svg.setAttribute('viewBox', `0 0 ${B} ${H}`);
|
||||
svg.setAttribute('preserveAspectRatio', 'none');
|
||||
svg.setAttribute('aria-hidden', 'true');
|
||||
svg.innerHTML = `<polyline points="${punkte.join(' ')}" />`;
|
||||
/* Der letzte Punkt bekommt einen Kreis -- er ist das Jetzt. */
|
||||
const letzter = punkte[punkte.length - 1].split(',');
|
||||
svg.innerHTML += `<circle cx="${letzter[0]}" cy="${letzter[1]}" r="2.2" />`;
|
||||
return svg;
|
||||
}
|
||||
|
||||
/* ---------- Ziele als Fortschritt --------------------------------------- */
|
||||
|
||||
function zieleBauen() {
|
||||
const ziel = $('zielbalken');
|
||||
ziel.textContent = '';
|
||||
const z = stand?.ziele;
|
||||
$('ziele-aendern').hidden = !darfEintragen();
|
||||
|
||||
if (!z || (!z.diamanten && !z.tage && !z.verweildauer)) {
|
||||
ziel.append(el('p', 'leistung__leer',
|
||||
darfEintragen()
|
||||
? 'Noch keine Ziele gesetzt. Aus „mehr Reichweite" wird hier eine prüfbare Größe.'
|
||||
: 'Noch keine Ziele gesetzt.'));
|
||||
return;
|
||||
}
|
||||
|
||||
for (const [key, name, form] of [
|
||||
['diamanten', 'Diamanten', zahl],
|
||||
['tage', 'LIVE-Tage', (n) => String(n)],
|
||||
['verweildauer', 'Ø Verweildauer', dauer],
|
||||
]) {
|
||||
const t = z[key];
|
||||
if (!t) continue;
|
||||
const zeile = el('div', 'zielbalken__zeile');
|
||||
const kopf = el('div', 'zielbalken__kopf');
|
||||
kopf.append(el('span', 'zielbalken__name', name));
|
||||
kopf.append(el('span', 'zielbalken__zahl', `${form(t.ist)} von ${form(t.ziel)}`));
|
||||
zeile.append(kopf);
|
||||
|
||||
const spur = el('div', 'zielbalken__spur');
|
||||
const fuell = el('div', 'zielbalken__fuell');
|
||||
/* Über 100 % wird nicht breiter -- der Balken bliebe sonst aus
|
||||
dem Kasten hängen. Die Zahl daneben sagt es trotzdem. */
|
||||
fuell.style.width = `${Math.min(100, Math.max(0, t.anteil))}%`;
|
||||
if (t.anteil >= 100) fuell.dataset.voll = 'ja';
|
||||
spur.append(fuell);
|
||||
zeile.append(spur);
|
||||
zeile.append(el('p', 'zielbalken__anteil',
|
||||
t.anteil >= 100 ? `Ziel erreicht (${t.anteil} %)` : `${t.anteil} %`));
|
||||
ziel.append(zeile);
|
||||
}
|
||||
}
|
||||
|
||||
const darfEintragen = () => LEITUNG.has(ich?.rolle) || ich?.rolle === 'scout';
|
||||
|
||||
/* ---------- Die Tageszeilen --------------------------------------------- */
|
||||
|
||||
async function tageLaden() {
|
||||
let tage = [];
|
||||
try {
|
||||
const a = await hole(`/workspace/api/leistung/${offenerCreator}/tage?tage=21`);
|
||||
if (a.ok) tage = (await a.json()).tage || [];
|
||||
} catch { return; }
|
||||
|
||||
const ziel = $('tagetabelle');
|
||||
ziel.textContent = '';
|
||||
const nach = new Map(tage.map((t) => [t.tag, t]));
|
||||
|
||||
/* DIE LETZTEN 14 TAGE, auch die ohne Eintrag. Nur die vorhandenen
|
||||
zu zeigen hieße, dass eine Lücke unsichtbar ist -- und genau die
|
||||
Lücke ist die Auskunft: Da war nichts, oder es wurde nicht
|
||||
erfasst. */
|
||||
for (let i = 0; i < 14; i++) {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() - i);
|
||||
const p = (n) => String(n).padStart(2, '0');
|
||||
const tag = `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`;
|
||||
const z = nach.get(tag);
|
||||
|
||||
const zeile = el('div', 'tagzeile');
|
||||
if (!z) zeile.dataset.leer = 'ja';
|
||||
if (z?.quelle === 'import') zeile.dataset.quelle = 'import';
|
||||
|
||||
const datum = el('div', 'tagzeile__datum');
|
||||
datum.append(el('span', 'tagzeile__wochentag',
|
||||
d.toLocaleDateString('de-DE', { weekday: 'short' })));
|
||||
datum.append(el('span', 'tagzeile__zahl',
|
||||
d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' })));
|
||||
zeile.append(datum);
|
||||
|
||||
const werte = el('div', 'tagzeile__werte');
|
||||
if (z) {
|
||||
werte.append(wert('Diamanten', zahl(z.diamanten)));
|
||||
werte.append(wert('LIVE', stunden(z.dauer_min)));
|
||||
werte.append(wert('Verweil', dauer(z.verweildauer_s)));
|
||||
werte.append(wert('Ø Zusch.', zahl(z.zuschauer_avg)));
|
||||
} else {
|
||||
werte.append(el('span', 'tagzeile__leer', 'nichts erfasst'));
|
||||
}
|
||||
zeile.append(werte);
|
||||
|
||||
if (z?.notiz) {
|
||||
const n = el('p', 'tagzeile__notiz', z.notiz);
|
||||
zeile.append(n);
|
||||
}
|
||||
|
||||
if (darfEintragen()) {
|
||||
const knopf = el('button', 'tagzeile__knopf', z ? 'ändern' : 'eintragen');
|
||||
knopf.type = 'button';
|
||||
knopf.setAttribute('aria-label',
|
||||
`${tag} ${z ? 'ändern' : 'eintragen'}`);
|
||||
knopf.addEventListener('click', () => tagOeffnen(tag, z));
|
||||
zeile.append(knopf);
|
||||
}
|
||||
ziel.append(zeile);
|
||||
}
|
||||
}
|
||||
|
||||
function wert(name, text) {
|
||||
const s = el('span', 'tagzeile__wert');
|
||||
s.append(el('span', 'tagzeile__wertname', name));
|
||||
s.append(el('span', 'tagzeile__wertzahl', text));
|
||||
return s;
|
||||
}
|
||||
|
||||
/* ---------- Eintragen ---------------------------------------------------- */
|
||||
|
||||
function tagOeffnen(tag, z) {
|
||||
const d = $('tag-dialog');
|
||||
d.dataset.tag = tag;
|
||||
const datum = new Date(tag + 'T12:00:00');
|
||||
$('tag-titel').textContent = datum.toLocaleDateString('de-DE',
|
||||
{ weekday: 'long', day: 'numeric', month: 'long' });
|
||||
$('tag-unter').textContent = z?.quelle === 'import'
|
||||
? 'Diese Zeile kam aus einer Datei. Änderungen von Hand bleiben erhalten, bis erneut eingelesen wird.'
|
||||
: 'Leer lassen heißt: nicht gemessen. Eine Null ist etwas anderes.';
|
||||
|
||||
$('f-diamanten').value = z?.diamanten ?? '';
|
||||
$('f-dauer').value = z?.dauer_min ?? '';
|
||||
$('f-verweildauer').value = z?.verweildauer_s ?? '';
|
||||
$('f-zavg').value = z?.zuschauer_avg ?? '';
|
||||
$('f-zmax').value = z?.zuschauer_max ?? '';
|
||||
$('f-schenker').value = z?.schenker ?? '';
|
||||
$('f-follower').value = z?.follower_neu ?? '';
|
||||
$('f-notiz').value = z?.notiz ?? '';
|
||||
$('tag-fehler').textContent = '';
|
||||
$('tag-loeschen').hidden = !z;
|
||||
d.showModal();
|
||||
$('f-diamanten').focus();
|
||||
}
|
||||
|
||||
async function tagSpeichern(e) {
|
||||
e.preventDefault();
|
||||
const d = $('tag-dialog');
|
||||
const tag = d.dataset.tag;
|
||||
const n = (id) => {
|
||||
const v = $(id).value.trim();
|
||||
return v === '' ? null : Number(v);
|
||||
};
|
||||
const dauerMin = n('f-dauer');
|
||||
|
||||
try {
|
||||
const a = await hole(`/workspace/api/leistung/${offenerCreator}/${tag}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
diamanten: n('f-diamanten'),
|
||||
dauer_min: dauerMin,
|
||||
/* Ein gültiger Tag ist ein Tag mit LIVE-Zeit -- daraus
|
||||
geschlossen, statt ein weiteres Kästchen zu verlangen. */
|
||||
gueltiger_tag: dauerMin > 0,
|
||||
verweildauer_s: n('f-verweildauer'),
|
||||
zuschauer_avg: n('f-zavg'),
|
||||
zuschauer_max: n('f-zmax'),
|
||||
schenker: n('f-schenker'),
|
||||
follower_neu: n('f-follower'),
|
||||
notiz: $('f-notiz').value,
|
||||
}),
|
||||
});
|
||||
if (!a.ok) {
|
||||
$('tag-fehler').textContent = (await a.json().catch(() => ({}))).fehler || 'Ging nicht.';
|
||||
return;
|
||||
}
|
||||
d.close();
|
||||
await allesLaden();
|
||||
} catch { /* umgeleitet */ }
|
||||
}
|
||||
|
||||
async function tagLoeschen() {
|
||||
const d = $('tag-dialog');
|
||||
if (!window.confirm('Diese Zeile wirklich löschen? Die Zahlen des Tages sind dann weg.')) return;
|
||||
try {
|
||||
const a = await hole(`/workspace/api/leistung/${offenerCreator}/${d.dataset.tag}`,
|
||||
{ method: 'DELETE' });
|
||||
if (!a.ok) { $('tag-fehler').textContent = 'Ging nicht.'; return; }
|
||||
d.close();
|
||||
await allesLaden();
|
||||
} catch { /* umgeleitet */ }
|
||||
}
|
||||
|
||||
/* ---------- Ziele ------------------------------------------------------- */
|
||||
|
||||
function zieleOeffnen() {
|
||||
const z = stand?.ziele;
|
||||
$('z-diamanten').value = z?.diamanten?.ziel ?? '';
|
||||
$('z-tage').value = z?.tage?.ziel ?? '';
|
||||
$('z-verweildauer').value = z?.verweildauer?.ziel ?? '';
|
||||
$('ziele-fehler').textContent = '';
|
||||
$('ziele-dialog').showModal();
|
||||
}
|
||||
|
||||
async function zieleSpeichern(e) {
|
||||
e.preventDefault();
|
||||
const n = (id) => {
|
||||
const v = $(id).value.trim();
|
||||
return v === '' ? null : Number(v);
|
||||
};
|
||||
try {
|
||||
const a = await hole(`/workspace/api/leistung/${offenerCreator}/ziele`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
diamanten_woche: n('z-diamanten'),
|
||||
tage_woche: n('z-tage'),
|
||||
verweildauer_s: n('z-verweildauer'),
|
||||
}),
|
||||
});
|
||||
if (!a.ok) { $('ziele-fehler').textContent = 'Ging nicht.'; return; }
|
||||
$('ziele-dialog').close();
|
||||
await allesLaden();
|
||||
} catch { /* umgeleitet */ }
|
||||
}
|
||||
|
||||
/* ---------- Import ------------------------------------------------------ */
|
||||
|
||||
async function dateiGewaehlt(e) {
|
||||
const datei = e.target.files?.[0];
|
||||
if (!datei) return;
|
||||
$('import-fehler').textContent = '';
|
||||
$('vorschau').hidden = true;
|
||||
$('import-los').disabled = true;
|
||||
|
||||
try {
|
||||
importText = await datei.text();
|
||||
} catch {
|
||||
$('import-fehler').textContent = 'Die Datei ließ sich nicht lesen.';
|
||||
return;
|
||||
}
|
||||
|
||||
/* ERST DIE VORSCHAU. Ein Import, der sofort schreibt, ist bei
|
||||
einer falsch zugeordneten Spalte nicht mehr zurückzuholen. */
|
||||
try {
|
||||
const a = await hole(`/workspace/api/leistung/${offenerCreator}/import/vorschau`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text: importText }),
|
||||
});
|
||||
const v = await a.json();
|
||||
if (!a.ok) {
|
||||
$('import-fehler').textContent = v.fehler || 'Die Datei konnte nicht gelesen werden.';
|
||||
return;
|
||||
}
|
||||
importSpalten = v.spalten;
|
||||
vorschauZeigen(v);
|
||||
} catch { /* umgeleitet */ }
|
||||
}
|
||||
|
||||
function vorschauZeigen(v) {
|
||||
const ziel = $('vorschau');
|
||||
ziel.textContent = '';
|
||||
ziel.hidden = false;
|
||||
|
||||
/* Die ZAHLEN stehen vorn: Wer übernimmt, will wissen "wie viele",
|
||||
nicht "welche". */
|
||||
const zeile = el('div', 'import-zahlen');
|
||||
zeile.append(importZahl(v.neu, 'neu'));
|
||||
zeile.append(importZahl(v.ersetzt, v.ersetzt === 1 ? 'wird ersetzt' : 'werden ersetzt'));
|
||||
if (v.fehlerhaft) zeile.append(importZahl(v.fehlerhaft, 'unlesbar', true));
|
||||
ziel.append(zeile);
|
||||
|
||||
/* Welche Spalten erkannt wurden -- damit man merkt, wenn etwas
|
||||
fehlt. Eine stillschweigend nicht erkannte Spalte wäre eine
|
||||
Zahl, die einfach nie ankommt. */
|
||||
const erkannt = Object.keys(importSpalten || {}).filter((k) => k !== 'tag');
|
||||
const namen = {
|
||||
diamanten: 'Diamanten', dauer_min: 'LIVE-Dauer', zuschauer_avg: 'Ø Zuschauer',
|
||||
zuschauer_max: 'Spitze', verweildauer_s: 'Verweildauer',
|
||||
schenker: 'Schenker', follower_neu: 'Follower',
|
||||
};
|
||||
ziel.append(el('p', 'import-spalten',
|
||||
erkannt.length
|
||||
? 'Erkannt: ' + erkannt.map((k) => namen[k] || k).join(' · ')
|
||||
: 'Außer dem Datum wurde keine Spalte erkannt – die Zahlen bleiben leer.'));
|
||||
|
||||
if (v.probleme?.length) {
|
||||
const liste = el('ul', 'import-probleme');
|
||||
for (const p of v.probleme) {
|
||||
liste.append(el('li', null, `Zeile ${p.zeile}: ${p.grund}`));
|
||||
}
|
||||
ziel.append(liste);
|
||||
}
|
||||
|
||||
$('import-los').disabled = !(v.neu + v.ersetzt);
|
||||
}
|
||||
|
||||
function importZahl(n, name, warn = false) {
|
||||
const k = el('div', 'import-zahl');
|
||||
if (warn) k.dataset.warn = 'ja';
|
||||
k.append(el('span', 'import-zahl__wert', String(n)));
|
||||
k.append(el('span', 'import-zahl__name', name));
|
||||
return k;
|
||||
}
|
||||
|
||||
async function importUebernehmen(e) {
|
||||
e.preventDefault();
|
||||
if (!importText) return;
|
||||
const knopf = $('import-los');
|
||||
knopf.disabled = true;
|
||||
try {
|
||||
const a = await hole(`/workspace/api/leistung/${offenerCreator}/import`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text: importText, spalten: importSpalten }),
|
||||
});
|
||||
const r = await a.json();
|
||||
if (!a.ok) { $('import-fehler').textContent = r.fehler || 'Ging nicht.'; return; }
|
||||
$('import-dialog').close();
|
||||
$('datei').value = '';
|
||||
importText = '';
|
||||
await allesLaden();
|
||||
melde(`${r.geschrieben} Tage übernommen.`);
|
||||
setTimeout(() => melde(''), 5000);
|
||||
} catch { /* umgeleitet */ } finally { knopf.disabled = false; }
|
||||
}
|
||||
|
||||
/* ---------- Laden ------------------------------------------------------- */
|
||||
|
||||
async function allesLaden() {
|
||||
if (!offenerCreator) return;
|
||||
try {
|
||||
const a = await hole(`/workspace/api/leistung/${offenerCreator}`);
|
||||
if (!a.ok) { melde('Die Zahlen konnten nicht geladen werden.'); return; }
|
||||
stand = await a.json();
|
||||
} catch { return; }
|
||||
|
||||
$('woche').hidden = false;
|
||||
$('ziele-block').hidden = false;
|
||||
$('tage-block').hidden = false;
|
||||
|
||||
/* WIE VOLLSTÄNDIG IST DIE WOCHE? Eine Zahl aus zwei von sieben
|
||||
Tagen ist etwas anderes als eine aus sieben -- ohne diesen
|
||||
Hinweis hält man eine halbe Woche für einen Einbruch. */
|
||||
const e = stand.erfassung;
|
||||
$('erfassung').textContent = e.tage >= 7
|
||||
? 'alle 7 Tage erfasst'
|
||||
: `${e.tage} von 7 Tagen erfasst`;
|
||||
$('erfassung').dataset.knapp = e.tage < 4 ? 'ja' : '';
|
||||
|
||||
wochenKartenBauen();
|
||||
zieleBauen();
|
||||
await tageLaden();
|
||||
}
|
||||
|
||||
/* ---------- Start -------------------------------------------------------- */
|
||||
|
||||
$('tag-form').addEventListener('submit', tagSpeichern);
|
||||
$('tag-zu').addEventListener('click', () => $('tag-dialog').close());
|
||||
$('tag-loeschen').addEventListener('click', tagLoeschen);
|
||||
$('ziele-aendern').addEventListener('click', zieleOeffnen);
|
||||
$('ziele-form').addEventListener('submit', zieleSpeichern);
|
||||
$('ziele-zu').addEventListener('click', () => $('ziele-dialog').close());
|
||||
$('import-oeffnen').addEventListener('click', () => {
|
||||
$('vorschau').hidden = true;
|
||||
$('import-los').disabled = true;
|
||||
$('import-fehler').textContent = '';
|
||||
$('import-dialog').showModal();
|
||||
});
|
||||
$('import-zu').addEventListener('click', () => $('import-dialog').close());
|
||||
$('datei').addEventListener('change', dateiGewaehlt);
|
||||
$('import-form').addEventListener('submit', importUebernehmen);
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const a = await hole('/workspace/api/ich');
|
||||
if (!a.ok) { location.assign('/workspace/'); return; }
|
||||
ich = await a.json();
|
||||
} catch { return; }
|
||||
window.werZeigen?.(ich);
|
||||
|
||||
/* Ein Creator sieht nur sich selbst -- ohne Auswahlfeld, das nur
|
||||
einen Eintrag hätte. */
|
||||
if (ich.rolle === 'creator') {
|
||||
offenerCreator = ich.id;
|
||||
await allesLaden();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const { creator: liste } = await (await hole('/workspace/api/leistung')).json();
|
||||
creator = liste || [];
|
||||
} catch { return; }
|
||||
|
||||
if (!creator.length) {
|
||||
melde('Dir ist noch kein Creator zugeordnet.');
|
||||
return;
|
||||
}
|
||||
|
||||
$('creator-wahl').hidden = false;
|
||||
for (const c of creator) {
|
||||
const o = document.createElement('option');
|
||||
o.value = String(c.id);
|
||||
/* Die wichtigste Zahl steht gleich in der Auswahl -- so sieht
|
||||
man beim Umschalten, wo etwas los ist. */
|
||||
o.textContent = c.tage_erfasst
|
||||
? `${c.name} — ${zahl(c.diamanten)} Diamanten`
|
||||
: `${c.name} — noch keine Zahlen`;
|
||||
$('creator').append(o);
|
||||
}
|
||||
/* Vom Dashboard kommend: direkt zur richtigen Person. */
|
||||
const wunsch = Number(new URLSearchParams(location.search).get('creator'));
|
||||
offenerCreator = creator.some((c) => c.id === wunsch) ? wunsch : creator[0].id;
|
||||
$('creator').value = String(offenerCreator);
|
||||
window.personenwahl?.('creator');
|
||||
|
||||
$('creator').addEventListener('change', async () => {
|
||||
offenerCreator = Number($('creator').value);
|
||||
history.replaceState(null, '', `leistung.html?creator=${offenerCreator}`);
|
||||
await allesLaden();
|
||||
});
|
||||
|
||||
await allesLaden();
|
||||
})();
|
||||
})();
|
||||
@@ -66,7 +66,65 @@
|
||||
return a;
|
||||
}
|
||||
|
||||
function karte(c, checkGesamt, eigen) {
|
||||
/* ---------- Die Zahlen in der Karte -------------------------------------
|
||||
|
||||
Bis zum 06.09.2026 zeigte diese Karte ausschliesslich ARBEIT:
|
||||
überfällig, offen, in Arbeit, im Review. Über das GESCHÄFT stand
|
||||
hier nichts -- und damit fehlte ausgerechnet die Zeile, wegen der
|
||||
man ein Dashboard aufmacht. Ein Creator konnte null überfällige
|
||||
Aufgaben haben und gleichzeitig seit drei Wochen einbrechen; die
|
||||
Karte sah dann tadellos aus.
|
||||
|
||||
Drei Zahlen, nicht sieben: Diamanten (das Ergebnis), LIVE-Tage (die
|
||||
Anwesenheit) und die Verweildauer (die Leitgrösse, an der der
|
||||
Algorithmus alles aufhängt). Alles Weitere steht eine Seite weiter.
|
||||
Eine Karte, die alles zeigt, zeigt nichts. */
|
||||
const zahlDe = (n) => Number(n || 0).toLocaleString('de-DE');
|
||||
|
||||
function dauerKurz(s) {
|
||||
if (s === null || s === undefined) return '–';
|
||||
const m = Math.floor(s / 60);
|
||||
return m ? `${m}:${String(Math.round(s % 60)).padStart(2, '0')}` : `${Math.round(s)}s`;
|
||||
}
|
||||
|
||||
function zahlenZeile(z, creatorId) {
|
||||
const a = el('a', 'kzahlen');
|
||||
a.href = `leistung.html?creator=${creatorId}`;
|
||||
|
||||
/* KEINE ZAHLEN IST EINE EIGENE AUSSAGE, keine Null. Wer hier "0
|
||||
Diamanten" schreibt, behauptet eine Messung, die es nicht gab --
|
||||
und der Betreuer sucht danach den Einbruch statt den fehlenden
|
||||
Export. */
|
||||
if (!z || !z.tage_erfasst) {
|
||||
a.dataset.leer = 'ja';
|
||||
a.append(el('span', 'kzahlen__leer', 'Für diese Woche sind noch keine Zahlen erfasst'));
|
||||
return a;
|
||||
}
|
||||
|
||||
const feld = (name, text, extra) => {
|
||||
const s = el('span', 'kzahlen__feld');
|
||||
s.append(el('span', 'kzahlen__name', name));
|
||||
s.append(el('span', 'kzahlen__wert', text));
|
||||
if (extra) s.append(extra);
|
||||
return s;
|
||||
};
|
||||
|
||||
/* Der Vergleich zur Vorwoche steht DIREKT an der Zahl. Ohne ihn ist
|
||||
"1.240" eine Behauptung; mit ihm ist es eine Auskunft. */
|
||||
let wandel = null;
|
||||
if (z.wandel_diamanten?.prozent !== undefined) {
|
||||
const p = z.wandel_diamanten.prozent;
|
||||
wandel = el('span', 'kzahlen__wandel', `${p > 0 ? '+' : ''}${p} %`);
|
||||
wandel.dataset.richtung = p > 0 ? 'hoch' : p < 0 ? 'runter' : 'gleich';
|
||||
}
|
||||
|
||||
a.append(feld('Diamanten', zahlDe(z.diamanten), wandel));
|
||||
a.append(feld('LIVE-Tage', `${z.gueltige_tage} / 7`));
|
||||
a.append(feld('Ø Verweildauer', dauerKurz(z.verweildauer_s)));
|
||||
return a;
|
||||
}
|
||||
|
||||
function karte(c, checkGesamt, eigen, zahlen) {
|
||||
const k = el('article', 'creator');
|
||||
if (c.ueberfaellig > 0 || c.dringend > 0) k.dataset.achtung = 'ja';
|
||||
|
||||
@@ -114,6 +172,8 @@
|
||||
werte.append(wert(c.erledigt30, 'erledigt 30 T.', 'aufgaben.html'));
|
||||
k.append(werte);
|
||||
|
||||
k.append(zahlenZeile(zahlen, c.id));
|
||||
|
||||
/* Start-Check als Balken statt als Zahl -- "4 von 16" liest man,
|
||||
ein Viertel gefuellt sieht man. */
|
||||
const check = el('a', 'fortschritt');
|
||||
@@ -173,6 +233,57 @@
|
||||
s.hidden = false;
|
||||
}
|
||||
|
||||
/* ---------- Die Frühwarnung ---------------------------------------------
|
||||
|
||||
Sechs benannte Signale, jedes im Klartext und mit Beleg. Bewusst
|
||||
keine Punktzahl: "Abwanderungsrisiko 73" klingt nach Wissenschaft,
|
||||
ist aber eine Behauptung, der man nicht widersprechen kann. Sechs
|
||||
Sätze, die man einzeln bestreiten kann, sind ehrlicher -- und
|
||||
handlungsfähiger, denn jeder sagt schon, was zu tun wäre. */
|
||||
async function fruehwarnungLaden() {
|
||||
let d;
|
||||
try {
|
||||
const a = await hole('/workspace/api/fruehwarnung');
|
||||
if (!a.ok) return; /* still bleiben, nicht stören */
|
||||
d = await a.json();
|
||||
} catch { return; }
|
||||
|
||||
const leute = d.creator || [];
|
||||
if (!leute.length) return; /* nichts zu melden ist kein Block */
|
||||
|
||||
const ziel = $('warnliste');
|
||||
ziel.textContent = '';
|
||||
|
||||
for (const c of leute) {
|
||||
const k = el('article', 'warnkarte');
|
||||
|
||||
const kopf = el('div', 'warnkarte__kopf');
|
||||
const name = el('a', 'warnkarte__name', c.name);
|
||||
name.href = `leistung.html?creator=${c.id}`;
|
||||
kopf.append(name);
|
||||
/* Der Weg zum Gespräch steht gleich daneben. Bei vier der sechs
|
||||
Signale ist "einmal schreiben" die richtige nächste Handlung --
|
||||
und ein Hinweis ohne Weg dahin ist nur ein schlechtes
|
||||
Gewissen. */
|
||||
const schreiben = el('a', 'warnkarte__weg', 'Schreiben');
|
||||
schreiben.href = `chat.html?mit=${c.id}`;
|
||||
kopf.append(schreiben);
|
||||
k.append(kopf);
|
||||
|
||||
const liste = el('ul', 'warnkarte__signale');
|
||||
for (const s of c.signale || []) {
|
||||
const li = el('li', 'warnsignal');
|
||||
li.dataset.art = s.art;
|
||||
li.append(el('span', 'warnsignal__text', s.text));
|
||||
if (s.beleg) li.append(el('span', 'warnsignal__beleg', s.beleg));
|
||||
liste.append(li);
|
||||
}
|
||||
k.append(liste);
|
||||
ziel.append(k);
|
||||
}
|
||||
$('fruehwarnung').hidden = false;
|
||||
}
|
||||
|
||||
(async () => {
|
||||
let ich;
|
||||
try {
|
||||
@@ -229,6 +340,23 @@
|
||||
|
||||
summenZeigen(creator);
|
||||
|
||||
/* Die Zahlen kommen aus EINER zusätzlichen Abfrage für alle Creator,
|
||||
nicht aus einer je Karte. Bei zwölf Creators wären das zwölf
|
||||
Anfragen, die alle dasselbe tun -- und die Seite stünde so lange
|
||||
halb leer.
|
||||
|
||||
Und sie darf nicht scheitern dürfen: Wenn das Zahlen-Modul
|
||||
stolpert, bleibt die Übersicht wie vorher stehen, nur ohne die
|
||||
drei Zeilen. Eine leere Seite wäre der schlechtere Ausgang. */
|
||||
let zahlenNach = new Map();
|
||||
try {
|
||||
const a = await hole('/workspace/api/leistung');
|
||||
if (a.ok) {
|
||||
const z = await a.json();
|
||||
zahlenNach = new Map((z.creator || []).map((c) => [c.id, c]));
|
||||
}
|
||||
} catch { /* die Karten stehen auch ohne */ }
|
||||
|
||||
/* Wo etwas brennt, steht oben. Sortiert wird nach dem, was Handlung
|
||||
verlangt -- nicht alphabetisch. Bei Gleichstand dann doch nach
|
||||
Namen, damit die Reihenfolge stabil bleibt. */
|
||||
@@ -237,9 +365,16 @@
|
||||
|| String(a.name).localeCompare(String(b.name), 'de'));
|
||||
|
||||
const box = el('div', 'creator-liste');
|
||||
for (const c of sortiert) box.append(karte(c, d.check_gesamt || 16, eigen));
|
||||
for (const c of sortiert) {
|
||||
box.append(karte(c, d.check_gesamt || 16, eigen, zahlenNach.get(c.id)));
|
||||
}
|
||||
ziel.append(box);
|
||||
|
||||
/* Zum Schluss, und ohne await davor: Die Karten sollen nicht auf die
|
||||
Frühwarnung warten. Sie schiebt sich oben ein, wenn sie da ist --
|
||||
für einen Creator kommt sie nie (der Server liefert ihm nichts). */
|
||||
if (!eigen) fruehwarnungLaden();
|
||||
|
||||
if (d.stand) {
|
||||
/* Der Server schickt UTC. zeitpunkt() darf hier NICHT genommen
|
||||
werden -- das schneidet die Zeichenkette nur auf und zeigte im
|
||||
|
||||
Reference in New Issue
Block a user