Fisher Game

function attachEvents() {
  const baseUrl = "https://baas.kinvey.com"
  const appKey = "kid_HkkAw4MtV";
  const endPoint = "fishCatches";
  const username = "vlad";
  const password = "12345";
  const headers = {
      "Authorization": `Basic ${btoa(username + ':' + password)}`,
      "Content-Type": "application/json"
  };


  $(`.load`).on("click", loadCatches);
  $(`.add`).on("click", addCatch);

  async function loadCatches() {
      $(`#catches`).empty();
        let catches = await $.ajax({
            method: "GET",
            url: baseUrl + "/appdata/" + appKey + "/" + endPoint,
            headers,
        }) ;
                for(let value of catches) {
                    let id = value._id;
                    let angler = value.angler;
                    let weight = value.weight;
                    let bait = value.bait;
                    let captureTime = value.captureTime;
                    let location = value.location;
                    let species = value.species;

                     let $div = $(` <div class="catch" data-id="${id}">
                <label>Angler</label>
                <input type="text" class="angler" value="${angler}"/>
                <label>Weight</label>
                <input type="number" class="weight" value="${weight}"/>
                <label>Species</label>
                <input type="text" class="species" value="${species}"/>
                <label>Location</label>
                <input type="text" class="location" value="${location}"/>
                <label>Bait</label>
                <input type="text" class="bait" value="${bait}"/>
                <label>Capture Time</label>
                <input type="number" class="captureTime" value="${captureTime}"/>
            </div>`);
            let updateButton = $(`<button class="update">Update</button>`);
            updateButton.on("click", updateCatch);
            let deleteButton = $(`<button class="delete">Delete</button>`);
            deleteButton.on("click", deleteCatch);
            $div.append(updateButton);
            $div.append(deleteButton);
            $(`#catches`).append($div);
                }



    }

       async function addCatch() {
            let angler = $(".angler").val();
            let weight = $(".weight").val();
            let bait = $(".bait").val();
            let captureTime = $(".captureTime").val();
            let location = $(".location").val();
            let species = $(".species").val();

             let currentCatch = {
                 angler,
                 weight,
                 species,
                 location,
                 bait,
                 captureTime
             };

               await $.ajax({
                  method: "POST",
                  url: baseUrl + `/appdata/${appKey}/${endPoint}`,
                  headers,
                  data: JSON.stringify(currentCatch)
               });
            loadCatches();
        }

       async function updateCatch() {
            let catchId = $(this).parent().data("id");
            let angler = $(this).parent().find(`input.angler`).val();
            let weight = $(this).parent().find(`input.weight`).val();
            let bait = $(this).parent().find(`input.bait`).val();
            let captureTime = $(this).parent().find(`input.captureTime`).val();
            let location = $(this).parent().find(`input.location`).val();
            let species = $(this).parent().find(`input.species`).val();

            let catchUpdate = {
                angler,
                weight,
                bait,
                captureTime,
                location,
                species
            };

           await $.ajax({
                method: "PUT",
                url: baseUrl + "/appdata/" + appKey + "/" + endPoint + "/" + catchId,
                headers,
                data: JSON.stringify(catchUpdate)
            });
            //console.log("Updated");
            loadCatches();
        }

        async function deleteCatch() {
            let catchId = $(this).parent().data(`id`);
            await $.ajax({
                method: "DELETE",
                url: baseUrl + "/appdata/" + appKey + "/" + endPoint + "/" + catchId,
                headers,
            });
            $(this).parent().remove();

        }
}