Created
February 22, 2018 17:51
-
-
Save parzibyte/984f9e93a79c946a4121ffbafc61a2f6 to your computer and use it in GitHub Desktop.
Agenda con PouchDB parte 4: editar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="http://cdn.jsdelivr.net/npm/pouchdb@6.4.1/dist/pouchdb.min.js"></script> | |
<link rel="stylesheet" href="style.css" type="text/css" /> | |
</head> | |
<body> | |
<h1>Agenda con PouchDB</h1> | |
<a target="_blank" href="https://www.parzibyte.me/blog">https://www.parzibyte.me/blog</a> | |
<br /> | |
<label for="nombreCompleto">Nombre:</label> | |
<br> | |
<input placeholder="Nombre y apellidos" type="text" name="nombreCompleto" id="nombreCompleto" /> | |
<br> | |
<br> | |
<label for="direccion">Dirección:</label> | |
<br> | |
<textarea placeholder="Escribe la dirección..." name="direccion" id=direccion rows="4" cols="30"></textarea> | |
<br> | |
<br> | |
<label for="telefono">Teléfono:</label> | |
<br> | |
<input placeholder="Por ejemplo, 555 222 333" type="tel" name="telefono" id="telefono" /> | |
<br> | |
<br> | |
<button id="btnGuardar">Guardar</button> | |
<button id="btnGuardarCambios">Guardar cambios</button> | |
<button id="btnCancelarEdicion">Cancelar</button> | |
<br /> | |
<br /> | |
<table> | |
<thead> | |
<tr> | |
<th>Nombre</th> | |
<th>Dirección</th> | |
<th>Teléfono</th> | |
<th>Editar</th> | |
</tr> | |
</thead> | |
<tbody id="cuerpoTabla"> | |
</tbody> | |
</table> | |
<script src="script.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var bd = new PouchDB("agenda"), | |
$nombreCompleto = document.querySelector("#nombreCompleto"), | |
$direccion = document.querySelector("#direccion"), | |
$telefono = document.querySelector("#telefono"), | |
$btnGuardar = document.querySelector("#btnGuardar"), | |
$btnGuardarCambios = document.querySelector("#btnGuardarCambios"), | |
$btnCancelarEdicion = document.querySelector("#btnCancelarEdicion"), | |
$cuerpoTabla = document.querySelector("#cuerpoTabla"), | |
idTemporalContacto = null, //Variable global para referirnos al id del contacto editado | |
revTemporalContacto = null; //Variable global para referirnos a la revisión del contacto editado | |
$btnGuardar.addEventListener("click", function() { | |
var nombreCompleto = $nombreCompleto.value, | |
direccion = $direccion.value, | |
telefono = $telefono.value; | |
if (nombreCompleto && direccion && telefono) { | |
bd.post({ | |
nombre: nombreCompleto, | |
direccion: direccion, | |
telefono: telefono | |
}) | |
.then(function(respuesta) { | |
if (respuesta.ok) { | |
consultarContactos(); | |
alert("Guardado correctamente"); | |
} | |
}); | |
} | |
}); | |
$btnCancelarEdicion.addEventListener("click", function() { | |
cancelarEdicion(); | |
}); | |
$btnGuardarCambios.addEventListener("click", function() { | |
var nombreCompleto = $nombreCompleto.value, | |
direccion = $direccion.value, | |
telefono = $telefono.value; | |
if (nombreCompleto && direccion && telefono) { | |
bd.put({ | |
nombre: nombreCompleto, | |
direccion: direccion, | |
telefono: telefono, | |
_id: idTemporalContacto, | |
_rev: revTemporalContacto | |
}) | |
.then(function(respuesta) { | |
if (respuesta.ok) { | |
consultarContactos(); | |
alert("Cambios guardados"); | |
cancelarEdicion(); | |
} | |
}); | |
} | |
}); | |
var prepararParaEditar = function() { | |
$btnGuardar.style.display = "none"; | |
$btnGuardarCambios.style.display = "block"; | |
$btnCancelarEdicion.style.display = "block"; | |
}; | |
var cancelarEdicion = function() { | |
$btnGuardar.style.display = "block"; | |
$btnGuardarCambios.style.display = "none"; | |
$btnCancelarEdicion.style.display = "none"; | |
$nombreCompleto.value = $direccion.value = $telefono.value = ""; | |
idTemporalContacto = null; | |
revTemporalContacto = null; | |
}; | |
var consultarContactos = function() { | |
bd.allDocs({ | |
include_docs: true | |
}).then(function(documentos) { | |
var htmlCuerpoTabla = ""; | |
for (var i = 0; i < documentos.rows.length; i++) { | |
var contacto = documentos.rows[i].doc; | |
htmlCuerpoTabla += "<tr>"; | |
htmlCuerpoTabla += "<td>"; | |
htmlCuerpoTabla += contacto.nombre; | |
htmlCuerpoTabla += "</td>"; | |
htmlCuerpoTabla += "<td>"; | |
htmlCuerpoTabla += contacto.direccion; | |
htmlCuerpoTabla += "</td>"; | |
htmlCuerpoTabla += "<td>"; | |
htmlCuerpoTabla += contacto.telefono; | |
htmlCuerpoTabla += "</td>"; | |
/* | |
Atención aquí: | |
Agregamos un botón con la clase btn-editar para escucharlo | |
más tarde | |
Agregamos un atributo data-id para guardar el id, ya que | |
al escuchar el evento click vamos a recuperar dicho atributo | |
*/ | |
htmlCuerpoTabla += "<td>"; | |
htmlCuerpoTabla += "<button class='btn-editar' data-id-contacto='" + contacto._id + "'>Editar</button>"; | |
htmlCuerpoTabla += "</td>"; | |
htmlCuerpoTabla += "</tr>"; | |
} | |
$cuerpoTabla.innerHTML = htmlCuerpoTabla; //Asignar HTML concatenado | |
//Una vez dibujados los botones, los escuchamos | |
escucharBotonesEditar(); | |
}); | |
}; | |
var escucharBotonesEditar = function() { | |
var botonesEditar = document.getElementsByClassName("btn-editar"); | |
for (var i = 0; i < botonesEditar.length; i++) { | |
botonesEditar[i].addEventListener('click', editarContacto); | |
} | |
}; | |
var editarContacto = function() { | |
// Acceder a data-id-contacto | |
// Javascript remueve los guiones y el "data", luego | |
// pone todos los datos en un objeto llamado dataset | |
// y convierte dichos guiones a camelCase | |
// Ejemplo: data-id-contacto => dataset.idContacto | |
var idContacto = this.dataset.idContacto; | |
obtenerUnContacto(idContacto).then(function(contacto) { | |
//Ocultar y mostrar botones respectivos | |
prepararParaEditar(); | |
$nombreCompleto.value = contacto.nombre; | |
$direccion.value = contacto.direccion; | |
$telefono.value = contacto.telefono; | |
idTemporalContacto = contacto._id; | |
revTemporalContacto = contacto._rev; | |
}); | |
}; | |
var obtenerUnContacto = function(idContacto) { | |
return bd.get(idContacto).then(function(contacto) { | |
return contacto; | |
}); | |
}; | |
//Por defecto, ocultar botones que sólo se muestran al editar | |
cancelarEdicion(); | |
consultarContactos(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
table { | |
border-collapse: collapse; | |
} | |
table, | |
th, | |
td { | |
border: 1px solid black; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment