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

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

// Элементы DOM
const statusDiv = document.getElementById('status');
const statsDiv = document.getElementById('stats');
const matchesTableBody = document.getElementById('matchesTableBody');
const groupFilter = document.getElementById('groupFilter');

// Переменные для данных
let allMatches = [];
let currentMatches = [];

// Обработка данных
async function processData() {
    showStatus('Создание JSON всех матчей...', 'info');
    
    try {
        const response = await fetch(`${API_BASE}/task3/process`);
        const result = await response.json();
        
        if (result.success) {
            showStatus(`✅ ${result.message}`, 'success');
        } else {
            showStatus(`❌ ${result.error}`, 'error');
        }
    } catch (error) {
        showStatus(`❌ Ошибка: ${error.message}`, 'error');
    }
}

// Загрузка матчей
async function loadMatches() {
    showStatus('Загрузка данных матчей...', 'info');
    
    try {
        const response = await fetch(`${API_BASE}/task3/matches`);
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.error);
        }
        
        allMatches = await response.json();
        currentMatches = [...allMatches];
        
        if (Array.isArray(allMatches)) {
            displayMatches(currentMatches);
            updateStats(currentMatches);
            showStatus(`✅ Загружено ${allMatches.length} матчей`, 'success');
        } else {
            showStatus('❌ Ошибка формата данных', 'error');
        }
    } catch (error) {
        showStatus(`❌ Ошибка загрузки: ${error.message}`, 'error');
    }
}

// Отображение матчей в таблице
function displayMatches(matches) {
    matchesTableBody.innerHTML = '';
    
    if (matches.length === 0) {
        matchesTableBody.innerHTML = `
            <tr>
                <td colspan="7" style="text-align: center; padding: 40px;">
                    Матчи не найдены
                </td>
            </tr>
        `;
        return;
    }
    
    matches.forEach(match => {
        const row = document.createElement('tr');
        
        // Определяем класс для цветового кодирования
        let rowClass = '';
        if (match.result === 'team1_win') {
            rowClass = 'task3-match-team1-win';
        } else if (match.result === 'team2_win') {
            rowClass = 'task3-match-team2-win';
        } else {
            rowClass = 'task3-match-draw';
        }
        
        row.className = rowClass;
        
        row.innerHTML = `
            <td>
                <span class="task3-group-badge">${match.group}</span>
            </td>
            <td>${match.date}</td>
            <td>${match.time}</td>
            <td><strong>${match.team1}</strong></td>
            <td>
                <span class="task3-score">${match.score}</span>
            </td>
            <td><strong>${match.team2}</strong></td>
            <td>${match.stadium}<br><small>${match.city}</small></td>
        `;
        
        matchesTableBody.appendChild(row);
    });
}

// Обновление статистики
function updateStats(matches) {
    const totalMatches = matches.length;
    const team1Wins = matches.filter(m => m.result === 'team1_win').length;
    const team2Wins = matches.filter(m => m.result === 'team2_win').length;
    const draws = matches.filter(m => m.result === 'draw').length;
    
    document.getElementById('totalMatches').textContent = totalMatches;
    document.getElementById('team1Wins').textContent = team1Wins;
    document.getElementById('team2Wins').textContent = team2Wins;
    document.getElementById('draws').textContent = draws;
    
    statsDiv.style.display = 'grid';
}

// Фильтрация по группе - ИСПРАВЛЕННАЯ ВЕРСИЯ
function filterByGroup() {
    const selectedGroup = groupFilter.value;
    
    if (selectedGroup === 'all') {
        currentMatches = [...allMatches];
    } else {
        // Точное сравнение с названием группы
        currentMatches = allMatches.filter(match => {
            // Получаем букву группы из названия (например, "Group A" -> "A")
            const groupLetter = match.group.replace('Group ', '').trim();
            return groupLetter === selectedGroup;
        });
    }
    
    displayMatches(currentMatches);
    updateStats(currentMatches);
    
    showStatus(`Показано матчей группы ${selectedGroup === 'all' ? 'всех групп' : selectedGroup}: ${currentMatches.length}`, 'info');
    setTimeout(() => {
        if (statusDiv.className.includes('task3-status-info')) {
            statusDiv.textContent = '';
            statusDiv.className = 'task3-status';
        }
    }, 3000);
}

// Очистка данных
function clearData() {
    allMatches = [];
    currentMatches = [];
    matchesTableBody.innerHTML = `
        <tr>
            <td colspan="7" style="text-align: center; padding: 40px;">
                Данные не загружены. Нажмите "Загрузить матчи"
            </td>
        </tr>
    `;
    statsDiv.style.display = 'none';
    groupFilter.value = 'all'; // Сбрасываем фильтр
    showStatus('Данные очищены', 'info');
}

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

// Автопроверка статуса при старте
window.addEventListener('load', () => {
    setTimeout(() => {
        showStatus('Готов к работе. Сначала создайте JSON матчей, затем загрузите их.', 'info');
    }, 1000);
});