From c8c51841cf2a29e9566ad0641c7abbda7d8a7096 Mon Sep 17 00:00:00 2001 From: rob Date: Mon, 9 Mar 2026 23:22:15 -0300 Subject: [PATCH] Redesign indicator and backtest displays with icon cards - Replace indicator table with icon card grid display - Add edit indicator popup dialog for modifying indicator settings - Display indicator type, value, and emoji symbols on cards - Add visibility toggle and delete buttons on hover - Redesign backtest items with CSS-based icons and status indicators - Unify dialog styling across external indicator, signal type, and public strategies - Make edit indicator dialog draggable - Fix button text: "+ Add Public" -> "Add Public" - Remove dark theme from signal_type_popup for consistency Co-Authored-By: Claude Opus 4.5 --- src/static/Strategies.js | 77 ++-- src/static/backtesting.js | 30 +- src/static/general.js | 1 + src/static/indicators.js | 366 +++++++++++++++++ src/static/signals.js | 6 + src/templates/backtest_popup.html | 142 +++++-- src/templates/edit_indicator_popup.html | 73 ++++ src/templates/external_indicator_popup.html | 180 ++++----- src/templates/index.html | 1 + src/templates/indicators_hud.html | 414 ++++++++++---------- src/templates/signal_type_popup.html | 65 +-- src/templates/strategies_hud.html | 2 +- 12 files changed, 904 insertions(+), 453 deletions(-) create mode 100644 src/templates/edit_indicator_popup.html diff --git a/src/static/Strategies.js b/src/static/Strategies.js index c5aa51c..d1d0ce2 100644 --- a/src/static/Strategies.js +++ b/src/static/Strategies.js @@ -787,55 +787,54 @@ class StratUIManager { existingModal.remove(); } - // Create modal + // Create modal using form-popup style (like other dialogs) const modal = document.createElement('div'); modal.id = 'public-strategy-modal'; - modal.className = 'modal-overlay'; + modal.className = 'form-popup'; + modal.style.cssText = 'display: block; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 500px; border-radius: 10px; z-index: 1000; overflow: hidden;'; modal.innerHTML = ` -
-
-

Public Strategies

