From 8564dcb8b246492f4ca272eb9d33d971d53e0f16 Mon Sep 17 00:00:00 2001 From: Manohar Date: Sat, 9 May 2026 04:04:09 +0000 Subject: [PATCH] fix: market cards fixed order; collapsible with arrow indicator --- public/index.html | 34 ++++++++++++++++++++++++---------- 1 file changed, 24 insertions(+), 10 deletions(-) diff --git a/public/index.html b/public/index.html index 9dd780f..7acc07f 100644 --- a/public/index.html +++ b/public/index.html @@ -86,12 +86,16 @@ .btn-save:hover{background:#e55a3a;transform:translateY(-1px)} .save-msg{font-size:.72rem;color:var(--green);display:none;margin-left:10px} - .collapsible .card-head{cursor:pointer;user-select:none} - .collapsible .card-head::after{content:"\u2303";font-size:.8rem;color:var(--text3);transition:transform .2s;margin-left:8px} - .collapsible.collapsed .card-head::after{transform:rotate(180deg)} - .collapse-body{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1);max-height:4000px} - .collapsible.collapsed .collapse-body{max-height:0} - + + + /* ── Collapsible ── */ + .collapsible > .card-head { cursor:pointer; user-select:none; } + .collapse-arrow { margin-left:auto; font-size:.75rem; color:var(--text3); transition:transform .25s ease; display:inline-block; } + .collapsible.collapsed .collapse-arrow { transform:rotate(-90deg); } + .collapse-body { overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1); max-height:5000px; } + .collapsible.collapsed .collapse-body { max-height:0 !important; } + +
@@ -210,7 +214,12 @@ async function loadMarket(){ const {ok,data=[]}=await fetch('/api/market').then(r=>r.json()).catch(()=>({ok:false,data:[]})); const grid=document.getElementById('market-grid'); if(!ok||!data.length){grid.innerHTML='
Market data unavailable
';return;} - grid.innerHTML=data.map(q=>{const up=q.changePct>=0,cl=up?'up':'dn',arrow=up?'\u25b2':'\u25bc';const price=q.price>10000?q.price.toLocaleString('en-IN',{maximumFractionDigits:0}):q.price.toFixed(2);return'
'+q.label+'
'+price+' '+q.unit+'
'+arrow+' '+Math.abs(q.changePct).toFixed(2)+'% '+(q.change>=0?'+':'')+q.change.toFixed(0)+'
'+(q.stale?'
prev close
':'')+'
';}).join(''); + const ORDER=['SENSEX','NIFTY50','BANKNIFTY','INDIAVIX','CRUDEOIL','USDINR']; + const map=Object.fromEntries(data.map(q=>[q.key,q])); + const sorted=ORDER.map(k=>map[k]).filter(Boolean); + // append any keys not in ORDER + data.forEach(q=>{if(!ORDER.includes(q.key))sorted.push(q);}); + grid.innerHTML=sorted.map(q=>{const up=q.changePct>=0,cl=up?'up':'dn',arrow=up?'\u25b2':'\u25bc';const price=q.price>10000?q.price.toLocaleString('en-IN',{maximumFractionDigits:0}):q.price.toFixed(2);return'
'+q.label+'
'+price+' '+q.unit+'
'+arrow+' '+Math.abs(q.changePct).toFixed(2)+'% '+(q.change>=0?'+':'')+q.change.toFixed(0)+'
'+(q.stale?'
prev close'+(q.cachedAt?' \u00b7 '+q.cachedAt.slice(11,16)+' UTC':'')+'
':'')+'
';}).join(''); } async function loadPositions(){ const {data}=await fetch('/api/positions').then(r=>r.json()); @@ -260,16 +269,21 @@ async function saveOverride(key){ } async function refresh(){await Promise.all([loadPositions(),loadAlerts(),loadHealth(),loadChart(curH),loadMarket()]);} + + function toggleCard(id){ const el=document.getElementById(id); + if(!el)return; el.classList.toggle('collapsed'); const s=JSON.parse(localStorage.getItem('collapse')||'{}'); s[id]=el.classList.contains('collapsed'); localStorage.setItem('collapse',JSON.stringify(s)); } -(function(){ - const s=JSON.parse(localStorage.getItem('collapse')||'{}'); - Object.entries(s).forEach(([id,c])=>{if(c)document.getElementById(id)?.classList.add('collapsed')}); +(function restoreCollapse(){ + try{ + const s=JSON.parse(localStorage.getItem('collapse')||'{}'); + Object.entries(s).forEach(([id,c])=>{if(c){const el=document.getElementById(id);if(el)el.classList.add('collapsed');}}); + }catch(e){} })(); loadConfig();refresh(); setInterval(refresh,60000);