public/lab8/task1/script.js - main - MashkoA/web-nodejs

public/lab8/task1/script.js
258 строк9 KB
vSUS1w8OErscaPzljeOMKk86GKFCBmeQUlgjKJCmRenysib5Ll
8 lab
17 апр 2026, 08:17
17 апр 2026, 08:173aa355e
'use strict';

const form = document.getElementById('studentForm');
const projectCheckbox = form.querySelector('[name="projectParticipation"]');
const projectContainer = document.getElementById('projectNameContainer');
const facultySelect = form.querySelector('[name="faculty"]');
const refreshBtn = document.getElementById('refreshBtn');
const userList = document.getElementById('userList');

// факультеты
const faculties = [
    'Агрономии и экологии',
    'Агрохимии и защиты растений',
    'Архитектурно-строительный',
    'Гидромелиорации',
    'Землеустроительный',
    'Институт ветеринарной медицины, зоотехнии и биотехнологии',
    'Институт цифровой экономики и инноваций',
    'Механизации',
    'Пищевых технологий',
    'Плодоовощеводства и виноградарства',
    'Прикладной информатики',
    'Управления',
    'Учетно-финансовый',
    'Финансы и кредит',
    'Экономический',
    'Энергетики',
    'Юридический'
];

// заполнение списка факультетов
function populateFaculties() {
    faculties.forEach(faculty => {
        const option = document.createElement('option');
        option.value = faculty;
        option.textContent = faculty;
        facultySelect.appendChild(option);
    });
}

// показать/скрыть поле проекта
projectCheckbox.addEventListener('change', () => {
    projectContainer.classList.toggle('hidden', !projectCheckbox.checked);
    const projectNameInput = form.querySelector('[name="projectName"]');
    if (projectCheckbox.checked) {
        projectNameInput.setAttribute('required', 'required');
    } else {
        projectNameInput.removeAttribute('required');
    }
});

// обработка отправки формы
form.addEventListener('submit', async (e) => {
    e.preventDefault(); // Предотвращаем стандартную отправку формы
    
    if (!validateForm()) {
        showError('Пожалуйста, заполните все обязательные поля правильно');
        return;
    }
    
    await saveFormData();
});

// обновление списка
refreshBtn.addEventListener('click', () => {
    loadUserList();
    showSuccess('Список обновлен');
});

// сохранение данных формы
async function saveFormData() {
    try {
        // получение данных из формы
        const formData = {
            lastName: form.querySelector('[name="lastName"]').value.trim(),
            firstName: form.querySelector('[name="firstName"]').value.trim(),
            middleName: form.querySelector('[name="middleName"]').value.trim(),
            gender: form.querySelector('input[name="gender"]:checked')?.value,
            faculty: facultySelect.value,
            projectParticipation: projectCheckbox.checked,
            projectName: projectCheckbox.checked ? form.querySelector('[name="projectName"]').value.trim() : ''
        };
        
        // создание URL с параметрами для GET запроса
        const params = new URLSearchParams();
        Object.keys(formData).forEach(key => {
            if (formData[key] !== undefined && formData[key] !== null && formData[key] !== '') {
                params.append(key, formData[key]);
            }
        });
        
        const saveBtn = form.querySelector('button[type="submit"]');
        saveBtn.disabled = true;
        saveBtn.textContent = 'Сохранение...';
        
        const response = await fetch(`/api/lab8/task1/save?${params.toString()}`);
        
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.error || 'Ошибка сохранения данных');
        }
        
        const result = await response.json();
        
        showSuccess('Данные успешно сохранены');
        
        // Очищаем форму после успешного сохранения
        form.reset();
        projectContainer.classList.add('hidden');
        
        // Сбрасываем стили полей
        const allInputs = form.querySelectorAll('input, select');
        allInputs.forEach(input => {
            input.style.borderColor = '#7c85d6';
        });
        
        // Обновляем список данных
        await loadUserList();
        
    } catch (error) {
        showError(`Ошибка сохранения: ${error.message}`);
    } finally {
        const saveBtn = form.querySelector('button[type="submit"]');
        saveBtn.disabled = false;
        saveBtn.textContent = 'Сохранить';
    }
}

