public/lab7/task2/table-script.js - main - MashkoA/web-nodejs

public/lab7/task2/table-script.js
149 строк5 KB
umarovazizjohn
09 апр 2026, 10:12
09 апр 2026, 10:1248a32d1
'use strict';

// загрузка и отображение данных при загрузке страницы
document.addEventListener('DOMContentLoaded', () => {
    displayAllSavedData();
});

// отображение всех сохраненных данных
function displayAllSavedData() {
    const tableBody = document.getElementById('tableBody');
    
    // получаем все ключи из localStorage
    const allKeys = Object.keys(localStorage);
    const formDataKeys = allKeys.filter(key => key.startsWith('studentFormData_'));
    
    if (formDataKeys.length === 0) {
        tableBody.innerHTML = '<tr><td colspan="2" class="no-data">Нет сохраненных данных</td></tr>';
        return;
    }
    
    let allRows = '';
    
    // обрабатываем каждый набор данных в обратном порядке (новые сверху)
    const sortedKeys = formDataKeys.sort((a, b) => {
        const timeA = parseInt(a.split('_')[1]);
        const timeB = parseInt(b.split('_')[1]);
        return timeB - timeA; // новые первыми
    });
    
    sortedKeys.forEach((key, index) => {
        try {
            const savedData = localStorage.getItem(key);
            if (savedData) {
                const data = JSON.parse(savedData);
                
                // добавляем заголовок для каждого набора данных
                allRows += `
                    <tr class="data-set-header">
                        <th colspan="3">Запись ${sortedKeys.length - index} (${new Date(data.timestamp).toLocaleString()})</th>
                    </tr>
                `;
                
                // добавляем данные текущей анкеты
                allRows += generateTableRows(data);
                
                // добавляем разделитель между наборами данных (кроме последнего)
                if (index < sortedKeys.length - 1) {
                    allRows += `
                        <tr class="separator">
                            <td colspan="3"></td>
                        </tr>
                    `;
                }
            }
        } catch (error) {
            console.error('Ошибка при обработке данных:', error);
            allRows += `
                <tr class="error-row">
                    <td colspan="3">Ошибка при загрузке данных</td>
                </tr>
            `;
        }
    });
    
    tableBody.innerHTML = allRows;
}

// генерация строк таблицы для одного набора данных
function generateTableRows(data) {
    let rows = '';
    
    // данные с формы
    const formFields = {
        'lastName': 'Фамилия',
        'firstName': 'Имя', 
        'middleName': 'Отчество',
        'gender': 'Пол',
        'faculty': 'Факультет',
        'projectParticipation': 'Участие в проекте',
        'projectName': 'Наименование проекта'
    };
    
    rows += Object.entries(formFields)
        .map(([key, label]) => {
            const value = data.formData[key];
            return `
                <tr>
                    <th>${label}</th>
                    <td>${formatFormValue(key, value)}</td>
                    <td class="source">Форма</td>
                </tr>
            `;
        }).join('');
    
    // данные makeInitials
    if (data.apiResponses.makeInitials) {
        const apiData = data.apiResponses.makeInitials;
        rows += `
            <tr>
                <th>Инициалы (API)</th>
                <td>${apiData.fullInitials}</td>
                <td class="source">makeInitials</td>
            </tr>
            <tr>
                <th>Буква имени</th>
                <td>${apiData.firstnameLetter}</td>
                <td class="source">makeInitials</td>
            </tr>
            <tr>
                <th>Буква отчества</th>
                <td>${apiData.surnameLetter || 'Нет'}</td>
                <td class="source">makeInitials</td>
            </tr>
        `;
    }
    
    // данные makeProjectStatus
    if (data.apiResponses.makeProjectStatus) {
        const apiData = data.apiResponses.makeProjectStatus;
        rows += `
            <tr>
                <th>Статус проекта (API)</th>
                <td>${apiData.projectParticipant}</td>
                <td class="source">makeProjectStatus</td>
            </tr>
            <tr>
                <th>Полная информация</th>
                <td>${apiData.fullInfo}</td>
                <td class="source">makeProjectStatus</td>
            </tr>
        `;
    }
    
    return rows;
}

// форматирование значений для таблицы
function formatFormValue(key, value) {
    if (key === 'gender') {
        return value === 'male' ? 'Мужской' : 'Женский';
    }
    if (key === 'projectParticipation') {
        return value ? 'Да' : 'Нет';
    }
    if (key === 'faculty' && !value) {
        return 'Не выбран';
    }
    return value || 'Не указано';
}