From 6a9daa0583c398ac5929452a8cf61df3a6061e88 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 5 Oct 2026 06:54:45 +0000 Subject: [PATCH] =?UTF-8?q?=C3=96ffnungszeiten:=20Urlaub-Frage=20l=C3=A4ss?= =?UTF-8?q?t=20offene=20Hinweis-Formulare=20stehen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit „Ja, anlegen“ zeichnet nur noch die Hinweis-Liste neu (offene, ungespeicherte Formulare und Zeilen bleiben), statt den ganzen Abschnitt zu ersetzen. Co-Authored-By: Claude Opus 5.5 --- public/zeiten-ausnahmen.js | 8 ++- public/zeiten-leisten.js | 106 ++++++++++++++++++++++++++----------- public/zeiten.css | 1 + test/zeitenEditor.test.js | 67 +++++++++++++++++++++++ 4 files changed, 148 insertions(+), 34 deletions(-) diff --git a/public/zeiten-ausnahmen.js b/public/zeiten-ausnahmen.js index 2533c50..da6e71e 100644 --- a/public/zeiten-ausnahmen.js +++ b/public/zeiten-ausnahmen.js @@ -9,13 +9,14 @@ „geschlossen“, ein „bitte prüfen“-Tag (Heiligabend, Silvester, nur ortsuebliche Feiertage) folgt dem Wochenplan. Ausnahmen: Betriebsurlaub (von–bis, Text) und Sondertag (Datum, geschlossen oder Zeiten), Geltung „alle Pläne“ oder ein Plan. Nach dem Speichern eines Urlaubs ab 2 Tagen fragt der Editor „Hinweis-Leiste dazu anlegen?“ (ctx.hinweisFrage); „Ja“ legt den Vorschlag (hinweisVorschlag) in - daten.hinweise an und speichert (danach werden Ausnahmen und die Hinweis-Liste neu gezeichnet). */ + daten.hinweise an und speichert (danach werden die Ausnahmen neu gezeichnet und die Hinweis-Liste aufgefrischt, ohne offene Hinweis-Formulare anzufassen). */ import { BUNDESLAENDER, datumKurz, datumLang, heuteBerlin, istTag } from './termine-view.js' import { abschnitt, allgemeinerFehler, editorZeile, feld, frage, gesperrt, h, neuerEintrag, zeigeFehler } from './termine-dom.js' import { MODI, ZEITEN_LIMITS, ZEITEN_MAX, hinweisVorschlag, neueZeitenId, tagFehler } from './zeiten-view.js' import { entfernenKnopf, nachSpeichern, stelleVon } from './zeiten-speichern.js' import { MODUS_WAHL, tagFelder, tagText } from './zeiten-plaene.js' +import { hinweisListeErneuern } from './zeiten-leisten.js' const nachBeginn = (x, y) => (x.von < y.von ? -1 : x.von > y.von ? 1 : x.bis < y.bis ? -1 : x.bis > y.bis ? 1 : 0) const zeitraum = (a) => (a.von === a.bis ? datumKurz(a.von) : `${datumKurz(a.von)} – ${datumKurz(a.bis)}`) @@ -196,7 +197,10 @@ function hinweisFrage(t) { }, { container: form }) if (!ok || !sp.nochHier()) return ctx.hinweisFrage = null - nachSpeichern(t, `Die Hinweis-Leiste „${v.text}“ ist angelegt.`, '[data-werkzeug="urlaub-neu"]', () => t.zeichne(['ausnahmen', 'hinweise'])) + nachSpeichern(t, `Die Hinweis-Leiste „${v.text}“ ist angelegt.`, '[data-werkzeug="urlaub-neu"]', () => { + t.zeichne(['ausnahmen']) + hinweisListeErneuern(t) // der neue Hinweis steht in der Liste; ein offenes, ungespeichertes Hinweis-Formular bleibt, wie es ist + }) }) return form } diff --git a/public/zeiten-leisten.js b/public/zeiten-leisten.js index bb52f42..b7709cb 100644 --- a/public/zeiten-leisten.js +++ b/public/zeiten-leisten.js @@ -6,6 +6,8 @@ tippt den Knopf an) und je Hinweis Text (<= 140), Art (Info, Urlaub, Aktion, Wichtig mit festen Farben wie auf der Website), optionaler Knopf (Link https oder Anrufen) und Zeitraum von–bis (Kalendertage, beide optional; „Aktion“ verlangt ein Enddatum). Der Browser prueft frueh (Aktion ohne Ende, Ende vor Beginn, leerer Text) und zeigt bei Link und Rufnummer nur einen Hinweis (linkOk): entschieden wird auf dem Server, sein Fehler steht am Feld. + Ein anderer Abschnitt kann einen Hinweis anlegen (Urlaub-Frage der Ausnahmen): hinweisListeErneuern(t) zeichnet dann nur die Liste neu und laesst offene Formulare dieses + Abschnitts samt ungespeicherter Eingaben stehen. Kontakt-Leiste: Ein/Aus, Telefon, Adresse, WhatsApp (Nummer, Starttext, Haken „Datenschutzerklaerung“). Der Server speichert Rufnummern als Ziffern mit Laendervorwahl; der Editor zeigt die gespeicherte Nummer aus der Antwort (+49 …) im Feld und in der Meldung, damit der Kunde sieht, was gilt. R12: den Zeitpunkt der WhatsApp-Bestaetigung (kontakt.whatsapp.bestaetigtAt) setzt nur der Kunde selbst. In der Kundenansicht ist der Haken gesperrt und der @@ -48,51 +50,91 @@ function zeitraumText(x) { const nachBeginn = (a, b) => (tagOder(a.von) < tagOder(b.von) ? -1 : tagOder(a.von) > tagOder(b.von) ? 1 : 0) -export function hinweise(t) { +/** Eine Zeile der Hinweis-Liste (laufend, geplant oder vergangen) mit ihrem Bearbeiten-Formular unter dem Knopf. */ +function hinweisReihe(t, x, heute) { const { ctx } = t - const alle = (Array.isArray(ctx.stand.daten.hinweise) ? ctx.stand.daten.hinweise : []).filter((x) => istObjekt(x) && typeof x.id === 'string') + const vorbei = tagOder(x.bis) !== '' && x.bis < heute + const art = HINWEIS_ARTEN.includes(x.art) ? x.art : 'info' + const knopf = istObjekt(x.knopf) && KNOPF_ARTEN.includes(x.knopf.art) ? x.knopf : null + const von = tagOder(x.von) + const zustand = vorbei ? ['vorbei', 'off'] : von && von > heute ? ['geplant', 'wait'] : ['läuft', 'ok'] + const text = typeof x.text === 'string' ? x.text : '' + return editorZeile({ + attrs: { 'data-id': x.id }, + nurLesen: ctx.nurLesen, + label: `Hinweis ${text}`, + haupt: [ + h('strong', { class: 'tm-name' }, text), + h('span', { class: 'tm-meta' }, + h('span', { class: `zt-art zt-art-${art}` }, ART_NAME[art]), + ` · ${zeitraumText(x)}${knopf ? ` · Knopf „${typeof knopf.text === 'string' ? knopf.text : ''}“ (${knopf.art === 'anruf' ? 'Anrufen' : 'Link'})` : ''}`), + ], + pille: h('span', { class: `tm-pille tm-pille-${zustand[1]}` }, zustand[0]), + baue: (schliessen) => formular(t, { a: x, schliessen }), + }) +} + +/** + * Die Liste der Hinweise: [Liste der laufenden und geplanten (oder „Keine Hinweise eingetragen.“), eingeklappte Liste der vergangenen]. vorhanden (Map ID =>
  • ): + * Zeilen, die schon in der Seite stehen, werden wiederverwendet (samt ihrem offenen Formular) statt neu gebaut; nur für den Fall, dass sich an diesen Hinweisen nichts geändert hat. + */ +function hinweisListe(t, vorhanden = new Map()) { + const alle = (Array.isArray(t.ctx.stand.daten.hinweise) ? t.ctx.stand.daten.hinweise : []).filter((x) => istObjekt(x) && typeof x.id === 'string') const heute = heuteBerlin() const vorbei = (x) => tagOder(x.bis) !== '' && x.bis < heute + const reihe = (x) => vorhanden.get(x.id) ?? hinweisReihe(t, x, heute) const kommend = alle.filter((x) => !vorbei(x)).sort(nachBeginn) const alt = alle.filter(vorbei).sort(nachBeginn).reverse() - const voll = alle.length >= ZEITEN_LIMITS.hinweise + return { + voll: alle.length >= ZEITEN_LIMITS.hinweise, + teile: [ + kommend.length + ? h('ul', { class: 'tm-eintraege', 'aria-label': 'Laufende und geplante Hinweise' }, kommend.map(reihe)) + : h('p', { class: 'tm-leer' }, 'Keine Hinweise eingetragen.'), + alt.length + ? h('details', { class: 'tm-details' }, h('summary', null, `Vergangene Hinweise (${alt.length})`), h('ul', { class: 'tm-eintraege' }, alt.map(reihe))) + : null, + ], + } +} +const GRENZ_TEXT = `Mehr als ${ZEITEN_LIMITS.hinweise} Hinweise sind nicht möglich.` + +export function hinweise(t) { + const { ctx } = t + const { voll, teile } = hinweisListe(t) const neu = neuerEintrag({ - nurLesen: ctx.nurLesen, text: 'Hinweis-Leiste anlegen', werkzeug: 'hinweis-neu', primaer: true, voll, grenzText: `Mehr als ${ZEITEN_LIMITS.hinweise} Hinweise sind nicht möglich.`, + nurLesen: ctx.nurLesen, text: 'Hinweis-Leiste anlegen', werkzeug: 'hinweis-neu', primaer: true, voll, grenzText: GRENZ_TEXT, baue: (schliessen) => formular(t, { a: null, schliessen }), }) - - const reihe = (x) => { - const art = HINWEIS_ARTEN.includes(x.art) ? x.art : 'info' - const knopf = istObjekt(x.knopf) && KNOPF_ARTEN.includes(x.knopf.art) ? x.knopf : null - const von = tagOder(x.von) - const zustand = vorbei(x) ? ['vorbei', 'off'] : von && von > heute ? ['geplant', 'wait'] : ['läuft', 'ok'] - const text = typeof x.text === 'string' ? x.text : '' - return editorZeile({ - attrs: { 'data-id': x.id }, - nurLesen: ctx.nurLesen, - label: `Hinweis ${text}`, - haupt: [ - h('strong', { class: 'tm-name' }, text), - h('span', { class: 'tm-meta' }, - h('span', { class: `zt-art zt-art-${art}` }, ART_NAME[art]), - ` · ${zeitraumText(x)}${knopf ? ` · Knopf „${typeof knopf.text === 'string' ? knopf.text : ''}“ (${knopf.art === 'anruf' ? 'Anrufen' : 'Link'})` : ''}`), - ], - pille: h('span', { class: `tm-pille tm-pille-${zustand[1]}` }, zustand[0]), - baue: (schliessen) => formular(t, { a: x, schliessen }), - }) - } - return abschnitt('Hinweis-Leiste', 'Eine Leiste ganz oben auf deiner Website – zum Beispiel für Betriebsurlaub, eine Aktion oder etwas Wichtiges. Die Leiste erscheint nur in dem Zeitraum, den du einstellst. Gelten mehrere gleichzeitig, zeigt die Website nur einen: zuerst „Wichtig“, dann „Urlaub“, „Aktion“ und „Info“.', h('div', { class: 'zt-werkzeuge' }, neu.leiste), neu.box, - kommend.length - ? h('ul', { class: 'tm-eintraege', 'aria-label': 'Laufende und geplante Hinweise' }, kommend.map(reihe)) - : h('p', { class: 'tm-leer' }, 'Keine Hinweise eingetragen.'), - alt.length - ? h('details', { class: 'tm-details' }, h('summary', null, `Vergangene Hinweise (${alt.length})`), h('ul', { class: 'tm-eintraege' }, alt.map(reihe))) - : null) + h('div', { class: 'zt-hinweis-liste' }, teile)) +} + +/** + * Nur die Liste der Hinweise neu zeichnen, ohne den Abschnitt anzufassen: für den Fall, dass ein anderer Abschnitt einen Hinweis angelegt hat (die Frage „Hinweis-Leiste dazu + * anlegen?“ der Ausnahmen). Offene, ungespeicherte Formulare bleiben stehen: das Formular „Neuer Hinweis“ liegt nicht in der Liste, und die Zeilen der bisherigen Hinweise werden + * mit ihrem offenen Bearbeiten-Formular wiederverwendet. Der Knopf „Hinweis-Leiste anlegen“ folgt der Obergrenze. => false, wenn es den Abschnitt (noch) nicht gibt. + */ +export function hinweisListeErneuern(t) { + const el = t.wurzel.querySelector('[data-abschnitt="hinweise"]') + const platz = el?.querySelector('.zt-hinweis-liste') + if (!platz) return false + const vorhanden = new Map([...platz.querySelectorAll('li[data-id]')].map((li) => [li.getAttribute('data-id'), li])) + const { voll, teile } = hinweisListe(t, vorhanden) + platz.replaceChildren(...teile) + const knopf = el.querySelector('[data-werkzeug="hinweis-neu"]') + if (knopf) { + knopf.disabled = voll + const zeile = knopf.parentNode + const grenze = zeile.querySelector('p') + if (voll && !grenze) zeile.append(h('p', { class: 'tm-hinweis' }, GRENZ_TEXT)) + else if (!voll && grenze) grenze.remove() + } + return true } /** diff --git a/public/zeiten.css b/public/zeiten.css index 8f05037..3245bfc 100644 --- a/public/zeiten.css +++ b/public/zeiten.css @@ -94,6 +94,7 @@ .zt-muster-knopf { padding: 3px 12px; border-radius: 999px; border: 1.5px solid currentColor; font-size: 13px; font-weight: 700; } .zt-knopf-felder { margin-top: 0; } .zt-hinweis-form .zt-tag { margin-top: 0; } +.zt-hinweis-liste { min-width: 0; } .zt-whatsapp { margin-top: 10px; padding: 0 14px 10px; border-radius: 12px; border: 1px solid var(--kb-border); background: rgba(255, 255, 255, 0.02); } .zt-google-text { display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; white-space: pre; overflow: auto; diff --git a/test/zeitenEditor.test.js b/test/zeitenEditor.test.js index 80c2344..201243a 100644 --- a/test/zeitenEditor.test.js +++ b/test/zeitenEditor.test.js @@ -1493,6 +1493,73 @@ test('Urlaub-Frage „Ja, anlegen“: der neue Hinweis steht danach auch in der assert.ok(fx.finde(abschnitt(fx, root, 'hinweise'), 'li[data-id="h_vorschlag"]'), 'die Hinweis-Liste zeigt ihn') })) +test('Urlaub-Frage „Ja, anlegen“ lässt offene, ungespeicherte Hinweis-Formulare stehen (neuer Hinweis und Bearbeiten) und zeigt den neuen Hinweis trotzdem in der Liste', mitDom({}, async (fx) => { + const { root } = await oeffne(fx, { start: stand(daten({ hinweise: [hinweisAktion] })) }) + // ein neuer Hinweis wird getippt, aber nicht gespeichert; an der Aktion wird etwas geändert, aber nicht gespeichert + await fx.klick(fx.finde(root, '[data-werkzeug="hinweis-neu"]')) + const neuForm = neuerHinweis(fx, root) + await fx.setze(hinweisFeld(fx, neuForm, 'text'), 'Noch nicht gespeichert') + const zeile = fx.finde(root, 'li[data-id="h_aktion001"]') + await fx.klick(fx.finde(zeile, '[data-aktion="bearbeiten"]')) + const bearbeiten = fx.finde(zeile, 'form[aria-label="Hinweis bearbeiten"]') + await fx.setze(hinweisFeld(fx, bearbeiten, 'text'), '30 % auf alle Torten') + + // Betriebsurlaub speichern und die Frage mit „Ja, anlegen“ beantworten + await fx.klick(fx.finde(root, '[data-werkzeug="urlaub-neu"]')) + const form = urlaubsformular(fx, root) + const von = tagPlus(HEUTE, 20) + const bis = tagPlus(HEUTE, 25) + await fx.setze(feldIn(fx, form, 'von'), von) + await fx.setze(feldIn(fx, form, 'bis'), bis) + const urlaub = { id: 'x_urlaub03', art: 'urlaub', von, bis, text: '', modus: 'zu', fenster: [], plan: null } + fx.antworten.push(antwort(daten({ ausnahmen: [urlaub], hinweise: [hinweisAktion] }), 4)) + await fx.klick(fx.finde(form, 'button[type="submit"]')) + const vorschlag = { id: 'h_vorschlag', art: 'urlaub', text: 'Betriebsurlaub', knopf: null, von: tagPlus(von, -7), bis } + fx.antworten.push(antwort(daten({ ausnahmen: [urlaub], hinweise: [hinweisAktion, vorschlag] }), 5)) + await fx.klick(fx.finde(fx.finde(root, '[data-frage="hinweis"]'), '[data-aktion="hinweis-ja"]')) + assert.deepEqual(puts(fx)[1].body.daten.hinweise.map((x) => x.id).slice(0, 1), ['h_aktion001']) + assert.equal(puts(fx)[1].body.daten.hinweise.length, 2, 'nur der Vorschlag kommt dazu, getippte Entwürfe gehen nicht mit hinaus') + + // der neue Hinweis steht in der Liste, in der Reihenfolge nach Beginn + const liste = abschnitt(fx, root, 'hinweise') + assert.deepEqual(fx.alle(fx.finde(liste, 'ul[aria-label="Laufende und geplante Hinweise"]'), 'li[data-id]').map((li) => li.getAttribute('data-id')), ['h_aktion001', 'h_vorschlag']) + // die offenen Formulare sind dieselben Elemente mit ihren Eingaben + assert.ok(neuerHinweis(fx, root) === neuForm, 'das Formular „Neuer Hinweis“ steht noch') // ok statt equal: ein Fehlschlag soll keine DOM-Knoten ausgeben + assert.equal(hinweisFeld(fx, neuForm, 'text')?.value, 'Noch nicht gespeichert') + assert.ok(fx.finde(root, 'li[data-id="h_aktion001"]') === zeile, 'dieselbe Zeile') + assert.ok(fx.finde(zeile, 'form[aria-label="Hinweis bearbeiten"]') === bearbeiten, 'dasselbe Bearbeiten-Formular') + assert.equal(hinweisFeld(fx, bearbeiten, 'text')?.value, '30 % auf alle Torten') + + // und das offene Formular lässt sich danach speichern: es beruht auf dem neuen Stand (Vorschlag ist dabei) + fx.antworten.push(antwort(daten({ hinweise: [hinweisAktion, vorschlag, { id: 'h_getippt1', art: 'info', text: 'Noch nicht gespeichert', knopf: null, von: null, bis: null }] }), 6)) + await fx.klick(fx.finde(neuForm, 'button[type="submit"]')) + const h = puts(fx)[2].body.daten.hinweise + assert.deepEqual(h.map((x) => x.text), [hinweisAktion.text, 'Betriebsurlaub', 'Noch nicht gespeichert']) +})) + +test('Urlaub-Frage „Ja, anlegen“ bringt die Hinweis-Liste auf 20: „Hinweis-Leiste anlegen“ ist danach gesperrt und sagt warum (ohne den Abschnitt neu zu zeichnen)', mitDom({}, async (fx) => { + const viele = Array.from({ length: ZEITEN_LIMITS.hinweise - 1 }, (_, i) => ({ id: `h_viele${String(i).padStart(3, '0')}`, art: 'info', text: `Hinweis ${i}`, knopf: null, von: null, bis: null })) + const { root } = await oeffne(fx, { start: stand(daten({ hinweise: viele })) }) + const liste = abschnitt(fx, root, 'hinweise') + assert.equal(fx.finde(liste, '[data-werkzeug="hinweis-neu"]').disabled, false) + await fx.klick(fx.finde(root, '[data-werkzeug="urlaub-neu"]')) + const form = urlaubsformular(fx, root) + const von = tagPlus(HEUTE, 20) + const bis = tagPlus(HEUTE, 25) + await fx.setze(feldIn(fx, form, 'von'), von) + await fx.setze(feldIn(fx, form, 'bis'), bis) + const urlaub = { id: 'x_urlaub04', art: 'urlaub', von, bis, text: '', modus: 'zu', fenster: [], plan: null } + fx.antworten.push(antwort(daten({ ausnahmen: [urlaub], hinweise: viele }), 4)) + await fx.klick(fx.finde(form, 'button[type="submit"]')) + const vorschlag = { id: 'h_vorschlag', art: 'urlaub', text: 'Betriebsurlaub', knopf: null, von: tagPlus(von, -7), bis } + fx.antworten.push(antwort(daten({ ausnahmen: [urlaub], hinweise: [...viele, vorschlag] }), 5)) + await fx.klick(fx.finde(fx.finde(root, '[data-frage="hinweis"]'), '[data-aktion="hinweis-ja"]')) + assert.ok(abschnitt(fx, root, 'hinweise') === liste, 'der Abschnitt ist dasselbe Element') + assert.equal(fx.finde(liste, '[data-werkzeug="hinweis-neu"]').disabled, true) + assert.match(fx.text(liste), /Mehr als 20 Hinweise sind nicht möglich/) + assert.ok(fx.finde(liste, 'li[data-id="h_vorschlag"]')) +})) + test('Hinweise abgeschaltet (nur ansehen): Liste ja, aber kein Knopf zum Anlegen und alle Felder gesperrt', mitDom({}, async (fx) => { const { root } = await oeffne(fx, { state: 'disabled', start: stand(daten({ hinweise: [hinweisAktion] }), { state: 'disabled' }) }) const liste = abschnitt(fx, root, 'hinweise')