277 lines
10 KiB
JavaScript
277 lines
10 KiB
JavaScript
// import { showToast } from '../ui/toast.js'
|
|
|
|
// — Livewire-Hooks (global)
|
|
// document.addEventListener('livewire:init', () => {
|
|
// if (window.Livewire?.on) {
|
|
// window.Livewire.on('toast', (payload = {}) => showToast(payload))
|
|
// }
|
|
// })
|
|
|
|
document.addEventListener('livewire:init', () => {
|
|
// Neu: Livewire v3 Browser-Events
|
|
window.addEventListener('toast', (e) => {
|
|
const d = e?.detail || {};
|
|
showToastGlass(d);
|
|
});
|
|
|
|
// Optional: Update/Dismiss/Clear per Event
|
|
window.addEventListener('toast.update', (e) => {
|
|
const d = e?.detail || {};
|
|
if (d.id) window.toastraGlass?.update(d.id, d);
|
|
});
|
|
window.addEventListener('toast.clear', (e) => {
|
|
window.toastraGlass?.clear(e?.detail?.position);
|
|
});
|
|
});
|
|
|
|
// Adapter: normalisiert Payload und ruft toastraGlass
|
|
function showToastGlass({
|
|
id,
|
|
type, state, // "success" | "warning" | "error" ODER "done" | "failed" | "running"
|
|
text, message, title, // Textquellen
|
|
badge, domain,
|
|
position = 'bottom-right',
|
|
duration = 0, // 0 = stehen lassen; bei done/failed auto auf 6000ms
|
|
} = {}) {
|
|
// Map: type -> state
|
|
const t = (type || state || 'done').toLowerCase();
|
|
const map = { success: 'done', ok: 'done', error: 'failed', danger: 'failed', info: 'queued', warning: 'queued' };
|
|
const st = ['done','failed','running','queued'].includes(t) ? t : (map[t] || 'queued');
|
|
|
|
const msg = message || text || title || '';
|
|
const _id = id || ('toast-' + Date.now());
|
|
|
|
if (window.toastraGlass?.show) {
|
|
window.toastraGlass.show({
|
|
id: _id,
|
|
state: st, // queued|running|done|failed → färbt Badge/Icon
|
|
badge, // z.B. "DNS", "Signup"
|
|
domain, // optional: kleine Überschrift rechts
|
|
message: msg,
|
|
position,
|
|
duration, // 0 = stehen lassen; sonst ms
|
|
});
|
|
} else if (window.toastr) {
|
|
// Fallback: alte toastr API
|
|
const level = (type || (st === 'failed' ? 'error' : st === 'done' ? 'success' : 'info'));
|
|
window.toastr[level](msg, badge || domain || '');
|
|
} else {
|
|
// Minimal-Fallback
|
|
const box = document.createElement('div');
|
|
box.className = 'fixed top-4 right-4 z-[9999] rounded-xl bg-emerald-500/90 text-white px-4 py-3 backdrop-blur shadow-lg border border-white/10';
|
|
box.textContent = msg || 'OK';
|
|
document.body.appendChild(box);
|
|
setTimeout(() => box.remove(), 3500);
|
|
}
|
|
|
|
return _id;
|
|
}
|
|
|
|
// — Session-Flash vom Backend (einmal pro Page-Load)
|
|
function bootstrapFlashFromLayout() {
|
|
const el = document.getElementById('__flash')
|
|
if (!el) return
|
|
try {
|
|
const data = JSON.parse(el.textContent || '{}')
|
|
if (data?.toast) showToast(data.toast)
|
|
} catch {}
|
|
}
|
|
document.addEventListener('DOMContentLoaded', bootstrapFlashFromLayout)
|
|
|
|
// — Optional: Echo/WebSocket-Kanal für „Push-Toasts“
|
|
function setupEchoToasts() {
|
|
if (!window.Echo) return
|
|
// userId wird im Layout in das JSON injiziert (siehe unten)
|
|
const el = document.getElementById('__flash')
|
|
let uid = null
|
|
try { uid = JSON.parse(el?.textContent || '{}')?.userId ?? null } catch {}
|
|
if (!uid) return
|
|
|
|
window.Echo.private(`users.${uid}`)
|
|
.listen('.ToastPushed', (e) => {
|
|
// e: { type, text, title }
|
|
showToast(e)
|
|
})
|
|
}
|
|
document.addEventListener('DOMContentLoaded', setupEchoToasts)
|
|
|
|
// — Optional: global machen, falls du manuell aus JS/Blade rufen willst
|
|
// window.showToast = showToast
|
|
|
|
|
|
|
|
// document.addEventListener('livewire:init', () => {
|
|
// Livewire.on('toastra:show', (payload) => {
|
|
// // optionaler "mute" pro Nutzer lokal:
|
|
// if (localStorage.getItem('toast:hide:' + payload.id)) return;
|
|
//
|
|
// const id = window.toastraGlass.show({
|
|
// id: payload.id,
|
|
// state: payload.state, // queued|running|done|failed
|
|
// badge: payload.badge,
|
|
// domain: payload.domain,
|
|
// message: payload.message,
|
|
// position: payload.position || 'bottom-center',
|
|
// duration: payload.duration ?? 0,
|
|
// close: payload.close !== false,
|
|
// });
|
|
//
|
|
// // Wenn der User X klickt, markiere lokal als verborgen:
|
|
// window.addEventListener('toastra:closed:' + id, () => {
|
|
// localStorage.setItem('toast:hide:' + id, '1');
|
|
// }, { once: true });
|
|
// });
|
|
// });
|
|
// document.addEventListener('livewire:init', () => {
|
|
// Livewire.on('notify', (payload) => {
|
|
// const o = Array.isArray(payload) ? payload[0] : payload;
|
|
// window.toastraGlass?.show({
|
|
// id: o.id, state: o.state, badge: o.badge, domain: o.domain,
|
|
// message: o.message, position: o.position || 'bottom-right',
|
|
// duration: Number(o.duration ?? 0), close: o.close !== false,
|
|
// finalNote: (o.state === 'done' || o.state === 'failed')
|
|
// ? 'Diese Meldung verschwindet automatisch.' : ''
|
|
// });
|
|
// });
|
|
// });
|
|
// document.addEventListener('livewire:init', () => {
|
|
// Livewire.on('notify', (payload) => {
|
|
// // Livewire liefert das Event als Array mit einem Objekt
|
|
// const o = Array.isArray(payload) ? payload[0] : payload;
|
|
//
|
|
// // Ein Aufruf reicht: gleiche id => ersetzt bestehenden Toast
|
|
// window.toastraGlass?.show({
|
|
// id: o.id,
|
|
// state: o.state, // queued|running|done|failed
|
|
// badge: o.badge, // z.B. CERTBOT
|
|
// domain: o.domain, // z.B. mail.example.com
|
|
// message: o.message,
|
|
// position: o.position || 'bottom-right',
|
|
// duration: Number(o.duration ?? 0),
|
|
// close: o.close !== false,
|
|
// // optional kannst du finalNote je nach state setzen:
|
|
// finalNote: (o.state === 'done' || o.state === 'failed')
|
|
// ? 'Diese Meldung verschwindet automatisch.'
|
|
// : ''
|
|
// });
|
|
// });
|
|
// });
|
|
|
|
// document.addEventListener('livewire:init', () => {
|
|
// Livewire.on('notify', (payload) => {
|
|
// const e = Array.isArray(payload) ? payload[0] : payload;
|
|
//
|
|
// // e.state: 'queued'|'running'|'done'|'failed'
|
|
// window.toastraGlass.show({
|
|
// id: e.id || ('toast-'+Date.now()),
|
|
// state: e.state || 'queued',
|
|
// badge: e.badge || (e.type ? String(e.type).toUpperCase() : null),
|
|
// domain: e.domain || '',
|
|
// message: e.message ?? e.text ?? '',
|
|
// position: e.position || 'bottom-right',
|
|
// duration: typeof e.duration === 'number' ? e.duration : (['done','failed'].includes(e.state) ? 6000 : 0),
|
|
// close: e.close ?? true,
|
|
// finalNote: (['done','failed'].includes(e.state) ? 'Diese Meldung verschwindet nach Aktualisierung automatisch.' : '')
|
|
// });
|
|
// });
|
|
// });
|
|
|
|
|
|
// document.addEventListener('livewire:init', () => {
|
|
// Livewire.on('notify', (event) => {
|
|
// const p = Array.isArray(event) ? event[0] : event;
|
|
//
|
|
// window.toastraGlass.show({
|
|
// id: p.id || ('toast-'+Date.now()),
|
|
// state: (p.type || 'info'), // info|update|success|warning|error
|
|
// title: p.title || '',
|
|
// domain: p.domain || '',
|
|
// message: p.message ?? p.text ?? '',
|
|
// badge: p.badge || null,
|
|
// duration: (typeof p.duration === 'number' ? p.duration : 0), // 0 = bleibt
|
|
// position: p.position || 'bottom-center', // top-left|top-center|top-right|bottom-*
|
|
// close: (p.close ?? true),
|
|
// });
|
|
// });
|
|
// });
|
|
|
|
// document.addEventListener('livewire:init', () => {
|
|
// // 1) Events aus PHP/Livewire-Komponenten
|
|
// Livewire.on('notify', (payload) => {
|
|
// const e = payload[0] || payload;
|
|
// toastra.notify({
|
|
// id: e.id,
|
|
// badge: e.badge || null,
|
|
// replace: true,
|
|
// title: e.title,
|
|
// text: e.text,
|
|
// subtitle: e.subtitle || null,
|
|
// type: e.type,
|
|
// // classname: e.classname,
|
|
// duration: e.duration ?? 0,
|
|
// close: e.close ?? true,
|
|
// icon: e.icon || null,
|
|
// });
|
|
// });
|
|
//
|
|
// document.addEventListener('notify', (e) => {
|
|
// console.log(e.detail);
|
|
// });
|
|
// // 2) Reine Browser-Events (für Konsole/JS)
|
|
// // window.addEventListener('notify', (ev) => {
|
|
// // const e = ev.detail || {};
|
|
// // toastra.notify({
|
|
// // id: e.id, replace: true,
|
|
// // title: e.title, text: e.message,
|
|
// // type: e.type, duration: e.duration ?? 0,
|
|
// // close: e.close ?? true, icon: e.icon || null,
|
|
// // });
|
|
// // });
|
|
// });
|
|
//
|
|
// // document.addEventListener('notify', (e) => {
|
|
// // const d = e.detail;
|
|
// // toastra.notify({
|
|
// // id: d.id,
|
|
// // title: d.title,
|
|
// // text: d.text || d.message || '', // fallback
|
|
// // type: d.type,
|
|
// // duration: d.duration ?? 0,
|
|
// // close: d.close ?? true,
|
|
// // });
|
|
// // });
|
|
//
|
|
// // document.addEventListener('livewire:init', () => {
|
|
// // // Livewire.on('notify', (event) => {
|
|
// // // toastra.notify({
|
|
// // // title: event[0].title,
|
|
// // // text: event[0].message,
|
|
// // // type: event[0].type,
|
|
// // // duration: event[0].duration,
|
|
// // // close: event[0].close
|
|
// // // });
|
|
// // // });
|
|
// //
|
|
// // Livewire.on('notify', (payload) => {
|
|
// // const e = payload[0] || payload;
|
|
// // toastra.notify({
|
|
// // id: e.id,
|
|
// // replace: true,
|
|
// // title: e.title,
|
|
// // text: e.message,
|
|
// // type: e.type,
|
|
// // duration: e.duration ?? 0,
|
|
// // close: e.close ?? true,
|
|
// // icon: e.icon || null
|
|
// // });
|
|
// // });
|
|
// //
|
|
// // Livewire.on('notify-replace', (event) => {
|
|
// // const opts = event[0] || {};
|
|
// // const wrap = document.getElementById('notification');
|
|
// // if (wrap) wrap.innerHTML = '';
|
|
// // toastra.notify(opts);
|
|
// // });
|
|
// //
|
|
// // });
|