diploma_todoapp/frontend/js/api.js

// GLOBALS

const $taskForm = document.getElementById('taskForm');
const $toDoList = document.getElementById('toDoList');
const $completedList = document.getElementById('completedList');

// RESET FORM
function resetForm() {
    $taskForm.reset();
};

// EVENT LISTENERS
window.addEventListener("DOMContentLoaded", () => {
    displayTasks();
});

$taskForm.addEventListener("submit", (event) => {
    event.preventDefault();
    createNewTask();
});


[$toDoList, $completedList].forEach(list => {
    list.addEventListener("click", (event) => {
        if (
            event.target.classList.contains("done") ||
            event.target.classList.contains("notDone")
        ) {
            toggleTaskStatus(event.target.dataset.id);
        }
        else if (event.target.classList.contains("delete")) {
            deleteTask(event.target.dataset.id);
        }
    });
});
// EXAMPLE API
async function exampleAPI() {
    const response = await fetch("http://localhost:3001/test");
    const data = await response.text();
    console.log(data);
}

exampleAPI();
// DISPLAY TASKS

async function displayTasks() {

    const response = await fetch("http://localhost:3001/api/tasks")

    if (!response.ok) {
        throw new Error(`Failed to get tasks: ${response.status}`);
    }

    const data = await response.json();

    try {
        function formatTask(task) {
            const li = document.createElement("li");

            li.classList.add('card', 'p-3', 'mt-2');
            const done = task.completed
                ? "text-decoration-line-through opacity-50"
                : "";
            li.innerHTML = `
            <div class="d-flex justify-content-between align-items-start">
                <h4 class="${done} col-11">${task.title}</h4>
                <button data-id="${task.id}" type="button" class="btn-close delete" aria-label="Close"></button>
            </div>
            <p class="${done}">${task.description}</p>
            <p class="${done}"><strong>Due: </strong>${task.dueDate}</p>
                <div class="d-flex justify-content-between align-items-end">
                    <div>
                        ${task.completed
                    ? `<button data-id="${task.id}" class="btn btn-primary shadow-sm notDone" type="button">Not done</button>`
                    : `
                                    <button data-id="${task.id}" class="btn btn-primary shadow-sm edit" type="button">Edit</button>
                                    <button data-id="${task.id}" class="btn btn-primary shadow-sm done" type="button">Done</button>
                                `
                }
                        </div>
                    <p class="m-0 ${done}"><strong>Created on: </strong>${task.dateCreated}</p>
                </div>
            `;

            return li;

        }

        $toDoList.innerHTML = "";
        $completedList.innerHTML = "";

        const tasks = Array.isArray(data) ? data : [];

        if (!Array.isArray(data)) {
            console.error("ERROR: Expected an array of tasks from /api/tasks", data);
        }

        tasks.forEach(task => {
            const formattedTask = formatTask(task);
            task.completed
                ? $completedList.appendChild(formattedTask)
                : $toDoList.appendChild(formattedTask)
        })
        resetForm();

    } catch (error) {
        console.error(`ERROR: ${error}`);
    }


}

async function createNewTask() {
    const taskDetails = {
        title: $taskForm.taskName.value.trim(),
        description: $taskForm.taskDescription.value.trim(),
        dueDate: $taskForm.dueDate.value,
    }
    if (!taskDetails.title || !taskDetails.description || !taskDetails.dueDate) {
        alert("Please fill in all fields");
        return;
    }

    try {
        const response = await fetch("http://localhost:3001/api/tasks/todo", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(taskDetails)
        });

        if (!response.ok) {
            throw new Error(`Failed to create task: ${response.status}`);
        }

        const data = await response.json();
        console.log("Task created:", data);
        displayTasks();


    }
    catch (error) {
        console.error(`ERROR: ${error}`);
    }

};

function toggleTaskStatus(taskId) {
    const task = tasks.find(task => task.id === Number(taskId));

    if (task) {
        task.completed = !task.completed;
        displayTasks();
    }
}

function deleteTask(taskId) {
    const taskIndex = tasks.findIndex(task => task.id == taskId);
    if (taskIndex !== -1) {
        tasks.splice(taskIndex, 1);
    }
    displayTasks();

}

function convertDate(dateString) {
    return new Date(dateString).toLocaleDateString("en-AU");
}