Advertisement
Grossos

dasdsa

Dec 3rd, 2023
662
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2.  
  3. document.addEventListener('DOMContentLoaded', () => {
  4.     fetch('http://127.0.0.1:5000/getAll') // , headers
  5.         .then(response => response.json())
  6.         .then(data => loadHTMLTable(data['data']));
  7.  
  8. });
  9.  
  10. document.querySelector('table tbody').addEventListener('click', (event) => {
  11.     // console.log(event.target);
  12.     if (event.target.className === 'delete-row-btn') {
  13.         deleteRowById(event.target.dataset.id);
  14.     }
  15.     if (event.target.className === 'edit-row-btn') {
  16.         handleEditRow(event.target.dataset.id);
  17.     }
  18. });
  19.  
  20. const updateBtn = document.querySelector('#update-row-btn');
  21.  
  22. function deleteRowById(id) {
  23.     fetch('http://127.0.0.1:5000/delete/' + id, {
  24.         method: 'DELETE'
  25.     })
  26.         .then(response => response.json())
  27.         .then(data => {
  28.             if (data.success)
  29.                 location.reload();
  30.         });
  31. }
  32.  
  33. function handleEditRow(id) {
  34.     const updateSection = document.querySelector('#update-row');
  35.     updateSection.hidden = false;
  36.   const updateIdName = document.querySelector('#update-row-btn').dataset.id = id;
  37.  
  38.  
  39. updateBtn.onclick = () => {
  40.     const updateNameInput = document.querySelector('#update-name-input');
  41.     console.log(updateNameInput);
  42.  
  43.     fetch('http://127.0.0.1:5000/update', {
  44.         method: 'PATCH',
  45.         headers: {
  46.             'Content-type': 'application/json'
  47.         },
  48.         body: JSON.stringify({
  49.             id: updateNameInput.dataset.id,
  50.             name: updateNameInput.value
  51.         })
  52.     })
  53.         .then(response => response.json())
  54.         .then(data => {
  55.             if (data.success) {
  56.                 location.reload();
  57.             }
  58.         })
  59. }
  60. }
  61. const addBtn = document.querySelector('#add-name-btn');
  62.  
  63. addBtn.onclick = () => {
  64.     const nameInput = document.querySelector('#name-input');
  65.     const name = nameInput.value;
  66.     nameInput.value = '';
  67.  
  68.     fetch('http://127.0.0.1:5000/insert', {
  69.         headers: {
  70.             'Content-type': 'application/json'
  71.         },
  72.         method: 'POST',
  73.         body: JSON.stringify({ name: name })
  74.     })
  75.         .then(response => response.json())
  76.         .then(data => insertRowIntoTable(data['data']));
  77.  
  78. }
  79.  
  80. function insertRowIntoTable(data) {
  81.     console.log(data);
  82.     const table = document.querySelector('table tbody');
  83.     const isTableData = table.querySelector('.no-data');
  84.  
  85.     let tableHtml = "<tr>";
  86.  
  87.     for (var key in data) {
  88.         if (data.hasOwnProperty(key)) {
  89.             if (key === 'dateAdded') {
  90.                 data[key] = new Date(data[key]).toLocaleString();
  91.                 //data[key] = new Date(data[key].toLocaleString());
  92.             }
  93.             tableHtml += `<td>${data[key]}</td>`;
  94.         }
  95.     }
  96.  
  97.  
  98.     tableHtml += `<td><button class="delete-row-btn" data-id=${data.id}>Delete</td>`;
  99.     tableHtml += `<td><button class="edit-row-btn" data-id=${data.id}>Edit</td>`;
  100.  
  101.     tableHtml += "</tr>";
  102.  
  103.     if (isTableData) { // if its true
  104.         table.innerHTML = tableHtml;
  105.     } else {
  106.         const newRow = table.insertRow();
  107.         newRow.innerHTML = tableHtml;
  108.     }
  109. }
  110.  
  111. function loadHTMLTable(data) {
  112.     const table = document.querySelector('table tbody');
  113.  
  114.  
  115.     // console.log(data);
  116.  
  117.     if (data.length === 0) {
  118.         table.innerHTML = '<tr><td class="no-data" colspan="5">No Data</td></tr>';
  119.         return;
  120.     }
  121.  
  122.     let tableHtml = '';
  123.  
  124.     data.forEach(({ id, name, dateAdded }) => { // site_title
  125.         tableHtml += '<tr>';
  126.         tableHtml += `<td>${id}</td>`;
  127.         tableHtml += `<td>${name}</td>`;
  128.         // tableHtml += `<td>${site_title}</td>`;
  129.         tableHtml += `<td>${new Date(dateAdded).toLocaleString()}</td>`;  // tableHtml += `<td>${dateAdded}</td>`;
  130.         tableHtml += `<td><button class="delete-row-btn" data-id=${id}>Delete</td>`;
  131.         tableHtml += `<td><button class="edit-row-btn" data-id=${id}>Edit</td>`;
  132.         tableHtml += '</tr>';
  133.     });
  134.  
  135.  
  136.     table.innerHTML = tableHtml;
  137. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement