based on this picture i have project status select option and phase. just assume that statusId for completed == 1. in the recent code, i have a function that make if all checkbox checked, then the statusId changed. same as if only one of checkbox checked and none of it checked.
I WANT to make the select option to be connected function with phase checkbox. if the statusId go to completed then all checkbox will be checked and the progress will be 100%. but now if i create the function, it error and make my page lagging. i try ask chatGPT but still not working.
<script>
// Document ready event: ensures that the DOM is fully loaded before executing the script
$(document).ready(function () {
// Function to fetch and update phases based on the selected service ID
function fetchAndUpdatePhases(serviceId) {
if (serviceId) {
// If serviceId exists, make an AJAX request to fetch the phases
$.ajax({
type: 'POST',
url: 'get_phases.php',
data: { idserv: serviceId }, // Send service ID to server
success: function (html) {
// On success, update the phase list with the received HTML
$('#phases-list').html(html);
},
error: function (xhr, status, error) {
// Log errors if the request fails
console.error("Failed to fetch phases:", error);
}
});
} else {
// If no serviceId, clear the phases list and reset the progress bar and percentage
$('#phases-list').html('');
}
}
// When a department is selected or changed
$('#iddept').change(function () {
var deptId = $(this).val(); // Get selected department ID
if (deptId) {
// If department ID exists, fetch associated services via AJAX
$.ajax({
type: 'POST',
url: 'get_services.php',
data: { iddept: deptId }, // Send department ID to server
success: function (html) {
// On success, populate the service dropdown with the returned HTML
$('#idserv').html(html);
// Clear phases since the department has changed
fetchAndUpdatePhases(null);
},
error: function (xhr, status, error) {
// Log errors if the request fails
console.error("Failed to fetch services:", error);
}
});
} else {
// If no department is selected, reset the service dropdown and clear phases
$('#idserv').html('<option selected disabled>Select a service</option>');
fetchAndUpdatePhases(null);
}
});
// When a service is selected, fetch its phases
$('#idserv').change(function () {
var serviceId = $(this).val();
// Reset progress bar, percentage, and colors when service is changed
$('#percentage').text('--%');
$('#progress-bar').attr('stroke-dasharray', '0 100');
$('#total_percentage').val(0);
// Reset color to red (0% progress)
var resetColor = `rgb(255, 0, 0)`;
$('#progress-bar').css('stroke', resetColor);
$('#percentage').css('color', resetColor);
$('#prog').css('color', resetColor);
$('#circle').css('color', `rgba(255, 0, 0, 0.4)`);
fetchAndUpdatePhases(serviceId);
});
// Event listener for phase checkboxes
$(document).on('change', '.phase-checkbox', function () {
var selectedPhases = [];
// Collect all checked phases
$('.phase-checkbox:checked').each(function () {
selectedPhases.push($(this).val());
});
if (selectedPhases.length > 0) {
// If there are selected phases, calculate the percentage via AJAX
$.ajax({
type: 'POST',
url: 'get_percentage.php',
data: { phases: selectedPhases.join(',') }, // Send the selected phases as a comma-separated string
success: function (response) {
var data = JSON.parse(response);
var percentage = data.percentage; // Get the calculated percentage
// Update the percentage text and input value
$('#percentage').text(percentage + '%');
$('#total_percentage').val(percentage);
// Calculate and update the progress bar based on the percentage
var strokeValue = (percentage / 100) * 75; // Max is 75 for full progress
$('#progress-bar').attr('stroke-dasharray', strokeValue + ' 100');
// Dynamically calculate color for the progress bar (red to green transition)
var red = Math.max(255 - (percentage * 2.55), 0); // Red decreases as percentage increases
var green = Math.min(percentage * 2.55, 255); // Green increases as percentage increases
var color = `rgb(${red}, ${green}, 0)`; // Combine red and green for a smooth transition
// Apply the color transition to relevant elements
$('#progress-bar').css('stroke', color);
$('#percentage').css('color', color);
$('#prog').css('color', color);
$('#circle').css('color', `rgba(${red}, ${green}, 0, 0.4)`);
// If percentage is 100%, mark status as completed and disable status change
if (percentage === 100) {
$('#idstatus').val('1').trigger('change'); // Completed status
$('#idstatus').prop('disabled', true);
} else {
$('#idstatus').val('3').trigger('change'); // In-progress status
$('#idstatus').prop('disabled', false);
}
},
error: function (xhr, status, error) {
// Log errors if the request fails
console.error("Failed to fetch percentage:", error);
}
});
} else {
// If no phases are selected, reset the progress bar and percentage
$('#percentage').text('--%');
$('#progress-bar').attr('stroke-dasharray', '0 100');
$('#total_percentage').val(0);
// Reset color to red (0% progress)
var resetColor = `rgb(255, 0, 0)`;
$('#progress-bar').css('stroke', resetColor);
$('#percentage').css('color', resetColor);
$('#prog').css('color', resetColor);
$('#circle').css('color', `rgba(255, 0, 0, 0.4)`);
// Reset the status to default (in-progress)
$('#idstatus').val('2').trigger('change');
}
});
// Submit form with selected phases as a hidden input value
$('#signUpForm').on('submit', function () {
var selectedPhases = [];
// Collect all checked phases before submission
$('.phase-checkbox:checked').each(function () {
selectedPhases.push($(this).val());
});
$('#selected_phases').val(selectedPhases.join(',')); // Set the hidden field value
this.submit(); // Submit the form
});
});
// Additional document ready function for handling status change and completion date checks
$(document).ready(function () {
// Function to handle status change and toggle the completion date field
function handleStatusChange(statusId) {
if (statusId === '1') {
// Show the completion date input and make it required
$('#completion-date').removeClass('hidden');
$('#completion-date').find('input').attr('required', 'required');
checkCompletionDate();
} else {
// Hide the completion date input and remove required attribute
$('#completion-date').addClass('hidden');
$('#completion-date').find('input').removeAttr('required').val('');
$('#overdue-label').addClass('hidden');
}
}
// Function to check if the completion date is overdue
function checkCompletionDate() {
var completionDateStr = $('#completion_date').val();
var endDateStr = $('#endd').val(); // Get the project's end date
if (completionDateStr && endDateStr) {
var completionDate = new Date(completionDateStr);
var endDate = new Date(endDateStr);
// Show overdue label if completion date is after the end date
if (completionDate > endDate) {
$('#overdue-label').removeClass('hidden');
} else {
$('#overdue-label').addClass('hidden');
}
}
}
// Initial setup for the status change handling when the page loads
var initialStatusId = $('#idstatus').val();
handleStatusChange(initialStatusId);
// Event listener for status change
$('#idstatus').change(function () {
var statusId = $(this).val();
if (statusId === '1') {
$('.phase-checkbox').prop('checked', true); // Check all checkboxes
} else{
$('.phase-checkbox').prop('checked', false).trigger('change');
}
handleStatusChange(statusId);
});
// Event listener for completion date change
$('#completion_date').change(function () {
checkCompletionDate();
});
});
</script>