Versie 0.2.0

client/onboarding/setup.js

@@ -0,0 +1,70 @@
+// Generated, do not edit. sha256:e845407dddf225ff542fbca232d3d1694ac7796e6550456ebc528cb13c3d79b8
+import { t } from '../i18n/index.js';
+import { esc } from '../ui/escape.js';
+import * as dialog from '../ui/dialog.js';
+import { currencyName } from '../ui/format.js';
+import { splashMarkHtml } from '../ui/splash.js';
+import { completeSetup, setupStatus } from '../data/onboarding.js';
+import { serverFoutTekst } from '../data/_rpc.js';
+import { appSetting, baseCurrency } from '../app-settings.js';
+
+const ASSETS = ['BTC'];
+const CURRENCIES = ['EUR', 'USD'];
+const ACCOUNT_KINDS = ['wallet', 'exchange', 'bank'];
+const WIDGETS = ['standing', 'spot'];
+
+const tile = ({ attr, key, value, on, name, sub = '' }) => `
+  <button type="button" class="setup-choice${on ? ' is-on' : ''}" ${attr}="${key}" data-value="${esc(value)}" aria-pressed="${on}">
+    <span class="setup-choice-name">${esc(name)}</span>${sub ? `<span class="setup-choice-sub">${esc(sub)}</span>` : ''}
+  </button>`;
+const has = (s, key, v) => Array.isArray(s[key]) && s[key].includes(v);
+const toggles = (s, key, values, label) => `<div class="setup-choices">${values.map(v => tile({
+  attr: 'data-step-toggle', key, value: v, on: has(s, key, v), name: label(v) })).join('')}</div>`;
+
+const steps = status => [
+  { title: t('setup.currencyTitle'), skip: () => !status.currencyOpen,
+    html: s => `<div class="setup-choices">${CURRENCIES.map(c => tile({
+      attr: 'data-step-set', key: 'currency', value: c, on: s.currency === c, name: currencyName(c), sub: c })).join('')}</div>` },
+  { title: t('setup.accountsTitle'), html: s => toggles(s, 'accounts', ACCOUNT_KINDS, k => t(`setup.account_${k}`)) },
+  { title: t('setup.dashboardTitle'), html: s => toggles(s, 'widgets', WIDGETS, w => t(`setup.widget_${w}`)) },
+];
+
+async function chooseCurrency(code) {
+  const r = await fetch('/api/setup/currency', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ baseCurrency: code }),
+  });
+  const uit = await r.json().catch(() => null);
+  if (!r.ok) throw new Error(serverFoutTekst(uit) || `HTTP ${r.status}`);
+  return uit.changed;
+}
+
+export async function openSetup({ rerun = false } = {}) {
+  try {
+    const status = await setupStatus();
+    const state = await dialog.stepper({
+      steps: steps(status), hero: splashMarkHtml(), finishLabel: t('setup.finish'),
+      state: { currency: baseCurrency(), accounts: rerun ? [] : ['bank'], widgets: [...WIDGETS] },
+    });
+    if (!state && rerun) return;
+    const reload = !!state && status.currencyOpen && await chooseCurrency(state.currency);
+    await completeSetup(state ? {
+      assets: ASSETS,
+      persona: rerun ? appSetting('persona') : 'broad',
+      accounts: state.accounts.map(k => ({ kind: k, name: t(`setup.account_${k}`) })),
+      widgets: state.widgets,
+    } : {});
+    if (reload) location.reload();
+    else document.dispatchEvent(new CustomEvent('settings-changed'));
+  } catch (err) {
+    console.error('[setup]', err);
+    dialog.alert({ title: t('dialog.error'), message: err.message });
+  }
+}
+
+export async function maybeStartSetup() {
+  try {
+    if ((await setupStatus()).needed) await openSetup();
+  } catch (err) {
+    console.error('[setup]', err);
+  }
+}