p1otek/btc-trading
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement single-panel indicator management system

Browse Source 
Single-panel design with TradingView-inspired UX:
- Search bar for filtering indicators by name
- Category tabs (Trend, Momentum, Volatility, Volume, Favorites)
- Expandable indicators with inline configuration
- Favorites system with pinning
- Preset system to save/load indicator configurations
- Reset to defaults functionality
- Real-time configuration changes (apply immediately)
- Mobile-friendly responsive design
- Touch-optimized for mobile devices
- Cleaner single-panel layout replacing two-panel approach

Features:
✓ Search functionality (must-have)
✓ Presets high-priority (save, load, delete)
✓ Single expandable panel
✓ Inline configuration (no separate panel)
✓ Categories for organizing indicators
✓ Favorites support
✓ Real-time visual updates
✓ Mobile responsive
✓ Collapse all indicators with one click
○ Drag-to-reorder (not implemented - nice to have)

Updated files:
- indicators-panel-new.js: Completely new implementation
- indicators-new.css: New styles for single panel
- index.html: Updated sidebar to use indicator panel
- app.js: Updated imports and initialization
This commit is contained in:
DiTus
2026-02-25 22:34:59 +01:00
parent 6dc9cf5a63
commit a45d09ef6f
4 changed files with 1445 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/api/dashboard/static/index.html
View File

@ -1275,6 +1275,9 @@
grid-template-columns: 1fr;
}
}
</style>
<style>
@import url(./css/indicators-new.css);
</style>
</head>
<body>
@ -1349,17 +1352,24 @@
</div>
</div>
<!-- Right Sidebar - Strategy Simulation -->
<!-- Right Sidebar - Tools Panel -->
<div class="right-sidebar collapsed" id="rightSidebar">
<div class="sidebar-header">
<div class="sidebar-title">
<span>🎯</span>
<span class="sidebar-title-text">Strategy Sim</span>
<span>🔧</span>
<span class="sidebar-title-text">Tools</span>
</div>
<button class="sidebar-toggle" onclick="toggleSidebar()">◀</button>
</div>
<div class="sidebar-content">
<!-- Indicators Panel -->
<div class="sidebar-section-indicators" id="indicatorPanel">
<div class="sidebar-section-header" style="padding: 8px 12px;">
<span>📊</span> Indicators
</div>
</div>
<!-- Strategy Selection -->
<div class="sidebar-section">
<div class="sidebar-section-header">