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

public/lab8/task2/app.js
123 строки3 KB
darkvoid6@mail.ru
ЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ
18 дек 2025, 07:59
18 дек 2025, 07:59f2c4f06
// app.js
const groupsEl = document.getElementById('groups');
const stadiumsBody = document.querySelector('#stadiums tbody');

function renderGroups(groups) {
  if (!groups || groups.length === 0) {
    groupsEl.innerHTML = `
      <div class="empty-state">
        <div class="empty-icon">📋</div>
        <p>Данные групп не найдены</p>
        <small>Нажмите кнопку выше для обработки файла</small>
      </div>
    `;
    return;
  }

  let groupsHTML = '';
  
  for (const g of groups) {
    let matchesHTML = '';
    
    for (const m of g.matches) {
      matchesHTML += `
        <li class="match-item">
          <div class="match-info">
            <div class="match-teams">${m.team1} vs ${m.team2}</div>
            <div class="match-details">
              <span class="match-date">${m.date} ${m.time}</span>
              <span class="match-score">${m.score1}-${m.score2}</span>
              <span class="match-stadium">🏛️ ${m.stadium}${m.city ? ', ' + m.city : ''}</span>
            </div>
          </div>
        </li>
      `;
    }
    
    groupsHTML += `
      <div class="group">
        <div class="group-header">
          <div class="group-icon">${g.group}</div>
          <div class="group-title">Группа ${g.group}</div>
        </div>
        <ul class="match-list">
          ${matchesHTML}
        </ul>
      </div>
    `;
  }
  
  groupsEl.innerHTML = groupsHTML;
}

function renderStadiums(stadiums) {
  if (!stadiums || stadiums.length === 0) {
    stadiumsBody.innerHTML = `
      <tr>
        <td colspan="2" class="empty-table">
          <div class="empty-icon">🏛️</div>
          <p>Данные стадионов не найдены</p>
        </td>
      </tr>
    `;
    return;
  }

  let stadiumsHTML = '';
  
  for (const s of stadiums) {
    // Создаем HTML для списка матчей
    let matchesHTML = '';
    if (s.matches && s.matches.length > 0) {
      matchesHTML = s.matches.map(match => `
        <div class="stadium-match">
          <span class="match-teams-small">${match.team1} vs ${match.team2}</span>
          <span class="match-score-small">(${match.score1}-${match.score2})</span>
        </div>
      `).join('');
    }
    
    stadiumsHTML += `
      <tr>
        <td class="stadium-name">${s.name}${s.city ? ', ' + s.city : ''}</td>
        <td class="stadium-matches">${matchesHTML || 'Нет данных о матчах'}</td>
      </tr>
    `;
  }
  
  stadiumsBody.innerHTML = stadiumsHTML;
}

document.getElementById('btnProcess').addEventListener('click', async () => {
  const btn = document.getElementById('btnProcess');
  const originalText = btn.innerHTML;
  
  btn.innerHTML = '<span class="btn-icon">⏳</span> Обработка...';
  btn.disabled = true;
  
  try {
    const res = await fetch('/api/lab8/task2/process');
    const json = await res.json();
    
    renderGroups(json.groups || []);
    renderStadiums(json.stadiums || []);
    
    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);
  }
});

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