93 lines
3.7 KiB
HTML
93 lines
3.7 KiB
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 el = document.querySelector('.task-list');
|
|
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> |