637 lines
27 KiB
HTML
637 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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=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">
|
|
|
|
<header>
|
|
<a href="/" class="back">← back</a>
|
|
<p class="tag">// portfolio</p>
|
|
<h1>Investment<br/><span>Portfolio</span></h1>
|
|
<p class="header-sub">Equity positions · Personal research</p>
|
|
<div class="health-badge" id="healthBadge" title="API server status">
|
|
<span class="health-dot loading" id="healthDot"></span>
|
|
<span id="healthText">connecting to api…</span>
|
|
</div>
|
|
<p>
|
|
Test of API:
|
|
Source at
|
|
<a href="https://git.samantha42.xyz/samantha/FPandA-Engine"
|
|
style="color:var(--accent);text-decoration:none"
|
|
target="_blank">git.samantha42.xyz/samantha/FPandA-Engine</a>
|
|
</p>
|
|
</header>
|
|
|
|
|
|
<!-- Summary cards (populated dynamically from /positions/list) -->
|
|
<div class="cards">
|
|
<div class="card">
|
|
<p class="card-label">Total Weight</p>
|
|
<p class="card-value neutral" id="sumWeight">—</p>1
|
|
</div>
|
|
<div class="card">
|
|
<p class="card-label">Positions</p>
|
|
<p class="card-value neutral" id="sumPositions">—</p>
|
|
</div>
|
|
<div class="card">
|
|
<p class="card-label">Total Cost Basis</p>
|
|
<p class="card-value neutral" id="sumCostBasis">—</p>
|
|
</div>
|
|
<div class="card">
|
|
<p class="card-label">Total Shares</p>
|
|
<p class="card-value neutral" id="sumShares">—</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Positions table -->
|
|
<div class="section-header-row">
|
|
<p class="section-label" style="margin:0">// positions</p>
|
|
<span class="price-status" id="priceStatus">
|
|
<span class="price-dot loading" id="priceDot"></span>
|
|
<span id="priceStatusText">fetching prices…</span>
|
|
</span>
|
|
<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>
|
|
<tr>
|
|
<th>Symbol</th>
|
|
<th>Currency</th>
|
|
<th>Shares</th>
|
|
<th>Cost Basis</th>
|
|
<th>Weight</th>
|
|
<th>Market Price</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="positionsBody">
|
|
<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>
|
|
<span class="toggle-icon">▾</span>
|
|
</button>
|
|
|
|
<div class="trades-body" id="tradesBody">
|
|
<div>
|
|
<div class="trades-header-row">
|
|
<div class="trades-filter">
|
|
<button class="filter-btn active" onclick="filterTrades('all', this)">All</button>
|
|
<button class="filter-btn" onclick="filterTrades('stock', this)">Stocks</button>
|
|
<button class="filter-btn" onclick="filterTrades('option', this)">Options</button>
|
|
<button class="filter-btn" onclick="filterTrades('buy', this)">Buy</button>
|
|
<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>
|
|
|
|
<div class="trades-table-wrap">
|
|
<table class="trades-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Symbol</th>
|
|
<th>Asset</th>
|
|
<th>Ccy</th>
|
|
<th>Currency</th>
|
|
<th>Date</th>
|
|
<th>Dir</th>
|
|
<th>Qty</th>
|
|
<th>Price</th>
|
|
</tr>
|
|
</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:me@smantha42.xyz">me@smantha42.xyz</a>
|
|
<a href="mailto:samantha@friis.dk">samantha@friis.dk</a>
|
|
<p class="footer-copy">© 2026 — All rights reserved</p>
|
|
</footer>
|
|
|
|
</div>
|
|
|
|
<!-- Add Trade Modal -->
|
|
<div class="modal-overlay" id="addTradeModal" onclick="handleOverlayClick(event)">
|
|
<div class="modal">
|
|
<p class="modal-title">// <span>add trade</span> — new executed order</p>
|
|
<button class="modal-close" onclick="closeAddTrade()">✕</button>
|
|
|
|
<div class="form-grid">
|
|
<!-- API uses "symbol" + "currency_code", not tickerId -->
|
|
<div class="form-field full">
|
|
<label>SYMBOL</label>
|
|
<input type="text" id="f-symbol" placeholder="NOVO-B.CO" style="text-transform:uppercase"/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>SHARES</label>
|
|
<input type="number" id="f-shares" min="1" placeholder="10" />
|
|
</div>
|
|
<div class="form-field">
|
|
<label>PRICE</label>
|
|
<input type="number" id="f-price" step="0.01" placeholder="251.00" />
|
|
</div>
|
|
<div class="form-field">
|
|
<label>CURRENCY CODE</label>
|
|
<input type="text" id="f-currency" placeholder="DKK" maxlength="8" style="text-transform:uppercase"/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>PRODUCT</label>
|
|
<select id="f-product">
|
|
<option value="0">0 — Stock</option>
|
|
<option value="1">1 — Option Call</option>
|
|
<option value="2">2 — Option Put</option>
|
|
<option value="3">3 — Currency</option>
|
|
<option value="4">4 — Bond</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>DIRECTION</label>
|
|
<select id="f-type">
|
|
<option value="false">Buy</option>
|
|
<option value="true">Sell</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-field full">
|
|
<label>TRADE DATE</label>
|
|
<input type="datetime-local" id="f-date" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-error" id="formError"></div>
|
|
|
|
<div class="form-actions">
|
|
<button class="btn-cancel" onclick="closeAddTrade()">cancel</button>
|
|
<button class="btn-submit" id="submitBtn" onclick="submitTrade()">submit trade</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<script>
|
|
const API = 'http://localhost:8080';
|
|
|
|
const PRODUCT_LABELS = { 0:'Stock', 1:'Call Option', 2:'Put Option', 3:'Currency', 4:'Bond' };
|
|
|
|
/* ── 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 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;
|
|
}
|
|
}
|
|
|
|
/* ── 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() {
|
|
const tbody = document.getElementById('positionsBody');
|
|
try {
|
|
const raw = await get('/positions/list');
|
|
const list = Array.isArray(raw) ? raw : (raw ? [raw] : []);
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
/* ── 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() {
|
|
const tbody = document.getElementById('tradesBody');
|
|
const filters = document.getElementById('tradeFilters');
|
|
try {
|
|
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);
|
|
}
|
|
}
|
|
|
|
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 = stateRow(7, 'no trades');
|
|
countEl.textContent = '0 trades';
|
|
return;
|
|
}
|
|
|
|
tbody.innerHTML = filtered.map(t => {
|
|
const buy = t.Type === true || t.Type === 'true';
|
|
const prod = PRODUCT_LABELS[t.Product] ?? ('type ' + t.Product);
|
|
return `<tr>
|
|
<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');
|
|
renderTrades(sym);
|
|
}
|
|
|
|
/* ── misc helpers ────────────────────────────────────────────────────── */
|
|
|
|
function set(id, val) {
|
|
const el = document.getElementById(id);
|
|
if (el) { el.textContent = val; el.classList.remove('dim'); }
|
|
}
|
|
|
|
function stateRow(cols, msg) {
|
|
return `<tr class="state-row"><td colspan="${cols}">${msg}</td></tr>`;
|
|
}
|
|
|
|
/* ── 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
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', loadAll);
|
|
</script>
|
|
</body>
|
|
</html> |