2. Fisher Game

function attachEvents() {

    $('.load').click(loadCatches);
    $('.add').click(addCatch);

    const baseURL = 'https://baas.kinvey.com/appdata/kid_H1XzFlaIZ/';
    const username = 'yavor';
    const password = '';
    const base64auth = btoa(username + ':' + password);
    const authHeaders = {"Authorization": "Basic " + base64auth};



    function loadCatches() {
        $.ajax({
            url: baseURL + 'biggestCatches',
            method: 'GET',
            headers: authHeaders
        }).then(listCatches);
    }

    function listCatches(data) {

        console.log(data);
        $('#catches').empty();
        for (let obj of data) {
            // console.log(obj);
            let singleCatch = $(`<div class="catch" data-id=${obj._id}>`)
                .append($('<label>Angler</label>'))
                .append($(`<input type="text" class="angler" value=${obj.angler}>`))
                .append($(`<label>Weight</label>`))
                .append($(`<input type="number" class="weight" value=${obj.weight}>`))
                .append($(`<label>Species</label>`))
                .append($(`<input type="text" class="species" value=${obj.species}>`))
                .append($(`<label>Location</label>`))
                .append($(`<input type="text" class="location" value="${obj.location}">`))
                .append($(`<label>Bait</label>`))
                .append($(`<input type="text" class="bait" value=${obj.bait}>`))
                .append($(`<label>Capture Time</label>`))
                .append($(`<input type="number" class="captureTime" value="${obj.captureTime}">`))
                .append($(`<button class="update">Update</button>`)).click(function () {
                    let currDiv = $('div').find(`[data-id="${obj._id}"]`);
                    $.ajax({
                        url: baseURL + `biggestCatches/${obj._id}`,
                        method: 'PUT',
                        headers: authHeaders,
                        contentType: 'application/json',
                        data: JSON.stringify({
                            angler: currDiv.find('.angler').val(),
                            weight: Number(currDiv.find('.weight').val()),
                            species: currDiv.find('.species').val(),
                            location: currDiv.find('.location').val(),
                            bait: currDiv.find('.bait').val(),
                            captureTime: Number(currDiv.find('.captureTime').val())
                        })
                    });
                })
                .append($(`<button class="delete">Delete</button>`)).click(function () {
                    let currDiv = $('div').find(`[data-id="${obj._id}"]`);
                    $.ajax({
                        url: baseURL + `biggestCatches/${obj._id}`,
                        method: 'DELETE',
                        headers: authHeaders,
                        contentType: 'application/json',
                    });
                });

            $('#catches').append(singleCatch);

        }

    }

    function addCatch() {

        let angler = $('#addForm input.angler').val();
        let weight = Number($('#addForm input.weight').val());
        let species = $('#addForm input.species').val();
        let location = $('#addForm input.location').val();
        let bait = $('#addForm input.bait').val();
        let captureTime = Number($('#addForm input.captureTime').val());

        $.ajax({
            url: baseURL + 'biggestCatches',
            method: 'POST',
            headers: authHeaders,
            contentType: 'application/json',
            data: JSON.stringify({
                angler: angler,
                weight: weight,
                species: species,
                location: location,
                bait: bait,
                captureTime: captureTime
            })
        }).then(loadCatches).catch(displayError);


        $('#addForm input.angler').val('');
        $('#addForm input.weight').val('');
        $('#addForm input.species').val('');
        $('#addForm input.location').val('');
        $('#addForm input.bait').val('');
        $('#addForm input.captureTime').val();
    }


    function displayError() {
        console.log("Error");
    }
}