Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 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 });
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement