105 lines
3.9 KiB
JavaScript
105 lines
3.9 KiB
JavaScript
// Function to display projects in a table
|
|
function display_projects() {
|
|
// Get data from API and then generate HTML code to display the data in a table
|
|
const table = document.getElementById("table-projects");
|
|
const formContainer = document.getElementById('form-container');
|
|
|
|
function showForm() {
|
|
formContainer.style.display = 'flex';
|
|
}
|
|
|
|
function hideForm() {
|
|
formContainer.style.display = 'none';
|
|
}
|
|
|
|
document.getElementById('show-form-button').addEventListener('click', showForm);
|
|
document.getElementById('close-form-button').addEventListener('click', hideForm);
|
|
document.getElementById('submit').addEventListener('click', handleFormSubmit);
|
|
|
|
async function handleFormSubmit() {
|
|
const nameProject = document.getElementById('name').value;
|
|
const description = document.getElementById('description').value;
|
|
if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
|
|
alert('Le nom : " ' + nameProject + ' " est déjà pris ou vide ! \n' +
|
|
'veuillez en trouver un autre');
|
|
return 0;
|
|
}
|
|
PostNewProject(nameProject, description);
|
|
}
|
|
|
|
function checkName(Projects, name) {
|
|
let res = true;
|
|
Projects.forEach(project => {
|
|
const ProjectName = project.name;
|
|
if (ProjectName === name)
|
|
res = false;
|
|
});
|
|
return res;
|
|
}
|
|
|
|
let datas = `<tr>
|
|
<th>Id</th>
|
|
<th>Name</th>
|
|
<th>Date</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
<th>Delete Project</th>
|
|
</tr> `;
|
|
for (let i = 0; i < global_project_list.length; i++) {
|
|
datas += `<tr>
|
|
<th>${global_project_list[i].id}</th>
|
|
<th>${global_project_list[i].name}</th>
|
|
<th>${formatDate(global_project_list[i].start_date)}</th>
|
|
<th>${global_project_list[i].status}</th>
|
|
<th><button class="project_detail btn btn-primary">détails de ${
|
|
global_project_list[i].name
|
|
}</button></th>
|
|
<th><button name="${i}" class="project_delete btn btn-primary">Delete</button></th>
|
|
</tr>`;
|
|
}
|
|
table.innerHTML = datas;
|
|
|
|
// Select all the buttons_access with the class button_project
|
|
const buttons_access = document.getElementsByClassName("project_detail");
|
|
const buttons_delete = document.getElementsByClassName("project_delete");
|
|
// Add an event listener to each button
|
|
for (let i = 0; i < buttons_access.length; i++) {
|
|
buttons_access[i].addEventListener("click", (event) => {
|
|
// Send data to API and then navigate to projet_detail.html page
|
|
window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`;
|
|
});
|
|
buttons_access[i].addEventListener("click", (event) => {
|
|
// Send data to API and then navigate to projet_detail.html page
|
|
current_project = change_current_project(i);
|
|
});
|
|
}
|
|
|
|
for (let i = 0; i < buttons_delete.length; i++) {
|
|
buttons_delete[i].addEventListener("click", (event) => {
|
|
const projectName = global_project_list[i].name;
|
|
document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
|
|
document.getElementById('customAlert').style.display = 'block';
|
|
|
|
document.getElementById('okBtn').onclick = function() {
|
|
document.getElementById('customAlert').style.display = 'none';
|
|
// Call your delete function here
|
|
deleteProject(global_project_list[i].id);
|
|
};
|
|
|
|
document.getElementById('cancelBtn').onclick = function() {
|
|
document.getElementById('customAlert').style.display = 'none';
|
|
};
|
|
});
|
|
}
|
|
}
|
|
|
|
getAllProject()
|
|
.then((project_list) => {
|
|
global_project_list = project_list;
|
|
// Call the next function here
|
|
display_projects();
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
});
|