DogFatherGit
c516aad4ed
Filipe: "Es darf vor allem keine Stellen geben, an denen ein Benutzer
etwas falsch machen kann, nur weil die Seite es nicht verstaendlich
genug erklaert."
Gemessen: 30 Stellen in 16 Dateien benutzten confirm() oder prompt().
Das Haus hatte die richtige Bauweise laengst -- einen <dialog>, in
aufgaben.html sogar ausfuehrlich begruendet -- aber sie stand IN EINER
SEITE. Wer anderswo etwas loeschen liess, hatte sie nicht.
confirm('Wirklich loeschen?') stellt die falsche Frage: Es fragt, ob
man sicher ist, und nennt nicht, WAS passiert, was BLEIBT und ob es
ZURUECK geht. Jetzt beantwortet jeder der 41 Dialoge alle drei.
Neu: workspace/assets/js/nachfrage.js -- window.frageNach() mit
Pflichtgrund, Zahlenfeld, einzeiliger Eingabe und Abtippsicherung.
Drei Ausgaenge: <dialog> / confirm()-Notnagel fuer Safari vor 15.4 /
Abbruch (Esc, Klick daneben, "Doch nicht" -- immer false).
DREIMAL DERSELBE FALLSTRICK, dreimal nachgemessen statt vermutet:
.dialog stand in aufgaben.css und leistung.css -> auf dateien.html
waere der Dialog ein weisser Systemkasten gewesen. 14 Regeln
klammergenau nach module.css verschoben (Klammern gezaehlt, nicht
per Muster geschnitten -- heute frueh hat ein nicht-gieriges
Muster schon einmal CSS zerrissen).
Das Formular trug .neu neu--blank -- und .neu gibt seine Abstaende
nur in aufgaben.css. Gemessen: padding 0px, und die Felder
verloren ihre height:44px. Jetzt steht alles unter
.nachfrage__form in module.css; der Dialog borgt nichts mehr.
Die erste Fassung der Pruefung zaehlte nachfrage.js SELBST als
Nutzer -- damit war jede Seite trivialerweise "Nutzer" und die
Pruefung gruen ohne Inhalt. Jetzt ausdruecklich ausgenommen.
ZWEI FUNDE NEBENBEI:
hilfeAufraeumen() wird im Betrieb NIE aufgerufen. Der Kommentar
behauptete "wird beim Start aufgerufen (siehe index.js)" -- das
war nie wahr; einziger Aufrufer ist die eigene Pruefung. Folge:
geschlossene vertrauliche Faelle bleiben unbegrenzt stehen. NICHT
eingeschaltet (das loescht echte Daten und ist Filipes
Entscheidung), sondern der Kommentar richtiggestellt.
Einen Hilfe-Fall zu schliessen ist endgueltig -- es gibt keine
Route, die ihn wieder oeffnet. Vorher stand darueber nur die
Frage nach einem Schlusswort. Jetzt sagt der Dialog es.
pruef-struktur hat meine eigene Pruefung von heute Nachmittag
erwischt: Sie bildete ihr Datum aus UTC. Beim Beheben erst
heuteLokal(datum) genommen -- die Funktion nimmt gar kein Argument
und haette still "heute" statt "+3 Tage" geliefert. Jetzt tagLokal(3),
nachgerechnet: Abstand 3 Tage.
Am Bildschirm angesehen (Rechner 1280, Handy 390): passt rein, Esc
ergibt false, Fokus liegt auf dem harmlosen Knopf, Knoepfe 44px auf
Touch. Der Platzhalter im Abtippfeld zeigte den erwarteten Namen --
das sah aus wie ein schon ausgefuelltes Feld, entfernt.
Neu: server/pruef-nachfrage.mjs -- 17/0, mit sechs Gegenproben und
beiden Richtungen (wer fragt, laedt die Datei; wer nie fragt, laedt
sie nicht -- sonst truege die Anmeldewand 4,8 KB fuer nichts).
pruef-meldungen 8/0, pruef-css-klassen gruen, pruef-struktur gruen,
pruef-leistung gruen.
304 lines
14 KiB
HTML
304 lines
14 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||
<title>Aufgaben · Spicy & Dogi</title>
|
||
<meta name="robots" content="noindex, nofollow" />
|
||
<link rel="manifest" href="/workspace/app.webmanifest" />
|
||
<!-- Die Farbe der Fensterleiste, wenn der Workspace als App laeuft.
|
||
Stand auf #0674b9 (kraeftiges Blau) und stach damit als einziger
|
||
heller Balken ueber einer durchweg dunklen Seite. Jetzt derselbe
|
||
Ton wie die Kopfleiste darunter (#06090f), damit Leiste und Seite
|
||
eine Flaeche sind statt zweier. -->
|
||
<meta name="theme-color" content="#06090f" />
|
||
<link rel="icon" type="image/png" href="/assets/img/app-symbole/workspace-32.png?v=202609191956" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202609191956" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202609191956" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202609191956" />
|
||
<link rel="stylesheet" href="assets/css/aufgaben.css?v=202609191956" />
|
||
<link rel="stylesheet" href="assets/css/module.css?v=202609191956" />
|
||
<!-- haus.css MUSS die letzte Stilvorlage sein (10.09.2026).
|
||
Auf der Agenturadresse ist sie leer -- das Haus hier IST der
|
||
Grundzustand. Auf der Adresse von Team Dogi biegt der Server
|
||
genau diesen Dateinamen auf crew-haus.css um, und die Seite
|
||
kommt schon beim ERSTEN Abruf in Lila und Babyblau an --
|
||
ohne Umfaerben im Browser, ohne Flackern. -->
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202609191956" />
|
||
</head>
|
||
|
||
<body class="start">
|
||
|
||
<!-- Der Schleier ueber der Buehne (Casper und HasiDog in den unteren
|
||
Ecken, siehe start.css). Ein eigenes Element statt eines dritten
|
||
Pseudo-Elements -- body hat nur ::before und ::after. -->
|
||
<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 Workspace</a> · Aufgaben</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">
|
||
|
||
<section class="kopf-zeile">
|
||
<div>
|
||
<p class="marke">Aufgaben</p>
|
||
<h1 class="titel">Offen. In Arbeit. Review. Erledigt.</h1>
|
||
</div>
|
||
<button type="button" class="knopf knopf--klein" id="neu-oeffnen">Neue Aufgabe</button>
|
||
</section>
|
||
|
||
<!-- Die Leiste über dem Brett (01.09.2026). Drei Zeilen, in dieser
|
||
Reihenfolge – die Reihenfolge ist die Aussage:
|
||
1. was brennt (ein Satz, sofort lesbar)
|
||
2. Ausschnitte (Nur meine · Heute · Überfällig)
|
||
3. die eigenen Creator (nur für Betreuer, siehe aufgaben.js)
|
||
Alle drei bleiben verborgen, bis feststeht, wer angemeldet ist –
|
||
eine Filterleiste ohne Zahlen ist ein Versprechen ohne Deckung. -->
|
||
<p class="lage" id="lage" role="status" hidden></p>
|
||
<div class="ausschnitte" id="ausschnitte" role="group"
|
||
aria-label="Ausschnitt wählen" hidden></div>
|
||
<div class="creator-reihe" id="creator-reihe" role="group"
|
||
aria-label="Nach Creator einschränken" hidden></div>
|
||
|
||
<!-- Formular zum Anlegen. Standardmäßig zu, damit das Brett im Vordergrund
|
||
steht und die Seite nicht mit einem Formular begrüßt. -->
|
||
<form class="neu" id="neu" hidden>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-titel">Titel</label>
|
||
<input id="f-titel" name="titel" maxlength="160" placeholder="Was ist zu tun?" required />
|
||
</div>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="f-text">Beschreibung <span class="leise">(optional)</span></label>
|
||
<textarea id="f-text" name="beschreibung" rows="3" maxlength="4000"
|
||
placeholder="Worum geht es genau?"></textarea>
|
||
</div>
|
||
<div class="neu__raster">
|
||
<div>
|
||
<label class="feld-schild" for="f-prio">Priorität</label>
|
||
<select id="f-prio" name="prioritaet">
|
||
<option value="hoch">hoch</option>
|
||
<option value="mittel" selected>mittel</option>
|
||
<option value="niedrig">niedrig</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="f-frist">Frist <span class="leise">(optional)</span></label>
|
||
<input id="f-frist" name="frist" type="date" />
|
||
</div>
|
||
<div id="feld-creator" hidden>
|
||
<label class="feld-schild" for="f-creator">Bereich von</label>
|
||
<select id="f-creator" name="creator_id"><option value="">—</option></select>
|
||
</div>
|
||
<div id="feld-verant" hidden>
|
||
<label class="feld-schild" for="f-verant">Verantwortlich</label>
|
||
<select id="f-verant" name="verantwortlich_id"><option value="">—</option></select>
|
||
</div>
|
||
<!-- Die Kategorie aus Kapitel 6.1 des Anforderungsdokuments.
|
||
Bleibt leer und verborgen, bis der Server Kategorien mitschickt
|
||
und die Aufgabe wirklich zu jemandem gehoert, der sie benutzt
|
||
-- die Auswahl wird deshalb erst im Skript gefuellt. Stuenden
|
||
die Namen hier, stuenden sie in einer Datei, die jeder
|
||
bekommt, der die Seite oeffnet. -->
|
||
<div id="feld-kanal" hidden>
|
||
<label class="feld-schild" for="f-kanal">Für welchen Kanal?</label>
|
||
<select id="f-kanal" name="kanal"><option value="">Für alle</option></select>
|
||
<p class="feld-hinweis">Drei Accounts, eine Liste. Leer heißt: gilt für alles.</p>
|
||
</div>
|
||
<div id="feld-kategorie" hidden>
|
||
<label class="feld-schild" for="f-kategorie">Kategorie</label>
|
||
<select id="f-kategorie" name="kategorie"><option value="">—</option></select>
|
||
</div>
|
||
</div>
|
||
<p class="fehler" id="neu-fehler" role="alert" aria-live="polite"></p>
|
||
<div class="neu__knoepfe">
|
||
<button type="submit" class="knopf knopf--klein" id="neu-speichern">Anlegen</button>
|
||
<button type="button" class="abmelden" id="neu-abbrechen">Abbrechen</button>
|
||
</div>
|
||
</form>
|
||
|
||
<p class="fehler" id="fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<!-- AUFGABEN AUS DER VORLAGE (09.09.2026).
|
||
|
||
Filipe: "ich will dass du die vier klassen ueberall mit aufgaben
|
||
perfektionnierst ... mit perfekt kategorien und aufgaben."
|
||
|
||
Die Checkliste sagt, WAS sitzen muss. Sie sagt nicht, was jemand
|
||
als Naechstes TUT. Hier stehen 48 fertige Aufgaben -- vier
|
||
Bereiche mal vier Stufen mal drei -- die man mit einem Klick zu
|
||
einer echten Aufgabe mit Frist und Verantwortlichem macht.
|
||
|
||
Der Block steht UEBER dem Brett: Wer ein leeres Brett hat, soll
|
||
nicht erst daran vorbeiscrollen, um zu sehen, womit man anfaengt. -->
|
||
<section class="vorlagenbrett" id="vorlagenbrett" hidden></section>
|
||
|
||
<div class="brett" id="brett" aria-busy="true">
|
||
<p class="leise" id="laedt">Aufgaben werden geladen …</p>
|
||
</div>
|
||
|
||
<!-- ABGEBROCHENE AUFGABEN (05.09.2026).
|
||
|
||
Ein eigener Bereich UNTER dem Brett, nicht als fünfte Spalte:
|
||
Am Handy wären dann alle fünf so schmal, dass keine mehr lesbar
|
||
ist. Und Abgebrochenes sieht man nicht täglich.
|
||
|
||
Verschwinden darf es aber auch nicht -- sonst wäre der Abbruch
|
||
ein Löschen mit Zwischenschritt, und genau das soll er nicht
|
||
sein. Deshalb: zugeklappt, mit der Anzahl im Titel, einen Klick
|
||
entfernt.
|
||
|
||
<details> und nicht selbstgebaut: bringt Tastaturbedienung,
|
||
aria-expanded und das Verhalten von Suchfunktionen im Browser
|
||
von sich aus mit. -->
|
||
<details class="abgebrochen" id="abgebrochen" hidden>
|
||
<summary class="abgebrochen__kopf">
|
||
<span class="abgebrochen__name">Abgebrochen</span>
|
||
<span class="abgebrochen__zahl" id="abgebrochen-zahl">0</span>
|
||
</summary>
|
||
<p class="abgebrochen__unter">
|
||
Nicht gelöscht – nur beiseitegelegt. Mit Grund, damit später
|
||
nachvollziehbar bleibt, warum. Jederzeit wieder aufnehmbar.
|
||
</p>
|
||
<div class="abgebrochen__liste" id="abgebrochen-liste"></div>
|
||
</details>
|
||
|
||
</main>
|
||
|
||
<!-- Bearbeiten. Als natives <dialog>: bringt Fokusfang, Schließen mit Esc
|
||
und die Abdunklung des Hintergrunds ohne eigenen Code mit. -->
|
||
<dialog class="dialog" id="bearbeiten-dialog">
|
||
<form method="dialog" id="bearbeiten" class="neu neu--blank">
|
||
<h2 class="dialog__titel">Aufgabe bearbeiten</h2>
|
||
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="b-titel">Titel</label>
|
||
<input id="b-titel" maxlength="160" required />
|
||
</div>
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="b-text">Beschreibung</label>
|
||
<textarea id="b-text" rows="3" maxlength="4000"></textarea>
|
||
</div>
|
||
<div class="neu__raster">
|
||
<div>
|
||
<label class="feld-schild" for="b-prio">Priorität</label>
|
||
<select id="b-prio">
|
||
<option value="hoch">hoch</option>
|
||
<option value="mittel">mittel</option>
|
||
<option value="niedrig">niedrig</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="feld-schild" for="b-frist">Frist</label>
|
||
<input id="b-frist" type="date" />
|
||
</div>
|
||
<div id="b-feld-creator" hidden>
|
||
<label class="feld-schild" for="b-creator">Bereich von</label>
|
||
<select id="b-creator"><option value="">—</option></select>
|
||
</div>
|
||
<div id="b-feld-verant" hidden>
|
||
<label class="feld-schild" for="b-verant">Verantwortlich</label>
|
||
<select id="b-verant"><option value="">—</option></select>
|
||
</div>
|
||
<div id="b-feld-kanal" hidden>
|
||
<label class="feld-schild" for="b-kanal">Für welchen Kanal?</label>
|
||
<select id="b-kanal"><option value="">Für alle</option></select>
|
||
</div>
|
||
<div id="b-feld-kategorie" hidden>
|
||
<label class="feld-schild" for="b-kategorie">Kategorie</label>
|
||
<select id="b-kategorie"><option value="">—</option></select>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="fehler" id="b-fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<!-- ==== AUFWAND (15.09.2026, Stufe 9) =========================
|
||
„Wichtig“ gibt es schon – das ist die Priorität. Der Aufwand
|
||
ist die zweite Angabe, ohne die man nicht entscheiden kann:
|
||
Schaffe ich das zwischendurch, oder muss ich mir Zeit nehmen?
|
||
|
||
Freiwillig. Die erste Wahl ist deshalb „noch nicht
|
||
eingeschätzt“ und nicht etwa „mittel“ – eine Vorgabe wäre eine
|
||
Schätzung, die niemand abgegeben hat. -->
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="b-aufwand">Aufwand</label>
|
||
<select id="b-aufwand">
|
||
<option value="">noch nicht eingeschätzt</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- ==== ANHÄNGE (15.09.2026, Stufe 9) =========================
|
||
Die Datei landet in der Dateiablage – mit ihrer Sichtbarkeit,
|
||
ihren Freigaben und ihren Fassungen. Hier steht nur, dass sie
|
||
zu dieser Aufgabe gehört. Ein eigener Hochladeweg wäre eine
|
||
zweite Ablage mit einer zweiten Rechtelogik gewesen. -->
|
||
<div class="neu__zeile anhaenge">
|
||
<span class="feld-schild">Anhänge</span>
|
||
<div id="b-anhaenge" class="anhaenge__liste"></div>
|
||
<label class="anhaenge__zufuegen">
|
||
<input type="file" id="b-datei" hidden />
|
||
<span class="anhaenge__knopf">Datei anhängen</span>
|
||
</label>
|
||
<p class="anhaenge__hinweis" id="b-anhang-stand"></p>
|
||
</div>
|
||
|
||
<div class="dialog__knoepfe">
|
||
<button type="button" class="knopf knopf--klein" id="b-speichern">Speichern</button>
|
||
<button type="button" class="abmelden" id="b-abbrechen">Abbrechen</button>
|
||
<button type="button" class="abmelden abmelden--warnung" id="b-loeschen" hidden>Löschen</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<!-- ABBRECHEN MIT GRUND (05.09.2026).
|
||
|
||
Kein confirm(): Das blockiert die ganze Seite, nimmt kein Textfeld
|
||
auf und sieht auf jedem Rechner anders aus.
|
||
|
||
Der Grund ist PFLICHT. Ohne ihn weiß in vier Wochen niemand mehr,
|
||
warum etwas wegfiel -- und dann ist ein Abbruch von einem Löschen
|
||
nicht mehr zu unterscheiden. Der Server verlangt ihn ebenfalls;
|
||
hier steht er, damit man es merkt, bevor man abschickt. -->
|
||
<dialog class="dialog" id="abbruch-dialog">
|
||
<form method="dialog" id="abbruch-form" class="neu neu--blank">
|
||
<h2 class="dialog__titel" id="abbruch-titel">Aufgabe abbrechen?</h2>
|
||
<!-- Sagt, was passiert UND was nicht passiert. Die Sorge bei so
|
||
einem Knopf ist immer, ob etwas verloren geht. -->
|
||
<p class="dialog__unter" id="abbruch-was"></p>
|
||
|
||
<div class="neu__zeile">
|
||
<label class="feld-schild" for="abbruch-grund">Warum wird sie abgebrochen?</label>
|
||
<textarea id="abbruch-grund" rows="3" maxlength="500"
|
||
placeholder="z. B. Kampagne wurde verschoben – kommt im Oktober neu."></textarea>
|
||
</div>
|
||
|
||
<p class="fehler" id="abbruch-fehler" role="alert" aria-live="polite"></p>
|
||
|
||
<div class="dialog__knoepfe">
|
||
<button type="submit" class="knopf knopf--klein" id="abbruch-ok">Abbrechen & beiseitelegen</button>
|
||
<button type="button" class="abmelden" id="abbruch-zurueck">Doch nicht</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<script src="assets/js/meldung.js?v=202609191956" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202609191956" defer></script>
|
||
|
||
<script src="assets/js/wahl.js?v=202609191956" defer></script>
|
||
<script src="assets/js/bereiche.js?v=202609191956" defer></script>
|
||
<script src="assets/js/kopf.js?v=202609191956" defer></script>
|
||
<script src="assets/js/glocke.js?v=202609191956" defer></script>
|
||
<script src="assets/js/aufgaben.js?v=202609191956" defer></script>
|
||
</body>
|
||
</html>
|