EntropyStarRover

03.Book Library

Mar 2nd, 2021 (edited)
628
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();
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×