From 05f022e6626d8d4dfe0596e93431ad0f15c6109c Mon Sep 17 00:00:00 2001 From: miferreiro Date: Mon, 18 Feb 2019 18:10:42 +0100 Subject: [PATCH] Added the management of pets in the frontend --- src/main/webapp/js/dao/pets.js | 59 +++++++ src/main/webapp/js/view/people.js | 55 ++++--- src/main/webapp/js/view/pets.js | 251 ++++++++++++++++++++++++++++++ src/main/webapp/main.html | 41 ++++- 4 files changed, 380 insertions(+), 26 deletions(-) create mode 100644 src/main/webapp/js/dao/pets.js create mode 100644 src/main/webapp/js/view/pets.js diff --git a/src/main/webapp/js/dao/pets.js b/src/main/webapp/js/dao/pets.js new file mode 100644 index 0000000..7245132 --- /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 eae5884..4667370 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 0000000..7579b05 --- /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 c2e28f1..3a1bf11 100644 --- a/src/main/webapp/main.html +++ b/src/main/webapp/main.html @@ -15,21 +15,25 @@ DAA Example + +
-
-

Personas

+
+
- + + + -- 2.18.1