Advertisement
EntropyStarRover

03.Book Library

Mar 2nd, 2021 (edited)
717
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.     fetchAllBooks();
  3.     let loadBtn = document.getElementById("loadBooks")
  4.     loadBtn.addEventListener("click", fetchAllBooks);
  5.     let tbody = document.querySelector("tbody");
  6.  
  7.     let createForm = document.getElementsByTagName("form")[0];
  8.     let authorInput = document.getElementById("author");
  9.     let titleInput = document.getElementById("title");
  10.     let hForm = createForm.querySelector("h3");
  11.  
  12.     //create invisible save button for the updates
  13.     let saveButton = document.createElement("button");
  14.     saveButton.textContent = "Save";
  15.     saveButton.style.display = "none";
  16.     createForm.appendChild(saveButton)
  17.  
  18.     let createButton = createForm.querySelector("button");
  19.     createButton.addEventListener("click", function (event) {
  20.         event.preventDefault();
  21.         let author = authorInput.value;
  22.         let title = titleInput.value;
  23.         createNewBook(author, title);
  24.     });
  25.  
  26.  
  27.     function fetchAllBooks() {
  28.         let requestOptions = {
  29.             method: 'GET',
  30.             redirect: 'follow'
  31.         };
  32.  
  33.         fetch("http://localhost:3030/jsonstore/collections/books", requestOptions)
  34.             .then(response => response.json())
  35.             .then(result => populateTable(result))
  36.             .catch(error => alert("No books available"));
  37.     }
  38.  
  39.  
  40.     function populateTable(data) {
  41.         tbody.innerHTML = "";
  42.         let dataAr = Object.entries(data);
  43.         dataAr.forEach(book => {
  44.             let bookObj = {
  45.                 _id: book[0],
  46.                 title: book[1].title,
  47.                 author: book[1].author
  48.             }
  49.             createTableRow(bookObj)
  50.         });
  51.         titleInput.value = "";
  52.         authorInput.value = "";
  53.     }
  54.  
  55.     function createTableRow(book) {
  56.         console.log(book)
  57.         let bookTr = document.createElement("tr");
  58.         bookTr.id = book._id;
  59.         let authorTd = document.createElement("td");
  60.         authorTd.textContent = book.author;
  61.  
  62.         let titleTd = document.createElement("td");
  63.         titleTd.textContent = book.title;
  64.  
  65.         let buttonsTd = document.createElement("td");
  66.  
  67.         let editBtn = document.createElement("button");
  68.         editBtn.textContent = "Edit";
  69.         editBtn.addEventListener("click", (() => editBook(bookTr)));
  70.  
  71.         let deleteBtn = document.createElement("button");
  72.         deleteBtn.textContent = "delete";
  73.         deleteBtn.addEventListener("click", (() => deleteBook(bookTr)));
  74.  
  75.         buttonsTd.appendChild(editBtn);
  76.         buttonsTd.appendChild(deleteBtn);
  77.  
  78.         bookTr.appendChild(titleTd);
  79.         bookTr.appendChild(authorTd);
  80.         bookTr.appendChild(buttonsTd);
  81.         tbody.appendChild(bookTr);
  82.  
  83.     }
  84.  
  85.     function createNewBook(author, title) {
  86.         authorInput.value = "";
  87.         titleInput.value = "";
  88.  
  89.  
  90.         console.log("create a book!")
  91.         console.log(author, title)
  92.         let newBook = {
  93.             "author": author,
  94.             "title": title
  95.         }
  96.         //post book
  97.         let myHeaders = new Headers();
  98.         myHeaders.append("Content-Type", "application/json");
  99.  
  100.         let requestOptions = {
  101.             method: 'POST',
  102.             headers: myHeaders,
  103.             body: JSON.stringify(newBook),
  104.             redirect: 'follow'
  105.         };
  106.  
  107.         fetch("http://localhost:3030/jsonstore/collections/books", requestOptions)
  108.             .then(response => response.json())
  109.             .then(result => createTableRow(result))
  110.             .catch(error => console.log('error', error));
  111.     }
  112.  
  113.     function deleteBook(bookTr) {
  114.         console.log(bookTr)
  115.         let myHeaders = new Headers();
  116.         myHeaders.append("Content-Type", "application/json");
  117.  
  118.         var requestOptions = {
  119.             method: 'DELETE',
  120.             headers: myHeaders,
  121.             redirect: 'follow'
  122.         };
  123.  
  124.         fetch(`http://localhost:3030/jsonstore/collections/books/${bookTr.id}`, requestOptions)
  125.             .then(response => response.json())
  126.             .then(result => fetchAllBooks())
  127.             .catch(error => console.log('error', error));
  128.     }
  129.  
  130.     function editBook(bookTr) {
  131.         console.log(bookTr)
  132.         hForm.textContent = "Edit FORM";
  133.         authorInput.value = bookTr.childNodes[1].textContent;
  134.         title.value = bookTr.childNodes[0].textContent;
  135.         saveButton.style.display = "block";
  136.         createButton.style.display = "none";
  137.         saveButton.addEventListener("click", function (e) {
  138.             e.preventDefault();
  139.  
  140.             console.log("save pressed")
  141.             let myHeaders = new Headers();
  142.             myHeaders.append("Content-Type", "application/json");
  143.  
  144.             var raw = JSON.stringify({
  145.                 author: authorInput.value,
  146.                 title: titleInput.value,
  147.                 _id: bookTr.id
  148.             });
  149.  
  150.             var requestOptions = {
  151.                 method: 'PUT',
  152.                 headers: myHeaders,
  153.                 body: raw,
  154.                 redirect: 'follow'
  155.             };
  156.  
  157.             fetch(`http://localhost:3030/jsonstore/collections/books/${bookTr.id}`, requestOptions)
  158.                 .then(response => response.json())
  159.                 .then(result => fetchAllBooks())
  160.                 .catch(error => console.log('error', error));
  161.  
  162.             hForm.textContent = "FORM";
  163.             saveButton.style.display = "none";
  164.             createButton.style.display = "block";
  165.  
  166.         })
  167.  
  168.     }
  169.  
  170. }
  171.  
  172. attachEvents();
Advertisement
RAW Paste Data Copied
Advertisement