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

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

// Элементы DOM
const userForm = document.getElementById('userForm');
const initialsBtn = document.getElementById('initialsBtn');
const statusBtn = document.getElementById('statusBtn');
const apiResults = document.getElementById('apiResults');
const recordsList = document.getElementById('recordsList');

// Загрузка сохраненных записей при загрузке страницы
document.addEventListener('DOMContentLoaded', loadRecords);

// Обработчик отправки формы
userForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const formData = new FormData(userForm);
    const params = new URLSearchParams({
        lastname: formData.get('lastname'),
        firstname: formData.get('firstname'),
        surname: formData.get('surname'),
        gender: formData.get('gender'),
        faculty: formData.get('faculty'),
        projectParticipant: formData.get('projectParticipant') ? 'true' : 'false'
    });

    try {
        const response = await fetch(`${API_BASE}/task1/save?${params.toString()}`);
        if (response.ok) {
            const result = await response.json();
            showApiResult('Данные успешно сохранены!', 'success');
            userForm.reset();
            loadRecords();
        } else {
            const error = await response.json();
            showApiResult('Ошибка при сохранении: ' + error.error, 'error');
        }
    } catch (error) {
        showApiResult('Ошибка сети: ' + error.message, 'error');
    }
});

// Кнопка получения инициалов
initialsBtn.addEventListener('click', async () => {
    const formData = new FormData(userForm);
    const lastname = formData.get('lastname');
    const firstname = formData.get('firstname');
    const surname = formData.get('surname');

    if (!lastname || !firstname || !surname) {
        showApiResult('Заполните все поля ФИО', 'error');
        return;
    }

    try {
        const params = new URLSearchParams({ lastname, firstname, surname });
        const response = await fetch(`${API_BASE}/task1/makeInitials?${params.toString()}`);
        if (response.ok) {
            const result = await response.json();
            showApiResult(`Инициалы: ${result.lastname} ${result.firstnameLetter}.${result.surnameLetter}.`, 'success');
        } else {
            const error = await response.json();
            showApiResult('Ошибка API: ' + error.error, 'error');
        }
    } catch (error) {
        showApiResult('Ошибка сети: ' + error.message, 'error');
    }
});

// Кнопка статуса проекта
statusBtn.addEventListener('click', async () => {
    const formData = new FormData(userForm);
    const lastname = formData.get('lastname');
    const firstname = formData.get('firstname');
    const surname = formData.get('surname');
    const projectParticipant = formData.get('projectParticipant') ? 'true' : 'false';

    if (!lastname || !firstname || !surname) {
        showApiResult('Заполните все поля ФИО', 'error');
        return;
    }

    try {
        const params = new URLSearchParams({ lastname, firstname, surname, projectParticipant });
        const response = await fetch(`${API_BASE}/task1/makeProjectStatus?${params.toString()}`);
        if (response.ok) {
            const result = await response.json();
            showApiResult(`Статус: ${result.lastname} ${result.firstnameLetter}.${result.surnameLetter}. - ${result.projectParticipant}`, 'success');
        } else {
            const error = await response.json();
            showApiResult('Ошибка API: ' + error.error, 'error');
        }
    } catch (error) {
        showApiResult('Ошибка сети: ' + error.message, 'error');
    }
});

// Загрузка записей с сервера
async function loadRecords() {
    try {
        const response = await fetch(`${API_BASE}/task1/records`);
        if (response.ok) {
            const records = await response.json();
            displayRecords(records);
        } else {
            recordsList.innerHTML = '<p>Ошибка загрузки записей</p>';
        }
    } catch (error) {
        recordsList.innerHTML = '<p>Ошибка сети при загрузке записей</p>';
    }
}

function displayRecords(records) {
    recordsList.innerHTML = '';

    if (records.length === 0) {
        recordsList.innerHTML = '<p>Нет сохраненных записей</p>';
        return;
    }

    records.forEach(record => {
        const recordElement = document.createElement('div');
        recordElement.className = 'task1-record-item';
        recordElement.innerHTML = `
            <h4>Запись #${record.id}</h4>
            <p><strong>ФИО:</strong> ${record.lastname} ${record.firstname} ${record.surname}</p>
            <p><strong>Пол:</strong> ${record.gender === 'male' ? 'Мужской' : 'Женский'}</p>
            <p><strong>Факультет:</strong> ${record.faculty}</p>
            <p><strong>Участие в проекте:</strong> ${record.projectParticipant ? 'Да' : 'Нет'}</p>
            <p><small>${new Date(record.timestamp).toLocaleString()}</small></p>
        `;
        recordsList.appendChild(recordElement);
    });
}

function showApiResult(message, type = 'info') {
    apiResults.innerHTML = `<p>${message}</p>`;
    apiResults.className = 'task1-api-results ' + (type === 'success' ? 'task1-result-success' : 
                                            type === 'error' ? 'task1-result-error' : 'task1-result-info');
    
    setTimeout(() => {
        apiResults.innerHTML = '';
        apiResults.className = 'task1-api-results';
    }, 5000);
}

// Автотест при загрузке страницы
window.addEventListener('load', () => {
    setTimeout(() => {
        showApiResult('Страница загружена. Готов к работе!', 'info');
    }, 1000);
});