Advertisement
bebo231312312321

Untitled

Jun 26th, 2023
90
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. let loadButton = document.querySelector('main aside .load');
  2. loadButton.addEventListener('click', getCatches);
  3.  
  4. let catchesContainer = document.getElementById('catches');
  5. catchesContainer.querySelectorAll('.catch').forEach(x => x.remove());
  6.  
  7. let addButton = document.querySelector('#addForm .add');
  8. addButton.disabled = localStorage.getItem('token') === null;
  9. addButton.addEventListener('click', createCatch);
  10.  
  11. async function getCatches() {
  12.     let url = 'http://localhost:3030/data/catches';
  13.     let getCatchesResponse = await fetch(url);
  14.     let catches = await getCatchesResponse.json();
  15.     console.log(catches);
  16.  
  17.     catchesContainer.querySelectorAll('.catch').forEach(x => x.remove());
  18.  
  19.     catchesContainer.append(...catches.map(c => createHtmlCatch(c)));
  20. }
  21.  
  22. async function createCatch(){
  23.     let anglerInput = document.querySelector('#addForm .angler');
  24.     let weightInput = document.querySelector('#addForm .weight');
  25.     let speciesInput = document.querySelector('#addForm .species');
  26.     let locationInput = document.querySelector('#addForm .location');
  27.     let baitInput = document.querySelector('#addForm .bait');
  28.     let captureTimeInput = document.querySelector('#addForm .captureTime');
  29.  
  30.     let newCatch = {
  31.         angler: anglerInput.value,
  32.         weight: Number(weightInput.value),
  33.         species: speciesInput.value,
  34.         location: locationInput.value,
  35.         bait: baitInput.value,
  36.         captureTime: Number(captureTimeInput.value)
  37.     };
  38.  
  39.     let createResponse = await fetch('http://localhost:3030/data/catches',
  40.     {
  41.         headers: {
  42.             'Content-Type': 'application/json',
  43.             'X-Authorization': localStorage.getItem('token')
  44.         },
  45.         method: 'Post',
  46.         body: JSON.stringify(newCatch)
  47.     });
  48.     let createResult = await createResponse.json();
  49.     let createdCatch = createHtmlCatch(createResult);
  50.     catchesContainer.appendChild(createdCatch);
  51. }
  52.  
  53. async function updateCatch(e){
  54.     let curCatch = e.target.parentElement;
  55.     let anglerInput = curCatch.querySelector('.angler');
  56.     let weightInput = curCatch.querySelector('.weight');
  57.     let speciesInput = curCatch.querySelector('.species');
  58.     let locationInput = curCatch.querySelector('.location');
  59.     let baitInput = curCatch.querySelector('.bait');
  60.     let captureTimeInput = curCatch.querySelector('.captureTime');
  61.  
  62.     let updatedCatch = {
  63.         angler: anglerInput.value,
  64.         weight: Number(weightInput.value),
  65.         species: speciesInput.value,
  66.         location: locationInput.value,
  67.         bait: baitInput.value,
  68.         captureTime: Number(captureTimeInput.value)
  69.     };
  70.  
  71.     let id = curCatch.dataset.id;
  72.     let url = `http://localhost:3030/data/catches/${id}`;
  73.     let updateResponse = await fetch(url, {
  74.         headers: {
  75.             'Content-Type': 'application/json',
  76.             'X-Authorization': localStorage.getItem('token')
  77.         },
  78.         method: 'Put',
  79.         body: JSON.stringify(updatedCatch)
  80.     });
  81.  
  82.     let updateResult = await updateResponse.json();
  83. }
  84.  
  85. async function deleteCatch(e){
  86.     let curCatch = e.target.parentElement;
  87.     let id = curCatch.dataset.id;
  88.     let url = `http://localhost:3030/data/catches/${id}`;
  89.     let deleteResponse = await fetch(url, {
  90.         headers: {
  91.             'X-Authorization': localStorage.getItem('token')
  92.         },
  93.         method: 'Delete'
  94.     });
  95.  
  96.     let deleteResult = await deleteResponse.json();
  97.     if(deleteResponse.status === 200){
  98.         curCatch.remove();
  99.     }
  100. }
  101.  
  102. function createHtmlCatch(curCatch) {
  103.     let anglerLable = ce('label', undefined, 'Angler');
  104.     let anglerInput = ce('input', {type: 'text', class:'angler'}, curCatch.angler);
  105.     let hr1 = ce('hr');
  106.     let weightLabel = ce('label', undefined, 'Weight');
  107.     let weightInput = ce('input', {type:'number', class:'weight'}, curCatch.weight);
  108.     let hr2 = ce('hr');
  109.     let speciesLabel = ce('label', undefined, 'Species');
  110.     let speciesInput = ce('input', {type:'text', class:'species'}, curCatch.species);
  111.     let hr3 = ce('hr');
  112.     let locationLabel = ce('label', undefined, 'Location');
  113.     let locationInput = ce('input', {type:'text', class:'location'}, curCatch.location);
  114.     let hr4 = ce('hr');
  115.     let baitLabel = ce('label', undefined, 'Bait');
  116.     let baitInput = ce('input', {type:'text', class:'bait'}, curCatch.bait);
  117.     let hr5 = ce('hr');
  118.     let captureTimeLabel = ce('label', undefined, 'Capture Time');
  119.     let captureTimeInput = ce('input', {type:'number', class:'captureTime'}, curCatch.captureTime);
  120.     let hr6 = ce('hr');
  121.     let updateBtn = ce('button', {disabled:true, class:'update'}, 'Update');
  122.     updateBtn.addEventListener('click', updateCatch);
  123.     updateBtn.disabled = localStorage.getItem('userId') !== curCatch._ownerId;
  124.     let deleteBtn = ce('button', {disabled:true, class:'delete'}, 'Delete');
  125.     deleteBtn.addEventListener('click', deleteCatch);
  126.     deleteBtn.disabled = localStorage.getItem('userId') !== curCatch._ownerId;
  127.  
  128.     let catchDiv = ce('div', {class:'catch'},
  129.     anglerLable, anglerInput, hr1, weightLabel, weightInput, hr2, speciesLabel, speciesInput,
  130.     hr3, locationLabel, locationInput, hr4, baitLabel, baitInput, hr5, captureTimeLabel,
  131.     captureTimeInput, hr6, updateBtn, deleteBtn);
  132.     catchDiv.dataset.id = curCatch._id;
  133.     catchDiv.dataset.ownerId = curCatch._ownerId;
  134.     return catchDiv;
  135. }
  136.  
  137.  
  138. function ce(tag, attributes, ...params) {
  139.     let element = document.createElement(tag);
  140.     let firstValue = params[0];
  141.     if (params.length === 1 && typeof (firstValue) !== 'object') {
  142.         if (['input', 'textarea'].includes(tag)) {
  143.             element.value = firstValue;
  144.         } else {
  145.             element.textContent = firstValue;
  146.         }
  147.     } else {
  148.         element.append(...params);
  149.     }
  150.  
  151.     if (attributes !== undefined) {
  152.         Object.keys(attributes).forEach(key => {
  153.             element.setAttribute(key, attributes[key]);
  154.         })
  155.     }
  156.  
  157.     return element;
  158. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement