Upload static/match_detail.js

static/match_detail.js

@@ -1,5 +1,5 @@
 // === VNEWS — Match Detail UI ===
-// Fetches & renders match detail (preview, lineups, H2H, overlay stats) from bongda.com.vn
+// Fetches & renders match detail (preview, lineups, H2H, stats) from bongda.com.vn
 // Loaded after app_v2.js; extends the match overlay with a "Chi tiết" tab.
 
 (function(){
@@ -8,10 +8,9 @@
   const s = document.createElement('style');
   s.id = 'match-detail-css';
   s.textContent = `
-  .mo-tab-detail {
-
-  }
-  .md-loading{display:flex;align-items:center;justify-content:center;padding:30px;color:#888;font-size:12px}
+  .md-loading{display:flex;align-items:center;justify-content:center;padding:30px;color:#888;font-size:12px;flex-direction:column;gap:8px}
+  .md-spinner{width:24px;height:24px;border:3px solid #333;border-top-color:#5cb87a;border-radius:50%;animation:md-spin .8s linear infinite}
+  @keyframes md-spin{to{transform:rotate(360deg)}}
   .md-section{margin-bottom:16px}
   .md-section-title{font-size:13px;font-weight:800;color:#5cb87a;margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid #2a2a2a;display:flex;align-items:center;gap:6px}
   .md-preview-text{font-size:13px;color:#ccc;line-height:1.6;white-space:pre-wrap;background:#1a1a1a;border-radius:8px;padding:12px;border-left:3px solid #2d8659}
@@ -30,35 +29,49 @@
   .md-h2h-away{text-align:left;flex:1}
   .md-h2h-score{font-size:13px;font-weight:800;color:#f0c040;min-width:40px;text-align:center}
   .md-h2h-live{color:#e74c3c;font-size:9px;font-weight:700}
-  .md-no-data{color:#777;font-size:12px;padding:20px;text-align:center}
+  .md-no-data{color:#777;font-size:12px;padding:20px;text-align:center;line-height:1.6}
+  .md-preview-container{font-size:13px;color:#ccc;line-height.6}
+  .md-preview-container img{max-width:100%;border-radius:6px;margin:8px 0}
+  .md-preview-container p{margin-bottom:8px}
+  .md-preview-container h2,.md-preview-container h3{color:#eee;margin:12px 0 6px}
+  .md-lineups-container,.md-h2h-container,.md-stats-container{font-size:12px;color:#ccc}
+  .md-lineups-container table,.md-h2h-container table,.md-stats-container table{width:100%;border-collapse:collapse}
+  .md-lineups-container td,.md-h2h-container td,.md-stats-container td{padding:4px 6px;border-bottom:1px solid #1a1a1a}
+  .md-lineups-container tr:hover,.md-h2h-container tr:hover{background:#1a2a1f}
   `;
   document.head.appendChild(s);
 
+  function esc(s){return String(s||'').replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]))}
+
   // Store original loadMatchTab
   const _origLoadMatchTab = window.loadMatchTab;
 
   // Override loadMatchTab to handle detail tab
   window.loadMatchTab = async function(tab){
     if(tab === 'detail'){
-      // Activate detail tab UI
       document.querySelectorAll('.mo-tab').forEach(t=>t.classList.remove('active'));
       document.querySelectorAll('.mo-tab').forEach(t=>{
         if(t.textContent.includes('Chi tiết') || t.textContent.includes('Detail')) t.classList.add('active');
       });
       const el = document.getElementById('mo-body');
       if(!el) return;
-      el.innerHTML = '<div class="md-loading">⏳ Đang tải chi tiết trận đấu...</div>';
+      el.innerHTML = '<div class="md-loading"><div class="md-spinner"></div>Đang tải chi tiết trận đấu...</div>';
       try{
         const eventId = window._currentEventId;
-        if(!eventId){ el.innerHTML = '<div class="md-no-data">Không tìm thấy mã trận đấu</div>'; return; }
+        if(!eventId){
+          // Try to extract from overlay title or page
+          el.innerHTML = '<div class="md-no-data">⚠️ Không tìm thấy mã trận đấu.<br><small>Vui lòng đóng và mở lại từ danh sách livescore.</small></div>';
+          return;
+        }
         const r = await fetch(`/api/match/${eventId}/detail`);
+        if(!r.ok){ throw new Error('HTTP ' + r.status); }
         const d = await r.json();
         renderMatchDetail(el, d);
       }catch(e){
-        el.innerHTML = '<div class="md-no-data">Lỗi tải chi tiết: ' + esc(e.message) + '</div>';
+        console.error('Match detail error:', e);
+        el.innerHTML = '<div class="md-no-data">⚠️ Lỗi tải chi tiết: ' + esc(e.message) + '<br><small>Vui lòng thử lại sau hoặc chuyển sang tab "Diễn biến".</small></div>';
       }
     } else {
-      // Call original for comm/stats tabs
       _origLoadMatchTab(tab);
     }
   };
