EntropyStarRover

Biggest catch main

Mar 3rd, 2021 (edited)
622
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.     let allCatchesDiv = document.getElementById("catches");
  3.     let addCatchButton = Array.from(document.getElementsByClassName("add"))[0];
  4.     let loggedIn = sessionStorage.getItem("token");
  5.     let loggedEmail=sessionStorage.getItem("loggedEmail");
  6.     console.log(loggedEmail)
  7.  
  8.  
  9.     if (loggedIn != null) {
  10.         // console.log("you are logged in")
  11.         // console.log(loggedIn)
  12.         addCatchButton.disabled = false;
  13.     }
  14.  
  15.     addCatchButton.addEventListener("click", addNewCatch);
  16.  
  17.     function addNewCatch() {
  18.         let addForm = document.getElementById("addForm");
  19.         let inputs = Array.from(addForm.querySelectorAll("input"));
  20.         let newAng = inputs[0].value;
  21.         let newWeight = inputs[1].value;
  22.         let newSpecies = inputs[2].value;
  23.         let newLocation = inputs[3].value;
  24.         let newBait = inputs[4].value;
  25.         let newCaptureTime = inputs[5].value;
  26.         //json because of the sucky white space!
  27.         let newCatchObj = {
  28.  
  29.             "angler": newAng,
  30.             "weight": newWeight,
  31.             "species": newSpecies,
  32.             "location": newLocation,
  33.             "bait": newBait,
  34.             "captureTime ": newCaptureTime,
  35.             "createdBy": loggedEmail
  36.         }
  37.         let myHeaders = new Headers();
  38.         myHeaders.append("Content-Type", "application/json");
  39.         myHeaders.append("X-Authorization", loggedIn)
  40.  
  41.         var raw = JSON.stringify(newCatchObj);
  42.  
  43.         var requestOptions = {
  44.             method: 'POST',
  45.             headers: myHeaders,
  46.             body: raw,
  47.             redirect: 'follow'
  48.         };
  49.  
  50.         fetch("http://localhost:3030/data/catches", requestOptions)
  51.             .then(response => response.json())
  52.             .then(result => getAllCatches())
  53.             .catch(error => console.log('error', error));
  54.     }
  55.  
  56.     function getAllCatches() {
  57.         let requestOptions = {
  58.             method: 'GET',
  59.             redirect: 'follow'
  60.         };
  61.  
  62.         fetch("http://localhost:3030/data/catches", requestOptions)
  63.             .then(response => response.json())
  64.             .then(result => renderAllCatches(result))
  65.             .catch(error => console.log('error', error));
  66.     }
  67.  
  68.     function renderAllCatches(data) {
  69.         allCatchesDiv.innerHTML = "";
  70.         data.forEach(c => {
  71.  
  72.             let catchDiv = document.createElement("div");
  73.            
  74.             //set id equal to catch id to retreive (update/delete) the catch
  75.             catchDiv.id = c._id;
  76.  
  77.  //in order to check if logged user is owner of catch
  78.             catchDiv.setAttribute('data-id', c.createdBy);
  79.  
  80.             catchDiv.className = "catch";
  81.             let anglerLabel = document.createElement("label");
  82.             anglerLabel.textContent = "Angler";
  83.             let anglerInput = document.createElement("input");
  84.             anglerInput.className = "angler";
  85.             anglerInput.value = c.angler;
  86.             let hrOne = document.createElement("hr");
  87.             let weightLabel = document.createElement("label");
  88.             weightLabel.textContent = "Weight";
  89.             let weightInput = document.createElement("input");
  90.             weightInput.type = "number";
  91.             weightInput.className = "weight";
  92.             weightInput.value = c.weight;
  93.             let hrWtwo = document.createElement("hr");
  94.             let speciesLabel = document.createElement("label");
  95.             speciesLabel.textContent = "Species";
  96.  
  97.             let speciesInput = document.createElement("input");
  98.             speciesInput.type = "text";
  99.             speciesInput.className = "species";
  100.             speciesInput.value = c.species;
  101.  
  102.             let hrThree = document.createElement("hr");
  103.  
  104.             let locationLabel = document.createElement("label");
  105.             locationLabel.textContent = "Location";
  106.  
  107.             let locationInput = document.createElement("input");
  108.             locationInput.type = "text";
  109.             locationInput.className = "location";
  110.             locationInput.value = c.location;
  111.  
  112.             let baitLabel = document.createElement("label");
  113.             baitLabel.textContent = "Bait";
  114.  
  115.             let baitInput = document.createElement("input");
  116.             baitInput.type = "text";
  117.             baitInput.className = "bait";
  118.             baitInput.value = c.bait;
  119.  
  120.             let hrFour = document.createElement("hr");
  121.             let hrFuck = document.createElement("hr");
  122.  
  123.             let captureTimeLabel = document.createElement("label");
  124.             captureTimeLabel.textContent = "Capture time";
  125.  
  126.             let captureTimeInput = document.createElement("input");
  127.             captureTimeInput.type = "text";
  128.             captureTimeInput.className = "bait";
  129.  
  130.             //because of the white space in the field name returned by the server!!!!!!!!!!!!!!
  131.             let captureTime = "captureTime "
  132.             captureTimeInput.value = c[captureTime];
  133.  
  134.             let updateButton = document.createElement("button");
  135.             updateButton.textContent = "Update";
  136.             updateButton.className = "update";
  137.             if (c.hasOwnProperty("createdBy")&& catchDiv.getAttribute('data-id')==loggedEmail) {
  138.                 updateButton.disabled = false;
  139.             } else {
  140.                 updateButton.disabled = true;
  141.             }
  142.             updateButton.addEventListener("click", () => updateCatch(catchDiv.id, catchDiv))
  143.  
  144.             let deleteButton = document.createElement("button");
  145.             deleteButton.textContent = "Delete";
  146.             deleteButton.className = "delete";
  147.  
  148.             if(c.hasOwnProperty("createdBy")&& catchDiv.getAttribute('data-id')==loggedEmail){
  149.                 deleteButton.disabled = false;
  150.             } else {
  151.                 deleteButton.disabled = true;
  152.             }
  153.             deleteButton.addEventListener("click", () => (deleteCatch(catchDiv.id)))
  154.  
  155.             catchDiv.appendChild(anglerLabel);
  156.             catchDiv.appendChild(anglerInput);
  157.             catchDiv.appendChild(hrOne);
  158.             catchDiv.appendChild(weightLabel);
  159.             catchDiv.appendChild(weightInput);
  160.             catchDiv.appendChild(hrWtwo);
  161.             catchDiv.appendChild(speciesLabel);
  162.             catchDiv.appendChild(speciesInput);
  163.             catchDiv.appendChild(hrThree);
  164.             catchDiv.appendChild(locationLabel);
  165.             catchDiv.appendChild(locationInput);
  166.             catchDiv.appendChild(hrFour);
  167.             catchDiv.appendChild(baitLabel);
  168.             catchDiv.appendChild(baitInput);
  169.             catchDiv.appendChild(hrFuck);
  170.             catchDiv.appendChild(captureTimeLabel);
  171.             catchDiv.appendChild(captureTimeInput)
  172.  
  173.  
  174.             catchDiv.appendChild(updateButton);
  175.             catchDiv.appendChild(deleteButton);
  176.             allCatchesDiv.appendChild(catchDiv);
  177.         });
  178.  
  179.     }
  180.  
  181.     //finish this shit
  182.  
  183.     function updateCatch(id, catchDiv) {
  184.         //the fast and ugly way to get the values
  185.         let values = [];
  186.         let inputs = Array.from(catchDiv.querySelectorAll("input"))
  187.         inputs.forEach(i => {
  188.             values.push(i.value);
  189.         })
  190.  
  191.         console.log(values);
  192.         //now fight with that white space again
  193.         let captureTime = "captureTime "
  194.         let updatedObj = {
  195.             angler: values[0],
  196.             weight: values[1],
  197.             species: values[2],
  198.             location: values[3],
  199.             bait: values[4]
  200.         }
  201.         updatedObj[captureTime] = values[5];
  202.  
  203.         console.log(id)
  204.         let myHeaders = new Headers();
  205.         myHeaders.append("X-Authorization", loggedIn);
  206.         myHeaders.append("Content-Type", "application/json");
  207.  
  208.         let raw = JSON.stringify(updatedObj);
  209.  
  210.         let requestOptions = {
  211.             method: 'PUT',
  212.             headers: myHeaders,
  213.             body: raw,
  214.             redirect: 'follow'
  215.         };
  216.  
  217.         fetch(`http://localhost:3030/data/catches/${id}`, requestOptions)
  218.             .then(response => response.json())
  219.             .then(result => getAllCatches())
  220.             .catch(error => console.log('error', error));
  221.  
  222.     }
  223.  
  224.     function deleteCatch(id) {
  225.         let myHeaders = new Headers();
  226.         myHeaders.append("X-Authorization", loggedIn);
  227.  
  228.         var requestOptions = {
  229.             method: 'DELETE',
  230.             headers: myHeaders,
  231.             redirect: 'follow'
  232.         };
  233.  
  234.         fetch(`http://localhost:3030/data/catches/${id}`, requestOptions)
  235.             .then(response => response.json())
  236.             .then(result => getAllCatches())
  237.             .catch(error => console.log('error', error));
  238.     }
  239.  
  240.     getAllCatches();
  241. }
  242.  
  243. attachEvents();
  244.  
RAW Paste Data