Hinweis-Leiste (Liste, „Hinweis-Leiste anlegen“, Art, Knopf, Zeitraum, Preis-Hinweis), Kontakt-Leiste (Telefon, Adresse, WhatsApp mit Datenschutz-Haken, R12 in der Kundenansicht), Google (Für Google kopieren, Profil-Link), Live-Vorschau mit Regler „Uhrzeit testen“ und UI-Prüfung test/ui/zeiten-portal.ui.mjs. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
67 lines
3.5 KiB
JavaScript
67 lines
3.5 KiB
JavaScript
/* Oeffnungszeiten live im Kundenbereich: Editor, Bereich 6 „Google“ (Spec 3.4). google(t) ist ein Abschnitt des Editors (t = { ctx, sp, zeichne, wurzel }
|
||
aus zeiten-editor.js). Der Text fuer das Google-Profil kommt vom Server (ctx.stand.googleText aus GET/PUT /api/zeiten: Montag bis Sonntag, danach die
|
||
Sonderzeiten der naechsten 60 Tage) und wird hier nie selbst gebaut. „Für Google kopieren“ legt ihn in die Zwischenablage; fehlt die Schnittstelle oder
|
||
lehnt der Browser ab, bleibt der Text im (schreibgeschuetzten) Textfeld markiert und eine Meldung sagt, wie der Kunde ihn selbst kopiert. Nach jedem Speichern
|
||
folgt die Anzeige dem neuen Text (ctx.beiStand). Das Google-Profil selbst oeffnet der Link in einem neuen Fenster (noopener); wir schreiben dort nichts. */
|
||
|
||
import { abschnitt, h } from './termine-dom.js'
|
||
|
||
const GOOGLE_PROFIL = 'https://business.google.com/'
|
||
const KOPIERT = 'Kopiert. Füge den Text jetzt in dein Google-Profil ein.'
|
||
const KEIN_TEXT = 'Es gibt noch keinen Text zum Kopieren. Speichere zuerst deine Öffnungszeiten.'
|
||
const NICHT_KOPIERT = 'Das Kopieren hat nicht geklappt. Der Text ist unten markiert: Kopiere ihn selbst (Strg+C, am Handy: lange drücken und „Kopieren“ wählen).'
|
||
|
||
export function google(t) {
|
||
const { ctx } = t
|
||
const text = () => (typeof ctx.stand.googleText === 'string' ? ctx.stand.googleText : '')
|
||
const feld = h('textarea', { class: 'zt-google-text', readonly: true, 'aria-label': 'Öffnungszeiten für dein Google-Profil', 'data-google': 'text' })
|
||
const meldung = h('p', { class: 'tm-hinweis zt-google-meldung', role: 'status', 'aria-live': 'polite', 'data-meldung': 'google' })
|
||
const knopf = h('button', { type: 'button', class: 'kb-btn-primary', 'data-aktion': 'google-kopieren' }, 'Für Google kopieren')
|
||
|
||
const zeige = () => {
|
||
feld.value = text()
|
||
feld.setAttribute('rows', String(Math.min(Math.max(text().split('\n').length + 1, 4), 16)))
|
||
}
|
||
zeige()
|
||
|
||
knopf.addEventListener('click', async () => {
|
||
const inhalt = text() // der Stand zum Zeitpunkt des Klicks, nicht der beim Zeichnen
|
||
if (inhalt === '') {
|
||
meldung.textContent = KEIN_TEXT
|
||
return
|
||
}
|
||
let kopiert = false
|
||
try {
|
||
const zwischenablage = typeof navigator !== 'undefined' ? navigator.clipboard : undefined
|
||
if (zwischenablage && typeof zwischenablage.writeText === 'function') {
|
||
await zwischenablage.writeText(inhalt)
|
||
kopiert = true
|
||
}
|
||
} catch {
|
||
kopiert = false // nicht erlaubt: weiter mit dem markierten Text
|
||
}
|
||
if (kopiert) {
|
||
meldung.textContent = KOPIERT
|
||
return
|
||
}
|
||
feld.focus()
|
||
feld.select()
|
||
if (typeof feld.setSelectionRange === 'function') feld.setSelectionRange(0, feld.value.length) // iOS markiert sonst nichts
|
||
meldung.textContent = NICHT_KOPIERT
|
||
})
|
||
|
||
const el = abschnitt('Google',
|
||
'Die Google-Daten im Seitencode laufen automatisch – dafür musst du nichts tun. Dein Google-Unternehmensprofil pflegst du selbst: Kopiere hier den Text mit deinen Öffnungszeiten (auch die Sonderzeiten der nächsten 60 Tage) und füge ihn dort ein.',
|
||
feld,
|
||
h('div', { class: 'zt-google-aktionen' },
|
||
knopf,
|
||
h('a', { class: 'kb-btn-outline', href: GOOGLE_PROFIL, target: '_blank', rel: 'noopener noreferrer', 'data-google': 'profil' }, 'Google-Profil öffnen')),
|
||
meldung)
|
||
ctx.beiStand(() => {
|
||
if (!el.isConnected) return false // der Abschnitt wurde neu gezeichnet: diese Anzeige gibt es nicht mehr
|
||
zeige()
|
||
return true
|
||
})
|
||
return el
|
||
}
|