@@ -70,11 +83,11 @@
     if(data.commentaries_html && data.commentaries_html.length > 10){
       h += '<div class="md-section">';
       h += '<div class="md-section-title">📋 Thông tin trận đấu</div>';
-      // Clean up the HTML - remove ads, scripts, iframes
       let cleanHtml = data.commentaries_html
         .replace(/<script[^>]*>.*?<\/script>/gi, '')
         .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
         .replace(/<ins[^>]*>.*?<\/ins>/gi, '')
+        .replace(/<style[^>]*>.*?<\/style>/gi, '')
         .replace(/style="[^"]*display:\s*none[^"]*"/gi, 'style="display:none"');
       h += '<div class="md-preview-container">' + cleanHtml + '</div>';
       h += '</div>';
@@ -92,7 +105,8 @@
       let cleanLineups = data.lineups_html
         .replace(/<script[^>]*>.*?<\/script>/gi, '')
         .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
-        .replace(/<ins[^>]*>.*?<\/ins>/gi, '');
+        .replace(/<ins[^>]*>.*?<\/ins>/gi, '')
+        .replace(/<style[^>]*>.*?<\/style>/gi, '');
       h += '<div class="md-lineups-container">' + cleanLineups + '</div>';
       h += '</div>';
     } else if(data.lineups && (data.lineups.home_players || data.lineups.away_players)){
@@ -108,7 +122,8 @@
       h += '<div class="md-section-title">🔄 Đối đầu (H2H)</div>';
       let cleanH2h = data.h2h_html
         .replace(/<script[^>]*>.*?<\/script>/gi, '')
-        .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '');
+        .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
+        .replace(/<style[^>]*>.*?<\/style>/gi, '');
       h += '<div class="md-h2h-container">' + cleanH2h + '</div>';
       h += '</div>';
     } else if(data.h2h && data.h2h.length > 0){
@@ -124,7 +139,8 @@
       h += '<div class="md-section-title">📊 Thống kê</div>';
       let cleanStats = data.stats_html
         .replace(/<script[^>]*>.*?<\/script>/gi, '')
-        .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '');
+        .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
+        .replace(/<style[^>]*>.*?<\/style>/gi, '');
       h += '<div class="md-stats-container">' + cleanStats + '</div>';
       h += '</div>';
     }
@@ -142,17 +158,15 @@
     }
 
     if(!h){
-      h = '<div class="md-no-data">Chưa có chi tiết cho trận đấu này.<br><small style="color:#666">Dữ liệu sẽ cập nhật khi giải khởi tranh.</small></div>';
+      h = '<div class="md-no-data">Chưa có chi tiết cho trận đấu này.<br><small style="color:#666">Dữ liệu sẽ cập nhật khi giải khởi tranh hoặc trận đấu bắt đầu.</small><br><br><button onclick="window.loadMatchTab(\'comm\')" style="background:#2d8659;border:0;color:#fff;padding:8px 16px;border-radius:8px;font-size:11px;cursor:pointer">Xem Diễn biến</button></div>';
     }
 
     el.innerHTML = h;
-    // Prevent link navigation inside overlay
     el.querySelectorAll('a').forEach(a=>a.addEventListener('click', e=>e.preventDefault()));
   }
 
   function renderLineups(lineups){
     let h = '<div class="md-lineups">';
-    // Home team
     h += '<div class="md-team-box">';
     h += '<div class="md-team-name">' + esc(lineups.home_team || 'Đội nhà') + '</div>';
     if(lineups.home_formation) h += '<div class="md-formation">Đội hình: ' + esc(lineups.home_formation) + '</div>';
@@ -168,7 +182,6 @@
       });
     }
     h += '</div>';
-    // Away team
     h += '<div class="md-team-box">';
     h += '<div class="md-team-name">' + esc(lineups.away_team || 'Đội khách') + '</div>';
     if(lineups.away_formation) h += '<div class="md-formation">Đội hình: ' + esc(lineups.away_formation) + '</div>';
@@ -207,23 +220,20 @@
 
   // Add the "Chi tiết" tab to the match overlay
   function injectDetailTab(){
-    // Wait for overlay to exist
     const check = setInterval(()=>{
       const tabsContainer = document.querySelector('.mo-tabs');
       if(tabsContainer && !document.querySelector('.mo-tab-detail')){
-        // Remove existing detail tab if any (old)
         const existing = document.querySelector('.mo-tab-detail');
         if(existing) existing.remove();
-        // Add new tab
         const detailTab = document.createElement('span');
         detailTab.className = 'mo-tab mo-tab-detail';
         detailTab.textContent = '📋 Chi tiết';
         detailTab.onclick = ()=>window.loadMatchTab('detail');
-        tabsContainer.appendChild(detailTab);
+        // Insert as first tab
+        tabsContainer.insertBefore(detailTab, tabsContainer.firstChild);
         clearInterval(check);
       }
     }, 500);
-    // Stop checking after 30s
     setTimeout(()=>clearInterval(check), 30000);
   }
 
@@ -236,7 +246,6 @@
     };
   }
 
-  // Also inject on DOM ready
   if(document.readyState === 'loading'){
     document.addEventListener('DOMContentLoaded', ()=>setTimeout(injectDetailTab, 1000));
   } else {