Noch keine Website-Projekte zugewiesen.
+
+
- Fortschritt
- Was wir an deinen Projekten erledigt haben.
+ Funktionen
+ Zusätzliche Bausteine für deine Website – ein Klick, wir richten sie ein.
-
+
+
+
+
+
diff --git a/public/funktionen.css b/public/funktionen.css
new file mode 100644
index 0000000..d3078ec
--- /dev/null
+++ b/public/funktionen.css
@@ -0,0 +1,139 @@
+/* Tab "Funktionen" und News-Pinnwand (funktionen.js). Farben aus den Tokens von kundenbereich.css;
+ Aufbau des Editors nach dem freigegebenen Entwurf (Art, Felder, Zettelfarben, Live-Vorschau, "Hängt gerade"). */
+
+/* Fortschritt unter Projekte (app.js, loadCustomerActivity) */
+.kb-activity { margin-top: 32px; scroll-margin-top: calc(var(--kb-appbar-h, 0px) + 16px); }
+.kb-activity h2 { margin: 0 0 14px; font-size: 20px; }
+#activity-body { display: grid; gap: 16px; }
+#activity-body > .muted { margin: 0; }
+.kb-activity-all { justify-self: start; }
+
+/* ------------------------------------------------------------- Kacheln --- */
+.fn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
+.fn-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-radius: 16px; background: var(--kb-surface); border: 1px solid var(--kb-border); }
+.fn-tile h3 { margin: 4px 0 0; font-size: 18px; }
+.fn-tile p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--kb-muted); }
+.fn-tile .fn-count { font-size: 13px; color: var(--kb-lilac); }
+.fn-tile-cta { margin-top: auto; }
+.fn-tile-soon { opacity: 0.75; }
+.fn-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
+.fn-ico { width: 34px; height: 34px; padding: 7px; box-sizing: border-box; border-radius: 10px; background: var(--kb-purple-soft); fill: none; stroke: var(--kb-lilac); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.fn-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
+.fn-pill-off, .fn-pill-soon { color: var(--kb-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--kb-border-strong); }
+.fn-pill-setup { color: #fcd34d; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
+.fn-pill-on { color: #86efac; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
+
+/* ------------------------------------------------- Buchung und Status --- */
+#view-news .kb-panel { max-width: 640px; }
+#view-news .nw .kb-panel { max-width: none; }
+#view-news .fn-project { margin-bottom: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
+.fn-project label { font-size: 13px; font-weight: 600; }
+.fn-project select { flex: 1 1 220px; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit; }
+.fn-project select option { color: #111; }
+.fn-booking p, .fn-status p { margin: 0 0 12px; line-height: 1.55; }
+.fn-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
+.fn-price strong { font-size: 28px; font-variant-numeric: tabular-nums; }
+.fn-price span, .fn-estimate { color: var(--kb-muted); font-size: 14px; }
+.fn-consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
+.fn-consent input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--kb-purple); }
+.fn-thanks { margin: 0 0 16px; padding: 12px 16px; max-width: 640px; border-radius: 12px; font-size: 14px; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
+.fn-status h3 { margin: 10px 0 8px; }
+.fn-facts { display: grid; gap: 10px; margin: 16px 0; }
+.fn-facts > div { display: flex; flex-wrap: wrap; gap: 4px 16px; }
+.fn-facts dt { min-width: 150px; color: var(--kb-muted); font-size: 14px; }
+.fn-facts dd { margin: 0; font-weight: 600; }
+
+/* -------------------------------------------------------------- Editor --- */
+.nw { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
+.nw-form { display: grid; gap: 16px; min-width: 0; }
+.nw-side { display: grid; gap: 16px; min-width: 0; position: sticky; top: 84px; }
+.nw-card h3 { margin: 0 0 16px; }
+.nw-step { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kb-lilac); }
+.nw-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
+.nw-type {
+ display: grid; justify-items: center; gap: 8px; padding: 16px 6px 12px; border-radius: 14px; cursor: pointer;
+ border: 2px solid var(--kb-border-strong); background: transparent; color: inherit; font: inherit; font-weight: 700; font-size: 14px; text-align: center;
+}
+.nw-type small { font-size: 12px; font-weight: 400; color: var(--kb-muted); }
+.nw-type-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--kb-purple-soft); transform: rotate(-3deg); }
+.nw-type-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--kb-lilac); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.nw-type[aria-pressed="true"] { border-color: var(--kb-purple); background: var(--kb-purple-soft); }
+.nw-field { display: grid; gap: 6px; margin-bottom: 18px; }
+.nw-field > label { font-size: 13px; font-weight: 600; }
+.nw-field input:not([type=file]), .nw-field select, .nw-field textarea {
+ width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px; font: inherit; font-size: 16px;
+ border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit; resize: vertical;
+}
+.nw-field select option { color: #111; }
+.nw-field input:focus, .nw-field select:focus, .nw-field textarea:focus { outline: none; border-color: var(--kb-purple-line); box-shadow: 0 0 0 3px var(--kb-purple-soft); }
+.nw-hint { margin: 0; font-size: 12.5px; color: var(--kb-muted); }
+.nw-hint-row { display: flex; justify-content: space-between; gap: 12px; }
+.nw-err { margin: 0; font-size: 13px; color: #fca5a5; }
+.nw-err:empty { display: none; }
+.nw-drop { display: grid; justify-items: center; gap: 12px; padding: 18px 14px; text-align: center; border: 2px dashed var(--kb-purple-line); border-radius: 14px; background: var(--kb-purple-soft); }
+.nw-drop-img { width: 100%; }
+.nw-drop-img img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 10px; }
+.nw-drop-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
+.nw-drop .nw-hint { margin: 0; }
+.nw-only-phone { display: none; }
+@media (pointer: coarse) { .nw-only-phone { display: inline-flex; } }
+.nw-swatches { display: flex; gap: 10px; }
+.nw-sw { width: 42px; height: 42px; padding: 0; border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.2); cursor: pointer; transform: rotate(-4deg); }
+.nw-sw[aria-pressed="true"] { outline: 3px solid #fff; outline-offset: 2px; }
+.nw-actions { margin-top: 6px; }
+.nw-paper-sun { --paper: #fff6d6; }
+.nw-paper-sky { --paper: #ddeffb; }
+.nw-paper-coral { --paper: #ffe1d9; }
+.nw-paper-white { --paper: #fff; }
+.nw-sw, .nw-thumb.nw-paper-sun, .nw-thumb.nw-paper-sky, .nw-thumb.nw-paper-coral, .nw-thumb.nw-paper-white { background: var(--paper); }
+
+/* Vorschau: Papierzettel und Polaroid, dunkler Text auf hellem Papier */
+.nw-prev-label { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kb-muted); }
+.nw-prev-label i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2); }
+#nw-preview { max-width: 380px; margin: 0 auto; color: #232a33; }
+.nw-paper { padding: 24px 22px 20px; border-radius: 6px 6px 18px 6px; background: var(--paper, #fff); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35); transform: rotate(-1.2deg); }
+.nw-paper h4 { margin: 8px 0; font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
+.nw-paper p { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
+.nw-date { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7684; }
+.nw-polaroid { margin: 0; padding: 10px 10px 14px; border-radius: 4px; background: #fff; box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4); transform: rotate(-2deg); }
+.nw-polaroid img, .nw-ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; background: #e6e9ee; }
+.nw-ph { display: grid; place-items: center; color: #8a94a3; font-size: 14px; }
+.nw-polaroid figcaption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-top: 10px; }
+.nw-polaroid figcaption b { font-size: 16px; overflow-wrap: anywhere; }
+.nw-polaroid figcaption span { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7684; }
+.nw-combo { display: grid; gap: 0; }
+.nw-combo .nw-paper { margin: -22px 10px 0 24px; transform: rotate(2deg); position: relative; }
+.nw-prev-toggle { display: none; width: 100%; justify-content: center; }
+
+/* Listen */
+.nw-lists h3 { margin: 0; font-size: 16px; }
+.nw-lists-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
+.nw-expired-title { margin-top: 22px !important; }
+.nw-empty { margin: 8px 0 0; color: var(--kb-muted); font-size: 14px; }
+.nw-rows { list-style: none; margin: 0; padding: 0; }
+.nw-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 0; border-top: 1px solid var(--kb-border); }
+.nw-thumb { width: 46px; height: 46px; flex: none; border-radius: 8px; object-fit: cover; display: grid; place-items: center; color: #232a33; font-weight: 700; }
+.nw-row-text { flex: 1 1 140px; min-width: 0; }
+.nw-row-text b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.nw-row-text small { color: var(--kb-muted); font-size: 12.5px; }
+.nw-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.nw-row-actions button, .nw-row-actions select { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--kb-border-strong); background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
+.nw-row-actions select option { color: #111; }
+.nw-row-actions button:hover { background: rgba(255, 255, 255, 0.07); }
+.nw-row-actions .nw-del { color: #fca5a5; }
+.nw-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
+.nw-row-err { flex: 1 0 100%; }
+
+@media (max-width: 880px) {
+ .nw { grid-template-columns: minmax(0, 1fr); }
+ .nw-side { position: static; }
+ .nw-prev-toggle { display: flex; }
+ .nw-prev { display: none; }
+ .nw-prev.is-open { display: block; }
+ .nw-side { order: 2; }
+ .nw-types { gap: 8px; }
+ .nw-type small { display: none; }
+ .nw-actions .abo-btn { flex: 1 1 auto; }
+ .fn-tiles { grid-template-columns: minmax(0, 1fr); }
+ .fn-facts dt { min-width: 0; flex: 1 0 100%; }
+}
diff --git a/public/funktionen.js b/public/funktionen.js
new file mode 100644
index 0000000..68f237b
--- /dev/null
+++ b/public/funktionen.js
@@ -0,0 +1,500 @@
+/* Tab "Funktionen" und News-Pinnwand im Kundenbereich (ES-Modul, wird von app.js erst beim Oeffnen geladen).
+ initFunktionen(rootEl): Kacheln der Funktionen. initNews(rootEl, { projectId }): je nach Zustand der Funktion
+ Buchungsseite (off), Einrichtungsstatus (ordered/setup) oder Editor (active). Styles: funktionen.css.
+ Kundentexte kommen nur ueber esc() bzw. textContent in die Seite. */
+
+const PRICE = '30 €'
+const LEISTUNGSBESCHREIBUNG = '/vertragsunterlagen/funktionen-leistungsbeschreibung.html'
+const PHOTO_ACCEPT = 'image/jpeg,image/png,image/webp' // iOS wandelt HEIC dann selbst in JPEG um
+const PHOTO_MAX_BYTES = 10 * 1024 * 1024
+const TITLE_MAX = 60
+const TEXT_MAX = 400
+
+const DURATIONS = [
+ ['1w', '1 Woche'], ['2w', '2 Wochen'], ['1m', '1 Monat'], ['3m', '3 Monate'],
+ ['open', 'Bis ich sie abnehme'], ['date', 'Bis zu einem Datum'],
+]
+const REHANG_DURATIONS = DURATIONS.filter(([key]) => key !== 'date')
+const PAPERS = [['sun', 'Sonnengelb'], ['sky', 'Himmelblau'], ['coral', 'Koralle'], ['white', 'Weiß']]
+const TYPES = [
+ ['note', 'Text', 'ein Zettel', ' '],
+ ['photo', 'Foto', 'ein Polaroid', ' '],
+ ['combo', 'Foto + Text', 'beides', ' '],
+]
+
+const esc = (value) => String(value ?? '')
+ .replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''')
+const safeUrl = (url) => (/^https?:\/\//i.test(url || '') ? url : '')
+
+function fmtDay(value) {
+ const d = new Date(value)
+ if (!value || Number.isNaN(d.getTime())) return ''
+ return d.toLocaleDateString('de-DE', { timeZone: 'Europe/Berlin', day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
+// "2026-10-01" in der Zeitzone Berlin, plus Tage (fuer min/max des Datumsfelds)
+function berlinIsoDay(offsetDays = 0) {
+ const d = new Date(Date.now() + offsetDays * 86400000)
+ return d.toLocaleDateString('sv-SE', { timeZone: 'Europe/Berlin' })
+}
+
+async function request(path, { method = 'GET', body, raw } = {}) {
+ const response = await fetch(path, {
+ method,
+ credentials: 'same-origin',
+ headers: raw ? { 'Content-Type': 'application/octet-stream' } : body ? { 'Content-Type': 'application/json' } : {},
+ body: raw || (body ? JSON.stringify(body) : undefined),
+ })
+ const data = await response.json().catch(() => ({}))
+ if (!response.ok) {
+ const err = new Error(data.error || (response.status === 502 ? 'Server nicht erreichbar. Bitte kurz warten und noch einmal versuchen.' : `Fehler ${response.status}`))
+ err.status = response.status
+ if (data.field) err.field = data.field
+ throw err
+ }
+ return data
+}
+
+/* ------------------------------------------------------------ Zustand --- */
+// Das im News-Bereich gewaehlte Projekt bleibt beim Wechseln zwischen Kacheln und News erhalten
+const selection = { projectId: '' }
+
+const newsOf = (project) => project.features?.news || { state: 'off' }
+const isSetup = (state) => state === 'ordered' || state === 'setup'
+
+// Vorauswahl: zuerst ein aktives Projekt, dann eins in Einrichtung, sonst das erste
+function pickProject(projects) {
+ return projects.find((p) => newsOf(p).state === 'active') || projects.find((p) => isSetup(newsOf(p).state)) || projects[0]
+}
+
+/* ------------------------------------------------------------ Kacheln --- */
+const ICONS = {
+ news: ' ',
+ calendar: ' ',
+ chart: ' ',
+}
+const svg = (name) => `${ICONS[name]} `
+
+function newsTile(projects) {
+ const states = projects.map((p) => newsOf(p).state)
+ const active = states.filter((s) => s === 'active').length
+ let pill = ['Aus', 'off']
+ let cta = `Einrichten lassen · ${PRICE}`
+ if (active) { pill = ['Aktiv', 'on']; cta = 'Beiträge schreiben' } else if (states.some(isSetup)) { pill = ['In Einrichtung', 'setup']; cta = 'Status ansehen' }
+ const target = pickProject(projects)
+ const count = projects.length > 1 && active ? `aktiv für ${active} von ${projects.length} Websites
` : ''
+ return `
+
+ ${svg('news')}${pill[0]}
+ News-Pinnwand
+ Schreib kurze Neuigkeiten mit Text und Foto – sie hängen wie Zettel an einer Pinnwand auf deiner Website.
+ ${count}
+ ${target
+ ? `${cta} `
+ : 'Sobald deine Website angelegt ist, kannst du die Pinnwand buchen.
'}
+ `
+}
+
+const soonTile = (icon, title, text) => `
+
+ ${svg(icon)}Kommt bald
+ ${title}
+ ${text}
+ `
+
+export async function initFunktionen(root) {
+ if (!root) return
+ const { projects = [] } = await request('/api/funktionen')
+ root.innerHTML = `
+
+ ${newsTile(projects)}
+ ${soonTile('calendar', 'Terminplaner', 'Deine Kundschaft bucht Termine direkt über deine Website.')}
+ ${soonTile('chart', 'Analyse', 'Sieh, wie viele Besucher deine Website hat und was sie sich ansehen.')}
+
`
+ root.querySelector('.fn-tile-cta')?.addEventListener('click', (ev) => { selection.projectId = ev.currentTarget.dataset.project })
+}
+
+/* ---------------------------------------------------------------- News --- */
+export async function initNews(root, { projectId } = {}) {
+ if (!root) return
+ if (projectId) selection.projectId = projectId
+ const { projects = [], setupEstimate = '', consentText = '' } = await request('/api/funktionen')
+ if (!projects.length) {
+ root.innerHTML = 'Noch keine Website-Projekte zugewiesen.
'
+ return
+ }
+ const project = projects.find((p) => p.projectId === selection.projectId) || pickProject(projects)
+ selection.projectId = project.projectId
+ const feature = newsOf(project)
+ const ordered = /[?&]bestellt=1\b/.test(window.location.hash)
+
+ root.innerHTML = `
+ ${projects.length > 1 ? `
+
+ Website
+ ${projects.map((p) => `${esc(p.projectName)} `).join('')}
+
` : ''}
+
`
+ root.querySelector('#news-project')?.addEventListener('change', (ev) => {
+ selection.projectId = ev.target.value
+ initNews(root).catch((err) => { root.innerHTML = `${esc(err.message)}
` })
+ })
+ const stage = root.querySelector('#news-stage')
+ const thanks = ordered && feature.state !== 'active'
+ ? 'Danke! Sobald die Zahlung da ist, legen wir los.
'
+ : ''
+ if (feature.state === 'active') renderEditor(stage, project)
+ else if (isSetup(feature.state)) stage.innerHTML = thanks + statusCard(feature, setupEstimate)
+ else if (feature.state === 'disabled') stage.innerHTML = 'News-Pinnwand ist abgeschaltet Für diese Website ist die Pinnwand im Moment nicht aktiv. Schreib uns im Chat , dann klären wir das.
'
+ else renderBooking(stage, project, { setupEstimate, consentText, thanks })
+}
+
+function renderBooking(stage, project, { setupEstimate, consentText, thanks }) {
+ stage.innerHTML = `
+ ${thanks}
+
+
News-Pinnwand einrichten lassen
+
Wir bauen die Pinnwand in deine Website ${esc(project.projectName)} ein. Danach schreibst du deine Neuigkeiten selbst hier im Kundenbereich – mit Text, Foto und Anzeigedauer.
+
+ Einrichtung und Einbau durch uns
+ Beiträge jederzeit selbst schreiben, ändern und abnehmen
+ Nutzung danach kostenlos, kein Abo
+
+
${PRICE} einmalig, inklusive Mehrwertsteuer
+ ${setupEstimate ? `
Einrichtung: ${esc(setupEstimate)}
` : ''}
+
Leistungsbeschreibung
+
+
+
Zahlungspflichtig bestellen · ${PRICE}
+
`
+ stage.querySelector('#news-consent-text').textContent = consentText
+ const box = stage.querySelector('#news-consent')
+ const button = stage.querySelector('#news-order')
+ const error = stage.querySelector('#news-order-error')
+ box.addEventListener('change', () => { button.disabled = !box.checked })
+ button.addEventListener('click', async () => {
+ if (!box.checked) return
+ button.disabled = true
+ error.classList.add('hidden')
+ try {
+ const { url } = await request('/api/funktionen/news/checkout', { method: 'POST', body: { projectId: project.projectId, consent: true } })
+ window.location.href = url
+ } catch (err) {
+ error.textContent = err.message
+ error.classList.remove('hidden')
+ button.disabled = !box.checked
+ }
+ })
+}
+
+function statusCard(feature, setupEstimate) {
+ const rows = [
+ feature.ticketWoid ? `
Ticketnummer #${esc(feature.ticketWoid)} ` : '',
+ feature.orderedAt ? `
Bestellt am ${esc(fmtDay(feature.orderedAt))} ` : '',
+ setupEstimate ? `
Zeiteinschätzung ${esc(setupEstimate)} ` : '',
+ ].join('')
+ const invoice = safeUrl(feature.invoiceUrl)
+ return `
+
+
In Einrichtung
+
Wir richten deine News-Pinnwand ein
+
${feature.state === 'ordered' ? 'Sobald deine Zahlung bei uns ankommt, legen wir los.' : 'Sobald sie fertig ist, kannst du hier deine ersten Beiträge schreiben.'}
+ ${rows ? `
${rows} ` : ''}
+
+
`
+}
+
+/* -------------------------------------------------------------- Editor --- */
+function renderEditor(stage, project) {
+ const pid = project.projectId
+ const q = `projectId=${encodeURIComponent(pid)}`
+ const imageUrl = (imageId, size = 's') => `/api/news/image/${encodeURIComponent(pid)}/${encodeURIComponent(imageId)}-${size}.webp`
+ const fresh = () => ({ editId: '', type: 'combo', title: '', text: '', paper: 'sun', duration: '1m', date: '', imageId: '', imageSrc: '', uploading: false })
+ let ed = fresh()
+ let liveUrl = ''
+ let list = { hanging: [], expired: [] }
+
+ stage.innerHTML = `
+
+
+
+
So sieht dein Zettel aus
+
+
Vorschau: so sehen es alle
+
+
+
+
+
`
+
+ const $ = (sel) => stage.querySelector(sel)
+ const $$ = (sel) => [...stage.querySelectorAll(sel)]
+ const setErr = (field, message) => {
+ const target = $(`[data-err="${field}"]`) || $('[data-err="_"]')
+ if (target) target.textContent = message || ''
+ }
+ const clearErrs = () => $$('[data-err]').forEach((el) => { el.textContent = '' })
+ const errField = (field) => ({ imageId: 'photo', date: 'duration' }[field] || field || '_')
+
+ function previewHtml() {
+ const hasPhoto = ed.type !== 'note'
+ const photo = hasPhoto
+ ? (ed.imageSrc ? ` ` : 'Foto ')
+ : ''
+ const title = ed.title.trim()
+ if (ed.type === 'photo') {
+ return `${photo}${esc(title)} Heute `
+ }
+ const note = `Heute ${title ? `
${esc(title)} ` : ''}
${esc(ed.text)}
`
+ return ed.type === 'combo' ? `${photo} ${note}
` : note
+ }
+
+ function sync() {
+ $$('.nw-type').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.type === ed.type)))
+ $$('.nw-sw').forEach((b) => b.setAttribute('aria-pressed', String(b.dataset.paper === ed.paper)))
+ $('#nw-photo-field').classList.toggle('hidden', ed.type === 'note')
+ $('#nw-text-field').classList.toggle('hidden', ed.type === 'photo')
+ $('#nw-paper-field').classList.toggle('hidden', ed.type === 'photo')
+ $('#nw-title-label').textContent = ed.type === 'photo' ? 'Bildunterschrift (freiwillig)' : 'Überschrift (freiwillig)'
+ $('#nw-count').textContent = `${ed.text.length} / ${TEXT_MAX}`
+ $('#nw-date').classList.toggle('hidden', ed.duration !== 'date')
+ $('#nw-step-title').textContent = ed.editId ? 'Zettel ändern' : 'Neuer Zettel'
+ $('#nw-publish').textContent = ed.editId ? 'Änderungen speichern' : 'Aufhängen'
+ $('#nw-cancel').classList.toggle('hidden', !ed.editId)
+ const img = $('#nw-drop-img')
+ img.classList.toggle('hidden', !ed.imageSrc)
+ if (ed.imageSrc) img.querySelector('img').src = ed.imageSrc
+ $('#nw-pick span').textContent = ed.imageSrc ? 'Anderes Foto wählen' : 'Foto auswählen'
+ $('#nw-publish').disabled = ed.uploading
+ $('#nw-preview').innerHTML = previewHtml()
+ }
+
+ function reset() {
+ ed = fresh()
+ $('#nw-title').value = ''
+ $('#nw-text').value = ''
+ $('#nw-duration').value = '1m'
+ $('#nw-date').value = ''
+ clearErrs()
+ sync()
+ }
+
+ // Formular
+ $$('.nw-type').forEach((b) => b.addEventListener('click', () => { ed.type = b.dataset.type; sync() }))
+ $$('.nw-sw').forEach((b) => b.addEventListener('click', () => { ed.paper = b.dataset.paper; sync() }))
+ $('#nw-title').addEventListener('input', (ev) => { ed.title = ev.target.value; sync() })
+ $('#nw-text').addEventListener('input', (ev) => { ed.text = ev.target.value; sync() })
+ $('#nw-duration').addEventListener('change', (ev) => { ed.duration = ev.target.value; sync() })
+ $('#nw-date').addEventListener('change', (ev) => { ed.date = ev.target.value })
+ $('#nw-prev-toggle').addEventListener('click', (ev) => {
+ const open = $('#nw-prev-box').classList.toggle('is-open')
+ ev.currentTarget.setAttribute('aria-expanded', String(open))
+ })
+ $('#nw-cancel').addEventListener('click', reset)
+
+ // Foto: gleich hochladen, der Server liefert die imageId
+ $$('#nw-photo-field input[type=file]').forEach((input) => input.addEventListener('change', async () => {
+ const file = input.files[0]
+ input.value = ''
+ if (!file) return
+ setErr('photo', '')
+ if (file.size > PHOTO_MAX_BYTES) { setErr('photo', 'Das Foto ist größer als 10 MB.'); return }
+ const previous = { imageId: ed.imageId, imageSrc: ed.imageSrc }
+ ed.uploading = true
+ ed.imageSrc = URL.createObjectURL(file)
+ sync()
+ $('#nw-photo-hint').textContent = 'Foto wird hochgeladen…'
+ try {
+ const { imageId } = await request(`/api/news/image?${q}`, { method: 'POST', raw: file })
+ ed.imageId = imageId
+ } catch (err) {
+ setErr('photo', err.message)
+ Object.assign(ed, previous)
+ } finally {
+ ed.uploading = false
+ $('#nw-photo-hint').textContent = 'JPEG, PNG, WebP oder iPhone-Foto, bis 10 MB.'
+ sync()
+ }
+ }))
+
+ $('#nw-publish').addEventListener('click', async () => {
+ clearErrs()
+ $('#nw-done').classList.add('hidden')
+ const body = { type: ed.type, title: ed.title.trim(), text: ed.type === 'photo' ? '' : ed.text, paper: ed.paper, duration: ed.duration }
+ if (ed.duration === 'date') body.date = ed.date
+ if (ed.type !== 'note') body.imageId = ed.imageId
+ const wasEdit = Boolean(ed.editId)
+ const button = $('#nw-publish')
+ button.disabled = true
+ try {
+ if (wasEdit) await request(`/api/news/${encodeURIComponent(ed.editId)}?${q}`, { method: 'PATCH', body })
+ else await request('/api/news', { method: 'POST', body: { ...body, projectId: pid } })
+ reset()
+ const done = $('#nw-done')
+ done.textContent = wasEdit ? 'Gespeichert.' : 'Hängt jetzt an deiner Pinnwand.'
+ done.classList.remove('hidden')
+ await loadList()
+ } catch (err) {
+ setErr(errField(err.field), err.message)
+ } finally {
+ button.disabled = ed.uploading
+ }
+ })
+
+ // Listen "Hängt gerade" / "Abgelaufen"
+ const untilText = (p) => (p.visibleUntil ? `bis ${fmtDay(p.visibleUntil)}` : 'bis du sie abnimmst')
+ function rowHtml(p, expired) {
+ const label = p.title || (p.text ? p.text.slice(0, 60) : 'Foto')
+ const thumb = p.imageId
+ ? ` `
+ : `T `
+ const meta = expired
+ ? (p.takenDownAt ? `Abgenommen am ${fmtDay(p.takenDownAt)}` : `Abgelaufen am ${fmtDay(p.visibleUntil)}`)
+ : `Seit ${fmtDay(p.visibleFrom)} · ${untilText(p)}`
+ const actions = expired
+ ? `${REHANG_DURATIONS.map(([k, l]) => `${l} `).join('')}
+ Wieder aufhängen `
+ : 'Ändern Abnehmen '
+ return `
+
+ ${thumb}
+ ${esc(label)} ${esc(meta)}
+ ${actions}Löschen
+
+ `
+ }
+
+ function renderLists() {
+ const box = $('#nw-lists')
+ const site = safeUrl(liveUrl)
+ box.innerHTML = `
+
+ ${list.hanging.length ? `${list.hanging.map((p) => rowHtml(p, false)).join('')} ` : 'Im Moment hängt nichts. Schreib deinen ersten Zettel links.
'}
+ ${list.expired.length ? `Abgelaufen Nicht mehr auf deiner Website zu sehen. Du kannst sie wieder aufhängen.
${list.expired.map((p) => rowHtml(p, true)).join('')} ` : ''}`
+ box.querySelectorAll('.nw-row').forEach(wireRow)
+ }
+
+ function wireRow(row) {
+ const id = row.dataset.id
+ const all = [...list.hanging, ...list.expired]
+ const post = all.find((p) => p.$id === id)
+ const rowErr = row.querySelector('.nw-row-err')
+ const run = async (fn) => {
+ rowErr.textContent = ''
+ try {
+ await fn()
+ await loadList()
+ } catch (err) {
+ rowErr.textContent = err.message
+ }
+ }
+ row.querySelector('[data-edit]')?.addEventListener('click', () => startEdit(post))
+ row.querySelector('[data-takedown]')?.addEventListener('click', () => run(() => request(`/api/news/${encodeURIComponent(id)}?${q}`, { method: 'PATCH', body: { action: 'takeDown' } })))
+ row.querySelector('[data-rehang]')?.addEventListener('click', () => {
+ const duration = row.querySelector('.nw-rehang-dur').value
+ run(() => request(`/api/news/${encodeURIComponent(id)}?${q}`, { method: 'PATCH', body: { action: 'rehang', duration } }))
+ })
+ // Loeschen mit Rueckfrage in der Zeile (kein confirm())
+ row.querySelector('[data-del]').addEventListener('click', () => {
+ const actions = row.querySelector('.nw-row-actions')
+ actions.innerHTML = 'Wirklich löschen? Ja, löschen Abbrechen '
+ actions.querySelector('[data-cancel]').addEventListener('click', renderLists)
+ actions.querySelector('[data-yes]').addEventListener('click', () => run(async () => {
+ await request(`/api/news/${encodeURIComponent(id)}?${q}`, { method: 'DELETE' })
+ if (ed.editId === id) reset()
+ }))
+ })
+ }
+
+ function startEdit(post) {
+ clearErrs()
+ $('#nw-done').classList.add('hidden')
+ ed = {
+ editId: post.$id, type: post.type, title: post.title || '', text: post.text || '', paper: post.paper,
+ duration: post.duration, date: post.duration === 'date' && post.visibleUntil ? new Date(post.visibleUntil).toLocaleDateString('sv-SE', { timeZone: 'Europe/Berlin' }) : '',
+ imageId: post.imageId || '', imageSrc: post.imageId ? imageUrl(post.imageId, 'l') : '', uploading: false,
+ }
+ $('#nw-title').value = ed.title
+ $('#nw-text').value = ed.text
+ $('#nw-duration').value = ed.duration
+ $('#nw-date').value = ed.date
+ sync()
+ $('#nw-step-title').scrollIntoView({ block: 'start', behavior: 'smooth' })
+ }
+
+ async function loadList() {
+ try {
+ const data = await request(`/api/news?${q}`)
+ list = { hanging: data.hanging || [], expired: data.expired || [] }
+ liveUrl = data.liveUrl || ''
+ renderLists()
+ } catch (err) {
+ $('#nw-lists').innerHTML = `Beiträge konnten nicht geladen werden: ${esc(err.message)}
`
+ }
+ }
+
+ sync()
+ return loadList()
+}
diff --git a/server/routes/funktionen.js b/server/routes/funktionen.js
index cdda912..2b639f3 100644
--- a/server/routes/funktionen.js
+++ b/server/routes/funktionen.js
@@ -20,7 +20,11 @@ router.get('/', requireSession, async (req, res) => {
const customerId = getSessionCustomerId(req)
// Ein Fehler beim Freischalten (z. B. Ticketsystem) darf die Liste nicht verhindern
await runActivation({ customerId }).catch((err) => console.error('[funktionen] Freischalten fehlgeschlagen:', err.message))
- res.json({ projects: await listCustomerFeatures(customerId), setupEstimate: config.funktionen.setupEstimate })
+ res.json({
+ projects: await listCustomerFeatures(customerId),
+ setupEstimate: config.funktionen.setupEstimate,
+ consentText: config.funktionen.consentText,
+ })
} catch (err) {
fail(res, err)
}
diff --git a/test/funktionenRoutes.test.js b/test/funktionenRoutes.test.js
index 223adee..08711bd 100644
--- a/test/funktionenRoutes.test.js
+++ b/test/funktionenRoutes.test.js
@@ -60,6 +60,7 @@ const paidSession = (id, projectId, extra = {}) => ({
test('liste_zustaende', async () => {
const body = await get('/api/funktionen', { cookie })
assert.equal(body.setupEstimate, 'meist innerhalb von 1–2 Wochen')
+ assert.equal(body.consentText, config.funktionen.consentText)
assert.equal(body.projects.length, 4)
for (const p of body.projects) assert.equal(p.features.news.state, 'off')
})
diff --git a/test/ui/funktionen.ui.mjs b/test/ui/funktionen.ui.mjs
new file mode 100644
index 0000000..eda4c1e
--- /dev/null
+++ b/test/ui/funktionen.ui.mjs
@@ -0,0 +1,217 @@
+// Playwright-Checks Funktionen-Tab und News-Editor: statischer Server fuer public/ + per page.route gemockte API.
+// Nicht Teil von npm test. Aufruf: node test/ui/funktionen.ui.mjs
+// Screenshots der Hauptansichten landen in /root/reports/funktionen-news-ui/.
+import http from 'node:http'
+import { readFile, mkdir } from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { chromium } from '/root/.npm/_npx/db89d7302a373f10/node_modules/playwright-core/index.mjs'
+
+const pub = path.join(path.dirname(fileURLToPath(import.meta.url)), '../../public')
+const SHOTS = '/root/reports/funktionen-news-ui'
+await mkdir(SHOTS, { recursive: true })
+const TYPES = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.svg': 'image/svg+xml', '.png': 'image/png', '.ico': 'image/x-icon', '.webmanifest': 'application/json' }
+
+const server = http.createServer(async (req, res) => {
+ const url = new URL(req.url, 'http://x')
+ try {
+ const file = path.join(pub, url.pathname === '/' ? 'dashboard.html' : url.pathname)
+ const data = await readFile(file)
+ res.writeHead(200, { 'content-type': TYPES[path.extname(file)] || 'application/octet-stream' })
+ res.end(data)
+ } catch {
+ res.writeHead(404)
+ res.end('nicht gefunden')
+ }
+})
+await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve))
+const base = `http://127.0.0.1:${server.address().port}`
+
+// ---- Fixtures ----
+const feat = (state, extra = {}) => ({ state, siteKey: 'abcdefghijklmnop', ticketWoid: state === 'off' ? null : '1234', orderedAt: state === 'off' ? null : '2026-09-28T09:00:00.000Z', activatedAt: state === 'active' ? '2026-09-29T09:00:00.000Z' : null, invoiceUrl: state === 'off' ? null : 'https://example.test/rechnung', ...extra })
+const proj = (id, name, state) => ({ projectId: id, projectName: name, liveUrl: 'https://baeckerei.example', features: { news: feat(state) } })
+const SCENARIOS = {
+ off: [proj('p1', 'Bäckerei Berg', 'off')],
+ setup: [proj('p1', 'Bäckerei Berg', 'setup')],
+ active: [proj('p1', 'Bäckerei Berg', 'active')],
+ multi: [proj('p1', 'Bäckerei Berg', 'active'), proj('p2', 'Café Nord', 'off')],
+}
+const CONSENT = 'Ich verlange ausdrücklich, dass WEBklar vor Ablauf der Widerrufsfrist mit dem Einbau beginnt.'
+const post = (id, type, title, text, paper, extra = {}) => ({ $id: id, type, title, text, paper, duration: '1m', imageId: type === 'note' ? null : `img-${id}`, visibleFrom: '2026-09-25T10:00:00.000Z', visibleUntil: '2026-10-25T21:59:59.999Z', takenDownAt: null, ...extra })
+const newsList = {
+ hanging: [post('n1', 'combo', 'Danke für eure Spenden!', 'Diese Woche sind drei volle Kisten zusammengekommen.', 'sun'), post('n2', 'note', 'Freitag geschlossen', 'Am 3. Oktober bleibt der Laden zu.', 'sky')],
+ expired: [post('n3', 'photo', 'Holzspielzeug', '', 'white', { visibleUntil: '2026-09-20T21:59:59.999Z' })],
+ liveUrl: 'https://baeckerei.example',
+}
+const tickets = [1, 2, 3, 4].map((n) => ({
+ number: String(1200 + n), topic: `Auftrag ${n}`, createdAt: `2026-09-${10 + n}T10:00:00.000Z`,
+ status: { step: 4, tone: 'done', label: 'Erledigt' },
+ entries: [{ kind: 'update', label: 'Änderung', date: '2026-09-20', person: 'Kenso', text: 'Text angepasst' }],
+}))
+
+let scenario = 'off'
+const checkoutCalls = []
+async function mockApi(page) {
+ await page.route('**/api/**', async (route) => {
+ const req = route.request()
+ const url = new URL(req.url())
+ const p = url.pathname
+ const json = (body, status = 200) => route.fulfill({ status, contentType: 'application/json', body: JSON.stringify(body) })
+ if (p === '/api/auth/me') return json({ authenticated: true, role: 'customer', customer: { id: 'c1', code: '1001', name: 'Berta Berg', email: 'b@example.test' } })
+ if (p === '/api/projects') return json({ projects: [{ id: 'p1', name: 'Bäckerei Berg', status: 'live' }] })
+ if (p === '/api/features') return json({ features: [] })
+ if (p === '/api/activity') return json({ tickets })
+ if (p === '/api/funktionen') return json({ projects: SCENARIOS[scenario], setupEstimate: 'meist innerhalb von 1–2 Wochen', consentText: CONSENT })
+ if (p === '/api/funktionen/news/checkout') {
+ checkoutCalls.push(req.postDataJSON())
+ return json({ url: `${base}/checkout-fertig.html` })
+ }
+ if (p === '/api/news' && req.method() === 'GET') return json(newsList)
+ if (p.startsWith('/api/news/image/')) return route.fulfill({ status: 200, contentType: 'image/svg+xml', body: ' ' })
+ if (p === '/api/contact') return json({ name: 'WEBklar-Team', responseTime: 'Antwort meist < 1 Werktag' })
+ if (p === '/api/chat/unread-count') return json({ unread: 0 })
+ return json({})
+ })
+}
+
+let failed = 0
+const check = (name, ok, detail = '') => {
+ console.log(`${ok ? 'OK ' : 'FAIL'} ${name}${detail ? ` (${detail})` : ''}`)
+ if (!ok) failed += 1
+}
+const hScroll = (page) => page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)
+
+const browser = await chromium.launch()
+try {
+ for (const [label, viewport] of [['desktop', { width: 1280, height: 900 }], ['phone', { width: 390, height: 844 }]]) {
+ const phone = label === 'phone'
+ checkoutCalls.length = 0
+ const ctx = await browser.newContext({ viewport, deviceScaleFactor: 1 })
+ const page = await ctx.newPage()
+ const errors = []
+ page.on('pageerror', (e) => errors.push(e.message))
+ await mockApi(page)
+ const open = async (hash, sc = scenario) => {
+ scenario = sc
+ await page.goto('about:blank') // sonst laedt ein reiner Hash-Wechsel nicht neu
+ await page.goto(`${base}/dashboard.html${hash}`)
+ await page.waitForFunction(() => document.getElementById('customer-name')?.textContent)
+ }
+ // Einblend-Animation abwarten; Fenster auf Seitenhoehe ziehen, damit feste Leisten (Tab-Leiste) am Rand bleiben
+ const shot = async (name) => {
+ await page.waitForTimeout(900)
+ const height = await page.evaluate(() => Math.min(document.documentElement.scrollHeight, 2600))
+ await page.setViewportSize({ width: viewport.width, height: Math.max(viewport.height, height) })
+ await page.waitForTimeout(150)
+ await page.screenshot({ path: `${SHOTS}/${label}-${name}.png` })
+ await page.setViewportSize(viewport)
+ }
+ const noScroll = async (name) => check(`${label} kein_horizontaler_scroll ${name}`, await hScroll(page))
+
+ // Projekte + Fortschritt-Sektion
+ await open('')
+ await page.waitForSelector('#pj-activity .pd-order-card')
+ const labels = await page.$$eval('.kb-nav-item .kb-tab-label', (els) => els.map((e) => e.textContent.trim()))
+ check(`${label} nav_ohne_fortschritt`, labels.join(', ') === 'Projekte, Funktionen, Rechnungen, Chat, Verträge', labels.join(', '))
+ const shown = await page.$$eval('#pj-activity .pd-order-card', (els) => els.length)
+ const more = await page.$('#pj-activity [data-activity-all]')
+ check(`${label} projekte_drei_neueste`, shown === 3 && Boolean(more), `Karten ${shown}`)
+ await noScroll('projekte')
+ await shot('1-projekte')
+
+ await open('#fortschritt')
+ await page.waitForSelector('#pj-activity .pd-order-card')
+ await page.waitForTimeout(900)
+ const fort = await page.evaluate(() => {
+ const r = document.getElementById('pj-activity').getBoundingClientRect()
+ return {
+ inView: r.top < window.innerHeight && r.bottom > 0,
+ projectsActive: document.getElementById('view-projects').classList.contains('active'),
+ navActive: document.querySelector('.kb-nav-item.active')?.dataset.view,
+ }
+ })
+ check(`${label} fortschritt_link`, fort.inView && fort.projectsActive && fort.navActive === 'projects', JSON.stringify(fort))
+
+ // Funktionen-Kacheln
+ const tiles = {}
+ for (const [sc, pill, btn, shotName] of [['off', 'Aus', 'Einrichten lassen · 30 €', '2-funktionen-aus'], ['setup', 'In Einrichtung', 'Status ansehen', '3-funktionen-einrichtung'], ['active', 'Aktiv', 'Beiträge schreiben', '4-funktionen-aktiv']]) {
+ await open('#funktionen', sc)
+ await page.waitForSelector('[data-fn-tile="news"] .fn-pill')
+ const got = await page.evaluate(() => ({
+ pill: document.querySelector('[data-fn-tile="news"] .fn-pill').textContent.trim(),
+ btn: document.querySelector('[data-fn-tile="news"] .fn-tile-cta').textContent.trim(),
+ soon: [...document.querySelectorAll('.fn-tile:not([data-fn-tile="news"]) .fn-pill')].map((e) => e.textContent.trim()),
+ }))
+ tiles[sc] = got
+ check(`${label} kacheln ${sc}`, got.pill === pill && got.btn === btn && got.soon.length === 2 && got.soon.every((t) => t === 'Kommt bald'), JSON.stringify(got))
+ await noScroll(`funktionen-${sc}`)
+ await shot(shotName)
+ }
+ await open('#funktionen', 'multi')
+ await page.waitForSelector('[data-fn-tile="news"] .fn-pill')
+ const multi = await page.textContent('[data-fn-tile="news"]')
+ check(`${label} kachel_mehrere_projekte`, multi.includes('aktiv für 1 von 2 Websites'))
+
+ // Buchung
+ await open('#funktionen', 'off')
+ await page.click('[data-fn-tile="news"] .fn-tile-cta')
+ await page.waitForSelector('#news-order')
+ const bookText = await page.textContent('#view-news')
+ check(`${label} buchung_texte`, bookText.includes('meist innerhalb von 1–2 Wochen') && bookText.includes(CONSENT) && bookText.includes('Leistungsbeschreibung'))
+ check(`${label} bestellen_braucht_haken`, await page.isDisabled('#news-order') && (await page.textContent('#news-order')).trim() === 'Zahlungspflichtig bestellen · 30 €')
+ await noScroll('news-buchung')
+ await shot('5-news-buchung')
+ await page.check('#news-consent')
+ check(`${label} bestellen_haken_aktiv`, !(await page.isDisabled('#news-order')))
+ await page.click('#news-order')
+ await page.waitForURL('**/checkout-fertig.html')
+ check(`${label} bestellen_checkout`, checkoutCalls.length === 1 && checkoutCalls[0].projectId === 'p1' && checkoutCalls[0].consent === true, JSON.stringify(checkoutCalls))
+
+ // Rueckkehr von Stripe
+ await open('#news?bestellt=1', 'setup')
+ await page.waitForSelector('#view-news .fn-status')
+ const back = await page.textContent('#view-news')
+ check(`${label} bestellt_hinweis`, back.includes('Danke! Sobald die Zahlung da ist, legen wir los.') && back.includes('1234') && back.includes('Rechnung ansehen') && back.includes('Frage dazu? Chat öffnen'))
+ check(`${label} bestellt_router`, await page.evaluate(() => document.getElementById('view-news').classList.contains('active')))
+
+ // Editor
+ await open('#news', 'active')
+ await page.waitForSelector('#nw-title')
+ check(`${label} editor_dauer_vorauswahl`, (await page.inputValue('#nw-duration')) === '1m')
+ await page.fill('#nw-title', 'Neue Winterjacken')
+ await page.waitForTimeout(50)
+ const prev = await page.textContent('#nw-preview')
+ check(`${label} editor_vorschau_live`, prev.includes('Neue Winterjacken'))
+ await page.click('[data-type="note"]')
+ check(`${label} editor_text_ohne_foto`, !(await page.isVisible('#nw-photo-field')))
+ await page.click('[data-type="combo"]')
+ check(`${label} editor_foto_sichtbar`, await page.isVisible('#nw-photo-field'))
+ const accepts = await page.$$eval('#nw-photo-field input[type=file]', (els) => els.map((e) => `${e.accept}|${e.getAttribute('capture') || ''}`))
+ check(`${label} editor_foto_accept`, accepts.length >= 1 && accepts.every((a) => a.startsWith('image/jpeg,image/png,image/webp|')) && accepts.filter((a) => a.endsWith('|environment')).length === 1, accepts.join(' ; '))
+ const lists = await page.textContent('#view-news')
+ check(`${label} editor_listen`, lists.includes('Hängt gerade') && lists.includes('Abgelaufen') && lists.includes('Freitag geschlossen') && lists.includes('Auf meiner Website ansehen'))
+ await page.click('[data-del]')
+ check(`${label} editor_loeschen_rueckfrage`, await page.isVisible('.nw-confirm'))
+ await page.click('.nw-confirm [data-cancel]')
+ await noScroll('editor')
+ await shot('6-news-editor')
+
+ if (phone) {
+ await open('#funktionen', 'active')
+ await page.click('[data-fn-tile="news"] .fn-tile-cta')
+ await page.waitForSelector('#nw-title')
+ const back = await page.evaluate(() => {
+ const b = document.getElementById('kb-back')
+ return { hidden: b.classList.contains('hidden'), label: b.getAttribute('aria-label'), tab: document.querySelector('.kb-nav-item.active')?.dataset.view }
+ })
+ check('phone editor_handy_unterseite', !back.hidden && back.label === 'Zurück zu Funktionen' && back.tab === 'funktionen', JSON.stringify(back))
+ }
+ check(`${label} keine_seitenfehler`, errors.length === 0, errors.join(' | '))
+ await ctx.close()
+ }
+} finally {
+ await browser.close()
+ server.close()
+}
+console.log(failed ? `${failed} Check(s) fehlgeschlagen` : 'Alle Checks bestanden')
+process.exit(failed ? 1 : 0)