script.js - master - Denkon/task-manager-api

script.js
180 строк7 KB
Denkon367
Заливка файлов
13 фев 2026, 03:33
13 фев 2026, 03:3314c18d7
document.addEventListener('DOMContentLoaded', () => {
    const createBtn = document.getElementById('create-btn');
    const readBtn = document.getElementById('read-btn');
    const createSection = document.getElementById('create-section');
    const readSection = document.getElementById('read-section');

    // Переключение между созданием и чтением задач
    /* createBtn.addEventListener('click', () => {
        createSection.classList.add('active');
        readSection.classList.remove('active');
    });

    readBtn.addEventListener('click', () => {
        createSection.classList.remove('active');
        readSection.classList.add('active');
        loadTasks(); // Загружаем задачи при переходе на вкладку "просмотра"
    }); */

    // Отправка формы создания задачи
    document.getElementById('create-form').addEventListener('submit', async (event) => {
        event.preventDefault();

        const title = document.getElementById('title-input').value;
        const description = document.getElementById('description-input').value;
        const status = document.getElementById('status-input').value;

        if (!title) {
            alert('Введите название задачи.');
            return;
        }

        const response = await fetch('/tasks', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ title, description, status }),
        });

        if (response.ok) {
            alert('Задача успешно создана!');
            loadTasks();
            //window.location.reload(); // Перезагружаем страницу для обновления состояния
        } else {
            alert('Ошибка при создании задачи.');
        }
    });

    // Загрузка всех задач
    async function loadTasks() {
        const response = await fetch('/tasks');
        const tasksData = await response.json();

        const tbody = document.getElementById('tasks-data');
        tbody.innerHTML = '';
        console.log(tasksData);
        
        if(tasksData.error){
            tbody.innerHTML = '<td colspan=5>'+tasksData.error+'</td>';
        }
        tasksData.forEach((task) => {
            const row = `
                <tr>
                    <td>${task.id}</td>
                    <td>${task.title}</td>
                    <td>${task.description}</td>
                    <td>${getTextStatus(task.status)}</td>
                    <td>
                        <button class="btn btn-warning edit-btn" data-id="${task.id}" data-status="${task.status}">Редактировать</button>
                        <button class="btn btn-danger delete-btn" data-id="${task.id}">Удалить</button>
                    </td>
                </tr>
            `;
            tbody.insertAdjacentHTML('beforeend', row);
        });

        // Добавляем обработчики для редактирования и удаления задач
        attachEditHandlers();
        attachDeleteHandlers();
    }

    // Открытие окна редактирования задачи
    function openEditModal(taskId) {
        fetch(`/task/${taskId}`)
            .then(res => res.json())
            .then(data => {
                if (data) {
                    document.getElementById('edit-id').value = data.id;
                    document.getElementById('edit-title').value = data.title;
                    document.getElementById('edit-description').value = data.description;
                    document.getElementById('edit-status').value = data.status;
                    $('#editTaskModal').modal('show'); // открываем модальное окно
                }
            })
            .catch(err => {
                console.error(err);
                alert("Ошибка при получении данных задачи.");
            });
    }

    // Сохранение изменений задачи
    document.getElementById('save-changes-btn').addEventListener('click', async () => {
        const taskId = document.getElementById('edit-id').value;
        const title = document.getElementById('edit-title').value;
        const description = document.getElementById('edit-description').value;
        const status = document.getElementById('edit-status').value;

        if (!title) {
            alert('Введите название задачи.');
            return;
        }

        const response = await fetch(`/task/${taskId}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ title, description, status }),
        });

        if (response.ok) {
            alert('Задача успешно обновлена!');
            //loadTasks();
            window.location.reload(); // Перезагружаем страницу для обновления состояния
        } else {
            alert('Ошибка при обновлении задачи.');
        }
    });

    // Присоединение обработчиков для редактирования задач
    function attachEditHandlers() {
        const editButtons = document.querySelectorAll('.edit-btn');
        editButtons.forEach(button => {
            button.addEventListener('click', () => {
                console.log(button.dataset.id);
                
                openEditModal(button.dataset.id);
            });
        });
    }

    // Удаление задачи
    function attachDeleteHandlers() {
        const deleteButtons = document.querySelectorAll('.delete-btn');
        deleteButtons.forEach(button => {
            button.addEventListener('click', async () => {
                const taskId = button.dataset.id;
                const confirmDelete = confirm('Вы уверены, что хотите удалить задачу?');

                if (!confirmDelete) return;

                const response = await fetch(`/task/${taskId}`, {
                    method: 'DELETE',
                });

                if (response.ok) {
                    alert('Задача удалена!');
                    window.location.reload(); // Перезагружаем страницу для обновления состояния
                } else {
                    alert('Ошибка при удалении задачи.');
                }
            });
        });
    }

    function getTextStatus(status) {
            switch (status) {
                case 'pending':
                    return 'Ожидает';
                case 'in-progress':
                    return 'В процессе';
                case 'done':
                    return 'Завершено';
                default:
                    return 'Нет статуса';
            }
        }

    window.onload = () => loadTasks(); // Загружаем задачи сразу при открытии страницы
});