Skip to content

D
DAAExample
Commit 05f022e6 authored by miferreiro's avatar miferreiro
Browse files
Options

Added the management of pets in the frontend

parent 797b10db
Hide whitespace changes
Inline Side-by-side
Showing with 380 additions and 26 deletions
src/main/webapp/js/dao/pets.js 0 → 100644
View file @ 05f022e6
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
src/main/webapp/js/view/people.js
View file @ 05f022e6
......@@ -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('<div id="pets-container" style="display: show;">\
<h1 class="display-5 mt-3 mb-3">Mascotas</h1>\
</div>');
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(
'<table id="' + listId + '" class="table">\
<thead>\
<tr class="row">\
<th class="col-sm-4">Nombre</th>\
<th class="col-sm-5">Apellido</th>\
<th class="col-sm-3">&nbsp;</th>\
</tr>\
</thead>\
<tbody>\
</tbody>\
</table>'
);
parent.append(
'<table id="' + listId + '" class="table">\
<thead>\
<tr class="row">\
<th class="col-sm-2">Nombre</th>\
<th class="col-sm-3">Apellido</th>\
<th class="col-sm-5">&nbsp;</th>\
</tr>\
</thead>\
<tbody>\
</tbody>\
</table>'
);
};
var insertPeopleForm = function(parent) {
......@@ -160,11 +174,12 @@ var PeopleView = (function() {
var createPersonRow = function(person) {
return '<tr id="person-'+ person.id +'" class="row">\
<td class="name col-sm-4">' + person.name + '</td>\
<td class="surname col-sm-5">' + person.surname + '</td>\
<td class="col-sm-3">\
<td class="name col-sm-2">' + person.name + '</td>\
<td class="surname col-sm-4">' + person.surname + '</td>\
<td class="col-sm-5">\
<a class="edit btn btn-primary" href="#">Editar</a>\
<a class="delete btn btn-warning" href="#">Eliminar</a>\
<a class="pets btn btn-info" href="#">Mascotas</a>\
</td>\
</tr>';
};
......@@ -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) {
......
src/main/webapp/js/view/pets.js 0 → 100644
View file @ 05f022e6
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(
'<table id="' + listId + '" class="table">\
<thead>\
<tr class="row">\
<th class="col-sm-3">Nombre</th>\
<th class="col-sm-3">Especie</th>\
<th class="col-sm-3">Propietario</th>\
<th class="col-sm-3">&nbsp;</th>\
</tr>\
</thead>\
<tbody>\
</tbody>\
</table>'
);
};
var insertPetsForm = function(parent) {
parent.append(
'<form id="' + formId + '" class="mb-5 mb-11">\
<input name="idPet" type="hidden" value=""/>\
<div class="row">\
<div class="col-sm-3">\
<input name="namePet" type="text" value="" placeholder="Nombre" class="form-control" required/>\
</div>\
<div class="col-sm-3">\
<input name="specie" type="text" value="" placeholder="Especie" class="form-control" required/>\
</div>\
<div class="col-sm-3">\
<input name="idOwner" type="number" value="" placeholder="Propietario" class="form-control" required/>\
</div>\
<div class="col-sm-3">\
<input id="btnSubmitPet" type="submit" value="Crear" class="btn btn-primary" />\
<input id="btnClearPet" type="reset" value="Limpiar" class="btn" />\
</div>\
</div>\
</form>'
);
};
var createPetRow = function(pet) {
return '<tr id="pet-'+ pet.id +'" class="row">\
<td class="namePet col-sm-3">' + pet.name + '</td>\
<td class="specie col-sm-3">' + pet.specie + '</td>\
<td class="idOwner col-sm-3">' + pet.idOwner + '</td>\
<td class="col-sm-3">\
<a class="edit btn btn-primary" href="#">Editar</a>\
<a class="delete btn btn-warning" href="#">Eliminar</a>\
</td>\
</tr>';
};
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;
})();
src/main/webapp/main.html
View file @ 05f022e6
......@@ -15,21 +15,25 @@
<a href="#" class="navbar-brand d-flex align-items-center">
<strong>DAA Example</strong>
</a>
<button id="people" class="btn btn-dark">Personas</button>
<button id="pets" class="btn btn-dark">Mascotas</button>
<button id="logout" class="btn btn-dark">Cerrar sesión</button>
</div>
</div>
</header>
<div class="container">
<div id="people-container">
<h1 class="display-5 mt-3 mb-3">Personas</h1>
<div class="containerGeneric">
</div>
</div>
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/dao/people.js"></script>
<script type="text/javascript" src="js/dao/pets.js"></script>
<script type="text/javascript" src="js/view/people.js"></script>
<script type="text/javascript" src="js/view/pets.js"></script>
<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript">
$(document).ready(
......@@ -39,11 +43,32 @@
doLogout();
});
var view = new PeopleView(new PeopleDAO(),
'people-container', 'people-container'
);
view.init();
$('#people').click(function(event) {
$('.containerGeneric').empty();
$('.containerGeneric').append('<div id="people-container" style="display: show;">\
<h1 class="display-5 mt-3 mb-3">Personas</h1>\
</div>');
var viewPeople = new PeopleView(new PeopleDAO(),
'people-container', 'people-container'
);
viewPeople.init();
});
$('#pets').click(function(event) {
$('.containerGeneric').empty();
$('.containerGeneric').append('<div id="pets-container" style="display: show;">\
<h1 class="display-5 mt-3 mb-3">Mascotas</h1>\
</div>');
var viewPets = new PetsView(new PetsDAO(),
'pets-container', 'pets-container',
);
viewPets.init();
});
});
</script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment