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

Manager-Ziele: vier feste Monatsaufgaben, die sich selbst zuruecksetzen

Browse Source 
Filipe mit der Vorlage „Prompt · Kachel Agentur-Aufgaben" (02.10.2026):
Scouts, Manager, DogFather und Spicy Media bekommen vier Pflichten je
Monat -- Creator rekrutieren, Manager-Meeting, Schulung oder Community
Talk, Werbung auf TikTok -- mit Fortschritt, Ampel, Warnungen und
einem Monatsschnitt, der nichts loescht.

DREI ENTSCHEIDUNGEN, DIE VON DER VORLAGE ABWEICHEN -- alle abgestimmt:

1. DIE KACHEL HEISST „Manager-Ziele", nicht „Agentur-Aufgaben".
   Es gibt bereits eine Kachel „Agentur" und eine „Aufgaben". Eine
   dritte mit beiden Woertern im Namen waere auf einem Handy nicht
   mehr auseinanderzuhalten.

2. DIE ZIELZAHLEN GELTEN JE ROLLE, und DogFather UND Spicy Media
   duerfen sie aendern. Ein Scout muss nicht dieselbe Zahl schaffen
   wie die Leitung.

3. DIE SCOUT-PIPELINE IST ANGEBUNDEN, in beide Richtungen: Vorschlaege
   aus uebergebenen Leads, Namensvorschlaege beim Tippen, die
   Verbindung bleibt am Eintrag gespeichert. Aber NICHTS zaehlt von
   selbst -- gezaehlt wird nur, was ein Mensch bestaetigt hat. Ein
   Zaehler, der sich allein fuellt, ist einer, dem niemand glaubt.

WAS ANDERS GEBAUT IST, ALS ES NAHELAG

DAS ZIEL WIRD PRO MONAT EINGEFROREN (`mz_ziel` hat den Monat im
Schluessel). Laege nur ein aktueller Wert in `einstellungen`, schriebe
jede spaetere Aenderung rueckwirkend den ganzen Verlauf um: Ein Monat,
der mit 2/2 abgeschlossen war, staende nach einer Erhoehung auf 4
ploetzlich als „nicht erreicht" da. Ein Verlauf, der sich rueckwirkend
aendert, ist keiner. Es gibt deshalb gar keinen Weg, den laufenden
Monat umzuschreiben -- gespeichert wird immer in den naechsten.

DIE SPERRE VERGANGENER MONATE SITZT IN DER DATENBANK, nicht im Code
(drei Trigger). Die Ausnahme fuer DogFather laesst sich in SQLite
nicht ueber die Sitzung abfragen, also ist sie ein sichtbarer Vorgang:
`mz_freigabe` wird fuer die eine Handlung geoeffnet, im `finally`
wieder geschlossen und verfaellt nach zwei Minuten von selbst. Jede
Korrektur steht mit Name und Zeit im Protokoll.

DER LAUFENDE MONAT STEHT IN EINER TABELLE (`mz_lage`), nicht in
`strftime(...,'localtime')`. Sonst entschiede die Zeitzone des Servers,
und am Monatsersten zwischen 00:00 und 02:00 griffe die Sperre fuer
den falschen Monat. Gerechnet wird durchgehend in Europe/Berlin
(identisch mit dem Europe/Luxembourg der Vorlage, aber dieselbe
Zeitrechnung wie der Rest des Hauses).

KEIN ZWEITER ZAEHLER FUER DIE KACHELWAND. Rand und Abzeichen auf der
Startseite kommen aus `workspace-hinweise.js` und damit aus derselben
Rechnung wie die Seite (`standFuer`). Zwei Rechnungen ueber dieselbe
Sache laufen auseinander, und zwar lautlos.

KEIN IMPORTKREIS ZU workspace-push.js. Die Erinnerungen entstehen hier
als Liste (`zielRufe`), verschickt werden sie im vorhandenen
Fuenf-Minuten-Takt. Der Tag steht im Merkmal -- dadurch geht pro
Person hoechstens EINE Meldung am Tag heraus, obwohl der Lauf
288-mal stattfindet.

GETRENNTE HAEUSER: Auf crew.dogfather-universe.com gibt es diese
Kachel nicht, auch nicht fuer DogFather. Gemessen, nicht angenommen.

GEPRUEFT (141 Pruefungen, 0 Fehler) -- mit Gegenproben zu jeder Sperre

  * Vier Rollen kommen herein, drei bekommen 404 (nicht 403), und die
    ANZAHL steht in der Bedingung. „Alle abgewiesen" waere auf einer
    leeren Liste wahr.
  * Die Ampel wird mit EINGESETZTEN Tagen gemessen, nie gegen die
    Wanduhr -- diese Pruefung sagt am 16. November dasselbe wie heute.
    (gate-oeffnung.mjs im Shop war gruen, bis der Kalender sie
    ueberholte.)
  * Die Datenbank lehnt einen Eintrag im Vormonat selbst ab; danach
    wird nachgewiesen, dass die Freigabe nur EINMAL gewirkt hat.
  * Neun Absagen mit dem jeweils richtigen Grund -- und eine
    Instagram-Adresse, die durchgehen MUSS, weil sonst nur bewiesen
    waere, dass die Pruefung streng ist, nicht dass sie richtig ist.
  * Am 7. des Monats ist Ruhe: Ohne diese Zeile bewiese der
    Erinnerungs-Block nur, dass immer etwas kommt.

ZWEI BEFUNDE KAMEN AUS DER MESSUNG, NICHT AUS DEM NACHDENKEN

  * Beim Aufklappen einer Zeile wurde die ganze Liste neu gebaut --
    der angeklickte Knopf existierte danach nicht mehr, der Fokus
    sprang an den Seitenanfang. Gefunden hat es die Bildmessung, der
    die Schaltflaeche unter der Hand wegbrach.
  * Zwei meiner Messungen waren falsch, nicht der Code: Der
    Haus-Test schickte den Keks nicht mit (401 statt 404), und
    `Response.text()` entfernt ein BOM beim Dekodieren -- der Export
    hatte eines, die Pruefung sah es nur nicht. Jetzt wird in Bytes
    gemessen.