- -
-
-
- ${strategies.length === 0 - ? '

No public strategies available.

' - : strategies.map(s => { - const keyRaw = String(s.tbl_key || ''); - const keyHtml = escapeHtml(keyRaw); - const keyJs = escapeHtml(escapeJsString(keyRaw)); - const nameHtml = escapeHtml(s.name || 'Unnamed Strategy'); - const creatorHtml = escapeHtml(s.creator_name || 'Unknown'); - const action = s.is_subscribed ? 'unsubscribeFromStrategy' : 'subscribeToStrategy'; - const label = s.is_subscribed ? 'Unsubscribe' : 'Subscribe'; - return ` -
-
- ${nameHtml} - by @${creatorHtml} -
- +
+

Public Strategies

+ +
+
+
+ ${strategies.length === 0 + ? '

No public strategies available.

' + : strategies.map(s => { + const keyRaw = String(s.tbl_key || ''); + const keyHtml = escapeHtml(keyRaw); + const keyJs = escapeHtml(escapeJsString(keyRaw)); + const nameHtml = escapeHtml(s.name || 'Unnamed Strategy'); + const creatorHtml = escapeHtml(s.creator_name || 'Unknown'); + const action = s.is_subscribed ? 'unsubscribeFromStrategy' : 'subscribeToStrategy'; + const label = s.is_subscribed ? 'Unsubscribe' : 'Subscribe'; + return ` +
+
+ ${nameHtml} + by @${creatorHtml}
- `; - }).join('') - } -
+ +
+ `; + }).join('') + }
`; document.body.appendChild(modal); - // Close on overlay click - modal.addEventListener('click', (e) => { - if (e.target === modal) { - modal.remove(); - } - }); + // Make it draggable + if (window.UI && window.UI.dragElement) { + window.UI.dragElement(modal, 'public_strategy_header'); + } } } diff --git a/src/static/backtesting.js b/src/static/backtesting.js index 27e29d0..8e6e058 100644 --- a/src/static/backtesting.js +++ b/src/static/backtesting.js @@ -470,15 +470,41 @@ class Backtesting { let html = ''; for (const test of this.tests) { const statusClass = test.status || 'default'; // Use the status or fallback to 'default' + const symbol = this.getBacktestSymbol(statusClass); + const statusText = this.getStatusText(statusClass); html += `
- -
${test.name}
+ +
+ ${symbol} +
+
${test.name}
+
${statusText}
`; } this.backtestDisplay.innerHTML = html; } + getBacktestSymbol(status) { + const symbols = { + 'running': '⏳', + 'complete': '✅', + 'error': '❌', + 'default': '🧪' + }; + return symbols[status] || symbols['default']; + } + + getStatusText(status) { + const texts = { + 'running': 'Running', + 'complete': 'Complete', + 'error': 'Error', + 'default': 'Ready' + }; + return texts[status] || texts['default']; + } + openTestDialog(testName) { const test = this.tests.find(t => t.name === testName); if (!test) { diff --git a/src/static/general.js b/src/static/general.js index f8f4314..5d62a28 100644 --- a/src/static/general.js +++ b/src/static/general.js @@ -35,6 +35,7 @@ class User_Interface { this.initializeResizablePopup("new_sig_form", null, "signal_draggable_header", "resize-signal"); this.initializeResizablePopup("new_signal_type_form", null, "signal_type_draggable_header", "resize-signal-type"); this.initializeResizablePopup("external_indicator_form", null, "external_indicator_header", "resize-external-indicator"); + this.initializeResizablePopup("edit_indicator_form", null, "edit_indicator_header", null); this.initializeResizablePopup("new_trade_form", null, "trade_draggable_header", "resize-trade"); this.initializeResizablePopup("ai_strategy_form", null, "ai_strategy_header", "resize-ai-strategy"); diff --git a/src/static/indicators.js b/src/static/indicators.js index b18ec14..38f3939 100644 --- a/src/static/indicators.js +++ b/src/static/indicators.js @@ -706,6 +706,10 @@ class Indicators { // Contains instantiated indicators. this.i_objs = {}; this.comms = comms; + // Store indicator configurations for editing + this.indicators = {}; + // Store indicator data (values) for card display + this.indicator_data = {}; } create_indicators(indicators, charts) { @@ -766,6 +770,16 @@ class Indicators { // Always set up the visibility form event handler this._setupIndicatorForm(); + // Store indicator configurations for card rendering and editing + if (idata.indicators) { + this.indicators = idata.indicators; + } + + // Store indicator data (values) for card display + if (idata.indicator_data) { + this.indicator_data = idata.indicator_data; + } + if (idata.indicators && Object.keys(idata.indicators).length > 0) { this.create_indicators(idata.indicators, charts); // Initialize each indicator with the data directly @@ -777,6 +791,9 @@ class Indicators { } else { console.log('No indicators defined for this user.'); } + + // Render indicator cards in the UI (after init so values are available) + this.renderIndicators(); } _setupIndicatorForm(){ @@ -807,12 +824,39 @@ class Indicators { if (window.UI.indicators.i_objs[name]) { // Use init() to refresh with full data on candle close window.UI.indicators.i_objs[name].init(updates[name]); + + // Update stored data and card display + this.indicator_data[name] = updates[name]; + this._updateCardValue(name, updates[name]); } else { console.warn(`Indicator "${name}" not found in i_objs, skipping update`); } } } + /** + * Updates a single indicator card's displayed value + */ + _updateCardValue(name, data) { + const valueEl = document.getElementById(`indicator_card_value_${name}`); + if (!valueEl) return; + + let displayValue = '--'; + if (data && Array.isArray(data) && data.length > 0) { + const lastPoint = data[data.length - 1]; + if (lastPoint.value !== undefined && lastPoint.value !== null) { + displayValue = this._formatValue(lastPoint.value); + } else if (lastPoint.macd !== undefined) { + displayValue = this._formatValue(lastPoint.macd); + } else if (lastPoint.middle !== undefined) { + displayValue = this._formatValue(lastPoint.middle); + } else if (lastPoint.upper !== undefined) { + displayValue = this._formatValue(lastPoint.upper); + } + } + valueEl.textContent = displayValue; + } + deleteIndicator(indicator, event) { this.comms.deleteIndicator(indicator).then(response => { if (response.success) { @@ -1110,4 +1154,326 @@ class Indicators { }); } + // ==================== Card Display Methods ==================== + + /** + * Renders all indicators as icon cards in the indicators_list container + */ + renderIndicators() { + const container = document.getElementById('indicators_list'); + if (!container) return; + + container.innerHTML = ''; + + for (const [name, indicator] of Object.entries(this.indicators)) { + const item = document.createElement('div'); + const isVisible = indicator.visible !== false; + item.className = `indicator-item ${isVisible ? 'visible' : 'hidden'}`; + item.setAttribute('data-indicator-name', name); + + // Get indicator type symbol + const symbol = this.getIndicatorSymbol(indicator.type); + + // Get current value from indicator_data + let displayValue = '--'; + const data = this.indicator_data[name]; + if (data && Array.isArray(data) && data.length > 0) { + const lastPoint = data[data.length - 1]; + // Handle different indicator data formats + if (lastPoint.value !== undefined && lastPoint.value !== null) { + // Simple indicators (RSI, SMA, EMA, etc.) + displayValue = this._formatValue(lastPoint.value); + } else if (lastPoint.macd !== undefined) { + // MACD - show the MACD value + displayValue = this._formatValue(lastPoint.macd); + } else if (lastPoint.middle !== undefined) { + // Bollinger Bands - show middle value + displayValue = this._formatValue(lastPoint.middle); + } else if (lastPoint.upper !== undefined) { + // Other band indicators + displayValue = this._formatValue(lastPoint.upper); + } + } + + const indicatorType = indicator.type || 'Unknown'; + item.innerHTML = ` + + +
+ ${symbol} +
+
${name}
+
${indicatorType}
+
${displayValue}
+ `; + + // Click to edit + item.addEventListener('click', () => this.openEditDialog(name)); + + container.appendChild(item); + } + } + + /** + * Formats a numeric value for display + */ + _formatValue(value) { + if (value === null || value === undefined) return '--'; + if (typeof value === 'number') { + // For large numbers, show fewer decimals + if (Math.abs(value) >= 1000) { + return value.toFixed(0); + } else if (Math.abs(value) >= 100) { + return value.toFixed(1); + } else { + return value.toFixed(2); + } + } + return String(value); + } + + /** + * Returns an emoji/symbol for the given indicator type + */ + getIndicatorSymbol(type) { + // All keys are uppercase for consistent matching + const symbols = { + 'RSI': '📊', + 'MACD': '📈', + 'SMA': '〰️', + 'EMA': '〰️', + 'LREG': '➡️', + 'BOLBANDS': '📉', + 'BOL%B': '📉', + 'ATR': '📏', + 'VOLUME': '📊', + }; + + if (!type) return '📈'; + + const upperType = type.toUpperCase(); + + // Check for candlestick patterns (they start with CDL_) + if (upperType.startsWith('CDL_')) { + return '🕯️'; + } + + return symbols[upperType] || '📈'; // default chart emoji + } + + /** + * Opens the edit dialog for an indicator + */ + openEditDialog(indicatorName) { + const indicator = this.indicators[indicatorName]; + if (!indicator) return; + + const form = document.getElementById('edit_indicator_form'); + if (!form) { + console.error('Edit indicator form not found'); + return; + } + + // Populate form fields + document.getElementById('edit_indicator_name').value = indicatorName; + document.getElementById('edit_ind_display_name').value = indicatorName; + document.getElementById('edit_ind_type').value = indicator.type || 'Unknown'; + document.getElementById('edit_ind_visible').checked = indicator.visible !== false; + + // Source fields + const source = indicator.source || {}; + document.getElementById('edit_ind_market').value = source.market || ''; + document.getElementById('edit_ind_timeframe').value = source.timeframe || ''; + document.getElementById('edit_ind_exchange').value = source.exchange || ''; + + // Color + document.getElementById('edit_ind_color').value = indicator.color || '#667eea'; + + // Render dynamic properties + const propsContainer = document.getElementById('edit_ind_properties'); + propsContainer.innerHTML = ''; + + // Properties to exclude from dynamic rendering + const excludeProps = ['type', 'value', 'color', 'visible', 'source', 'name', + 'color_1', 'color_2', 'color_3', 'bullish_color', 'bearish_color']; + + for (const [key, value] of Object.entries(indicator)) { + if (!excludeProps.includes(key)) { + const div = document.createElement('div'); + div.innerHTML = ` + + + `; + propsContainer.appendChild(div); + } + } + + // Show and position the form + form.style.display = 'block'; + form.style.left = '50%'; + form.style.top = '50%'; + form.style.transform = 'translate(-50%, -50%)'; + form.style.position = 'fixed'; + form.style.zIndex = '1000'; + } + + /** + * Closes the edit dialog + */ + closeEditDialog() { + const form = document.getElementById('edit_indicator_form'); + if (form) { + form.style.display = 'none'; + } + } + + /** + * Saves changes from the edit dialog + */ + saveEditDialog() { + const indicatorName = document.getElementById('edit_indicator_name').value; + + const formObj = { + name: indicatorName, + visible: document.getElementById('edit_ind_visible').checked, + color: document.getElementById('edit_ind_color').value, + source: { + market: document.getElementById('edit_ind_market').value, + timeframe: document.getElementById('edit_ind_timeframe').value, + exchange: document.getElementById('edit_ind_exchange').value + }, + properties: {} + }; + + // Gather dynamic properties + const propsContainer = document.getElementById('edit_ind_properties'); + propsContainer.querySelectorAll('input').forEach(input => { + const value = parseFloat(input.value); + formObj.properties[input.name] = isNaN(value) ? input.value : value; + }); + + this.comms.updateIndicator(formObj).then(response => { + if (response.success) { + this.closeEditDialog(); + // Refresh page to reload indicators with new settings + window.location.reload(); + } else { + alert('Failed to update indicator: ' + (response.message || 'Unknown error')); + } + }).catch(error => { + console.error('Error updating indicator:', error); + alert('An error occurred while updating the indicator.'); + }); + } + + /** + * Deletes an indicator card with confirmation + */ + deleteIndicatorCard(indicatorName) { + if (!confirm(`Delete indicator "${indicatorName}"?`)) return; + + this.comms.deleteIndicator(indicatorName).then(response => { + if (response.success) { + // Remove from chart + if (this.i_objs[indicatorName]) { + // Determine which chart the indicator is on + let chart; + const indicator = this.i_objs[indicatorName]; + const indicatorType = indicator.constructor.name; + + if (indicatorName.includes('RSI') || indicatorType === 'RSI') { + chart = window.UI.charts.chart2; + } else if (indicatorName.includes('MACD') || indicatorType === 'MACD') { + chart = window.UI.charts.chart3; + } else if (indicatorName.includes('%B') || indicatorType === 'BollingerPercentB') { + chart = window.UI.charts.chart4; + } else if (indicatorType === 'CandlestickPattern') { + chart = window.UI.charts.chart5; + } else { + chart = window.UI.charts.chart_1; + } + + indicator.removeFromChart(chart); + delete this.i_objs[indicatorName]; + iOutput.clear_legend(indicatorName); + } + + // Remove from indicators object + delete this.indicators[indicatorName]; + + // Re-render the cards + this.renderIndicators(); + } else { + alert('Failed to delete indicator: ' + (response.message || 'Unknown error')); + } + }).catch(error => { + console.error('Error deleting indicator:', error); + alert('An error occurred while deleting the indicator.'); + }); + } + + /** + * Toggles visibility of an indicator on the chart + */ + toggleVisibility(indicatorName) { + const indicator = this.indicators[indicatorName]; + if (!indicator) return; + + // Toggle the visibility + indicator.visible = !indicator.visible; + + // Save to server and reload to apply chart changes + this.comms.updateIndicator({ + name: indicatorName, + visible: indicator.visible + }).then(response => { + if (response.success) { + // Refresh page to properly update chart display + window.location.reload(); + } else { + // Revert the toggle if save failed + indicator.visible = !indicator.visible; + alert('Failed to update visibility'); + } + }).catch(error => { + console.error('Error updating visibility:', error); + indicator.visible = !indicator.visible; + }); + } + + /** + * Makes a dialog draggable by its header + */ + _makeDialogDraggable(dialog, handle) { + if (!dialog || !handle) return; + + let offsetX = 0, offsetY = 0, isDragging = false; + + handle.style.cursor = 'move'; + + handle.onmousedown = (e) => { + if (e.target.tagName === 'BUTTON') return; // Don't drag when clicking buttons + isDragging = true; + offsetX = e.clientX - dialog.offsetLeft; + offsetY = e.clientY - dialog.offsetTop; + document.onmousemove = onMouseMove; + document.onmouseup = onMouseUp; + }; + + function onMouseMove(e) { + if (!isDragging) return; + dialog.style.left = (e.clientX - offsetX) + 'px'; + dialog.style.top = (e.clientY - offsetY) + 'px'; + dialog.style.transform = 'none'; + } + + function onMouseUp() { + isDragging = false; + document.onmousemove = null; + document.onmouseup = null; + } + } + } diff --git a/src/static/signals.js b/src/static/signals.js index 98e0418..ed3dfad 100644 --- a/src/static/signals.js +++ b/src/static/signals.js @@ -1500,7 +1500,13 @@ class Signals { const testResult = document.getElementById('ext_ind_test_result'); if (testResult) testResult.style.display = 'none'; + // Show and position the form form.style.display = 'block'; + form.style.left = '50%'; + form.style.top = '50%'; + form.style.transform = 'translate(-50%, -50%)'; + form.style.position = 'fixed'; + form.style.zIndex = '1000'; } } diff --git a/src/templates/backtest_popup.html b/src/templates/backtest_popup.html index d9ce09a..830af19 100644 --- a/src/templates/backtest_popup.html +++ b/src/templates/backtest_popup.html @@ -72,64 +72,134 @@ .backtest-item { position: relative; width: 100px; - height: 100px; + height: 110px; text-align: center; transition: transform 0.3s ease; - background-size: cover; /* Ensure the background image covers the entire div */ - background-position: center; /* Center the image */ - border: 1px solid #ccc; /* Optional: Add a border for better visibility */ - border-radius: 8px; /* Optional: Rounded corners */ + border-radius: 10px; + background: linear-gradient(145deg, #f0f0f0, #cacaca); + box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff; + cursor: pointer; + overflow: visible; } .backtest-item:hover { - transform: scale(1.05); - } - /* Add a default background image */ - .backtest-item.default { - background-image: url('/static/test_running_icon.webp'); + transform: translateY(-3px); + box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff; } - /* Add background for specific statuses if needed */ + /* Backtest icon area */ + .backtest-icon { + width: 100%; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + position: relative; + margin-top: 5px; + } + + .backtest-icon::before { + content: ''; + width: 40px; + height: 40px; + border-radius: 8px; + position: absolute; + } + + .backtest-icon .backtest-symbol { + position: relative; + z-index: 1; + font-size: 24px; + } + + /* Status-based icon backgrounds */ + .backtest-item.default .backtest-icon::before, + .backtest-item.running .backtest-icon::before { + background: linear-gradient(135deg, #f7b733 0%, #fc4a1a 100%); + } + + .backtest-item.complete .backtest-icon::before { + background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); + } + + .backtest-item.error .backtest-icon::before { + background: linear-gradient(135deg, #cb2d3e 0%, #ef473a 100%); + } + + /* Status borders */ .backtest-item.running { - background-image: url('/static/test_running_icon.webp'); - background-color: #f3f981; /* Highlight running tests with a yellow background */ - border-color: #ffa500; /* Add an orange border for emphasis */ + border: 3px solid #ffa500; + animation: pulse-orange 2s infinite; } .backtest-item.complete { - background-image: url('/static/test_complete_icon.webp'); - background-color: #d4edda; /* Green for completed tests */ - border-color: #28a745; + border: 3px solid #28a745; } .backtest-item.error { - background-color: #f8d7da; /* Red for tests with errors */ - border-color: #dc3545; + border: 3px solid #dc3545; + } + + @keyframes pulse-orange { + 0% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.4); } + 70% { box-shadow: 0 0 0 10px rgba(255, 165, 0, 0); } + 100% { box-shadow: 0 0 0 0 rgba(255, 165, 0, 0); } } .backtest-name { - position: absolute; - top: 80px; - left: 50%; - transform: translateX(-50%); - background-color: white; - padding: 5px; - border-radius: 10px; - color: black; + font-size: 11px; + font-weight: bold; text-align: center; - width: 100px; - font-size: 12px; + color: #333; + padding: 2px 5px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 94px; + margin: 0 auto; } - .delete-button { + .backtest-status { + font-size: 9px; + text-align: center; + color: #888; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + .backtest-date { + font-size: 10px; + text-align: center; + color: #666; + padding: 2px 5px; + } + + .backtest-item .delete-button { position: absolute; - top: 5px; - left: 5px; - background-color: red; - color: white; + top: -8px; + right: -8px; + width: 22px; + height: 22px; border-radius: 50%; - width: 20px; - height: 20px; + background: #dc3545; + color: white; + border: 2px solid white; + font-size: 14px; + font-weight: bold; + cursor: pointer; + display: none; + align-items: center; + justify-content: center; + z-index: 10; + line-height: 1; + } + + .backtest-item:hover .delete-button { + display: flex; + } + + .backtest-item .delete-button:hover { + transform: scale(1.2); } #backtest-progress-container { display: none; /* Initially hidden */ diff --git a/src/templates/edit_indicator_popup.html b/src/templates/edit_indicator_popup.html new file mode 100644 index 0000000..72c97ea --- /dev/null +++ b/src/templates/edit_indicator_popup.html @@ -0,0 +1,73 @@ + + diff --git a/src/templates/external_indicator_popup.html b/src/templates/external_indicator_popup.html index e8d492c..1fe763e 100644 --- a/src/templates/external_indicator_popup.html +++ b/src/templates/external_indicator_popup.html @@ -1,63 +1,87 @@ -