Skip to content

D
daaexample
Commit 87695a66 authored by Iago Gómez Salgado's avatar Iago Gómez Salgado
Browse files
Options

Change Frontend: Jquery -> ReactJS

parent 79dd78e0
Hide whitespace changes
Inline Side-by-side
Showing with 402 additions and 476 deletions
src/main/webapp/js/view/people-container.js 0 → 100644
View file @ 87695a66
class NewPerson extends React.Component {
addPerson() {
var name = this.refs.name.value;
var surname = this.refs.surname.value;
this.refs.name.value = "";
this.refs.surname.value = "";
var person = {'name': name, 'surname': surname};
$.ajax({
url: 'rest/people/',
type: 'POST',
data: person,
success: (response) => {
console.log('Person added!', response);
}
});
}
render() {
return (
<div>
<input type="text" ref="name" placeholder="Enter a person name" />
<input type="text" ref="surname" placeholder="Enter a person surname" />
<button type="button" className="btn btn-primary" onClick={this.addPerson.bind(this)}>Submit</button>
</div>
)
}
}
class PeopleList extends React.Component{
render() {
var people = this.props.people.map(person =>
<Person key={person.id} person={person}/>
);
return (
<div>
<NewPerson />
<table className="table table-striped">
<tbody>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
<th></th>
<th></th>
<th></th>
</tr>
{people}
</tbody>
</table>
</div>
)
}
}
class Person extends React.Component{
constructor(props) {
super(props);
this.state = {editable: false, isModalOpen: false};
}
handleDelete(id) {
if (confirm('Está a punto de eliminar a una persona. ¿Está seguro de que desea continuar?')) {
$.ajax({
url: 'rest/people/' + id,
type: 'DELETE',
success(response) {
console.log('Person successfully removed');
}
});
}
}
handleEdit(){
if (this.state.editable) {
var id = this.refs.id.value;
var name = this.refs.name.value;
var surname = this.refs.surname.value;
var person = {'id': id, 'name': name, 'surname': surname};
}
$.ajax({
url: 'rest/people/' + id,
type: 'PUT',
data: person,
success: (response) => {
console.log('Person updated!', response);
}
});
this.setState({editable: !this.state.editable});
}
openModal() {
this.setState({isModalOpen: true});
}
closeModal() {
this.setState({isModalOpen: false });
}
render() {
var id = this.state.editable ? <input type='hidden' ref="id" defaultValue={this.props.person.id} /> : <span>{this.props.person.id}</span>;
var name = this.state.editable ? <input type='text' ref="name" defaultValue={this.props.person.name} /> : <span>{this.props.person.name}</span>;
var surname = this.state.editable ? <input type='text' ref="surname" defaultValue={this.props.person.surname} /> : <span>{this.props.person.surname}</span>;
return (
<tr>
<td>{id}</td>
<td>{name}</td>
<td>{surname}</td>
<td>
<a href="#" onClick={() => this.openModal()}>
<i className="fa fa-paw" aria-hidden="true"></i>
</a>
<Modal isOpen={this.state.isModalOpen} onClose={() => this.closeModal()}>
<PetsApp id={this.props.person.id} owner_name={this.props.person.name}/>
</Modal>
</td>
<td>
<a href="#" onClick={this.handleEdit.bind(this, this.props.person.id)}>
{this.state.editable ? 'Submit' : 'Edit' }
<i className="fa fa-edit" aria-hidden="true"></i>
</a>
</td>
<td>
<a href="#" onClick={this.handleDelete.bind(this, this.props.person.id)}>
<i className="fa fa-trash-o" aria-hidden="true"></i>
</a>
</td>
</tr>
)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {people: []};
}
componentDidMount() {
$.ajax({
url: 'rest/people',
type: 'GET',
success: (response) => {
this.setState({people: response})
}
});
}
componentWillUpdate() {
$.ajax({
url: 'rest/people',
type: 'GET',
success: (response) => {
this.setState({people: response})
}
});
}
render() {
return (
<PeopleList people={this.state.people}/>
)
}
}
class NewPet extends React.Component {
constructor(props) {
super(props);
}
addPet() {
var name = this.refs.name.value;
var kind = this.refs.kind.value;
var breed = this.refs.breed.value;
var owner = this.props.owner;
this.refs.name.value = "";
this.refs.kind.value = "";
this.refs.breed.value = "";
var pet = {'name': name, 'kind': kind, 'breed': breed, 'owner': owner};
$.ajax({
url: 'rest/pets/',
type: 'POST',
data: pet,
success: (response) => {
console.log('Pet added!', response);
}
});
}
render() {
return (
<div>
<input type="text" ref="name" placeholder="Enter a pet name" />
<input type="text" ref="kind" placeholder="Enter a pet kind" />
<input type="text" ref="breed" placeholder="Enter a pet breed" />
<button type="button" className="btn btn-primary" onClick={this.addPet.bind(this)}>Submit</button>
</div>
)
}
}
class PetsList extends React.Component{
constructor(props) {
super(props);
}
render() {
var pets = this.props.pets.map(pet =>
<Pet key={pet.id} pet={pet}/>
);
return (
<div>
<center><h1>Pets de {this.props.owner_name}</h1></center>
<NewPet owner={this.props.owner}/>
<table className="table table-striped">
<tbody>
<tr>
<th>#</th>
<th>Name</th>
<th>Kind</th>
<th>breed</th>
<th>owner</th>
<th></th>
<th></th>
</tr>
{pets}
</tbody>
</table>
</div>
)
}
}
class Pet extends React.Component{
constructor(props) {
super(props);
this.state = {editable: false};
}
handleDelete(id) {
if (confirm('Está a punto de eliminar a una mascota. ¿Está seguro de que desea continuar?')) {
$.ajax({
url: 'rest/pets/' + id,
type: 'DELETE',
success(response) {
console.log('Pet successfully removed');
}
});
}
}
handleEdit(id){
if (this.state.editable) {
var id = id;
var name = this.refs.name.value;
var kind = this.refs.kind.value;
var breed = this.refs.breed.value;
var owner = this.refs.owner.value;
var pet = {'id': id, 'name': name, 'kind': kind, 'breed': breed, 'owner': owner};
}
$.ajax({
url: 'rest/pets/' + id,
type: 'PUT',
data: pet,
success: (response) => {
console.log('Pet updated!', response);
}
});
this.setState({editable: !this.state.editable});
}
render() {
var id = this.state.editable ? <input type='hidden' ref="id" defaultValue={this.props.pet.id} /> : <span>{this.props.pet.id}</span>;
var name = this.state.editable ? <input type='text' ref="name" defaultValue={this.props.pet.name} /> : <span>{this.props.pet.name}</span>;
var kind = this.state.editable ? <input type='text' ref="kind" defaultValue={this.props.pet.kind} /> : <span>{this.props.pet.kind}</span>;
var breed = this.state.editable ? <input type='text' ref="breed" defaultValue={this.props.pet.breed} /> : <span>{this.props.pet.breed}</span>;
var owner = this.state.editable ? <input type='hidden' ref="owner" defaultValue={this.props.pet.owner} /> : <span>{this.props.pet.owner}</span>;
return (
<tr>
<td>{id}</td>
<td>{name}</td>
<td>{kind}</td>
<td>{breed}</td>
<td>{owner}</td>
<td>
<a href="#" onClick={this.handleEdit.bind(this, this.props.pet.id)}>
{this.state.editable ? 'Submit' : 'Edit' }
<i className="fa fa-edit" aria-hidden="true"></i>
</a>
</td>
<td>
<a href="#" onClick={this.handleDelete.bind(this, this.props.pet.id)}>
<i className="fa fa-trash-o" aria-hidden="true"></i>
</a>
</td>
</tr>
)
}
}
class PetsApp extends React.Component {
constructor(props) {
super(props);
this.state = {pets: []};
}
componentDidMount() {
$.ajax({
url: 'rest/people/' + this.props.id + '/pets' ,
type: 'GET',
success: (response) => {
this.setState({pets: response})
}
});
}
componentWillUnmount() {
}
componentWillUpdate() {
$.ajax({
url: 'rest/people/' + this.props.id + '/pets' ,
type: 'GET',
success: (response) => {
this.setState({pets: response})
}
});
}
render() {
return (
<PetsList pets={this.state.pets} owner={this.props.id} owner_name={this.props.owner_name} />
)
}
}
ReactDOM.render(
<App />,
document.getElementById('people-container')
)
class Modal extends React.Component {
render() {
if (this.props.isOpen === false)
return null
let modalStyle = {
position: 'absolute',
top: '40%',
left: '50%',
transform: 'translate(-50%, -50%)',
zIndex: '9999',
background: '#fff'
}
let backdropStyle = {
position: 'absolute',
width: '100%',
height: '100%',
top: '0px',
left: '0px',
zIndex: '9998',
background: 'rgba(0, 0, 0, 0.3)'
}
return (
<div>
<div style={modalStyle}>{this.props.children}</div>
<div style={backdropStyle} onClick={e => this.close(e)}/>}
</div>
)
}
close(e) {
e.preventDefault()
if (this.props.onClose) {
this.props.onClose()
}
}
}
src/main/webapp/js/view/people.js deleted 100644 → 0
View file @ 79dd78e0
var PeopleView = (function() {
var dao;
var pets;
// Referencia a this que permite acceder a las funciones públicas desde las funciones de jQuery.
var self;
var selfpets;
var formId = 'people-form';
var listId = 'people-list';
var formQuery = '#' + formId;
var listQuery = '#' + listId;
var petsFormId = 'pets-form';
var petsListId = 'pets-list';
var petsFormQuery = '#' + petsFormId;
var petsListQuery = '#' + petsListId;
function PeopleView(peopleDao, petsDAO, formContainerId, listContainerId) {
dao = peopleDao;
pets = petsDAO;
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;
});
petsView = new PetsView();
petsView.init();
$('#btnClear').click(this.resetForm);
};
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()
};
};
this.getPersonInRow = function(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);
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());
}
}
this.isEditing = function() {
return $(formQuery + ' input[name="id"]').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="id"]').val('');
$('#btnSubmit').val('Crear');
};
}
var insertPeopleList = function(parent) {
parent.append(
'<table id="' + listId + '">\
<tr>\
<th>Nombre</th>\
<th>Apellido</th>\
<th></th>\
<th></th>\
</tr>\
</table>'
);
}
var insertPeopleForm = function(parent) {
parent.append(
'<form id="' + formId + '">\
<input name="id" type="hidden" value=""/>\
<input name="name" type="text" value="" />\
<input name="surname" type="text" value=""/>\
<input id="btnSubmit" type="submit" value="Create"/>\
<input id="btnClear" type="reset" value="Limpiar"/>\
</form>'
);
}
var createPersonRow = function(person) {
return '<tr id="person-'+ person.id +'">\
<td class="name">' + person.name + '</td>\
<td class="surname">' + person.surname + '</td>\
<td>\
<a class="edit" href="#">Edit</a>\
</td>\
<td>\
<a class="delete" href="#">Delete</a>\
</td>\
<td>\
<a class="pets" href="#">View Pets</a>\
</td>\
</tr>';
}
var showErrorMessage = function(jqxhr, textStatus, error) {
alert(textStatus + ": " + error);
}
var addRowListeners = function(person) {
$('#person-' + person.id + ' a.edit').click(function() {
self.editPerson(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?')) {
dao.deletePerson(person.id,
function() {
$('tr#person-' + person.id).remove();
},
showErrorMessage
);
}
});
$('#person-' + person.id + ' a.pets').click(function() {
showPeoplePets(person);
});
}
var appendToTable = function(person) {
$(listQuery + ' > tbody:last')
.append(createPersonRow(person));
addRowListeners(person);
}
var showPeoplePets = function(person) {
pets.listPeoplePets(person, function(pets) {
deletePetsTable();
createPetsTable(person.name);
$.each(pets, function (key, pet) {
addPetToTable(pet);
});
});
}
var deletePetsTable = function(){
$(petsListQuery).remove();
}
var createPetsTable = function (owner){
$('div').append(
'<table class="table" id="' + petsListId + '">\
<tr class="owner">\
<th>Mascotas de: ' + owner + '</th>\
<th></th>\
<th></th>\
<th></th>\
<th></th>\
</tr>\
<tr>\
<th>Nombre</th>\
<th>Especie</th>\
<th>Raza</th>\
<th></th>\
<th></th>\
</tr>\
</table>'
);
}
var addPetToTable = function (pet){
$(petsListQuery + ' > tbody:last').append(petToRow(pet));
addPetListeners(pet);
}
var addPetListeners = function(pet) {
$('#pet-' + pet.id + ' a.editPet').click(function() {
petToForm(pet);
$('input#petsBtnSubmit').val('Modificar');
});
$('#pet-' + pet.id + ' a.deletePet').click(function() {
if(confirm("Está a punto de eliminar a una mascota. ¿Está seguro de que desea continuar?")) {
pets.deletePet(pet.id,
function () {
$('tr#pet-' + pet.id).remove();
},
showErrorMessage
);
}
});
}
var insertPetList = function(parent) {
parent.append(
'<table id="' + petsListId + '">\
<tr>\
<th>Nombre</th>\
<th>Especie</th>\
<th>Raza</th>\
<th></th>\
<th></th>\
</tr>\
</table>'
);
}
var insertPetForm = function(parent) {
parent.append(
'<form id="' + petsFormId + '">\
<input name="id" type="hidden" value=""/>\
<input name="name" type="text" value="" />\
<input name="kind" type="text" value=""/>\
<input name="breed" type="text" value=""/>\
<input name="owner" type="hidden" value=""/>\
<input id="petsBtnSubmit" type="submit" value="Create"/>\
<input id="btnClear" type="reset" value="Limpiar"/>\
</form>'
);
}
var createPetRow = function(pet) {
return '<tr id="pet-'+ pet.id +'">\
<td class="name">' + pet.name + '</td>\
<td class="kind">' + pet.kind + '</td>\
<td class="breed">' + pet.breed + '</td>\
<td class="owner">' + pet.owner + '</td>\
<td>\
<a class="edit" href="#">Edit</a>\
</td>\
<td>\
<a class="delete" href="#">Delete</a>\
</td>\
</tr>';
}
var petToRow = function(pet) {
console.log(pet);
return '<tr id="pet-' + pet.id + '">\
<td class="name">' + pet.name + '</td>\
<td class="kind">' + pet.kind + '</td>\
<td class="breed">' + pet.breed + '</td>\
<td id="owner" type="hidden" value="' + pet.owner + '">\
<td>\
<a class="editPet" href="#">Edit</a>\
</td>\
<td>\
<a class="deletePet" href="#">Delete</a>\
</td>\
</tr>';
}
function petToForm(pet) {
var form = $(petsFormQuery);
console.log(pet.id);
form.find('input[name="petId"]').val(pet.id);
form.find('input[name="petName"]').val(pet.name);
form.find('input[name="kind"]').val(pet.kind);
form.find('input[name="breed"]').val(pet.breed);
form.find('input[name="owner"]').val(pet.owner);
}
var petsForm = function() {
$("body").append(
'<form id="' + petsFormId + '">\
<input name="petId" type="hidden" value=""/>\
Nombre: <input name="petName" type="text" value="" />\
Especie: <input name="kind" type="text" value="" />\
Raza: <input name="breed" type="text" value="" />\
Propietario: <input name="owner" type="text" value="" />\
<input id="petsBtnSubmit" type="submit" value="Crear"/>\
<input id="btnClear" type="reset" value="Limpiar"/>\
</form>'
);
}
var formToPet = function() {
var form = $(petsFormQuery);
return {
'id': form.find('input[name="petId"]').val(),
'name': form.find('input[name="petName"]').val(),
'kind': form.find('input[name="kind"]').val(),
'breed': form.find('input[name="breed"]').val(),
'owner': form.find('input[name="owner"]').val()
};
};
function PetsView() {
selfpets = this;
this.init = function() {
petsForm();
$(petsFormQuery).submit(function(event) {
var pet = selfpets.getPetInForm();
if (selfpets.isEditing()) {
pets.modifyPet(pet,
function(pet) {
$('#pet-' + pet.id + ' td.name').text(pet.name);
$('#pet-' + pet.id + ' td.kind').text(pet.kind);
$('#pet-' + pet.id + ' td.breed').text(pet.breed);
$('#pet-' + pet.id + ' td.owner').text(pet.owner);
selfpets.resetForm();
},
showErrorMessage,
selfpets.enableForm
);
} else {
console.log("ola");
pets.addPet(pet,
function(pet) {
selfpets.resetForm();
},
showErrorMessage,
selfpets.enableForm
);
}
return false;
});
$('#btnClear').click(this.resetForm);
};
selfpets.getPetInForm = function() {
var form = $(petsFormQuery);
return {
'id': form.find('input[name="petId"]').val(),
'name': form.find('input[name="petName"]').val(),
'kind': form.find('input[name="kind"]').val(),
'breed': form.find('input[name="breed"]').val(),
'owner': form.find('input[name="owner"]').val()
};
};
selfpets.getPetInRow = function(id) {
var row = $('#pet-' + id);
if (row !== undefined) {
return {
'id': id,
'name': row.find('td.name').text(),
'kind': row.find('td.kind').text(),
'breed': row.find('td.breed').text(),
'owner': row.find('td.owner')
};
} else {
return undefined;
}
};
selfpets.editPet = function(id) {
var row = $('#pet-' + id);
if (row !== undefined) {
var form = $(petsFormQuery);
form.find('input[name="petId"]').val(id);
form.find('input[name="petName"]').val(row.find('td.petName').text());
form.find('input[name="kind"]').val(row.find('td.kind').text());
form.find('input[name="breed"]').val(row.find('td.breed').text());
form.find('input[name="owner"]').val(owner);
}
}
selfpets.isEditing = function() {
return $(petsFormQuery + ' input[name="petId"]').val() != "";
};
selfpets.disableForm = function() {
$(petsFormQuery + ' input').prop('disabled', true);
};
selfpets.enableForm = function() {
$(petsFormQuery + ' input').prop('disabled', false);
};
selfpets.resetForm = function() {
$(petsFormQuery)[0].reset();
$(petsFormQuery + ' input[name="petId"]').val('');
$('#petsBtnSubmit').val('Crear');
};
}
return PeopleView;
})();
src/main/webapp/main.html
View file @ 87695a66
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DAA Example</title> <title>DAA Example</title>
</head>
<body>
<div id="people-container">
<h1>People</h1>
<a id="#logout" href="logout">Logout</a>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="js/dao/people.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript" src="js/view/people.js"></script>
<script type="text/javascript" src="js/dao/pets.js"></script> </head>
<script type="text/javascript" src="js/view/pets.js"></script> <body>
<script type="text/javascript">
$(document).ready(function() { <div class="page-header">
var view = new PeopleView(new PeopleDAO(), new PetsDAO(), 'people-container', 'people-container'); <h1>People and Pets Manager <small>simple webapp to manage people and their pets</small></h1>
view.init(); </div>
});
</script> <div id="people-container">
</body> </div>
<a id="#logout" href="logout"><button type="button" class="btn btn-danger">Logout</button></a>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-select/0.9.1/react-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.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/babel" src="js/view/people-container.js"></script>
</body>
</html> </html>
\ No newline at end of file
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