03.Sports Tracker

function tracker() {
    let baseUrl = `http://localhost:3030/jsonstore/workout/`;

    let loadBtn = document.getElementById('load-workout');
    let listDiv = document.getElementById('list');
    let workOutField = document.getElementById('workout');
    let locationField = document.getElementById('location');
    let dateField = document.getElementById('date');

    let addBtn = document.getElementById('add-workout');
    let editBtn = document.getElementById('edit-workout');

    let currentID = null;

    loadBtn.addEventListener('click', getWorkOuts);
    addBtn.addEventListener('click', function (e) {
        e.preventDefault();
        addWorkOut();
    });

    editBtn.addEventListener('click', function (e) {
        e.preventDefault();

        if (!currentID) return;

        let updatedWorkOut = {
            workout: workOutField.value,
            location: locationField.value,
            date: dateField.value
        };

        putWorkOutChanges(currentID, updatedWorkOut);
    });

    async function getWorkOuts() {
        let response = await fetch(baseUrl);
        let data = await response.json();
        let workouts = Object.values(data);
        console.log(workouts);

        listDiv.replaceChildren();

        for (let workout of workouts) {
            let container = document.createElement('div');
            container.classList.add('container');

            let title = document.createElement('h2');
            title.textContent = workout.workout;

            let date = document.createElement('h3');
            date.textContent = workout.date;

            let loc = document.createElement('h3');
            loc.textContent = workout.location;

            let btnGroup = document.createElement('div');
            btnGroup.classList.add('buttons-container');

            let changeBtn = document.createElement('button');
            changeBtn.classList.add('change-btn');
            changeBtn.textContent = 'Change';
            changeBtn.dataset.id = workout._id;
            console.log(workout._id);
            changeBtn.addEventListener('click', editWorkOut);

            let deleteBtn = document.createElement('button');
            deleteBtn.classList.add('delete-btn');
            deleteBtn.textContent = 'Done';
            deleteBtn.dataset.id = workout._id;
            deleteBtn.addEventListener('click', deleteWorkOut);

            btnGroup.append(changeBtn, deleteBtn);
            container.append(title, date, loc, btnGroup);
            listDiv.appendChild(container);
        }
    }

    async function addWorkOut() {
        let workout = workOutField.value;
        let location = locationField.value;
        let date = dateField.value;

        if (!workout || !location || !date) {
            return;
        }

        let newWorkout = { workout, location, date };

        await fetch(baseUrl, {
            method: 'POST',
            headers: { 'Content-type': 'application/json' },
            body: JSON.stringify(newWorkout),
        });

        clearForm();
        getWorkOuts();
    }

    function editWorkOut(e) {
        let container = e.currentTarget.parentElement.parentElement;
        currentID = e.currentTarget.dataset.id;

        let workout = container.querySelector('h2').textContent;
        let date = container.querySelector('h3:nth-of-type(1)').textContent;
        let location = container.querySelector('h3:nth-of-type(2)').textContent;

        workOutField.value = workout;
        dateField.value = date;
        locationField.value = location;

        container.remove();

        addBtn.disabled = true;
        editBtn.disabled = false;
    }

    async function putWorkOutChanges(id, data) {
        await fetch(baseUrl + id, {
            method: 'PUT',
            headers: { 'Content-type': 'application/json' },
            body: JSON.stringify(data)
        });

        clearForm();
        currentID = null;
        getWorkOuts();
        addBtn.disabled = false;
        editBtn.disabled = true;
    }

    async function deleteWorkOut(e) {
        let id = e.currentTarget.dataset.id;

        await fetch(baseUrl + id, { method: 'DELETE' });

        getWorkOuts();
    }

    function clearForm() {
        workOutField.value = '';
        locationField.value = '';
        dateField.value = '';
    }
}

tracker();