‫Instructor: Muy bien, esta es la segunda parte de la
‫creación de la página de detalles de la página del recorrido.
‫Y dejamos el último video
‫después de construir esta parte de Quick
‫Facts aquí usando algunos mixins, ¿verdad?
‫Y, a continuación, es hora
‫de construir esta parte de las guías.
‫Ahora no sabemos de antemano cuántos guías
‫turísticos hay en cada tour.
‫Y así, al igual que en la
‫página de descripción general, aquí
‫necesitamos tener otro bucle para recorrer básicamente todas
‫las guías asociadas con un recorrido determinado.
‫Entonces, hagámoslo.
‫Y ahora mismo tenemos estos tres elementos.
‫Entonces estos tres recuadros, uno para cada guía.
‫Pero como acabamos de decir, no es así como queremos que funcione.
‫Así que eliminemos estos dos y luego creemos un bucle aquí,
‫que en cada iteración creará un cuadro, por lo
‫que un elemento como este.
‫Y eso debería ser bastante fácil.
‫Entonces, nuevamente, usamos cada
‫uno y luego el nombre de la variable en la
‫iteración actual, in, y luego la matriz que queremos recorrer.
‫Y eso es gira. guías.
‫¿Derecha?
‫Entonces, ¿dónde
‫está eso?
‫Sí, aquí está nuestra variedad de guías.
‫¿Cuál, por supuesto, en la base de datos
‫se completará con los usuarios correspondientes y no solo con las ID, verdad?
‫Así que ahora necesitamos sangrar todo esto aquí.
‫Entonces, cada una de
‫estas guías aquí será básicamente un documento de usuario.
‫Entonces, revisemos rápidamente eso en
‫Compass porque no tenemos ese tipo de datos en nuestro
‫documento JSON porque, por supuesto, la
‫población solo ocurre detrás de escena usando Mongos, ¿verdad?
‫Entonces, cada una de las guías es un usuario.
‫Entonces lo que queremos es el nombre y la foto.
‫Así que aquí queremos la foto, por supuesto.
‫Que es, en
‫esta página, en imágenes / usuarios y luego el nombre de la foto del usuario.
‫Así que guía. Foto.
‫Que es aquí, nuevamente, el nombre de
‫la variable en la iteración actual.
‫Entonces, aquí no sé por qué dice
‫Guía principal, pero pongamos el nombre de la persona aquí.
‫Así que guía. nombre.
‫Entonces aquí queremos nuevamente el nombre del guía. nombre.
‫Y luego también queremos la etiqueta.
‫Y así, básicamente, será guía principal cuando sea
‫guía principal y simplemente
‫guía turística cuando sea una guía habitual.
‫Ahora déjame mostrarte lo que sucede cuando ponemos
‫el papel aquí.
‫Así que recuerde que el rol es
‫la propiedad donde decimos si un usuario es un guía
‫o un guía principal o incluso un administrador.
‫¿Okey?
‫Entonces, de nuevo,
‫veamos por ahora qué sucede cuando lo ponemos así.
‫Y con eso deberíamos estar listos para probarlo.
‫Vamos a salvarlo.
‫Y aquí vamos.
‫Entonces tenemos las tres
‫fotos, los nombres, pero aquí el rol de
‫guía no se ve muy bien, ¿verdad?
‫Así que recuerde cómo,
‫de hecho, queremos decir guía principal y guía turístico.
‫Bien, ahora es el momento de usar un condicional.
‫Ahora el pug tiene condicionales incorporados, pero son
‫realmente simples y no podemos hacer
‫muchas cosas con ellos.
‫Por ejemplo, ni siquiera
‫nos permiten probar la igualdad, por ejemplo.
‫Pero, lo bueno es que todavía podemos usar
‫JavaScript para eso.
‫Y nuevamente, usamos código sin búfer para eso.
‫Entonces, con la sintaxis de guiones y luego podemos usar
‫un JavaScript normal si está aquí.
‫Así que de nuevo, como si estuviéramos escribiendo JavaScript.
‫Y así guiar. rol y ahora podemos probar y decir si
‫es una guía de plomo.
‫Bueno, entonces aquí queremos decir Guía
‫principal, ¿de acuerdo?
‫Y pongamos otro
‫aquí y digamos que si
‫el papel es solo guía, bueno, entonces queremos guía turístico.
‫Y así es como usamos un JavaScript si escribimos dentro
‫de pug y luego lo combinamos con una salida de pug como esta.
‫¿Está bien?
‫Entonces, veamos.
‫Y de hecho, eso es mucho mejor.
‫Bueno.
‫Eliminemos este
‫espacio vacío aquí y pasemos al siguiente, que es
‫el cuadro de descripción.
‫Así que, en primer lugar, aquí arriba, en
‫el encabezado, también tenemos el nombre de la gira.
‫Así que este es el nombre del recorrido,
‫así que creemos una cadena
‫de plantilla, y ahí pongamos recorrido. nombre.
‫Pensé que funcionaría.
‫Pero no es así.
‫Esto solo funciona en JavaScript.
‫De acuerdo, y en realidad acabo
‫de recordar que también queremos tener la gira en el título principal.
‫Entonces, aquí mismo en realidad.
‫Bien, hagámoslo.
‫Bueno.
‫Pero de
‫todos modos, bajemos aquí y creemos estos párrafos.
‫Ahora, como puede ver, tenemos dos párrafos
‫aquí para este texto.
‫Así que echemos un vistazo a cómo lo
‫tenemos aquí en la descripción.
‫Y como puede ver, por supuesto, solo tenemos una gran cadena.
‫Pero lo tenemos en el medio dividido con estos
‫caracteres de nueva línea.
‫¿Está bien?
‫Entonces, lo que
‫vamos a hacer es dividir la cadena por el carácter de nueva línea.
‫¿Okey?
‫Entonces eso es fácil, ¿verdad?
‫Entonces, código sin búfer para escribir JavaScript.
‫Párrafos es igual a recorrido. descripción. dividido por el carácter de
‫nueva línea.
‫Y entonces esto ahora creará una matriz.
‫Por tanto, los párrafos son una matriz, donde cada uno
‫de los elementos es básicamente un párrafo.
‫¿Okey?
‫Y ahora todo lo
‫que tenemos que hacer es recorrer todos estos párrafos e imprimir su contenido.
‫Entonces, cada p, digamos, en
‫párrafos será p. description_text igual al párrafo actual,
‫que es p.
‫Entonces, simple ¿verdad?
‫Veamos eso.
‫Y realmente no podemos
‫ver si es diferente porque acabo de usar este texto ciego aquí.
‫Pero puedo decirles que este debería
‫ser el texto correcto.
‫Y si vamos al tour de
‫excursionistas por el bosque, en realidad aquí en Compass,
‫¿dónde está eso?
‫Aquí mismo.
‫Entonces, si vamos
‫aquí a la descripción e intentamos editarla, agreguemos
‫otro carácter de línea nueva aquí.
‫Entonces actualice y luego deberíamos ver un nuevo
‫párrafo apareciendo en algún lugar aquí.
‫Cambiemos eso.
‫Y eso no salió tan bien.
‫No estoy seguro de por qué.
‫Nunca intenté hacerlo, así que lo que
‫hice fue la primera vez que lo probé.
‫Así que no estoy seguro de qué salió mal aquí.
‫Tal vez realmente solo necesitamos crear
‫una nueva línea presionando enter, pero eso
‫tampoco funcionó.
‫Así que veamos si realmente tenemos el carácter de
‫nueva línea aquí.
‫Y tal vez sea este de aquí.
‫Bueno, pero no importa, solo confía en mí.
‫Y ahora nuestra nueva línea sigue ahí,
‫¿qué está pasando?
‫Muy bien, aquí vamos, actualicémoslo.
‫Muy bien, ahora nuestra otra línea
‫nueva que teníamos aquí antes también desapareció, pero no importa.
‫Supongo que no debería haber usado Compass para editar
‫este texto aquí.
‫¿Okey?
‫De todos modos, pasemos ahora a las imágenes.
‫Y ahora mismo no los vemos aquí, pero así es como
‫se supone que debe verse, ¿de acuerdo?
‫Así que aquí tenemos tres imágenes que se muestran una al lado de
‫la otra de esta manera.
‫Y estas son en
‫realidad las imágenes que están en algún lugar aquí.
‫Así que sí, en el campo de
‫las imágenes tenemos esta matriz de estas tres imágenes.
‫Entonces, una vez más, usaremos un
‫bucle para recorrerlos.
‫Entonces, bastante simple.
‫Entonces, cada imagen en gira. imágenes.
‫Y para cada uno de ellos queremos crear esto.
‫Entonces aquí la fuente.
‫Y eso es imagen / recorridos, en realidad.
‫Y luego el nombre de la imagen actual,
‫que es imagen por supuesto.
‫Y luego aquí, en el texto alternativo, tenemos el número del recorrido y,
‫lo que es más importante, también aquí en
‫el nombre de la clase CSS.
‫Y entonces ves que el siguiente tiene esa imagen dos y
‫esa imagen tres.
‫¿Okey?
‫Entonces, ¿cómo vamos a hacer eso?
‫Bueno, en un bucle
‫pug podemos definir una segunda variable.
‫Y esa segunda variable será el índice.
‫Así que llamémoslo yo, muy simplemente.
‫Y ese es un índice de base
‫cero, que será cero para el primer elemento
‫y uno y dos para los otros dos elementos.
‫Entonces, primero comencemos por poner eso allí.
‫Entonces eso es i, que es el índice,
‫más 1, porque queremos que sea 1 y no cero.
‫Y ahora esta parte aquí es un poco
‫más complicada, porque no podemos usar
‫esta sintaxis, y tampoco podemos usar la otra sintaxis de
‫interpolación aquí mismo en el nombre de la clase.
‫Y, en cambio, lo que
‫vamos a hacer es copiar esto y definirlo como un atributo de clase.
‫Está bien, y eso es exactamente lo mismo.
‫Pero aquí podemos usar una
‫cadena de plantilla para luego completarla aquí.
‫Entonces yo + 1.
‫Muy bien, deshagámonos de esto.
‫Y probémoslo.
‫Vaya, algo no está bien aquí.
‫Entonces, tenemos nuestras imágenes, pero no se ven correctas.
‫Pero el nombre de la clase es correcto.
‫Y también lo ves aquí aplicado.
‫Pero por alguna razón no encontró estas imágenes.
‫O realmente lo hizo.
‫Aquí abajo dice que no fue así.
‫Ah, pero estas son en realidad otras imágenes.
‫Pero estos son algunos otros que están un poco más abajo.
‫De todos modos, lo que supongo que no es correcto aquí es que esta imagen
‫debería estar dentro de este cuadro de imagen, por lo que
‫supongo que algo en nuestra sangría aquí está mal.
‫Y sí, de hecho lo es.
‫Entonces ves que esta imagen está al mismo
‫nivel que este elemento div.
‫Entonces, por supuesto, falta una sangría.
‫Está bien.
‫Y eso ahora debería arreglarse.
‫Y aquí vamos.
‫Está bien.
‫Así que, solo para ver que ese era el problema.
‫Ahora, de hecho, la imagen está dentro del cuadro de imagen.
‫Que bien.
‫El siguiente es el mapa.
‫Lo cual recuerda,
‫me voy a ir para la próxima conferencia, para que por ahora podamos preocuparnos por poner las
‫reseñas de la gira aquí en este elemento.
‫Bueno.
‫Y entonces, nuevamente, ahora nos estamos moviendo a esta parte aquí.
‫Ahora bien, ¿de dónde provienen realmente estas revisiones?
‫Bueno, recuerde cómo aquí, en viewController, completamos el
‫campo de revisiones
‫con los datos de revisión reales.
‫Y ahora mismo tenemos giras. reviews, que es una serie de todas
‫las reseñas.
‫Y como probablemente pueda
‫adivinar, ahora vamos a crear otro
‫bucle aquí dentro de este elemento de revisión.
‫Entonces, cada revisión en gira. revisiones.
‫Y luego en cada uno de ellos tendremos esta ficha de revisión.
‫Está bien.
‫Ahora bien, esto de
‫aquí es mucho código, lo que nos distrae de nuestro contenido principal.
‫Y entonces, de nuevo, creemos un mixin aquí.
‫Está bien.
‫Entonces, pongámoslo
‫aquí en la parte superior.
‫Y verás por qué en un segundo.
‫Así que reviewCard.
‫Y aquí pasamos la revisión en sí.
‫Está bien.
‫Y ahora realmente necesitamos arreglar estas sangrías.
‫Y en lugar de hacerlo manualmente, recuerde, voy a
‫usar ese paquete de VS
‫Code que tenemos.
‫Y así comandar shift
‫p o controlar shift p en Windows y luego Embellecer pug.
‫Y eso lo arregla.
‫Y ahora tenemos que crear
‫esta revisión aquí basada en los datos.
‫Pero antes de hacer eso,
‫llamemos a la mezcla aquí en cada iteración de la revisión.
‫Entonces + reviewCard con la revisión actual, ¿verdad?
‫Entonces, echemos un vistazo a cómo se ve
‫realmente una revisión.
‫Y tenemos las reseñas aquí.
‫Pero de hecho, no serán realmente
‫útiles porque el usuario no está poblado aquí.
‫Así que vayamos a un cartero y
‫echemos un vistazo a las reseñas pobladas finales allí.
‫Así que digamos que lo revisen durante la gira.
‫Porque entonces será una revisión completa.
‫Entonces tenemos el campo de revisión, la calificación y luego el usuario.
‫Y lo que nos interesa aquí es
‫el usuario. nombre y usuario. Foto.
‫Muy bien, entonces se revisará el nombre de usuario. usuario. nombre.
‫¿Derecha?
‫Así que repasa. usuario. nombre.
‫Entonces, todo esto es
‫necesario porque, por supuesto, ahora tenemos múltiples conjuntos de
‫datos relacionados entre sí y, por lo tanto, con la función de poblar,
‫ahora todos están anidados entre sí.
‫Así que usemos su nombre aquí también.
‫Está bien.
‫Y luego aquí
‫no usaremos su nombre.
‫Ah, y
‫olvidé la interpolación, y aquí está la foto.
‫Está bien.
‫Aquí va a estar la descripción.
‫Y eso es realmente una revisión. revisión, creo.
‫Así que sí.
‫Así que repasa. revisión.
‫Y esta es
‫la parte fácil y la parte difícil a continuación será mostrar la
‫calificación real, porque tenemos que mostrar uno de estos elementos
‫aquí para cada uno de los números de estrellas que tiene la revisión.
‫Entonces, una revisión de cinco estrellas necesita todas estas cinco estrellas.
‫Pero una revisión de cuatro estrellas solo necesita cuatro de ellos
‫y además, también queremos una estrella gris.
‫Básicamente, para decir cuatro de cada cinco, ¿de acuerdo?
‫Pero primero echemos un vistazo, si esto realmente está funcionando.
‫Entonces todo excepto la calificación.
‫Así que recarguemos, y de hecho, aquí
‫estamos, con los usuarios, luego el nombre y el texto de revisión en sí.
‫Y ahora ocupémonos de mostrar también
‫la calificación.
‫Entonces, lo que haremos aquí es imprimir la cantidad
‫de estrellas en un bucle.
‫Entonces, hay cinco estrellas posibles y, por lo tanto,
‫hacemos un bucle de una a cinco.
‫Luego, en cada estrella, probamos si la
‫calificación del recorrido es mayor o igual a la estrella actual.
‫Y si es así, imprimimos una estrella verde,
‫que representa una estrella real.
‫Y si no, es una estrella gris.
‫Así que de nuevo, que es solo una estrella inexistente.
‫Por ejemplo, para mostrar tres de cinco, ¿de acuerdo?
‫Y eso probablemente suene un poco abstracto,
‫así que implementémoslo.
‫Entonces cada estrella en.
‫Y ahora no tenemos una matriz todavía, así que
‫simplemente la creamos.
‫Entonces 1, 2,
‫3, 4 y 5, que son todas las estrellas posibles.
‫A continuación, copiemos esto aquí.
‫Y ahora la diferencia entre una estrella verde y
‫una gris es que la verde tiene
‫el modificador activo aquí, y la gris tiene inactivo.
‫Y entonces cambiaremos eso con una cadena de plantilla, ¿de acuerdo?
‫Y así, al igual que antes, en realidad necesitamos este
‫nombre de clase como atributo de clase aquí.
‫Está bien.
‫Entonces esto también debería estar aquí.
‫Deshagámonos de esto.
‫Y ahora hagamos la prueba que acabamos de mencionar.
‫Y nuevamente, el resultado será
‫que este año estará activo o inactivo.
‫Así que pongamos algo de JavaScript en este punto.
‫Entonces, lo que vamos a hacer aquí es
‫probar si la revisión. calificación, que es donde
‫se almacena la calificación, es mayor
‫o igual que la estrella actual.
‫Básicamente, estamos escribiendo un operador de tornería aquí.
‫Y si lo es, aquí
‫queremos decir, activo, y si
‫no, inactivo.
‫Y esto se ve un poco extraño, lo sé.
‫Así que ejemplifiquemos eso con un ejemplo simple.
‫Entonces, digamos que tenemos tres estrellas de cada cinco, ¿de acuerdo?
‫Entonces, en la primera iteración, la estrella es uno.
‫Y entonces uno es, por supuesto, menos de tres.
‫Entonces, la primera estrella debería, por supuesto, ser verde, y
‫por eso aquí ponemos
‫activo, que luego dará como resultado reviews_star - activo.
‫¿Okey?
‫Luego lo mismo con la segunda y la tercera estrella.
‫Entonces, en ese momento tenemos tres estrellas verdes.
‫Pero el cuarto y el quinto deberían ser grises.
‫¿Okey?
‫Y así, en la cuarta iteración, la estrella es cuatro.
‫Entonces, ¿la prueba es tres más que cuatro?
‫No, es falso y, por lo tanto, está inactivo.
‫Y entonces esa será una estrella gris, y lo
‫mismo para la última, entonces la quinta estrella.
‫Muy bien, probemos eso.
‫Y en realidad no podemos probarlo aquí, porque este excursionista
‫del bosque tiene una calificación perfecta
‫de cinco sobre cinco, por
‫lo que todas las reseñas son cinco estrellas.
‫Y entonces tenemos que venir aquí a todos los recorridos.
‫Y aunque este enlace todavía
‫no funciona, por lo que solo
‫verá ediciones como esta, este hash aquí.
‫Y entonces, vayamos rápidamente y solucionemos eso.
‫Y eso está en el encabezado, aquí mismo.
‫Pero no queremos eso.
‫Simplemente queremos ir a nuestra página raíz.
‫Así que eso es solo la barra.
‫Así que recarga.
‫Y ahora, en el
‫enlace, ve que eso es exactamente lo que tenemos.
‫Y, de hecho, volvemos a nuestra página de descripción general.
‫Así que vayamos a una página con un promedio más bajo.
‫Y ese es el amante del deporte.
‫Vamos a ver.
‫Y, por supuesto, verá
‫que todos los datos ahora son correctos para este recorrido específico.
‫Entonces nuevamente ves este 3. 9 promedio.
‫Ves todos estos
‫guías turísticos diferentes, las diferentes imágenes y
‫ves todas las reseñas.
‫Y también ves que las estrellas realmente están funcionando.
‫Entonces, esta primera revisión es una revisión de cinco estrellas.
‫Y entonces ven cinco, cuatro, uno y
‫luego un montón de reseñas de cuatro estrellas aquí.
‫Bien, entonces, esto fue un poco más
‫confuso, esta parte, pero aún así logramos que funcionara, ¿verdad?
‫Ahora, una cosa que solo quería mostrarles es que en
‫realidad también podemos exportar, básicamente
‫un mixin en su archivo separado.
‫Así que copiemos esto y creemos un
‫nuevo mixin aquí,
‫o en realidad un nuevo archivo.
‫Y ya que luego lo
‫vamos a incluir, volveré a agregarle este guión bajo como prefijo.
‫Y llamémoslo reviewCard. doguillo.
‫Luego pégalo aquí.
‫Y toda la sangría sigue
‫siendo correcta, y ahora todo lo que
‫tenemos que hacer es decir, incluir
‫_reviewCard.
‫Y si lo
‫intentamos ahora, aún debería funcionar, y lo hace.
‫Está bien.
‫Así que escribimos
‫mucho código hasta ahora y casi terminamos.
‫Todo lo que queda por hacer es esta sección de llamada a la acción.
‫Y aquí todo lo que realmente necesitamos cambiar
‫es esta duración aquí.
‫Así que tenemos este bonito lema
‫como 10 días.
‫1 aventura.
‫Infinitos recuerdos.
‫¿Está bien?
‫Pero en realidad necesitamos reemplazar
‫la cantidad de días para que sea correcta para esta gira en particular.
‫Así que creemos una cadena de plantilla para eso.
‫Así que gira. duración.
‫Y también aquí tenemos algunas de las imágenes de la gira, ¿de acuerdo?
‫Así que hagámoslo también.
‫Así que esa es la imagen. tours, o /
‫tours y luego slash tour. imágenes.
‫Y recuerde que
‫esta es una matriz, y simplemente usaré el primer y segundo elemento.
‫O en realidad el segundo y el tercero porque descubrí
‫que estos suelen verse
‫un poco mejor en la situación.
‫Copiemos eso.
‫Pon eso aquí.
‫Ah, y nos falta el corchete de cierre aquí.
‫Y agreguemos un texto alternativo.
‫Foto de la gira.
‫Está bien.
‫Y creo que eso es todo.
‫Así que solo un último intento.
‫Ves que aquí está en blanco ahora mismo.
‫Pero ahora, de hecho, tenemos las mismas
‫imágenes aquí.
‫Entonces este debería ser el número dos.
‫Pero aún así, ahora
‫dice 14 días, así que todo eso es correcto ahora.
‫Impresionante.
‫Eso es fantástico.
‫Eso fue mucho trabajo,
‫pero creo que realmente valió la pena.
‫Creo que esta página se ve absolutamente fantástica.
‫Es realmente impresionante.
‫Y ahora todo está conectado.
‫Entonces, en cada recorrido podemos volver
‫a todos los recorridos y echar un vistazo a todos los demás.
‫Veamos la caravana del parque.
‫El recorrido en autocaravana por el parque.
‫Todos los detalles.
‫Todas las diferentes guías,
‫imágenes, sus reseñas y, de hecho, estas diferentes imágenes.
‫Excelente.
‫Entonces ves este agujero en blanco aquí en el medio de nuestra página.
‫Y ahí es donde estará el mapa a continuación,
‫así que hagámoslo, de hecho
‫ahora mismo en la próxima conferencia.