Upload static/match_detail.js

static/match_detail.js

@@ -1,19 +1,14 @@
 // === VNEWS — Match Detail UI ===
-// 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.
+// Renders match detail (preview, lineups, H2H) in the match overlay
+// Auto-extracts event_id from the clicked match element
 
 (function(){
-  // Inject styles
-  if(document.getElementById('match-detail-css')) return;
-  const s = document.createElement('style');
-  s.id = 'match-detail-css';
-  s.textContent = `
-  .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}
+  if(document.getElementById('md-css')) return;
+  const s=document.createElement('style'); s.id='md-css';
+  s.textContent=`
+  .md-sec{margin-bottom:16px}
+  .md-sec-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;background:#1a1a1a;border-radius:8px;padding:12px;border-left:3px solid #2d8659;max-height:300px;overflow-y:auto}
   .md-lineups{display:grid;grid-template-columns:1fr 1fr;gap:12px}
   .md-team-box{background:#1a2a1f;border:1px solid #2a3a2a;border-radius:8px;padding:10px}
   .md-team-name{font-size:13px;font-weight:800;color:#5cb87a;margin-bottom:4px;text-align:center}
@@ -28,227 +23,186 @@
   .md-h2h-home{text-align:right;flex:1}
   .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;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}
+  .md-no-data{color:#777;font-size:12px;padding:20px;text-align:center}
+  .md-err{color:#e74c3c;font-size:12px;padding:20px;text-align:center}
   `;
   document.head.appendChild(s);
 
-  function esc(s){return String(s||'').replace(/[&<>"']/g,m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]))}
+  // Override openMatch to store event_id properly
+  const _origOpenMatch = window.openMatch;
+  window.openMatch = function(id){
+    if(id) window._currentEventId = id;
+    if(_origOpenMatch) _origOpenMatch(id);
+    // Inject detail tab after overlay opens
+    setTimeout(injectDetailTab, 200);
+  };
 
-  // Store original loadMatchTab
-  const _origLoadMatchTab = window.loadMatchTab;
+  // Also intercept match clicks from livescore to capture event_id
+  function interceptMatchClick(e){
+    const md = e.target.closest('.match-detail');
+    if(!md){
+      // Try parent
+      const md2 = e.target.closest('[class*="match"]');
+      if(!md2) return;
+    }
+    // Find event_id from the link
+    const link = (md||e.target).querySelector('.status a, a[href*="tran-dau"]');
+    if(link){
+      const href = link.getAttribute('href') || '';
+      const m = href.match(/\/tran-dau\/(\d+)\//);
+      if(m) window._currentEventId = m[1];
+    }
+  }
 
-  // Override loadMatchTab to handle detail tab
+  // Override loadMatchTab
+  const _origLoadMatchTab = window.loadMatchTab;
   window.loadMatchTab = async function(tab){
     if(tab === 'detail'){
       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');
+        if(t.textContent.includes('Chi tiết') || t.textContent.includes('📋')) t.classList.add('active');
       });
       const el = document.getElementById('mo-body');
       if(!el) return;
-      el.innerHTML = '<div class="md-loading"><div class="md-spinner"></div>Đang tải chi tiết trận đấu...</div>';
+      el.innerHTML = '<div class="md-no-data">⏳ Đang tải chi tiết trận đấu...</div>';
+      
+      const eventId = window._currentEventId;
+      if(!eventId){ 
+        el.innerHTML = '<div class="md-err">⚠️ Không tìm thấy mã trận đấu.<br><small>Hãy click vào một trận đấu cụ thể từ danh sách livescore.</small></div>'; 
+        return; 
+      }
+      
       try{
-        const eventId = window._currentEventId;
-        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); }
+        if(!r.ok) throw new Error('API error ' + r.status);
         const d = await r.json();
+        if(d.error) throw new Error(d.error);
         renderMatchDetail(el, d);
       }catch(e){
-        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>';
+        el.innerHTML = '<div class="md-err">⚠️ Lỗi tải chi tiết: ' + esc(e.message) + '<br><small>Event ID: ' + esc(String(eventId)) + '</small></div>';
       }
     } else {
-      _origLoadMatchTab(tab);
+      if(_origLoadMatchTab) _origLoadMatchTab(tab);
     }
   };
 
   function renderMatchDetail(el, data){
     let h = '';
 
-    // === 1. Preview / Commentaries ===
+    // 1. Preview / Commentaries
     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>';
-      let cleanHtml = data.commentaries_html
+      h += '<div class="md-sec"><div class="md-sec-title">📋 Thông tin trận đấu</div>';
+      let clean = 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>';
+      h += '<div class="md-preview-text">' + clean + '</div></div>';
     } else if(data.preview_text && data.preview_text.length > 0){
-      h += '<div class="md-section">';
-      h += '<div class="md-section-title">📋 Thông tin trận đấu</div>';
-      h += '<div class="md-preview-text">' + data.preview_text.map(t=>esc(t)).join('\n\n') + '</div>';
-      h += '</div>';
+      h += '<div class="md-sec"><div class="md-sec-title">📋 Thông tin trận đấu</div>';
+      h += '<div class="md-preview-text">' + data.preview_text.map(t=>esc(t)).join('<br><br>') + '</div></div>';
     }
 
-    // === 2. Lineups ===
+    // 2. Lineups
     if(data.lineups_html && data.lineups_html.length > 10){
-      h += '<div class="md-section">';
-      h += '<div class="md-section-title">⚽ Đội hình</div>';
-      let cleanLineups = data.lineups_html
-        .replace(/<script[^>]*>.*?<\/script>/gi, '')
-        .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
-        .replace(/<ins[^>]*>.*?<\/ins>/gi, '')
-        .replace(/<style[^>]*>.*?<\/style>/gi, '');
-      h += '<div class="md-lineups-container">' + cleanLineups + '</div>';
-      h += '</div>';
+      h += '<div class="md-sec"><div class="md-sec-title">⚽ Đội hình</div>';
+      h += '<div>' + data.lineups_html.replace(/<script[^>]*>.*?<\/script>/gi,'').replace(/<iframe[^>]*>.*?<\/iframe>/gi,'') + '</div></div>';
     } else if(data.lineups && (data.lineups.home_players || data.lineups.away_players)){
-      h += '<div class="md-section">';
-      h += '<div class="md-section-title">⚽ Đội hình</div>';
-      h += renderLineups(data.lineups);
-      h += '</div>';
+      h += '<div class="md-sec"><div class="md-sec-title">⚽ Đội hình</div>';
+      h += renderLineups(data.lineups) + '</div>';
     }
 
-    // === 3. Head-to-Head ===
+    // 3. H2H
     if(data.h2h_html && data.h2h_html.length > 10){
-      h += '<div class="md-section">';
-      h += '<div class="md-section-title">🔄 Đối đầu (H2H)</div>';
-      let cleanH2h = data.h2h_html
-        .replace(/<script[^>]*>.*?<\/script>/gi, '')
-        .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
-        .replace(/<style[^>]*>.*?<\/style>/gi, '');
-      h += '<div class="md-h2h-container">' + cleanH2h + '</div>';
-      h += '</div>';
+      h += '<div class="md-sec"><div class="md-sec-title">🔄 Đối đầu (H2H)</div>';
+      h += '<div>' + data.h2h_html.replace(/<script[^>]*>.*?<\/script>/gi,'').replace(/<iframe[^>]*>.*?<\/iframe>/gi,'') + '</div></div>';
     } else if(data.h2h && data.h2h.length > 0){
-      h += '<div class="md-section">';
-      h += '<div class="md-section-title">🔄 Đối đầu (H2H)</div>';
-      h += renderH2H(data.h2h);
-      h += '</div>';
+      h += '<div class="md-sec"><div class="md-sec-title">🔄 Đối đầu (H2H)</div>';
+      h += renderH2H(data.h2h) + '</div>';
     }
 
-    // === 4. Match Stats ===
+    // 4. Stats
     if(data.stats_html && data.stats_html.length > 10){
-      h += '<div class="md-section">';
-      h += '<div class="md-section-title">📊 Thống kê</div>';
-      let cleanStats = data.stats_html
-        .replace(/<script[^>]*>.*?<\/script>/gi, '')
-        .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
-        .replace(/<style[^>]*>.*?<\/style>/gi, '');
-      h += '<div class="md-stats-container">' + cleanStats + '</div>';
-      h += '</div>';
+      h += '<div class="md-sec"><div class="md-sec-title">📊 Thống kê</div>';
+      h += '<div>' + data.stats_html.replace(/<script[^>]*>.*?<\/script>/gi,'').replace(/<iframe[^>]*>.*?<\/iframe>/gi,'') + '</div></div>';
     }
 
-    // === 5. Match Info ===
+    // 5. Info
     if(data.info && Object.keys(data.info).length > 0){
-      h += '<div class="md-section">';
-      h += '<div class="md-section-title">📍 Thông tin</div>';
+      h += '<div class="md-sec"><div class="md-sec-title">📍 Thông tin</div>';
       h += '<div style="font-size:12px;color:#ccc;line-height:1.8;padding:8px;background:#1a1a1a;border-radius:8px">';
-      if(data.info.date) h += '<div>📅 Ngày: <b>' + esc(data.info.date) + '</b></div>';
-      if(data.info.time) h += '<div>🕐 Giờ: <b>' + esc(data.info.time) + '</b></div>';
-      if(data.info.stadium) h += '<div>🏟 Sân: <b>' + esc(data.info.stadium) + '</b></div>';
-      if(data.info.referee) h += '<div>👨‍⚖️ Trọng tài: <b>' + esc(data.info.referee) + '</b></div>';
+      if(data.info.date) h += '<div>📅 Ngày: <b>'+esc(data.info.date)+'</b></div>';
+      if(data.info.time) h += '<div>🕐 Giờ: <b>'+esc(data.info.time)+'</b></div>';
+      if(data.info.stadium) h += '<div>🏟 Sân: <b>'+esc(data.info.stadium)+'</b></div>';
+      if(data.info.referee) h += '<div>👨‍⚖️ Trọng tài: <b>'+esc(data.info.referee)+'</b></div>';
       h += '</div></div>';
     }
 
     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 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>';
+      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></div>';
     }
 
     el.innerHTML = h;
     el.querySelectorAll('a').forEach(a=>a.addEventListener('click', e=>e.preventDefault()));
   }
 
-  function renderLineups(lineups){
-    let h = '<div class="md-lineups">';
-    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>';
-    h += '<ul class="md-player-list">';
-    (lineups.home_players || []).forEach((p,i)=>{
-      h += '<li class="md-player-item"><span class="md-player-no">' + (i+1) + '</span>' + esc(p) + '</li>';
-    });
-    h += '</ul>';
-    if(lineups.home_subs && lineups.home_subs.length > 0){
-      h += '<div class="md-subs-title">🔄 Dự bị:</div>';
-      (lineups.home_subs || []).forEach(p=>{
-        h += '<div style="font-size:10px;color:#888;padding:2px 0">' + esc(p) + '</div>';
-      });
-    }
-    h += '</div>';
-    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>';
-    h += '<ul class="md-player-list">';
-    (lineups.away_players || []).forEach((p,i)=>{
-      h += '<li class="md-player-item"><span class="md-player-no">' + (i+1) + '</span>' + esc(p) + '</li>';
-    });
-    h += '</ul>';
-    if(lineups.away_subs && lineups.away_subs.length > 0){
-      h += '<div class="md-subs-title">🔄 Dự bị:</div>';
-      (lineups.away_subs || []).forEach(p=>{
-        h += '<div style="font-size:10px;color:#888;padding:2px 0">' + esc(p) + '</div>';
-      });
-    }
-    h += '</div>';
-    h += '</div>';
+  function renderLineups(l){
+    let h='<div class="md-lineups">';
+    h+='<div class="md-team-box"><div class="md-team-name">'+esc(l.home_team||'Đội nhà')+'</div>';
+    if(l.formation) h+='<div class="md-formation">'+esc(l.formation)+'</div>';
+    h+='<ul class="md-player-list">';
+    (l.home_players||[]).forEach((p,i)=>{h+='<li class="md-player-item"><span class="md-player-no">'+(i+1)+'</span>'+esc(p)+'</li>';});
+    h+='</ul>';
+    if(l.home_subs&&l.home_subs.length){h+='<div class="md-subs-title">Dự bị:</div>';(l.home_subs||[]).forEach(p=>{h+='<div style="font-size:10px;color:#888">'+esc(p)+'</div>';});}
+    h+='</div>';
+    h+='<div class="md-team-box"><div class="md-team-name">'+esc(l.away_team||'Đội khách')+'</div>';
+    if(l.away_formation) h+='<div class="md-formation">'+esc(l.away_formation)+'</div>';
+    h+='<ul class="md-player-list">';
+    (l.away_players||[]).forEach((p,i)=>{h+='<li class="md-player-item"><span class="md-player-no">'+(i+1)+'</span>'+esc(p)+'</li>';});
+    h+='</ul>';
+    if(l.away_subs&&l.away_subs.length){h+='<div class="md-subs-title">Dự bị:</div>';(l.away_subs||[]).forEach(p=>{h+='<div style="font-size:10px;color:#888">'+esc(p)+'</div>';});}
+    h+='</div></div>';
     return h;
   }
 
   function renderH2H(matches){
-    let h = '';
+    let h='';
     matches.forEach(m=>{
-      const isLive = m.status === 'live';
-      h += '<div class="md-h2h-item">';
-      h += '<span class="md-h2h-date">' + esc(m.date || '') + '</span>';
-      h += '<span class="md-h2h-teams">';
-      h += '<span class="md-h2h-home">' + esc(m.home || '') + '</span>';
-      h += '<span class="md-h2h-score">' + esc(m.score || 'vs') + '</span>';
-      h += '<span class="md-h2h-away">' + esc(m.away || '') + '</span>';
-      h += '</span>';
-      if(isLive) h += '<span class="md-h2h-live">LIVE</span>';
-      h += '</div>';
+      h+='<div class="md-h2h-item">';
+      h+='<span class="md-h2h-date">'+esc(m.date||'')+'</span>';
+      h+='<span class="md-h2h-teams"><span class="md-h2h-home">'+esc(m.home||'')+'</span>';
+      h+='<span class="md-h2h-score">'+esc(m.score||'vs')+'</span>';
+      h+='<span class="md-h2h-away">'+esc(m.away||'')+'</span></span>';
+      h+='</div>';
     });
     return h;
   }
 
-  // Add the "Chi tiết" tab to the match overlay
   function injectDetailTab(){
-    const check = setInterval(()=>{
-      const tabsContainer = document.querySelector('.mo-tabs');
-      if(tabsContainer && !document.querySelector('.mo-tab-detail')){
-        const existing = document.querySelector('.mo-tab-detail');
-        if(existing) existing.remove();
-        const detailTab = document.createElement('span');
-        detailTab.className = 'mo-tab mo-tab-detail';
-        detailTab.textContent = '📋 Chi tiết';
-        detailTab.onclick = ()=>window.loadMatchTab('detail');
-        // Insert as first tab
-        tabsContainer.insertBefore(detailTab, tabsContainer.firstChild);
-        clearInterval(check);
-      }
-    }, 500);
-    setTimeout(()=>clearInterval(check), 30000);
+    const tabs = document.querySelector('.mo-tabs');
+    if(!tabs || document.querySelector('.mo-tab-detail')) return;
+    const d = document.createElement('span');
+    d.className = 'mo-tab mo-tab-detail';
+    d.textContent = '📋 Chi tiết';
+    d.onclick = ()=>window.loadMatchTab('detail');
+    // Insert as first tab
+    tabs.insertBefore(d, tabs.firstChild);
   }
 
-  // Override openMatch to inject detail tab
-  const _origOpenMatch = window.openMatch;
-  if(_origOpenMatch){
-    window.openMatch = function(id){
-      _origOpenMatch(id);
-      setTimeout(injectDetailTab, 300);
-    };
-  }
+  // Intercept clicks in livescore to capture event_id
+  document.addEventListener('click', function(e){
+    const md = e.target.closest('.match-detail');
+    if(md){
+      const link = md.querySelector('.status a, a[href*="tran-dau"]');
+      if(link){
+        const href = link.getAttribute('href') || '';
+        const m = href.match(/\/tran-dau\/(\d+)\//);
+        if(m){ window._currentEventId = m[1]; }
+      }
+    }
+  }, true);
 
-  if(document.readyState === 'loading'){
-    document.addEventListener('DOMContentLoaded', ()=>setTimeout(injectDetailTab, 1000));
-  } else {
-    setTimeout(injectDetailTab, 1000);
-  }
+  // Also inject on DOM ready
+  if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',()=>setTimeout(injectDetailTab,1000));
+  else setTimeout(injectDetailTab,1000);
 })();