Versie 0.2.0

client/actions/reservations-widget.js

@@ -0,0 +1,28 @@
+// Generated, do not edit. sha256:d20de9a177bb432b6c8f10236c35149637d208ed9ad948a3457ff3eea687978a
+import { listDueReservations } from '../data/reservations.js';
+import { t } from '../i18n/index.js';
+import { fmtUnit, val } from '../ui/format.js';
+import { taskCardHtml, nothingPendingHtml } from '../ui/task-card.js';
+import { esc } from '../ui/escape.js';
+import { localDateNl } from '../../shared/time.js';
+import { bookReservationFlow, reservationAccount, reservationDir, reservationMeta, settleReservationFlow } from './reservation-book.js';
+
+export async function renderReservationsWidget(host, refresh) {
+  const due = await listDueReservations();
+  const body = due.length === 0
+    ? nothingPendingHtml()
+    : due.map((r, i) => `<div class="flex gap-md" style="align-items:center;flex-wrap:wrap;margin-top:0.4rem">`
+        + `<span class="t-body-sm">${esc(reservationAccount(r).name)} · ${esc(localDateNl(r.occurredAt))} · `
+        + `${t(reservationDir(r) === 'out' ? 'reservations.dirOut' : 'reservations.dirIn')} `
+        + `${val(fmtUnit(r.amount, reservationMeta(r)))}${r.note ? ` · ${esc(r.note)}` : ''}</span>`
+        + `<button class="btn btn-primary btn-sm" data-res-book="${i}">${t('reservations.book')}</button>`
+        + `<button class="btn btn-ghost btn-sm" data-res-settle="${i}">${t('reservations.settle')}</button></div>`).join('');
+  host.innerHTML = taskCardHtml({ title: t('reservations.title'), body });
+  host.querySelectorAll('[data-res-book]').forEach(b => b.onclick = async () => {
+    if (await bookReservationFlow(due[Number(b.dataset.resBook)])) refresh();
+  });
+  host.querySelectorAll('[data-res-settle]').forEach(b => b.onclick = async () => {
+    if (await settleReservationFlow(due[Number(b.dataset.resSettle)])) refresh();
+  });
+  return due.length;
+}