Ein Klick statt eines Formulars -- der Schnell-Eintrag

Filipe mit dem Bildschirmfoto der Zeilen: „ich will das viel perfekter
und geiler. will dass es viel einfacher ist. am besten so wenig wie
moeglich zu tippen. fertige sachen, bereit um ab zu gehen."

GEZAEHLT, WAS EIN EINTRAG VORHER KOSTETE -- das war der Punkt:

    Manager Meeting   Knopf, Dialog, Speichern     2 Klicks + Fenster
    Schulung          dazu die Art waehlen         3 Klicks + Fenster
    Werbung           dazu den Link tippen         2 Klicks + tippen
    Creator           dazu den Namen tippen        2 Klicks + tippen

Ein Fenster fuer die Aussage „ich war heute im Meeting" sind drei
Handgriffe fuer null Angaben. Vier Aufgaben im Monat, acht Klicks,
acht Fenster.

JETZT

    Manager Meeting   EIN Klick  („Heute eingetragen")
    Schulung          EIN Klick  (zwei fertige Knoepfe)
    Werbung           Einfuegen + Eintragen, kein Tippen
    Creator           ein Klick je Lead -- oder mehrere Namen auf
                      einmal einwerfen

Am echten Bildschirm nachgemessen: 0/2 vorher, EIN Klick, 1/2 nachher,
„Rueckgaengig" bringt 0/2 zurueck. Nicht „der Knopf ist da", sondern
„danach steht eine andere Zahl dort".

DREI ENTSCHEIDUNGEN DAHINTER

1. DER WEG NIMMT EINE LISTE. „Drei Creator auf einmal" ist EIN
   Vorgang. Wer drei Namen aus Discord kopiert, hat das Monatsziel in
   einem Zug erledigt -- das ist der eigentliche Gewinn, nicht der
   gesparte Klick.

   JEDER EINTRAG WIRD EINZELN GEPRUEFT UND EINZELN BEANTWORTET. Die
   ganze Liste zurueckzuweisen, weil ein Name schon dasteht, waere
   die bequeme und die falsche Loesung: Dann weiss niemand, welcher
   der drei das Problem war, und tippt alles noch einmal. Geprueft
   wird genau dieser Fall -- zwei gehen durch, einer wird im Klartext
   abgelehnt, mit Namen.

2. KEINE SICHERHEITSABFRAGE VORHER, SONDERN „RUECKGAENGIG" DANACH.
   Eine Nachfrage bei jedem Klick waere der Handgriff, den wir gerade
   abgeschafft haben, in neuer Verkleidung. Sie kostet jeden; das
   Zuruecknehmen kostet nur den, der sich vertippt hat. Acht Sekunden
   statt drei -- lang genug, um es mit einem Daumen zu treffen.

3. DIE ZULETZT GEWAEHLTE ART IST VORGEWAEHLT -- abgeleitet aus dem
   letzten Eintrag, nicht in einer Einstellung gespeichert. Eine
   Spalte „Lieblingsart" waere ein zweiter Bestand, der veralten
   kann; der letzte Eintrag veraltet nie.

WAS MIR DABEI AUFGEFALLEN IST

Ein Ein-Klick-Knopf macht den Doppeltipper zur wahrscheinlichsten
Fehleingabe -- bei „Heute eingetragen" merkt man nichts davon, es gibt
ja keine Angabe. Zwei Meetings an einem Tag zu VERBIETEN waere aber
falsch, sie sind moeglich. Also ein Hinweis statt einer Sperre:
„Fuer diesen Tag stehen jetzt 2. War das Absicht?" -- und das
Zuruecknehmen liegt ohnehin daneben. Mit Gegenprobe, dass beim ERSTEN
keine Warnung kommt; sonst waere sie keine Warnung, sondern ein
Begleittext.

AUSSERDEM

  * Die Zeilen bauen sich beim Eintragen nicht mehr neu, sondern
    ziehen nur die Zahlen nach. Sonst verschwaende das Feld, in dem
    man gerade tippt, unter der Hand.
  * „Einfuegen" holt den Link aus der Zwischenablage -- mit drittem
    Ausgang: Firefox gibt sie ohne Erweiterung nicht her, und dann
    wird das gesagt, statt dass ein Knopf stumm bleibt.
  * Im Dialog drei fertige Tage (Heute / Gestern / Vorgestern) statt
    eines Kalenders. Was nicht mehr in diesen Monat gehoert, wird gar
    nicht erst angeboten -- am 1. und 2. fallen welche weg.
  * Der Dialog heisst jetzt „Mehr Angaben" und ist die Ausnahme fuer
    Notiz oder altes Datum. Dass er fuer etwas Normales gebraucht
    wurde, war sein Fehler.

GEPRUEFT: 194 Pruefungen, 0 Fehler (vorher 168)

Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
2026-10-02 17:48:04 +02:00
co-authored by Claude Opus 5
parent f6d2437985
commit b46f75484f
51 changed files with 1433 additions and 749 deletions
+318 -15
View File
@@ -77,6 +77,16 @@
const [j, n] = String(m).split('-');
return `${MONATSNAME[Number(n) - 1] || m} ${j}`;
};
/** Derselbe Tag, um `versatz` Tage verschoben. Gerechnet in UTC und
* um 12 Uhr angesetzt, damit die Sommerzeitumstellung nicht
* einen Tag verschiebt -- an zwei Nächten im Jahr hat ein Tag
* 23 oder 25 Stunden. */
const tagVersatz = (tag, versatz) => {
const d = new Date(`${tag}T12:00:00Z`);
d.setUTCDate(d.getUTCDate() + versatz);
return d.toISOString().slice(0, 10);
};
const tagText = (d) => {
const [, m, t] = String(d).split('-');
return `${t}.${m}.`;
@@ -118,14 +128,46 @@
DIE KURZE ERFOLGSMELDUNG
===================================================================== */
let meldungWeg = null;
function gelungen(text) {
/** Die kurze Meldung unten.
*
* MIT „RUECKGAENGIG", wenn etwas entstanden ist. Das ist der
* Tausch, der den Schnell-Eintrag erst moeglich macht: Statt vor
* JEDEM Eintrag zu fragen („wirklich?"), kann man danach einmal
* zuruecknehmen. Die Nachfrage kostet jeden Klick, das
* Zuruecknehmen nur den, der sich vertippt hat.
*
* ACHT SEKUNDEN, nicht drei: Lange genug, um es zu lesen, zu
* verstehen und zu treffen -- auch mit einem Daumen auf einem
* Handy. */
function gelungen(text, ids) {
const alt = document.querySelector('.mz-gelungen');
if (alt) alt.remove();
clearTimeout(meldungWeg);
const k = el('p', 'mz-gelungen', text);
const k = el('p', 'mz-gelungen');
k.setAttribute('role', 'status');
k.append(document.createTextNode(text));
if (Array.isArray(ids) && ids.length) {
const zurueck = el('button', 'mz-gelungen__zurueck',
ids.length === 1 ? 'Rückgängig' : `Alle ${ids.length} zurücknehmen`);
zurueck.type = 'button';
zurueck.addEventListener('click', async () => {
zurueck.disabled = true;
let letzte = null;
for (const id of ids) {
try {
const a = await hole(`${BASIS}/eintrag/${id}`, { method: 'DELETE' });
if (a.ok) letzte = (await a.json().catch(() => ({}))).stand || letzte;
} catch { /* der naechste darf es trotzdem versuchen */ }
}
k.remove();
if (letzte) standSetzen(letzte); else laden();
gelungen(ids.length === 1 ? 'Zurückgenommen.' : `${ids.length} zurückgenommen.`);
verlaufLaden();
});
k.append(zurueck);
}
document.body.append(k);
meldungWeg = setTimeout(() => k.remove(), 2600);
meldungWeg = setTimeout(() => k.remove(), ids?.length ? 8000 : 2800);
}
/* =====================================================================
@@ -260,12 +302,7 @@
}
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);
}
if (s.eigen && s.monat === s.jetztMonat) fuss.append(schnellBauen(a));
li.append(fuss);
if (offen.has(a.schluessel)) {
@@ -277,6 +314,244 @@
return li;
}
/* =====================================================================
DER SCHNELL-EINTRAG
=====================================================================
Filipe am 02.10.2026: „will dass es viel einfacher ist. am besten
so wenig wie moeglich zu tippen. fertige sachen, bereit um ab zu
gehen."
GEZAEHLT, WAS ES VORHER KOSTETE -- und das war der Punkt:
Manager Meeting Knopf, Dialog, Speichern 2 Klicks + Fenster
Schulung dazu die Art waehlen 3 Klicks + Fenster
Werbung dazu den Link tippen 2 Klicks + tippen
Creator dazu den Namen tippen 2 Klicks + tippen
Ein Fenster fuer die Aussage „ich war heute im Meeting" ist drei
Handgriffe fuer null Angaben. Jetzt:
Manager Meeting EIN Klick
Schulung EIN Klick (zwei fertige Knoepfe)
Werbung Einfuegen + Eintragen, kein Tippen
Creator ein Klick je Lead -- oder mehrere Namen auf
einmal einwerfen
DER DIALOG BLEIBT, aber als Ausnahme: „Mehr Angaben" fuer eine
Notiz oder ein anderes Datum. Er wird nicht mehr gebraucht, um
etwas Normales einzutragen -- und genau das war sein Fehler.
KEINE SICHERHEITSABFRAGE VOR DEM EINTRAGEN, sondern „Rueckgaengig"
danach. Eine Nachfrage bei jedem Klick waere der Handgriff, den
wir gerade abgeschafft haben, in neuer Verkleidung. Rueckgaengig
kostet nur den, der sich wirklich vertippt hat. */
/** Ein Feld, das auf Enter absendet -- und beim Einfuegen aus der
* Zwischenablage gleich mitnimmt, was dort steht. */
function schnellFeld(platzhalter, senden) {
const feld = el('input', 'mz-schnell__feld');
feld.type = 'text';
feld.placeholder = platzhalter;
feld.autocomplete = 'off';
feld.addEventListener('keydown', (e) => {
if (e.key === 'Enter') { e.preventDefault(); senden(); }
});
return feld;
}
/** „Einfügen" aus der Zwischenablage.
*
* DREI AUSGAENGE, wie ueberall im Haus: ging / ging nicht / der
* Browser laesst es gar nicht zu. Der dritte ist der haeufige --
* Firefox gibt die Zwischenablage ohne Erweiterung nicht her.
* Dann wird das gesagt, statt dass ein Knopf stumm bleibt. */
async function ausZwischenablage(feld) {
try {
if (!navigator.clipboard?.readText) {
gelungen('Dein Browser gibt die Zwischenablage nicht her – bitte einfügen mit Strg+V.');
feld.focus();
return;
}
const text = (await navigator.clipboard.readText()).trim();
if (!text) { gelungen('In der Zwischenablage steht nichts.'); feld.focus(); return; }
feld.value = text;
feld.focus();
} catch {
gelungen('Einfügen ging nicht – bitte mit Strg+V in das Feld.');
feld.focus();
}
}
/** Mehrere Namen aus einem Wurf: Komma, Semikolon, Zeilenumbruch
* oder Leerzeichen vor einem @ trennen. Wer drei Namen aus
* Discord kopiert, soll sie nicht einzeln eintippen muessen. */
function teilen(text) {
return String(text || '')
.split(/[,;\n\r]+|\s+(?=@)/)
.map((t) => t.trim())
.filter(Boolean);
}
/** Schickt den Schnell-Eintrag ab und meldet, was daraus wurde. */
async function schnellSenden(a, rumpf, knopf, feld) {
if (knopf) knopf.disabled = true;
try {
const antwort = await hole(`${BASIS}/eintraege`,
alsJson({ method: 'POST' }, { aufgabe: a.schluessel, datum: stand.heute, ...rumpf }));
const d = await antwort.json().catch(() => ({}));
if (!antwort.ok && !d.angelegt?.length) {
const erster = d.abgelehnt?.[0];
gelungen(erster?.text || satzZu(erster?.fehler || d.fehler));
return;
}
standSetzen(d.stand);
if (feld) { feld.value = ''; feld.focus(); }
/* WAS GEMELDET WIRD, haengt davon ab, was wirklich passiert ist
-- eine Erfolgsmeldung ueber vier Namen, von denen zwei
abgelehnt wurden, waere eine Luege. */
const n = d.angelegt.length;
const teile = [n === 1 ? 'Eingetragen' : `${n} eingetragen`];
if (d.abgelehnt?.length) {
teile.push(d.abgelehnt.length === 1
? `1 nicht: ${d.abgelehnt[0].text || satzZu(d.abgelehnt[0].fehler)}`
: `${d.abgelehnt.length} nicht übernommen (schon vorhanden oder ungültig)`);
}
if (d.warnungen?.length) teile.push(d.warnungen[0].text);
if (d.zuviel) teile.push(d.zuviel);
gelungen(teile.join(' · '), d.angelegt.map((x) => x.id));
verlaufLaden();
} catch {
gelungen('Keine Verbindung – nichts gespeichert. Bitte erneut versuchen.');
} finally {
if (knopf) knopf.disabled = false;
}
}
/** Baut die Schnellbedienung einer Aufgabe. */
function schnellBauen(a) {
const kasten = el('div', 'mz-schnell');
/* ---- Ohne Pflichtangabe: EIN Knopf, und zwar fertig ---------- */
if (!a.feld || a.feld === 'art') {
const arten = a.arten || [{ wert: null, name: 'Heute eingetragen' }];
for (const art of arten) {
/* Der Knopf sagt, was danach dasteht -- nicht „Speichern".
„Schulung heute" ist eine Handlung, „Speichern" ist eine
Rueckfrage an sich selbst. */
const text = art.wert ? `${art.name} heute` : 'Heute eingetragen';
const k = el('button', 'knopf', text);
k.type = 'button';
k.addEventListener('click', () => schnellSenden(a, art.wert ? { art: art.wert } : {}, k));
kasten.append(k);
}
}
/* ---- Mit Pflichtangabe: ein Feld, Enter reicht --------------- */
if (a.feld === 'name' || a.feld === 'link') {
const istName = a.feld === 'name';
const feld = schnellFeld(
istName ? '@name – mehrere mit Komma' : 'Link einfügen',
() => abschicken());
if (!istName) feld.type = 'url';
feld.setAttribute('aria-label', istName ? a.hinweis : 'Link zum Video');
const abschicken = () => {
const roh = feld.value.trim();
if (!roh) { feld.focus(); return; }
const teileListe = teilen(roh);
const rumpf = istName ? { namen: teileListe } : { links: teileListe };
if (a.arten) rumpf.art = artWahl.value;
schnellSenden(a, rumpf, los, feld);
};
const einfuegen = el('button', 'schritt', 'Einfügen');
einfuegen.type = 'button';
einfuegen.title = 'Aus der Zwischenablage einfügen';
einfuegen.addEventListener('click', () => ausZwischenablage(feld));
/* Die Art als fertige Auswahl mit der zuletzt benutzten vorn --
abgeleitet aus dem letzten Eintrag, nicht gespeichert. Damit
ist „Werbung für die Agentur" beim zweiten Mal ein Klick
weniger. */
let artWahl = null;
if (a.arten) {
artWahl = el('select', 'mz-schnell__art');
artWahl.setAttribute('aria-label', 'Wofür?');
for (const art of a.arten) {
const o = el('option', null, art.name);
o.value = art.wert;
artWahl.append(o);
}
artWahl.value = a.letzteArt || a.arten[0].wert;
}
const los = el('button', 'knopf', 'Eintragen');
los.type = 'button';
los.addEventListener('click', abschicken);
kasten.append(feld, einfuegen);
if (artWahl) kasten.append(artWahl);
kasten.append(los);
}
const mehr = el('button', 'schritt', 'Mehr Angaben');
mehr.type = 'button';
mehr.title = 'Mit Notiz oder einem anderen Datum eintragen';
mehr.addEventListener('click', () => formOeffnen(a, null));
kasten.append(mehr);
return kasten;
}
/* =====================================================================
DEN STAND SETZEN, OHNE DIE ZEILEN NEU ZU BAUEN
=====================================================================
`zeichnen()` baut alles neu. Fuer den Schnell-Eintrag waere das
falsch: Das Feld, in dem man gerade tippt, verschwaende unter der
Hand, und der Fokus spraenge an den Seitenanfang -- genau der
Fehler, den die Bildmessung heute schon einmal gefunden hat.
Hier werden deshalb nur die ZAHLEN nachgezogen. Was sich nie
aendert (Name, Feld, Knoepfe), bleibt stehen. */
function standSetzen(neu) {
if (!neu || !Array.isArray(neu.aufgaben)) return;
stand = { ...stand, ...neu };
kopfZeichnen(stand);
for (const a of stand.aufgaben) {
const li = document.querySelector(`.mz-zeile[data-aufgabe="${a.schluessel}"]`);
if (!li) continue;
li.dataset.stufe = a.stufe;
const zahl = li.querySelector('.mz-zeile__zahl');
if (zahl) {
zahl.textContent = `${a.zahl}/${a.ziel}`;
zahl.setAttribute('aria-label',
`${a.zahl} von ${a.ziel} ${a.ziel === 1 ? a.einheit[0] : a.einheit[1]}`);
}
const lage = li.querySelector('.mz-zeile__lage');
if (lage) {
lage.dataset.stufe = a.stufe;
lage.textContent = '';
lage.append(el('span', 'mz-zeile__stufe', ZEICHEN[a.stufe] || '○'));
lage.append(document.createTextNode(
a.text || `${a.zahl} von ${a.ziel} – ${a.hinweis}`));
}
const fuell = li.querySelector('.mz-balken__fuell');
if (fuell) {
fuell.style.setProperty('--mz-anteil',
String(a.ziel ? Math.min(100, Math.round((a.zahl / a.ziel) * 100)) : 0));
}
/* Die aufgeklappte Liste darunter zeigt jetzt etwas anderes. */
if (offen.has(a.schluessel)) eintraegeLaden(a.schluessel);
}
if (stand.eigen && stand.monat === stand.jetztMonat) vorschlaegeLaden();
}
function zeichnen(s) {
stand = s;
kopfZeichnen(s);
@@ -397,8 +672,7 @@
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 });
standSetzen(d.stand);
gelungen('Eintrag gelöscht.');
} catch {
gelungen('Löschen hat nicht geklappt.');
@@ -496,6 +770,32 @@
datum.max = stand.heute;
datum.value = eintrag?.datum || vorbelegt.datum || stand.heute;
/* DREI FERTIGE TAGE STATT EINES KALENDERS.
„Heute" ist ohnehin vorbelegt; „Gestern" und „Vorgestern" sind
die beiden Faelle, die in der Praxis vorkommen (man traegt
abends oder am naechsten Morgen nach). Alles weiter zurueck
geht weiterhin ueber das Datumsfeld -- aber niemand muss mehr
einen Kalender aufmachen, um „gestern" zu sagen. */
const schnelltage = $('datum-schnell');
schnelltage.textContent = '';
for (const [versatz, text] of [[0, 'Heute'], [-1, 'Gestern'], [-2, 'Vorgestern']]) {
const tag = tagVersatz(stand.heute, versatz);
/* Was nicht mehr in diesen Monat gehoert, wird gar nicht erst
angeboten -- ein Knopf, der eine Absage holt, ist schlimmer
als kein Knopf. Am 1. und 2. des Monats fallen deshalb
welche weg, und das ist richtig so. */
if (tag.slice(0, 7) !== stand.monat) continue;
const k = el('button', 'schritt', text);
k.type = 'button';
k.addEventListener('click', () => {
datum.value = tag;
for (const x of schnelltage.children) x.removeAttribute('data-an');
k.dataset.an = 'ja';
});
if (tag === datum.value) k.dataset.an = 'ja';
schnelltage.append(k);
}
dlg.showModal();
setTimeout(() => {
const erstes = aufgabe.feld === 'name' ? $('e-name')
@@ -539,10 +839,13 @@
}
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.');
/* `standSetzen` statt `zeichnen`: nur die Zahlen nachziehen.
Ein Neuaufbau wuerde die aufgeklappte Liste wegwerfen und den
Fokus an den Seitenanfang schicken. */
standSetzen(d.stand);
if (!formEintrag && d.id) offen.add(formAufgabe.schluessel);
gelungen(d.warnung ? d.warnung.text : 'Gespeichert.',
formEintrag ? null : (d.id ? [d.id] : null));
verlaufLaden();
} catch {
fehler.textContent = 'Keine Verbindung. Deine Eingabe steht noch da – bitte erneut versuchen.';