From 39a7b6b2da4ffaa862d16ab4debd4388d169b29d Mon Sep 17 00:00:00 2001 From: Miguel Reboiro-Jato Date: Wed, 8 Feb 2017 22:07:41 +0100 Subject: [PATCH] Refactorizes the frontend The frontend has been refactorized to use classes in the JavaScript files. --- src/main/webapp/js/dao/people.js | 100 +++++----- src/main/webapp/js/view/people.js | 304 ++++++++++++++++-------------- src/main/webapp/main.html | 7 +- 3 files changed, 214 insertions(+), 197 deletions(-) diff --git a/src/main/webapp/js/dao/people.js b/src/main/webapp/js/dao/people.js index ab50d8c..281bdc2 100644 --- a/src/main/webapp/js/dao/people.js +++ b/src/main/webapp/js/dao/people.js @@ -1,57 +1,47 @@ -function listPeople(done, fail, always) { - done = typeof done !== 'undefined' ? done : function() {}; - fail = typeof fail !== 'undefined' ? fail : function() {}; - always = typeof always !== 'undefined' ? always : function() {}; +var PeopleDAO = (function() { + var resourcePath = "rest/people/"; + var requestByAjax = function(data, done, fail, always) { + done = typeof done !== 'undefined' ? done : function() {}; + fail = typeof fail !== 'undefined' ? fail : function() {}; + always = typeof always !== 'undefined' ? always : function() {}; + + $.ajax(data) + .done(done) + .fail(fail) + .always(always); + }; - $.ajax({ - url: 'rest/people', - type: 'GET' - }) - .done(done) - .fail(fail) - .always(always); -} - -function addPerson(person, done, fail, always) { - done = typeof done !== 'undefined' ? done : function() {}; - fail = typeof fail !== 'undefined' ? fail : function() {}; - always = typeof always !== 'undefined' ? always : function() {}; + function PeopleDAO() { + this.listPeople = function(done, fail, always) { + requestByAjax({ + url: resourcePath, + type: 'GET' + }, done, fail, always); + }; + + this.addPerson = function(person, done, fail, always) { + requestByAjax({ + url: resourcePath, + type: 'POST', + data: person + }, done, fail, always); + }; + + this.modifyPerson = function(person, done, fail, always) { + requestByAjax({ + url: resourcePath + person.id, + type: 'PUT', + data: person + }, done, fail, always); + }; + + this.deletePerson = function(id, done, fail, always) { + requestByAjax({ + url: resourcePath + id, + type: 'DELETE', + }, done, fail, always); + }; + } - $.ajax({ - url: 'rest/people', - type: 'POST', - data: person - }) - .done(done) - .fail(fail) - .always(always); -} - -function modifyPerson(person, done, fail, always) { - done = typeof done !== 'undefined' ? done : function() {}; - fail = typeof fail !== 'undefined' ? fail : function() {}; - always = typeof always !== 'undefined' ? always : function() {}; - - $.ajax({ - url: 'rest/people/' + person.id, - type: 'PUT', - data: person - }) - .done(done) - .fail(fail) - .always(always); -} - -function deletePerson(id, done, fail, always) { - done = typeof done !== 'undefined' ? done : function() {}; - fail = typeof fail !== 'undefined' ? fail : function() {}; - always = typeof always !== 'undefined' ? always : function() {}; - - $.ajax({ - url: 'rest/people/' + id, - type: 'DELETE', - }) - .done(done) - .fail(fail) - .always(always); -} \ No newline at end of file + return PeopleDAO; +})(); \ No newline at end of file diff --git a/src/main/webapp/js/view/people.js b/src/main/webapp/js/view/people.js index effe4e6..1f7bc5e 100644 --- a/src/main/webapp/js/view/people.js +++ b/src/main/webapp/js/view/people.js @@ -1,157 +1,183 @@ -var peopleFormId = 'people-form'; -var peopleListId = 'people-list'; -var peopleFormQuery = '#' + peopleFormId; -var peopleListQuery = '#' + peopleListId; - -function insertPeopleList(parent) { - parent.append( - '\ - \ - \ - \ - \ - \ - \ -
NombreApellido
' - ); -} - -function insertPeopleForm(parent) { - parent.append( - '
\ - \ - \ - \ - \ - \ -
' - ); -} - -function createPersonRow(person) { - return '\ - ' + person.name + '\ - ' + person.surname + '\ - \ - Edit\ - \ - \ - Delete\ - \ - '; -} +var PeopleView = (function() { + var dao; + + // Referencia a this que permite acceder a las funciones públicas desde las funciones de jQuery. + var self; + + var formId = 'people-form'; + var listId = 'people-list'; + var formQuery = '#' + formId; + var listQuery = '#' + listId; + + function PeopleView(peopleDao, formContainerId, listContainerId) { + dao = peopleDao; + self = this; + + insertPeopleForm($('#' + formContainerId)); + insertPeopleList($('#' + listContainerId)); + + this.init = function() { + dao.listPeople(function(people) { + $.each(people, function(key, person) { + appendToTable(person); + }); + }); + + // La acción por defecto de enviar formulario (submit) se sobreescribe + // para que el envío sea a través de AJAX + $(formQuery).submit(function(event) { + var person = self.getPersonInForm(); + + if (self.isEditing()) { + dao.modifyPerson(person, + function(person) { + $('#person-' + person.id + ' td.name').text(person.name); + $('#person-' + person.id + ' td.surname').text(person.surname); + self.resetForm(); + }, + showErrorMessage, + self.enableForm + ); + } else { + dao.addPerson(person, + function(person) { + appendToTable(person); + self.resetForm(); + }, + showErrorMessage, + self.enableForm + ); + } + + return false; + }); + + $('#btnClear').click(this.resetForm); + }; -function formToPerson() { - var form = $(peopleFormQuery); - return { - 'id': form.find('input[name="id"]').val(), - 'name': form.find('input[name="name"]').val(), - 'surname': form.find('input[name="surname"]').val() - }; -} + this.getPersonInForm = function() { + var form = $(formQuery); + return { + 'id': form.find('input[name="id"]').val(), + 'name': form.find('input[name="name"]').val(), + 'surname': form.find('input[name="surname"]').val() + }; + }; -function personToForm(person) { - var form = $(peopleFormQuery); - form.find('input[name="id"]').val(person.id); - form.find('input[name="name"]').val(person.name); - form.find('input[name="surname"]').val(person.surname); -} + this.getPersonInRow = function(id) { + var row = $('#person-' + id); -function rowToPerson(id) { - var row = $('#person-' + id); + if (row !== undefined) { + return { + 'id': id, + 'name': row.find('td.name').text(), + 'surname': row.find('td.surname').text() + }; + } else { + return undefined; + } + }; + + this.editPerson = function(id) { + var row = $('#person-' + id); - return { - 'id': id, - 'name': row.find('td.name').text(), - 'surname': row.find('td.surname').text() - }; -} + console.log(row); + if (row !== undefined) { + var form = $(formQuery); + console.log(form); + console.log(row.find('td.name').text()); + console.log(row.find('td.surname').text()); + + form.find('input[name="id"]').val(id); + form.find('input[name="name"]').val(row.find('td.name').text()); + form.find('input[name="surname"]').val(row.find('td.surname').text()); + } + } -function isEditing() { - return $(peopleFormQuery + ' input[name="id"]').val() != ""; -} + this.isEditing = function() { + return $(formQuery + ' input[name="id"]').val() != ""; + }; -function disableForm() { - $(peopleFormQuery + ' input').prop('disabled', true); -} + this.disableForm = function() { + $(formQuery + ' input').prop('disabled', true); + }; -function enableForm() { - $(peopleFormQuery + ' input').prop('disabled', false); -} + this.enableForm = function() { + $(formQuery + ' input').prop('disabled', false); + }; -function resetForm() { - $(peopleFormQuery)[0].reset(); - $(peopleFormQuery + ' input[name="id"]').val(''); - $('#btnSubmit').val('Crear'); -} + this.resetForm = function() { + $(formQuery)[0].reset(); + $(formQuery + ' input[name="id"]').val(''); + $('#btnSubmit').val('Crear'); + }; + } + + var insertPeopleList = function(parent) { + parent.append( + '\ + \ + \ + \ + \ + \ + \ +
NombreApellido
' + ); + } -function showErrorMessage(jqxhr, textStatus, error) { - alert(textStatus + ": " + error); -} + var insertPeopleForm = function(parent) { + parent.append( + '
\ + \ + \ + \ + \ + \ +
' + ); + } -function addRowListeners(person) { - $('#person-' + person.id + ' a.edit').click(function() { - personToForm(rowToPerson(person.id)); - $('input#btnSubmit').val('Modificar'); - }); - - $('#person-' + person.id + ' a.delete').click(function() { - if (confirm('Está a punto de eliminar a una persona. ¿Está seguro de que desea continuar?')) { - deletePerson(person.id, - function() { - $('tr#person-' + person.id).remove(); - }, - showErrorMessage - ); - } - }); -} + var createPersonRow = function(person) { + return '\ + ' + person.name + '\ + ' + person.surname + '\ + \ + Edit\ + \ + \ + Delete\ + \ + '; + } -function appendToTable(person) { - $(peopleListQuery + ' > tbody:last') - .append(createPersonRow(person)); - addRowListeners(person); -} + var showErrorMessage = function(jqxhr, textStatus, error) { + alert(textStatus + ": " + error); + } -function initPeople() { - // getScript permite importar otro script. En este caso, se importan las - // funciones de acceso a datos. - $.getScript('js/dao/people.js', function() { - listPeople(function(people) { - $.each(people, function(key, person) { - appendToTable(person); - }); + var addRowListeners = function(person) { + $('#person-' + person.id + ' a.edit').click(function() { + self.editPerson(person.id); + $('input#btnSubmit').val('Modificar'); }); - // La acción por defecto de enviar formulario (submit) se sobreescribe - // para que el envío sea a través de AJAX - $(peopleFormQuery).submit(function(event) { - var person = formToPerson(); - - if (isEditing()) { - modifyPerson(person, - function(person) { - $('#person-' + person.id + ' td.name').text(person.name); - $('#person-' + person.id + ' td.surname').text(person.surname); - resetForm(); + $('#person-' + person.id + ' a.delete').click(function() { + if (confirm('Está a punto de eliminar a una persona. ¿Está seguro de que desea continuar?')) { + dao.deletePerson(person.id, + function() { + $('tr#person-' + person.id).remove(); }, - showErrorMessage, - enableForm - ); - } else { - addPerson(person, - function(person) { - appendToTable(person); - resetForm(); - }, - showErrorMessage, - enableForm + showErrorMessage ); } - - return false; }); - - $('#btnClear').click(resetForm); - }); -}; + } + + var appendToTable = function(person) { + $(listQuery + ' > tbody:last') + .append(createPersonRow(person)); + addRowListeners(person); + } + + return PeopleView; +})(); diff --git a/src/main/webapp/main.html b/src/main/webapp/main.html index 725e55f..461f6e5 100644 --- a/src/main/webapp/main.html +++ b/src/main/webapp/main.html @@ -11,12 +11,13 @@ + -- 2.18.1