Kachelton 47 (#7368ff) ist mit tools/kachel-farbe-einzeln.mjs gegen
alle 46 vorhandenen gerechnet, nicht ausgesucht: Abstand 0,0899,
Kontrast 4,61:1. Beruehrziele, waagerechtes Schieben und
Schriftgroessen sind am Bildschirm bei 412 px und 1280 px nachgemessen.

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
DogFatherGit
2026-10-02 16:53:09 +02:00
co-authored by Claude Opus 5
parent 731537b682
commit db656f6e14
60 changed files with 4679 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/manager-ziele.css
+349
View File
@@ -0,0 +1,349 @@
/* =====================================================================
manager-ziele.css — die vier festen Monatsaufgaben (02.10.2026)
=====================================================================
DREI REGELN, DIE HIER ÜBERALL GELTEN:
1. KEINE EIGENEN AMPELFARBEN. Das Haus hat sie schon -- `--k-gut`,
`--k-mittel`, `--k-warn`, `--k-neutral` in gate.css. Sie sind
gegen den dunklen Grund gemessen und augenschonend gewählt. Ein
eigenes Grasgrün hier wäre eine fünfte Wahrheit über dieselbe
Sache und müsste bei jeder Kontrastmessung einzeln nachgezogen
werden.
2. FARBE NIE ALLEIN. Jede Stufe trägt zusätzlich ein Zeichen und
einen Satz. Wer Farben nicht unterscheiden kann, liest sonst
vier gleich aussehende Zeilen.
3. MOBILE FIRST, und zwar als Regel statt als Zahl. Die Reihen
brechen über `flex-wrap` um, nicht über eine Schwelle in Pixeln
-- eine feste Zahl ist eine Rechnung von gestern und wird beim
nächsten zusätzlichen Element still falsch (gemessen am
06.09.2026 in der Kopfleiste, wo genau das zweimal passiert ist).
===================================================================== */
.mz-seite {
--mz-gut: var(--k-gut, #5fc99a);
--mz-mittel: var(--k-mittel, #e8b877);
--mz-warn: var(--k-warn, #f0868f);
--mz-still: var(--k-neutral, #8e9cb0);
}
/* ---------------------------------------------------------------------
DIE STUFE AN EINEM ELEMENT
Ein einziger Griff (`data-stufe`) setzt die Farbe für alles, was
darunter hängt. Die Alternative wären vier Klassen je Bauteil --
und beim fünften Bauteil hätte eine davon gefehlt. */
[data-stufe="gruen"] { --mz-ton: var(--mz-gut); }
[data-stufe="orange"] { --mz-ton: var(--mz-mittel); }
[data-stufe="rot"] { --mz-ton: var(--mz-warn); }
[data-stufe="neutral"] { --mz-ton: var(--mz-still); }
[data-stufe="aus"] { --mz-ton: var(--mz-still); }
/* =====================================================================
DER KOPF: Monat, Fortschritt, Resttage
===================================================================== */
.mz-kopf {
display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
padding: 16px 18px;
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
background: var(--flaeche, rgba(9, 13, 22, .89));
clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
margin-bottom: 18px;
}
/* Der Ring. Eine `conic-gradient` statt eines SVG: Sie lässt sich mit
einer einzigen Variablen (`--mz-anteil`) bewegen und braucht kein
zweites Zahlensystem. */
.mz-ring {
position: relative;
flex: 0 0 auto;
width: 84px; height: 84px; border-radius: 50%;
background:
conic-gradient(var(--mz-ton, var(--mz-still)) calc(var(--mz-anteil, 0) * 1%),
rgba(150, 186, 220, .13) 0);
display: grid; place-items: center;
/* DEZENT, NICHT SPIELERISCH. 600 ms, und bei
`prefers-reduced-motion` gar nicht -- Hausregel. */
transition: background .6s ease;
}
.mz-ring::after {
content: ""; position: absolute; inset: 8px; border-radius: 50%;
background: var(--tinte, #05070d);
}
.mz-ring__text {
position: relative; z-index: 1; text-align: center; line-height: 1.1;
}
.mz-ring__zahl { display: block; font-size: 1.3rem; font-weight: 700; color: #f2f7fd; }
.mz-ring__von { display: block; font-size: .75rem; color: var(--text-leise, #9fb0c6); }
.mz-kopf__text { flex: 1 1 240px; min-width: 0; }
.mz-kopf__monat {
margin: 0 0 2px; font-size: 1.12rem; font-weight: 700; color: #f2f7fd;
}
.mz-kopf__stand { margin: 0 0 4px; color: var(--text, #dbe4ef); font-size: .92rem; }
.mz-kopf__rest { margin: 0; color: var(--text-leise, #9fb0c6); font-size: .84rem; }
.mz-kopf__rest[data-stufe="rot"] { color: var(--mz-warn); }
.mz-kopf__rest[data-stufe="orange"] { color: var(--mz-mittel); }
/* =====================================================================
DIE VIER AUFGABENZEILEN
===================================================================== */
.mz-liste { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.mz-zeile {
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
border-left: 3px solid var(--mz-ton, var(--mz-still));
background: var(--flaeche, rgba(9, 13, 22, .89));
}
.mz-zeile__kopf {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
width: 100%; padding: 13px 14px;
background: none; border: 0; color: inherit; text-align: left;
font: inherit; cursor: pointer;
/* 44 Pixel Mindesthöhe -- dasselbe Berührziel wie überall im Haus
(`--feld-ziel`). pruef-fingermass misst das nach. */
min-height: 44px;
}
.mz-zeile__kopf:focus-visible { outline: 2px solid var(--akzent, #6f89a8); outline-offset: -3px; }
.mz-zeile__zeichen {
flex: 0 0 auto; width: 26px; height: 26px;
display: grid; place-items: center;
color: var(--mz-ton, var(--mz-still)); font-size: 1rem;
}
.mz-zeile__text { flex: 1 1 160px; min-width: 0; }
.mz-zeile__name {
display: block; font-weight: 650; color: #eaf1f9; font-size: .97rem;
}
.mz-zeile__lage {
display: block; margin-top: 2px;
font-size: .8rem; color: var(--text-leise, #9fb0c6);
}
.mz-zeile__lage[data-stufe="rot"] { color: var(--mz-warn); }
.mz-zeile__lage[data-stufe="orange"] { color: var(--mz-mittel); }
.mz-zeile__lage[data-stufe="gruen"] { color: var(--mz-gut); }
.mz-zeile__zahl {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
font-weight: 700; font-size: 1.02rem; color: var(--mz-ton, var(--mz-still));
}
.mz-zeile__pfeil {
flex: 0 0 auto; color: var(--text-leise, #9fb0c6);
transition: transform .18s ease;
}
.mz-zeile[data-auf="ja"] .mz-zeile__pfeil { transform: rotate(90deg); }
/* Der eigene Balken je Aufgabe. Liegt UNTER der Kopfzeile und über der
Liste -- so trennt er beide optisch, ohne eine weitere Linie. */
.mz-balken {
height: 4px; margin: 0 14px 10px;
background: rgba(150, 186, 220, .13);
overflow: hidden;
}
.mz-balken__fuell {
display: block; height: 100%;
width: calc(var(--mz-anteil, 0) * 1%);
background: var(--mz-ton, var(--mz-still));
transition: width .6s ease;
}
.mz-zeile__fuss {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
padding: 0 14px 13px;
}
.mz-zeile__fuss .knopf { min-height: 44px; }
/* Die aufgeklappte Liste der eigenen Einträge. */
.mz-eintraege { padding: 0 14px 12px; }
.mz-eintrag {
display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
padding: 9px 0;
border-top: 1px solid rgba(150, 186, 220, .10);
}
.mz-eintrag__datum {
flex: 0 0 auto; font-variant-numeric: tabular-nums;
font-size: .82rem; color: var(--text-leise, #9fb0c6);
}
.mz-eintrag__was { flex: 1 1 160px; min-width: 0; color: var(--text, #dbe4ef); font-size: .9rem; }
/* Das Beruehrziel eines Links. 20 px hoch war es vorher -- gemessen,
nicht geschaetzt: `mess-manager-ziele.mjs` meldete „a.-: 20px". Auf
einem Handy trifft man das nur mit Glueck. */
.mz-eintrag__was a { color: inherit; display: inline-block; padding: 9px 0; }
.mz-eintrag__notiz {
display: block; margin-top: 2px;
font-size: .8rem; color: var(--text-leise, #9fb0c6);
overflow-wrap: anywhere;
}
.mz-eintrag__marke {
display: inline-block; margin-left: 6px; padding: 1px 7px;
/* .75rem und nicht .7rem: Unter 11,5 px wird es im Haus als zu
klein gezaehlt (pruef-css-klassen misst jede Schriftgroesse). */
font-size: .75rem; border-radius: 999px;
background: rgba(150, 186, 220, .14); color: var(--text-leise, #9fb0c6);
}
.mz-eintrag__knoepfe { flex: 0 0 auto; display: flex; gap: 6px; }
.mz-eintrag__knoepfe .schritt { min-height: 40px; }
.mz-leer {
padding: 14px; text-align: center;
color: var(--text-leise, #9fb0c6); font-size: .88rem;
}
/* =====================================================================
DIE VORSCHLÄGE AUS DER SCOUT-PIPELINE
=====================================================================
Sichtbar abgesetzt, damit niemand sie für bereits gezählt hält.
Sie sind ein Angebot, kein Stand. */
.mz-vorschlag {
margin: 0 14px 12px; padding: 10px 12px;
border: 1px dashed rgba(150, 186, 220, .26);
background: rgba(150, 186, 220, .05);
}
.mz-vorschlag__titel {
margin: 0 0 7px; font-size: .82rem; font-weight: 650;
color: var(--text-leise, #9fb0c6);
}
.mz-vorschlag__reihe { display: flex; flex-wrap: wrap; gap: 6px; }
.mz-vorschlag__knopf { min-height: 40px; }
/* =====================================================================
DER DAUERHAFTE HINWEIS
===================================================================== */
.mz-merksatz {
margin: 0 0 22px; padding: 12px 14px;
border-left: 3px solid var(--mz-mittel);
background: rgba(232, 184, 119, .07);
color: var(--text, #dbe4ef); font-size: .86rem; line-height: 1.5;
}
/* =====================================================================
VERLAUF UND TEAM
===================================================================== */
.mz-block { margin-top: 26px; }
.mz-block__titel {
margin: 0 0 10px; font-size: 1.02rem; font-weight: 700; color: #eaf1f9;
}
/* Eine Tabelle, die auf dem Handy nicht quer scrollt: Sie wird dort zu
Karten. `display: block` je Zeile statt `overflow-x: auto` -- ein
waagerechter Schiebebalken ist im Haus ausdrücklich unerwünscht. */
.mz-tabelle { width: 100%; border-collapse: collapse; font-size: .86rem; }
.mz-tabelle th, .mz-tabelle td {
padding: 8px 10px; text-align: left;
border-bottom: 1px solid rgba(150, 186, 220, .10);
}
.mz-tabelle th { color: var(--text-leise, #9fb0c6); font-weight: 600; }
.mz-tabelle td { color: var(--text, #dbe4ef); }
.mz-tabelle .mz-wert { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Der Name ist der Weg zu einer Person -- also das meistgetroffene
Ziel dieser Tabelle. Die Hausgroesse von `.schritt` sind 33 px; das
ist fuer einen Nebenknopf richtig und fuer diesen hier zu wenig. */
.mz-tabelle .schritt { min-height: 40px; }
.mz-punkt {
display: inline-block; width: 9px; height: 9px; margin-right: 6px;
border-radius: 50%; background: var(--mz-ton, var(--mz-still));
vertical-align: baseline;
}
.mz-steuer {
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
margin-bottom: 12px;
}
.mz-steuer .schritt { min-height: 44px; }
.mz-steuer select, .mz-steuer input {
min-height: 44px; padding: 8px 10px;
background: rgba(10, 14, 23, .7); color: var(--text, #dbe4ef);
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
}
@media (max-width: 640px) {
.mz-tabelle, .mz-tabelle tbody, .mz-tabelle tr, .mz-tabelle td { display: block; width: 100%; }
.mz-tabelle thead { display: none; }
.mz-tabelle tr {
margin-bottom: 10px; padding: 10px;
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
border-left: 3px solid var(--mz-ton, var(--mz-still));
}
.mz-tabelle td { border: 0; padding: 3px 0; }
/* Der Spaltenname wandert vor den Wert -- sonst stünden auf dem
Handy nackte Zahlen ohne Bezug. */
.mz-tabelle td[data-schild]::before {
content: attr(data-schild) ": ";
color: var(--text-leise, #9fb0c6);
}
}
/* =====================================================================
DAS FORMULAR
===================================================================== */
.mz-form { display: grid; gap: 12px; padding: 18px; }
.mz-feld { display: block; }
.mz-feld__schild {
display: block; margin-bottom: 5px;
font-size: .82rem; color: var(--text-leise, #9fb0c6);
}
.mz-feld input, .mz-feld select, .mz-feld textarea {
width: 100%; min-height: 44px; padding: 10px 12px;
background: rgba(10, 14, 23, .7); color: var(--text, #dbe4ef);
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
font: inherit;
}
.mz-feld textarea { min-height: 76px; resize: vertical; }
/* Die Namensvorschläge aus der Pipeline. `position: relative` am
Eltern-Feld, damit die Liste über dem Formular liegt statt es
auseinanderzuschieben. */
.mz-feld--vorschlag { position: relative; }
.mz-treffer {
position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
margin: 2px 0 0; padding: 0; list-style: none;
max-height: 190px; overflow-y: auto;
background: #0b1019; border: 1px solid var(--rand-hell, rgba(150, 186, 220, .30));
}
.mz-treffer li { margin: 0; }
.mz-treffer button {
display: block; width: 100%; min-height: 42px; padding: 9px 12px;
background: none; border: 0; color: var(--text, #dbe4ef);
font: inherit; text-align: left; cursor: pointer;
}
.mz-treffer button:hover, .mz-treffer button:focus-visible {
background: rgba(150, 186, 220, .12);
}
.mz-treffer__lage { display: block; font-size: .76rem; color: var(--text-leise, #9fb0c6); }
.mz-form__fehler { margin: 0; min-height: 1.2em; color: var(--mz-warn); font-size: .86rem; }
.mz-form__warnung { margin: 0; color: var(--mz-mittel); font-size: .84rem; }
/* Eine kurze Erfolgsmeldung. Sie verschwindet von selbst; ein Knopf
zum Wegklicken wäre ein zweiter Handgriff für eine gute Nachricht. */
.mz-gelungen {
position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
z-index: 40; padding: 11px 18px;
background: #0d1520; border: 1px solid var(--mz-gut);
color: #eaf1f9; font-size: .9rem;
box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .8);
}
/* =====================================================================
DIE ZIELZAHLEN (nur DogFather und Spicy Media)
===================================================================== */
.mz-ziele__gilt {
margin: 0 0 12px; font-size: .84rem; color: var(--text-leise, #9fb0c6);
}
.mz-ziele__zahl { width: 72px; min-height: 44px; text-align: center; }
/* =====================================================================
RUHIGE BEWEGUNG
=====================================================================
Hausregel, nicht Geschmack: Wer `prefers-reduced-motion` gesetzt
hat, bekommt den Endzustand sofort statt einer Animation. */
@media (prefers-reduced-motion: reduce) {
.mz-ring, .mz-balken__fuell, .mz-zeile__pfeil { transition: none; }
}
workspace/assets/css/start.css
+18
View File
@@ -1180,6 +1180,24 @@ body.start > main { position: relative; z-index: 1; }
-- nicht nach Gefuehl nachbessern. */
[data-ton="45"] { --ton: #e76006; } /* Unterstützen (gerechnet 24.09.2026) */
[data-ton="46"] { --ton: #9cde90; } /* Notizen */
/* GERECHNET, NICHT GEWAEHLT (02.10.2026) -- mit
`node tools/kachel-farbe-einzeln.mjs 47 --schreiben`. Es haelt alle
46 vorhandenen Toene fest und sucht fuer DIESEN den Punkt, der am
weitesten von allen entfernt liegt.
Abstand zum naechsten Nachbarn 0,0899 (Ton 43, #007bff)
Kontrast gegen den dunklen Grund 4,61:1 (Hausgrenze 4,5)
Buntheit 0,216
Das engste Paar, das im Haus ohnehin steht, liegt bei 0,0154
(Ton 20 <-> Ton 35) -- dieser Ton ist also rund sechsmal weiter weg
als das schwaechste Glied. Er liegt knapp unter der 0,090, die im
Kommentar bei Ton 39 als Wunschgrenze steht; das ist die Folge
davon, dass 46 Toene belegt sind, und keine stillschweigende
Absenkung: Das Werkzeug prueft ERST Kontrast und Buntheit und
maximiert DANN den Abstand. Wer den 48. hinzufuegt, sollte wissen,
dass es eng wird, und notfalls einen alten verschieben. */
[data-ton="47"] { --ton: #7368ff; } /* Manager-Ziele (gerechnet 02.10.2026) */
/* WARUM ES KEINEN TON 46 GIBT (25.09.2026)
Die Tuer ins andere Haus trug bis heute Ton 40 -- dieselbe Nummer
workspace/assets/js/bereiche.js
+43
View File
@@ -142,6 +142,19 @@
Groesse noch als "offizielle Seite" liest. */
agentur: [
'M3.5 8h17v11h-17z'
],
/* Manager-Ziele (02.10.2026): eine Zielscheibe. Bewusst KEIN
Haken und keine Liste -- einen Haken traegt die Aufgaben-
Kachel schon im Sinn, und eine Liste waere bei 20 Pixeln von
"Aufgaben" nicht zu unterscheiden. Der Ring ist die einzige
Form, die bei dieser Groesse noch "Ziel" sagt.
Nur der AEUSSERE Ring ist Koerper; die inneren Ringe sind
Linien (siehe ZEICHEN). Haette die Scheibe drei gefuellte
Ringe, wuerde sie beim dreifachen Tiefenversatz zu einem
Fleck. */
ziele: [
'M12 4.2a7.8 7.8 0 1 0 0 15.6 7.8 7.8 0 0 0 0-15.6z'
]
};
@@ -299,6 +312,15 @@
'M3.5 12.6h17',
'M10.9 11.6h2.2v2h-2.2z'],
},
/* Die Zielscheibe: aussen gefuellt, innen zwei Ringe als Linie.
Die Fuellung ist der MITTELPUNKT -- das ist die Stelle, auf die
es ankommt, und bei 20 Pixeln die einzige, die man noch sieht. */
ziele: {
fuellung: ['M12 9.9a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2z'],
linien: ['M12 4.2a7.8 7.8 0 1 0 0 15.6 7.8 7.8 0 0 0 0-15.6z',
'M12 7.6a4.4 4.4 0 1 0 0 8.8 4.4 4.4 0 0 0 0-8.8z',
'M12 9.9a2.1 2.1 0 1 0 0 4.2 2.1 2.1 0 0 0 0-4.2z'],
},
/* HINAUS (19.09.2026) -- fuer "Unsere Seiten".
Jedes andere Zeichen im Haus zeigt auf etwas INNERHALB des
Workspace. Dieses eine muss sagen: hier geht es hinaus. Das
@@ -477,6 +499,27 @@
{ name: 'Aufgaben', unter: 'Offen, in Arbeit, zur Freigabe', zeichen: 'aufgaben', ton: 13,
silber: true,
rollen: ['spicy', 'admin', 'manager', 'creator', 'scout'], ziel: 'aufgaben.html', szene: 'garage' },
/* MANAGER-ZIELE (02.10.2026) -- die vier festen Monatsaufgaben.
WARUM HIER UND NICHT IN "RUND UM DAS TEAM": Diese Kachel
zeigt die EIGENEN offenen Pflichten, nicht die der anderen.
Sie beantwortet dieselbe Frage wie "Aufgaben" daneben --
"was liegt bei mir an?" --, nur in einem anderen Takt. Wer
das Aufgabenbrett aufmacht, soll sie im selben Blick haben;
drei Gruppen weiter unten waere sie am 28. jedes Monats eine
Ueberraschung.
OHNE 'creator', und das ist der Unterschied zu allen anderen
Kacheln dieser Gruppe: Creator haben diese Pflichten nicht.
Die Zeile hier ist nur der WEG -- die Schranke steht in
server/rechte.js, und die Schnittstelle prueft die Rolle ein
drittes Mal selbst. Eine ausgeblendete Kachel hat noch nie
etwas geschuetzt.
Ton 47, gerechnet mit tools/kachel-farbe-einzeln.mjs gegen
alle 46 vorhandenen -- nicht ausgesucht. */
{ name: 'Manager-Ziele', unter: 'Deine vier Aufgaben im Monat', zeichen: 'ziele', ton: 47,
rollen: ['spicy', 'admin', 'manager', 'scout'], ziel: 'manager-ziele.html', szene: 'arena' },
/* REIHENFOLGE: CHAT, KALENDER, CALLS (08.09.2026).
Filipe, screen31: "die reihenfolge von denen, links der chat,
workspace/assets/js/manager-ziele.js
+849
View File
@@ -0,0 +1,849 @@
/* =====================================================================
manager-ziele.js — die vier festen Monatsaufgaben (02.10.2026)
=====================================================================
WAS DIESE DATEI NICHT TUT, und das ist Absicht:
SIE RECHNET NICHTS. Keine Zielzahl, keine Ampel, kein Fortschritt
entsteht hier. Alles kommt fertig vom Server (`standFuer()` in
workspace-manager-ziele.js). Der Grund ist derselbe wie überall im
Haus: Zwei Rechnungen über dieselbe Sache laufen auseinander, und
zwar lautlos — die Seite zeigt dann Grün, während die Erinnerung
per Push noch mahnt, und niemand weiß, welche von beiden recht hat.
SIE ENTSCHEIDET NICHTS ÜBER RECHTE. Ein ausgeblendeter Knopf ist
Aufräumen, keine Sicherung. Wer die Zielzahlen nicht ändern darf,
bekommt vom Server eine Absage — auch wenn er den Knopf mit den
Entwicklerwerkzeugen wieder sichtbar macht.
---------------------------------------------------------------------
EINE EINGABE GEHT NIE VERLOREN
Aus der Vorlage: „Bei Speicherfehlern geht keine Eingabe verloren."
Deshalb bleibt der Dialog bei einem Fehler OFFEN und behält seinen
Inhalt; geschlossen wird er erst, wenn der Server bestätigt hat.
Das ist der Unterschied zwischen einer Fehlermeldung und einem
verlorenen Abend.
===================================================================== */
(() => {
'use strict';
const BASIS = '/workspace/api/manager-ziele';
const el = (tag, klasse, text) => {
const k = document.createElement(tag);
if (klasse) k.className = klasse;
if (text !== undefined) k.textContent = text;
return k;
};
const $ = (id) => document.getElementById(id);
async function hole(pfad, einst = {}) {
const a = await fetch(pfad, { credentials: 'same-origin', ...einst });
/* Abgemeldet heißt zurück zur Anmeldung — nicht eine leere Seite
mit einer Fehlermeldung, die niemand einordnen kann. */
if (a.status === 401) { location.assign('/workspace/'); throw new Error('abgemeldet'); }
return a;
}
const alsJson = (einst, rumpf) => ({
...einst,
headers: { 'Content-Type': 'application/json', ...(einst.headers || {}) },
body: JSON.stringify(rumpf),
});
/* Die Sätze zu den Absagen des Servers. An EINER Stelle: Stünde
jeder dort, wo er gebraucht wird, hieße dieselbe Absage an zwei
Stellen verschieden. */
const FEHLERTEXT = {
datum_fehlt: 'Bitte ein Datum angeben.',
datum_zukunft: 'Das Datum liegt in der Zukunft – eintragen kannst du nur, was schon war.',
datum_fremder_monat: 'Das Datum gehört nicht in diesen Monat.',
name_fehlt: 'Bitte den TikTok-Namen angeben.',
link_ungueltig: 'Das sieht nicht nach einer gültigen Internetadresse aus (mit https:// davor).',
art_fehlt: 'Bitte eine Art auswählen.',
schon_eingetragen: 'Das steht diesen Monat schon in deiner Liste.',
monat_gesperrt: 'Dieser Monat ist abgeschlossen und lässt sich nicht mehr ändern.',
nicht_deins: 'Das ist nicht dein Eintrag.',
nicht_erlaubt: 'Dafür fehlt dir die Berechtigung.',
nicht_gespeichert: 'Gespeichert wurde nichts – bitte erneut versuchen.',
ziel_ungueltig: 'Zielzahlen müssen zwischen 0 und 99 liegen.',
};
const satzZu = (schluessel, ersatz) =>
FEHLERTEXT[schluessel] || ersatz || 'Das hat nicht geklappt.';
const MONATSNAME = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli',
'August', 'September', 'Oktober', 'November', 'Dezember'];
const monatText = (m) => {
const [j, n] = String(m).split('-');
return `${MONATSNAME[Number(n) - 1] || m} ${j}`;
};
const tagText = (d) => {
const [, m, t] = String(d).split('-');
return `${t}.${m}.`;
};
/* Das Zeichen zur Stufe. FARBE NIE ALLEIN — wer Farben nicht
unterscheidet, liest hier trotzdem, woran er ist. */
/* Gemessen am Bildschirmfoto vom 02.10.2026: Der Mittelpunkt „·" war
bei 412 px praktisch unsichtbar — die Zeile sah aus, als fehle das
Zeichen. Jedes Zeichen ist jetzt eine eigene, deutlich
unterscheidbare Form; „‼" ist EIN Zeichen, nicht zwei
Ausrufezeichen nebeneinander. */
const ZEICHEN = { gruen: '✓', orange: '!', rot: '‼', neutral: '○', aus: '–' };
let stand = null; // der zuletzt geladene Stand
let ichDarfZiele = false;
let ichDarfKorrigieren = false;
const offen = new Set(); // welche Zeilen aufgeklappt sind
/* =====================================================================
DIE KURZE ERFOLGSMELDUNG
===================================================================== */
let meldungWeg = null;
function gelungen(text) {
const alt = document.querySelector('.mz-gelungen');
if (alt) alt.remove();
clearTimeout(meldungWeg);
const k = el('p', 'mz-gelungen', text);
k.setAttribute('role', 'status');
document.body.append(k);
meldungWeg = setTimeout(() => k.remove(), 2600);
}
/* =====================================================================
DER KOPF
===================================================================== */
function kopfZeichnen(s) {
$('kopf').hidden = false;
const ring = $('ring');
ring.dataset.stufe = s.stufe;
ring.style.setProperty('--mz-anteil', String(s.gesamt.anteil));
ring.setAttribute('aria-label',
`${s.gesamt.erledigt} von ${s.gesamt.ziel} erledigt`);
$('ring-zahl').textContent = String(s.gesamt.erledigt);
$('ring-von').textContent = `von ${s.gesamt.ziel}`;
$('kopf-monat').textContent = monatText(s.monat);
$('kopf-stand').textContent = s.gesamt.ziel === 0
? 'Für deine Rolle sind diesen Monat keine Ziele gesetzt.'
: `${s.gesamt.erledigt} von ${s.gesamt.ziel} erledigt`;
const rest = $('kopf-rest');
if (s.monat !== s.jetztMonat) {
rest.textContent = 'Abgeschlossener Monat – nur zum Nachlesen.';
rest.dataset.stufe = 'neutral';
} else if (!s.pflichtig) {
rest.textContent = 'Du bist diesen Monat dazugekommen – es gibt noch keine Warnungen für dich.';
rest.dataset.stufe = 'neutral';
} else {
rest.textContent = s.bisEnde <= 0
? 'Heute ist der letzte Tag des Monats.'
: `Noch ${s.bisEnde} ${s.bisEnde === 1 ? 'Tag' : 'Tage'} bis Monatsende.`;
rest.dataset.stufe = s.gesamt.offen ? s.stufe : 'gruen';
}
}
/* =====================================================================
DIE VIER ZEILEN
===================================================================== */
function zeileBauen(a, s) {
const li = el('li', 'mz-zeile');
li.dataset.stufe = a.stufe;
li.dataset.aufgabe = a.schluessel;
if (offen.has(a.schluessel)) li.dataset.auf = 'ja';
const kopf = el('button', 'mz-zeile__kopf');
kopf.type = 'button';
kopf.setAttribute('aria-expanded', offen.has(a.schluessel) ? 'true' : 'false');
const zeichen = el('span', 'mz-zeile__zeichen', ZEICHEN[a.stufe] || '·');
zeichen.setAttribute('aria-hidden', 'true');
kopf.append(zeichen);
const text = el('span', 'mz-zeile__text');
text.append(el('span', 'mz-zeile__name', a.name));
const lage = el('span', 'mz-zeile__lage',
a.text || `${a.zahl} von ${a.ziel} – ${a.hinweis}`);
lage.dataset.stufe = a.stufe;
text.append(lage);
kopf.append(text);
const zahl = el('span', 'mz-zeile__zahl', `${a.zahl}/${a.ziel}`);
/* Vorleseprogramme bekommen einen Satz statt „2 Schrägstrich 3". */
zahl.setAttribute('aria-label',
`${a.zahl} von ${a.ziel} ${a.ziel === 1 ? a.einheit[0] : a.einheit[1]}`);
kopf.append(zahl);
kopf.append(el('span', 'mz-zeile__pfeil', '›'));
/* NUR DIESE ZEILE AUF- UND ZUKLAPPEN, nicht die ganze Liste neu
bauen.
Der erste Entwurf rief hier `zeichnen(s)` und baute damit alle
vier Zeilen neu. Das sieht gleich aus und ist es nicht: Der
Knopf, auf den gerade getippt wurde, existiert danach nicht
mehr -- der Fokus springt an den Seitenanfang, und wer mit der
Tastatur arbeitet, verliert seine Stelle. Gefunden hat es die
Bildmessung, der die Schaltfläche unter der Hand wegbrach
(„Element is not attached to the DOM"). */
kopf.addEventListener('click', () => {
const jetztAuf = !offen.has(a.schluessel);
if (jetztAuf) offen.add(a.schluessel); else offen.delete(a.schluessel);
kopf.setAttribute('aria-expanded', jetztAuf ? 'true' : 'false');
if (jetztAuf) li.dataset.auf = 'ja'; else delete li.dataset.auf;
const alteListe = li.querySelector('.mz-eintraege');
if (!jetztAuf) { alteListe?.remove(); return; }
if (alteListe) return;
const kasten = el('div', 'mz-eintraege');
kasten.dataset.liste = a.schluessel;
kasten.append(el('p', 'mz-leer', 'Wird geladen …'));
li.append(kasten);
eintraegeLaden(a.schluessel);
});
li.append(kopf);
const balken = el('div', 'mz-balken');
const fuell = el('span', 'mz-balken__fuell');
fuell.style.setProperty('--mz-anteil',
String(a.ziel ? Math.min(100, Math.round((a.zahl / a.ziel) * 100)) : 0));
balken.append(fuell);
li.append(balken);
/* Die Vorschläge aus der Pipeline hängen nur an der Rekrutierung
und nur im laufenden Monat. */
if (a.schluessel === 'creator' && s.eigen && s.monat === s.jetztMonat) {
const platz = el('div');
platz.dataset.vorschlaege = 'creator';
li.append(platz);
}
const fuss = el('div', 'mz-zeile__fuss');
if (s.eigen && s.monat === s.jetztMonat) {
const knopf = el('button', 'knopf', '+ Eintragen');
knopf.type = 'button';
knopf.addEventListener('click', () => formOeffnen(a, null));
fuss.append(knopf);
}
li.append(fuss);
if (offen.has(a.schluessel)) {
const kasten = el('div', 'mz-eintraege');
kasten.dataset.liste = a.schluessel;
kasten.append(el('p', 'mz-leer', 'Wird geladen …'));
li.append(kasten);
}
return li;
}
function zeichnen(s) {
stand = s;
kopfZeichnen(s);
const liste = $('liste');
liste.textContent = '';
for (const a of s.aufgaben) liste.append(zeileBauen(a, s));
/* Die offenen Listen und die Vorschläge wieder füllen — sie
hängen an Zeilen, die eben neu gebaut wurden. */
for (const schluessel of offen) eintraegeLaden(schluessel);
if (s.eigen && s.monat === s.jetztMonat) vorschlaegeLaden();
}
/* =====================================================================
DIE EIGENEN EINTRÄGE EINER AUFGABE
===================================================================== */
async function eintraegeLaden(aufgabe) {
const kasten = document.querySelector(`[data-liste="${aufgabe}"]`);
if (!kasten || !stand) return;
try {
const frage = new URLSearchParams({ monat: stand.monat, aufgabe });
if (!stand.eigen) frage.set('person', String(stand.person.id));
const a = await hole(`${BASIS}/eintraege?${frage}`);
if (!a.ok) throw new Error('fehler');
const d = await a.json();
kasten.textContent = '';
if (!d.eintraege.length) {
kasten.append(el('p', 'mz-leer',
'Noch nichts eingetragen – starte mit deinem ersten Eintrag.'));
return;
}
for (const e of d.eintraege) kasten.append(eintragBauen(e, aufgabe, d.bearbeitbar));
} catch {
kasten.textContent = '';
const p = el('p', 'mz-leer', 'Die Liste konnte nicht geladen werden. ');
const k = el('button', 'schritt', 'Erneut versuchen');
k.type = 'button';
k.addEventListener('click', () => eintraegeLaden(aufgabe));
p.append(k);
kasten.append(p);
}
}
function eintragBauen(e, aufgabe, bearbeitbar) {
const zeile = el('div', 'mz-eintrag');
zeile.append(el('span', 'mz-eintrag__datum', tagText(e.datum)));
const was = el('span', 'mz-eintrag__was');
if (e.name) {
was.append(document.createTextNode(e.name));
if (e.lead_id) {
const marke = el('span', 'mz-eintrag__marke', 'aus Pipeline');
marke.title = 'Dieser Eintrag ist mit einem Lead im Scout-CRM verbunden.';
was.append(marke);
}
} else if (e.link) {
const a = el('a', null, kurzLink(e.link));
a.href = e.link; a.target = '_blank'; a.rel = 'noopener noreferrer';
was.append(a);
} else {
/* Der Name der Aufgabe statt des Wortes „Eintrag" -- bei einem
Meeting steht sonst „02.10. Eintrag" da, und das sagt nichts. */
const ohneFeld = stand?.aufgaben.find((x) => x.schluessel === aufgabe);
was.append(document.createTextNode(
artName(aufgabe, e.art) || ohneFeld?.einheit?.[0] || ohneFeld?.kurz || 'Eintrag'));
}
if (e.art && (e.name || e.link)) {
was.append(el('span', 'mz-eintrag__marke', artName(aufgabe, e.art)));
}
if (e.doppelt_bei) {
const m = el('span', 'mz-eintrag__marke',
`auch bei ${e.doppelt_name || 'jemand anderem'}`);
was.append(m);
}
if (e.notiz) was.append(el('span', 'mz-eintrag__notiz', e.notiz));
zeile.append(was);
if (bearbeitbar) {
const knoepfe = el('div', 'mz-eintrag__knoepfe');
const bearbeiten = el('button', 'schritt', 'Bearbeiten');
bearbeiten.type = 'button';
bearbeiten.addEventListener('click', () => {
const a = stand.aufgaben.find((x) => x.schluessel === aufgabe);
formOeffnen(a, e);
});
const loeschen = el('button', 'schritt', 'Löschen');
loeschen.type = 'button';
loeschen.addEventListener('click', () => eintragLoeschen(e, aufgabe));
knoepfe.append(bearbeiten, loeschen);
zeile.append(knoepfe);
}
return zeile;
}
function kurzLink(w) {
try {
const u = new URL(w);
const kurz = u.host.replace(/^www\./, '') + u.pathname;
return kurz.length > 44 ? kurz.slice(0, 42) + '…' : kurz;
} catch { return w; }
}
function artName(aufgabe, wert) {
const a = stand?.aufgaben.find((x) => x.schluessel === aufgabe);
return a?.arten?.find((x) => x.wert === wert)?.name || '';
}
async function eintragLoeschen(e, aufgabe) {
const was = e.name || (e.link ? kurzLink(e.link) : tagText(e.datum));
const frage = window.frageNach
? await window.frageNach({
titel: `„${was}" löschen?`,
was: 'Der Eintrag verschwindet aus deinem Monatszähler.',
bleibt: e.lead_id ? 'Der Lead im Scout-CRM bleibt bestehen.' : '',
endgueltig: true, ja: 'Löschen',
})
: window.confirm(`„${was}" löschen?`);
if (!frage) return;
try {
const a = await hole(`${BASIS}/eintrag/${e.id}`, { method: 'DELETE' });
const d = await a.json().catch(() => ({}));
if (!a.ok) { gelungen(satzZu(d.fehler)); return; }
zeichnen({ ...stand, ...d.stand, person: stand.person, eigen: stand.eigen,
jetztMonat: stand.jetztMonat });
gelungen('Eintrag gelöscht.');
} catch {
gelungen('Löschen hat nicht geklappt.');
}
}
/* =====================================================================
DIE VORSCHLÄGE AUS DER PIPELINE
===================================================================== */
async function vorschlaegeLaden() {
const platz = document.querySelector('[data-vorschlaege="creator"]');
if (!platz) return;
try {
const a = await hole(`${BASIS}/vorschlaege`);
if (!a.ok) return;
const d = await a.json();
platz.textContent = '';
if (!d.vorschlaege.length) return;
const kasten = el('div', 'mz-vorschlag');
kasten.append(el('p', 'mz-vorschlag__titel',
d.vorschlaege.length === 1
? 'Aus deiner Pipeline: 1 übergebener Lead ist noch nicht eingetragen'
: `Aus deiner Pipeline: ${d.vorschlaege.length} übergebene Leads sind noch nicht eingetragen`));
const reihe = el('div', 'mz-vorschlag__reihe');
for (const v of d.vorschlaege) {
const k = el('button', 'schritt mz-vorschlag__knopf',
`+ ${v.handle || v.name}`);
k.type = 'button';
k.addEventListener('click', () => {
const a2 = stand.aufgaben.find((x) => x.schluessel === 'creator');
formOeffnen(a2, null, {
name: v.handle || v.name,
lead_id: v.id,
datum: (v.uebergeben_am || '').slice(0, 10) || undefined,
});
});
reihe.append(k);
}
kasten.append(reihe);
platz.append(kasten);
} catch { /* Vorschläge sind ein Angebot – ihr Ausfall darf die Seite nicht stören. */ }
}
/* =====================================================================
DAS FORMULAR
===================================================================== */
const dlg = $('form-dialog');
let formAufgabe = null;
let formEintrag = null;
let formLead = null;
function formOeffnen(aufgabe, eintrag, vorbelegt = {}) {
formAufgabe = aufgabe;
formEintrag = eintrag;
formLead = eintrag?.lead_id || vorbelegt.lead_id || null;
$('form-titel').textContent = eintrag ? 'Eintrag bearbeiten' : aufgabe.name;
/* NICHT der Feldhinweis -- der steht zwei Zeilen tiefer noch
einmal am Feld selbst. Eine Zeile, die dasselbe sagt wie die
darunter, kostet Platz und erklaert nichts (gesehen auf dem
Bildschirmfoto vom 02.10.2026). Hier steht stattdessen, WOFUER
der Eintrag zaehlt und was schon ausgefuellt ist. */
$('form-unter').textContent =
`Zählt für ${monatText(stand.monat)} · Datum ist auf heute vorausgefüllt`;
$('form-fehler').textContent = '';
$('feld-name').hidden = aufgabe.feld !== 'name';
$('feld-link').hidden = aufgabe.feld !== 'link';
$('feld-art').hidden = !aufgabe.arten;
$('treffer').hidden = true;
$('e-name').value = eintrag?.name || vorbelegt.name || '';
$('e-link').value = eintrag?.link || '';
$('e-notiz').value = eintrag?.notiz || '';
if (aufgabe.arten) {
const auswahl = $('e-art');
auswahl.textContent = '';
for (const art of aufgabe.arten) {
const o = el('option', null, art.name);
o.value = art.wert;
auswahl.append(o);
}
auswahl.value = eintrag?.art || aufgabe.arten[0].wert;
$('art-schild').textContent = aufgabe.schluessel === 'werbung' ? 'Wofür?' : 'Art';
}
/* DATUM: heute vorausgefüllt, und die Grenzen stehen am Feld.
Das ist mehr als Bequemlichkeit — der Kalender des Handys lässt
dann gar nichts Falsches erst zu, und die Absage vom Server
wird zur zweiten Sicherung statt zur ersten Begegnung. */
const datum = $('e-datum');
datum.min = `${stand.monat}-01`;
datum.max = stand.heute;
datum.value = eintrag?.datum || vorbelegt.datum || stand.heute;
dlg.showModal();
setTimeout(() => {
const erstes = aufgabe.feld === 'name' ? $('e-name')
: (aufgabe.feld === 'link' ? $('e-link') : datum);
erstes.focus();
}, 40);
}
$('form-abbruch').addEventListener('click', () => dlg.close());
$('form').addEventListener('submit', async (ereignis) => {
ereignis.preventDefault();
const fehler = $('form-fehler');
fehler.textContent = '';
const knopf = $('form-speichern');
knopf.disabled = true;
const rumpf = {
aufgabe: formAufgabe.schluessel,
datum: $('e-datum').value,
notiz: $('e-notiz').value,
};
if (formAufgabe.feld === 'name') rumpf.name = $('e-name').value;
if (formAufgabe.feld === 'link') rumpf.link = $('e-link').value;
if (formAufgabe.arten) rumpf.art = $('e-art').value;
if (formLead) rumpf.lead_id = formLead;
try {
const a = formEintrag
? await hole(`${BASIS}/eintrag/${formEintrag.id}`,
alsJson({ method: 'PATCH' }, rumpf))
: await hole(`${BASIS}/eintrag`, alsJson({ method: 'POST' }, rumpf));
const d = await a.json().catch(() => ({}));
if (!a.ok) {
/* DER DIALOG BLEIBT OFFEN und behält alles. Vorlage: „Bei
Speicherfehlern geht keine Eingabe verloren." */
fehler.textContent = d.text || satzZu(d.fehler);
knopf.disabled = false;
return;
}
dlg.close();
offen.add(formAufgabe.schluessel);
zeichnen({ ...stand, ...d.stand, person: stand.person, eigen: stand.eigen,
jetztMonat: stand.jetztMonat });
gelungen(d.warnung ? d.warnung.text : 'Gespeichert.');
verlaufLaden();
} catch {
fehler.textContent = 'Keine Verbindung. Deine Eingabe steht noch da – bitte erneut versuchen.';
} finally {
knopf.disabled = false;
}
});
/* ---------- Namensvorschläge beim Tippen ------------------------- */
let tippUhr = null;
$('e-name').addEventListener('input', () => {
/* Mit dem Tippen löst sich die Verbindung zum Lead: Wer den Namen
ändert, meint einen anderen Menschen. Eine Verbindung, die
stehen bleibt, wäre schlimmer als keine. */
formLead = null;
clearTimeout(tippUhr);
tippUhr = setTimeout(trefferLaden, 220);
});
$('e-name').addEventListener('blur', () => {
/* Erst nach dem Klick schließen — sonst verschwindet die Liste,
bevor der Finger sie trifft. */
setTimeout(() => { $('treffer').hidden = true; }, 160);
});
async function trefferLaden() {
const liste = $('treffer');
const q = $('e-name').value.trim();
if (q.length < 2) { liste.hidden = true; return; }
try {
const a = await hole(`${BASIS}/namen?q=${encodeURIComponent(q)}`);
if (!a.ok) { liste.hidden = true; return; }
const d = await a.json();
liste.textContent = '';
if (!d.treffer.length) { liste.hidden = true; return; }
for (const t of d.treffer) {
const li = el('li');
const k = el('button', null);
k.type = 'button';
k.append(document.createTextNode(t.handle || t.name));
k.append(el('span', 'mz-treffer__lage', `aus der Pipeline · ${t.status}`));
k.addEventListener('click', () => {
$('e-name').value = t.handle || t.name;
formLead = t.id;
liste.hidden = true;
});
li.append(k);
liste.append(li);
}
liste.hidden = false;
} catch { liste.hidden = true; }
}
/* =====================================================================
DER VERLAUF
===================================================================== */
async function verlaufLaden() {
try {
const frage = stand && !stand.eigen ? `?person=${stand.person.id}` : '';
const a = await hole(`${BASIS}/verlauf${frage}`);
if (!a.ok) return;
const d = await a.json();
const block = $('verlauf-block');
const platz = $('verlauf');
platz.textContent = '';
if (!d.monate.length) { block.hidden = true; return; }
block.hidden = false;
const tabelle = el('table', 'mz-tabelle');
const kopf = el('thead');
const kz = el('tr');
kz.append(el('th', null, 'Monat'));
for (const a2 of (stand?.aufgaben || [])) kz.append(el('th', null, a2.kurz));
kz.append(el('th', null, 'Gesamt'));
kopf.append(kz);
tabelle.append(kopf);
const koerper = el('tbody');
for (const m of d.monate) {
const tr = el('tr');
const geschafft = m.aufgaben.every((x) => x.erreicht !== false);
tr.dataset.stufe = geschafft ? 'gruen' : 'rot';
const t1 = el('td', null, monatText(m.monat));
t1.dataset.schild = 'Monat';
tr.append(t1);
for (const x of m.aufgaben) {
const td = el('td', 'mz-wert');
td.dataset.schild = x.kurz;
const punkt = el('span', 'mz-punkt');
punkt.dataset.stufe = x.erreicht === null ? 'aus' : (x.erreicht ? 'gruen' : 'rot');
td.append(punkt);
td.append(document.createTextNode(
x.erreicht === null ? 'nicht gefordert' : `${x.zahl}/${x.ziel}`));
tr.append(td);
}
const tg = el('td', 'mz-wert', `${m.gesamt.erledigt}/${m.gesamt.ziel}`);
tg.dataset.schild = 'Gesamt';
tr.append(tg);
koerper.append(tr);
}
tabelle.append(koerper);
platz.append(tabelle);
} catch { /* Der Verlauf ist eine Zugabe – sein Ausfall darf den Monat nicht verdecken. */ }
}
/* =====================================================================
DIE TEAM-ÜBERSICHT
===================================================================== */
async function teamLaden() {
if (!ichDarfZiele) return;
const monat = $('team-monat').value || stand.jetztMonat;
try {
const a = await hole(`${BASIS}/team?monat=${encodeURIComponent(monat)}`);
if (!a.ok) return;
const d = await a.json();
const platz = $('team');
platz.textContent = '';
const filter = $('team-filter').value;
const leute = d.leute.filter((p) => {
if (filter === 'rot') return p.stufe === 'rot';
if (filter === 'orange') return p.stufe === 'rot' || p.stufe === 'orange';
if (filter === 'offen') return p.gesamt.offen > 0;
return true;
});
if (!leute.length) {
platz.append(el('p', 'mz-leer', 'Niemand passt auf diesen Filter – das ist eine gute Nachricht.'));
return;
}
const tabelle = el('table', 'mz-tabelle');
const kopf = el('thead');
const kz = el('tr');
kz.append(el('th', null, 'Person'));
for (const a2 of d.aufgaben) kz.append(el('th', null, a2.kurz));
kz.append(el('th', null, 'Gesamt'));
kopf.append(kz);
tabelle.append(kopf);
const koerper = el('tbody');
for (const p of leute) {
const tr = el('tr');
tr.dataset.stufe = p.stufe;
const td1 = el('td');
td1.dataset.schild = 'Person';
/* „Spicy Media · Spicy Media" stand hier beim ersten Bild --
bei dieser Rolle ist der Anzeigename gleich dem Rollennamen.
Der Zusatz hilft nur, wenn er etwas hinzufuegt. */
const name = el('button', 'schritt',
p.name === p.rollenName ? p.name : `${p.name} · ${p.rollenName}`);
name.type = 'button';
name.addEventListener('click', () => personAnsehen(p.id, monat));
td1.append(name);
if (!p.pflichtig) td1.append(el('span', 'mz-eintrag__marke', 'neu – ohne Warnung'));
tr.append(td1);
for (const a2 of p.aufgaben) {
const td = el('td', 'mz-wert');
td.dataset.schild = d.aufgaben.find((x) => x.schluessel === a2.schluessel)?.kurz || '';
const punkt = el('span', 'mz-punkt');
punkt.dataset.stufe = a2.stufe;
td.append(punkt);
td.append(document.createTextNode(`${a2.zahl}/${a2.ziel}`));
tr.append(td);
}
const tg = el('td', 'mz-wert', `${p.gesamt.erledigt}/${p.gesamt.ziel}`);
tg.dataset.schild = 'Gesamt';
tr.append(tg);
koerper.append(tr);
}
tabelle.append(koerper);
platz.append(tabelle);
} catch {
$('team').textContent = '';
$('team').append(el('p', 'mz-leer', 'Die Übersicht konnte nicht geladen werden.'));
}
}
async function personAnsehen(id, monat) {
try {
const a = await hole(`${BASIS}/stand?person=${id}&monat=${encodeURIComponent(monat)}`);
if (!a.ok) return;
const s = await a.json();
offen.clear();
zeichnen(s);
$('seiten-titel').textContent = `${s.person.name} · ${monatText(s.monat)}`;
/* Nur DogFather darf fremde Einträge korrigieren. Der Satz steht
hier, damit niemand erst durch Ausprobieren herausfindet, ob
die Knöpfe etwas tun -- der Server entscheidet es ohnehin. */
$('kopf-rest').textContent = ichDarfKorrigieren
? 'Du siehst eine fremde Übersicht. Korrekturen werden mit deinem Namen protokolliert.'
: 'Du siehst eine fremde Übersicht – nur zum Nachlesen.';
verlaufLaden();
window.scrollTo({ top: 0, behavior: 'smooth' });
} catch { /* still */ }
}
/* =====================================================================
DIE ZIELZAHLEN
===================================================================== */
const zieleDlg = $('ziele-dialog');
async function zieleOeffnen() {
try {
const a = await hole(`${BASIS}/ziele`);
if (!a.ok) { gelungen(satzZu('nicht_erlaubt')); return; }
const d = await a.json();
$('ziele-gilt').textContent =
`Die Zahlen gelten ab ${monatText(d.naechsterMonat)}. Der laufende Monat bleibt, wie er ist.`;
const platz = $('ziele-felder');
platz.textContent = '';
const tabelle = el('table', 'mz-tabelle');
const kopf = el('thead');
const kz = el('tr');
kz.append(el('th', null, 'Rolle'));
for (const a2 of d.aufgaben) kz.append(el('th', null, a2.kurz));
kopf.append(kz);
tabelle.append(kopf);
const koerper = el('tbody');
for (const r of d.naechster) {
const tr = el('tr');
const td1 = el('td', null, r.rollenName);
td1.dataset.schild = 'Rolle';
tr.append(td1);
for (const a2 of d.aufgaben) {
const td = el('td');
td.dataset.schild = a2.kurz;
const feld = el('input', 'mz-ziele__zahl');
feld.type = 'number'; feld.min = '0'; feld.max = '99'; feld.step = '1';
feld.value = String(r.ziele[a2.schluessel] ?? a2.vorgabe);
feld.dataset.rolle = r.rolle;
feld.dataset.aufgabe = a2.schluessel;
feld.setAttribute('aria-label', `${r.rollenName}: ${a2.name}`);
td.append(feld);
tr.append(td);
}
koerper.append(tr);
}
tabelle.append(koerper);
platz.append(tabelle);
platz.append(el('p', 'mz-ziele__gilt',
'0 heißt: Für diese Rolle ist die Aufgabe nicht gefordert – sie warnt dann nie.'));
$('ziele-fehler').textContent = '';
zieleDlg.showModal();
} catch { gelungen('Die Zielzahlen konnten nicht geladen werden.'); }
}
$('ziele-abbruch')?.addEventListener('click', () => zieleDlg.close());
$('ziele-form')?.addEventListener('submit', async (ereignis) => {
ereignis.preventDefault();
const fehler = $('ziele-fehler');
fehler.textContent = '';
const ziele = {};
for (const feld of $('ziele-felder').querySelectorAll('input[data-rolle]')) {
const wert = Number(feld.value);
if (!Number.isInteger(wert) || wert < 0 || wert > 99) {
fehler.textContent = satzZu('ziel_ungueltig');
feld.focus();
return;
}
(ziele[feld.dataset.rolle] ||= {})[feld.dataset.aufgabe] = wert;
}
try {
const a = await hole(`${BASIS}/ziele`, alsJson({ method: 'PUT' }, { ziele }));
const d = await a.json().catch(() => ({}));
if (!a.ok) { fehler.textContent = satzZu(d.fehler); return; }
zieleDlg.close();
gelungen(`Gilt ab ${monatText(d.monat)}.`);
} catch {
fehler.textContent = 'Keine Verbindung. Deine Zahlen stehen noch da – bitte erneut versuchen.';
}
});
/* =====================================================================
START
===================================================================== */
async function laden() {
$('ladefehler').hidden = true;
try {
const a = await hole(`${BASIS}/stand`);
if (a.status === 404) {
/* Diese Seite gibt es für diese Rolle oder auf dieser Adresse
nicht. Zurück zur Startseite statt eines leeren Gerüsts —
eine Seite, die lädt und dann leer bleibt, sieht aus wie ein
Fehler und ist einer. */
location.assign('/workspace/start.html');
return;
}
if (!a.ok) throw new Error(`HTTP ${a.status}`);
const s = await a.json();
if (s.vorErstemMonat) {
$('kopf').hidden = true;
$('liste').append(el('li', 'mz-leer',
`Es geht erst mit ${monatText(s.erster)} los – vorher gibt es nichts einzutragen.`));
return;
}
ichDarfZiele = !!s.darfZiele;
ichDarfKorrigieren = !!s.darfKorrigieren;
zeichnen(s);
verlaufLaden();
if (ichDarfZiele) {
$('team-block').hidden = false;
monatsAuswahlFuellen(s);
teamLaden();
}
} catch (fehler) {
$('ladefehler').hidden = false;
$('ladefehler-grund').textContent =
String(fehler?.message || '').startsWith('HTTP')
? 'Der Server hat nicht geantwortet.'
: 'Keine Verbindung zum Server.';
}
}
function monatsAuswahlFuellen(s) {
const auswahl = $('team-monat');
auswahl.textContent = '';
let m = s.jetztMonat;
for (let i = 0; i < 18 && m >= s.erster; i++) {
const o = el('option', null, monatText(m));
o.value = m;
auswahl.append(o);
const [j, n] = m.split('-').map(Number);
const d = new Date(Date.UTC(j, n - 2, 1));
m = `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}`;
}
auswahl.value = s.monat;
}
$('team-monat')?.addEventListener('change', teamLaden);
$('team-filter')?.addEventListener('change', teamLaden);
$('ziele-auf')?.addEventListener('click', zieleOeffnen);
$('team-csv')?.addEventListener('click', () => {
const monat = $('team-monat').value || stand.jetztMonat;
location.assign(`${BASIS}/export.csv?monat=${encodeURIComponent(monat)}`);
});
$('nochmal')?.addEventListener('click', laden);
laden();
})();
workspace/assets/js/start.js
+14
View File
@@ -96,6 +96,14 @@
markiert_content: 'Content-Ideen',
markiert_community: 'Community',
markiert_technik: 'Technik',
/* MANAGER-ZIELE (02.10.2026). Ueber das ZIEL und nicht ueber den
Namen -- ein Name wandert, ein Ziel nicht (gelernt am
20.09.2026, als "LIVE-Analyse" auf der Crew-Adresse anders
heisst). Hier faellt es ohnehin nicht auf: Die Kachel gibt es
nur im Agenturhaus. Genau deshalb steht sie trotzdem so da --
die naechste koennte es anders sein. */
mz_dringend: 'manager-ziele.html',
mz_offen: 'manager-ziele.html',
};
/* Diese Hinweise bekommen zusätzlich das Merkzeichen auf die Kachel.
@@ -1518,6 +1526,12 @@
markiert_live: (n) => `${n} markierte${n === 1 ? 'r Punkt' : ' Punkte'} in der LIVE-Analyse`,
markiert_content: (n) => `${n} markierte ${n === 1 ? 'Content-Idee' : 'Content-Ideen'}`,
markiert_community: (n) => `${n} markierte${n === 1 ? 'r Punkt' : ' Punkte'} bei Community`,
/* Beide beginnen mit der Zahl, wie alle anderen auch -- die
Zeile schneidet die fuehrende Zahl ab und zeigt sie getrennt
davor. "Dir fehlen noch 2 Ziele" stuende sonst hinter einer
zweiten 2. */
mz_dringend: (n) => `${n} Monatsziel${n === 1 ? '' : 'e'} ${n === 1 ? 'ist' : 'sind'} dringend`,
mz_offen: (n) => `${n} Monatsziel${n === 1 ? ' ist' : 'e sind'} noch offen`,
markiert_technik: (n) => `${n} markierte${n === 1 ? 'r Punkt' : ' Punkte'} bei Technik`,
};