public/lab8/task3/index.html - master - erioxis/web-nodejs

public/lab8/task3/index.html
176 строк6 KB
erioxis
lab11fix
15 дек 2025, 23:21
15 дек 2025, 23:2170dc7ba
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>ЛР8, Задание 3</title>
  <link rel="stylesheet" href="/css/main.css">
  <style>
    /* Дополнительные стили для этой страницы */
    .form-section { padding-bottom: 0; }
    
    /* Повышаем приоритет правил для цветов фона строк таблицы */
    table tr.draw,
    table tr.draw td,
    table tr.draw th {
      background-color: #e6f3ff !important; /* Синий для ничьих */
    }
    
    table tr.win-team1,
    table tr.win-team1 td,
    table tr.win-team1 th {
      background-color: #e6ffe6 !important; /* Зеленый для победы команды 1 */
    }
    
    table tr.win-team2,
    table tr.win-team2 td,
    table tr.win-team2 th {
      background-color: #ffe6e6 !important; /* Красный для победы команды 2 */
    }
    
    /* Дополнительные улучшения для читаемости */
    table tr.draw td,
    table tr.win-team1 td,
    table tr.win-team2 td {
      color: #000 !important;
      font-weight: bold !important;
    }
    
    /* Стили для счета матча */
    .match-score {
      font-weight: bold;
      font-size: 1.1em;
    }
    
    .win-team1 .match-score {
      color: #2e7d32 !important; /* Темно-зеленый для победы команды 1 */
    }
    
    .win-team2 .match-score {
      color: #c62828 !important; /* Темно-красный для победы команды 2 */
    }
    
    .draw .match-score {
      color: #1565c0 !important; /* Темно-синий для ничьих */
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="header">
      <h1>ЛР8, Задание 3</h1>
    </div>
    <div class="container">
      <div class="title">Таблица матчей ЧМ-2022</div>

      <div class="form-section">
        <button id="generateBtn">Сгенерировать JSON</button>
        <button id="loadTableBtn">Загрузить таблицу</button>
        <div id="status" class="result"></div>
      </div>

      <div class="table-section">
        <div id="tableContainer"></div>
      </div>
    </div>
  </div>
  <footer>
    <p>© 2025 Abushkevich Yuriy Sergeevich. IT2203</p>
  </footer>

  <script>
    const API_URL = '/api/lab8/task3';

    const generateBtn = document.getElementById('generateBtn');
    const loadTableBtn = document.getElementById('loadTableBtn');
    const statusDiv = document.getElementById('status');
    const tableContainer = document.getElementById('tableContainer');

    generateBtn.addEventListener('click', async () => {
      statusDiv.textContent = 'Генерация...';
      try {
        const res = await fetch(`${API_URL}/generate`, { method: 'POST' });
        if (res.ok) {
          statusDiv.textContent = '✅ JSON успешно сгенерирован!';
          statusDiv.className = 'result success';
        } else {
          statusDiv.textContent = '❌ Ошибка при генерации.';
          statusDiv.className = 'result error';
        }
      } catch (err) {
        statusDiv.textContent = `❌ Ошибка: ${err.message}`;
        statusDiv.className = 'result error';
      }
    });

    loadTableBtn.addEventListener('click', async () => {
      statusDiv.textContent = 'Загрузка таблицы...';
      tableContainer.innerHTML = '';

      try {
        const res = await fetch(`${API_URL}/results`);
        const matches = await res.json();

        if (matches.length === 0) {
          tableContainer.innerHTML = '<p class="result">Нет данных для отображения. Сначала сгенерируйте JSON.</p>';
          return;
        }

        const table = document.createElement('table');
        const thead = document.createElement('thead');
        const tbody = document.createElement('tbody');

        thead.innerHTML = `
          <tr>
            <th>Группа</th>
            <th>Дата</th>
            <th>Время</th>
            <th>Команда 1</th>
            <th>Итоговый счет</th>
            <th>Команда 2</th>
            <th>Стадион</th>
          </tr>
        `;
        table.appendChild(thead);

        for (const match of matches) {
          const tr = document.createElement('tr');

          let rowClass = '';
          const scores = match.score.split('-').map(Number);
          if (scores[0] > scores[1]) {
            rowClass = 'win-team1';
          } else if (scores[0] < scores[1]) {
            rowClass = 'win-team2';
          } else {
            rowClass = 'draw';
          }

          tr.className = rowClass;

          tr.innerHTML = `
            <td>${match.group}</td>
            <td>${match.date}</td>
            <td>${match.time}</td>
            <td>${match.team1}</td>
            <td class="match-score">${match.score}</td>
            <td>${match.team2}</td>
            <td>${match.stadium}</td>
          `;

          tbody.appendChild(tr);
        }

        table.appendChild(tbody);
        tableContainer.appendChild(table);
        statusDiv.textContent = `✅ Загружено ${matches.length} матчей.`;
        statusDiv.className = 'result success';

      } catch (err) {
        tableContainer.innerHTML = `<p class="result error">❌ Ошибка при загрузке данных: ${err.message}</p>`;
        statusDiv.textContent = '❌ Ошибка.';
        statusDiv.className = 'result error';
      }
    });
  </script>
</body>
</html>