From 4a503f6b62dbb8fa1cda1e805bbbfbb1ccfb2a73 Mon Sep 17 00:00:00 2001
From: DiTus <ditus@o2.pl>
Date: Wed, 25 Feb 2026 22:55:13 +0100
Subject: [PATCH] Fix event handlers using event delegation

- Fixed 'favoriteIds.map is not a function' error by converting Set to Array
- Changed onclick handlers to data attributes for dynamically created elements
- Added event delegation for Add button using data-type attribute
- This fixes issues where onclick handlers in template literals don't work properly in ES6 modules
---
 .../static/js/ui/indicators-panel-new.js      | 47 ++++++++++++++++---
 1 file changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/api/dashboard/static/js/ui/indicators-panel-new.js b/src/api/dashboard/static/js/ui/indicators-panel-new.js
index 8e78cb5..85f560a 100644
--- a/src/api/dashboard/static/js/ui/indicators-panel-new.js
+++ b/src/api/dashboard/static/js/ui/indicators-panel-new.js
@@ -148,10 +148,10 @@ export function renderIndicatorPanel() {
             </div>
             
             <!-- Favorites (if any) -->
-            ${favoriteIds.size > 0 ? `
+            ${[...favoriteIds].length > 0 ? `
                 <div class="indicator-section favorites">
                     <div class="section-title">★ Favorites</div>
-                    ${favoriteIds.map(id => {
+                    ${[...favoriteIds].map(id => {
                         const ind = available.find(a => {
                             // Find matching indicator by type
                             return a.type === id || (activeIndicators.find(ai => ai.id === id)?.type === '');
@@ -200,11 +200,9 @@ function renderIndicatorItem(indicator, isFavorite) {
                 <span class="indicator-desc">${indicator.description || ''}</span>
             </div>
             <div class="indicator-actions">
-                <button class="indicator-btn add" title="Add to chart" onclick="window.addIndicator('${indicator.type}')">
-                    +
-                </button>
+                <button class="indicator-btn add" data-type="${indicator.type}" title="Add to chart">+</button>
                 ${isFavorite ? '' : `
-                    <button class="indicator-btn favorite" title="Add to favorites" onclick="window.toggleFavorite('${indicator.type}')">
+                    <button class="indicator-btn favorite" data-type="${indicator.type}" title="Add to favorites">
                         ${userPresets.favorites?.includes(indicator.type) ? '★' : '☆'}
                     </button>
                 `}
@@ -362,6 +360,43 @@ function renderIndicatorPresets(indicator, meta) {
 
 // Event listeners
 function setupEventListeners() {
+    // Event delegation for dynamically created elements
+    const container = document.getElementById('indicatorPanel');
+    if (container) {
+        // Add button
+        container.addEventListener('click', (e) => {
+            const addBtn = e.target.closest('.indicator-btn.add');
+            if (addBtn) {
+                const type = addBtn.dataset.type;
+                if (type && window.addIndicator) {
+                    window.addIndicator(type);
+                }
+            }
+        });
+        
+        // Config / expand button
+        container.addEventListener('click', (e) => {
+            const expandBtn = e.target.closest('.indicator-btn.expand');
+            if (expandBtn) {
+                const id = expandBtn.dataset.id;
+                if (id && window.toggleIndicatorExpand) {
+                    window.toggleIndicatorExpand(id);
+                }
+            }
+        });
+        
+        // Remove button
+        container.addEventListener('click', (e) => {
+            const removeBtn = e.target.closest('.indicator-btn.remove');
+            if (removeBtn) {
+                const id = removeBtn.dataset.id;
+                if (id && window.removeIndicatorById) {
+                    window.removeIndicatorById(id);
+                }
+            }
+        });
+    }
+    
     // Search
     const searchInput = document.getElementById('indicatorSearch');
     if (searchInput) {