You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
// Function to calculate progress and update progress bar
|
|
function calculateProgress(startDate, endDate, progressBar) {
|
|
const currentDate = new Date();
|
|
if (endDate <= currentDate) {
|
|
progressBar.style.width = "100%";
|
|
progressBar.classList.add('bg-red-500');
|
|
} else if (startDate > currentDate) {
|
|
progressBar.style.width = "0%";
|
|
} else {
|
|
const passedTime = currentDate - startDate;
|
|
const totalDuration = endDate - startDate;
|
|
const percentage = (passedTime / totalDuration) * 100;
|
|
progressBar.style.width = percentage + "%";
|
|
|
|
// Apply appropriate color based on the percentage
|
|
if (percentage <= 50) {
|
|
progressBar.classList.add('bg-green-700');
|
|
} else if (percentage <= 80) {
|
|
progressBar.classList.add('bg-yellow-400');
|
|
} else if (percentage <= 100) {
|
|
progressBar.classList.add('bg-red-500');
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateAllProjectProgress() {
|
|
const projectContainers = document.querySelectorAll(".projectContainer");
|
|
|
|
// Loop through each project container
|
|
projectContainers.forEach(projectContainer => {
|
|
const startDateElement = projectContainer.querySelector(".startDate");
|
|
const endDateElement = projectContainer.querySelector(".endDate");
|
|
|
|
const progressBar = projectContainer.querySelector(".progressBar");
|
|
|
|
const startDate = new Date(startDateElement.textContent);
|
|
const endDate = new Date(endDateElement.textContent);
|
|
|
|
calculateProgress(startDate, endDate, progressBar);
|
|
});
|
|
}
|
|
|
|
|
|
updateAllProjectProgress();
|
|
export { updateAllProjectProgress }; |