shoko/randebu
1
0
Fork 0
Code Issues 6 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: make trade history expandable with button

Browse Source
This commit is contained in:
shokollm
2026-04-11 06:49:58 +00:00
parent 30476e782b
commit 9973b8f6e2
1 changed files with 46 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/frontend/src/routes/bot/[id]/backtest/+page.svelte
View File

@@ -16,8 +16,9 @@
let isRunning = $state(false); let isRunning = $state(false);
let selectedBacktest = $state<Backtest | null>(null); let selectedBacktest = $state<Backtest | null>(null);
// Trades modal state // Expandable trades state
let expandedTrades = $state<Set<string>>(new Set());
onMount(async () => { onMount(async () => {
// Set default dates - yesterday only (1 day range for fast testing) // Set default dates - yesterday only (1 day range for fast testing)
const yesterday = new Date(); const yesterday = new Date();
@@ -125,6 +126,15 @@
selectedBacktest = backtest; selectedBacktest = backtest;
} }
} }
function toggleTrades(backtestId: string) {
if (expandedTrades.has(backtestId)) {
expandedTrades.delete(backtestId);
} else {
expandedTrades.add(backtestId);
}
expandedTrades = new Set(expandedTrades); // Trigger reactivity
}
</script> </script>
<svelte:head> <svelte:head>
@@ -229,21 +239,25 @@
</div> </div>
</div> </div>
{#if backtest.result.trades && backtest.result.trades.length > 0} {#if backtest.result.trades && backtest.result.trades.length > 0}
<div class="trades-inline"> <button class="btn-toggle-trades" onclick={() => toggleTrades(backtest.id)}>
<h4>Trade History</h4> {expandedTrades.has(backtest.id) ? 'Hide' : 'Show'} Trade History ({backtest.result.trades.length})
<div class="trades-list"> </button>
{#each backtest.result.trades as trade} {#if expandedTrades.has(backtest.id)}
<div class="trade-item"> <div class="trades-inline">
<span class="trade-type" class:buy={trade.type === 'buy'} class:sell={trade.type === 'sell'}> <div class="trades-list">
{trade.type.toUpperCase()} {#each backtest.result.trades as trade}
</span> <div class="trade-item">
<span class="trade-price">${trade.price?.toFixed(6)}</span> <span class="trade-type" class:buy={trade.type === 'buy'} class:sell={trade.type === 'sell'}>
<span class="trade-amount">${trade.amount?.toFixed(2)}</span> {trade.type.toUpperCase()}
<span class="trade-reason">{trade.exit_reason || 'entry'}</span> </span>
</div> <span class="trade-price">${trade.price?.toFixed(6)}</span>
{/each} <span class="trade-amount">${trade.amount?.toFixed(2)}</span>
<span class="trade-reason">{trade.exit_reason || 'entry'}</span>
</div>
{/each}
</div>
</div> </div>
</div> {/if}
{/if} {/if}
{/if} {/if}
{#if backtest.status === 'running'} {#if backtest.status === 'running'}
@@ -617,6 +631,22 @@
margin-left: auto; margin-left: auto;
} }
.btn-toggle-trades {
margin-top: 0.75rem;
padding: 0.5rem 1rem;
background: rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 6px;
color: #667eea;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s;
}
.btn-toggle-trades:hover {
background: rgba(102, 126, 234, 0.2);
}
.backtest-header { .backtest-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;