Advertisement
dimanou_04

Untitled

Mar 27th, 2023
1,187
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.   const loadBooks = document.getElementById('loadBooks');
  3.   const booksContainer = document.querySelector('table > tbody');
  4.   const [titleInput, authorInput] = Array.from(document.querySelectorAll('#form > input'));
  5.   const submitBtn = document.querySelector('#form > button');
  6.   const formHeader = document.querySelector('#form > h3');
  7.   let editBookId = null;
  8.   const BASE_URL = 'http://localhost:3030/jsonstore/collections/books/';
  9.  
  10.   loadBooks.addEventListener('click', loadAllBooksHandler);
  11.   submitBtn.addEventListener('click', submitFormHandler);
  12.  
  13.   async function loadAllBooksHandler() {
  14.     booksContainer.innerHTML = '';
  15.     const booksRes = await fetch(BASE_URL);
  16.     const booksData = await booksRes.json();
  17.     allBooks = booksData;
  18.  
  19.     for (const bookId in booksData) {
  20.       const { author, title } = booksData[bookId];
  21.       const tableRow = document.createElement('tr');
  22.       const titleColumn = document.createElement('td');
  23.       const authorColumn = document.createElement('td');
  24.       const buttonsColumn = document.createElement('td');
  25.       const editBtn = document.createElement('button');
  26.       const deleteBtn = document.createElement('button');
  27.  
  28.       titleColumn.textContent = title;
  29.       authorColumn.textContent = author;
  30.       editBtn.textContent = 'Edit';
  31.       deleteBtn.textContent = 'Delete';
  32.       deleteBtn.id = bookId;
  33.  
  34.       editBtn.addEventListener('click', () => {
  35.         editBookId = bookId;
  36.         formHeader.textContent = 'Edit FORM';
  37.         submitBtn.textContent = 'Save';
  38.         titleInput.value = title;
  39.         authorInput.value = author;
  40.       });
  41.  
  42.       deleteBtn.addEventListener('click', deleteBookHandler);
  43.  
  44.       tableRow.appendChild(titleColumn);
  45.       tableRow.appendChild(authorColumn);
  46.       buttonsColumn.appendChild(editBtn);
  47.       buttonsColumn.appendChild(deleteBtn);
  48.       tableRow.appendChild(buttonsColumn)
  49.  
  50.       booksContainer.appendChild(tableRow);
  51.     }
  52.   }
  53.  
  54.   async function submitFormHandler() {
  55.     const title = titleInput.value;
  56.     const author = authorInput.value;
  57.     const httpHeaders = {
  58.       method: 'POST',
  59.       body: JSON.stringify({ title, author })
  60.     };
  61.  
  62.     let url = BASE_URL;
  63.  
  64.     if (formHeader.textContent === 'Edit FORM') {
  65.       httpHeaders.method = 'PUT';
  66.       url += editBookId;
  67.     }
  68.  
  69.     const resData = await fetch(url, httpHeaders);
  70.     loadAllBooksHandler();
  71.     if (formHeader.textContent === 'Edit FORM') {
  72.       formHeader.textContent = 'FORM';
  73.       submitBtn.textContent = 'Submit';
  74.     }
  75.  
  76.     titleInput.value = '';
  77.     authorInput.value = '';
  78.   }
  79.  
  80.   async function deleteBookHandler() {
  81.     const id = this.id;
  82.     const httpHeaders = {
  83.       method: "DELETE"
  84.     };
  85.  
  86.     await fetch(BASE_URL + id, httpHeaders);
  87.     loadAllBooksHandler();
  88.   }
  89. }
  90.  
  91. attachEvents();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement