Versie 0.2.0

client/ui/unit-convert.js

@@ -0,0 +1,63 @@
+// Generated, do not edit. sha256:9537fc0b4eaa35092768e80eee626c20b2e7da8195e3aa3271037126f3d4cfa3
+import { t } from '../i18n/index.js';
+import { mainToSub, subToMain, hasSubunit, isMetal } from './format.js';
+import { openPopover, closePopover } from './popover.js';
+import { CONFIG } from '../../shared/config.js';
+import { esc } from './escape.js';
+
+export function openUnitConvert(anchorEl, { asset, value, onApply }) {
+  if (!hasSubunit(asset)) return;
+  const metal = isMetal(asset);
+  const dec = asset.decimals || 0;
+  const subField = asset.displayUnit === 'subunit';
+
+  const U = CONFIG.METALS.UNITS;
+  const round6 = x => Number(Number(x).toFixed(6));
+  const m2s = metal ? (m => round6(Number(m) * U[asset.unit] / U[asset.subunit])) : (m => mainToSub(m, dec));
+  const s2m = metal ? (s => round6(Number(s) * U[asset.subunit] / U[asset.unit])) : (s => subToMain(s, dec));
+
+  const seed = parseFloat(value);
+  let mainVal = '', subVal = '';
+  if (Number.isFinite(seed)) {
+    if (subField) { subVal = metal ? seed : Math.round(seed); mainVal = s2m(subVal); }
+    else { mainVal = seed; subVal = m2s(mainVal); }
+  }
+
+  const mainLabel = esc(asset.unit || t('convert.main'));
+  const subLabel = esc(asset.subunit || t('convert.sub'));
+  const subStep = metal ? 'any' : '1';
+
+  const { el, position } = openPopover(anchorEl, {
+    className: 'conv-pop',
+    onClose: () => { if (document.activeElement === document.body) anchorEl.focus(); },
+  });
+  el.innerHTML = `
+    <div class="t-label conv-head">${esc(t('convert.title'))}</div>
+    <div class="conv-row">
+      <label class="conv-label">${mainLabel}</label>
+      <input class="input" data-conv-main type="number" step="any" min="0" value="${mainVal}">
+    </div>
+    <div class="conv-row">
+      <label class="conv-label">${subLabel}</label>
+      <input class="input" data-conv-sub type="number" step="${subStep}" min="0" value="${subVal}">
+    </div>
+    <button class="btn btn-primary btn-sm conv-apply" data-conv-apply>${esc(t('convert.apply'))}</button>`;
+  position();
+
+  const mainEl = el.querySelector('[data-conv-main]');
+  const subEl = el.querySelector('[data-conv-sub]');
+
+  mainEl.oninput = () => { const m = parseFloat(mainEl.value); subEl.value = Number.isFinite(m) ? m2s(m) : ''; };
+  subEl.oninput = () => { const s = parseFloat(subEl.value); mainEl.value = Number.isFinite(s) ? s2m(s) : ''; };
+
+  const apply = () => {
+    const out = subField ? subEl.value : mainEl.value;
+    if (out === '') return;
+    onApply(String(out));
+    closePopover();
+  };
+  el.querySelector('[data-conv-apply]').onclick = apply;
+  el.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); apply(); } });
+
+  (subField ? mainEl : subEl).focus();
+}