07. Students - HTTP and REST - Exercises

// 07. Students
// HTTP and REST - Exercises
// https://judge.softuni.org/Contests/Compete/Index/3798#6


function attachEvents() {
  const urlStudents = "http://localhost:3030/jsonstore/collections/students/";
  const firstName = document.querySelector("input[name='firstName']");
  const lastName = document.querySelector("input[name='lastName']");
  const facNumber = document.querySelector("input[name='facultyNumber']");
  const grade = document.querySelector("input[name='grade']");
  const table = document.getElementById("results").tBodies[0];
  const submitBtn = document.getElementById("submit");

  submitBtn.addEventListener("click", submiting);
  presentData();

  function presentData() {
    table.innerHTML = '';
    fetch(urlStudents)
      .then((response) => response.json())
      .then((data) => {
        for (dataRow in data) {
          let studentFirstName = data[dataRow]["firstName"];
          let studentLastName = data[dataRow]["lastName"];
          let studentFacNumber = data[dataRow]["facultyNumber"];
          let studentGrade = data[dataRow]["grade"];

          let row = document.createElement("tr");

          let tdFirstname = document.createElement("td");
          tdFirstname.textContent = studentFirstName;

          let tdLastName = document.createElement("td");
          tdLastName.textContent = studentLastName;

          let tdFacNumber = document.createElement("td");
          tdFacNumber.textContent = studentFacNumber;

          let tdGrade = document.createElement("td");
          tdGrade.textContent = studentGrade;

          row.appendChild(tdFirstname);
          row.appendChild(tdLastName);
          row.appendChild(tdFacNumber);
          row.appendChild(tdGrade);

          table.appendChild(row);
        }
      });
  }

  function submiting(e) {
    e.preventDefault(e);
    if (firstName.value && lastName.value && facNumber.value && grade.value) {
      let firstNameSaved = firstName.value;
      let lastNameSaved = lastName.value;
      let facNumberSaved = facNumber.value;
      let gradeSaved = grade.value;

      firstName.value = "";
      lastName.value = "";
      facNumber.value = "";
      grade.value = "";

      let dataObj = {
        firstName: firstNameSaved,
        lastName: lastNameSaved,
        facultyNumber: facNumberSaved,
        grade: gradeSaved,
      };

      fetch(urlStudents, {
        method: "post",
        headers: {
          "Content-type": "applicaiton/json",
        },
        body: JSON.stringify(dataObj),
      }).then(() => presentData())

    }

  }

}

attachEvents();

///////////////////////////////////////////////

// Extended with Delete Button!

function attachEvents() {
  const url = 'http://localhost:3030/jsonstore/collections/students/';
  loadStudentsInfo();

  const submitBtn = document.getElementById('submit');
  const tableResults = document.querySelector('#results tbody');
  const inputs = document.querySelector('#form .inputs');

  submitBtn.addEventListener('click', addNewStudent);

  function addNewStudent() {
    let inputFristName = inputs.children[0].value;
    let inputLastName = inputs.children[1].value;
    let inputFacNumber = inputs.children[2].value;
    let inputGrade = inputs.children[3].value;

    if (inputFristName === '' || inputLastName === '' || inputFacNumber === '' || inputGrade === '') {
      alert('Wrong data,fill all the inputs fields!');
      return;
    }

    fetch(url, {
      method: 'POST',
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify({
        'firstName': inputFristName,
        'lastName': inputLastName,
        'facultyNumber': inputFacNumber,
        'grade': inputGrade
      })
    })
      .then(res => res.json())
      .then(loadStudentsInfo())

    inputs.children[0].value = '';
    inputs.children[1].value = '';
    inputs.children[2].value = '';
    inputs.children[3].value = '';
  }

  function loadStudentsInfo(e) {
    if (e) {
      e.preventDefault();
    }
    fetch(url)
      .then(res => res.json())
      .then(data => {
        tableResults.innerHTML = ''
        for (obj in data) {
          let firstName = data[obj]['firstName'];
          let lastName = data[obj]['lastName'];
          let facultyNumber = data[obj]['facultyNumber'];
          let grade = data[obj]['grade'];
          let id = data[obj]['_id'];

          let newTr = document.createElement('tr');

          let firstNameTd = document.createElement('td');
          firstNameTd.textContent = firstName;
          let lastNameTd = document.createElement('td');
          lastNameTd.textContent = lastName;
          let facultyNumberTd = document.createElement('td');
          facultyNumberTd.textContent = facultyNumber;
          let gradeTd = document.createElement('td');
          gradeTd.textContent = grade;

          newTr.appendChild(firstNameTd);
          newTr.appendChild(lastNameTd);
          newTr.appendChild(facultyNumberTd);
          newTr.appendChild(gradeTd);

          let deleteBtn = document.createElement('button');
          deleteBtn.textContent = 'delete';
          deleteBtn.style = 'width:100px'
          deleteBtn.id = id;
          deleteBtn.addEventListener('click', deleteContantc);

          newTr.appendChild(deleteBtn);
          tableResults.appendChild(newTr);
        }
      })
  }

  function deleteContantc(e) {
    let currnetId = e.target.id;
    let deleteUrl = `${url}${currnetId}`
    e.target.parentNode.remove();

    fetch(deleteUrl, {
      method: 'delete',
      headers: {
        'content-type': 'application/json'
      },
    }
    )
  }

}

attachEvents();