DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f6d2437985afae46886d8e8690016f65387596ac
dogfather-universe/workspace/manager-ziele.html
T
DogFatherGitandClaude Opus 5 f6d2437985 Manager-Ziele zu Ende gebaut -- und dabei zwei Loecher gefunden 
Filipe: „perfektioniere alles jetzt sofort, es muss ready sein."

Die Vorlage Punkt fuer Punkt gegen das Gebaute gehalten, nicht gegen
meine eigene Liste von heute Mittag. Vier Punkte standen noch offen,
und auf dem Weg dorthin sind zwei Fehler aufgefallen, nach denen
niemand gesucht hat.

DIE ZWEI FEHLER ZUERST -- beide gefunden durch Messen, nicht Denken

1. EINE GELOESCHTE PERSON HAETTE IHRE ZAHLEN MITGENOMMEN.
   `mz_eintrag.person_id` stand auf ON DELETE CASCADE. Die Vorlage
   sagt aber: „Wer die Rolle verliert, sieht die Kachel nicht mehr;
   die Daten bleiben fuer den DogFather erhalten." Mit CASCADE waere
   genau das nicht wahr gewesen -- `DELETE FROM personen` haette den
   Monatsverlauf eines Menschen lautlos mitgenommen.

   Jetzt SET NULL, und Name und Rolle stehen zusaetzlich als Text am
   Eintrag (dieselbe Bauweise wie bei support_meldungen). Die Rolle
   ist nicht Zierde: Ohne sie wuerde ein abgeschlossener Monat
   rueckwirkend an den Zielzahlen einer anderen Rolle gemessen.

   Der Umbau laeuft auf dem Bestand von heute Mittag -- Spaltenliste
   AUS PRAGMA abgeleitet, nicht gepflegt, und geprueft werden Zeilen
   UND Spalten. Am 11.09.2026 hat genau so ein Umbau drei Spalten mit
   Inhalt verloren, ohne Fehlermeldung, bei unveraenderter Zeilenzahl.

2. MEIN EIGENER SPERR-TRIGGER HAETTE DAS LOESCHEN BLOCKIERT.
   ON DELETE SET NULL ist kein Loeschen, sondern ein UPDATE auf
   person_id. Der Trigger sah eine Aenderung an einem abgeschlossenen
   Monat und brach ab -- `DELETE FROM personen` waere damit
   gescheitert, an einer Stelle, die mit Monatszielen nichts zu tun
   hat. Erlaubt ist jetzt genau eine Aenderung an einem alten Monat:
   dem Eintrag seinen Besitzer zu nehmen. Als BEDINGUNG und nicht als
   `UPDATE OF <spaltenliste>` -- eine Liste muesste jemand pflegen.

   Weil `CREATE TRIGGER IF NOT EXISTS` eine geaenderte Fassung nicht
   erneuert, wird die alte am INHALT erkannt und ersetzt. Eine
   Fassungsnummer muesste jemand hochzaehlen, und das wird vergessen.

DIE VIER OFFENEN PUNKTE DER VORLAGE

  04  Jede Aufgabenzeile hat ihr eigenes Zeichen -- aus dem Haus
      (`window.Bereiche`), nicht neu gezeichnet: Trichter, Bildschirm,
      Buch, Rahmen. Das Statuszeichen bleibt daneben; ein eingefaerbtes
      Aufgabenzeichen allein traegt die Stufe nicht.
  05  „Farbiger Rand + Badge": Eine Kachel, an der eine Warnung haengt,
      traegt jetzt einen feinen Saum -- JEDE Kachel, nicht nur diese.
      Eine Regel, die nur an einer Stelle gilt, wird beim naechsten Mal
      vergessen.
  08  Die Team-Tabelle ist sortierbar: jede Spalte ein Knopf (kein
      anklickbares <th> -- das erreicht die Tastatur nicht), mit
      aria-sort, und sortiert wird nach ANTEIL statt nach nackter Zahl.
      Dazu eine Ampel-Spalte mit Wort. Auf dem Handy verschwindet die
      Kopfzeile im Kartenmodus, deshalb steht das Sortieren zusaetzlich
      in der Leiste -- sonst waere es auf einem Telefon nicht
      vorhanden.
  09  Wer die Rolle verliert, steht weiter in der Uebersicht, als
      „nicht mehr dabei" und mit der Rolle von damals. Wer geloescht
      wurde, erscheint als zusammengefasste Zeile unter dem
      mitgeschriebenen Namen.

