public/lab8/task3/app.js - main - Cooolprogrammers/web-nodejs-labs

public/lab8/task3/app.js

76 строк2 KB

darkvoid6@mail.ru

ЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ

18 дек 2025, 07:59

18 дек 2025, 07:59f2c4f06

// app.js
const tbody = document.querySelector('#table tbody');

function rowClass(m) {
  if (m.score1 === m.score2) return 'draw';
  return m.score1 > m.score2 ? 'win1' : 'win2';
}

function renderTable(matches) {
  if (!matches || matches.length === 0) {
    tbody.innerHTML = `
      <tr>
        <td colspan="6" class="empty-table">
          <div class="empty-icon">⚽</div>
          <p>Данные матчей не найдены</p>
          <small>Нажмите кнопку выше для загрузки результатов</small>
        </td>
      </tr>
    `;
    return;
  }

  tbody.innerHTML = '';
  
  for (const m of matches) {
    const tr = document.createElement('tr');
    tr.className = rowClass(m);
    
    const teams = `${m.team1} vs ${m.team2}`;
    const score = `${m.score1} - ${m.score2}`;
    const when = `${m.date}`;
    
    tr.innerHTML = `
      <td><span class="group-cell">${m.group}</span></td>
      <td class="date-cell">${when}</td>
      <td class="time-cell">${m.time}</td>
      <td class="teams-cell">${teams}</td>
      <td><span class="score-cell">${score}</span></td>
      <td class="stadium-cell">${m.stadium}${m.city ? ', ' + m.city : ''}</td>
    `;
    
    tbody.appendChild(tr);
  }
}

document.getElementById('btnLoad').addEventListener('click', async () => {
  const btn = document.getElementById('btnLoad');
  const originalText = btn.innerHTML;
  
  btn.innerHTML = '<span class="btn-icon">⏳</span> Загрузка...';
  btn.disabled = true;
  
  try {
    const res = await fetch('/api/lab8/task3/results');
    const json = await res.json();
    
    renderTable(json.results || []);
    
    btn.innerHTML = '<span class="btn-icon">✅</span> Загружено';
    setTimeout(() => {
      btn.innerHTML = originalText;
      btn.disabled = false;
    }, 2000);
    
  } catch (error) {
    console.error('Error:', error);
    btn.innerHTML = '<span class="btn-icon">❌</span> Ошибка';
    setTimeout(() => {
      btn.innerHTML = originalText;
      btn.disabled = false;
    }, 2000);
  }
});

// Инициализация пустого состояния
renderTable([]);