samantha/personal-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

movie list and portifolie died link

Browse Source
This commit is contained in:
samantha42
2026-05-19 22:11:24 +02:00
parent f13eac36fc
commit 4569f35d11
17 changed files with 617 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/portfolio.html
+406 -266
View File
@@ -4,8 +4,147 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Portfolio — Samantha Friis</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;700;800&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="styles.css" />
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Fraunces:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap" rel="stylesheet"/>
<style>
:root {
--bg: #0c0c0e;
--surface: #111114;
--surface2:#17171b;
--border: #232329;
--border2: #2e2e36;
--text: #e8e6e0;
--muted: #5a5a68;
--muted2: #3d3d4a;
--accent: #c8a96e;
--up: #5aad85;
--down: #c96b6b;
--mono: 'Space Mono', monospace;
--serif: 'Fraunces', Georgia, serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
background: var(--bg);
color: var(--text);
font-family: var(--mono);
font-size: 0.8rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.container { max-width: 1080px; margin: 0 auto; padding: 3rem 2rem 5rem; }
/* ── Header ── */
header { margin-bottom: 3rem; border-bottom: 1px solid var(--border); padding-bottom: 2rem; }
.back { display: inline-block; color: var(--muted); text-decoration: none; font-size: 0.72rem; letter-spacing: 0.05em; margin-bottom: 1.8rem; transition: color 0.15s; }
.back:hover { color: var(--accent); }
.tag { font-size: 0.68rem; color: var(--accent); letter-spacing: 0.12em; margin-bottom: 0.6rem; }
h1 { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 300; line-height: 1.1; color: var(--text); margin-bottom: 0.75rem; }
h1 span { font-style: italic; color: var(--accent); }
.header-sub { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.08em; }
/* ── Status bar ── */
.status-bar {
display: flex; align-items: center; gap: 0.6rem;
font-size: 0.65rem; color: var(--muted);
margin-bottom: 2rem; padding: 0.6rem 1rem;
background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--muted2); }
.status-dot.ok { background: var(--up); }
.status-dot.loading { background: var(--accent); animation: blink 1s ease-in-out infinite; }
.status-dot.error { background: var(--down); }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.2} }
.status-sep { color: var(--muted2); margin: 0 0.25rem; }
.status-spacer { flex: 1; }
.refresh-btn {
background: none; border: 1px solid var(--border2); border-radius: 3px;
color: var(--muted); font-family: var(--mono); font-size: 0.62rem;
padding: 2px 9px; cursor: pointer; letter-spacing: 0.05em; transition: all 0.15s;
}
.refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
/* ── Summary cards ── */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-bottom: 2.5rem; }
.card { background: var(--surface); padding: 1.1rem 1.25rem; }
.card-label { font-size: 0.62rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.45rem; }
.card-value { font-family: var(--serif); font-size: 1.65rem; font-weight: 300; color: var(--text); }
.card-value.dim { color: var(--muted2); font-size: 1rem; }
/* ── Section label ── */
.section-label { font-size: 0.62rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.75rem; }
.section-label span { color: var(--accent); }
/* ── Tables ── */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 2.5rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
thead tr { border-bottom: 1px solid var(--border2); background: var(--surface); }
th { color: var(--muted); font-weight: 400; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.75rem 1rem; text-align: left; white-space: nowrap; }
td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: rgba(200,169,110,0.03); }
.ticker { font-weight: 700; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text); margin-right: 6px; }
.currency-badge { display: inline-block; font-size: 0.58rem; padding: 1px 5px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 3px; color: var(--muted); letter-spacing: 0.06em; vertical-align: middle; }
.weight-cell { min-width: 100px; }
.weight-bar-track { height: 2px; background: var(--border2); border-radius: 1px; margin-top: 5px; }
.weight-bar-fill { height: 2px; background: var(--accent); border-radius: 1px; }
.state-row td { color: var(--muted2); font-size: 0.7rem; text-align: center; padding: 2rem; border-bottom: none; }
/* ── Trades accordion ── */
.trades-section { margin-top: 0; }
.trades-toggle {
display: flex; align-items: center; justify-content: space-between;
cursor: pointer; background: none; border: none;
border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
width: 100%; padding: 0.85rem 0; color: inherit;
font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
text-align: left; user-select: none; text-transform: uppercase;
}
.trades-toggle:hover .toggle-label { color: var(--accent); }
.toggle-label { color: var(--muted); transition: color 0.15s; }
.toggle-label span { color: var(--accent); }
.toggle-icon { color: var(--muted2); font-size: 0.9rem; transition: transform 0.25s ease; }
.trades-toggle[aria-expanded="true"] .toggle-icon { transform: rotate(180deg); }
.trades-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.trades-body.open { grid-template-rows: 1fr; }
.trades-inner { overflow: hidden; }
.trades-filter { display: flex; gap: 0.4rem; flex-wrap: wrap; padding: 1rem 0 0.75rem; }
.filter-btn {
background: none; border: 1px solid var(--border2); border-radius: 3px;
color: var(--muted); font-family: var(--mono); font-size: 0.62rem;
letter-spacing: 0.08em; padding: 3px 10px; cursor: pointer;
transition: all 0.15s; text-transform: uppercase;
}
.filter-btn:hover, .filter-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(200,169,110,0.06); }
.trades-count { font-size: 0.62rem; color: var(--muted2); letter-spacing: 0.06em; padding-bottom: 0.5rem; }
.trades-table-wrap { overflow-x: auto; padding-bottom: 1.5rem; border: 1px solid var(--border); border-radius: 6px; }
.trades-table { width: 100%; border-collapse: collapse; font-size: 0.73rem; }
.trades-table thead tr { border-bottom: 1px solid var(--border2); background: var(--surface); }
.trades-table th { color: var(--muted); font-weight: 400; letter-spacing: 0.1em; font-size: 0.6rem; text-transform: uppercase; padding: 0.6rem 0.9rem; text-align: left; white-space: nowrap; }
.trades-table td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); white-space: nowrap; color: var(--text); }
.trades-table tbody tr:last-child td { border-bottom: none; }
.trades-table tbody tr:hover td { background: rgba(200,169,110,0.03); }
.trades-table tr.hidden-row { display: none; }
.dir-buy { color: var(--up); }
.dir-sell { color: var(--down); }
.trade-code { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 0.6rem; background: var(--surface2); border: 1px solid var(--border2); color: var(--muted); letter-spacing: 0.05em; }
.trade-ticker { font-weight: 700; color: var(--text); letter-spacing: 0.03em; }
/* ── Footer ── */
footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
footer a { color: var(--muted); font-size: 0.68rem; text-decoration: none; letter-spacing: 0.04em; transition: color 0.15s; }
footer a:hover { color: var(--accent); }
.footer-copy { font-size: 0.65rem; color: var(--muted2); letter-spacing: 0.06em; }
</style>
</head>
<body>
<div class="container">
@@ -59,6 +198,40 @@
<button class="refresh-btn" onclick="fetchHoldingPrices()">↺ refresh</button>
</div>
<!-- Backend health status bar -->
<div class="status-bar">
<span class="status-dot loading" id="statusDot"></span>
<span id="statusText">connecting to backend…</span>
<span class="status-sep">·</span>
<span id="statusUptime" style="color:var(--muted)">uptime —</span>
<span class="status-sep">·</span>
<span id="statusDb" style="color:var(--muted)">db —</span>
<span class="status-spacer"></span>
<button class="refresh-btn" onclick="loadAll()">↺ refresh</button>
</div>
<!-- Summary cards — populated from API -->
<div class="cards">
<div class="card">
<p class="card-label">Positions</p>
<p class="card-value dim" id="cardPositions">…</p>
</div>
<div class="card">
<p class="card-label">Total Shares</p>
<p class="card-value dim" id="cardShares">…</p>
</div>
<div class="card">
<p class="card-label">Total Trades</p>
<p class="card-value dim" id="cardTrades">…</p>
</div>
<div class="card">
<p class="card-label">Currencies</p>
<p class="card-value dim" id="cardCurrencies">…</p>
</div>
</div>
<!-- Positions — GET /positions/list -->
<p class="section-label">// <span>positions</span></p>
<div class="table-wrap">
<table>
<thead>
@@ -75,11 +248,35 @@
<tr class="skeleton-row"><td><div class="skeleton-cell" style="width:55%"></div></td><td><div class="skeleton-cell" style="width:40%"></div></td><td><div class="skeleton-cell" style="width:40%"></div></td><td><div class="skeleton-cell" style="width:60%"></div></td><td><div class="skeleton-cell" style="width:50%"></div></td><td><div class="skeleton-cell" style="width:50%"></div></td></tr>
<tr class="skeleton-row"><td><div class="skeleton-cell" style="width:65%"></div></td><td><div class="skeleton-cell" style="width:35%"></div></td><td><div class="skeleton-cell" style="width:45%"></div></td><td><div class="skeleton-cell" style="width:55%"></div></td><td><div class="skeleton-cell" style="width:48%"></div></td><td><div class="skeleton-cell" style="width:52%"></div></td></tr>
<tr class="skeleton-row"><td><div class="skeleton-cell" style="width:60%"></div></td><td><div class="skeleton-cell" style="width:42%"></div></td><td><div class="skeleton-cell" style="width:38%"></div></td><td><div class="skeleton-cell" style="width:58%"></div></td><td><div class="skeleton-cell" style="width:44%"></div></td><td><div class="skeleton-cell" style="width:56%"></div></td></tr>
</tr>
</thead>
<tbody id="positionsBody">
<tr class="state-row"><td colspan="5">loading…</td></tr>
</tbody>
</table>
</div>
<!-- Trades accordion -->
<!-- Companies — GET /company/list -->
<p class="section-label">// <span>companies</span> — tracked universe</p>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Symbol</th>
<th>Currency</th>
<th>Price</th>
<th>Shares Outstanding</th>
<th>Market Cap</th>
</tr>
</thead>
<tbody id="companiesBody">
<tr class="state-row"><td colspan="5">loading…</td></tr>
</tbody>
</table>
</div>
<!-- Trades — GET /trade/list — accordion -->
<div class="trades-section">
<button class="trades-toggle" aria-expanded="false" onclick="toggleTrades(this)">
<span class="toggle-label">// <span>trade history</span> — all executed orders</span>
@@ -97,6 +294,11 @@
<button class="filter-btn" onclick="filterTrades('sell', this)">Sell</button>
</div>
<button class="add-trade-btn" onclick="openAddTrade()">+ add trade</button>
<div class="trades-body" id="tradesAccordion">
<div class="trades-inner">
<div class="trades-filter" id="tradeFilters">
<button class="filter-btn active" onclick="filterTrades('all', this)">All</button>
</div>
<p class="trades-count" id="tradesCount">—</p>
@@ -108,6 +310,7 @@
<th>Symbol</th>
<th>Asset</th>
<th>Ccy</th>
<th>Currency</th>
<th>Date</th>
<th>Dir</th>
<th>Qty</th>
@@ -116,15 +319,19 @@
</thead>
<tbody id="tradesBody_rows">
<tr><td colspan="7" class="trades-empty">open to load trades</td></tr>
<tbody id="tradesBody">
<tr class="state-row"><td colspan="7">expand to load trades</td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<footer>
<a href="mailto:samantha@samantha42.xyz">samantha@samantha42.xyz</a>
<a href="mailto:me@smantha42.xyz">me@smantha42.xyz</a>
<a href="mailto:samantha@friis.dk">samantha@friis.dk</a>
<p class="footer-copy">&copy; 2026 — All rights reserved</p>
</footer>
@@ -189,309 +396,242 @@
<div class="toast" id="toast"></div>
<script>
const API = 'http://127.0.0.1:8080';
const API = 'http://localhost:8080';
// ── Helpers ──────────────────────────────
const PRODUCT_LABELS = ['Stock', 'Opt Call', 'Opt Put', 'Currency', 'Bond'];
function productLabel(n) { return PRODUCT_LABELS[n] ?? '—'; }
const PRODUCT_LABELS = { 0:'Stock', 1:'Call Option', 2:'Put Option', 3:'Currency', 4:'Bond' };
// ── GET /health ──────────────────────────
async function checkHealth() {
const dot = document.getElementById('healthDot');
const text = document.getElementById('healthText');
/* ── helpers ─────────────────────────────────────────────────────────── */
function n(v, dec = 2) {
if (v == null || isNaN(v)) return '—';
return Number(v).toLocaleString('da-DK', { minimumFractionDigits: dec, maximumFractionDigits: dec });
}
function fmtDate(iso) {
return iso ? iso.slice(0, 10) : '—';
}
async function get(path) {
const r = await fetch(API + path);
if (!r.ok) throw new Error(path + ' ' + r.status);
return r.json();
}
/* ── health ─────────────────────────────────────────────────────────── */
async function loadHealth() {
const dot = document.getElementById('statusDot');
const text = document.getElementById('statusText');
try {
const res = await fetch(`${API}/health`);
const data = await res.json();
if (data.status === 'ok') {
dot.className = 'health-dot ok';
text.textContent = `api ok — uptime ${data.uptime ?? ''}`;
} else {
dot.className = 'health-dot error';
text.textContent = 'api degraded';
}
} catch {
dot.className = 'health-dot error';
text.textContent = 'api unreachable';
const h = await get('/health');
const ok = h.status === 'ok';
dot.className = 'status-dot ' + (ok ? 'ok' : 'error');
text.textContent = 'backend ' + h.status;
document.getElementById('statusUptime').textContent = 'up ' + (h.uptime || '—');
const db = h.database || {};
document.getElementById('statusDb').textContent =
'db ' + (db.status || '—') + (db.latency ? ' · ' + db.latency : '');
} catch (e) {
dot.className = 'status-dot error';
text.textContent = 'backend unreachable';
document.getElementById('statusUptime').textContent = e.message;
}
}
// ── GET /positions/list ──────────────────
let positions = [];
/* ── currencies ─────────────────────────────────────────────────────── */
let ccyMap = {}; // id → code
async function loadCurrencies() {
try {
const list = await get('/currency/list');
const arr = Array.isArray(list) ? list : (list ? [list] : []);
arr.forEach(c => {
// field names may vary
const id = c.ID ?? c.id;
const code = c.Code ?? c.code ?? c.CodeName ?? '—';
if (id != null) ccyMap[id] = code;
});
set('cardCurrencies', arr.length);
} catch (_) {
set('cardCurrencies', 'err');
}
}
/* ── positions ───────────────────────────────────────────────────────── */
async function loadPositions() {
try {
const res = await fetch(`${API}/positions/list`);
if (!res.ok) throw new Error('status ' + res.status);
const data = await res.json();
positions = Array.isArray(data) ? data : (data ? [data] : []);
renderPositions();
updateSummaryCards();
} catch (err) {
console.warn('positions/list failed:', err);
document.getElementById('positionsBody').innerHTML =
`<tr><td colspan="6" class="trades-empty">could not load positions — ${err.message}</td></tr>`;
}
}
function renderPositions() {
const tbody = document.getElementById('positionsBody');
if (!positions.length) {
tbody.innerHTML = `<tr><td colspan="6" class="trades-empty">no positions found</td></tr>`;
return;
}
tbody.innerHTML = positions.map(p => {
const sym = p.Symbol ?? '—';
const ccy = p.CurrencyCode ?? '—';
const sh = p.Shares ?? '—';
const cb = typeof p.CostBasis === 'number'
? p.CostBasis.toLocaleString('da-DK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
: '—';
const wt = typeof p.Weight === 'number'
? (p.Weight * 100).toFixed(2) + '%'
: '—';
const pct = typeof p.Weight === 'number' ? Math.min(p.Weight * 100, 100) : 0;
return `<tr data-symbol="${sym}">
<td><span class="ticker">${sym}</span><span class="currency-badge">${ccy}</span></td>
<td>${ccy}</td>
<td>${sh}</td>
<td>${cb}</td>
<td>
<div class="weight-cell">${wt}
<div class="weight-bar-track"><div class="weight-bar-fill" style="width:${pct}%"></div></div>
</div>
</td>
<td><span class="price-val" id="price-${sym}">—</span></td>
</tr>`;
}).join('');
}
function updateSummaryCards() {
const totalWeight = positions.reduce((s, p) => s + (p.Weight ?? 0), 0);
const totalCB = positions.reduce((s, p) => s + (p.CostBasis ?? 0), 0);
const totalShares = positions.reduce((s, p) => s + (p.Shares ?? 0), 0);
document.getElementById('sumWeight').textContent =
(totalWeight * 100).toFixed(2) + '%';
document.getElementById('sumPositions').textContent = positions.length;
document.getElementById('sumCostBasis').textContent =
totalCB.toLocaleString('da-DK', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
document.getElementById('sumShares').textContent = totalShares;
}
// ── Price fetching ────────────────────────
function setStatus(state, text) {
document.getElementById('priceDot').className = 'price-dot ' + state;
document.getElementById('priceStatusText').textContent = text;
}
function flashPrice(sym, newVal, oldVal) {
const el = document.getElementById('price-' + sym);
if (!el) return;
const cls = newVal > oldVal ? 'flash-up' : newVal < oldVal ? 'flash-down' : '';
el.textContent = newVal.toLocaleString('da-DK', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
if (cls) { el.classList.add(cls); setTimeout(() => el.classList.remove(cls), 1200); }
}
async function fetchHoldingPrices() {
if (!positions.length) return;
setStatus('loading', 'fetching prices…');
const prev = {};
positions.forEach(p => {
const el = document.getElementById('price-' + p.Symbol);
if (el) prev[p.Symbol] = parseFloat(el.textContent.replace(/\./g,'').replace(',','.')) || 0;
});
// Try backend proxy
try {
const res = await fetch('/api/prices', {
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ tickers: positions.map(p => p.Symbol) }),
});
if (!res.ok) throw new Error('backend ' + res.status);
const data = await res.json();
const map = {};
data.forEach(d => { map[d.ticker] = d.close; });
positions.forEach(p => { if (map[p.Symbol] != null) flashPrice(p.Symbol, map[p.Symbol], prev[p.Symbol] || map[p.Symbol]); });
setStatus('live', 'updated ' + new Date().toLocaleTimeString('en-GB', { hour:'2-digit', minute:'2-digit' }));
return;
} catch { /* fallback */ }
const raw = await get('/positions/list');
const list = Array.isArray(raw) ? raw : (raw ? [raw] : []);
// Fallback: direct Yahoo Finance
const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);
while (yesterday.getDay() === 0 || yesterday.getDay() === 6) yesterday.setDate(yesterday.getDate() - 1);
const start = Math.floor(yesterday.setHours(0,0,0,0) / 1000);
const end = start + 86400;
let ok = 0, fail = 0;
await Promise.allSettled(positions.map(async p => {
try {
const url = `https://corsproxy.io/?${encodeURIComponent(
`https://query1.finance.yahoo.com/v8/finance/chart/${p.Symbol}?period1=${start}&period2=${end}&interval=1d`
)}`;
const json = await (await fetch(url)).json();
const close = json?.chart?.result?.[0]?.indicators?.quote?.[0]?.close?.[0];
if (close != null) { flashPrice(p.Symbol, close, prev[p.Symbol] || close); ok++; } else fail++;
} catch { fail++; }
}));
const now = new Date().toLocaleTimeString('en-GB', { hour:'2-digit', minute:'2-digit' });
if (fail === 0) setStatus('live', 'updated ' + now + ' (direct)');
else if (ok > 0) setStatus('live', `${ok} ok, ${fail} failed — ${now}`);
else setStatus('error', 'price fetch failed');
if (!list.length) {
tbody.innerHTML = stateRow(5, 'no positions');
set('cardPositions', 0); set('cardShares', 0);
return;
}
const totalCost = list.reduce((s, p) => s + (p.CostBasis || 0), 0);
const totalShares = list.reduce((s, p) => s + (p.Shares || 0), 0);
tbody.innerHTML = list.map(p => {
const ccy = p.CurrencyCode || ccyMap[p.CurrencyID] || '—';
const w = totalCost > 0 ? (p.CostBasis / totalCost * 100) : 0;
return `<tr>
<td><span class="ticker">${p.Symbol || '—'}</span></td>
<td><span class="currency-badge">${ccy}</span></td>
<td>${n(p.Shares, 0)}</td>
<td>${n(p.CostBasis)}</td>
<td><div class="weight-cell">${w.toFixed(1)}%
<div class="weight-bar-track">
<div class="weight-bar-fill" style="width:${Math.min(Math.round(w),100)}%"></div>
</div>
</div></td>
</tr>`;
}).join('');
set('cardPositions', list.length);
set('cardShares', n(totalShares, 0));
} catch (e) {
tbody.innerHTML = stateRow(5, 'load failed: ' + e.message);
}
}
// ── GET /trade/list ───────────────────────
let allTrades = [];
let activeFilter = 'all';
/* ── companies ───────────────────────────────────────────────────────── */
async function loadCompanies() {
const tbody = document.getElementById('companiesBody');
try {
const raw = await get('/company/list');
const list = Array.isArray(raw) ? raw : (raw ? [raw] : []);
if (!list.length) {
tbody.innerHTML = stateRow(5, 'no companies');
return;
}
tbody.innerHTML = list.map(c => {
const ccy = ccyMap[c.CurrencyID] || '—';
const mcap = (c.SharesOutstanding && c.Price)
? n(c.SharesOutstanding * c.Price / 1_000_000, 0) + ' M'
: '—';
return `<tr>
<td><span class="ticker">${c.Symbol || '—'}</span></td>
<td><span class="currency-badge">${ccy}</span></td>
<td>${n(c.Price)}</td>
<td>${n(c.SharesOutstanding, 0)}</td>
<td>${mcap}</td>
</tr>`;
}).join('');
} catch (e) {
tbody.innerHTML = stateRow(5, 'load failed: ' + e.message);
}
}
/* ── trades ──────────────────────────────────────────────────────────── */
let allTrades = [];
let tradesLoaded = false;
async function loadTrades() {
document.getElementById('tradesCount').textContent = 'loading…';
document.getElementById('tradesBody_rows').innerHTML =
`<tr><td colspan="7" class="trades-empty">loading…</td></tr>`;
const tbody = document.getElementById('tradesBody');
const filters = document.getElementById('tradeFilters');
try {
const res = await fetch(`${API}/trade/list`);
if (!res.ok) throw new Error('status ' + res.status);
const data = await res.json();
allTrades = Array.isArray(data) ? data : [];
} catch (err) {
console.warn('trade/list failed:', err);
allTrades = [];
const raw = await get('/trade/list');
allTrades = Array.isArray(raw) ? raw : (raw ? [raw] : []);
tradesLoaded = true;
// Build per-symbol filter buttons
const syms = [...new Set(allTrades.map(t => t.Symbol).filter(Boolean))];
syms.forEach(sym => {
if (!filters.querySelector(`[data-sym="${sym}"]`)) {
const btn = Object.assign(document.createElement('button'), {
className: 'filter-btn',
textContent: sym,
onclick() { filterTrades(sym, this); },
});
btn.dataset.sym = sym;
filters.appendChild(btn);
}
});
set('cardTrades', allTrades.length);
renderTrades('all');
} catch (e) {
tbody.innerHTML = stateRow(7, 'load failed: ' + e.message);
}
renderTrades();
}
function renderTrades() {
const tbody = document.getElementById('tradesBody_rows');
const countEl = document.getElementById('tradesCount');
const filtered = allTrades.filter(t => {
if (activeFilter === 'all') return true;
if (activeFilter === 'stock') return t.Product === 0;
if (activeFilter === 'option') return t.Product === 1 || t.Product === 2;
if (activeFilter === 'buy') return t.Type === false;
if (activeFilter === 'sell') return t.Type === true;
return true;
});
function renderTrades(sym) {
const tbody = document.getElementById('tradesBody');
const countEl = document.getElementById('tradesCount');
const filtered = sym === 'all' ? allTrades : allTrades.filter(t => t.Symbol === sym);
if (!filtered.length) {
tbody.innerHTML = `<tr><td colspan="7" class="trades-empty">${
allTrades.length === 0 ? 'no trades found' : 'no trades match filter'
}</td></tr>`;
tbody.innerHTML = stateRow(7, 'no trades');
countEl.textContent = '0 trades';
return;
}
countEl.textContent = filtered.length + ' trade' + (filtered.length !== 1 ? 's' : '')
+ (activeFilter !== 'all' ? ' — ' + activeFilter : '');
tbody.innerHTML = filtered.map(t => {
const sym = t.Symbol ?? '—';
const ccy = t.CurrencyCode ?? '—';
const date = t.Date ? new Date(t.Date).toLocaleDateString('sv-SE') : '—';
const price = typeof t.Price === 'number'
? t.Price.toLocaleString('da-DK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
: '—';
const buy = t.Type === true || t.Type === 'true';
const prod = PRODUCT_LABELS[t.Product] ?? ('type ' + t.Product);
return `<tr>
<td><span class="trade-ticker">${sym}</span></td>
<td>${productLabel(t.Product)}</td>
<td>${ccy}</td>
<td>${date}</td>
<td class="${t.Type ? 'dir-sell' : 'dir-buy'}">${t.Type ? 'SELL' : 'BUY'}</td>
<td>${t.Shares ?? '—'}</td>
<td>${price}</td>
<td><span class="trade-ticker">${t.Symbol || '—'}</span></td>
<td>${prod}</td>
<td>${t.CurrencyCode || '—'}</td>
<td>${fmtDate(t.Date)}</td>
<td class="${buy ? 'dir-buy' : 'dir-sell'}">${buy ? 'BUY' : 'SELL'}</td>
<td>${n(t.Shares, 0)}</td>
<td>${n(t.Price)}</td>
</tr>`;
}).join('');
countEl.textContent = filtered.length + ' trade' + (filtered.length !== 1 ? 's' : '');
}
/* ── accordion / filter ──────────────────────────────────────────────── */
function toggleTrades(btn) {
const body = document.getElementById('tradesAccordion');
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', String(!expanded));
body.classList.toggle('open', !expanded);
if (!expanded && !tradesLoaded) loadTrades();
}
function filterTrades(sym, btn) {
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
activeFilter = sym;
renderTrades();
renderTrades(sym);
}
function toggleTrades(btn) {
const body = document.getElementById('tradesBody');
const expanded = btn.getAttribute('aria-expanded') === 'true';
btn.setAttribute('aria-expanded', String(!expanded));
body.classList.toggle('open', !expanded);
if (!expanded && allTrades.length === 0) loadTrades();
/* ── misc helpers ────────────────────────────────────────────────────── */
function set(id, val) {
const el = document.getElementById(id);
if (el) { el.textContent = val; el.classList.remove('dim'); }
}
// ── POST /trade/add ───────────────────────
function openAddTrade() {
const now = new Date();
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
document.getElementById('f-date').value = now.toISOString().slice(0, 16);
document.getElementById('formError').textContent = '';
document.getElementById('addTradeModal').classList.add('open');
}
function closeAddTrade() { document.getElementById('addTradeModal').classList.remove('open'); }
function handleOverlayClick(e) { if (e.target === document.getElementById('addTradeModal')) closeAddTrade(); }
async function submitTrade() {
const errEl = document.getElementById('formError');
const btn = document.getElementById('submitBtn');
errEl.textContent = '';
const symbol = document.getElementById('f-symbol').value.trim().toUpperCase();
const shares = parseInt(document.getElementById('f-shares').value);
const price = parseFloat(document.getElementById('f-price').value);
const currency = document.getElementById('f-currency').value.trim().toUpperCase();
const product = parseInt(document.getElementById('f-product').value);
const type = document.getElementById('f-type').value === 'true';
const dateVal = document.getElementById('f-date').value;
if (!symbol) return (errEl.textContent = 'symbol is required');
if (!shares || shares < 1) return (errEl.textContent = 'shares must be a positive integer');
if (!price || price <= 0) return (errEl.textContent = 'price must be a positive number');
if (!currency) return (errEl.textContent = 'currency code is required');
if (!dateVal) return (errEl.textContent = 'trade date is required');
const date = new Date(dateVal);
if (date > new Date()) return (errEl.textContent = 'date cannot be in the future');
// Payload matches POST /trade/add spec from wiki
const payload = {
symbol,
currency_code: currency,
shares,
product,
type,
price,
date: date.toISOString(),
};
btn.disabled = true;
btn.textContent = 'submitting…';
try {
const res = await fetch(`${API}/trade/add`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
if (!res.ok) {
const msg = await res.text().catch(() => 'unknown error');
throw new Error(msg || 'server returned ' + res.status);
}
closeAddTrade();
showToast('trade added successfully', 'success');
await loadTrades();
} catch (err) {
errEl.textContent = err.message || 'failed to submit trade';
} finally {
btn.disabled = false;
btn.textContent = 'submit trade';
}
function stateRow(cols, msg) {
return `<tr class="state-row"><td colspan="${cols}">${msg}</td></tr>`;
}
// ── Toast ─────────────────────────────────
function showToast(msg, type = '') {
const el = document.getElementById('toast');
el.textContent = msg;
el.className = 'toast ' + type + ' show';
clearTimeout(el._t);
el._t = setTimeout(() => el.classList.remove('show'), 3000);
/* ── boot ────────────────────────────────────────────────────────────── */
async function loadAll() {
// Reset status
document.getElementById('statusDot').className = 'status-dot loading';
document.getElementById('statusText').textContent = 'connecting…';
await loadHealth();
await loadCurrencies(); // currency map must be ready before tables
await Promise.all([loadPositions(), loadCompanies()]);
// Trades loaded lazily on accordion open
}
// ── Init ──────────────────────────────────
(async () => {
await Promise.all([checkHealth(), loadPositions()]);
fetchHoldingPrices();
})();
document.addEventListener('DOMContentLoaded', loadAll);
</script>
</body>
</html>