Filipe, mit Bildschirmfoto der Leiste "FUER WEN · Alle 3 2 ·
Marina 1 · Diene 0": "brauchen wir nicht auf der aufgaben seite."
GETRENNT GEFUEHRT, wie seit dem 24.09. fuer jeden Umbau. Es ist
DIESELBE Reihe in beiden Haeusern, aber nicht dieselbe Aufgabe:
Team Dogi -> "Fuer wen", darin drei, vier Modis, die ohnehin
alle auf einem Schirm stehen. Ein Filter fuer eine
Liste, die kuerzer ist als er. WEG.
Spicy Media -> "Alle Creator" / "Deine Creator". Scouts und
Manager filtern damit durch ihre Creator, und das
sind deutlich mehr. BLEIBT.
Die Trennung ist eine einzige Zeile an `ich.haus` -- das kommt vom
Server. Eine Rollenliste im Browser waere die zweite Wahrheit und fuer
DogFather, der in beiden Haeusern arbeitet, sogar falsch.
Der Zweig fuer die dritte Beschriftung ist mit entfernt, nicht
stehengelassen: "Fuer wen" ist von nirgends mehr erreichbar, und ein
Zweig, den niemand erreicht, sieht beim Lesen aus wie ein Fall, den
es gibt -- beim naechsten Umbau pflegt ihn jemand mit.
BEWIESEN IN BEIDE RICHTUNGEN, sonst waere die Trennung eine
Behauptung:
* pruef-handy-teamdogi (neu, 3 Pruefungen, 244 -> 247): auf crew.
im echten Browser ist die Reihe weg -- MIT der Gegenprobe, dass
die Seite ueberhaupt steht (4 Knoepfe in der Schwester-Reihe).
"Reihe nicht da" waere sonst auch auf einer kaputten Seite wahr.
* pruef-aufgabenbrett (49, unveraendert): bei Spicy Media steht sie
weiterhin da, mit "Alle, Tili, Luna" und der Beschriftung "Alle
Creator".
ZWEI DINGE AM PRUEFWERKZEUG, die mich heute Zeit gekostet haben:
1. `probleme` wurde seit jeher gefuellt und NIE ausgegeben. Am Ende
stand "1 Befund" und sonst nichts -- wer das liest, weiss DASS
etwas ist, nicht WAS, und muss den ganzen Lauf noch einmal
anstossen. Die Befunde stehen jetzt unter der Zahl.
2. Der Anmeldeweg stand in der Schleife, und fuer die neue Messung
habe ich ihn abgeschrieben -- dabei eine aeltere Fassung erwischt,
ohne `isVisible()` und mit `click()` statt `check()`. Ergebnis:
30 Sekunden Zeitablauf an der Altersfrage, die es fuer DogFather
gar nicht gibt. Jetzt ein Helfer, den beide Aufrufer benutzen.
Co-Authored-By: Claude Opus 5 <[email protected]>
234 lines
10 KiB
HTML
234 lines
10 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>Manager-Ziele · Spicy & 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=202610031525" />
|
||
<link rel="apple-touch-icon" href="/assets/img/app-symbole/workspace-180.png?v=202610031525" />
|
||
<link rel="stylesheet" href="assets/css/gate.css?v=202610031525" />
|
||
<link rel="stylesheet" href="assets/css/start.css?v=202610031525" />
|
||
<link rel="stylesheet" href="assets/css/manager-ziele.css?v=202610031525" />
|
||
<!-- 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=202610031525" />
|
||
<link rel="stylesheet" href="assets/css/haus.css?v=202610031525" />
|
||
</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 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>
|
||
|
||
<div class="mz-feld">
|
||
<span class="mz-feld__schild">Datum</span>
|
||
<!-- Die drei fertigen Tage werden von manager-ziele.js gefuellt:
|
||
welche es gibt, haengt davon ab, welcher Tag heute ist (am
|
||
1. des Monats gibt es kein „gestern" in diesem Monat). Eine
|
||
feste Liste hier waere an zwei Tagen im Monat falsch. -->
|
||
<div class="mz-schnelltage" id="datum-schnell"></div>
|
||
<input type="date" id="e-datum" required />
|
||
</div>
|
||
|
||
<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=202610031525" 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=202610031525" defer></script>
|
||
<script src="assets/js/nachfrage.js?v=202610031525" defer></script>
|
||
<script src="assets/js/installieren.js?v=202610031525" defer></script>
|
||
<script src="assets/js/kopf.js?v=202610031525" defer></script>
|
||
<script src="assets/js/glocke.js?v=202610031525" defer></script>
|
||
<script src="assets/js/manager-ziele.js?v=202610031525" defer></script>
|
||
</body>
|
||
</html>
|