Öffnungszeiten: Urlaub-Frage lässt offene Hinweis-Formulare stehen

„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 <noreply@anthropic.com>

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
 }

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 => <li>):
+ * 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
 }
 
 /**

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;