Fisher_Game

function attachEvents() {

    let selectors = {
        angler : '.angler',
        weight : '.weight',
        species : '.species',
        location : '.location',
        bait : '.bait',
        captureTime : '.captureTime',
        catches : '#catches',
        aside : '#aside',
        update : '.update',
        load : '.load',
        delete : '.delete',
        add : '.add',
    }

    $(selectors.load).on('click', loadCatches);
    $(selectors.add).on('click', addCatch);

    //CATCHES INPUT FIELDS

    let catchDiv = $(selectors.catches);

    let anglerEdit = catchDiv.find($(selectors.angler));
    let weightEdit = catchDiv.find($(selectors.weight));
    let speciesEdit = catchDiv.find($(selectors.species));
    let locationEdit = catchDiv.find($(selectors.location));
    let baitEdit = catchDiv.find($(selectors.bait));
    let captureTimeEdit = catchDiv.find($(selectors.captureTime));

    //CREATE CATCH INPUT FIELDS

    let asideDiv = $(selectors.aside);

    let anglerCreate = asideDiv.find($(selectors.angler));
    let weightCreate = asideDiv.find($(selectors.weight));
    let speciesCreate = asideDiv.find($(selectors.species));
    let locationCreate = asideDiv.find($(selectors.location));
    let baitCreate = asideDiv.find($(selectors.bait));
    let captureTimeCreate = asideDiv.find($(selectors.captureTime));

    const appID = 'kid_HyMYN45dV';
    const username = 'guest';
    const password = 'guest';
    const base64auth = btoa(username + ":" + password);
    const authHeaders = {'Authorization': 'Basic ' + base64auth, 'Content-Type': 'application/json'};
    const baseUrl ='https://baas.kinvey.com/appdata/'+ appID + '/biggestCatches';

    function loadCatches() {

        $.ajax({
            method : 'GET',
            url : baseUrl,
            headers : authHeaders,
        })
        .then(displayCatches)
        .catch(displayError);
    }

    function addCatch() {

    }

    function updateCatch(catchId) {

        let testObj = {
            angler: "Gosho",
            weight: 500,
            species: "Fish",
            location: "Varna",
            bait: "Worm",
            captureTime: 500,
        };

        $.ajax({
            method : 'PUT',
            url : baseUrl + '/' + catchId,
            data: JSON.stringify(testObj),
            headers : authHeaders,
        })
        .then(loadCatches)
        .catch(displayError);
    }

    function deleteCatch(catchId) {

    }

    function displayCatches(catches) {

        for(const c of catches) {
            catchDiv
            .append($('<div>').attr('data-id', c._id)
            .append(`<label>Angler</label>` +
            `<input type="text" class="angler" value="${c.angler}"/>`+
            `<label>Weight</label>`+
            `<input type="number" class="weight" value="${c.weight}"/>`+
            `<label>Species</label>`+
            `<input type="text" class="species" value="${c.species}"/>`+
            `<label>Location</label>`+
            `<input type="text" class="location" value="${c.location}"/>`+
            `<label>Bait</label>`+
            `<input type="text" class="bait" value="${c.bait}"/>`+
            `<label>Capture Time</label>`+
            `<input type="number" class="captureTime" value="${c.captureTime}"/>`)
            .append($('<button>').addClass('update').text('Update').on('click', updateCatch.bind(this, c._id)))
            .append($('<button>').addClass('delete').text('Delete').on('click', deleteCatch.bind(this, c._id))));
        }
    }

    function displayError(error) {
        $('body').html(error.statusText);
    }
}