Versie 0.2.0

client/pages/events.js

@@ -0,0 +1,59 @@
+// Generated, do not edit. sha256:8af265c01fc0e6317d5563eb76a9a712b80e1831a203564f5447704bbed5c878
+import { t } from '../i18n/index.js';
+import { getPref, setPref } from '../data/preferences.js';
+import { EVENTS_PAGE, targetHash } from '../../shared/config.js';
+import { create as createTabs } from '../ui/tabs.js';
+import { attentionForRoute, attentionDotHtml } from '../ui/attention.js';
+import { clearPageHint } from '../ui/page-hint.js';
+import * as accounts from './event-accounts.js';
+import * as valuations from './valuations.js';
+import * as trades from './trades.js';
+import * as transfers from './transfers.js';
+import * as interest from './interest.js';
+import * as reservations from './reservations.js';
+
+export const title = () => t('nav.events');
+
+const ROUTE = EVENTS_PAGE.ROUTE;
+const TABS = EVENTS_PAGE.TABS;
+const TAB_IDS = Object.values(TABS);
+const PREF_SCOPE = ROUTE;
+
+const RENDER = {
+  [TABS.ACCOUNTS]:   (panel) => accounts.render(panel),
+  [TABS.VALUATIONS]: (panel) => valuations.render(panel),
+  [TABS.TRADES]:     (panel) => trades.render(panel),
+  [TABS.TRANSFERS]:  (panel) => transfers.render(panel),
+  [TABS.INTEREST]:   (panel) => interest.render(panel),
+  [TABS.RESERVATIONS]: (panel) => reservations.render(panel),
+};
+
+const parseHash = () => (location.hash || '').replace(/^#\/?/, '').split('/')[1] || null;
+const hashFor = tab => targetHash({ route: ROUTE, tab });
+
+function tabDot(tabId) {
+  return attentionDotHtml(attentionForRoute(ROUTE).filter(a => (a.tab || '').split('/')[0] === tabId));
+}
+
+export async function render(el) {
+  let tab = parseHash();
+  if (!TAB_IDS.includes(tab)) {
+    const att = attentionForRoute(ROUTE).find(a => TAB_IDS.includes((a.tab || '').split('/')[0]));
+    tab = att ? att.tab.split('/')[0] : await getPref(PREF_SCOPE, 'tab', TABS.ACCOUNTS);
+    if (!TAB_IDS.includes(tab)) tab = TABS.ACCOUNTS;
+    history.replaceState(null, '', hashFor(tab));
+  }
+
+  el.innerHTML = '<div data-tabs></div>';
+  createTabs(el.querySelector('[data-tabs]'), {
+    size: 'lg',
+    active: tab,
+    items: TAB_IDS.map(id => ({ id, label: t(`nav.${id}`), dot: () => tabDot(id) })),
+    render: (id, panel) => { clearPageHint(); return RENDER[id](panel); },
+    onChange: (id) => {
+      setPref(PREF_SCOPE, 'tab', id).catch(() => { });
+      if (location.hash !== hashFor(id)) history.pushState(null, '', hashFor(id));
+    },
+    syncOn: ['attention-changed'],
+  });
+}