ok, now where are the pairs to choose from and also no buttons work

index.html

@@ -81,14 +81,16 @@
             </div>
         </header>
         <div class="p-4">
-            <select id="pairSelector" class="w-full p-2 border rounded" multiple="multiple"></select>
-            <div class="flex space-x-2 mt-2">
-                <button id="addPairsBtn" class="flex-1 p-2 bg-green-500 text-white rounded">Add Selected Pairs</button>
-                <button id="clearPairsBtn" class="flex-1 p-2 bg-red-500 text-white rounded">Clear All</button>
+            <div class="mb-2">
+                <label for="pairSelector" class="block font-medium mb-1">Select Trading Pairs:</label>
+                <select id="pairSelector" class="w-full p-2 border rounded" multiple="multiple"></select>
+            </div>
+            <div class="flex space-x-2">
+                <button id="addPairsBtn" class="flex-1 p-2 bg-green-500 text-white rounded hover:bg-green-600">Add Selected Pairs</button>
+                <button id="clearPairsBtn" class="flex-1 p-2 bg-red-500 text-white rounded hover:bg-red-600">Clear All</button>
             </div>
         </div>
-
-        <div id="chartGrid" class="chart-grid"></div>
+<div id="chartGrid" class="chart-grid"></div>
 </div>
 
     <div id="sidebar" class="p-4">
@@ -151,16 +153,18 @@
         const closeSidebar = document.getElementById('closeSidebar');
         const darkModeToggle = document.getElementById('darkModeToggle');
         const timeframeSelector = document.getElementById('timeframe');
-
         // Initialize UI components
-        $(document).ready(function() {
+        document.addEventListener('DOMContentLoaded', function() {
             // Initialize Select2 for pair selection
-            pairSelector.select2({
+            $(pairSelector).select2({
                 placeholder: "Search and select trading pairs",
                 allowClear: true,
                 width: '100%',
                 closeOnSelect: false
             });
+
+            // Load pairs immediately
+            fetchPairs();
 // Initialize color pickers
             const candleUpPicker = Pickr.create({
                 el: '#candleUpColor',
@@ -193,28 +197,44 @@
                     }
                 }
             });
+            // Event listeners
+            document.getElementById('addPairsBtn').addEventListener('click', function() {
+                console.log('Add pairs clicked');
+                addSelectedPairs();
+            });
 
-            // Load saved settings
-            loadSettings();
+            document.getElementById('clearPairsBtn').addEventListener('click', function() {
+                console.log('Clear pairs clicked');
+                clearAllPairs();
+            });
 
-            // Initialize WebSocket connection
-            initWebSocket();
+            settingsBtn.addEventListener('click', function() {
+                console.log('Settings clicked');
+                openSidebar();
+            });
 
-            // Fetch available pairs
-            fetchPairs();
+            closeSidebar.addEventListener('click', function() {
+                console.log('Close sidebar clicked');
+                closeSidebar();
+            });
+
+            document.getElementById('saveSettings').addEventListener('click', function() {
+                console.log('Save settings clicked');
+                saveSettings();
+            });
 
-            // Event listeners
-            document.getElementById('addPairsBtn').addEventListener('click', addSelectedPairs);
-            document.getElementById('clearPairsBtn').addEventListener('click', clearAllPairs);
-            settingsBtn.addEventListener('click', openSidebar);
-            closeSidebar.addEventListener('click', closeSidebar);
-            
             // Close sidebar when clicking outside
             document.addEventListener('click', function(event) {
                 if (!sidebar.contains(event.target) && event.target !== settingsBtn) {
                     closeSidebar();
                 }
             });
+
+            // Initialize WebSocket connection
+            initWebSocket();
+
+            // Load saved settings
+            loadSettings();
 darkModeToggle.addEventListener('click', function() {
                 document.body.classList.toggle('dark-mode');
                 const isDarkMode = document.body.classList.contains('dark-mode');
@@ -261,8 +281,8 @@ document.getElementById('saveSettings').addEventListener('click', saveSettings);
                 processWebSocketMessage(message);
             };
         }
-
         function fetchPairs() {
+            console.log('Fetching available pairs...');
             fetch('https://fapi.binance.com/fapi/v1/exchangeInfo')
                 .then(response => response.json())
                 .then(data => {
@@ -273,9 +293,20 @@ document.getElementById('saveSettings').addEventListener('click', saveSettings);
                             text: symbol.symbol
                         }));
                     
-                    pairSelector.select2({ data: pairs });
+                    console.log(`Loaded ${pairs.length} trading pairs`);
+                    $(pairSelector).select2({
+                        data: pairs,
+                        placeholder: "Search and select trading pairs",
+                        allowClear: true,
+                        width: '100%',
+                        closeOnSelect: false
+                    });
                 })
-                .catch(error => console.error('Error fetching pairs:', error));
+                .catch(error => {
+                    console.error('Error fetching pairs:', error);
+                    // Retry after 5 seconds if failed
+                    setTimeout(fetchPairs, 5000);
+                });
         }
 function addSelectedPairs() {
             const selectedPairs = pairSelector.val();
@@ -526,22 +557,26 @@ function updateChartTheme(pair, isDarkMode) {
                 }
             });
         }
-function saveSettings() {
-            const settings = {
-                showPrice: document.getElementById('showPrice').checked,
-                showVolume: document.getElementById('showVolume').checked,
-                showOI: document.getElementById('showOI').checked,
-                showFunding: document.getElementById('showFunding').checked,
-                showFundingTimer: document.getElementById('showFundingTimer').checked,
-                darkMode: document.body.classList.contains('dark-mode'),
-                selectedPairs: Array.from(subscribedPairs),
-                timeframe: timeframeSelector.value
-            };
-            localStorage.setItem('binanceDashboardSettings', JSON.stringify(settings));
-            closeSidebar();
+        function saveSettings() {
+            try {
+                const settings = {
+                    showPrice: document.getElementById('showPrice').checked,
+                    showVolume: document.getElementById('showVolume').checked,
+                    showOI: document.getElementById('showOI').checked,
+                    showFunding: document.getElementById('showFunding').checked,
+                    showFundingTimer: document.getElementById('showFundingTimer').checked,
+                    darkMode: document.body.classList.contains('dark-mode'),
+                    selectedPairs: Array.from(subscribedPairs),
+                    timeframe: document.getElementById('timeframe').value
+                };
+                localStorage.setItem('binanceDashboardSettings', JSON.stringify(settings));
+                console.log('Settings saved successfully');
+                closeSidebar();
+            } catch (error) {
+                console.error('Error saving settings:', error);
+            }
         }
-
-        function loadSettings() {
+function loadSettings() {
             const savedSettings = localStorage.getItem('binanceDashboardSettings');
             if (savedSettings) {
                 const settings = JSON.parse(savedSettings);