FisherGame

function attachEvents() {
    const UrlBase = 'https://baas.kinvey.com/appdata/kid_rySvTga5G/biggestCatches/';

    const Credentials = {
        username: 'simon',
        password: 's'
    };

    const Method = {
        GET: 'GET',
        POST: 'POST',
        PUT: 'PUT',
        DELETE: 'DELETE',
    };

    const RegexFirstWord = /(\w+?)\s/;

    const divCatches = $('#catches');
    const formAdd = $('#addForm');

    const btnLoad = $('button.load').click($onLoadClicked);
    const btnAdd = $('button.add').click($onAddClicked);

    function $ajaxAuth(method, url, objCredentials, objData) {
        if (objData &&
            'id' in objData) {
            url += objData.id;
        }

        const requestSettings = {
            method,
            url,
            data: objData && JSON.stringify(objData.jsonBody),
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", "Basic " + btoa(`${objCredentials.username}:${objCredentials.password}`));
                xhr.setRequestHeader("Content-Type", "application/json");
            }
        }

        return $.ajax(requestSettings);
    }

    function $createJsonBodyFromFieldSet(fieldset, emptyInputField = true) {
        const jsonBody = {};

        fieldset.find('input').each((ind, elem) => {
            elem = $(elem);
            const propFromClass = elem.attr('class');
            const type = elem.attr('type');

            let parsedValue = elem.val();
            if (type === 'number') {
                parsedValue = +parsedValue;
            }

            jsonBody[propFromClass] = parsedValue
            emptyInputField && elem.val('');
        });

        return jsonBody;
    }

    function $onAddClicked() {
        const jsonBody = $createJsonBodyFromFieldSet(formAdd);

        $ajaxAuth(Method.POST, UrlBase, Credentials, { jsonBody });
    }

    function $onLoadClicked() {
        $ajaxAuth(Method.GET, UrlBase, Credentials)
            .then(loadAllCatches);
    }

    function loadAllCatches(allCatches) {
        divCatches.empty();
        for (const currCatch of allCatches) {
            $createCatchDiv(currCatch, divCatches);
        }
    }

    function $createCatchDiv({ _id, angler, bait, captureTime, location, species, weight }, elementToAppendTo) {
        const divTarget = $('<div>').addClass('catch').attr('data-id', _id).appendTo(elementToAppendTo);

        $createFieldPair('Angler', 'text', angler, divTarget);
        $createFieldPair('Weight', 'number', weight, divTarget);
        $createFieldPair('Species', 'text', species, divTarget);
        $createFieldPair('Location', 'text', location, divTarget);
        $createFieldPair('Bait', 'text', bait, divTarget);
        $createFieldPair('Capture Time', 'number', captureTime, divTarget);

        $createButton('Update', $onUpdateClicked, divTarget);
        $createButton('Delete', $onDeleteClicked, divTarget);
    }

    function $createFieldPair(name, inpType, value, elementToAppendTo) {
        $('<label>')
            .text(name)
            .appendTo(elementToAppendTo);

        name = name.indexOf(' ') >= 0 ?
                    name.replace(RegexFirstWord, (m, g1) => g1.toLowerCase()) :
                    name.toLowerCase();
        $('<input>')
            .attr('type', inpType)
            .attr('value', value)
            .addClass(name)
            .appendTo(elementToAppendTo);
    }

    function $createButton(name, clickHandler, elementToAppendTo) {
        $('<button>')
            .addClass(name.toLowerCase())
            .text(name)
            .click(clickHandler)
            .appendTo(elementToAppendTo);
    }

    function $onDeleteClicked() {
        const divCatch = $(this).parent();
        const id = divCatch.attr('data-id');
        divCatch.remove();

        $ajaxAuth(Method.DELETE, UrlBase, Credentials, { id });
    }

    function $onUpdateClicked() {
        const divCatch = $(this).parent();
        const id = divCatch.attr('data-id');

        const jsonBody = $createJsonBodyFromFieldSet(divCatch, false);

        $ajaxAuth(Method.PUT, UrlBase, Credentials, { id, jsonBody });
    }
}