277 lines
16 KiB
JavaScript
277 lines
16 KiB
JavaScript
/* Kundenansicht neu: Start und Zusammenbau der Hülle.
|
|
Start über GET /api/auth/me (Anmeldung, Mitarbeiter, Kundenansicht), dann Konto, Streifen, Navigation, Etage 2, Zähler und Router.
|
|
Der Router ruft zeige(route, { nav }) bei jedem Wechsel; die Hülle lädt die Ansicht über einen einspritzbaren Lader (Standard: import())
|
|
und ruft zeigeX(wurzel, { route, me, nav }) bzw. die Funktionsmodule wie bisher (init*(wurzel)). Kein DOM-Zugriff beim Import. */
|
|
|
|
import { h, leeren, text } from './dom.js'
|
|
import { api as apiStandard } from './api.js'
|
|
import * as routerStandard from './router.js'
|
|
import { BEREICHE, FUNKTIONS_ETAGEN, hashFuerAnsicht, hashFuerRoute, elternVon, titelFuer } from './routen.js'
|
|
import { HANDY_ABFRAGE, baueNavigation, beobachteTastatur, leisteSichtbar } from './leiste.js'
|
|
import { baueEtage } from './etage.js'
|
|
import { erzeugeZaehler } from './zaehler.js'
|
|
import { baueStreifen, ladeFristen } from './fristen-streifen.js'
|
|
import { baueAvatar, baueKonto, installAngebot } from './konto.js'
|
|
|
|
export const GERUEST_IDS = ['kn-banner', 'kn-ansage', 'kn-fehler', 'kn-menue', 'kn-kopf', 'kn-kopf-titel', 'kn-kopf-konto', 'kn-inhalt', 'bereich-website', 'bereich-funktionen', 'bereich-chat', 'bereich-vertraege', 'website-body', 'funktionen-body', 'chat-body', 'vertraege-body', 'kn-blatt', 'kn-brot', 'kn-etage-titel', 'kn-reiter-slot', 'news-body', 'termine-body', 'webshop-body', 'buchungen-body', 'zeiten-body', 'analyse-body', 'etage-body', 'kn-streifen', 'kn-leiste', 'kn-zeile-haupt', 'kn-zeile-etage', 'kn-konto-wurzel']
|
|
|
|
// Bereich → [Modul, Funktion, Wurzel]; die Ansicht heißt ansicht-<name>.js und exportiert zeige<Name>
|
|
export const ANSICHTEN = {
|
|
website: ['/neu/ansicht-website.js', 'zeigeWebsite', 'website-body'],
|
|
funktionen: ['/neu/ansicht-funktionen.js', 'zeigeFunktionen', 'funktionen-body'],
|
|
chat: ['/neu/ansicht-chat.js', 'zeigeChat', 'chat-body'],
|
|
vertraege: ['/neu/ansicht-vertraege.js', 'zeigeVertraege', 'vertraege-body'],
|
|
}
|
|
// Etagen mit eigener Ansicht; alle zeichnen in #etage-body
|
|
export const ETAGE_ANSICHTEN = {
|
|
projekt: ['/neu/ansicht-website.js', 'zeigeWebsite', 'etage-body'],
|
|
passwort: ['/neu/ansicht-passwort.js', 'zeigePasswort', 'etage-body'],
|
|
gutschrift: ['/neu/ansicht-gutschrift.js', 'zeigeGutschrift', 'etage-body'],
|
|
wechsel: ['/neu/ansicht-wechsel.js', 'zeigeWechsel', 'etage-body'],
|
|
bestellen: ['/neu/ansicht-bestellen.js', 'zeigeBestellen', 'etage-body'],
|
|
}
|
|
// Gemeinsame Funktionsmodule, wörtlich aus app.js:1938-1945 (Wurzel: der Behälter mit der alten ID)
|
|
export const FUNKTIONS_MODULE = {
|
|
news: ['/funktionen.js', 'initNews', 'news-body'],
|
|
termine: ['/termine.js', 'initTermine', 'termine-body'],
|
|
webshop: ['/shop.js', 'initShop', 'webshop-body'],
|
|
buchungen: ['/buchungen.js', 'initBuchungen', 'buchungen-body'],
|
|
zeiten: ['/zeiten.js', 'initZeiten', 'zeiten-body'],
|
|
analyse: ['/analyse.js', 'initAnalyse', 'analyse-body'],
|
|
}
|
|
// Diese Module bekommen init*(wurzel, { einschalten }); die Analyse nutzt POST /api/funktionen/analyse/activate und bleibt init*(wurzel)
|
|
export const MIT_EINSCHALTEN = ['news', 'termine', 'webshop', 'buchungen', 'zeiten']
|
|
|
|
/** einschalten(platz, { key, projectId, onFertig, viewAs? }): lädt die Einschalt-Ansicht erst beim Aufruf; ein Ladefehler geht an das Modul zurück. */
|
|
export const einschaltenOption = (lade) => async (platz, optionen) => {
|
|
const modul = await lade('/neu/funktion-einschalten.js')
|
|
return modul.zeigeEinschalten(platz, optionen)
|
|
}
|
|
|
|
/** Antwort von /api/auth/me → weiterleiten (Anmeldung, Mitarbeiter, abgelaufen, Passwort geändert) oder zeigen (Kunde, Kundenansicht). */
|
|
export function leiteAb(me, { hash = '' } = {}) {
|
|
if (me?.authenticated !== true || !me.customer) {
|
|
// Alte Mitarbeiter-Sitzung: Mitarbeiter arbeiten im Ticketsystem
|
|
if (me?.authenticated === false && me.reason === 'staff' && me.redirect) return { art: 'weiter', ziel: me.redirect }
|
|
const suche = new URLSearchParams()
|
|
if (hash && hash !== '#') suche.set('next', `/dashboard.html${hash}`) // nach dem Login zurück zur aufgerufenen Ansicht
|
|
if (me?.authenticated === false && (me.reason === 'password_changed' || me.reason === 'view_expired') && me.message) suche.set('error', me.message)
|
|
const anhang = suche.toString()
|
|
return { art: 'weiter', ziel: `/login.html${anhang ? `?${anhang}` : ''}` }
|
|
}
|
|
const kunde = me.customer
|
|
const viewAs = me.viewAs === true && Boolean(me.viewId)
|
|
return { art: 'zeigen', kunde, viewAs, viewId: viewAs ? me.viewId : '', admin: me.admin ?? null, anzeigename: kunde.companyName || kunde.name || kunde.email || '' }
|
|
}
|
|
|
|
/** Wohin scrollt der Wechsel? push beginnt oben, same scrollt weich nach oben, back und tab stellen den gemerkten Stand wieder her. */
|
|
export function scrollZiel(nav, gemerkt) {
|
|
if (nav === 'push') return { top: 0, weich: false }
|
|
if (nav === 'same') return { top: 0, weich: true }
|
|
return { top: Number.isFinite(gemerkt) ? gemerkt : 0, weich: false }
|
|
}
|
|
|
|
export async function starteHuelle({ win = window, doc = document, api = apiStandard, lade = (pfad) => import(pfad), router = routerStandard, hash = win.location.hash } = {}) {
|
|
const el = (id) => doc.getElementById(id)
|
|
const zeigeFehler = (nachricht) => { const f = el('kn-fehler'); text(f, nachricht); f.hidden = false }
|
|
|
|
// 1. Wer ist da? Fehler oder fremder Zustand ergeben eine Weiterleitung oder eine Meldung, nie eine leere Seite.
|
|
let me
|
|
try {
|
|
me = await api('/api/auth/me')
|
|
} catch (fehler) {
|
|
if (fehler?.status === 401 || /Nicht angemeldet/.test(fehler?.message ?? '')) win.location.href = leiteAb({ authenticated: false }, { hash }).ziel
|
|
else zeigeFehler(fehler?.message || 'Der Kundenbereich konnte nicht geladen werden.')
|
|
return
|
|
}
|
|
const start = leiteAb(me, { hash })
|
|
if (start.art === 'weiter') { win.location.href = start.ziel; return }
|
|
const { kunde, viewAs, viewId, admin, anzeigename } = start
|
|
// Kundenansicht: ab jetzt trägt jede /api-Anfrage die Kennung dieser Ansicht (public/kundenansicht.js)
|
|
if (viewAs) win.KbView?.setId(viewId)
|
|
if (viewAs) baueBanner()
|
|
|
|
// 2. Bausteine
|
|
const handyMq = win.matchMedia(HANDY_ABFRAGE)
|
|
const istHandy = () => handyMq.matches
|
|
const reduziert = () => Boolean(win.matchMedia('(prefers-reduced-motion: reduce)').matches)
|
|
const standalone = () => win.matchMedia('(display-mode: standalone)').matches || win.navigator?.standalone === true
|
|
const istIos = () => /iphone|ipad|ipod/i.test(win.navigator?.userAgent ?? '') || (win.navigator?.platform === 'MacIntel' && win.navigator?.maxTouchPoints > 1)
|
|
let fristen = null
|
|
let installPrompt = null
|
|
const installStand = () => installAngebot({ handy: istHandy(), standalone: standalone(), prompt: Boolean(installPrompt), ios: istIos() })
|
|
|
|
const avatar = baueAvatar({ name: anzeigename, kundenId: kunde.id })
|
|
el('kn-kopf-konto').append(avatar)
|
|
const konto = baueKonto({
|
|
me, fristen, install: installStand(),
|
|
onAbmelden: async () => { await api('/api/auth/logout', { method: 'POST' }).catch(() => {}); win.location.href = '/login.html' },
|
|
onInstall: async () => {
|
|
const prompt = installPrompt
|
|
if (!prompt) return
|
|
installPrompt = null
|
|
await prompt.prompt().catch(() => {})
|
|
aktualisiereKonto()
|
|
},
|
|
overlay: { oeffne: (o) => router.oeffneOverlay(o), beende: () => router.beendeOverlay() },
|
|
navigiere: (ziel) => router.geheZu(ziel),
|
|
})
|
|
el('kn-konto-wurzel').append(konto.wurzel)
|
|
avatar.addEventListener('click', () => (konto.istOffen() ? konto.schliesse() : konto.oeffne(avatar)))
|
|
const aktualisiereKonto = () => konto.aktualisiere({ fristen, install: installStand() })
|
|
|
|
const streifen = baueStreifen(el('kn-streifen'), { koerper: doc.body })
|
|
streifen.setze(null)
|
|
const navigation = baueNavigation({ haupt: el('kn-zeile-haupt'), menue: el('kn-menue'), onWahl: (bereich) => router.geheZu(hashFuerRoute({ bereich })) })
|
|
const etage = baueEtage({ blatt: el('kn-blatt'), haupt: el('kn-inhalt'), zeile: el('kn-zeile-etage'), titel: el('kn-etage-titel'), brot: el('kn-brot'), reiterSlot: el('kn-reiter-slot'), istHandy, onZurueck: () => router.zurueck() })
|
|
let aktuell = null // die Route, die gerade gezeigt wird
|
|
let herkunft = '' // Hash der Route davor (Rückweg der Passwort-Seite)
|
|
const zaehler = erzeugeZaehler({
|
|
api,
|
|
onChange: (stand) => { navigation.setzeZaehler(stand); etage.setzeChatPunkt(stand.chat > 0) },
|
|
sichtbar: () => doc.visibilityState !== 'hidden',
|
|
imChat: () => aktuell?.bereich === 'chat',
|
|
})
|
|
|
|
function baueBanner() {
|
|
const banner = el('kn-banner')
|
|
const beenden = async () => {
|
|
const antwort = await api('/api/auth/kundenansicht/ende', { method: 'POST' }).catch(() => ({}))
|
|
win.location.href = antwort?.redirect || 'https://ticket.webklar.com/customers'
|
|
}
|
|
leeren(banner).append(h('span', null, 'Kundenansicht: ', h('strong', null, kunde.name || 'Kunde'), ` · geöffnet von ${admin?.name || 'Mitarbeiter'}`), h('button', { type: 'button', on: { click: beenden } }, 'Beenden'))
|
|
banner.hidden = false
|
|
}
|
|
|
|
// 3. Scroll: Stand je Route merken, Kopf (Rand, kleiner Titel) nachführen
|
|
const merker = new Map()
|
|
const schluessel = (route) => hashFuerRoute({ ...route, query: '' })
|
|
const blattScrollt = (route) => Boolean(route?.etage) && istHandy() // am Handy scrollt das Blatt, sonst das Fenster
|
|
const leseScroll = (route) => (blattScrollt(route) ? el('kn-blatt').scrollTop : (win.scrollY ?? 0))
|
|
function setzeScroll(route, ziel) {
|
|
const verhalten = ziel.weich && !reduziert() ? 'smooth' : 'auto'
|
|
const flaeche = blattScrollt(route) ? el('kn-blatt') : win
|
|
if (typeof flaeche.scrollTo === 'function') flaeche.scrollTo({ top: ziel.top, behavior: verhalten })
|
|
else if (flaeche !== win) flaeche.scrollTop = ziel.top
|
|
}
|
|
function aktualisiereKopf() {
|
|
if (!aktuell) return
|
|
doc.body.classList.toggle('kn-scrolled', leseScroll(aktuell) > 4)
|
|
const titel = aktuell.etage ? el('kn-etage-titel') : el(`bereich-${aktuell.bereich}`)?.querySelector('h1')
|
|
const kopf = el('kn-kopf')
|
|
const verdeckt = titel && kopf && typeof titel.getBoundingClientRect === 'function' ? titel.getBoundingClientRect().bottom < kopf.getBoundingClientRect().bottom + 4 : false
|
|
doc.body.classList.toggle('kn-titled', verdeckt)
|
|
}
|
|
const frame = (fn) => (win.requestAnimationFrame ? win.requestAnimationFrame(fn) : fn())
|
|
let scrollGeplant = false
|
|
const beiScroll = () => {
|
|
if (scrollGeplant) return
|
|
scrollGeplant = true
|
|
frame(() => { scrollGeplant = false; if (aktuell) merker.set(schluessel(aktuell), leseScroll(aktuell)); aktualisiereKopf() })
|
|
}
|
|
|
|
// 4. Zeigen: Bereich oder Etage, Navigation, Titel; dann die Ansicht laden (nicht abwarten)
|
|
let erstesZeigen = true
|
|
function zeige(route, { nav }) {
|
|
if (aktuell) merker.set(schluessel(aktuell), leseScroll(aktuell))
|
|
if (aktuell && hashFuerRoute(aktuell) !== hashFuerRoute(route)) herkunft = hashFuerRoute(aktuell)
|
|
aktuell = route
|
|
const titel = titelFuer(route)
|
|
for (const bereich of BEREICHE) el(`bereich-${bereich}`).hidden = bereich !== route.bereich
|
|
if (route.etage) {
|
|
const eltern = elternVon(route, herkunft)
|
|
etage.oeffne({ titel, eltern: { label: titelFuer(eltern), hash: hashFuerRoute(eltern) }, seite: FUNKTIONS_ETAGEN.includes(route.etage) ? route.etage : 'seite' })
|
|
} else etage.schliesse()
|
|
navigation.setzeAktiv(route.bereich)
|
|
navigation.setzeEtage(Boolean(route.etage))
|
|
text(el('kn-kopf-titel'), titel)
|
|
text(el('kn-ansage'), titel)
|
|
if (route.bereich === 'chat') zaehler.setzeChat(0)
|
|
if (route.bereich === 'vertraege' && !erstesZeigen) zaehler.aktualisiere('vertraege') // beim ersten Zeigen lädt zaehler.start() ohnehin alles
|
|
erstesZeigen = false
|
|
return ladeAnsicht(route, nav)
|
|
}
|
|
|
|
async function ladeAnsicht(route, nav) {
|
|
const modul = route.etage ? FUNKTIONS_MODULE[route.etage] : null
|
|
const eintrag = modul ?? (route.etage ? ETAGE_ANSICHTEN[route.etage] : ANSICHTEN[route.bereich])
|
|
if (!eintrag) return
|
|
const [pfad, name, wurzelId] = eintrag
|
|
const wurzel = el(wurzelId)
|
|
// #etage-body dient mehreren Etagen: beim Wechsel der Etage den Rest der vorigen wegräumen
|
|
if (wurzelId === 'etage-body' && wurzel.dataset.knEtage !== route.etage) { leeren(wurzel); wurzel.dataset.knEtage = route.etage }
|
|
if (!wurzel.firstChild) wurzel.append(h('p', { class: 'kn-leer' }, 'Wird geladen …'))
|
|
const gemerkt = merker.get(schluessel(route))
|
|
const ziel = scrollZiel(nav, gemerkt)
|
|
setzeScroll(route, ziel)
|
|
aktualisiereKopf()
|
|
try {
|
|
const geladen = await lade(pfad)
|
|
if (modul) {
|
|
const projekt = new URLSearchParams(route.query).get('projekt')
|
|
if (projekt) wurzel.dataset.wunschProjekt = projekt
|
|
if (MIT_EINSCHALTEN.includes(route.etage)) await geladen[name](wurzel, { einschalten: einschaltenOption(lade) })
|
|
else await geladen[name](wurzel)
|
|
router.stempeln() // die Module löschen mit replaceState(null, …) den Verlaufsstempel
|
|
} else {
|
|
await geladen[name](wurzel, { route, me, nav })
|
|
}
|
|
} catch {
|
|
leeren(wurzel).append(h('p', { class: 'kn-fehler' }, 'Konnte nicht geladen werden.'))
|
|
}
|
|
if (ziel.top > 0 && aktuell === route) setzeScroll(route, ziel) // wiederherstellen, sobald der Inhalt da ist
|
|
aktualisiereKopf()
|
|
}
|
|
|
|
// 5. Titel aus dem Inhalt der Etage (kn:titel) auch im Kopf und in der Ansage
|
|
el('kn-blatt').addEventListener('kn:titel', (ev) => {
|
|
if (!aktuell?.etage || !ev.detail?.text) return
|
|
text(el('kn-kopf-titel'), String(ev.detail.text))
|
|
text(el('kn-ansage'), String(ev.detail.text))
|
|
})
|
|
|
|
// 6. Hörer
|
|
try { win.history.scrollRestoration = 'manual' } catch { /* ohne Verlaufssteuerung bleibt der Browser-Standard */ }
|
|
doc.body.addEventListener('click', (ev) => { // die data-view-Brücke der gemeinsamen Module
|
|
const ziel = ev.target?.closest?.('[data-view]')
|
|
if (!ziel || ziel.disabled) return
|
|
let ansicht = hashFuerAnsicht(ziel.getAttribute('data-view'))
|
|
if (ansicht === null) return
|
|
ev.preventDefault()
|
|
const projekt = ziel.getAttribute('data-project')
|
|
if (projekt) ansicht += `${ansicht.includes('?') ? '&' : '?'}projekt=${encodeURIComponent(projekt)}`
|
|
router.geheZu(ansicht)
|
|
})
|
|
doc.querySelector?.('.kn-skip')?.addEventListener('click', (ev) => { ev.preventDefault(); el('kn-inhalt').focus() }) // kein Fragment-Link: der Router läse #kn-inhalt als Route
|
|
doc.addEventListener('kn:zaehler-neu', (ev) => { zaehler.aktualisiere(ev.detail?.was ?? 'alle') })
|
|
doc.addEventListener('visibilitychange', () => { if (doc.visibilityState === 'visible') zaehler.aktualisiere('alle') })
|
|
win.addEventListener('scroll', beiScroll, { passive: true })
|
|
el('kn-blatt').addEventListener('scroll', beiScroll, { passive: true })
|
|
win.addEventListener('beforeinstallprompt', (ev) => { ev.preventDefault(); installPrompt = ev; aktualisiereKonto() })
|
|
win.addEventListener('appinstalled', () => { installPrompt = null; aktualisiereKonto() })
|
|
const beiMedien = () => { etage.neuZeichnen(); aktualisiereKonto(); aktualisiereKopf() }
|
|
if (handyMq.addEventListener) handyMq.addEventListener('change', beiMedien)
|
|
else handyMq.addListener?.(beiMedien)
|
|
beobachteTastatur({ win, doc, onChange: (z) => doc.body.classList.toggle('kn-tastatur', !leisteSichtbar(z)) })
|
|
|
|
// 7. Fristen und Zähler laden parallel und brechen den Start nie ab
|
|
ladeFristen(api).then((daten) => { fristen = daten; streifen.setze(daten); aktualisiereKonto() })
|
|
zaehler.start()
|
|
|
|
// 8. Router starten (ruft zeige einmal mit der Startroute), Service Worker für Installation und Offline-Seite
|
|
router.starteRouter({ zeige })
|
|
if (win.navigator?.serviceWorker && win.isSecureContext) {
|
|
const registriere = () => win.navigator.serviceWorker.register('/sw.js').catch((fehler) => console.warn('Service Worker:', fehler.message))
|
|
if (doc.readyState === 'complete') registriere()
|
|
else win.addEventListener('load', registriere)
|
|
}
|
|
}
|
|
|
|
if (typeof document !== 'undefined' && document.body?.classList.contains('kn') && document.getElementById('kn-leiste')) {
|
|
starteHuelle().catch((fehler) => {
|
|
console.error(fehler)
|
|
const f = document.getElementById('kn-fehler')
|
|
if (f) { f.textContent = 'Der Kundenbereich konnte nicht gestartet werden. Bitte lade die Seite neu.'; f.hidden = false }
|
|
})
|
|
}
|