DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rund um das Team -- die Arbeitslage von Managern und Scouts

Browse Source 
Filipe: "so eine kategorie wie ueber die creator will ich dass nur fuer
die spicy und dogfather rolle auch ueber manager und scouts gibt ...
ich will dass es so ultra krass gut ist dass die spicy und dogfather
rolle einen kompletten teil haben mit daten ueber die arbeit von den
manager und scout. keine geheimen sachen also termine, chats und
geheime dateien soll auch so bleiben dass keiner."

--- ZUERST DIE KOPFLEISTE ---

Filipe meldete, die Kopfleiste sei bei DogFather "nicht gemacht".
Nachgemessen auf ALLEN 18 Seiten, in allen fuenf Rollen, bei drei
Breiten: einzeilig, Spanne 4 px. Und die neuen Dateien liegen
nachweislich auf dem Server (a70bc4f, `abmelden__zeichen` in der
ausgelieferten kopf.js). Das Bild war vor dem Ausliefern entstanden.

Die Messung hat aber zwei echte Sachen gefunden, die vorher niemand
gesehen hatte -- beide bei 320 px auf UNTERseiten, wo links der
Zurueck-Knopf und rechts zusaetzlich die Glocke steht: 305 px
gebraucht, 294 verfuegbar. Eine Stufe kleiner (34 px je Knopf, 4 px
Abstand) macht 283 und passt; 34 px bleiben weit ueber den 24 px
Mindestmass fuer ein Beruehrziel.

Ausserdem die Auslieferung geordnet: HTML wird immer nachgefragt,
Dateien mit Versionsstempel duerfen ein Jahr liegenbleiben (vorher
bekam ALLES `no-cache`, also auch jede Stilvorlage bei jedem Aufruf).
sw.js ausgenommen -- er wird ohne Stempel geladen, ein Fehler darin
bliebe sonst ein Jahr stehen.

--- DIE NEUE SEITE ---

workspace/team.html, nur fuer `spicy` und `admin`. Aufbau:

  DIE LUECKEN ZUERST. Creator ohne Betreuung, Scouts ohne Manager,
  Leute ohne einen einzigen Creator -- mit NAMEN, nicht nur als Zahl.
  Eine Kennzahl sagt, wie es laeuft; eine Luecke sagt, wo etwas fehlt,
  und nur das Zweite kann man heute abstellen.

  DANN DIE LAGE in fuenf Zahlen, dann JEDE PERSON EINZELN: betreute
  Creator, laufende und ueberfaellige Aufgaben, in 30 Tagen erledigte,
  Durchlaufzeit, Startcheck-Fortschritt der betreuten Creator,
  LIVE-Tage und Diamanten. Bei Scouts zusaetzlich die Pipeline mit
  Uebernahmequote und Zeit bis zur Uebergabe.

  EIN MANAGER TRAEGT DIE CREATOR SEINER SCOUTS MIT. Ohne das saehe
  einer mit fuenf Scouts aus wie jemand ohne Arbeit.

--- DREI ENTSCHEIDUNGEN, DIE ALLES TRAGEN ---

1. TERMINE, CHATS UND DATEIEN KOMMEN NICHT VOR -- weder Inhalte noch
   Zaehlungen. Ausdruecklicher Wunsch, und der richtige: Ein Kalender
   verraet, wann jemand nicht da war; ein Chatzaehler, mit wem jemand
   oft spricht.

   Das ist keine Zusicherung im Kommentar. pruef-team liest den
   Quelltext von workspace-team.js und schlaegt an, wenn eine dieser
   Tabellen darin auftaucht -- mit Gegenprobe, dass die Suche `aufgaben`
   und `leads` auch wirklich findet. Der Weg ueber die Antwort allein
   waere schwaecher: Ein leerer Testbestand kann ein Feld verstecken.

2. SEGMENTIEREN, NICHT MITTELN. Aus der Recherche zu
   Arbeitslast-Dashboards: Ein Durchschnitt versteckt genau die Person,
   bei der es klemmt. Markiert wird gegen den MEDIAN der eigenen Rolle
   -- ein Manager traegt naturgemaess mehr als ein Scout, und ihn daran
   zu messen waere unfair und nutzlos.

3. ES IST EINE ARBEITSLAGE, KEINE UEBERWACHUNG. Das steht so auf der
   Seite, im Kopf, in einem eigenen Kasten. Wer das nicht dazuschreibt,
   baut ein Kontrollwerkzeug, auch wenn er es nicht wollte. Deshalb
   zeigen die Kennzahlen auf ZUSTAENDE (unbetreute Creator,
   liegengebliebene Kontakte) und nicht auf Anwesenheit oder Fleiss.