WAS DER SAUM MICH GELEHRT HAT

Er stand zuerst in start.css und war wirkungslos -- der Browser
lieferte weiter den Faseschatten. Der Grund steht seit dem 25.09.2026
in module.css: `:is()` uebernimmt die Spezifitaet seines staerksten
Arguments, und `.gruppe[data-gruppe]` macht die ganze Modulliste
(0,2,0) -- genau so stark wie `.kachel[data-warn="ja"]`, bei
Gleichstand gewinnt die zuletzt geladene Datei. Dieselbe Falle wie
damals bei den Fokusringen, dieselbe Antwort: Was gegen die Modulform
gewinnen muss, gehoert in die Datei mit der Modulform. Gemerkt habe
ich es nur, weil die Bildmessung den errechneten Schatten AUSGIBT
statt ein Bild zu machen.

Beim Herausschneiden blieb eine Klammer zu viel in start.css stehen --
gefunden von pruef-css-klassen („eine schliessende Klammer ohne
oeffnende"), bevor sie still CSS verschluckt hat.

AUSSERDEM BEHOBEN

  * Spicy Media sah an einer FREMDEN Liste „Bearbeiten" und „Loeschen",
    und der Server antwortete mit 403. Ein Knopf, der nichts tut, ist
    schlimmer als kein Knopf.
  * Klick auf eine Person klappt jetzt alle vier Zeilen auf. Die
    Vorlage verspricht „zeigt deren Eintraege" -- zugeklappt zeigte
    der Klick nur Zahlen.
  * Der CSV-Export kennt drei Staende statt zwei: „pflichtig", „neu,
    noch ohne Pflicht", „nicht mehr dabei". Vorher hiess beides „nein".
  * Das Aufklappen baute die ganze Liste neu und riss den
    angeklickten Knopf weg (Fokus sprang nach oben).

GEPRUEFT: 168 Pruefungen, 0 Fehler (vorher 141)

Neu darunter: der Umbau auf einem echten Alt-Bestand (Zeilen, Spalten,
Inhalt, Indizes, Trigger, und ein zweiter Lauf, der nichts mehr tut),
das Loeschen einer Person mit Eintraegen aus einem abgeschlossenen
Monat -- mit Gegenprobe, dass dieselbe Sperre den INHALT weiterhin
nicht aendern laesst.

Zwei meiner neuen Pruefungen haben zuerst sich selbst gemessen statt
den Code: Eine verglich gegen einen Eintrag, den sie vorher geloescht
hatte (404 sah aus wie ein haltender Riegel), die andere meldete eine
fehlende Spalte, die nur ihr eigener Handeinsatz verursacht hatte.
Beide berichtigt.

Am Bildschirm nachgemessen bei 412 px und 1280 px: kein waagerechtes
Schieben, kein eigenes Beruehrziel unter 40 px, genau EINE Kachel mit
Saum und zwanzig ohne.

Co-Authored-By: Claude Opus 5 <[email protected]>
2026-10-02 17:34:58 +02:00

229 lines
9.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Manager-Ziele · Spicy &amp; Dogi</title>
<meta name="robots" content="noindex, nofollow" />
<link rel="manifest" href="/workspace/app.webmanifest" />
<meta name="theme-color" content="#06090f" />
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202610021734" />
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610021734" />
<link rel="stylesheet" href="assets/css/gate.css?v=202610021734" />
<link rel="stylesheet" href="assets/css/start.css?v=202610021734" />
<link rel="stylesheet" href="assets/css/manager-ziele.css?v=202610021734" />
<!-- module.css an VORLETZTER, haus.css an LETZTER Stelle. Die
Reihenfolge ist keine Geschmacksfrage: haus.css setzt nur
Variablen, und bei Variablen entscheidet allein, wer zuletzt
kommt. pruef-css-klassen.mjs misst genau dieses Paar nach. -->
<link rel="stylesheet" href="assets/css/module.css?v=202610021734" />
<link rel="stylesheet" href="assets/css/haus.css?v=202610021734" />
</head>
<body class="start">
<div class="schleier" aria-hidden="true"></div>
<header class="kopfleiste">
<button type="button" class="zurueck-knopf" id="zurueck" hidden>
<svg class="zurueck-knopf__pfeil" viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.5 5.5 8 12l6.5 6.5" />
</svg>
<span class="zurueck-knopf__text">Zurück</span>
</button>
<p class="marke"><span class="marke__text"><a class="zurueck" href="start.html">Creator&nbsp;Workspace</a> · Manager-Ziele</span></p>
<div class="kopfleiste__rechts">
<span class="wer" id="wer">…</span>
<button type="button" class="abmelden" id="abmelden">Abmelden</button>
</div>
</header>
<main class="inhalt inhalt--breit mz-seite">
<section class="kopf-zeile">
<div>
<p class="marke">Manager-Ziele</p>
<h1 class="titel" id="seiten-titel">Dein Monat</h1>
<p class="unterzeile">
Vier feste Aufgaben pro Monat. Trag ein, was du gemacht hast –
der Rest rechnet sich von selbst.
</p>
</div>
</section>
<!-- ==================================================================
DER KOPF: Monat, Gesamtfortschritt, Resttage.
Der Ring steht VOR dem Text und nicht daneben-rechts: Auf einem
Handy ist er damit das Erste, was ins Auge fällt, und man weiß
in einer halben Sekunde, ob noch etwas offen ist.
================================================================== -->
<div class="mz-kopf" id="kopf" hidden>
<div class="mz-ring" id="ring" role="img" aria-label="Fortschritt">
<span class="mz-ring__text">
<span class="mz-ring__zahl" id="ring-zahl">–</span>
<span class="mz-ring__von" id="ring-von"></span>
</span>
</div>
<div class="mz-kopf__text">
<p class="mz-kopf__monat" id="kopf-monat">…</p>
<p class="mz-kopf__stand" id="kopf-stand"></p>
<p class="mz-kopf__rest" id="kopf-rest"></p>
</div>
</div>
<p class="ladefehler" id="ladefehler" hidden>
<span class="ladefehler__satz">Die Seite konnte nicht geladen werden.</span>
<span class="ladefehler__grund" id="ladefehler-grund"></span>
<button type="button" class="ladefehler__knopf" id="nochmal">Erneut versuchen</button>
</p>
<!-- Die vier Aufgabenzeilen. Werden gebaut, nicht geschrieben:
Welche Aufgaben es gibt, sagt der Server (AUFGABEN in
manager-ziele-tabellen.js). Stünden sie hier noch einmal,
wären es zwei Listen, von denen eine veraltet. -->
<ul class="mz-liste" id="liste" aria-live="polite"></ul>
<!-- ==================================================================
DER DAUERHAFTE HINWEIS
Wörtlich aus der Vorlage. Er steht unter den Aufgaben und nicht
darüber: Oben wäre er eine Drohung, bevor man überhaupt
gesehen hat, worum es geht.
================================================================== -->
<p class="mz-merksatz">
Inaktive Manager können nicht mehr berücksichtigt werden, da die
Anforderungen von TikTok stetig wachsen und wir als Firma diesen
nachkommen müssen.
</p>
<!-- ---------- VERLAUF: vergangene Monate, nur lesbar -------------- -->
<section class="mz-block" id="verlauf-block" hidden>
<h2 class="mz-block__titel">Verlauf</h2>
<div id="verlauf" aria-live="polite"></div>
</section>
<!-- ---------- TEAM: nur DogFather und Spicy Media ----------------- -->
<section class="mz-block" id="team-block" hidden>
<h2 class="mz-block__titel">Team-Übersicht</h2>
<div class="mz-steuer">
<label class="mz-feld__schild" for="team-monat">Monat</label>
<select id="team-monat"></select>
<label class="mz-feld__schild" for="team-filter">Zeigen</label>
<select id="team-filter">
<option value="alle">alle</option>
<option value="rot">nur Rot</option>
<option value="orange">Rot und Orange</option>
<option value="offen">alle mit offenen Zielen</option>
</select>
<!-- SORTIEREN AUCH HIER UND NICHT NUR AN DEN SPALTEN.
Auf dem Handy wird die Tabelle zu Karten, und die
Spaltenueberschriften verschwinden dabei (sie wuerden dort
mehr Platz kosten als der Inhalt). Ohne dieses Feld waere
das Sortieren auf einem Telefon schlicht nicht erreichbar
-- eine Funktion, die nur auf dem grossen Bildschirm
existiert, ist eine halbe Funktion.
Die Liste wird von manager-ziele.js gefuellt, damit sie zu
den Aufgaben passt, die der Server nennt. Eine zweite,
hier hingeschriebene Liste waere die, die auseinanderlaeuft. -->
<label class="mz-feld__schild" for="team-sort">Sortieren</label>
<select id="team-sort"></select>
<button type="button" class="schritt" id="team-richtung"
aria-label="Sortierrichtung umdrehen">aufsteigend ▴</button>
<button type="button" class="schritt" id="team-csv">Als CSV laden</button>
<button type="button" class="schritt" id="ziele-auf">Zielzahlen</button>
</div>
<div id="team" aria-live="polite"></div>
</section>
</main>
<!-- ==================================================================
DAS FORMULAR
Ein echtes <dialog>: Es bringt Fokusfang, Escape und den
abdunkelnden Hintergrund mit, ohne dass davon eine Zeile selbst
geschrieben werden muss. Nachgebaute Fenster vergessen davon
immer mindestens eines -- meist den Fokus.
================================================================== -->
<dialog class="dialog" id="form-dialog">
<form class="mz-form" id="form" method="dialog">
<div>
<h2 class="dialog__titel" id="form-titel">Eintragen</h2>
<p class="dialog__unter dialog__unter--still" id="form-unter"></p>
</div>
<label class="mz-feld mz-feld--vorschlag" id="feld-name" hidden>
<span class="mz-feld__schild">TikTok-Name des Creators</span>
<input type="text" id="e-name" maxlength="120" autocomplete="off"
placeholder="z. B. @lunatanzt" />
<ul class="mz-treffer" id="treffer" hidden></ul>
</label>
<label class="mz-feld" id="feld-link" hidden>
<span class="mz-feld__schild">Link zum Video</span>
<input type="url" id="e-link" maxlength="500" inputmode="url"
placeholder="https://www.tiktok.com/@…/video/…" />
</label>
<label class="mz-feld" id="feld-art" hidden>
<span class="mz-feld__schild" id="art-schild">Art</span>
<select id="e-art"></select>
</label>
<label class="mz-feld">
<span class="mz-feld__schild">Datum</span>
<input type="date" id="e-datum" required />
</label>
<label class="mz-feld">
<span class="mz-feld__schild">Notiz (freiwillig)</span>
<textarea id="e-notiz" maxlength="1000" rows="2"></textarea>
</label>
<p class="mz-form__fehler" id="form-fehler" role="alert" aria-live="polite"></p>
<div class="dialog__knoepfe">
<button type="button" class="knopf-still" id="form-abbruch">Abbrechen</button>
<button type="submit" class="knopf" id="form-speichern">Speichern</button>
</div>
</form>
</dialog>
<!-- Die Zielzahlen. Eigener Dialog und keine zweite Seite: Es sind
sechzehn Zahlen, die man einmal im Monat ansieht. -->
<dialog class="dialog dialog--breit" id="ziele-dialog">
<form class="mz-form" id="ziele-form" method="dialog">
<div>
<h2 class="dialog__titel">Zielzahlen je Rolle</h2>
<p class="dialog__unter dialog__unter--still" id="ziele-gilt"></p>
</div>
<div id="ziele-felder"></div>
<p class="mz-form__fehler" id="ziele-fehler" role="alert" aria-live="polite"></p>
<div class="dialog__knoepfe">
<button type="button" class="knopf-still" id="ziele-abbruch">Abbrechen</button>
<button type="submit" class="knopf" id="ziele-speichern">Für nächsten Monat speichern</button>
</div>
</form>
</dialog>
<!-- bereiche.js VOR kopf.js: Dort steht `window.Bereiche`, und
kopf.js liest daraus die Leitungsrollen. Ohne sie stürzt jede
Seite ab, und zwar nur in der Browserkonsole -- die Kopfleiste
kommt trotzdem. -->
<script src="assets/js/bereiche.js?v=202610021734" defer></script>
<!-- wahl.js gehört zu kopf.js: Der Sicht-Umschalter baut daraus seine
Liste. pruef-css-klassen setzt das durch, und zwar auch die
Reihenfolge -- kopf.js fragt beim Aufbau nach dem fertigen
Bedienelement. -->
<script src="assets/js/wahl.js?v=202610021734" defer></script>
<script src="assets/js/nachfrage.js?v=202610021734" defer></script>
<script src="assets/js/installieren.js?v=202610021734" defer></script>
<script src="assets/js/kopf.js?v=202610021734" defer></script>
<script src="assets/js/glocke.js?v=202610021734" defer></script>
<script src="assets/js/manager-ziele.js?v=202610021734" defer></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink