manohar/position-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: expiry tabs outside card-head (no collapse on click), stopPropagation

Browse source
This commit is contained in:
Manohar 2026-05-27 13:24:37 +05:30
parent acf8799880
commit e8bb8fdd30
1 changed files with 21 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
public/index.html
View file

@ -188,7 +188,8 @@
</div>
</div>
<div class="card collapsible" id="sec-pos" style="margin-bottom:16px">
<div class="card-head" onclick="toggleCard('sec-pos')"><span class="card-title">Option Positions</span><div style="display:flex;align-items:center;gap:10px"><div class="live-badge"><span class="ldot"></span>Live</div><div id="expiry-tabs" style="display:flex;gap:4px;flex-wrap:wrap"></div><span id="pos-hpnl" style="font-family:'Geist Mono',monospace;font-size:.75rem;font-weight:600;display:none"></span></div><span class="collapse-arrow">&#9660;</span></div>
<div class="card-head" onclick="toggleCard('sec-pos')"><span class="card-title">Option Positions</span><div style="display:flex;align-items:center;gap:10px"><div class="live-badge"><span class="ldot"></span>Live</div><span id="pos-hpnl" style="font-family:'Geist Mono',monospace;font-size:.75rem;font-weight:600;display:none"></span></div><span class="collapse-arrow">&#9660;</span></div>
<div id="expiry-tabs-row" style="padding:8px 16px 0;display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border)"></div>
<div class="collapse-body"><table>
<thead><tr><th>Symbol</th><th>Qty</th><th>LTP</th><th>Avg Cost</th><th>Unrealised</th><th>Realised</th><th>Total P&amp;L</th></tr></thead>
<tbody id="pos-body"><tr><td colspan="7" style="text-align:center;padding:36px;color:var(--text3)">Loading&#8230;</td></tr></tbody>
@ -367,12 +368,20 @@ async function loadPositions(){
// Build expiry tabs
const expiries=['ALL',...new Set(open.map(p=>expiryLabel(p.tradingsymbol)))].filter(Boolean);
const tabsEl=document.getElementById('expiry-tabs');
if(tabsEl&&expiries.length>2){
tabsEl.innerHTML=expiries.map(e=>
'<button class="exp-tab'+(e===_activeExpiry?' active':'')+'" onclick="setExpiry(\''+e+'\')">'+(e==='ALL'?'All Expiries':e)+'</button>'
).join('');
} else if(tabsEl){ tabsEl.innerHTML=''; }
// Use the row OUTSIDE card-head so clicks don't bubble to toggleCard
var tabsEl=document.getElementById('expiry-tabs-row');
if(tabsEl){
if(expiries.length>2){
tabsEl.style.display='flex';
tabsEl.innerHTML=expiries.map(function(e){
return '<button class="exp-tab'+(e===_activeExpiry?' active':'"')+'" onclick="event.stopPropagation();setExpiry(this,\''+e+'\')">'+
(e==='ALL'?'All Expiries':e)+'</button>';
}).join('');
} else {
tabsEl.style.display='none';
tabsEl.innerHTML='';
}
}
// Filter by active expiry
const filtered=_activeExpiry==='ALL'?open:open.filter(p=>expiryLabel(p.tradingsymbol)===_activeExpiry);
@ -744,9 +753,12 @@ async function loadClosedPositions() {
}
function setExpiry(exp){
function setExpiry(btn,exp){
_activeExpiry=exp;
// Re-render positions with new filter (re-use cached data via refresh)
// Update active tab styling
var row=document.getElementById('expiry-tabs-row');
if(row) row.querySelectorAll('.exp-tab').forEach(function(b){b.classList.remove('active');});
if(btn) btn.classList.add('active');
loadPositions();
}
loadConfig();refresh();