--- WAS DIE MESSUNG UNTERWEGS GEFUNDEN HAT ---

* Die Lead-Status hiessen anders, als ich angenommen hatte: "kontakt"
  gibt es nicht. Die CHECK-Bedingung der Datenbank hat es sofort
  abgelehnt -- ohne sie waere "offen" still zu klein gewesen.

* Die Pruefung fand ihr eigenes Hinweisschild: Die Antwort traegt ein
  Feld `ausgenommen: ["Termine","Chats","Dateien"]`, aus dem die Seite
  den Satz baut. Es wird jetzt herausgenommen UND eigens geprueft --
  ignorieren waere bequem gewesen und haette kuenftig jedes Feld unter
  diesem Namen durchgelassen.

* Die Lektion vom Vorlagenbrett gleich mitgenommen: alle Karten haben
  einen DECKENDEN Grund. Eine Karte mit sieben Prozent Farbe auf
  durchsichtigem Grund laesst das Buehnenfoto durch -- dort waren es
  3,61:1. Gemessen jetzt: 6,61 bis 14,80:1. Eine der Regeln hatte den
  deckenden Grund selbst wieder aufgehoben (zwei Regeln, die spaetere
  gewinnt) -- gefunden, bevor es jemand sehen musste.

* "1 Scouts" statt "1 Scout". Eine Kleinigkeit, und das Erste, was
  auffaellt: Eine Seite, die ihre eigene Sprache nicht beherrscht, wird
  auch bei den Zahlen nicht geglaubt.

--- Pruefung ---

server/pruef-team.mjs, neu, 51 Pruefungen, alle gruen. Darunter: alle
fuenf Rollen an Schnittstelle UND Seite (Manager, Scout und Creator
bekommen 404 bzw. eine Umleitung), Spicy sieht VanVan nicht (mit
Gegenprobe an der Personenliste), die Zahlen an einem gebauten
Bestand, acht Kontrastmessungen an der wirklichen Flaeche, Handy.

server/pruef-zwischenspeicher.mjs, neu, 15 Pruefungen: was liegenbleiben
darf und was nicht -- an echten Kopfzeilen gemessen, nicht am
Quelltext. Sie meldete zuerst drei Fehler, und das war sie selbst: Sie
fragte unangemeldet und bekam Umleitungen. Eine Pruefung braucht ihre
Voraussetzung, bevor sie misst.

