Fisher-Game

function attachEvents() {
        $('.add').click(addNewCatch);
        $('.load').click(getAllCatches);

const kinveyAppId = "kid_ByWSzfUfg";
const serverUrl = "https://baas.kinvey.com/appdata/" + kinveyAppId + "/biggestCatches";
const kinveyUsername = "guest";
const kinveyPassword = "guest";
const base64auth = btoa(kinveyUsername +":"+ kinveyPassword);
const authHeaders = { "Authorization": "Basic " + base64auth };

function getAllCatches() {
    let loadCatches = {
        url: serverUrl,
        headers: authHeaders
    };

    $.ajax(loadCatches)
        .then(displayCatches)
        .catch(displayError)
}

function displayCatches(catchesArr) {
    $('#catches').empty();

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

function updateCatch(id) {
    let fishFormData = $("div[data-id='" + id + "']").contents().filter( "input" );

    let catchData = {
        angler: $(fishFormData[0]).val(),
        weight: $(fishFormData[1]).val(),
        species: $(fishFormData[2]).val(),
        location: $(fishFormData[3]).val(),
        bait: $(fishFormData[4]).val(),
        captureTime: $(fishFormData[5]).val()
    };

    let updateReq = {
        method: "PUT",
        url: serverUrl + "/" + id,
        headers: authHeaders,
        dataType: "application/json",
        data: catchData
    };

    $.ajax(updateReq)
        .then(getAllCatches)
        .catch(displayError)
}

function deleteCatch(id) {
    let requestDel = {
        method: "DELETE",
        url: serverUrl + `/${id}`,
        headers: authHeaders
    };

    $.ajax(requestDel)
        .then(getAllCatches)
        .catch(displayError)
}

function addNewCatch() {
    let createNewCatch = $("#addForm").contents().filter( "input" );

    let catchData = {
        angler: $(createNewCatch[0]).val(),
        weight: $(createNewCatch[1]).val(),
        species: $(createNewCatch[2]).val(),
        location: $(createNewCatch[3]).val(),
        bait: $(createNewCatch[4]).val(),
        captureTime: $(createNewCatch[5]).val()
    };

    for (let elem of createNewCatch) {
        $(elem).val("")
    }

    let createReq = {
        method: "POST",
        url: serverUrl,
        headers: authHeaders,
        dataType: "application/json",
        data: catchData
    };

    $.ajax(createReq)
        .then(getAllCatches)
        .catch(displayError)
}

function displayError(err) {
    alert(`${err.status}: ${err.statusText}`)
}
}