HabitTracker/static/script/script-index.js

// Funktion zum Erstellen der Heatmap
function createHeatmap(data, day) {
    const heatmapContainer = document.getElementById('heatmap');

    const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']

    for (let i = 0; i < 7; i++) {
        const dayElement = document.createElement('div');
        dayElement.classList.add('day');
        dayElement.textContent = days[i];
        heatmapContainer.appendChild(dayElement);
    }

    // Aktuelles Datum des Montags in der neuen linken Spalte
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 7; j++) {
            const opacity = data[i * 7 + j] / (Math.max(...data) <= 0 ? 1 : Math.max(...data)); // Berechne die Opazität basierend auf Aktivitätsanzahl

            const dayElement = document.createElement('div');
            dayElement.classList.add('day');
            dayElement.style.backgroundColor = `rgba(${color}, ${opacity})`;
            if (day === i * 7 + j){
                dayElement.style.borderColor = `rgba(255, 0, 0)`;
                dayElement.style.borderWidth = "2px";
            }
            heatmapContainer.appendChild(dayElement);
        }
    }
}

function deleteHeatmap() {
    const heatmapContainer = document.getElementById('heatmap');
    const dayElements = heatmapContainer.getElementsByClassName('day');

    // Convert HTMLCollection to array and iterate to remove each element
    Array.from(dayElements).forEach(element => {
        element.remove();
    });
}

function checkCompletionAndAnimate(habitId, percentage) {
    const progressBar = document.getElementById("progress-bar-" + habitId);
    const 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 habit id from the checkbox id attribute
    const 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
        const percentage = response.data.percentage;
        const progressBar = document.getElementById("progress-bar-" + habitId);
        progressBar.style.width = percentage + "%";
        checkCompletionAndAnimate(habitId, percentage);

        const streak = response.data.streak;
        const streakSymbol = document.getElementById("streak-" + habitId);
        streakSymbol.innerText = streak > 0 ? streak.toString() + " 🔥" : "";

        const heatmapValues = response.data.heatmap;
        deleteHeatmap()
        createHeatmap(heatmapValues, day, color)

    }).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
        const habitElement = document.getElementById("habit-" + habitId);
        habitElement.remove();
    }).catch(function (error) {
        // Handle the error if needed
        console.error('Error:', error);
    });
}

function deleteList(listId) {
    // Make a POST request to /delete with the habit id

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

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

document.addEventListener('DOMContentLoaded', () => {
    const 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);
                });
            }
        });
    }
});

$(function () {
    $('[data-toggle="tooltip"]').tooltip()

})
// Erstelle die Heatmap mit den simulierten Daten
createHeatmap(activityData, day, color);