rene
bb0250a8b5
- _parseData() flacht verschachteltes {data:{conversation_id:…}} auf
→ d.conversation_id war immer undefined wegen doppelter Verschachtelung aus push.py
- .notif-item als <button> statt <div> — iOS feuert clicks auf divs unzuverlässig
- closest() im Löschen-Handler auf button.notif-item angepasst
355 lines
11 KiB
JavaScript
355 lines
11 KiB
JavaScript
/* BAN YARO — Notification Center */
|
|
|
|
window.Page_notifications = (() => {
|
|
|
|
// ----------------------------------------------------------
|
|
// Hilfsfunktionen
|
|
// ----------------------------------------------------------
|
|
|
|
/** Relativer Zeitstempel: "vor 2h", "vor 3 Tagen", etc. */
|
|
function _relTime(isoStr) {
|
|
if (!isoStr) return '';
|
|
const diff = Date.now() - new Date(isoStr + (isoStr.includes('Z') ? '' : 'Z')).getTime();
|
|
const min = Math.floor(diff / 60000);
|
|
if (min < 1) return 'gerade eben';
|
|
if (min < 60) return `vor ${min} Min.`;
|
|
const h = Math.floor(min / 60);
|
|
if (h < 24) return `vor ${h}h`;
|
|
const d = Math.floor(h / 24);
|
|
if (d < 30) return `vor ${d} Tag${d !== 1 ? 'en' : ''}`;
|
|
const mo = Math.floor(d / 30);
|
|
return `vor ${mo} Monat${mo !== 1 ? 'en' : ''}`;
|
|
}
|
|
|
|
/** Phosphor-Icon-Name je nach Notification-Typ */
|
|
function _iconForType(type) {
|
|
switch (type) {
|
|
case 'chat_message': return 'chat-circle';
|
|
case 'friend_request': return 'user-plus';
|
|
case 'health_reminder': return 'first-aid';
|
|
case 'milestone': return 'star';
|
|
case 'poison_alert': return 'warning';
|
|
default: return 'bell';
|
|
}
|
|
}
|
|
|
|
/** Parst n.data sicher und flacht verschachteltes {data:{…}} auf */
|
|
function _parseData(raw) {
|
|
if (!raw) return {};
|
|
let obj = (typeof raw === 'object') ? raw : (() => {
|
|
try { return JSON.parse(raw); } catch (_) { return {}; }
|
|
})();
|
|
// push.py speichert payload-Felder direkt: {data: {conversation_id:…}, tag:…}
|
|
// Das innere 'data' nach oben holen damit d.conversation_id etc. direkt verfügbar sind
|
|
if (obj.data && typeof obj.data === 'object') {
|
|
obj = { ...obj, ...obj.data };
|
|
}
|
|
return obj;
|
|
}
|
|
|
|
/**
|
|
* Gibt { page, label, go } zurück.
|
|
* go() führt die Navigation inklusive kontextspezifischer Aktion aus.
|
|
*/
|
|
function _navTarget(n) {
|
|
const d = _parseData(n.data);
|
|
|
|
switch (n.type) {
|
|
case 'chat_message':
|
|
return {
|
|
page: 'chat', label: 'Chat',
|
|
go: d.conversation_id
|
|
? () => App.callModule('chat', '_openThread', d.conversation_id)
|
|
: () => App.navigate('chat'),
|
|
};
|
|
|
|
case 'friend_request':
|
|
return {
|
|
page: 'friends', label: 'Freunde',
|
|
go: () => App.navigate('friends'),
|
|
};
|
|
|
|
case 'walk_invite':
|
|
return {
|
|
page: 'walks', label: 'Gassi-Treffen',
|
|
go: () => App.navigate('walks'),
|
|
};
|
|
|
|
case 'poison_alert':
|
|
return {
|
|
page: 'poison', label: 'Giftköder-Alarm',
|
|
go: () => App.navigate('poison'),
|
|
};
|
|
|
|
case 'health_reminder':
|
|
return {
|
|
page: 'health', label: 'Gesundheit',
|
|
go: () => App.navigate('health'),
|
|
};
|
|
|
|
case 'milestone':
|
|
return {
|
|
page: 'diary', label: 'Tagebuch',
|
|
go: () => App.navigate('diary'),
|
|
};
|
|
|
|
default: {
|
|
const page = d.page || '';
|
|
return {
|
|
page,
|
|
label: page,
|
|
go: page ? () => App.navigate(page) : null,
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
/** Rendert eine einzelne Notification als HTML-String */
|
|
function _renderItem(n) {
|
|
const unread = !n.read_at;
|
|
const iconName = unread ? _iconForType(n.type) : 'bell';
|
|
const cls = ['notif-item', unread ? 'notif-unread' : ''].filter(Boolean).join(' ');
|
|
const nav = _navTarget(n);
|
|
// Nur serialisierbare Felder speichern (go ist eine Funktion, nicht serialisierbar)
|
|
const navData = JSON.stringify({ page: nav.page, label: nav.label, type: n.type,
|
|
data: _parseData(n.data) });
|
|
|
|
return `
|
|
<button class="${cls}" data-id="${n.id}" data-nav="${UI.escape(navData)}"
|
|
type="button" style="width:100%;text-align:left;border:none;font:inherit;background:none">
|
|
<span class="notif-icon">${UI.icon(iconName)}</span>
|
|
<div class="notif-content">
|
|
<div class="notif-title">${UI.escape(n.title)}</div>
|
|
${n.body ? `<div class="notif-body">${UI.escape(n.body)}</div>` : ''}
|
|
<div class="notif-time">${_relTime(n.created_at)}</div>
|
|
</div>
|
|
<span class="notif-del-btn" data-del="${n.id}" title="Löschen"
|
|
aria-label="Benachrichtigung löschen" role="button">
|
|
${UI.icon('x')}
|
|
</span>
|
|
</button>`;
|
|
}
|
|
|
|
/** Führt die kontextspezifische Navigation aus */
|
|
function _execNav(nav) {
|
|
switch (nav.type) {
|
|
case 'chat_message':
|
|
nav.data?.conversation_id
|
|
? App.callModule('chat', '_openThread', nav.data.conversation_id)
|
|
: App.navigate('chat');
|
|
break;
|
|
case 'friend_request': App.navigate('friends'); break;
|
|
case 'walk_invite': App.navigate('walks'); break;
|
|
case 'poison_alert': App.navigate('poison'); break;
|
|
case 'health_reminder':App.navigate('health'); break;
|
|
case 'milestone': App.navigate('diary'); break;
|
|
default:
|
|
if (nav.page) App.navigate(nav.page);
|
|
}
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// init
|
|
// ----------------------------------------------------------
|
|
async function init(container, appState, params) {
|
|
container.innerHTML = `
|
|
<div class="page-header">
|
|
<h2>${UI.icon('bell')} Benachrichtigungen</h2>
|
|
<button class="btn btn-sm btn-ghost" id="notif-read-all">Alle gelesen</button>
|
|
</div>
|
|
<div id="notif-list" class="notif-list">
|
|
<div class="loading-spinner"></div>
|
|
</div>`;
|
|
|
|
_addStyles();
|
|
|
|
// Daten laden
|
|
let items = [];
|
|
try {
|
|
items = await API.notifications.list();
|
|
} catch (e) {
|
|
document.getElementById('notif-list').innerHTML =
|
|
`<div class="empty-state">${UI.icon('warning')} Fehler beim Laden.</div>`;
|
|
return;
|
|
}
|
|
|
|
_render(items);
|
|
|
|
// "Alle gelesen"-Button
|
|
document.getElementById('notif-read-all')?.addEventListener('click', async () => {
|
|
try {
|
|
await API.notifications.readAll();
|
|
// Alle als gelesen markieren (lokal)
|
|
items = items.map(n => ({ ...n, read_at: new Date().toISOString() }));
|
|
_render(items);
|
|
} catch (e) {
|
|
UI.toast?.('Fehler beim Markieren.', 'error');
|
|
}
|
|
});
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// Render-Helfer
|
|
// ----------------------------------------------------------
|
|
function _render(items) {
|
|
const list = document.getElementById('notif-list');
|
|
if (!list) return;
|
|
|
|
if (!items || items.length === 0) {
|
|
list.innerHTML = `
|
|
<div class="empty-state">
|
|
${UI.icon('bell-slash')}
|
|
<p>Keine Benachrichtigungen</p>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
list.innerHTML = items.map(_renderItem).join('');
|
|
|
|
// Klick auf Notification: als gelesen + ggf. navigieren
|
|
list.querySelectorAll('.notif-item').forEach(el => {
|
|
el.addEventListener('click', async (e) => {
|
|
// Löschen-Button nicht doppelt behandeln
|
|
if (e.target.closest('.notif-del-btn')) return;
|
|
|
|
const id = parseInt(el.dataset.id, 10);
|
|
const nav = JSON.parse(el.dataset.nav || '{}');
|
|
|
|
// Sofortiges visuelles Feedback
|
|
el.classList.remove('notif-unread');
|
|
el.style.opacity = '0.6';
|
|
|
|
// Als gelesen markieren (fire & forget)
|
|
API.notifications.read(id).catch(() => {});
|
|
|
|
if (nav.page) {
|
|
if (nav.label) UI.toast?.(`Öffne ${nav.label}…`, 'info');
|
|
setTimeout(() => _execNav(nav), 150);
|
|
} else {
|
|
setTimeout(() => { el.style.opacity = ''; }, 800);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Löschen-Buttons
|
|
list.querySelectorAll('.notif-del-btn').forEach(btn => {
|
|
btn.addEventListener('click', async (e) => {
|
|
e.stopPropagation();
|
|
const id = parseInt(btn.dataset.del, 10);
|
|
const item = btn.closest('button.notif-item') || btn.closest('.notif-item');
|
|
|
|
// Sofortiges visuelles Feedback
|
|
if (item) {
|
|
item.style.transition = 'opacity 0.2s, transform 0.2s';
|
|
item.style.opacity = '0';
|
|
item.style.transform = 'translateX(20px)';
|
|
}
|
|
|
|
try {
|
|
await API.notifications.delete(id);
|
|
item?.remove();
|
|
if (!list.querySelector('.notif-item')) {
|
|
list.innerHTML = `
|
|
<div class="empty-state">
|
|
${UI.icon('bell-slash')}
|
|
<p>Keine Benachrichtigungen</p>
|
|
</div>`;
|
|
}
|
|
} catch (_) {
|
|
// Rückgängig machen falls Fehler
|
|
if (item) {
|
|
item.style.opacity = '';
|
|
item.style.transform = '';
|
|
}
|
|
UI.toast?.('Löschen fehlgeschlagen.', 'error');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// ----------------------------------------------------------
|
|
// Inline-Styles (einmalig einfügen)
|
|
// ----------------------------------------------------------
|
|
function _addStyles() {
|
|
if (document.getElementById('notif-styles')) return;
|
|
const style = document.createElement('style');
|
|
style.id = 'notif-styles';
|
|
style.textContent = `
|
|
.notif-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
padding: var(--space-4) 0;
|
|
}
|
|
.notif-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
background: var(--c-surface);
|
|
border: 1px solid var(--c-border-light);
|
|
cursor: pointer;
|
|
transition: background var(--transition-fast);
|
|
}
|
|
.notif-item:hover {
|
|
background: var(--c-surface-2);
|
|
}
|
|
.notif-item.notif-unread {
|
|
border-left: 3px solid var(--c-primary);
|
|
background: var(--c-primary-subtle);
|
|
}
|
|
.notif-item.notif-unread .notif-title {
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.notif-icon {
|
|
flex-shrink: 0;
|
|
color: var(--c-primary);
|
|
margin-top: 2px;
|
|
}
|
|
.notif-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.notif-title {
|
|
font-size: var(--text-sm);
|
|
color: var(--c-text);
|
|
line-height: var(--leading-snug);
|
|
}
|
|
.notif-body {
|
|
font-size: var(--text-xs);
|
|
color: var(--c-text-secondary);
|
|
margin-top: var(--space-1);
|
|
line-height: var(--leading-relaxed);
|
|
}
|
|
.notif-time {
|
|
font-size: var(--text-xs);
|
|
color: var(--c-text-muted);
|
|
margin-top: var(--space-1);
|
|
}
|
|
.notif-del-btn {
|
|
flex-shrink: 0;
|
|
color: var(--c-text-muted);
|
|
opacity: 0.45;
|
|
transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
|
|
min-width: 44px;
|
|
min-height: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
.notif-item:hover .notif-del-btn,
|
|
.notif-del-btn:focus-visible {
|
|
opacity: 1;
|
|
color: var(--c-danger, #e53e3e);
|
|
}
|
|
.notif-del-btn:active {
|
|
background: var(--c-danger-subtle, rgba(229,62,62,.12));
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
return { init };
|
|
})();
|