Upload static/match_detail.js

static/match_detail.js

@@ -0,0 +1,245 @@
+// === VNEWS — Match Detail UI ===
+// Fetches & renders match detail (preview, lineups, H2H, overlay stats) from bongda.com.vn
+// Loaded after app_v2.js; extends the match overlay with a "Chi tiết" tab.
+
+(function(){
+  // Inject styles
+  if(document.getElementById('match-detail-css')) return;
+  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-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}
+  .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}
+  .md-formation{font-size:10px;color:#888;text-align:center;margin-bottom:8px}
+  .md-player-list{list-style:none;padding:0;margin:0}
+  .md-player-item{font-size:11px;color:#ccc;padding:3px 0;border-bottom:1px solid #1a2a1f;display:flex;align-items:center;gap:6px}
+  .md-player-no{width:18px;height:18px;border-radius:50%;background:#2d8659;color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 18px}
+  .md-subs-title{font-size:11px;color:#888;margin-top:8px;margin-bottom:4px;font-style:italic}
+  .md-h2h-item{display:flex;align-items:center;gap:8px;padding:8px;background:#1a1a1a;border-radius:6px;margin-bottom:4px}
+  .md-h2h-date{font-size:10px;color:#888;min-width:60px}
+  .md-h2h-teams{flex:1;display:flex;align-items:center;gap:6px;font-size:11px;color:#ddd}
+  .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}
+  `;
+  document.head.appendChild(s);
+
+  // 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>';
+      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; }
+        const r = await fetch(`/api/match/${eventId}/detail`);
+        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>';
+      }
+    } else {
+      // Call original for comm/stats tabs
+      _origLoadMatchTab(tab);
+    }
+  };
+
+  function renderMatchDetail(el, data){
+    let h = '';
+
+    // === 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>';
+      // 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="[^"]*display:\s*none[^"]*"/gi, 'style="display:none"');
+      h += '<div class="md-preview-container">' + cleanHtml + '</div>';
+      h += '</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>';
+    }
+
+    // === 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, '');
+      h += '<div class="md-lineups-container">' + cleanLineups + '</div>';
+      h += '</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>';
+    }
+
+    // === 3. Head-to-Head ===
+    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, '');
+      h += '<div class="md-h2h-container">' + cleanH2h + '</div>';
+      h += '</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>';
+    }
+
+    // === 4. Match 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, '');
+      h += '<div class="md-stats-container">' + cleanStats + '</div>';
+      h += '</div>';
+    }
+
+    // === 5. Match 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 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>';
+      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.</small></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>';
+    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>';
+    // 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>';
+    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>';
+    return h;
+  }
+
+  function renderH2H(matches){
+    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>';
+    });
+    return h;
+  }
+
+  // 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);
+        clearInterval(check);
+      }
+    }, 500);
+    // Stop checking after 30s
+    setTimeout(()=>clearInterval(check), 30000);
+  }
+
+  // Override openMatch to inject detail tab
+  const _origOpenMatch = window.openMatch;
+  if(_origOpenMatch){
+    window.openMatch = function(id){
+      _origOpenMatch(id);
+      setTimeout(injectDetailTab, 300);
+    };
+  }
+
+  // Also inject on DOM ready
+  if(document.readyState === 'loading'){
+    document.addEventListener('DOMContentLoaded', ()=>setTimeout(injectDetailTab, 1000));
+  } else {
+    setTimeout(injectDetailTab, 1000);
+  }
+})();