Update

2026-02-13 08:03:25 +01:00
parent 09c2f54c71
commit 98a87a69ca
134 changed files with 20003 additions and 253 deletions
@@ -0,0 +1,96 @@
+/**
+ * Markets Component
+ * Handles market data fetching and display
+ */
+
+export class MarketsComponent {
+    constructor(containerId) {
+        this.container = document.getElementById(containerId);
+        this.markets = [];
+        this.updateInterval = null;
+    }
+
+    async load() {
+        try {
+            console.log('[Markets] Loading markets from API...');
+            
+            // Show loading state
+            if (this.container) {
+                this.container.innerHTML = '<div class="empty-state">LOADING MARKETS...</div>';
+            }
+            
+            const response = await fetch('/api/markets');
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const data = await response.json();
+            
+            console.log('[Markets] API response:', data);
+            console.log('[Markets] Markets count:', data.markets ? data.markets.length : 0);
+            
+            if (data.markets && Array.isArray(data.markets)) {
+                this.markets = data.markets;
+                console.log('[Markets] Rendering', this.markets.length, 'markets');
+                this.render();
+            } else {
+                console.error('[Markets] Invalid markets data:', data);
+                this.showError('Invalid data format: ' + JSON.stringify(data).substring(0, 100));
+            }
+        } catch (error) {
+            console.error('[Markets] Error loading markets:', error);
+            this.showError('Failed to load markets: ' + error.message);
+        }
+    }
+
+    render() {
+        if (!this.container) return;
+        
+        if (this.markets.length === 0) {
+            this.container.innerHTML = '<div class="empty-state">NO ACTIVE MARKETS</div>';
+            return;
+        }
+
+        this.container.innerHTML = this.markets.map(market => {
+            const question = market.question || market.event || 'Unknown Market';
+            const yesPrice = (market.yes_price || 0) * 100;
+            const noPrice = (market.no_price || 0) * 100;
+            const spread = market.spread || Math.abs(yesPrice - noPrice) / 100;
+            
+            return `
+                <div class="market-item">
+                    <div class="market-question">${question}</div>
+                    <div class="market-prices">
+                        <div class="price-yes">
+                            YES: <span class="price-value">${yesPrice.toFixed(1)}%</span>
+                        </div>
+                        <div class="price-no">
+                            NO: <span class="price-value">${noPrice.toFixed(1)}%</span>
+                        </div>
+                    </div>
+                    <div style="margin-top: 8px; font-size: 0.8rem; color: var(--text-secondary);">
+                        Spread: ${(spread * 100).toFixed(2)}%
+                    </div>
+                </div>
+            `;
+        }).join('');
+    }
+
+    showError(message) {
+        if (this.container) {
+            this.container.innerHTML = `<div class="empty-state">${message}</div>`;
+        }
+    }
+
+    startAutoRefresh(interval = 30000) {
+        this.updateInterval = setInterval(() => this.load(), interval);
+    }
+
+    stopAutoRefresh() {
+        if (this.updateInterval) {
+            clearInterval(this.updateInterval);
+            this.updateInterval = null;
+        }
+    }
+}