Ausserdem gruen: pruef-handy (das Handy fand die 320-px-Sache),
pruef-workspace-seiten, pruef-alle-wege, pruef-sicht, pruef-css-klassen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-09-09 15:42:14 +02:00
co-authored by Claude Opus 5
parent a70bc4f235
commit b45de940e8
29 changed files with 1878 additions and 482 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/start.css
+41
View File
@@ -912,6 +912,23 @@ body.start > main { position: relative; z-index: 1; }
Kontrast -- deshalb dieser und nicht der erstbeste. */
[data-ton="21"] { --ton: #ff1f2e; } /* Scout-Pipeline -- Wunsch: knallrot */
/* TON 22 -- TEAM-LAGE (09.09.2026).
Die neue Gruppe "Rund um das Team" braucht einen eigenen Ton. Nicht
gewaehlt, sondern gerechnet: Von elf Kandidaten hat #ffd166 den
groessten Abstand zu allen einundzwanzig vorhandenen Toenen --
0,1165 in OKLab zu seinem naechsten Nachbarn (#afde57). Die
Hausgrenze ist das engste vorhandene Paar, und das liegt bei 0,0973;
der neue Ton ist also klarer unterscheidbar als das, was ohnehin
schon nebeneinander steht.
Kontrast auf dem dunklen Grund: 13,91:1.
Warm und hell ist kein Zufall: Diese eine Kachel gehoert der
Leitung. Zwischen den kuehlen Toenen der Arbeitsbereiche faellt ein
warmer auf, ohne lauter zu sein. */
[data-ton="22"] { --ton: #ffd166; } /* Team-Lage */
/* Rückfallwert für alles, was einen Ton braucht, aber keine Nummer hat.
Steht bewusst in :where() -- damit zählt die Zeile beim Wettstreit der
Regeln als NICHT vorhanden und die Nummer oben gewinnt immer. Ohne
@@ -3754,6 +3771,30 @@ body[data-fremde-sicht="ja"]::after {
300 px und nicht ganz weg: Darunter gibt es Geraete, auf denen es
wirklich nicht reicht, und dort ist die zweite Zeile besser als ein
Ueberstand. Gemessen bei 360, 390, 412 und 430 -- alle einzeilig. */
/* NOCH EINE STUFE ENGER (09.09.2026, gemeldet von pruef-handy).
Bei 320 px hat die Leiste doch umgebrochen -- und zwar nur auf
Unterseiten. Dort steht links der Zurueck-Knopf (55 px), rechts
kommt auf manchen Seiten die Glocke als siebtes Element dazu.
Gerechnet: 55 + 6 + (5 x 36 + 28 + 6 x 6) = 305, verfuegbar 294.
Elf Pixel. Statt die Schwelle wieder hochzusetzen -- was die zweite
Zeile zurueckgebracht haette -- wird hier eine Stufe kleiner
geschaltet: 34 px je Knopf, 4 px Abstand. Macht 283 und passt.
34 px bleiben deutlich ueber den 24 px, die als Mindestmass fuer ein
Beruehrziel gelten (WCAG 2.5.8). */
@media (max-width: 340px) {
.kopfleiste__rechts { gap: 4px; }
.kopfleiste__rechts > .teilen,
.kopfleiste__rechts > .chat-knopf,
.kopfleiste__rechts > .suche-knopf,
.kopfleiste__rechts > .abmelden,
.kopfleiste__rechts > .glocke,
.sicht:not([data-fremd="ja"]) {
width: 34px; min-width: 34px; height: 34px; min-height: 34px;
}
}
@media (max-width: 300px) {
.kopfleiste { flex-wrap: wrap; row-gap: 8px; }
/* Die Marke nimmt die erste Zeile ganz ein, die Bedienelemente
workspace/assets/css/team.css
+245
View File
@@ -0,0 +1,245 @@
/* =====================================================================
team.css — die Arbeitslage von Managern und Scouts.
Wunsch Filipe, 09.09.2026: "so eine kategorie wie über die creator
will ich dass nur für die spicy und dogfather rolle auch über manager
und scouts gibt ... ich will dass es so ultra krass gut ist."
DIE GESTALTUNG FOLGT EINER ENTSCHEIDUNG, NICHT EINEM GESCHMACK:
Diese Seite zeigt Zahlen über Kollegen. Sie darf deshalb NICHT
aussehen wie ein Cockpit mit Warnleuchten. Rot gibt es genau dort,
wo etwas liegengeblieben ist -- und sonst nirgends. Alles andere ist
ruhig, damit die wenigen roten Stellen auch etwas heißen.
===================================================================== */
/* ---------- Der Kopf --------------------------------------------------- */
.t-kopf {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
margin: 0 0 18px;
}
.t-kopf__titel {
margin: 4px 0 6px;
font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 700;
color: var(--text);
letter-spacing: -.01em;
}
.t-kopf__unter { margin: 0; font-size: .96rem; color: var(--text-leise); }
/* Der Satz über die Grenzen steht in einem eigenen Kasten und nicht als
Fußnote. Er ist die wichtigste Zeile der Seite: Ohne ihn wird eine
Arbeitslage als Überwachung gelesen -- und dann arbeitet niemand mehr
offen damit. */
.t-kopf__grenze {
flex: 1 1 300px; max-width: 44ch;
margin: 0; padding: 12px 15px;
border-left: 3px solid color-mix(in srgb, var(--scout-haupt) 55%, transparent);
border-radius: 0 10px 10px 0;
background: rgba(95, 201, 154, .07);
font-size: .87rem; line-height: 1.55; color: var(--text-leise);
}
.t-kopf__grenze strong { color: var(--text); }
/* ---------- Die Lücken ------------------------------------------------- */
.t-luecken {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
margin: 0 0 18px;
}
/* EINE UNDURCHSICHTIGE FLAECHE, KEIN SCHLEIER.
Die Lektion vom Vorlagenbrett heute Mittag, hier gleich mitgenommen:
Eine Karte mit 7 Prozent Farbe auf transparentem Grund laesst das
Buehnenfoto durchscheinen -- und dann haengt die Lesbarkeit davon ab,
ob hinter dem Text gerade eine helle oder eine dunkle Stelle liegt.
Dort hat es 3,61:1 ergeben, wo 4,5 noetig sind.
Deshalb hier von vornherein ein eigener, deckender Grund. Der rote
Ton liegt darauf, nicht darin. */
.tl {
padding: 15px 17px;
border: 1px solid color-mix(in srgb, var(--warn, #ff9aa2) 34%, transparent);
border-radius: var(--radius-klein);
background:
linear-gradient(rgba(255, 154, 162, .07), rgba(255, 154, 162, .07)),
rgba(7, 10, 17, .93);
backdrop-filter: blur(8px);
}
.tl__titel {
margin: 0 0 4px; font-size: .98rem; font-weight: 700;
color: color-mix(in srgb, var(--warn, #ff9aa2) 78%, #ffffff);
}
.tl__satz { margin: 0 0 8px; font-size: .84rem; color: var(--text-leise); line-height: 1.5; }
.tl__namen {
margin: 0; font-size: .86rem; color: var(--text); line-height: 1.6;
overflow-wrap: anywhere;
}
/* Keine Lücke ist auch eine Auskunft -- und dann grün statt rot. */
.tl[data-gut="ja"] {
border-color: color-mix(in srgb, var(--scout-haupt) 34%, transparent);
background:
linear-gradient(rgba(95, 201, 154, .07), rgba(95, 201, 154, .07)),
rgba(7, 10, 17, .93);
}
.tl[data-gut="ja"] .tl__titel { color: var(--scout-haupt); }
/* ---------- Die Lage in Zahlen ----------------------------------------- */
.t-lage {
display: grid; gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
margin: 0 0 22px;
}
/* ---------- Eine Kennzahl ---------------------------------------------- */
.tz {
display: grid; gap: 2px; align-content: start;
padding: 11px 13px;
border: 1px solid var(--rand); border-radius: var(--radius-klein);
/* Ebenfalls deckend -- eine Kennzahl auf einem Foto ist keine
Kennzahl, sondern ein Ratespiel. */
background:
linear-gradient(rgba(255, 255, 255, .028), rgba(255, 255, 255, .028)),
rgba(7, 10, 17, .9);
}
.tz__wert {
font-size: 1.28rem; font-weight: 700; color: var(--text);
font-variant-numeric: tabular-nums; line-height: 1.15;
}
.tz__schild {
font-size: .74rem; color: var(--text-leise); line-height: 1.35;
}
/* Rot NUR, wo etwas liegengeblieben ist. */
.tz[data-art="warn"] {
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 42%, transparent);
/* Auch hier deckend. Diese Zeile stand zuerst mit einem einzelnen
rgba-Wert da und hat damit den undurchsichtigen Grund von oben
wieder aufgehoben -- ausgerechnet an den Karten, auf die es
ankommt. Zwei Regeln fuer denselben Grund, und die spaetere
gewinnt: derselbe Fehler wie so oft in diesem Haus. */
background:
linear-gradient(rgba(255, 154, 162, .09), rgba(255, 154, 162, .09)),
rgba(7, 10, 17, .9);
}
.tz[data-art="warn"] .tz__wert { color: color-mix(in srgb, var(--warn, #ff9aa2) 72%, #ffffff); }
/* Und grün, wenn eine Null eine gute Nachricht ist -- eine Null ohne
Farbe liest sich wie ein fehlender Wert. */
.tz[data-art="gut"] { border-color: color-mix(in srgb, var(--scout-haupt) 30%, transparent); }
.tz[data-art="gut"] .tz__wert { color: var(--scout-haupt); }
/* ---------- Die Leute --------------------------------------------------- */
.t-gruppe { margin: 0 0 26px; }
.t-gruppe .feldschild { margin: 0 0 10px; }
.t-liste {
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}
.tperson {
--r: var(--text-still);
position: relative;
padding: 16px 18px 18px;
border: 1px solid var(--rand);
border-radius: var(--radius-klein);
background:
linear-gradient(180deg, color-mix(in srgb, var(--r) 6%, transparent), transparent 60%),
var(--flaeche);
}
.tperson[data-rolle="manager"] { --r: var(--manager-haupt); }
.tperson[data-rolle="scout"] { --r: var(--scout-haupt); }
/* Der Streifen in der Rollenfarbe -- dieselbe Sprache wie in der
Personenliste, damit man beide Seiten als ein Haus liest. */
.tperson::after {
content: ""; position: absolute; left: 0; top: 10px; bottom: 10px;
width: 3px; border-radius: 999px;
background: linear-gradient(180deg,
color-mix(in srgb, var(--r) 80%, transparent),
color-mix(in srgb, var(--r) 25%, transparent));
pointer-events: none;
}
.tperson[data-gesperrt="ja"] { opacity: .6; }
.tperson__kopf {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px; flex-wrap: wrap;
}
.tperson__bild {
width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
border: 1px solid color-mix(in srgb, var(--r) 40%, transparent);
flex: none;
}
.tperson__zeichen {
width: 44px; height: 44px; border-radius: 50%;
display: grid; place-items: center; flex: none;
font-size: 1.05rem; font-weight: 700;
color: color-mix(in srgb, var(--r) 75%, #ffffff);
background: color-mix(in srgb, var(--r) 16%, #070a11);
border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
}
.tperson__text { flex: 1; min-width: 0; }
/* LANGE NAMEN BRECHEN UM, statt abgeschnitten zu werden.
"Patrick-Maximilian" braucht 90 px, bei 320 px Bildschirm stehen 56
zur Verfuegung -- gemeldet von pruef-handy. Ein Name, den man nicht
lesen kann, ist auf einer Seite ueber Personen der schlechteste
Platz zum Sparen. */
.tperson__name {
margin: 0; font-size: 1.06rem; font-weight: 650; color: var(--text);
overflow-wrap: anywhere; hyphens: auto;
}
.tperson__unter {
margin: 2px 0 0; font-size: .82rem; color: var(--text-leise); line-height: 1.45;
overflow-wrap: anywhere;
}
.tperson__zuletzt {
flex: none;
padding: 4px 10px; border-radius: 999px;
font-size: .74rem; font-weight: 600;
color: var(--text-leise);
background: rgba(255, 255, 255, .05);
border: 1px solid var(--rand);
}
.tperson__zuletzt[data-warn="ja"] {
color: color-mix(in srgb, var(--warn, #ff9aa2) 72%, #ffffff);
border-color: color-mix(in srgb, var(--warn, #ff9aa2) 40%, transparent);
background: rgba(255, 154, 162, .1);
}
.tperson__zahlen {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
}
/* ---------- Die Pipeline ------------------------------------------------ */
.tpipe {
margin-top: 14px; padding-top: 13px;
border-top: 1px solid var(--rand);
}
.tpipe__schild {
margin: 0 0 8px;
font-size: .72rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: var(--text-still);
}
.tpipe__reihe {
display: grid; gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
}
/* ---------- Wen genau --------------------------------------------------- */
.tperson__wer { margin-top: 12px; }
.tperson__wer summary {
cursor: pointer; font-size: .82rem; color: var(--text-leise);
padding: 4px 0;
}
.tperson__wer summary:hover { color: var(--text); }
.tperson__wer summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.tperson__namen {
margin: 6px 0 0; font-size: .84rem; color: var(--text-leise); line-height: 1.65;
}
@media (max-width: 620px) {
.t-kopf { flex-direction: column; gap: 14px; }
.t-kopf__grenze { max-width: none; }
.tperson { padding: 14px 15px 16px; }
}
@media (forced-colors: active) {
.tz, .tl, .tperson { border: 1px solid CanvasText; }
.tperson::after { background: CanvasText; }
}
workspace/assets/js/bereiche.js
+38
View File
@@ -241,6 +241,16 @@
linien: ['M4 19.5h16', 'M6.6 9.5h1.8v7h-1.8z', 'M11.1 5.5h1.8v11h-1.8z',
'M15.6 11.5h1.8v5h-1.8z'],
},
teamlage: {
/* Zwei Koepfe und eine steigende Linie darunter: Es geht um
Menschen UND um ihren Verlauf. Gefuellt ist nur der vordere
Kopf -- zwei gefuellte Kreise nebeneinander lesen sich als
Brille, nicht als Team. */
fuellung: ['M8.6 4.6a2.9 2.9 0 1 0 0 5.8 2.9 2.9 0 0 0 0-5.8z'],
linien: ['M8.6 4.6a2.9 2.9 0 1 0 0 5.8 2.9 2.9 0 0 0 0-5.8z',
'M15.6 5.4a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8z',
'M4 20v-2.2', 'M9 20v-4.6', 'M14 20v-3.2', 'M19 20v-6.4'],
},
personen: {
/* Der Bart des Schlüssels bleibt Linie, der Kopf wird Fläche. */
fuellung: ['M14.4 6.2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'],
@@ -430,6 +440,34 @@
rollen: ['spicy', 'admin', 'manager', 'creator', 'scout'], ziel: 'report.html', szene: 'showbuehne' },
],
},
/* =============================================================
RUND UM DAS TEAM (09.09.2026)
Filipe: "so eine kategorie wie ueber die creator will ich dass
nur fuer die spicy und dogfather rolle auch ueber manager und
scouts gibt ... ich will dass die spicy und dogfather rolle
einen kompletten teil haben mit daten ueber die arbeit von den
manager und scout."
WARUM SIE HIER STEHT, direkt hinter "Rund um den Creator": Es
ist dieselbe Frage, eine Ebene hoeher. Dort geht es um die
Betreuung EINES Creators, hier um die, die betreuen.
NUR ZWEI ROLLEN. Ein Manager sieht die Gruppe nicht -- eine
Uebersicht ueber die Arbeit der Kollegen gehoert der Leitung.
Die Kachel wegzunehmen reicht dafuer nicht: Die Seite selbst
ist in workspace.js auf ['spicy','admin'] gesetzt, und die
Schnittstelle antwortet allen anderen mit 404. Eine
ausgeblendete Kachel hat noch nie etwas geschuetzt. */
{
name: 'Rund um das Team',
unter: 'Manager und Scouts – Auslastung, Lücken, Wirkung',
bereiche: [
{ name: 'Team-Lage', unter: 'Wer betreut wen, wo staut sich etwas',
zeichen: 'teamlage', ton: 22,
rollen: ['spicy', 'admin'], ziel: 'team.html', szene: 'halle' },
],
},
{
name: 'Team & System',
unter: 'Was den Laden am Laufen hält',
workspace/assets/js/team.js
+292
View File
@@ -0,0 +1,292 @@
/* ===================================================================
Die Arbeitslage von Managern und Scouts.
Wunsch Filipe, 09.09.2026: *"so eine kategorie wie über die creator
will ich dass nur für die spicy und dogfather rolle auch über manager
und scouts gibt ... mit daten über die arbeit von den manager und
scout. keine geheimen sachen also termine, chats und geheime dateien
soll auch so bleiben dass keiner."*
DREI DINGE, DIE DIESE SEITE ANDERS MACHT ALS EINE TABELLE:
1. DIE LÜCKEN STEHEN OBEN. Ein unbetreuter Creator ist ein Zustand,
den man heute abstellen kann; eine Kennzahl ist eine Auskunft, die
man zur Kenntnis nimmt. Deshalb kommt zuerst, was fehlt.
2. AUSREISSER WERDEN MARKIERT, NICHT GEMITTELT. Wer die Zahlen
mittelt, verliert genau die Person, um die es geht. Markiert wird
gegen den MEDIAN der Gruppe und nicht gegen eine feste Zahl:
Sieben Creator sind bei einem Team von drei Leuten viel und bei
einem von zwanzig wenig.
3. JEDE ZAHL SAGT, WORAUS SIE KOMMT. Eine Zahl ohne Bezug wird
entweder geglaubt oder ignoriert -- beides ist falsch.
=================================================================== */
(() => {
'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 melde = (t) => { $('fehler').textContent = t || ''; };
async function hole(pfad, optionen = {}) {
const a = await fetch(pfad, { credentials: 'same-origin', ...optionen });
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
if (a.status === 404) { location.assign('/workspace/start.html'); throw new Error('nicht erlaubt'); }
return a;
}
/* Der Median statt des Mittelwerts: Ein einzelner Ausreisser zieht
einen Mittelwert mit sich und macht sich damit selbst unsichtbar.
Der Median bleibt stehen, wo die Gruppe steht. */
function median(werte) {
const w = werte.filter((x) => Number.isFinite(x)).sort((a, b) => a - b);
if (!w.length) return 0;
const m = Math.floor(w.length / 2);
return w.length % 2 ? w[m] : (w[m - 1] + w[m]) / 2;
}
const datum = (iso) => {
if (!iso) return null;
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return null;
return d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: '2-digit' });
};
const tageHer = (iso) => {
if (!iso) return null;
const d = new Date(iso);
if (Number.isNaN(d.getTime())) return null;
return Math.floor((Date.now() - d) / 86400000);
};
/* ---------- Eine Zahl mit Beschriftung ---------------------------- */
function kennzahl(wert, schild, art) {
const k = el('div', 'tz');
if (art) k.dataset.art = art;
k.append(el('strong', 'tz__wert', wert));
k.append(el('span', 'tz__schild', schild));
return k;
}
/* ---------- Die Lücken -------------------------------------------- */
function lueckenZeigen(l) {
const ziel = $('luecken');
ziel.textContent = '';
const bloecke = [
['creator_ohne_betreuung', 'Creator ohne Betreuung',
'Niemand ist zuständig. Das ist die Lücke, die am schnellsten weh tut.'],
['scouts_ohne_manager', 'Scouts ohne Manager',
'Sie arbeiten, aber niemand schaut mit drauf.'],
['ohne_zuteilung', 'Ohne einen einzigen Creator',
'Angelegt, aber ohne Arbeit – entweder neu oder vergessen.'],
];
let etwas = false;
for (const [schluessel, titel, satz] of bloecke) {
const liste = l[schluessel] || [];
if (!liste.length) continue;
etwas = true;
const k = el('article', 'tl');
k.append(el('h3', 'tl__titel', `${titel} · ${liste.length}`));
k.append(el('p', 'tl__satz', satz));
const namen = el('p', 'tl__namen');
/* Namen und nicht nur eine Zahl: Eine Zahl fordert eine zweite
Frage, und die stellt niemand. */
namen.textContent = liste.map((x) => x.name).join(' · ');
k.append(namen);
ziel.append(k);
}
if (!etwas) {
const k = el('article', 'tl');
k.dataset.gut = 'ja';
k.append(el('h3', 'tl__titel', 'Keine Lücken'));
k.append(el('p', 'tl__satz',
'Jeder aktive Creator hat eine Betreuung, jeder Scout einen Manager.'));
ziel.append(k);
}
ziel.hidden = false;
}
/* ---------- Die Lage in vier Zahlen -------------------------------- */
function lageZeigen(leute, luecken) {
const ziel = $('lage');
ziel.textContent = '';
const aktive = leute.filter((p) => p.aktiv);
const betreute = new Set();
for (const p of leute) for (const c of p.creator) betreute.add(c.id);
const ueberfaellig = leute.reduce((s, p) => s + p.aufgaben.ueberfaellig, 0);
const faellig = leute.reduce((s, p) => s + (p.pipeline?.faellig || 0), 0);
ziel.append(kennzahl(String(aktive.length), 'im Team'));
ziel.append(kennzahl(String(betreute.size), 'betreute Creator'));
ziel.append(kennzahl(String(ueberfaellig), 'überfällige Aufgaben',
ueberfaellig ? 'warn' : 'gut'));
ziel.append(kennzahl(String(faellig), 'liegengebliebene Kontakte',
faellig ? 'warn' : 'gut'));
const l = (luecken.creator_ohne_betreuung || []).length;
ziel.append(kennzahl(String(l), 'Creator ohne Betreuung', l ? 'warn' : 'gut'));
ziel.hidden = false;
}
/* ---------- Eine Person ------------------------------------------- */
function karte(p, vergleich) {
const k = el('article', 'tperson');
k.dataset.rolle = p.rolle;
if (!p.aktiv) k.dataset.gesperrt = 'ja';
/* Kopf: Bild, Name, was er trägt. */
const kopf = el('div', 'tperson__kopf');
if (p.bild) {
const b = document.createElement('img');
b.className = 'tperson__bild';
b.src = p.bild; b.alt = ''; b.loading = 'lazy';
kopf.append(b);
} else {
kopf.append(el('span', 'tperson__zeichen', (p.name || '?').slice(0, 1).toUpperCase()));
}
const kt = el('div', 'tperson__text');
kt.append(el('h3', 'tperson__name', p.name + (p.aktiv ? '' : ' · gesperrt')));
const unter = [];
if (p.creator.length) unter.push(`${p.creator.length} Creator direkt`);
if (p.creator_mittelbar) unter.push(`${p.creator_mittelbar} über Scouts`);
/* Einzahl und Mehrzahl. "1 Scouts" ist eine Kleinigkeit und trotzdem
das Erste, was auffaellt -- eine Seite, die ihre eigene Sprache
nicht beherrscht, wird auch bei den Zahlen nicht geglaubt. */
if (p.scouts.length) {
unter.push(`${p.scouts.length} ${p.scouts.length === 1 ? 'Scout' : 'Scouts'}: `
+ p.scouts.join(', '));
}
kt.append(el('p', 'tperson__unter', unter.join(' · ') || 'Noch niemand zugeteilt'));
kopf.append(kt);
/* Zuletzt da. Bewusst grob und ohne Uhrzeit: Es geht um
Erreichbarkeit, nicht um Arbeitszeit. */
const tage = tageHer(p.letzter_login);
const zuletzt = el('span', 'tperson__zuletzt',
tage === null ? 'noch nie angemeldet'
: tage === 0 ? 'heute da' : tage === 1 ? 'gestern da' : `vor ${tage} Tagen da`);
if (tage === null || tage > 14) zuletzt.dataset.warn = 'ja';
kopf.append(zuletzt);
k.append(kopf);
/* Die Zahlen. */
const zahlen = el('div', 'tperson__zahlen');
const last = p.creator.length + p.creator_mittelbar;
zahlen.append(kennzahl(String(last), 'Creator',
vergleich.viel && last > vergleich.viel ? 'warn' : null));
zahlen.append(kennzahl(String(p.aufgaben.laufend), 'Aufgaben laufen'));
zahlen.append(kennzahl(String(p.aufgaben.ueberfaellig), 'überfällig',
p.aufgaben.ueberfaellig ? 'warn' : 'gut'));
zahlen.append(kennzahl(String(p.aufgaben.erledigt30), 'erledigt (30 Tage)'));
zahlen.append(kennzahl(
p.aufgaben.durchlauf_tage === null ? '—' : `${p.aufgaben.durchlauf_tage} T`,
'bis erledigt'));
if (p.fortschritt.startcheck_gesamt) {
const q = Math.round(100 * p.fortschritt.startcheck_fertig / p.fortschritt.startcheck_gesamt);
zahlen.append(kennzahl(`${q} %`, 'Start-Check der Creator', q < 50 ? 'warn' : null));
}
if (p.fortschritt.punkte_gesamt) {
zahlen.append(kennzahl(String(p.fortschritt.punkte_offen), 'offene Punkte'));
}
if (p.zahlen.livetage30) {
zahlen.append(kennzahl(String(p.zahlen.livetage30), 'LIVE-Tage (30 T)'));
zahlen.append(kennzahl(p.zahlen.diamanten30.toLocaleString('de-DE'), 'Diamanten (30 T)'));
}
k.append(zahlen);
/* Die Pipeline -- nur bei Scouts, denn nur sie haben eine. */
if (p.pipeline) {
const pl = el('div', 'tpipe');
pl.append(el('p', 'tpipe__schild', 'Pipeline'));
const r = el('div', 'tpipe__reihe');
r.append(kennzahl(String(p.pipeline.offen), 'in Arbeit'));
r.append(kennzahl(String(p.pipeline.uebergeben), 'übergeben'));
r.append(kennzahl(String(p.pipeline.abgelehnt), 'abgelehnt'));
r.append(kennzahl(String(p.pipeline.faellig), 'Kontakt fällig',
p.pipeline.faellig ? 'warn' : 'gut'));
/* Die Quote sagt mehr als jede Einzelzahl: Viele Kontakte ohne
Übergabe sind Arbeit ohne Ergebnis. */
const entschieden = p.pipeline.uebergeben + p.pipeline.abgelehnt;
if (entschieden) {
const q = Math.round(100 * p.pipeline.uebergeben / entschieden);
r.append(kennzahl(`${q} %`, 'davon übernommen', q < 20 ? 'warn' : null));
}
if (p.pipeline.uebergabe_tage !== null) {
r.append(kennzahl(`${p.pipeline.uebergabe_tage} T`, 'bis zur Übergabe'));
}
pl.append(r);
k.append(pl);
}
/* Wen genau. Zugeklappt, weil es bei zwanzig Creators die Karte
sprengen würde -- aber vorhanden, weil "sieben Creator" ohne
Namen keine Auskunft ist. */
if (p.creator.length) {
const auf = el('details', 'tperson__wer');
const z = el('summary', null, `Wen ${p.name} betreut`);
auf.append(z);
const liste = el('p', 'tperson__namen',
p.creator.map((c) => c.name + (c.aktiv ? '' : ' (gesperrt)')).join(' · '));
auf.append(liste);
k.append(auf);
}
return k;
}
/* ---------- Laden -------------------------------------------------- */
async function laden() {
let daten;
try {
const a = await hole('/workspace/api/team');
if (!a.ok) { melde('Die Arbeitslage konnte nicht geladen werden.'); return; }
daten = await a.json();
} catch { return; }
$('laedt').hidden = true;
lueckenZeigen(daten.luecken || {});
lageZeigen(daten.leute || [], daten.luecken || {});
for (const [rolle, block, liste] of [
['manager', 'manager-block', 'manager-liste'],
['scout', 'scout-block', 'scout-liste'],
]) {
const eigene = (daten.leute || []).filter((p) => p.rolle === rolle);
if (!eigene.length) continue;
/* Der Vergleichswert entsteht INNERHALB der Rolle: Ein Manager
trägt naturgemäß mehr als ein Scout, und ihn daran zu messen
wäre unfair und nutzlos. */
const lasten = eigene.map((p) => p.creator.length + p.creator_mittelbar);
const mitte = median(lasten);
/* "Viel" heisst: die Hälfte über dem Median der eigenen Rolle --
und mindestens zwei mehr, damit bei kleinen Zahlen nicht schon
ein Creator Unterschied als Überlast gilt. */
const vergleich = { viel: Math.max(mitte * 1.5, mitte + 2) };
const ziel = $(liste);
ziel.textContent = '';
for (const p of eigene) ziel.append(karte(p, vergleich));
$(block).hidden = false;
}
melde('');
}
(async () => {
try {
const a = await hole('/workspace/api/ich');
if (!a.ok) { location.assign('/workspace/'); return; }
const ich = await a.json();
window.werZeigen?.(ich);
/* Die Schranke steht im Server. Hier geht es nur darum, niemanden
vor einer leeren Seite stehen zu lassen. */
if (ich.rolle !== 'admin' && ich.rolle !== 'spicy') {
location.assign('/workspace/start.html');
return;
}
} catch { return; }
await laden();
})();
})();