remove old bloat
This commit is contained in:
zipfriis
+452
-344
@@ -7,231 +7,199 @@
|
||||
<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">
|
||||
<style>
|
||||
/* ── Trades accordion ── */
|
||||
.trades-section {
|
||||
margin-top: 2.5rem;
|
||||
/* ── Add Trade Modal ── */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.75);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 100;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal-overlay.open { display: flex; }
|
||||
|
||||
.modal {
|
||||
background: var(--bg, #0d0d0d);
|
||||
border: 1px solid var(--border, #2a2a2a);
|
||||
width: min(520px, 94vw);
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
animation: modalIn .2s ease;
|
||||
}
|
||||
@keyframes modalIn {
|
||||
from { opacity:0; transform: translateY(12px); }
|
||||
to { opacity:1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.trades-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
.modal-title {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: .75rem;
|
||||
color: var(--muted, #555);
|
||||
letter-spacing: .08em;
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
.modal-title span { color: var(--fg, #e8e8e8); }
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 1rem; right: 1rem;
|
||||
background: none;
|
||||
border: none;
|
||||
border-top: 1px solid var(--border, #2a2a3a);
|
||||
border-bottom: 1px solid var(--border, #2a2a3a);
|
||||
width: 100%;
|
||||
padding: 0.85rem 0;
|
||||
color: inherit;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.75rem;
|
||||
letter-spacing: 0.07em;
|
||||
text-align: left;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.trades-toggle:hover .toggle-label {
|
||||
color: var(--accent, #f59e0b);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
color: var(--muted, #475569);
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.toggle-label span {
|
||||
color: var(--accent, #f59e0b);
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
color: var(--muted, #475569);
|
||||
font-size: 1rem;
|
||||
transition: transform 0.25s ease;
|
||||
color: var(--muted, #555);
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: .2rem .4rem;
|
||||
transition: color .15s;
|
||||
}
|
||||
.modal-close:hover { color: var(--fg, #e8e8e8); }
|
||||
|
||||
.trades-toggle[aria-expanded="true"] .toggle-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.trades-body {
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s ease;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: .8rem 1.2rem;
|
||||
}
|
||||
.form-grid .full { grid-column: 1 / -1; }
|
||||
|
||||
.trades-body.open {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
|
||||
.trades-inner {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.trades-filter {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--border, #2a2a3a);
|
||||
border-radius: 4px;
|
||||
color: var(--muted, #475569);
|
||||
.form-field label {
|
||||
display: block;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.06em;
|
||||
padding: 3px 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-size: .68rem;
|
||||
color: var(--muted, #555);
|
||||
letter-spacing: .06em;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
.filter-btn:hover,
|
||||
.filter-btn.active {
|
||||
border-color: var(--accent, #f59e0b);
|
||||
color: var(--accent, #f59e0b);
|
||||
background: rgba(245,158,11,0.06);
|
||||
}
|
||||
|
||||
.trades-table-wrap {
|
||||
overflow-x: auto;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.trades-table {
|
||||
.form-field input,
|
||||
.form-field select {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.trades-table thead tr {
|
||||
border-bottom: 1px solid var(--border, #2a2a3a);
|
||||
}
|
||||
|
||||
.trades-table th {
|
||||
color: var(--muted, #475569);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.07em;
|
||||
font-size: 0.68rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trades-table td {
|
||||
padding: 0.65rem 0.75rem;
|
||||
border-bottom: 1px solid rgba(42,42,58,0.5);
|
||||
white-space: nowrap;
|
||||
color: var(--text, #e2e8f0);
|
||||
}
|
||||
|
||||
.trades-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.trades-table tbody tr:hover td {
|
||||
background: rgba(255,255,255,0.02);
|
||||
}
|
||||
|
||||
.trades-table tr.hidden-row {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dir-buy { color: #4ade80; }
|
||||
.dir-sell { color: #f87171; }
|
||||
|
||||
.pnl-pos { color: #4ade80; }
|
||||
.pnl-neg { color: #f87171; }
|
||||
.pnl-zero{ color: var(--muted, #475569); }
|
||||
|
||||
.trade-code {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.65rem;
|
||||
background: rgba(42,42,58,0.8);
|
||||
color: var(--muted, #475569);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.trade-ticker {
|
||||
font-weight: 500;
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.trades-count {
|
||||
color: var(--muted, #475569);
|
||||
font-size: 0.68rem;
|
||||
padding: 0 0 0.5rem;
|
||||
}
|
||||
|
||||
/* ── Live price styles ── */
|
||||
.price-cell {
|
||||
position: relative;
|
||||
}
|
||||
.price-val {
|
||||
transition: color 0.4s;
|
||||
}
|
||||
.price-val.loading {
|
||||
color: var(--muted, #475569);
|
||||
}
|
||||
.price-val.flash-up {
|
||||
color: #4ade80;
|
||||
}
|
||||
.price-val.flash-down {
|
||||
color: #f87171;
|
||||
}
|
||||
.price-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
font-size: 0.68rem;
|
||||
color: var(--muted, #475569);
|
||||
margin-left: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.price-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--muted, #475569);
|
||||
display: inline-block;
|
||||
}
|
||||
.price-dot.live { background: #4ade80; box-shadow: 0 0 4px #4ade80; }
|
||||
.price-dot.error { background: #f87171; }
|
||||
.price-dot.loading {
|
||||
background: #f59e0b;
|
||||
animation: pulse 1s ease-in-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
.refresh-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--border, #2a2a3a);
|
||||
border-radius: 4px;
|
||||
color: var(--muted, #475569);
|
||||
background: #141414;
|
||||
border: 1px solid #2a2a2a;
|
||||
color: var(--fg, #e8e8e8);
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: 0.68rem;
|
||||
padding: 2px 8px;
|
||||
font-size: .82rem;
|
||||
padding: .5rem .7rem;
|
||||
outline: none;
|
||||
transition: border-color .15s;
|
||||
box-sizing: border-box;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
.form-field input:focus,
|
||||
.form-field select:focus { border-color: #555; }
|
||||
.form-field select option { background: #1a1a1a; }
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: .7rem;
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: none;
|
||||
border: 1px solid #2a2a2a;
|
||||
color: var(--muted, #555);
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: .78rem;
|
||||
padding: .5rem 1.1rem;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.05em;
|
||||
transition: all 0.15s;
|
||||
transition: border-color .15s, color .15s;
|
||||
}
|
||||
.refresh-btn:hover {
|
||||
border-color: var(--accent, #f59e0b);
|
||||
color: var(--accent, #f59e0b);
|
||||
.btn-cancel:hover { border-color: #555; color: var(--fg, #e8e8e8); }
|
||||
|
||||
.btn-submit {
|
||||
background: var(--fg, #e8e8e8);
|
||||
border: none;
|
||||
color: #0d0d0d;
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: .78rem;
|
||||
font-weight: 500;
|
||||
padding: .5rem 1.3rem;
|
||||
cursor: pointer;
|
||||
transition: opacity .15s;
|
||||
}
|
||||
.section-header-row {
|
||||
.btn-submit:hover { opacity: .85; }
|
||||
.btn-submit:disabled { opacity: .4; cursor: not-allowed; }
|
||||
|
||||
.form-error {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: .72rem;
|
||||
color: #e05555;
|
||||
margin-top: .9rem;
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
/* ── Add Trade trigger button ── */
|
||||
.add-trade-btn {
|
||||
background: none;
|
||||
border: 1px solid #2a2a2a;
|
||||
color: var(--muted, #555);
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: .72rem;
|
||||
letter-spacing: .06em;
|
||||
padding: .35rem .8rem;
|
||||
cursor: pointer;
|
||||
transition: border-color .15s, color .15s;
|
||||
margin-left: auto;
|
||||
}
|
||||
.add-trade-btn:hover { border-color: #888; color: var(--fg, #e8e8e8); }
|
||||
|
||||
/* ── Loading skeleton rows ── */
|
||||
.skeleton-row td {
|
||||
padding: .6rem 0;
|
||||
}
|
||||
.skeleton-cell {
|
||||
height: .7rem;
|
||||
background: linear-gradient(90deg, #1c1c1c 25%, #252525 50%, #1c1c1c 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
border-radius: 2px;
|
||||
width: 70%;
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.trades-empty {
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: .78rem;
|
||||
color: var(--muted, #555);
|
||||
padding: 1.4rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* trades section header row flex */
|
||||
.trades-header-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.6rem;
|
||||
gap: .7rem;
|
||||
padding: .9rem 1rem .6rem;
|
||||
border-bottom: 1px solid #1e1e1e;
|
||||
}
|
||||
|
||||
/* toast */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 1.8rem;
|
||||
right: 1.8rem;
|
||||
background: #1c1c1c;
|
||||
border: 1px solid #2e2e2e;
|
||||
color: var(--fg, #e8e8e8);
|
||||
font-family: 'DM Mono', monospace;
|
||||
font-size: .78rem;
|
||||
padding: .7rem 1.1rem;
|
||||
z-index: 200;
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
transition: opacity .2s, transform .2s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast.show { opacity: 1; transform: translateY(0); }
|
||||
.toast.success { border-color: #3a6e3a; color: #7ecf7e; }
|
||||
.toast.error { border-color: #6e2e2e; color: #cf7e7e; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -343,97 +311,44 @@
|
||||
<div class="trades-body" id="tradesBody">
|
||||
<div class="trades-inner">
|
||||
|
||||
<!-- Filter buttons -->
|
||||
<div class="trades-filter">
|
||||
<button class="filter-btn active" onclick="filterTrades('all', this)">All</button>
|
||||
<button class="filter-btn" onclick="filterTrades('NOVOBc', this)">NOVOBc</button>
|
||||
<button class="filter-btn" onclick="filterTrades('CSIQ', this)">CSIQ</button>
|
||||
<button class="filter-btn" onclick="filterTrades('PYPL', this)">PYPL</button>
|
||||
<button class="filter-btn" onclick="filterTrades('options', this)">Options</button>
|
||||
<!-- Filter + Add row -->
|
||||
<div class="trades-header-row">
|
||||
<div class="trades-filter" style="margin:0;border:none;padding:0">
|
||||
<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>
|
||||
|
||||
<p class="trades-count" id="tradesCount">10 trades</p>
|
||||
<p class="trades-count" id="tradesCount">loading…</p>
|
||||
|
||||
<div class="trades-table-wrap">
|
||||
<table class="trades-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Symbol</th>
|
||||
<th>Ticker</th>
|
||||
<th>Asset</th>
|
||||
<th>Ccy</th>
|
||||
<th>Date / Time</th>
|
||||
<th>Date</th>
|
||||
<th>Dir</th>
|
||||
<th>Qty</th>
|
||||
<th>Trade Price</th>
|
||||
<th>Curr. Price</th>
|
||||
<th>Proceeds</th>
|
||||
<th>Comm/Fee</th>
|
||||
<th>Basis</th>
|
||||
<th>Realized P/L</th>
|
||||
<th>MTM P/L</th>
|
||||
<th>Code</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tradesBody_rows">
|
||||
|
||||
<!-- NOVOBc -->
|
||||
<tr data-sym="NOVOBc">
|
||||
<td><span class="trade-ticker">NOVOBc</span></td>
|
||||
<td>Stocks</td><td>DKK</td>
|
||||
<td>2026-02-24 03:05</td>
|
||||
<td class="dir-buy">BUY</td>
|
||||
<td>8</td><td>241.70</td><td>243.65</td>
|
||||
<td>−1,933.60</td><td>−10.00</td><td>1,943.60</td>
|
||||
<td class="pnl-zero">0.00</td><td class="pnl-pos">+15.60</td>
|
||||
<td><span class="trade-code">O</span></td>
|
||||
<!-- skeleton -->
|
||||
<tr class="skeleton-row">
|
||||
<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:40%"></div></td>
|
||||
<td><div class="skeleton-cell" style="width:80%"></div></td>
|
||||
<td><div class="skeleton-cell" style="width:35%"></div></td>
|
||||
<td><div class="skeleton-cell" style="width:30%"></div></td>
|
||||
<td><div class="skeleton-cell" style="width:55%"></div></td>
|
||||
</tr>
|
||||
<tr data-sym="NOVOBc">
|
||||
<td><span class="trade-ticker">NOVOBc</span></td>
|
||||
<td>Stocks</td><td>DKK</td>
|
||||
<td>2026-02-25 07:10</td>
|
||||
<td class="dir-buy">BUY</td>
|
||||
<td>3</td><td>239.50</td><td>238.40</td>
|
||||
<td>−718.50</td><td>−10.00</td><td>728.50</td>
|
||||
<td class="pnl-zero">0.00</td><td class="pnl-neg">−3.30</td>
|
||||
<td><span class="trade-code">O</span></td>
|
||||
</tr>
|
||||
|
||||
<!-- CSIQ -->
|
||||
<tr data-sym="CSIQ">
|
||||
<td><span class="trade-ticker">CSIQ</span></td>
|
||||
<td>Stocks</td><td>USD</td>
|
||||
<td>2026-01-20 14:33</td>
|
||||
<td class="dir-buy">BUY</td>
|
||||
<td>8</td><td>20.48</td><td>20.51</td>
|
||||
<td>−163.84</td><td>−0.38</td><td>164.22</td>
|
||||
<td class="pnl-zero">0.00</td><td class="pnl-pos">+0.24</td>
|
||||
<td><span class="trade-code">O</span></td>
|
||||
</tr>
|
||||
|
||||
<!-- PYPL -->
|
||||
<tr data-sym="PYPL">
|
||||
<td><span class="trade-ticker">PYPL</span></td>
|
||||
<td>Stocks</td><td>USD</td>
|
||||
<td>2026-01-20 14:31</td>
|
||||
<td class="dir-sell">SELL</td>
|
||||
<td>−3</td><td>55.18</td><td>55.08</td>
|
||||
<td>165.53</td><td>−0.35</td><td>−187.91</td>
|
||||
<td class="pnl-neg">−22.73</td><td class="pnl-pos">+0.29</td>
|
||||
<td><span class="trade-code">C</span></td>
|
||||
</tr>
|
||||
|
||||
<!-- Options -->
|
||||
<tr data-sym="options">
|
||||
<td><span class="trade-ticker">RGTI 15JAN27 5.5 P</span></td>
|
||||
<td>Options</td><td>USD</td>
|
||||
<td>2026-02-24 09:34</td>
|
||||
<td class="dir-buy">BUY</td>
|
||||
<td>1</td><td>0.53</td><td>0.5271</td>
|
||||
<td>−53.00</td><td>−1.05</td><td>54.05</td>
|
||||
<td class="pnl-zero">0.00</td><td class="pnl-neg">−0.29</td>
|
||||
<td><span class="trade-code">O</span></td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -448,11 +363,250 @@
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ── Holdings price fetch ──
|
||||
// Calls the Go backend's /api/prices endpoint with a list of tickers.
|
||||
// Falls back to FetchEOD-style Yahoo Finance if the backend isn't available.
|
||||
<!-- ── 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">
|
||||
<div class="form-field">
|
||||
<label>TICKER ID</label>
|
||||
<input type="number" id="f-tickerId" min="1" placeholder="1" />
|
||||
</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</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>
|
||||
</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>
|
||||
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast"></div>
|
||||
|
||||
<script>
|
||||
// ─────────────────────────────────────────
|
||||
// Product + Type label helpers
|
||||
// ─────────────────────────────────────────
|
||||
const PRODUCT_LABELS = ['Stock', 'Opt Call', 'Opt Put', 'Currency'];
|
||||
|
||||
function productLabel(n) { return PRODUCT_LABELS[n] ?? '—'; }
|
||||
function typeLabel(v) { return v ? 'SELL' : 'BUY'; }
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// Trade list — GET /trade/list
|
||||
// ─────────────────────────────────────────
|
||||
let allTrades = [];
|
||||
let activeFilter = 'all';
|
||||
|
||||
async function loadTrades() {
|
||||
try {
|
||||
const res = 'http://localhost:8080/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('Could not load trades:', err);
|
||||
allTrades = [];
|
||||
}
|
||||
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;
|
||||
});
|
||||
|
||||
if (filtered.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="7" class="trades-empty">${allTrades.length === 0 ? 'no trades found' : 'no trades match filter'}</td></tr>`;
|
||||
countEl.textContent = '0 trades';
|
||||
return;
|
||||
}
|
||||
|
||||
countEl.textContent = filtered.length + ' trade' + (filtered.length !== 1 ? 's' : '')
|
||||
+ (activeFilter !== 'all' ? ' — ' + activeFilter : '');
|
||||
|
||||
tbody.innerHTML = filtered.map(t => {
|
||||
const ticker = t.Ticker?.Name ?? '—';
|
||||
const product = productLabel(t.Product);
|
||||
const ccy = t.Currency?.Code ?? '—';
|
||||
const date = t.Date ? new Date(t.Date).toLocaleDateString('sv-SE') : '—';
|
||||
const dir = t.Type;
|
||||
const dirCls = dir ? 'dir-sell' : 'dir-buy';
|
||||
const dirLbl = dir ? 'SELL' : 'BUY';
|
||||
const price = typeof t.Price === 'number'
|
||||
? t.Price.toLocaleString('da-DK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
: '—';
|
||||
|
||||
return `<tr>
|
||||
<td><span class="trade-ticker">${ticker}</span></td>
|
||||
<td>${product}</td>
|
||||
<td>${ccy}</td>
|
||||
<td>${date}</td>
|
||||
<td class="${dirCls}">${dirLbl}</td>
|
||||
<td>${t.Shares ?? '—'}</td>
|
||||
<td>${price}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function filterTrades(sym, btn) {
|
||||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
activeFilter = sym;
|
||||
renderTrades();
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// Add Trade Modal
|
||||
// ─────────────────────────────────────────
|
||||
function openAddTrade() {
|
||||
// Default date to now
|
||||
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 tickerId = parseInt(document.getElementById('f-tickerId').value);
|
||||
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;
|
||||
|
||||
// Client-side validation
|
||||
if (!tickerId || tickerId < 1) return errEl.textContent = 'ticker id must be a positive integer';
|
||||
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 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';
|
||||
|
||||
const payload = {
|
||||
TickerId: tickerId,
|
||||
Shares: shares,
|
||||
Product: product,
|
||||
Type: type,
|
||||
Price: price,
|
||||
Currency: currency,
|
||||
Date: date.toISOString(),
|
||||
};
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = 'submitting…';
|
||||
|
||||
try {
|
||||
const res = await fetch('http://localhost:8080/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(); // refresh list
|
||||
|
||||
} catch (err) {
|
||||
errEl.textContent = err.message || 'failed to submit trade';
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'submit trade';
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// 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);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// Trades accordion
|
||||
// ─────────────────────────────────────────
|
||||
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);
|
||||
// Load on first open
|
||||
if (!expanded && allTrades.length === 0) loadTrades();
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────
|
||||
// Holdings price fetch (unchanged)
|
||||
// ─────────────────────────────────────────
|
||||
const HOLDINGS = [
|
||||
{ ticker: 'MAERSK-B.CO', label: 'MEARSK' },
|
||||
{ ticker: 'DFDS.CO', label: 'DFDS' },
|
||||
@@ -462,10 +616,8 @@
|
||||
];
|
||||
|
||||
function setStatus(state, text) {
|
||||
const dot = document.getElementById('priceDot');
|
||||
const label = document.getElementById('priceStatusText');
|
||||
dot.className = 'price-dot ' + state;
|
||||
label.textContent = text;
|
||||
document.getElementById('priceDot').className = 'price-dot ' + state;
|
||||
document.getElementById('priceStatusText').textContent = text;
|
||||
}
|
||||
|
||||
function flashPrice(id, newVal, oldVal) {
|
||||
@@ -481,55 +633,42 @@
|
||||
|
||||
async function fetchHoldingPrices() {
|
||||
setStatus('loading', 'fetching prices…');
|
||||
|
||||
// Read current displayed values before overwriting
|
||||
const prev = {};
|
||||
HOLDINGS.forEach(h => {
|
||||
const el = document.getElementById('price-' + h.ticker);
|
||||
if (el) prev[h.ticker] = parseFloat(el.textContent.replace(/\./g, '').replace(',', '.')) || 0;
|
||||
});
|
||||
|
||||
try {
|
||||
// POST to Go backend — expects JSON array: [{ticker, close}, ...]
|
||||
const res = await fetch('/api/prices', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ tickers: HOLDINGS.map(h => h.ticker) }),
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error('backend returned ' + res.status);
|
||||
|
||||
const data = await res.json(); // [{ ticker, close, date, currency }, ...]
|
||||
const data = await res.json();
|
||||
const map = {};
|
||||
data.forEach(d => { map[d.ticker] = d.close; });
|
||||
|
||||
HOLDINGS.forEach(h => {
|
||||
const close = map[h.ticker];
|
||||
if (close != null) flashPrice(h.ticker, close, prev[h.ticker] || close);
|
||||
});
|
||||
|
||||
const now = new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
|
||||
setStatus('live', 'updated ' + now);
|
||||
|
||||
} catch (err) {
|
||||
console.warn('Backend unavailable, trying Yahoo Finance directly…', err);
|
||||
await fetchDirectYahoo(prev);
|
||||
}
|
||||
}
|
||||
|
||||
// Direct Yahoo Finance fallback (CORS proxy) — same approach as the React artifact
|
||||
async function fetchDirectYahoo(prev) {
|
||||
const yesterday = new Date();
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
// Roll back past weekends
|
||||
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(HOLDINGS.map(async h => {
|
||||
try {
|
||||
const url = `https://corsproxy.io/?${encodeURIComponent(
|
||||
@@ -538,52 +677,21 @@
|
||||
const res = await fetch(url);
|
||||
const json = await res.json();
|
||||
const close = json?.chart?.result?.[0]?.indicators?.quote?.[0]?.close?.[0];
|
||||
if (close) {
|
||||
flashPrice(h.ticker, close, prev[h.ticker] || close);
|
||||
ok++;
|
||||
} else {
|
||||
fail++;
|
||||
}
|
||||
if (close) { flashPrice(h.ticker, close, prev[h.ticker] || 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 (fail === 0) setStatus('live', 'updated ' + now + ' (direct)');
|
||||
else if (ok > 0) setStatus('live', `${ok} ok, ${fail} failed — ${now}`);
|
||||
else setStatus('error', 'price fetch failed');
|
||||
}
|
||||
|
||||
// Auto-fetch on page load
|
||||
document.addEventListener('DOMContentLoaded', fetchHoldingPrices);
|
||||
|
||||
// ── Trades accordion ──
|
||||
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);
|
||||
}
|
||||
|
||||
function filterTrades(sym, btn) {
|
||||
// Update active button
|
||||
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
const rows = document.querySelectorAll('#tradesBody_rows tr');
|
||||
let visible = 0;
|
||||
rows.forEach(row => {
|
||||
const match = sym === 'all' || row.dataset.sym === sym;
|
||||
row.classList.toggle('hidden-row', !match);
|
||||
if (match) visible++;
|
||||
});
|
||||
|
||||
document.getElementById('tradesCount').textContent =
|
||||
visible + ' trade' + (visible !== 1 ? 's' : '') + (sym !== 'all' ? ' — ' + sym : '');
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
fetchHoldingPrices();
|
||||
// Eagerly load trades so accordion is instant on first open
|
||||
loadTrades();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user