// загрузка списка пользователей
async function loadUserList() {
    try {
        const response = await fetch('/api/lab8/task1/data');
        if (!response.ok) {
            throw new Error('Ошибка загрузки данных');
        }
        const users = await response.json();
        displayUserList(users);
    } catch (error) {
        userList.innerHTML = '<li class="error">Ошибка загрузки данных</li>';
    }
}

// отображение списка пользователей
function displayUserList(users) {
    if (!users || users.length === 0) {
        userList.innerHTML = '<li class="no-data">Нет сохраненных данных</li>';
        return;
    }

    // сортируем по ID в обратном порядке (новые сверху)
    const sortedUsers = users.sort((a, b) => b.id - a.id);
    
    userList.innerHTML = sortedUsers.map(user => `
        <li>
            <p>ID: ${user.id}<p/>
            <p>ФИО: ${user.lastname} ${user.firstnameLetter}.${user.surnameLetter ? ` ${user.surnameLetter}.` : ''}<p/>
            <p>Пол: ${user.gender === 'male' ? 'мужской' : 'женский'}<p/>
            <p>Факультет: ${user.faculty}<p/>
            <p>Участие в проекте: ${user.projectParticipant}
            ${user.projectName ? `<p/>
            <p>Проект: ${user.projectName}<p/>` : ''}
        </li>
    `).join('');
}

// валидация формы
function validateForm() {
    const requiredFields = form.querySelectorAll('[required]');
    let isValid = true;
    
    // заполнение полей
    requiredFields.forEach(field => {
        if (!field.value.trim()) {
            field.style.borderColor = '#ff6b6b';
            isValid = false;
        } else {
            field.style.borderColor = '#7c85d6';
        }
    });
    
    // проверка радиокнопок
    const genderSelected = form.querySelector('input[name="gender"]:checked');
    if (!genderSelected) {
        showError('Пожалуйста, выберите пол');
        return false;
    }
    
    // проверка факультета
    if (!facultySelect.value) {
        facultySelect.style.borderColor = '#ff6b6b';
        isValid = false;
    } else {
        facultySelect.style.borderColor = '#7c85d6';
    }
    
    if (!isValid) {
        showError('Пожалуйста, заполните все обязательные поля');
        return false;
    }
    
    // проверка названия проекта, если участие отмечено
    if (projectCheckbox.checked) {
        const projectNameInput = form.querySelector('[name="projectName"]');
        if (!projectNameInput.value.trim()) {
            projectNameInput.style.borderColor = '#ff6b6b';
            showError('Пожалуйста, укажите название проекта');
            return false;
        } else {
            projectNameInput.style.borderColor = '#7c85d6';
        }
    }
    
    hideError();
    return true;
}

// показать ошибку
function showError(message) {
    let errorDiv = document.getElementById('formError');
    if (!errorDiv) {
        errorDiv = document.createElement('div');
        errorDiv.id = 'formError';
        errorDiv.className = 'error';
        form.insertBefore(errorDiv, form.firstChild);
    }
    errorDiv.textContent = message;
}

// показать успех
function showSuccess(message) {
    let successDiv = document.getElementById('formSuccess');
    if (!successDiv) {
        successDiv = document.createElement('div');
        successDiv.id = 'formSuccess';
        successDiv.className = 'success';
        form.insertBefore(successDiv, form.firstChild);
    }
    successDiv.textContent = message;
    
    setTimeout(() => {
        if (successDiv && successDiv.parentNode) {
            successDiv.remove();
        }
    }, 3000);
}

// скрыть ошибку
function hideError() {
    const errorDiv = document.getElementById('formError');
    if (errorDiv) {
        errorDiv.remove();
    }
}

document.addEventListener('DOMContentLoaded', () => {
    populateFaculties();
    loadUserList(); // загружаем данные при старте
});