Bienvenidos sean a este post, hoy haremos la ultima modificacion para los comentarios.
En los dos posts anteriores primero creamos el modelo donde se encarga de controlar todas las acciones de los comentarios, en el siguiente creamos el enrutador para poder escuchar e interceptar a todos los eventos relacionados y en este modificaremos todas las vistas necesarias para poder agregar los comentarios, visualizarlos en las notas y tambien poder eliminarlos, para ello necesitaremos el codigo de nuestro post anterior pero sino lo poseen les dejo un link para descargarlo:
Una vez descargado extraigan los dos directorios en el PC y ya esta listo para ser utilizado, para este caso nos centraremos en el directorio notas pero necesitaremos de los dos para poder probarlo, volviendo a nuestro tema del dia de hoy iremos al directorio notas e iremos al archivo vistanota.hbs del directorio views, en este buscaremos el siguiente bloque de codigo:
<div class="row"><div class="col-sm-12">
<div class="btn-group">
<a class="btn btn-outline-dark"
href="/notas/borrar?clave={{clavenota}}"
role="buutton">Borrar</a>
<a class="btn btn-outline-dark"
href="/notas/editar?clave={{clavenota}}"
role="button">Editar</a>
</div>
</div></div>Y lo modificaremos de la siguiente manera:
<div class="row"><div class="col-sm-12">
<div class="btn-group">
<a class="btn btn-outline-dark"
href="/notas/borrar?clave={{clavenota}}"
role="buutton">Borrar</a>
<a class="btn btn-outline-dark"
href="/notas/editar?clave={{clavenota}}"
role="button">Editar</a>
<button type="button" class="btn btn-ouutline-dark"
data-toggle="modal"
data-target="#notas-coment-modal">Comentar</button>
</div>
</div></div>En este caso simplemente agregamos un boton mas para poder agregar los comentarios a la nota que esta siendo visualizada, aqui le aplicaremos un par de clases para darle un estilo asi como tambien usaremos a data para poder asignar el destino y con quien lo cambiaremos, esto lo hacemos asi porque jQuery nos permite esta particularidad pero de esto hablaremos en un momento, con esto tenemos nuestro boton para comentar, nuestro siguiente paso sera agregar el siguiente bloque de codigo en este archivo, pueden hacerlo al final del mismo si lo desean:
{{#if clavenota}}{{#if user}}
<div class="modal fade" id="notas-coment-modal" tabindex="-1"
role="dialog" aria-labelledby="noteCommentModelLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content"><div class="modal-header">
<h5 class="modal-title" id="noteCommentModelLabel">Dejar
un comentario</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Cerrar"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="subir-coment">
<input id="coment-de" type="hidden" name="de"
value="{{ user.id }}">
<input id="coment-namespace" type="hidden" name="namespace"
value="/notas">
<input id="coment-room" type="hidden" name="room"
value="{{clavenota}}">
<input id="coment-clave" type="hidden" name="clave"
value="{{clavenota}}">
<fieldset>
<div class="form-group">
<label for="notaComentTextArea">Tus excelentes
pensamientos</label>
<textarea id="notaComentTextArea" name="mensaje"
class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<button id="submitNuevoComen" type="submit"
class="btn btn-primary col-sm-offset-2 col-sm-10">
Hacer comentario</button>
</div>
</fieldset>
</form>
</div>
</div></div>
</div>
{{/if}}{{/if}}Esta sera la ventana que usaremos para ingresar el comentario, para ello hace una doble verificacion, primero que exista la nota y a su vez estemos «logueados» con un usuario de lo contrario no aparecera, en este tendremos una serie de div para contener los distintos elementos y algunos tendran un rol asignado como header o document, tendremos uno para el boton de cerrar sino queremos comentar y luego el cuerpo o body de la ventana donde estara todo lo necesario para poder ingresar la informacion, en este caso usaremos un form para subir los datos y al comienzo tendremos cuatro datos de tipo hidden donde estaran varios datos que no deben ser ingresados por el usuario como son el namespace, room, de quien es, y la clave de la nota, despues tendremos un area de texto donde escribiremos nuestro comentario y el boton para subirlo, al momento de agregar nuestro comentario se vera de la siguiente manera:
Pero ya lo veremos en accion en un momento, nuestro siguiente paso sera en el mismo archivo donde tenemos la seccion de jQuery a la cual le agregaremos el siguiente segmento de codigo:
{{#if user}}
$('#submitNuevoComen').on('click', function(ev) {
socket.emit('crear-msj', {
de: $('#coment-de').val(),
namespace: $('#coment-namespace').val(),
room: $('#coment-room').val(),
clave: $('#coment-clave').val(),
mensaje: $('#notaComentTextArea').val()
},
respuesta => {
$('#notas-coment-modal').modal('hide');
$('#notaComentTextArea').empty();
});
});
{{/if}}Estableceremos un condicional para que se ejecute solamente cuando el usuario este logueado, aqui buscaremos el boton con ese id y le agregaremos el escuchador para el evento click donde emitiremos el evento crear-msj y pasaremos los distintos valores del formulario, como este evento lo asignamos en el init del enrutador llamara a la funcion encargada de postear y creara en la base el nuevo comentario, la siguiente funcion sera la encargada de manejar la respuesta, es decir cuando ya hayamos realizado todos los intercambios necesarios este se encargara de basicamente de esconder la ventana que hicimos anteriormente y limpiar el area de texto para un proximo comentario, siguiendo dentro del condicional agregaremos el siguiente bloque de codigo:
socket.on('nuevomensaje', nuevo => {
var textomsj = [
'<div id="nota-mensaje-%id%" class="card">',
'<div class="card-body">',
'<h5 class="card-title">%de%</h5>',
'<div class="card-text">%mensaje%',
'<small style="display: block">%fecha%</small>',
'</div>',
'<button type="button" class="btn btn-primary message-del-button" ',
'data-id="%id%" data-namespace="%namespace%" ',
'data-room="%room%">',
'Borrar',
'</button>',
'</div>',
'/div>'
].join('\n')
.replace(/%id%/g, nuevo.id)
.replace(/%de%/g, nuevo.de)
.replace(/%namespace%/g, nuevo.namespace)
.replace(/%room%/g, nuevo.room)
.replace(/%mensaje%/g, nuevo.mensaje)
.replace(/%fecha%/g, nuevo.fecha);
$('#mensajeNotas').prepend(textomsj);
});Este escuchador es para cuando emitamos el evento nuevomensaje, es decir que ya se ingreso el nuevo comentario, donde crearemos un objeto que basicamente contendra todos los div relacionados a la tarjeta (card) para mostrar el comentario, observen que tendra un cuerpo, titulo, texto y fecha para mostrar y a su vez tendra el boton para borrarlo si lo deseamos, tambien posee los valores del id, namespace y room que son necesarios para esta accion en el boton, por ultimo tenemos un join para agregarle un caracter de nueva linea y despues mediante replace a cada uno de los campos con los signos de porcentaje (%) les asignaremos los valores correspondientes, para finalmente mediante prepend lo agregaremos al comienzo del div identificado como mensajeNotas, esto hara el efecto de que se agrego automaticamente, y al igual que vimos en otros casos se reflejara en todos los clientes que visualicen esa nota, a continuacion de ese segmento agregaremos el siguiente bloque de codigo:
$('button.message-del-button').on('click', function(ev) {
socket.emit('borrar-msj', {
id: $(ev.target).data('id'),
namespace: $(ev.target).data('namespace'),
room: $(ev.target).data('room')
})
});Este escuchador se encargara de interceptar el click para el boton de borrado, para este caso usaremos la clase que le asignamos para identificarlo, para esta ocasion emitiremos el evento borrar-msj para indicarle que debemos borrarlo y en esta ocasion pasaremos todos los datos que asociamos al boton mediante data, en el post anterior establecimos al escuchador de este evento que sera el encargado de llamar a la funcion para borrar los mensajes, y finalmente debemos agregar el siguiente bloque de codigo a continuacion del anterior:
socket.on('destruirmensaje', datos => {
$('#mensaje-nota-' + datos.id).remove();
});Este escuchador nos permite saber cuando se elimino un comentario y lo que haremos sera buscarlo en base al id del div y lo removeremos para dar el efecto de cambio en «tiempo real», nuestra ultima modificacion en el archivo vistanota.hbs y para ello agregaremos el siguiente bloque de codigo despues de los botones que modificamos al comienzo del post y antes el llamado al parcial footerjs:
<div id="mensajesNotas">
{{#if mensajes}}
{{#each mensajes}}
<div id="mensaje-nota-{{ id }}" class="card">
<div class="cuerpo-card">
<h5 class="titulo-card">{{ de }}</h5>
<div class="texto-card">{{ mensaje }}
<small style="display: block">{{ fecha }}</small>
</div>
<button type="button"
class="btn btn-primary message-del-button"
data-id="{{ id }}"
data-namespace="{{ namespace }}"
data-room="{{ room }}">
Borrar</button>
</div>
</div>
{{/each}}
{{/if}}
</div>Este sera el div encargado de mostrar todos los comentarios para ello tenemos un condicional donde verificaremos si existen los comentarios, en caso de existir usaremos a each para tomar todos los mensajes y lo mostraremos en cada div, si lo observan es el mismo que creamos para mostrar en el codigo de jQuery donde tendremos los mismos elementos pero se completaron con los datos de los comentarios en cada pasada, con esto ya tenemos nuestra vista completa solo nos resta una modificacion mas, pero para ello debemos dirigirnos al archivo notas.mjs en el directorio routes y buscaremos el siguiente bloque de codigo:
router.get('/ver', async(req, res, next) => {
try {
let nota = await notas.read(req.query.clave);
res.render('vistanota', {
title: nota ? nota.titulo : "",
clavenota: req.query.clave,
nota: nota,
twtLogin: twtLogin,
user: req.user ? req.user : undefined
});
} catch(err) { next(err); }
});Y lo modificaremos de la siguiente manera:
router.get('/ver', async(req, res, next) => {
try {
let nota = await notas.read(req.query.clave);
const mensajes = await recientes('/notas', req.query.clave);
res.render('vistanota', {
title: nota ? nota.titulo : "",
clavenota: req.query.clave,
nota: nota,
mensajes,
twtLogin: twtLogin,
user: req.user ? req.user : undefined
});
} catch(err) { next(err); }
});En este caso solo agregamos dos modificaciones, el primero sera para llamar a la funcion recientes donde mostrara los ultimos comentarios agregados a la nota, esta funcion fue agregada en este post, y la almacenaremos en un objeto, el siguiente paso sera pasar este nuevo dato junto con los demas para poder crear los comentarios en base a todas las modificaciones anteriores, con todo esto realizado podemos proceder a probarlo, para ello deben abrir en una terminal el directorio notas y ejecutar a npm start y en otra terminal deben ejecutar desde el directorio users el mismo comando, npm start, para poder identificarnos, pueden usar el usuario mirandma y la contraseña clave para poder ingresar o seguir los pasos de este post para poder crear sus propios usuarios, con el usuario logueado podemos probarlos, veamos como trabaja mediante el siguiente video
En el video no solo se ve como trabaja cada accion sino tambien como se actualiza la nota en «tiempo real» cada vez que se realiza una accion, ya sea crear un nuevo comentario o eliminar el mismo, con esto ya hemos completado una forma pintoresca de poder dar mas dinamicidad no solo a la pagina en cuestion sino que todos los usuarios pueden ver reflejadas todas estas modificaciones, antes de finalizar con este tema les dejo un archivo con todos los archivos del proyecto y los modificados en este post:
En resumen, hoy hemos finalizado los comentarios, hemos agregado la vista para poder agregar los comentarios y la ultima modificacion en el enrutador, despues de lo probamos para ver como trabaja, espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 