Funktionen neu: Bestätigungsseite zum Einschalten (Linkzeile, Häkchen nur für privat in der Frist)

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

public/neu/funktion-einschalten.js

@@ -3,6 +3,10 @@
    Die Vorprüfung spiegelt aboDeckt (server/services/aboFunktionen.js) nur, um den richtigen Ort zu wählen; entschieden wird immer vom Server
    (POST /api/funktionen/<key>/einschalten, 409 mit Code). Kundentexte sind Festwerte (TEXTE), Fremdtext kommt nie als HTML in die Seite. */
 
+import { h, leeren } from './dom.js'
+import { api as apiStandard } from './api.js'
+import { geheZu as geheZuStandard } from './router.js'
+
 /** Etage 2 je Funktion (Schlüssel der Hülle in FUNKTIONS_MODULE, Hash `#<etage>?projekt=<id>`). */
 export const ETAGE_FUER = Object.freeze({ news: 'news', termine: 'termine', shop: 'webshop', unterkunft: 'buchungen', zeiten: 'zeiten', analyse: 'analyse' })
 
@@ -196,3 +200,96 @@ export function fehlerAktion(fehler, { eintrag }) {
       return meldung(servertext)
   }
 }
+
+/* ------------------------------------------------------------------------------------------- Bestätigungsseite --- */
+
+/**
+ * Die Bestätigungsseite zum Einschalten zeichnen (Aufbau und Zustand von Häkchen und Knopf; Senden steht weiter unten).
+ * @param {HTMLElement} behaelter Platz, in dem die Seite gezeichnet wird (sein Inhalt wird ersetzt)
+ * @param {object} o
+ *   key, projectId; daten = Antwort von GET /api/funktionen (Abo-Modell); kundenartWirksam (leer oder unbekannt zählt als privat);
+ *   viewAs (Kundenansicht der Mitarbeiter: nichts einschalten); imModul (ein Funktionsmodul bettet die Seite ein: kein „Abbrechen“);
+ *   jetzt, api, geheZu, speicher (einspeisbar für Tests); bei = { fertig, weiter, abbrechen, neuLaden } (alle optional)
+ * @returns {HTMLElement} section.kn-fn-einschalten
+ */
+export function renderEinschalten(behaelter, o) {
+  const { key, projectId, viewAs = false, imModul = false, jetzt = () => new Date(), bei = {} } = o
+  let daten = o.daten
+  const kundenart = () => (o.kundenartWirksam === undefined ? daten?.kundenart : o.kundenartWirksam)
+  const z = { haken: false, serverAb: '', sperreAb: '', sendet: false, meldung: '' }
+  const abschnitt = h('section', { class: 'kn-fn-einschalten', 'data-key': key, 'data-projekt': projectId })
+  let knopf = null
+  let meldungEl = null
+
+  const eintragVon = () => (Array.isArray(daten?.katalog) ? daten.katalog.find((e) => e?.key === key) ?? null : null)
+  const lageJetzt = () => beginnLage({ kundenart: kundenart(), abo: daten?.abo, jetzt: jetzt(), serverAb: z.serverAb })
+
+  function aktualisiereKnopf() {
+    if (!knopf) return
+    const lage = lageJetzt()
+    const fehltHaken = lage.noetig && !z.haken
+    const ab = z.sperreAb || (fehltHaken ? lage.ab : '')
+    knopf.disabled = viewAs || z.sendet || fehltHaken || Boolean(z.sperreAb)
+    knopf.textContent = ab && datumKurz(ab) ? `Einschalten ab ${datumKurz(ab)}` : 'Einschalten'
+  }
+
+  function setzeMeldung(text) {
+    z.meldung = text
+    if (meldungEl) meldungEl.textContent = text
+  }
+
+  function fuelle() {
+    const eintrag = eintragVon()
+    const consent = consentVon(daten, key)
+    const items = consent?.items ?? []
+    const item = (id) => items.find((i) => i?.id === id) ?? null
+    const zeile = item('einschalten-zeile')
+    const hinweis = item('hinweis')
+    const beginn = item('beginn')
+    const lage = lageJetzt()
+    const register = Boolean(eintrag && zeile && (!lage.noetig || beginn))
+
+    const seiten = Array.isArray(daten?.projects) ? daten.projects : []
+    const websiteName = seiten.find((p) => p?.projectId === projectId)?.projectName
+    const abo = daten?.abo?.produkt ?? eintrag?.enthaltenIn
+    const fakten = [
+      seiten.length > 1 ? ['Website', String(websiteName ?? '')] : null,
+      ['Leistung', 'Einrichtung durch WEBklar'],
+      ['Dauer', String(eintrag?.einrichtung ?? '')],
+      ['Laufzeit', `läuft, solange dein ${abo === 'hosting' ? 'Hosting-Abo' : 'Wartungs-Abo'} läuft`],
+    ].filter(Boolean)
+
+    const box = h('input', { type: 'checkbox', 'data-haken': 'beginn', on: { change: () => { z.haken = box.checked; aktualisiereKnopf() } } })
+    box.checked = z.haken
+    meldungEl = h('p', { class: 'kn-fn-meldung', role: 'alert', 'data-meldung': true }, z.meldung)
+    knopf = register ? h('button', { type: 'button', class: 'kn-fn-knopf', 'data-aktion': 'einschalten', on: { click: () => senden() } }, 'Einschalten') : null
+
+    const kinder = [
+      h('h2', null, `${String(eintrag?.name ?? key)} einschalten`),
+      h('dl', { class: 'kn-fn-fakten' }, fakten.map(([name, wert]) => h('div', null, h('dt', null, name), h('dd', null, wert)))),
+      h('p', { class: 'kn-fn-konto' }, TEXTE.stundenkonto),
+      register
+        ? [
+            h('p', { class: 'kn-fn-recht' }, linkzeile(zeile.text, eintrag.unterlagen).map((s) => (s.href ? h('a', { href: s.href, target: '_blank', rel: 'noopener noreferrer' }, s.text) : s.text))),
+            hinweis ? h('p', { class: 'kn-fn-hinweis' }, String(hinweis.text ?? '')) : null,
+            lage.noetig ? h('label', { class: 'kn-fn-haken' }, box, h('span', null, String(beginn.text ?? ''))) : null,
+          ]
+        : h('p', { class: 'kn-fn-info' }, TEXTE.registerFehlt),
+      viewAs ? h('p', { class: 'kn-fn-info' }, TEXTE.kundenansicht) : null,
+      meldungEl,
+      h('div', { class: 'kn-fn-aktionen' },
+        knopf ?? h('button', { type: 'button', class: 'kn-fn-knopf', 'data-aktion': 'chat', on: { click: () => (o.geheZu ?? geheZuStandard)('#chat') } }, 'Im Chat schreiben'),
+        imModul ? null : h('button', { type: 'button', class: 'kn-fn-knopf kn-fn-knopf--zweit', 'data-aktion': 'abbrechen', on: { click: () => bei.abbrechen?.() } }, 'Abbrechen')),
+    ]
+    abschnitt.replaceChildren(...kinder.flat(Infinity).filter(Boolean))
+    aktualisiereKnopf()
+  }
+
+  async function senden() {
+    // folgt in Task 4
+  }
+
+  leeren(behaelter).append(abschnitt)
+  fuelle()
+  return abschnitt
+}