Spaces:
Running
Running
File size: 3,991 Bytes
66b7a93 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | /**
* Signal Panel — Displays active signals with lot sizing, SL/TP, and confluence details
*/
export class SignalPanel {
constructor({ onTakeTrade }) {
this.onTakeTrade = onTakeTrade;
this.signals = [];
this.signalHistory = [];
}
updateSignals(signals, symbol) {
this.signals = signals || [];
this._render(symbol);
}
_render(symbol) {
const list = document.getElementById('signal-list');
const countBadge = document.getElementById('signal-count');
if (!list) return;
if (countBadge) {
countBadge.textContent = this.signals.length;
}
if (this.signals.length === 0) {
list.innerHTML = `
<div class="empty-state">
<span class="empty-icon">📡</span>
<p>Scanning for setups...</p>
<p style="font-size: 0.68rem; color: var(--text-muted); margin-top: 4px;">
Waiting for confluence at key levels
</p>
</div>`;
return;
}
list.innerHTML = this.signals.map((sig, idx) => this._renderSignalCard(sig, idx, symbol)).join('');
// Attach event listeners
list.querySelectorAll('.btn-take-trade').forEach(btn => {
btn.addEventListener('click', () => {
const index = parseInt(btn.dataset.index);
if (this.signals[index]) {
this.onTakeTrade(this.signals[index]);
}
});
});
}
_renderSignalCard(signal, index, symbol) {
const isLong = signal.type === 'LONG';
const dirClass = isLong ? 'long' : 'short';
const decimals = this._getDecimals(signal.symbol || symbol);
const gradeClass = `grade-${signal.quality.toLowerCase()}`;
return `
<div class="signal-card ${dirClass} signal-new" id="signal-${index}">
<div class="signal-header">
<span class="signal-direction ${dirClass}">${signal.type}</span>
<span class="signal-quality ${gradeClass}">${signal.quality}</span>
</div>
<div class="signal-levels">
<div class="signal-level">
<span class="signal-level-label">Entry</span>
<span class="signal-level-value entry">${signal.entry.toFixed(decimals)}</span>
</div>
<div class="signal-level">
<span class="signal-level-label">Stop Loss</span>
<span class="signal-level-value sl">${signal.sl.toFixed(decimals)}</span>
</div>
<div class="signal-level">
<span class="signal-level-label">TP1 (1:2)</span>
<span class="signal-level-value tp">${signal.tp1.toFixed(decimals)}</span>
</div>
<div class="signal-level">
<span class="signal-level-label">TP2 (1:3)</span>
<span class="signal-level-value tp">${signal.tp2 ? signal.tp2.toFixed(decimals) : '—'}</span>
</div>
<div class="signal-level">
<span class="signal-level-label">Lot Size</span>
<span class="signal-level-value lots">${signal.lotSize.toFixed(2)}</span>
</div>
<div class="signal-level">
<span class="signal-level-label">Risk</span>
<span class="signal-level-value sl">$${signal.riskAmount.toFixed(2)}</span>
</div>
</div>
<div class="signal-meta">
<span class="signal-rr">R:R ${signal.rrRatio.toFixed(1)}</span>
<span class="signal-risk">${signal.slPips ? signal.slPips.toFixed(1) + ' pips' : ''}</span>
</div>
<div class="signal-confluences">
${(signal.confluences || []).map(c => `<span class="confluence-tag">✓ ${c}</span>`).join('')}
</div>
<div class="signal-actions">
<button class="btn btn-success btn-sm btn-take-trade" data-index="${index}">
Take Trade
</button>
</div>
</div>
`;
}
_getDecimals(symbol) {
if (symbol === 'XAUUSD') return 2;
if (symbol === 'BTCUSDT' || symbol === 'ETHUSDT') return 2;
return 5;
}
}
export default SignalPanel;
|