diff --git a/src/main/webapp/js/dao/pets.js b/src/main/webapp/js/dao/pets.js new file mode 100644 index 0000000000000000000000000000000000000000..7245132b368731e98c58b8af2f2abdd73c224903 --- /dev/null +++ b/src/main/webapp/js/dao/pets.js @@ -0,0 +1,59 @@ +var PetsDAO = (function() { + var resourcePath = "rest/pets/"; + 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() {}; + + let authToken = localStorage.getItem('authorization-token'); + if (authToken !== null) { + data.beforeSend = function(xhr) { + xhr.setRequestHeader('Authorization', 'Basic ' + authToken); + }; + } + + $.ajax(data).done(done).fail(fail).always(always); + }; + + function PetsDAO() { + this.listPets = function(done, fail, always) { + requestByAjax({ + url : resourcePath, + type : 'GET' + }, done, fail, always); + }; + + this.addPet = function(pet, done, fail, always) { + requestByAjax({ + url : resourcePath, + type : 'POST', + data : pet + }, done, fail, always); + }; + + this.modifyPet = function(pet, done, fail, always) { + requestByAjax({ + url : resourcePath + pet.id, + type : 'PUT', + data : pet + }, done, fail, always); + }; + + this.deletePet = function(id, done, fail, always) { + requestByAjax({ + url : resourcePath + id, + type : 'DELETE', + }, done, fail, always); + }; + + this.listPeoplePets = function(id, done, fail, always) { + requestByAjax({ + url : resourcePath + "?idOwner=" + id , + type : 'GET', + }, done, fail, always); + }; + + } + + return PetsDAO; +})(); \ 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 eae588463f74e5678f664f74617b3f72a8daa74b..4667370db57acef7e5b02008ef2bc36a091269ba 100644 --- a/src/main/webapp/js/view/people.js +++ b/src/main/webapp/js/view/people.js @@ -12,11 +12,12 @@ var PeopleView = (function() { 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); @@ -73,7 +74,7 @@ var PeopleView = (function() { 'name': row.find('td.name').text(), 'surname': row.find('td.surname').text() }; - } else { + } else { return undefined; } }; @@ -103,6 +104,19 @@ var PeopleView = (function() { } }; + this.listPets = function(id) { + $('.containerGeneric').empty(); + $('.containerGeneric').append('
\ +

Mascotas

\ +
'); + + var viewPets = new PetsView(new PetsDAO(), + 'pets-container', 'pets-container', + ); + viewPets.initPeople(id); + + }; + this.isEditing = function() { return $(formQuery + ' input[name="id"]').val() != ""; }; @@ -123,19 +137,19 @@ var PeopleView = (function() { }; var insertPeopleList = function(parent) { - parent.append( - '\ - \ - \ - \ - \ - \ - \ - \ - \ - \ -
NombreApellido 
' - ); + parent.append( + '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ +
NombreApellido 
' + ); }; var insertPeopleForm = function(parent) { @@ -160,11 +174,12 @@ var PeopleView = (function() { var createPersonRow = function(person) { return '\ - ' + person.name + '\ - ' + person.surname + '\ - \ + ' + person.name + '\ + ' + person.surname + '\ + \ Editar\ Eliminar\ + Mascotas\ \ '; }; @@ -181,6 +196,10 @@ var PeopleView = (function() { $('#person-' + person.id + ' a.delete').click(function() { self.deletePerson(person.id); }); + + $('#person-' + person.id + ' a.pets').click(function() { + self.listPets(person.id); + }); }; var appendToTable = function(person) { diff --git a/src/main/webapp/js/view/pets.js b/src/main/webapp/js/view/pets.js new file mode 100644 index 0000000000000000000000000000000000000000..7579b055b38bc1a6328f0d79c8d79f6a98db11a6 --- /dev/null +++ b/src/main/webapp/js/view/pets.js @@ -0,0 +1,251 @@ +var PetsView = (function() { + var dao; + + // Referencia a this que permite acceder a las funciones públicas desde las funciones de jQuery. + var self; + + var formId = 'pets-form'; + var listId = 'pets-list'; + var formQuery = '#' + formId; + var listQuery = '#' + listId; + + function PetsView(petsDao, formContainerId, listContainerId) { + dao = petsDao; + self = this; + + insertPetsForm($('#' + formContainerId)); + insertPetsList($('#' + listContainerId)); + + this.init = function() { + + dao.listPets(function(pets) { + $.each(pets, function(key, pet) { + appendToTable(pet); + }); + }); + + // 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 pet = self.getPetInForm(); + + if (self.isEditing()) { + dao.modifyPet(pet, + function(pet) { + $('#pet-' + pet.id + ' td.namePet').text(pet.name); + $('#pet-' + pet.id + ' td.specie').text(pet.specie); + $('#pet-' + pet.id + ' td.idOwner').text(pet.idOwner); + self.resetForm(); + }, + showErrorMessage, + self.enableForm + ); + + } else { + dao.addPet(pet, + function(pet) { + appendToTable(pet); + self.resetForm(); + }, + showErrorMessage, + self.enableForm + ); + } + + return false; + }); + + $('#btnClearPet').click(this.resetForm); + }; + + this.initPeople = function(id) { + + dao.listPeoplePets(id, + function(pets) { + $.each(pets, function(key, pet) { + appendToTable(pet); + }); + }); + + // 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 pet = self.getPetInForm(); + + if (self.isEditing()) { + dao.modifyPet(pet, + function(pet) { + $('#pet-' + pet.id + ' td.namePet').text(pet.name); + $('#pet-' + pet.id + ' td.specie').text(pet.specie); + $('#pet-' + pet.id + ' td.idOwner').text(pet.idOwner); + self.resetForm(); + if(pet.idOwner != id) { + $('tr#pet-' + pet.id).remove(); + } + }, + showErrorMessage, + self.enableForm + ); + + } else { + dao.addPet(pet, + function(pet) { + appendToTable(pet); + self.resetForm(); + }, + showErrorMessage, + self.enableForm + ); + } + + return false; + }); + + $('#btnClearPet').click(this.resetForm); + }; + + + this.getPetInForm = function() { + var form = $(formQuery); + return { + 'id': form.find('input[name="idPet"]').val(), + 'name': form.find('input[name="namePet"]').val(), + 'specie': form.find('input[name="specie"]').val(), + 'idOwner': form.find('input[name="idOwner"]').val() + }; + }; + + this.getPetInRow = function(id) { + var row = $('#pet-' + id); + + if (row !== undefined) { + return { + 'id': id, + 'name': row.find('td.namePet').text(), + 'specie': row.find('td.specie').text(), + 'idOwner': form.find('td.idOwner').text() + }; + } else { + return undefined; + } + }; + + this.editPet = function(id) { + var row = $('#pet-' + id); + + if (row !== undefined) { + var form = $(formQuery); + + form.find('input[name="idPet"]').val(id); + form.find('input[name="namePet"]').val(row.find('td.namePet').text()); + form.find('input[name="specie"]').val(row.find('td.specie').text()); + form.find('input[name="idOwner"]').val(row.find('td.idOwner').text()); + + $('input#btnSubmitPet').val('Modificar'); + } + }; + + this.deletePet = function(id) { + if (confirm('Está a punto de eliminar a una mascota. ¿Está seguro de que desea continuar?')) { + dao.deletePet(id, + function() { + $('tr#pet-' + id).remove(); + }, + showErrorMessage + ); + } + }; + + this.isEditing = function() { + return $(formQuery + ' input[name="idPet"]').val() != ""; + }; + + this.disableForm = function() { + $(formQuery + ' input').prop('disabled', true); + }; + + this.enableForm = function() { + $(formQuery + ' input').prop('disabled', false); + }; + + this.resetForm = function() { + $(formQuery)[0].reset(); + $(formQuery + ' input[name="idPet"]').val(''); + $('#btnSubmitPet').val('Crear'); + }; + }; + + var insertPetsList = function(parent) { + parent.append( + '\ + \ + \ + \ + \ + \ + \ + \ + \ + \ + \ +
NombreEspeciePropietario 
' + ); + }; + + var insertPetsForm = function(parent) { + parent.append( + '
\ + \ +
\ +
\ + \ +
\ +
\ + \ +
\ +
\ + \ +
\ +
\ + \ + \ +
\ +
\ +
' + ); + }; + + var createPetRow = function(pet) { + return '\ + ' + pet.name + '\ + ' + pet.specie + '\ + ' + pet.idOwner + '\ + \ + Editar\ + Eliminar\ + \ + '; + }; + + var showErrorMessage = function(jqxhr, textStatus, error) { + alert(textStatus + ": " + error); + }; + + var addRowListeners = function(pet) { + $('#pet-' + pet.id + ' a.edit').click(function() { + self.editPet(pet.id); + }); + + $('#pet-' + pet.id + ' a.delete').click(function() { + self.deletePet(pet.id); + }); + }; + + var appendToTable = function(pet) { + $(listQuery + ' > tbody:last') + .append(createPetRow(pet)); + addRowListeners(pet); + }; + + return PetsView; +})(); diff --git a/src/main/webapp/main.html b/src/main/webapp/main.html index c2e28f18e86ede920b9b3bdb675f343473452886..3a1bf11c92db2f8ff0494fffec1c4d1606b465a9 100644 --- a/src/main/webapp/main.html +++ b/src/main/webapp/main.html @@ -15,21 +15,25 @@ DAA Example + +
-
-

Personas

+
+
- + + +