diff --git a/src/main/webapp/js/dao/people.js b/src/main/webapp/js/dao/people.js
index ab50d8c599ffdd95815db7c3f391caaf77108283..281bdc2762e489ca5892a6f1eba8c83a8e28cbb5 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 effe4e6a898c1aef198b78fa7517987e746304c5..1f7bc5ec03d301065334b27dd3cbee15c881a8ad 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(
- '\
- \
- | Nombre | \
- Apellido | \
- | \
- | \
-
\
-
'
- );
-}
-
-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(
+ '\
+ \
+ | Nombre | \
+ Apellido | \
+ | \
+ | \
+
\
+
'
+ );
+ }
-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 725e55f04f89991163751dd63e8ee1bc9b0367f9..461f6e52e8f92bfc313bca30ac8b347d9122387f 100644
--- a/src/main/webapp/main.html
+++ b/src/main/webapp/main.html
@@ -11,12 +11,13 @@
+