Module: im Abo-Modell Reiter mit Kurzlabels an die Etage melden (C2)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/termine.js

@@ -23,6 +23,7 @@ import { render as renderEinstellungen } from './termine-tab-einstellungen.js'
 import { renderFragebogen } from './termine-fragebogen.js'
 import { renderBestellen, statusKarte } from './funktion-bestellen.js'
 import { ZU_VERTRAEGE } from './vertraege-link.js'
+import { meldeReiter, reiterEintraege } from './fn-reiter.js'
 
 // Auswahl bleibt beim Wechsel zwischen Funktionen und Terminplaner erhalten (der Tag nicht: er beginnt immer bei heute)
 const auswahl = { projectId: '', reiter: 'termine', ansicht: 'tag', filter: 'alle' }
@@ -41,6 +42,11 @@ function leseRueckkehr() {
   return { bestellt: query.get('bestellt') === '1', projekt: query.get('projekt') || '' }
 }
 
+// Abo-Modell (Antwort von GET /api/funktionen, strikt): die Reiter zeichnet die Etage, die Ansicht meldet sie (fn-reiter.js)
+const istAbo = (s) => s.modell === 'abo'
+/** Eine Ansicht ohne Reiter meldet die leere Liste, damit die Etage nicht die Reiter der vorigen stehen laesst. */
+const keineReiter = (s) => { if (istAbo(s)) meldeReiter(s.root, { eintraege: [] }) }
+
 const zustandVon = (projekt) => projekt?.features?.termine?.state || 'off'
 const istBestellt = (zustand) => zustand === 'ordered' || zustand === 'setup'
 // Entwurf: Funktionsdokument im Zustand Aus mit siteKey (wie die Kachel in funktionen.js)
@@ -52,14 +58,16 @@ export async function initTermine(root, { projectId } = {}) {
   const wunsch = rueckkehr.projekt || projectId || root.dataset.wunschProjekt || '' // die Kachel in Funktionen legt ihr Projekt hier ab
   delete root.dataset.wunschProjekt
   if (wunsch) auswahl.projectId = wunsch
-  const { projects = [], termine } = await request('/api/funktionen')
-  const s = { root, projects, termine: termine || null, projekt: null, daten: null, tag: heuteBerlin(), nurLesen: false, lauf: 0, buehne: null, meldungEl: null, danke: false }
+  const { projects = [], termine, modell } = await request('/api/funktionen')
+  const s = { root, projects, termine: termine || null, modell, projekt: null, daten: null, tag: heuteBerlin(), nurLesen: false, lauf: 0, buehne: null, meldungEl: null, danke: false }
   S = s
   if (!termine?.verfuegbar) {
+    keineReiter(s)
     root.replaceChildren(infoKarte('Der Terminplaner ist noch nicht verfügbar', 'Sobald er für dich bereit ist, findest du ihn hier.'))
     return
   }
   if (!projects.length) {
+    keineReiter(s)
     root.replaceChildren(h('div', { class: 'kb-panel kb-empty' }, 'Noch keine Website-Projekte zugewiesen.'))
     return
   }
@@ -102,6 +110,7 @@ async function ladeFunktionen(s) {
   const projects = Array.isArray(antwort.projects) ? antwort.projects : []
   s.projects = projects
   s.termine = antwort.termine || null
+  s.modell = antwort.modell
   s.projekt = projects.find((p) => p.projectId === s.projekt?.projectId) || s.projekt
 }
 
@@ -123,6 +132,7 @@ async function zeigeProjekt(s, optionen = {}) {
   const projekt = s.projekt
   const lauf = ++s.lauf
   const aktuell = () => S === s && s.lauf === lauf
+  keineReiter(s)
   s.buehne.replaceChildren(h('p', { class: 'kb-empty' }, 'Lade…'))
   let daten
   try {
@@ -155,6 +165,7 @@ async function zeichneAnsicht(s, { daten, aktuell, bestellformular = false, meld
   s.daten = daten
   const zustand = daten.state || zustandVon(projekt)
   s.nurLesen = zustand !== 'active' && zustand !== 'off'
+  keineReiter(s) // die Ansichten mit Reitern (zeigeReiter) melden ihre Liste gleich danach
   if (zustand === 'off') {
     if (daten.abo?.ok === true) zeigeFragebogen(s, { projekt, aktuell })
     else await zeigeAboHinweis(s, { aktuell })
@@ -386,14 +397,15 @@ function zeigeReiter(s, { projekt, aktuell, zustand = s.nurLesen ? 'disabled' :
     return
   }
 
+  const abo = istAbo(s) // Abo-Modell: keine eigene Leiste, die Etage zeichnet sie (kn:reiter)
   const panel = h('div', { class: 'tm-panel', role: 'tabpanel', id: 'tm-panel', tabindex: '0' })
   let aktiv = null // Schluessel des gezeigten Reiters
-  const knoepfe = reiterListe.map((r) => h('button', {
+  const knoepfe = abo ? [] : reiterListe.map((r) => h('button', {
     type: 'button', role: 'tab', class: 'tm-reiter', id: `tm-tab-${r.key}`, 'aria-controls': 'tm-panel', 'data-reiter': r.key,
     onclick: () => waehleReiter(r.key),
   }, r.label))
-  const leiste = h('div', { class: 'tm-reiterleiste', role: 'tablist', 'aria-label': 'Bereiche des Terminplaners' }, knoepfe)
-  leiste.addEventListener('keydown', (ev) => {
+  const leiste = abo ? null : h('div', { class: 'tm-reiterleiste', role: 'tablist', 'aria-label': 'Bereiche des Terminplaners' }, knoepfe)
+  leiste?.addEventListener('keydown', (ev) => {
     const i = reiterListe.findIndex((r) => r.key === aktiv)
     const ziel = { ArrowRight: (i + 1) % reiterListe.length, ArrowLeft: (i + reiterListe.length - 1) % reiterListe.length, Home: 0, End: reiterListe.length - 1 }[ev.key]
     if (ziel === undefined) return
@@ -412,7 +424,10 @@ function zeigeReiter(s, { projekt, aktuell, zustand = s.nurLesen ? 'disabled' :
       k.setAttribute('aria-selected', String(an))
       k.tabIndex = an ? 0 : -1
     }
-    panel.setAttribute('aria-labelledby', `tm-tab-${reiter.key}`)
+    if (abo) {
+      panel.setAttribute('aria-label', reiter.label)
+      meldeReiter(s.root, { eintraege: reiterEintraege('termine', reiterListe), aktiv: reiter.key, bei: (neu) => waehleReiter(neu) })
+    } else panel.setAttribute('aria-labelledby', `tm-tab-${reiter.key}`)
     zeigeMeldung(s, '')
     panel.replaceChildren()
     Promise.resolve()