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

public/lab8/task2/script.js
221 строка8 KB
darkvoid6@mail.ru
ЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫЫ
18 дек 2025, 07:59
18 дек 2025, 07:59f2c4f06
const API_BASE = '/api/lab8';

// Элементы DOM
const statusDiv = document.getElementById('status');
const groupsList = document.getElementById('groupsList');
const stadiumsList = document.getElementById('stadiumsList');
const detailsContent = document.getElementById('detailsContent');

// Проверка статуса данных
async function checkStatus() {
    try {
        const response = await fetch(`${API_BASE}/task2/status`);
        const status = await response.json();
        
        let statusMessage = '';
        if (!status.rawData) {
            statusMessage = '❌ Файл cup.txt не найден. Загрузите файл в папку data/lab8/task2/';
        } else if (!status.groupsData && !status.stadiumsData) {
            statusMessage = '✅ Файл cup.txt найден. Нажмите "Обработать данные" для начала работы.';
        } else if (status.groupsData && status.stadiumsData) {
            statusMessage = '✅ Данные готовы к работе. Используйте кнопки загрузки.';
        } else {
            statusMessage = '⚠️ Данные частично обработаны. Нажмите "Обработать данные" для завершения.';
        }
        
        showStatus(statusMessage, status.rawData ? 'info' : 'error');
    } catch (error) {
        showStatus(`❌ Ошибка проверки статуса: ${error.message}`, 'error');
    }
}

// Обработка данных
async function processData() {
    showStatus('Обработка данных...', 'info');
    
    try {
        const response = await fetch(`${API_BASE}/task2/process`);
        const result = await response.json();
        
        if (result.success) {
            showStatus(`✅ ${result.message}. Групп: ${result.groupsCount}, Стадионов: ${result.stadiumsCount}`, 'success');
        } else {
            showStatus(`❌ ${result.error}`, 'error');
        }
    } catch (error) {
        showStatus(`❌ Ошибка: ${error.message}`, 'error');
    }
}

// Загрузка групп
async function loadGroups() {
    showStatus('Загрузка данных групп...', 'info');
    
    try {
        const response = await fetch(`${API_BASE}/task2/groups`);
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.error);
        }
        
        const groups = await response.json();
        
        if (Array.isArray(groups)) {
            displayGroups(groups);
            showStatus(`✅ Загружено ${groups.length} групп`, 'success');
        } else {
            showStatus('❌ Ошибка формата данных', 'error');
        }
    } catch (error) {
        showStatus(`❌ Ошибка загрузки: ${error.message}`, 'error');
    }
}

// Загрузка стадионов
async function loadStadiums() {
    showStatus('Загрузка данных стадионов...', 'info');
    
    try {
        const response = await fetch(`${API_BASE}/task2/stadiums`);
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.error);
        }
        
        const stadiums = await response.json();
        
        if (Array.isArray(stadiums)) {
            displayStadiums(stadiums);
            showStatus(`✅ Загружено ${stadiums.length} стадионов`, 'success');
        } else {
            showStatus('❌ Ошибка формата данных', 'error');
        }
    } catch (error) {
        showStatus(`❌ Ошибка загрузки: ${error.message}`, 'error');
    }
}

// Отображение групп
function displayGroups(groups) {
    groupsList.innerHTML = '';
    
    if (groups.length === 0) {
        groupsList.innerHTML = '<p>Группы не найдены</p>';
        return;
    }
    
    groups.forEach(group => {
        const groupElement = document.createElement('div');
        groupElement.className = 'task2-group-item';
        groupElement.innerHTML = `
            <h4>Группа ${group.group}</h4>
            <p><strong>Команды:</strong> ${group.teams.join(', ')}</p>
            <p><strong>Матчей:</strong> ${group.matches ? group.matches.length : 0}</p>
        `;
        groupElement.addEventListener('click', () => showGroupDetails(group));
        groupsList.appendChild(groupElement);
    });
}

// Отображение стадионов
function displayStadiums(stadiums) {
    stadiumsList.innerHTML = '';
    
    if (stadiums.length === 0) {
        stadiumsList.innerHTML = '<p>Стадионы не найдены</p>';
        return;
    }
    
    stadiums.forEach(stadium => {
        const stadiumElement = document.createElement('div');
        stadiumElement.className = 'task2-stadium-item';
        stadiumElement.innerHTML = `
            <h4>${stadium.stadium}</h4>
            <p><strong>Город:</strong> ${stadium.city}</p>
            <p><strong>Матчей:</strong> ${stadium.matches ? stadium.matches.length : 0}</p>
        `;
        stadiumElement.addEventListener('click', () => showStadiumDetails(stadium));
        stadiumsList.appendChild(stadiumElement);
    });
}

// Показать детали группы
function showGroupDetails(group) {
    let matchesHTML = '';
    
    if (group.matches && group.matches.length > 0) {
        matchesHTML = group.matches.map(match => `
            <div class="task2-match-item">
                <h5>${match.team1} vs ${match.team2}</h5>
                <p><strong>Дата:</strong> ${match.date} ${match.time}</p>
                <p><strong>Счет:</strong> ${match.score}</p>
                <p><strong>Стадион:</strong> ${match.stadium}, ${match.city}</p>
            </div>
        `).join('');
    } else {
        matchesHTML = '<p>Матчи не найдены</p>';
    }
    
    detailsContent.innerHTML = `
        <h3>Группа ${group.group}</h3>
        <p><strong>Команды:</strong></p>
        <ul>
            ${group.teams.map(team => `<li>${team}</li>`).join('')}
        </ul>
        <h4>Матчи группы ${group.group}</h4>
        ${matchesHTML}
    `;
}

// Показать детали стадиона
function showStadiumDetails(stadium) {
    let matchesHTML = '';
    
    if (stadium.matches && stadium.matches.length > 0) {
        matchesHTML = stadium.matches.map(match => `
            <div class="task2-match-item">
                <h5>${match.team1} vs ${match.team2}</h5>
                <p><strong>Дата:</strong> ${match.date} ${match.time}</p>
                <p><strong>Счет:</strong> ${match.score}</p>
                <p><strong>Группа:</strong> ${match.group}</p>
            </div>
        `).join('');
    } else {
        matchesHTML = '<p>Матчи не найдены</p>';
    }
    
    detailsContent.innerHTML = `
        <h3>${stadium.stadium}</h3>
        <p><strong>Город:</strong> ${stadium.city}</p>
        <h4>Матчи на стадионе</h4>
        ${matchesHTML}
    `;
}

// Очистить все данные
function clearData() {
    groupsList.innerHTML = '<p>Данные не загружены</p>';
    stadiumsList.innerHTML = '<p>Данные не загружены</p>';
    detailsContent.innerHTML = '<p>Выберите группу или стадион для просмотра деталей</p>';
    showStatus('Данные очищены', 'info');
}

// Показать статус
function showStatus(message, type = 'info') {
    statusDiv.textContent = message;
    statusDiv.className = `task2-status task2-status-${type}`;
    
    if (type !== 'info') {
        setTimeout(() => {
            statusDiv.textContent = '';
            statusDiv.className = 'task2-status';
        }, 5000);
    }
}

// Автопроверка статуса при старте
window.addEventListener('load', () => {
    setTimeout(() => {
        checkStatus();
    }, 1000);
});