Upload static/match_detail_v6.js with huggingface_hub

static/match_detail_v6.js

@@ -0,0 +1,212 @@
+// === VNEWS — Match Detail UI (v6-final)
+(function(){
+  if(window._mdLoadedV6) return;
+  window._mdLoadedV6 = true;
+
+  if(!document.getElementById('mdv6-css')){
+    const s=document.createElement('style');
+    s.id='mdv6-css';
+    s.textContent=`
+    .mdv6-sec{margin-bottom:14px}
+    .mdv6-sec-title{font-size:12px;font-weight:800;color:#5cb87a;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #2a2a2a}
+    .mdv6-header{background:linear-gradient(135deg,#1a2a1f,#0d1117);border:1px solid #2d8659;border-radius:10px;padding:12px;text-align:center;margin-bottom:12px}
+    .mdv6-teams{display:flex;align-items:center;justify-content:center;gap:12px}
+    .mdv6-team{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
+    .mdv6-team img{width:44px;height:44px;object-fit:contain;background:#111;border-radius:50%;padding:4px;border:2px solid #333}
+    .mdv6-vs .mdv6-score{font-size:26px;font-weight:900;color:#f0c040}
+    .mdv6-vs .mdv6-status{font-size:9px;font-weight:700;padding:2px 10px;border-radius:4px}
+    .mdv6-vs .mdv6-status.finished{background:#2d8659;color:#a8ffb8}
+    .mdv6-vs .mdv6-status.live{background:#c0392b;color:#fff;animation:mdv6pulse 1.5s infinite}
+    .mdv6-tabs{display:flex;gap:4px;margin-bottom:10px}
+    .mdv6-tab-btn{flex:1;padding:9px;border:none;border-radius:6px;font-size:11px;font-weight:700;cursor:pointer}
+    .mdv6-tab-btn.active{background:#2d8659;color:#fff}
+    .mdv6-tab-btn:not(.active){background:#1a1a1a;color:#888}
+    .mdv6-tab-content{display:none}
+    .mdv6-tab-content.active{display:block}
+    .mdv6-timeline{}
+    .mdv6-period{font-size:11px;font-weight:800;color:#5cb87a;padding:6px 0;border-bottom:1px solid #2a2a2a;margin-bottom:2px}
+    .mdv6-ev{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid #1a1a1a}
+    .mdv6-ev-time{font-size:11px;font-weight:800;color:#f0c040;min-width:40px;text-align:center}
+    .mdv6-ev-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}
+    .mdv6-ev-body{flex:1}
+    .mdv6-ev-team{font-size:8px;font-weight:800;padding:1px 5px;border-radius:3px;margin-right:4px}
+    .mdv6-ev-team.home{background:#1a3a2a;color:#5cb87a}
+    .mdv6-ev-team.away{background:#3a2a1a;color:#e85d04}
+    .mdv6-ev-title{font-size:12px;color:#fff;font-weight:700}
+    .mdv6-ev-detail{font-size:11px;color:#999;margin-top:3px}
+    .mdv6-stat-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:11px;border-bottom:1px solid #1a1a1a}
+    .mdv6-stat-home{width:36px;text-align:right;color:#5cb87a;font-weight:700}
+    .mdv6-stat-label{flex:1;text-align:center;color:#999;font-size:10px}
+    .mdv6-stat-away{width:36px;text-align:left;color:#e85d04;font-weight:700}
+    .mdv6-pred{background:linear-gradient(135deg,#1a2a1f,#0d1117);border:1px solid #2d8659;border-radius:10px;padding:10px;margin-bottom:12px}
+    .mdv6-pred-title{font-size:9px;color:#5cb87a;font-weight:700;text-align:center;margin-bottom:8px}
+    .mdv6-pred-teams{display:flex;align-items:center;justify-content:center;gap:8px}
+    .mdv6-pred-vs{font-size:14px;font-weight:800;color:#f0c040}
+    .mdv6-recent-row{display:flex;align-items:center;gap:8px;padding:6px 8px;background:#111;border-radius:6px;margin-bottom:3px;font-size:11px}
+    .mdv6-recent-date{font-size:9px;color:#888;min-width:55px}
+    .mdv6-recent-score{font-size:11px;font-weight:800;color:#f0c040;min-width:36px;text-align:center}
+    .mdv6-no-data{text-align:center;color:#666;padding:16px 8px;font-size:12px}
+    .mdv6-warn{color:#f0c040;font-size:12px;padding:8px;background:#2a2a1a;border-radius:6px}
+    .mdv6-source{font-size:9px;color:#5cb87a;text-align:center;padding:3px;background:#1a2a1f;border-radius:4px;margin-bottom:8px}
+    @keyframes mdv6spin{to{transform:rotate(360deg)}}
+    @keyframes mdv6pulse{0%,100%{opacity:1}50%{opacity:.5}}
+    `;
+    document.head.appendChild(s);
+  }
+
+  function esc(s){const d=document.createElement('div');d.textContent=s||'';return d.innerHTML;}
+
+  // Hook: override loadMatchTab to use fast endpoint
+  window._origLoadMatchTab = window.loadMatchTab;
+  window.loadMatchTab = async function(tab){
+    if(tab!=='detail'){
+      if(window._origLoadMatchTab) return window._origLoadMatchTab.call(this, tab);
+      return;
+    }
+    document.querySelectorAll('.mo-tab').forEach(t=>t.classList.remove('active'));
+    const el=document.getElementById('mo-body');
+    if(!el)return;
+    el.innerHTML='<div class="mdv6-no-data"><div style="display:inline-block;width:20px;height:20px;border:2px solid #333;border-top-color:#5cb87a;border-radius:50%;animation:mdv6spin .8s linear infinite"></div><div style="margin-top:8px">Đang tải...</div></div>';
+    
+    const eventId=window._currentEventId;
+    let matchUrl = window._currentMatchUrl;
+    if(!eventId){el.innerHTML='<div class="mdv6-warn">⚠️ Không tìm thấy mã trận đấu.</div>';return;}
+
+    // Auto-fetch slug if missing (for featured matches clicked without URL)
+    if(!matchUrl && eventId){
+      try{
+        matchUrl = 'https://bongda.com.vn/tran-dau/' + eventId;
+        // Store for next time
+        window._currentMatchUrl = matchUrl;
+      }catch(e){}
+    }
+
+    try{
+      const url = '/api/match/' + eventId + '/detail' + (matchUrl ? '?url=' + encodeURIComponent(matchUrl) : '');
+      const r = await fetch(url, {signal: AbortSignal.timeout(25000)});
+      const data = await r.json();
+      if(data.found && data.info && data.info.home_team){
+        el.innerHTML = '<div class="mdv6-source">📡 Dữ liệu server-side nhanh</div>';
+        renderMatchDetail(el, data);
+      }else{
+        el.innerHTML = '<div class="mdv6-warn">⚠️ Không thể tải dữ liệu.<br>Event ID: ' + esc(String(eventId)) + '<br><a href="https://bongda.com.vn/tran-dau/' + eventId + '" target="_blank">Xem trên bongda.com.vn</a></div>';
+      }
+    }catch(e){
+      el.innerHTML = '<div class="mdv6-warn">⚠️ Lỗi: ' + esc(e.message) + '</div>';
+    }
+  };
+
+  function renderMatchDetail(el, data){
+    const info=data.info||{};
+    let h='';
+
+    h+='<div class="mdv6-header"><div class="mdv6-teams">';
+    h+='<div class="mdv6-team">';
+    if(info.home_logo)h+='<img src="' + esc(info.home_logo) + '" alt="' + esc(info.home_team) + '">';
+    h+='<span>' + esc(info.home_team) + '</span></div>';
+    h+='<div class="mdv6-vs">';
+    if(info.score)h+='<span class="mdv6-score">' + esc(info.score) + '</span>';
+    if(info.status_label){
+      const sl=info.status_label;let cls='finished';
+      if(sl==='LIVE'||sl==='H1'||sl==='H2')cls='live';
+      h+='<span class="mdv6-status ' + cls + '">' + esc(sl) + '</span>';
+    }
+    h+='</div><div class="mdv6-team">';
+    if(info.away_logo)h+='<img src="' + esc(info.away_logo) + '" alt="' + esc(info.away_team) + '">';
+    h+='<span>' + esc(info.away_team) + '</span></div></div></div>';
+
+    const hasEvents=data.events&&data.events.length>0;
+    const hasStats=data.h2h_stats_parsed||data.prediction||data.recent_matches;
+    
+    if(hasStats||hasEvents){
+      h+='<div class="mdv6-tabs">';
+      if(hasStats)h+='<button class="mdv6-tab-btn active" onclick="window._mdv6ShowTab(\'stats\',this)">📊 Thống kê</button>';
+      if(hasEvents)h+='<button class="mdv6-tab-btn" onclick="window._mdv6ShowTab(\'events\',this)">📢 Diễn biến</button>';
+      h+='</div>';
+    }
+
+    if(hasStats){
+      h+='<div id="mdv6-tab-stats" class="mdv6-tab-content" style="display:' + (hasEvents?'none':'block') + '">';
+      if(data.h2h_stats_parsed){
+        h+='<div class="mdv6-sec"><div class="mdv6-sec-title">📊 Tỷ lệ đối đầu</div>';
+        for(const label in data.h2h_stats_parsed){
+          const sv=data.h2h_stats_parsed[label];
+          h+='<div class="mdv6-stat-row"><span class="mdv6-stat-home">' + esc(sv.home) + '</span><span class="mdv6-stat-label">' + esc(label) + '</span><span class="mdv6-stat-away">' + esc(sv.away) + '</span></div>';
+        }
+        h+='</div>';
+      }
+      if(data.prediction){
+        h+='<div class="mdv6-pred"><div class="mdv6-pred-title">🎯 Dự đoán</div><div class="mdv6-pred-teams">';
+        h+='<span>' + esc(data.prediction.home_name || '') + '</span><span class="mdv6-pred-vs">' + esc(data.prediction.result || 'VS') + '</span><span>' + esc(data.prediction.away_name || '') + '</span></div></div>';
+      }
+      if(data.recent_matches){
+        h+='<div class="mdv6-sec"><div class="mdv6-sec-title">📋 Kết quả gần nhất</div>';
+        data.recent_matches.slice(0,6).forEach(m=>{
+          h+='<div class="mdv6-recent-row"><span class="mdv6-recent-date">' + esc(m.date) + '</span><span>' + esc(m.home) + '</span><span class="mdv6-recent-score">' + esc(m.score) + '</span><span>' + esc(m.away) + '</span></div>';
+        });
+        h+='</div>';
+      }
+      h+='</div>';
+    }
+
+    if(hasEvents){
+      h+='<div id="mdv6-tab-events" class="mdv6-tab-content" style="display:' + (hasStats?'none':'block') + '">';
+      h+='<div class="mdv6-sec"><div class="mdv6-sec-title">📢 Diễn biến trận đấu</div><div class="mdv6-timeline">';
+      let lastPeriod='';
+      data.events.forEach(ev=>{
+        if(ev.period&&ev.period!==lastPeriod){
+          h+='<div class="mdv6-period">' + esc(ev.period) + '</div>';
+          lastPeriod=ev.period;
+        }
+        const isHome=ev.team==='home';
+        const badge=isHome?'<span class="mdv6-ev-team home">HOME</span>':'<span class="mdv6-ev-team away">AWAY</span>';
+        let icon='', title='', detail='';
+        
+        if(ev.type==='goal'){icon='⚽';title='BÀN THẮNG';detail=esc(ev.players);}
+        else if(ev.type==='redcard'){icon='🟥';title='THỺ ĐỎ';detail=esc(ev.players);}
+        else if(ev.type==='yellowcard'){icon='🟨';title='THỺ VÀNG';detail=esc(ev.players);}
+        else if(ev.type==='substitution'){icon='↔️';title='THAY ĐỔI';detail=esc(ev.players);}
+        else{icon='•';detail=esc(ev.players);}
+        
+        h+='<div class="mdv6-ev"><span class="mdv6-ev-time">' + esc(ev.time||'') + '</span><span class="mdv6-ev-icon">' + icon + '</span><div class="mdv6-ev-body">' + badge + ' <span class="mdv6-ev-title">' + title + '</span>';
+        if(detail)h+='<div class="mdv6-ev-detail">' + detail + '</div>';
+        h+='</div></div>';
+      });
+      h+='</div></div>';
+    }
+
+    el.innerHTML=h;
+
+    window._mdv6ShowTab=(tab,btn)=>{
+      document.querySelectorAll('.mdv6-tab-btn').forEach(b=>{b.classList.remove('active');b.style.background='#1a1a1a';b.style.color='#888';});
+      if(btn){btn.classList.add('active');btn.style.background='#2d8659';btn.style.color='#fff';}
+      const stats=document.getElementById('mdv6-tab-stats');
+      const events=document.getElementById('mdv6-tab-events');
+      if(stats)stats.style.display=tab==='stats'?'block':'none';
+      if(events)events.style.display=tab==='events'?'block':'none';
+    };
+  }
+
+  // Auto-extract match ID/slug on click
+  document.addEventListener('click',e=>{
+    const md=e.target.closest('.match-detail, .match-item');
+    if(!md)return;
+    const link=md.querySelector('a[href*="tran-dau"]');
+    if(link){
+      const href=link.getAttribute('href')||'';
+      const m=href.match(/\/tran-dau\/(\d+)\/(?:centre|preview)\/(.+)/);
+      if(m){
+        window._currentEventId=m[1];
+        window._currentSlug=m[2];
+        window._currentMatchUrl='https://bongda.com.vn' + href;
+      }else{
+        const m2=href.match(/\/tran-dau\/(\d+)/);
+        if(m2){
+          window._currentEventId=m2[1];
+          window._currentMatchUrl='https://bongda.com.vn' + href;
+        }
+      }
+    }
+  },true);
+
+})();