1. // 03. Grocery List
  2. // Exam Preparation II
  3. // https://judge.softuni.org/Contests/Practice/Index/3879#2
  4.  
  5. const BASE_URL = `http://localhost:3030/jsonstore/grocery/`;
  6. const productEelemnt = document.getElementById('product');
  7. const countEelemnt = document.getElementById('count');
  8. const priceEelemnt = document.getElementById('price');
  9.  
  10. const addProductBtn = document.getElementById('add-product');
  11. addProductBtn.addEventListener('click', addProduct);
  12.  
  13. const formUpdateBtn = document.getElementById('update-product');
  14. const tbodyElement = document.getElementById('tbody');
  15. document.getElementById('load-product').addEventListener('click', loadAllProducts);
  16.  
  17. loadAllProducts();
  18. function loadAllProducts(e) {
  19.     if (e) {
  20.         e.preventDefault();
  21.     }
  22.     tbodyElement.innerHTML = '';
  23.  
  24.     fetch(BASE_URL)
  25.         .then(res => res.json())
  26.         .then(dataFromServer => {
  27.             for (let row in dataFromServer) {
  28.                 let product = dataFromServer[row]['product'];
  29.                 let count = dataFromServer[row]['count'];
  30.                 let price = dataFromServer[row]['price'];
  31.                 let id = dataFromServer[row]['_id'];
  32.  
  33.                 let trContainer = document.createElement('tr');
  34.                 customHTMLelement('td', product, 'name', trContainer, '');
  35.                 customHTMLelement('td', count, 'count-product', trContainer, '');
  36.                 customHTMLelement('td', price, 'product-price', trContainer, '');
  37.  
  38.                 let btnContainerTd = customHTMLelement('td', '', 'btn', '', '');
  39.  
  40.                 let updateBtn = document.createElement('button');
  41.                 updateBtn.textContent = 'Update';
  42.                 updateBtn.classList.add('update');
  43.                 updateBtn.id = id;
  44.                 updateBtn.addEventListener('click', updateProduct);
  45.  
  46.                 let deleteBtn = document.createElement('button');
  47.                 deleteBtn.textContent = 'Delete';
  48.                 deleteBtn.classList.add('delete');
  49.                 deleteBtn.id = id;
  50.                 deleteBtn.addEventListener('click', deleteProduct);
  51.  
  52.                 btnContainerTd.appendChild(updateBtn);
  53.                 btnContainerTd.appendChild(deleteBtn);
  54.  
  55.                 trContainer.appendChild(btnContainerTd);
  56.                 tbodyElement.appendChild(trContainer);
  57.             }
  58.         })
  59. }
  60.  
  61. function addProduct(e) {
  62.     e.preventDefault();
  63.     let product = productEelemnt.value;
  64.     let count = countEelemnt.value;
  65.     let price = priceEelemnt.value;
  66.     if (product == '' || count == '' || price == '') {
  67.         alert('wrong data');
  68.         return;
  69.     }
  70.  
  71.     let dataObj = {
  72.         product,
  73.         count,
  74.         price,
  75.     }
  76.  
  77.     const headers = {
  78.         method: 'POST',
  79.         body: JSON.stringify(dataObj)
  80.     };
  81.  
  82.     fetch(BASE_URL, headers).then(() => loadAllProducts(e));
  83.     clearInputs();
  84. }
  85.  
  86. function deleteProduct(e) {
  87.     let id = e.target.id;
  88.     let delUrl = BASE_URL + `${id}`;
  89.     const headers = { method: 'DELETE', };
  90.     fetch(delUrl, headers).then(() => loadAllProducts(e));
  91. }
  92.  
  93. function updateProduct(e) {
  94.     e.preventDefault();
  95.     let id = e.target.id;
  96.     formUpdateBtn.disabled = false;
  97.     addProductBtn.disabled = true;
  98.    
  99.     productEelemnt.value = e.target.parentNode.parentNode.children[0].textContent;
  100.     countEelemnt.value = e.target.parentNode.parentNode.children[1].textContent;
  101.     priceEelemnt.value = e.target.parentNode.parentNode.children[2].textContent;
  102.  
  103.     formUpdateBtn.addEventListener('click', function formupdateProduct() {
  104.         const headers = {
  105.             method: 'PATCH',
  106.             body: JSON.stringify({
  107.                 product: productEelemnt.value,
  108.                 count: countEelemnt.value,
  109.                 price: priceEelemnt.value,
  110.             })
  111.         };
  112.  
  113.         let patchURL = BASE_URL + `${id}`
  114.         fetch(patchURL, headers).then(() => loadAllProducts(e));
  115.         formUpdateBtn.disabled = true;
  116.         addProductBtn.disabled = false;
  117.         clearInputs();
  118.     });
  119.  
  120. }
  121.  
  122. function customHTMLelement(type, content, className, parent, id) {
  123.     let newElement = document.createElement(type);
  124.     if (content) {
  125.         newElement.textContent = content;
  126.     }
  127.     if (className) {
  128.         newElement.classList.add(className);
  129.     }
  130.  
  131.     if (id) {
  132.         newElement.id = id;
  133.     }
  134.  
  135.     if (parent) {
  136.         parent.appendChild(newElement);
  137.     }
  138.     return newElement;
  139. }
  140.  
  141. function clearInputs() {
  142.     productEelemnt.value = '';
  143.     countEelemnt.value = '';
  144.     priceEelemnt.value = '';
  145. }
  146.  
  147.  
  148.  
  149.