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

public/lab7/task2/script.js
203 строки7 KB
umarovazizjohn
09 апр 2026, 10:12
09 апр 2026, 10:1248a32d1
'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 saveBtn = document.getElementById('saveBtn');
const viewTableBtn = document.getElementById('tableBtn');

// факультеты
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);
});

// сохранение данных через API
saveBtn.addEventListener('click', async () => {
    if (!validateForm()) return;
    
    try {
        const formData = getFormData();
        saveBtn.disabled = true;
        
        // объект для хранения всех данных
        const storageData = {
            timestamp: new Date().getTime(),
            formData: formData,
            apiResponses: {}
        };
        
        // api 
        const [initialsResponse, projectStatusResponse] = await Promise.all([
            fetch(`/api/lab7/task2/makeInitials?lastName=${encodeURIComponent(formData.lastName)}&firstName=${encodeURIComponent(formData.firstName)}&middleName=${encodeURIComponent(formData.middleName || '')}`),
            fetch(`/api/lab7/task2/makeProjectStatus?lastName=${encodeURIComponent(formData.lastName)}&firstName=${encodeURIComponent(formData.firstName)}&middleName=${encodeURIComponent(formData.middleName || '')}&projectParticipation=${formData.projectParticipation}`)
        ]);
        
        // ответ makeInitials
        if (!initialsResponse.ok) {
            throw new Error('Ошибка API makeInitials');
        }
        storageData.apiResponses.makeInitials = await initialsResponse.json();
        
        // ответ makeProjectStatus
        if (!projectStatusResponse.ok) {
            throw new Error('Ошибка API makeProjectStatus');
        }
        storageData.apiResponses.makeProjectStatus = await projectStatusResponse.json();
        
        // сохраняем в локальном хранилище значения с формы и ответы api
        const storageKey = `studentFormData_${storageData.timestamp}`;
        localStorage.setItem(storageKey, JSON.stringify(storageData));
        
        // успешное сохранение
        showSuccess(`Данные сохранены.\n
            Инициалы: ${storageData.apiResponses.makeInitials.fullInitials}\n
            Статус: ${storageData.apiResponses.makeProjectStatus.projectParticipant}`);
        
    } catch (error) {
        console.error('Ошибка при сохранении:', error);
        showError(`Ошибка сохранения: ${error.message}`);
    } finally {
        saveBtn.disabled = false;
    }
});

// открытие страницы с таблицей
viewTableBtn.addEventListener('click', () => {
    window.open('table.html', '_blank');
});

// получение данных формы
function getFormData() {
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    
    // обрабатываем чекбокс
    data.projectParticipation = projectCheckbox.checked;
    
    return data;
}

// валидация формы
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 = 'error';
        successDiv.style.backgroundColor = 'rgba(76, 175, 80, 0.1)';
        successDiv.style.borderColor = '#4caf50';
        successDiv.style.color = '#4caf50';
        form.insertBefore(successDiv, form.firstChild);
    }
    successDiv.textContent = message;
    
    setTimeout(() => {
        successDiv.remove();
    }, 3000);
}

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

document.addEventListener('DOMContentLoaded', () => {
    populateFaculties();
});