Ö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-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
 }
 
 /**