public/lab8/task2/index.html - master - Coderdev/web-nodejs-labs

public/lab8/task2/index.html
69 строк3 KB
Coderdev
12 май 2026, 12:34
12 май 2026, 12:34f5e899f
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>ЛР8 — Задание 2</title>
  <style>
    body { font-family: sans-serif; max-width: 900px; margin: 2em auto; }
    button { padding: 6px 16px; margin: 4px; }
    .group-block { margin-bottom: 1.5em; }
    table { border-collapse: collapse; width: 100%; margin-top: 0.5em; }
    th, td { border: 1px solid #ccc; padding: 5px 10px; }
    th { background: #f0f0f0; }
    h3 { margin-bottom: 4px; }
  </style>
</head>
<body>
  <h1>ЛР8 — Задание 2: ЧМ 2022, Катар</h1>
  <a href="/lab8/">← Назад</a>

  <div style="margin: 1em 0;">
    <button onclick="parse()">Распарсить cup.txt</button>
    <button onclick="showGroups()">Группы</button>
    <button onclick="showStadiums()">Стадионы</button>
  </div>

  <div id="output"></div>

  <script>
    const API = '/api/lab8';

    async function parse() {
      const res  = await fetch(`${API}/task2/parse`);
      const data = await res.json();
      document.getElementById('output').innerHTML =
        `<p>✅ ${data.message}. Групп: ${data.groupsCount}, стадионов: ${data.stadiumsCount}</p>`;
    }

    async function showGroups() {
      const res    = await fetch(`${API}/task2/groups`);
      const groups = await res.json();
      let html = '';
      for (const g of groups) {
        html += `<div class="group-block"><h3>${g.group}</h3>
        <table><thead><tr><th>Дата</th><th>Команда 1</th><th>Счёт</th><th>Команда 2</th><th>Стадион</th></tr></thead><tbody>`;
        for (const m of g.matches) {
          html += `<tr><td>${m.date}</td><td>${m.team1}</td><td>${m.score}</td><td>${m.team2}</td><td>${m.stadium}</td></tr>`;
        }
        html += '</tbody></table></div>';
      }
      document.getElementById('output').innerHTML = html || '<p>Нет данных. Сначала нажмите «Распарсить».</p>';
    }

    async function showStadiums() {
      const res      = await fetch(`${API}/task2/stadiums`);
      const stadiums = await res.json();
      let html = '';
      for (const s of stadiums) {
        html += `<div class="group-block"><h3>${s.stadium}${s.city ? ', ' + s.city : ''}</h3>
        <table><thead><tr><th>Дата</th><th>Группа</th><th>Команда 1</th><th>Счёт</th><th>Команда 2</th></tr></thead><tbody>`;
        for (const m of s.matches) {
          html += `<tr><td>${m.date}</td><td>${m.group}</td><td>${m.team1}</td><td>${m.score}</td><td>${m.team2}</td></tr>`;
        }
        html += '</tbody></table></div>';
      }
      document.getElementById('output').innerHTML = html || '<p>Нет данных. Сначала нажмите «Распарсить».</p>';
    }
  </script>
</body>
</html>