Files
timelapse-frontend/js/index.js
arussac 29b75ecc6c anto
2025-02-12 12:14:36 +01:00

84 lines
3.0 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>test</th>
</tr>`;
}
table.innerHTML = datas;
// Select all the buttons with the class button_project
const buttons = document.getElementsByClassName("project_detail");
// Add an event listener to each button
for (let i = 0; i < buttons.length; i++) {
buttons[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[i].addEventListener("onclick", (event) => {
// Send data to API and then navigate to projet_detail.html page
current_project = change_current_project(i);
});
}
}
getAllProject()
.then((project_list) => {
global_project_list = project_list;
// Call the next function here
display_projects();
})
.catch((error) => {
console.error(error);
});