Upload static/match_detail.js

static/match_detail.js

@@ -1,6 +1,5 @@
 // === VNEWS — Match Detail UI ===
-// Renders match detail (preview, lineups, H2H) in the match overlay
-// Integrates with app_v2.js openMatch / loadMatchTab
+// Renders match detail (pre-match info, lineups, H2H, form, stats) in the match overlay
 
 (function(){
   if(window._mdLoaded) return;
@@ -13,6 +12,16 @@
     s.textContent=`
     .md-sec{margin-bottom:14px}
     .md-sec-title{font-size:13px;font-weight:800;color:#5cb87a;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #2a2a2a;display:flex;align-items:center;gap:6px}
+    .md-pre-match{background:linear-gradient(135deg,#1a2a1f,#0d1117);border:1px solid #2d8659;border-radius:10px;padding:12px;text-align:center;margin-bottom:12px}
+    .md-pre-league{font-size:9px;color:#5cb87a;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
+    .md-pre-teams{display:flex;align-items:center;justify-content:center;gap:12px}
+    .md-pre-team{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
+    .md-pre-team img{width:32px;height:32px;object-fit:contain}
+    .md-pre-team span{font-size:11px;color:#ddd;text-align:center}
+    .md-pre-vs{font-size:18px;font-weight:900;color:#f0c040;min-width:40px;text-align:center}
+    .md-pre-info{display:flex;gap:12px;justify-content:center;margin-top:10px;flex-wrap:wrap}
+    .md-pre-info-item{font-size:10px;color:#aaa;display:flex;align-items:center;gap:3px}
+    .md-pre-info-item b{color:#ddd;font-size:11px}
     .md-preview-text{font-size:12px;color:#ccc;line-height:1.6;background:#1a1a1a;border-radius:8px;padding:10px;border-left:3px solid #2d8659;max-height:300px;overflow-y:auto}
     .md-lineups{display:grid;grid-template-columns:1fr 1fr;gap:10px}
     .md-team-box{background:#1a2a1f;border:1px solid #2a3a2a;border-radius:8px;padding:8px}
@@ -20,11 +29,29 @@
     .md-formation{font-size:9px;color:#888;text-align:center;margin-bottom:6px}
     .md-player-item{font-size:10px;color:#ccc;padding:2px 0;border-bottom:1px solid #1a2a1f}
     .md-h2h-item{display:flex;align-items:center;gap:6px;padding:6px;background:#1a1a1a;border-radius:6px;margin-bottom:3px;font-size:11px}
-    .md-h2h-date{font-size:9px;color:#888;min-width:55px}
-    .md-h2h-teams{flex:1;display:flex;align-items:center;gap:4px}
-    .md-h2h-home{text-align:right;flex:1;color:#ddd}
-    .md-h2h-away{text-align:left;flex:1;color:#ddd}
-    .md-h2h-score{font-size:12px;font-weight:800;color:#f0c040;min-width:36px;text-align:center}
+    .md-h2h-date{font-size:9px;color:#888;min-width:55px;flex-shrink:0}
+    .md-h2h-league{font-size:8px;color:#666}
+    .md-h2h-teams{flex:1;display:flex;align-items:center;gap:4px;min-width:0}
+    .md-h2h-home{text-align:right;flex:1;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .md-h2h-away{text-align:left;flex:1;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .md-h2h-score{font-size:11px;font-weight:800;color:#f0c040;min-width:36px;text-align:center;flex-shrink:0}
+    .md-h2h-stats{display:flex;flex-direction:column;gap:4px}
+    .md-h2h-stat-row{display:flex;align-items:center;gap:8px;font-size:10px}
+    .md-h2h-stat-home{width:30px;text-align:right;color:#5cb87a;font-weight:700;flex-shrink:0}
+    .md-h2h-stat-label{flex:1;text-align:center;color:#888;font-size:9px}
+    .md-h2h-stat-away{width:30px;text-align:left;color:#e85d04;font-weight:700;flex-shrink:0}
+    .md-form-item{display:flex;align-items:center;gap:6px;padding:5px 6px;background:#1a1a1a;border-radius:6px;margin-bottom:2px;font-size:10px}
+    .md-form-result{padding:1px 5px;border-radius:3px;font-size:8px;font-weight:800;color:#fff;flex-shrink:0}
+    .md-form-result.T{background:#2d8659}
+    .md-form-result.B{background:#c0392b}
+    .md-form-result.H{background:#666}
+    .md-form-date{font-size:9px;color:#888;min-width:50px;flex-shrink:0}
+    .md-form-teams{flex:1;display:flex;align-items:center;gap:4px;min-width:0}
+    .md-form-home{text-align:right;flex:1;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .md-form-away{text-align:left;flex:1;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .md-form-score{font-size:10px;font-weight:700;color:#f0c040;min-width:30px;text-align:center;flex-shrink:0}
+    .md-form-section{margin-bottom:10px}
+    .md-form-team-label{font-size:11px;font-weight:700;color:#aaa;margin-bottom:4px}
     .md-no-data{color:#777;font-size:12px;padding:16px;text-align:center}
     .md-err{color:#e74c3c;font-size:12px;padding:16px;text-align:center}
     .mo-tab-detail{}
@@ -34,12 +61,11 @@
 
   function esc(s){return String(s||'').replace(/[&<>"']/g,function(m){return{'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]})}
 
-  // === 1. Override openMatch to always set _currentEventId and show detail tab first ===
+  // === 1. Override openMatch to always set _currentEventId ===
   const _origOpenMatch = window.openMatch;
   window.openMatch = function(id){
     if(id) window._currentEventId = String(id);
     if(_origOpenMatch) _origOpenMatch.call(this, id);
-    // Switch to detail tab
     setTimeout(function(){
       injectDetailTab();
       loadMatchTab('detail');
@@ -53,24 +79,19 @@
       if(_origLoadMatchTab) _origLoadMatchTab.call(this, tab);
       return;
     }
-
-    // Update tab UI — highlight the Chi tiết tab
     document.querySelectorAll('.mo-tab').forEach(function(t){ t.classList.remove('active'); });
     document.querySelectorAll('.mo-tab').forEach(function(t){
       const txt = t.textContent || '';
       if(txt.includes('Chi tiết') || txt.includes('📋')) t.classList.add('active');
     });
-
     const el = document.getElementById('mo-body');
     if(!el) return;
     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>';
+      el.innerHTML = '<div class="md-err">⚠️ Không tìm thấy mã trận đấu.</div>';
       return;
     }
-
     try{
       const r = await fetch('/api/match/' + eventId + '/detail');
       if(!r.ok) throw new Error('API error ' + r.status);
@@ -86,92 +107,121 @@
   function renderMatchDetail(el, data){
     let h = '';
 
-    // 1. Preview / Commentaries (raw HTML from bongda)
-    if(data.commentaries_html && data.commentaries_html.length > 10){
-      h += '<div class="md-sec"><div class="md-sec-title">📋 Thông tin trận đấu</div>';
-      let clean = data.commentaries_html
+    // 0. Pre-match info card
+    const info = data.info || {};
+    if(info.home_team && info.away_team){
+      h += '<div class="md-pre-match">';
+      if(info.league) h += '<div class="md-pre-league">'+esc(info.league)+'</div>';
+      h += '<div class="md-pre-teams">';
+      h += '<div class="md-pre-team">';
+      if(info.home_logo) h += '<img src="'+esc(info.home_logo)+'" alt="">';
+      h += '<span>'+esc(info.home_team)+'</span></div>';
+      h += '<div class="md-pre-vs">VS</div>';
+      h += '<div class="md-pre-team">';
+      if(info.away_logo) h += '<img src="'+esc(info.away_logo)+'" alt="">';
+      h += '<span>'+esc(info.away_team)+'</span></div>';
+      h += '</div>';
+      if(info.date || info.time || info.stadium || info.referee){
+        h += '<div class="md-pre-info">';
+        if(info.date) h += '<span class="md-pre-info-item">📅 <b>'+esc(info.date)+'</b></span>';
+        if(info.time) h += '<span class="md-pre-info-item">🕐 <b>'+esc(info.time)+'</b></span>';
+        if(info.stadium) h += '<span class="md-pre-info-item">🏟 <b>'+esc(info.stadium)+'</b></span>';
+        if(info.referee) h += '<span class="md-pre-info-item">👨‍⚖️ <b>'+esc(info.referee)+'</b></span>';
+        h += '</div>';
+      }
+      h += '</div>';
+    } else if(data.pre_match_html){
+      let clean = data.pre_match_html
         .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
         .replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi, '')
         .replace(/<ins[^>]*>[\s\S]*?<\/ins>/gi, '');
-      h += '<div class="md-preview-text">' + clean + '</div></div>';
-    } else if(data.preview_text && data.preview_text.length > 0){
       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(function(t){return esc(t);}).join('<br><br>') + '</div></div>';
+      h += '<div class="md-preview-text">' + clean + '</div></div>';
     }
 
-    // 2. Lineups (raw HTML)
-    if(data.lineups_html && data.lineups_html.length > 10){
-      h += '<div class="md-sec"><div class="md-sec-title">⚽ Đội hình</div>';
-      h += '<div>' + data.lineups_html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi,'').replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi,'') + '</div></div>';
-    } else if(data.lineups && (data.lineups.home_players || data.lineups.away_players)){
-      h += '<div class="md-sec"><div class="md-sec-title">⚽ Đội hình</div>';
-      h += renderLineups(data.lineups) + '</div>';
+    // 1. H2H Stats comparison
+    if(data.h2h_stats_parsed && Object.keys(data.h2h_stats_parsed).length > 0){
+      h += '<div class="md-sec"><div class="md-sec-title">📊 Thống kê đối đầu</div>';
+      h += '<div class="md-h2h-stats">';
+      const statLabels = data.h2h_stats_parsed;
+      for(const label in statLabels){
+        const s = statLabels[label];
+        h += '<div class="md-h2h-stat-row">';
+        h += '<span class="md-h2h-stat-home">'+esc(s.home)+'</span>';
+        h += '<span class="md-h2h-stat-label">'+esc(label)+'</span>';
+        h += '<span class="md-h2h-stat-away">'+esc(s.away)+'</span>';
+        h += '</div>';
+      }
+      h += '</div></div>';
+    } else if(data.h2h_stats_html && data.h2h_stats_html.length > 10){
+      h += '<div class="md-sec"><div class="md-sec-title">📊 Thống kê đối đầu</div>';
+      h += '<div>' + data.h2h_stats_html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi,'').replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi,'') + '</div></div>';
     }
 
-    // 3. H2H (raw HTML)
-    if(data.h2h_html && data.h2h_html.length > 10){
-      h += '<div class="md-sec"><div class="md-sec-title">🔄 Đối đầu (H2H)</div>';
+    // 2. H2H matches
+    if(data.h2h && data.h2h.length > 0){
+      h += '<div class="md-sec"><div class="md-sec-title">🔄 Lịch sử đối đầu</div>';
+      const h2hList = data.h2h.slice(0, 10);
+      h2hList.forEach(function(m){
+        h += '<div class="md-h2h-item">';
+        h += '<span class="md-h2h-date">'+esc(m.date||'')+'</span>';
+        if(m.league) h += '<span class="md-h2h-league">'+esc(m.league)+'</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></div>';
+      });
+      h += '</div>';
+    } else if(data.h2h_html && data.h2h_html.length > 10){
+      h += '<div class="md-sec"><div class="md-sec-title">🔄 Lịch sử đối đầu</div>';
       h += '<div>' + data.h2h_html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi,'').replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi,'') + '</div></div>';
-    } else if(data.h2h && data.h2h.length > 0){
-      h += '<div class="md-sec"><div class="md-sec-title">🔄 Đối đầu (H2H)</div>';
-      h += renderH2H(data.h2h) + '</div>';
     }
 
-    // 4. Stats (raw HTML)
-    if(data.stats_html && data.stats_html.length > 10){
-      h += '<div class="md-sec"><div class="md-sec-title">📊 Thống kê</div>';
-      h += '<div>' + data.stats_html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi,'').replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi,'') + '</div></div>';
+    // 3. Team form
+    if((data.home_form && data.home_form.length > 0) || (data.away_form && data.away_form.length > 0)){
+      h += '<div class="md-sec"><div class="md-sec-title">📈 Phong độ gần đây</div>';
+      if(data.home_form && data.home_form.length > 0){
+        h += '<div class="md-form-section">';
+        h += '<div class="md-form-team-label">🏠 Đội nhà</div>';
+        data.home_form.slice(0, 5).forEach(function(m){ h += renderFormItem(m); });
+        h += '</div>';
+      }
+      if(data.away_form && data.away_form.length > 0){
+        h += '<div class="md-form-section">';
+        h += '<div class="md-form-team-label">✈️ Đội khách</div>';
+        data.away_form.slice(0, 5).forEach(function(m){ h += renderFormItem(m); });
+        h += '</div>';
+      }
+      h += '</div>';
     }
 
-    // 5. Info
-    if(data.info && Object.keys(data.info).length > 0){
-      h += '<div class="md-sec"><div class="md-sec-title">📍 Thông tin</div>';
-      h += '<div style="font-size:11px;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>';
-      h += '</div></div>';
+    // 4. Player performance stats
+    if(data.stats_html && data.stats_html.length > 10){
+      h += '<div class="md-sec"><div class="md-sec-title">🌟 Thông số cầu thủ</div>';
+      h += '<div>' + data.stats_html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi,'').replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/gi,'') + '</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></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;
-    // Prevent link navigation inside overlay
     el.querySelectorAll('a').forEach(function(a){ a.addEventListener('click', function(e){ e.preventDefault(); }); });
   }
 
-  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>';
-    (l.home_players||[]).forEach(function(p,i){h+='<div class="md-player-item">'+(i+1)+'. '+esc(p)+'</div>';});
-    if(l.home_subs&&l.home_subs.length){h+='<div style="font-size:9px;color:#888;margin-top:6px;font-style:italic">Dự bị:</div>';(l.home_subs||[]).forEach(function(p){h+='<div style="font-size:9px;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>';
-    (l.away_players||[]).forEach(function(p,i){h+='<div class="md-player-item">'+(i+1)+'. '+esc(p)+'</div>';});
-    if(l.away_subs&&l.away_subs.length){h+='<div style="font-size:9px;color:#888;margin-top:6px;font-style:italic">Dự bị:</div>';(l.away_subs||[]).forEach(function(p){h+='<div style="font-size:9px;color:#888">'+esc(p)+'</div>';});}
-    h+='</div></div>';
-    return h;
-  }
-
-  function renderH2H(matches){
-    let h='';
-    matches.forEach(function(m){
-      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>';
-    });
+  function renderFormItem(m){
+    let h = '<div class="md-form-item">';
+    if(m.result) h += '<span class="md-form-result '+esc(m.result)+'">'+esc(m.result)+'</span>';
+    h += '<span class="md-form-date">'+esc(m.date||'')+'</span>';
+    h += '<span class="md-form-teams">';
+    h += '<span class="md-form-home">'+esc(m.home||'')+'</span>';
+    h += '<span class="md-form-score">'+esc(m.score||'')+'</span>';
+    h += '<span class="md-form-away">'+esc(m.away||'')+'</span>';
+    h += '</span></div>';
     return h;
   }
 
-  // === 4. Inject "Chi tiết" tab into overlay ===
+  // === 4. Inject "Chi tiết" tab ===
   function injectDetailTab(){
     const tabs = document.querySelector('.mo-tabs');
     if(!tabs || document.querySelector('.mo-tab-detail')) return;
@@ -182,7 +232,7 @@
     tabs.insertBefore(d, tabs.firstChild);
   }
 
-  // === 5. Intercept clicks in livescore to capture event_id ===
+  // === 5. Intercept clicks to capture event_id ===
   document.addEventListener('click', function(e){
     const md = e.target.closest('.match-detail');
     if(!md) return;
@@ -194,7 +244,6 @@
     }
   }, true);
 
-  // Try to inject tab on DOM ready
   if(document.readyState==='loading') document.addEventListener('DOMContentLoaded', function(){ setTimeout(injectDetailTab, 1000); });
   else setTimeout(injectDetailTab, 1000);
 })();