Versie 0.2.0

client/pages/actions.js

@@ -0,0 +1,84 @@
+// Generated, do not edit. sha256:0bce2d8ce656c1145d2eaf8627da39c4fe16f1583c0379c2a0fa2919e295eae7
+import { t } from '../i18n/index.js';
+import { renderAiProposals } from '../actions/ai-proposals-widget.js';
+import { renderReconcile } from '../actions/reconcile-widget.js';
+import { renderInterestWidget } from '../actions/interest-widget.js';
+import { renderValuationWidget } from '../actions/valuation-widget.js';
+import { renderReservationsWidget } from '../actions/reservations-widget.js';
+import { fmtInt } from '../ui/format.js';
+import { esc } from '../ui/escape.js';
+import { CHECK } from '../ui/icons.js';
+
+export const title = () => t('actions.title');
+export const headerInColumn = true;
+
+const BLOKKEN = [
+  { id: 'act-ai', label: () => t('aiProposals.title') },
+  { id: 'act-reconcile', label: () => t('home.reconcile') },
+  { id: 'act-interest', label: () => t('actions.interestTitle') },
+  { id: 'act-valuation', label: () => t('actions.valuationTitle') },
+  { id: 'act-reservation', label: () => t('reservations.title') },
+];
+
+export async function render(el) {
+  el.innerHTML = `
+    <div class="page-layout">
+      <aside class="page-aside act-aside">
+        <div class="act-block">
+          <div class="t-label">${t('actions.openTitle')}</div>
+          <div class="t-num-lg" data-act="total">…</div>
+          <div class="t-muted-cell" data-act="totalSub"></div>
+        </div>
+        <nav class="act-jump" data-jump></nav>
+      </aside>
+      <div class="page-body">
+        <div class="page-header"><h1 class="page-title">${esc(title())}</h1></div>
+        <div id="act-ai"></div>
+        <div id="act-reconcile" class="mt-lg"></div>
+        <div id="act-interest" class="mt-lg"></div>
+        <div id="act-valuation" class="mt-lg"></div>
+        <div id="act-reservation" class="mt-lg"></div>
+      </div>
+    </div>`;
+
+  const refresh = () => render(el);
+  const aantal = {};
+  for (const [id, teken] of [['act-ai', renderAiProposals], ['act-reconcile', renderReconcile],
+    ['act-interest', renderInterestWidget], ['act-valuation', renderValuationWidget],
+    ['act-reservation', renderReservationsWidget]]) {
+    const host = el.querySelector('#' + id);
+    if (!host) return;
+    aantal[id] = await teken(host, refresh);
+  }
+
+  vulKolom(el, aantal);
+}
+
+function vulKolom(el, aantal) {
+  const zichtbaar = BLOKKEN.filter(b => aantal[b.id] != null);
+  const totaal = zichtbaar.reduce((som, b) => som + aantal[b.id], 0);
+
+  const zet = (sleutel, html) => {
+    const e = el.querySelector(`[data-act="${sleutel}"]`);
+    if (e) e.innerHTML = html;
+  };
+  zet('total', totaal ? fmtInt(totaal) : CHECK);
+  zet('totalSub', totaal
+    ? (totaal === 1 ? t('actions.openOne') : t('actions.openMany'))
+    : t('actions.openNone'));
+
+  const nav = el.querySelector('[data-jump]');
+  if (!nav) return;
+  nav.innerHTML = zichtbaar.map(b => `
+    <button type="button" class="act-jump-item${aantal[b.id] ? '' : ' is-done'}" data-to="${b.id}">
+      <span class="act-jump-label">${esc(b.label())}</span>
+      <span class="act-jump-count">${aantal[b.id] ? fmtInt(aantal[b.id]) : CHECK}</span>
+    </button>`).join('');
+
+  nav.onclick = e => {
+    const knop = e.target.closest('[data-to]');
+    if (!knop) return;
+    const doel = el.querySelector('#' + knop.dataset.to);
+    if (doel) doel.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  };
+}