anto

js/index.js

@@ -2,16 +2,47 @@
 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 form = document.getElementById("add-project")
-  form.addEventListener('click', () => {
-    console.log("test")
-  });
+  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>
@@ -22,6 +53,7 @@ function display_projects() {
                 <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;