62 lines
2.8 KiB
JavaScript
62 lines
2.8 KiB
JavaScript
|
// Generated, do not edit. sha256:ce839cfe04c94b47ff548f20a8992356bcbc456e5e878e1829f94a38a663c5f1
|
||
|
|
import { currentNotifications, notificationDetail, dismissNotification } from '../data/notifications.js';
|
||
|
|
import { localDateNl } from '../../shared/time.js';
|
||
|
|
import { t } from '../i18n/index.js';
|
||
|
|
import { TARGETS, NOTIFICATION_TARGETS, NOTIFICATION_PRIORITY, targetHash } from '../../shared/config.js';
|
||
|
|
import { CHECK, CHEVRON_RIGHT } from '../ui/icons.js';
|
||
|
|
import { esc } from '../ui/escape.js';
|
||
|
|
import { taskCardHtml, nothingPendingHtml } from '../ui/task-card.js';
|
||
|
|
|
||
|
|
const targetFor = kind => targetHash(NOTIFICATION_TARGETS[kind] || TARGETS.ACTIONS);
|
||
|
|
|
||
|
|
const rank = kind => NOTIFICATION_PRIORITY.indexOf(kind);
|
||
|
|
|
||
|
|
async function detailFor(n) {
|
||
|
|
if (n.kind === 'schedule_ended') {
|
||
|
|
const d = await notificationDetail(n);
|
||
|
|
if (!d) return '';
|
||
|
|
return `${d.account} · ${d.asset}${d.extra ? ` +${d.extra}` : ''}`;
|
||
|
|
}
|
||
|
|
return t('notify.hint.' + n.kind);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function rowHtml(n) {
|
||
|
|
const target = targetFor(n.kind);
|
||
|
|
const detail = await detailFor(n);
|
||
|
|
const date = localDateNl(n.createdAt);
|
||
|
|
const info = n.kind === 'schedule_ended' ? ' is-info' : '';
|
||
|
|
return `<div class="notify-row${info}" data-target="${target}" data-kind="${n.kind}" tabindex="0">
|
||
|
|
<button type="button" class="notify-count" data-dismiss="${n.id}" title="${t('notify.dismiss')}" aria-label="${t('notify.dismiss')}">`
|
||
|
|
+ `<span class="notify-n">${n.count}</span><span class="notify-check" aria-hidden="true">${CHECK}</span></button>
|
||
|
|
<div class="notify-kind">${t('notify.' + n.kind)}</div>
|
||
|
|
${detail ? `<div class="notify-detail" title="${esc(detail)}">${esc(detail)}</div>` : ''}
|
||
|
|
<div class="notify-side">
|
||
|
|
<span class="notify-date">${date || ''}</span>
|
||
|
|
<span class="notify-go" aria-hidden="true">${CHEVRON_RIGHT}</span>
|
||
|
|
</div>
|
||
|
|
</div>`;
|
||
|
|
}
|
||
|
|
|
||
|
|
export async function renderNotifications(host, onChanged) {
|
||
|
|
const rerender = () => renderNotifications(host, onChanged);
|
||
|
|
const items = await currentNotifications();
|
||
|
|
const sorted = [...items].sort((a, b) => rank(a.kind) - rank(b.kind));
|
||
|
|
|
||
|
|
const body = sorted.length === 0
|
||
|
|
? nothingPendingHtml()
|
||
|
|
: `<div class="notify-list">${(await Promise.all(sorted.map(rowHtml))).join('')}</div>`;
|
||
|
|
|
||
|
|
host.innerHTML = taskCardHtml({ title: t('notify.title'), body });
|
||
|
|
|
||
|
|
host.querySelectorAll('[data-dismiss]').forEach(b => b.onclick = async e => {
|
||
|
|
e.stopPropagation();
|
||
|
|
await dismissNotification(Number(b.dataset.dismiss));
|
||
|
|
(onChanged || rerender)();
|
||
|
|
});
|
||
|
|
|
||
|
|
host.querySelectorAll('.notify-row').forEach(row => {
|
||
|
|
const go = () => { location.hash = row.dataset.target; };
|
||
|
|
row.onclick = e => { if (e.target.closest('[data-dismiss]') || e.target.closest('a')) return; go(); };
|
||
|
|
row.onkeydown = e => { if (e.key === 'Enter' && e.target === row) go(); };
|
||
|
|
});
|
||
|
|
}
|