Update index.js

Lab#1/FE/index.js

@@ -31,22 +31,70 @@ function fetchEmployees() {
 
 // TODO
 // add event listener to submit button
+const submitbtn = document.getElementsByClassName("btn btn-primary mt-3")[0];
+submitbtn.addEventListener("click",createEmployee);
 
 // TODO
 // add event listener to delete button
+// Attach event listener to table body
+document.getElementById('dataTable').addEventListener('click', function(event) {
+  // Check if the clicked element is a delete button
+  if (event.target.classList.contains('btn-danger')) {
+    // Call deleteEmployee with the id of the clicked button's parent row
+    const id = event.target.parentElement.parentElement.firstChild.textContent;
+    deleteEmployee(id);
+  }
+});
+const deletebtn = document.getElementsByClassName("btn btn-danger btn-sm");
+for ( let i = 0; i < deletebtn.length; i++)
+{
+  deletebtn[i].addEventListener("click", () => deleteEmployee(idCell.value));
+}
 
 // TODO
 function createEmployee (){
   // get data from input field
-  // send data to BE
-  // call fetchEmployees
+  const namefield = document.getElementById("name");
+  const idfield = document.getElementById("id");
+  const newname = namefield.value;
+  const newid = idfield.value;
+  if (newname === '' || newid === '')
+  {
+    alert("empty fields");
+  }
+  else
+  {
+    // send data to BE
+    fetch('http://localhost:3000/api/v1/employee' , {
+        method : 'POST',
+        headers : {'Content-Type': 'application/json',},
+        body : JSON.stringify({newname,newid}),});
+    // call fetchEmployees
+    if (response.ok)
+    {
+      fetchEmployees();
+    }
+    else
+    {
+      alert("this employee already exists");
+    }
+  }
 }
 
 // TODO
-function deleteEmployee (){
+function deleteEmployee (id){
   // get id
+  //const id = idCell.value;
   // send id to BE
+  const response = fetch(`http://localhost:3000/api/v1/employee/${encodeURIComponent(id)}`, {
+      method: 'DELETE',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ id }),
+    });
   // call fetchEmployees
+  fetchEmployees();
 }
 
 fetchEmployees()