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

public/lab8/task2/index.html
91 строка3 KB
erioxis
lab11fix
15 дек 2025, 23:21
15 дек 2025, 23:2170dc7ba
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>ЛР8, Задание 2</title>
  <link rel="stylesheet" href="/css/main.css"> <!-- Подключаем стили -->
  <style>
    /* Дополнительные стили для этой страницы, если нужно */
    pre { background: #f4f4f4; padding: 1em; border-radius: 5px; overflow-x: auto; }
    .form-section { padding-bottom: 0; } /* Убираем лишний отступ */
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="header">
      <h1>ЛР8, Задание 2</h1>
    </div>
    <div class="container">
      <div class="title">Обработка данных ЧМ-2022</div>

      <div class="form-section">
        <button id="processBtn">Обработать данные</button>
        <div id="status" class="result"></div>
      </div>

      <div class="table-section">
        <h2 class="title">Группы</h2>
        <button id="loadGroupsBtn">Загрузить группы</button>
        <pre id="groupsOutput"></pre>

        <h2 class="title">Стадионы</h2>
        <button id="loadStadiumsBtn">Загрузить стадионы</button>
        <pre id="stadiumsOutput"></pre>
      </div>
    </div>
  </div>
  <footer>
    <p>© 2025 Abushkevich Yuriy Sergeevich. IT2203</p>
  </footer>

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

    const processBtn = document.getElementById('processBtn');
    const statusDiv = document.getElementById('status');
    const loadGroupsBtn = document.getElementById('loadGroupsBtn');
    const groupsOutput = document.getElementById('groupsOutput');
    const loadStadiumsBtn = document.getElementById('loadStadiumsBtn');
    const stadiumsOutput = document.getElementById('stadiumsOutput');

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

    loadGroupsBtn.addEventListener('click', async () => {
      groupsOutput.textContent = 'Загрузка...';
      try {
        const res = await fetch(`${API_URL}/groups`);
        const data = await res.json();
        groupsOutput.textContent = JSON.stringify(data, null, 2);
      } catch (err) {
        groupsOutput.textContent = `Ошибка: ${err.message}`;
      }
    });

    loadStadiumsBtn.addEventListener('click', async () => {
      stadiumsOutput.textContent = 'Загрузка...';
      try {
        const res = await fetch(`${API_URL}/stadiums`);
        const data = await res.json();
        stadiumsOutput.textContent = JSON.stringify(data, null, 2);
      } catch (err) {
        stadiumsOutput.textContent = `Ошибка: ${err.message}`;
      }
    });
  </script>
</body>
</html>