Öffnungszeiten: Kachel und Bestell-/Einschaltweg im Portal
Kachel „Öffnungszeiten live“ inline in funktionen.js (keine neuen Importe, keine Zusatzabfrage), Ansicht #zeiten (zeiten.js, zeiten-bestellen.js, zeiten.css) mit Einschalten im Wartungs-Abo, Bestellen für 30 € (Widerrufsbelehrung vor dem Knopf, Ruling R32), Behalten nach dem Abo-Ende, Statuskarte je Zustand, Rückkehr von Stripe und Platz für den Editor (Aufgabe 29). GET /api/funktionen liefert dafür zeiten.belehrung (Haken belehrung der Funktion). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed
1 parent
f20f056c60
commit
7bb918390a
10 files changed
+1878
-8
No files matched your search
@@ -0,0 +1,219 @@
|
||||
/* Oeffnungszeiten live im Kundenbereich: die Ansicht #zeiten (ES-Modul, app.js laedt es beim Oeffnen der Ansicht; Styles: zeiten.css, dazu die
|
||||
gemeinsamen tm-Klassen aus termine.css). Server: server/routes/funktionen.js (Liste, Einschalten, Bestellen, Behalten) und server/routes/zeiten.js
|
||||
(Editor, Aufgaben 29 und 30).
|
||||
initZeiten(rootEl, { projectId }): Projektauswahl (bei mehr als einer Website) und je nach Zustand der Funktion (features.zeiten.state aus
|
||||
GET /api/funktionen):
|
||||
off Einschalten (Wartungs-Abo laeuft), Bestellen (30 €) oder ein Hinweis (Abo noch nicht aktiv, nicht lesbar): renderZeitenBestellen
|
||||
ordered Statuskarte „Zahlung wird bestätigt …“ (Zahlung fortsetzen)
|
||||
setup Statuskarte (Einbau, Ticket, „Trag jetzt deine Zeiten ein“) und darunter der Platz des Editors
|
||||
active Statuskarte und der Platz des Editors
|
||||
disabled Statuskarte mit dem Grund; „Für 30 € wieder einschalten“, solange die Eingaben da sind; der Platz des Editors zum Lesen
|
||||
Das Abo-Ende (aboEndeAt) zeigt in setup und active den Hinweis „behalte die Funktion bis <Datum> für einmalig 30 €“ mit dem Knopf zur Behalten-Seite.
|
||||
Rueckkehr von Stripe: #zeiten?bestellt=1&projekt=<id> (Bestellung) und #zeiten?behalten=1&projekt=<id> (Behalten) waehlen das Projekt und zeigen
|
||||
„Danke!“; #zeiten?projekt=<id> (Abbruch) waehlt nur das Projekt. Beides wird einmal gelesen und aus der Adresse genommen. Die Kachel in Funktionen
|
||||
legt Projekt und Weg in den Behaelter ab (dataset.wunschProjekt, dataset.wunschWeg = 'behalten').
|
||||
Der Editor (Aufgabe 29) haengt in .zt-editor ein (renderEditor(box, ctx) aus zeiten-editor.js). Ruft app.js initZeiten bei jedem Wechsel in die
|
||||
Ansicht, baut sich nichts neu auf, solange Projekt und Stand gleich sind und der Editorplatz steht (Muster initNews): Eingaben im Editor bleiben stehen.
|
||||
Kundenansicht (window.KbView.id() gesetzt): Einschalten, Bestellen und Behalten sind gesperrt, der Server antwortet dort ohnehin mit 403. */
|
||||
|
||||
import { h, infoKarte, request } from './termine-dom.js'
|
||||
import { renderZeitenBestellen, zeitenStatusKarte } from './zeiten-bestellen.js'
|
||||
|
||||
// Auswahl bleibt beim Wechsel zwischen Funktionen und Zeiten erhalten
|
||||
const auswahl = { projectId: '' }
|
||||
let S = null // aktuelle Sitzung der Ansicht; eine alte Antwort darf eine neuere nicht ueberschreiben (S !== s)
|
||||
|
||||
const zustandVon = (projekt) => projekt?.features?.zeiten?.state || 'off'
|
||||
const istBestellt = (zustand) => zustand === 'ordered' || zustand === 'setup'
|
||||
const kundenansicht = () => Boolean(window.KbView?.id?.())
|
||||
|
||||
/** Rueckkehr von Stripe aus der Adresse lesen und die Adresse bereinigen (wie initNews/initTermine). */
|
||||
function leseRueckkehr() {
|
||||
const hash = window.location.hash || ''
|
||||
if (!hash.startsWith('#zeiten?')) return { bestellt: false, behalten: false, projekt: '' }
|
||||
const query = new URLSearchParams(hash.slice(hash.indexOf('?') + 1))
|
||||
window.history.replaceState(null, '', `${window.location.pathname}${window.location.search}#zeiten`)
|
||||
return { bestellt: query.get('bestellt') === '1', behalten: query.get('behalten') === '1', projekt: query.get('projekt') || '' }
|
||||
}
|
||||
|
||||
// Vorauswahl wie bei der Kachel: aktiv, dann bestellt/in Einrichtung, dann abgeschaltet, sonst die erste
|
||||
function pickProjekt(projects) {
|
||||
return projects.find((p) => zustandVon(p) === 'active')
|
||||
|| projects.find((p) => istBestellt(zustandVon(p)))
|
||||
|| projects.find((p) => zustandVon(p) === 'disabled')
|
||||
|| projects[0]
|
||||
}
|
||||
|
||||
/** Darf der Kunde die Funktion jetzt behalten (30 €)? Nach dem erkannten Abo-Ende in Einrichtung/aktiv, abgeschaltet nur mit gespeicherten Eingaben. */
|
||||
function behaltenMoeglich(projekt) {
|
||||
const feature = projekt?.features?.zeiten
|
||||
if (!feature) return false
|
||||
if (feature.state === 'setup' || feature.state === 'active') return Boolean(feature.aboEndeAt)
|
||||
return feature.state === 'disabled' && feature.disabledReason === 'abo_ende' && projekt.zeitenLeer === false
|
||||
}
|
||||
|
||||
export async function initZeiten(root, { projectId } = {}) {
|
||||
if (!root) return
|
||||
const rueckkehr = leseRueckkehr()
|
||||
const wunsch = rueckkehr.projekt || projectId || root.dataset.wunschProjekt || '' // die Kachel in Funktionen legt ihr Projekt hier ab
|
||||
const wunschWeg = root.dataset.wunschWeg === 'behalten' ? 'behalten' : ''
|
||||
delete root.dataset.wunschProjekt
|
||||
delete root.dataset.wunschWeg
|
||||
if (wunsch) auswahl.projectId = wunsch
|
||||
const antwort = await request('/api/funktionen')
|
||||
const projects = Array.isArray(antwort.projects) ? antwort.projects : []
|
||||
const s = {
|
||||
root, projects, angebot: antwort.zeiten || null, features: antwort.features || {}, ustHinweis: typeof antwort.ustHinweis === 'string' ? antwort.ustHinweis : '',
|
||||
projekt: null, lauf: 0, buehne: null, danke: '',
|
||||
}
|
||||
if (!s.angebot?.verfuegbar) {
|
||||
S = s
|
||||
root.dataset.zeitenKey = ''
|
||||
root.replaceChildren(infoKarte('Öffnungszeiten live ist noch nicht verfügbar', 'Sobald es für dich bereit ist, findest du es hier.'))
|
||||
return
|
||||
}
|
||||
if (!projects.length) {
|
||||
S = s
|
||||
root.dataset.zeitenKey = ''
|
||||
root.replaceChildren(h('div', { class: 'kb-panel kb-empty' }, 'Noch keine Website-Projekte zugewiesen.'))
|
||||
return
|
||||
}
|
||||
s.projekt = projects.find((p) => p.projectId === auswahl.projectId) || pickProjekt(projects)
|
||||
auswahl.projectId = s.projekt.projectId
|
||||
|
||||
// Nicht neu aufbauen, solange Projekt und Stand gleich sind und der Editorplatz steht: ungespeicherte Eingaben bleiben (Muster initNews).
|
||||
// Ein Weg (Behalten aus der Kachel) oder die Rueckkehr von Stripe zeichnen immer neu; der Wechsel in die Behalten-Seite behaelt den Editor.
|
||||
const key = stand(s.projekt, s.angebot)
|
||||
const editorDa = root.dataset.zeitenKey === key && root.querySelector('.zt-editor') && S?.root === root
|
||||
if (editorDa && !rueckkehr.bestellt && !rueckkehr.behalten) {
|
||||
if (wunschWeg === 'behalten' && behaltenMoeglich(S.projekt)) zeigeBehalten(S)
|
||||
return
|
||||
}
|
||||
S = s
|
||||
s.danke = rueckkehr.bestellt && (!rueckkehr.projekt || rueckkehr.projekt === s.projekt.projectId) ? 'bestellt'
|
||||
: rueckkehr.behalten && (!rueckkehr.projekt || rueckkehr.projekt === s.projekt.projectId) ? 'behalten' : ''
|
||||
s.buehne = h('div', { id: 'zeiten-buehne' })
|
||||
root.replaceChildren(...(projects.length > 1 ? [projektwahl(s)] : []), s.buehne)
|
||||
zeichneProjekt(s, { weg: wunschWeg })
|
||||
}
|
||||
|
||||
/** Alles, was die Statuskarte zeigt und der Editorplatz davon abhaengt (auch die Abo-Lage: Behalten gibt es nur ohne Abo); aendert es sich, wird neu aufgebaut. */
|
||||
function stand(projekt, angebot) {
|
||||
const f = projekt?.features?.zeiten || {}
|
||||
return [projekt?.projectId, f.state, f.aboEndeAt, f.einbau, f.ticketWoid, f.disabledReason, f.unlockedBy, projekt?.zeitenLeer, angebot?.inklusive, angebot?.grund].join(':')
|
||||
}
|
||||
|
||||
function projektwahl(s) {
|
||||
const select = h('select', { id: 'zeiten-project' }, s.projects.map((p) => {
|
||||
const option = h('option', { value: p.projectId }, p.projectName)
|
||||
option.selected = p.projectId === s.projekt.projectId
|
||||
return option
|
||||
}))
|
||||
select.addEventListener('change', () => {
|
||||
auswahl.projectId = select.value
|
||||
s.projekt = s.projects.find((p) => p.projectId === select.value)
|
||||
s.danke = '' // der Dank gilt dem Projekt, mit dem man von Stripe zurueckkam
|
||||
zeichneProjekt(s)
|
||||
})
|
||||
return h('div', { class: 'fn-project kb-panel' }, h('label', { for: 'zeiten-project' }, 'Website'), select)
|
||||
}
|
||||
|
||||
/** Liste der Funktionen neu holen (Projekte, Angebot, Register-Ansicht). Wirft bei einem Fehler und aendert dann nichts. */
|
||||
async function ladeListe(s) {
|
||||
const antwort = await request('/api/funktionen')
|
||||
const projects = Array.isArray(antwort.projects) ? antwort.projects : []
|
||||
s.projects = projects
|
||||
s.angebot = antwort.zeiten || null
|
||||
s.features = antwort.features || {}
|
||||
s.ustHinweis = typeof antwort.ustHinweis === 'string' ? antwort.ustHinweis : ''
|
||||
s.projekt = projects.find((p) => p.projectId === s.projekt?.projectId) || s.projekt
|
||||
}
|
||||
|
||||
/**
|
||||
* Nach einem Konflikt (409) oder dem Einschalten: Liste frisch holen und die Ansicht nach dem neuen Stand zeichnen (optionen: meldung des Servers,
|
||||
* danke). Scheitert das Laden, wirft die Funktion und die Seite bleibt mit ihrer Meldung stehen. Eine Antwort, die erst nach einem Wechsel der
|
||||
* Website eintrifft, wird verworfen.
|
||||
*/
|
||||
async function neuZeichnen(s, optionen = {}) {
|
||||
const lauf = s.lauf
|
||||
await ladeListe(s)
|
||||
if (S !== s || s.lauf !== lauf) return
|
||||
if (!s.angebot?.verfuegbar) {
|
||||
s.root.dataset.zeitenKey = ''
|
||||
s.root.replaceChildren(infoKarte('Öffnungszeiten live ist noch nicht verfügbar', 'Sobald es für dich bereit ist, findest du es hier.'))
|
||||
return
|
||||
}
|
||||
if (optionen.danke) s.danke = optionen.danke
|
||||
zeichneProjekt(s, { meldung: optionen.meldung })
|
||||
}
|
||||
|
||||
/** Kontext der Seiten in der Huelle (zeiten-bestellen.js): Projekt, Register-Ansicht, Kundenansicht und die Wege, die Ansicht nach dem Server neu zu zeichnen. */
|
||||
function baueCtx(s, projekt) {
|
||||
return {
|
||||
projectId: projekt.projectId,
|
||||
features: s.features,
|
||||
ustHinweis: s.ustHinweis,
|
||||
kundenansicht: kundenansicht(),
|
||||
neuZeichnen: (optionen) => neuZeichnen(s, optionen),
|
||||
fertig: ({ danke } = {}) => neuZeichnen(s, { danke }),
|
||||
}
|
||||
}
|
||||
|
||||
/** Die Ansicht zum Zustand des gewaehlten Projekts zeichnen (siehe Kopf der Datei). Jeder Aufruf zaehlt s.lauf hoch. */
|
||||
function zeichneProjekt(s, { weg = '', meldung = '', bestellformular = false } = {}) {
|
||||
const projekt = s.projekt
|
||||
++s.lauf
|
||||
const ctx = baueCtx(s, projekt)
|
||||
const zustand = zustandVon(projekt)
|
||||
const feature = projekt.features?.zeiten || {}
|
||||
const danke = s.danke
|
||||
s.danke = '' // nur beim ersten Zeichnen nach der Rueckkehr
|
||||
s.root.dataset.zeitenKey = ''
|
||||
const kopf = h('div', { class: 'zt-kopf' })
|
||||
const teile = []
|
||||
const meldungEl = meldung ? h('p', { class: 'tm-meldung tm-meldung-fehler', role: 'alert', tabindex: '-1', 'data-meldung': 'ansicht' }, meldung) : null
|
||||
if (meldungEl) teile.push(meldungEl)
|
||||
teile.push(kopf)
|
||||
|
||||
const editorPlatz = (zustand === 'setup' || zustand === 'active' || (zustand === 'disabled' && projekt.zeitenLeer === false))
|
||||
? h('div', { class: 'zt-editor', 'data-state': zustand })
|
||||
: null
|
||||
if (editorPlatz) teile.push(editorPlatz)
|
||||
s.buehne.replaceChildren(...teile)
|
||||
if (editorPlatz) s.root.dataset.zeitenKey = stand(projekt, s.angebot)
|
||||
// die Meldung des Servers ersetzt die Seite, auf der der Kunde geklickt hat: dorthin schauen, nicht ins Leere
|
||||
if (meldungEl) {
|
||||
meldungEl.focus({ preventScroll: true })
|
||||
meldungEl.scrollIntoView({ block: 'nearest' })
|
||||
}
|
||||
|
||||
const statusKarte = (zusatz = {}) => zeitenStatusKarte(
|
||||
{ projekt, feature, angebot: s.angebot, kundenansicht: ctx.kundenansicht, danke, ...zusatz },
|
||||
{
|
||||
behalten: () => zeigeBehalten(s),
|
||||
weiter: (fall) => zeichneProjekt(s, { bestellformular: fall?.bestellen === true, meldung: fall?.meldung || '' }),
|
||||
})
|
||||
|
||||
if (zustand === 'off' || (zustand === 'ordered' && bestellformular)) {
|
||||
renderZeitenBestellen(kopf, { ctx, angebot: s.angebot, projekt })
|
||||
return
|
||||
}
|
||||
kopf.replaceChildren(statusKarte())
|
||||
if (weg === 'behalten' && behaltenMoeglich(projekt)) zeigeBehalten(s)
|
||||
}
|
||||
|
||||
/** Behalten-Seite (30 €) statt der Statuskarte; der Editor darunter bleibt, nur versteckt, damit nichts verloren geht. „Zurück“ zeigt wieder die Karte. */
|
||||
function zeigeBehalten(s) {
|
||||
const kopf = s.buehne.querySelector('.zt-kopf')
|
||||
if (!kopf) return
|
||||
const editor = s.buehne.querySelector('.zt-editor')
|
||||
const ctx = baueCtx(s, s.projekt)
|
||||
ctx.zurueck = () => {
|
||||
if (editor) editor.hidden = false
|
||||
kopf.replaceChildren(zeitenStatusKarte(
|
||||
{ projekt: s.projekt, feature: s.projekt.features?.zeiten, angebot: s.angebot, kundenansicht: ctx.kundenansicht },
|
||||
{ behalten: () => zeigeBehalten(s) }))
|
||||
}
|
||||
if (editor) editor.hidden = true
|
||||
renderZeitenBestellen(kopf, { ctx, angebot: s.angebot, projekt: s.projekt, modus: 'behalten' })
|
||||
}
|
||||
Reference in new issue
Block a user