HabitTracker/templates/components/scripts.html

<script>
            function checkCompletionAndAnimate(habitId, percentage) {
                var progressBar = document.getElementById("progress-bar-" + habitId);
                var habitBlock = document.getElementById("habit-" + habitId);

                if (percentage == 100) {
                    progressBar.style.backgroundColor = "green";
                    habitBlock.classList.add("animate-bounce");
                    setTimeout(function () {
                        habitBlock.classList.remove("animate-bounce");
                    }, 2000);
                } else {
                    progressBar.style.backgroundColor = "";
                    habitBlock.classList.remove("animate-bounce");
                }
            }

            function sendPostRequest(checkboxId) {
                // Get the checkbox element using the provided ID
                var checkbox = document.getElementById(checkboxId);
                // console.log(checkbox);

                // Get the habit id from the checkbox id attribute
                var habitId = checkboxId;

                // Make a POST request to /check with the habit id
                axios.post('/check', {habitId: habitId}, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (response) {
                    // Handle the success response if needed
                    console.log(response.data);

                    // Set the percentage of the habit. percentage received as integer
                    var percentage = response.data.percentage;
                    var progressBar = document.getElementById("progress-bar-" + habitId);
                    progressBar.style.width = percentage + "%";
                    checkCompletionAndAnimate(habitId, percentage);
                }).catch(function (error) {
                    // Handle the error if needed
                    console.error('Error:', error);
                });
            }

            function deleteHabit(habitId) {
                // Make a POST request to /delete with the habit id

                axios.post('/delete', {habitId: habitId}, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(function (response) {
                    // Handle the success response if needed
                    console.log(response.data);

                    // Remove the habit from the DOM
                    var habitElement = document.getElementById("habit-" + habitId);
                    habitElement.remove();
                }).catch(function (error) {
                    // Handle the error if needed
                    console.error('Error:', error);
                });
            }


    document.addEventListener('DOMContentLoaded', (event) => {
        var elements = document.querySelectorAll('.task-list').values()

        // loop through the elements
        for (let el of elements) {
            Sortable.create(el, {
                handle: '.drag-handle',
                animation: 150,
                onEnd: function (evt) {
                    var habitId = el.children[evt.newIndex].id.split('-')[1];
                    var oldIndex = evt.oldIndex;
                    var newIndex = evt.newIndex;

                    axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, {
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    }).then(function (response) {
                        // Handle the success response if needed
                    }).catch(function (error) {
                        // Handle the error if needed
                        console.error('Error:', error);
                    });
                }
            });
        }
    });



</script>