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

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

public/buchungen.js

@@ -7,6 +7,7 @@
 import { fehlerKarte, h, infoKarte, request } from './shop-dom.js'
 import { statusKarte } from './funktion-bestellen.js'
 import { anfrageKarte, renderAnfrageFormular } from './buchungen-anfrage.js'
+import { meldeReiter, reiterEintraege } from './fn-reiter.js'
 
 /** Die Reiter: jeder ein Modul mit render(panel, ctx), erst beim ersten Oeffnen geladen. */
 export const REITER = [
@@ -27,6 +28,10 @@ export function vergissAuswahl() {
 let S = null // aktuelle Sitzung; eine alte Antwort darf eine neuere nicht ueberschreiben
 
 const textOr = (x) => (typeof x === 'string' && x.trim() ? x : '')
+// 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?.unterkunft?.state || 'off'
 
 export function initBuchungen(root, { projectId } = {}) {
@@ -38,7 +43,7 @@ export function initBuchungen(root, { projectId } = {}) {
 
 async function starte(root, projectId) {
   if (projectId) auswahl.projectId = projectId
-  const s = { root, projects: [], projekt: null, status: null, lauf: 0, buehne: null, meldungEl: null }
+  const s = { root, projects: [], modell: undefined, projekt: null, status: null, lauf: 0, buehne: null, meldungEl: null }
   S = s
   let funktionen
   try {
@@ -48,12 +53,15 @@ async function starte(root, projectId) {
     return
   }
   if (S !== s) return
+  s.modell = funktionen?.modell
   if (!funktionen?.unterkunft?.verfuegbar) {
+    keineReiter(s)
     root.replaceChildren(infoKarte(NICHT_VERFUEGBAR, 'Sobald er für dich bereit ist, findest du ihn hier.'))
     return
   }
   s.projects = Array.isArray(funktionen.projects) ? funktionen.projects : []
   if (!s.projects.length) {
+    keineReiter(s)
     root.replaceChildren(h('div', { class: 'kb-panel kb-empty' }, 'Noch keine Website-Projekte zugewiesen.'))
     return
   }
@@ -99,6 +107,7 @@ const ladeStatus = (projectId) => request(`/api/unterkunft/status?projectId=${en
 async function zeigeProjekt(s) {
   const lauf = ++s.lauf
   const aktuell = () => S === s && s.lauf === lauf
+  keineReiter(s)
   s.buehne.replaceChildren(h('p', { class: 'kb-empty' }, 'Lade…'))
   let status
   try {
@@ -113,6 +122,7 @@ async function zeigeProjekt(s) {
 
 function zeichneAnsicht(s, { status, aktuell }) {
   s.status = status
+  keineReiter(s) // die Ansicht mit Reitern (zeigeReiter) meldet ihre Liste gleich danach
   const zustand = status?.state || zustandVon(s.projekt)
   if (zustand === 'setup' || zustand === 'active' || zustand === 'disabled') zeigeReiter(s, { status, aktuell, zustand })
   else if (zustand === 'ordered') zeigeBestellung(s)
@@ -171,15 +181,16 @@ function zeigeReiter(s, { status, aktuell, zustand }) {
     zeigeMeldung: (meldung, art) => { if (aktuell()) zeigeMeldung(s, meldung, art) },
     neuLaden,
   }
+  const abo = istAbo(s) // Abo-Modell: keine eigene Leiste, die Etage zeichnet sie (kn:reiter)
   const panel = h('div', { class: 'sh-panel', role: 'tabpanel', id: 'bk-panel', tabindex: '0' })
   let aktiv = null
   let zaehler = 0
-  const knoepfe = REITER.map((r) => h('button', {
+  const knoepfe = abo ? [] : REITER.map((r) => h('button', {
     type: 'button', role: 'tab', class: 'sh-reiter', id: `bk-tab-${r.key}`, 'aria-controls': 'bk-panel', 'data-reiter': r.key,
     onclick: () => waehleReiter(r.key),
   }, r.label))
-  const leiste = h('div', { class: 'sh-reiterleiste', role: 'tablist', 'aria-label': 'Bereiche des Buchungskalenders' }, knoepfe)
-  leiste.addEventListener('keydown', (ev) => {
+  const leiste = abo ? null : h('div', { class: 'sh-reiterleiste', role: 'tablist', 'aria-label': 'Bereiche des Buchungskalenders' }, knoepfe)
+  leiste?.addEventListener('keydown', (ev) => {
     const i = REITER.findIndex((r) => r.key === aktiv)
     const ziel = { ArrowRight: (i + 1) % REITER.length, ArrowLeft: (i + REITER.length - 1) % REITER.length, Home: 0, End: REITER.length - 1 }[ev.key]
     if (ziel === undefined) return
@@ -197,7 +208,10 @@ function zeigeReiter(s, { status, aktuell, zustand }) {
       k.setAttribute('aria-selected', String(an))
       k.tabIndex = an ? 0 : -1
     }
-    panel.setAttribute('aria-labelledby', `bk-tab-${reiter.key}`)
+    if (abo) {
+      panel.setAttribute('aria-label', reiter.label)
+      meldeReiter(s.root, { eintraege: reiterEintraege('buchungen', REITER), aktiv: reiter.key, bei: (neu) => waehleReiter(neu) })
+    } else panel.setAttribute('aria-labelledby', `bk-tab-${reiter.key}`)
     zeigeMeldung(s, '')
     panel.replaceChildren()
     reiter.laden()
@@ -207,6 +221,6 @@ function zeigeReiter(s, { status, aktuell, zustand }) {
   const hinweis = zustand === 'setup' ? 'Wir bauen deinen Buchungskalender gerade ein. Du kannst schon Unterkünfte, Preise und Einstellungen vorbereiten.'
     : zustand === 'disabled' ? 'Dein Buchungskalender ist abgeschaltet. Du kannst bestehende Buchungen noch ansehen und bearbeiten.' : ''
   const hinweisBox = h('div', { class: 'sh-hinweise' }, hinweis ? h('div', { class: `sh-box ${zustand === 'disabled' ? 'sh-box-warn' : 'sh-box-info'}`, role: 'note', 'data-hinweis': zustand }, hinweis) : null)
-  s.buehne.replaceChildren(hinweisBox, leiste, panel)
+  s.buehne.replaceChildren(...[hinweisBox, leiste, panel].filter(Boolean))
   waehleReiter(auswahl.reiter)
 }