‫Instrutor: Certo, esta é a parte dois
‫da página de detalhes da página de passeio.
‫E paramos o último
‫vídeo depois de construir essa parte do
‫Quick Facts usando alguns mixins, certo?
‫E então é hora de
‫construir essa parte dos guias aqui.
‫Agora não sabemos de antemão quantos guias
‫turísticos realmente existem em cada excursão.
‫E então, assim como na página de
‫visão geral, aqui precisamos
‫ter outro loop para basicamente percorrer todos
‫os guias associados a um determinado passeio.
‫Então, vamos fazer isso.
‫E agora temos esses três elementos.
‫Então, essas três caixas, uma para cada guia.
‫Mas, como acabamos de dizer, não é assim que queremos que funcione.
‫Então, vamos nos livrar desses dois e criar um loop aqui,
‫que em cada iteração criará uma caixa, ou
‫seja, um elemento como este.
‫E isso deve ser bastante fácil.
‫Então, novamente, usamos each
‫e, em seguida, o nome da variável na iteração
‫atual, in e, em seguida, o array que queremos percorrer.
‫E então essa é a turnê. guias.
‫Direito?
‫Então, onde
‫fica isso?
‫Sim, então aqui está nosso conjunto de guias.
‫Qual, é claro, no banco de dados será
‫preenchido com os usuários correspondentes e não apenas com os IDs, certo?
‫Portanto, agora precisamos recuar tudo isso aqui.
‫E, portanto, cada um
‫desses guias aqui será basicamente um documento do usuário.
‫Então, vamos verificar isso rapidamente
‫no Compass porque não temos esse tipo de dados em
‫nosso documento JSON porque, é claro,
‫a população só acontece nos bastidores usando Mongos, certo?
‫Portanto, cada um dos guias é um usuário.
‫E então o que queremos é o nome e a foto.
‫Então, aqui queremos a foto, é claro.
‫Que é, nesta
‫página, em imagens / usuários e depois o nome da foto do usuário.
‫Portanto, oriente. foto.
‫Que está aqui, novamente, o nome
‫da variável na iteração atual.
‫Então aqui eu não sei por que diz
‫Guia de chumbo, mas vamos colocar o nome da pessoa aqui.
‫Portanto, oriente. nome.
‫Então aqui queremos o nome do guia novamente. nome.
‫E então também queremos o rótulo.
‫Basicamente, será um guia líder quando for um
‫guia líder e simplesmente um
‫guia turístico quando for um guia regular.
‫Agora, deixe-me mostrar o que acontece quando colocamos
‫o papel aqui.
‫Portanto, lembre-se de que a função é
‫a propriedade onde dizemos se um usuário é um guia
‫ou um guia líder ou mesmo um administrador.
‫OK?
‫Então, novamente, vamos
‫ver agora o que acontece quando colocamos desta forma.
‫E com isso devemos estar prontos para realmente testá-lo.
‫Vamos dar uma chance.
‫E aqui vamos nós.
‫Temos as três
‫fotos, os nomes, mas aqui o papel do
‫guia não parece muito bom, certo?
‫Portanto, lembre-se de que,
‫de fato, queremos dizer guia líder e guia turístico.
‫Ok, agora é hora de usar uma condicional.
‫O pug na verdade tem condicionais embutidos, mas
‫eles são realmente simples e não podemos
‫fazer muitas coisas com eles.
‫Por exemplo, eles nem mesmo
‫nos permitem testar a igualdade, por exemplo.
‫Mas, a coisa boa é que ainda podemos
‫usar JavaScript para isso.
‫E então, novamente, usamos algum código sem buffer para isso.
‫Então, com a sintaxe do traço, podemos usar um
‫JavaScript normal se estiver aqui.
‫Então, novamente, como se estivéssemos apenas escrevendo JavaScript.
‫E assim guie. papel e agora podemos testar e dizer se
‫é um guia de chumbo.
‫Bem, então aqui queremos dizer Guia
‫de chumbo, ok?
‫E vamos colocar outro
‫aqui e dizer que se
‫o papel for apenas de guia, então queremos um guia turístico.
‫E então é assim que usamos um JavaScript se escrever
‫dentro do pug e depois combiná-lo com uma saída do pug como esta.
‫Tudo bem?
‫Então, vamos ver.
‫E, de fato, isso é muito melhor.
‫OK.
‫Vamos nos livrar
‫desse espaço vazio aqui e passar para o próximo, que
‫é a caixa de descrição.
‫Então, primeiro aqui no título,
‫também temos o nome da turnê.
‫Este aqui é o nome do tour, então
‫vamos criar uma string de
‫modelo e lá vamos colocar o tour. nome.
‫Eu pensei que isso iria funcionar.
‫Mas isso não acontece.
‫Isso só funciona em JavaScript.
‫Ok, na verdade acabei de lembrar
‫que também queremos ter a turnê bem no título principal.
‫Então, bem aqui, na verdade.
‫Ok, então vamos fazer isso.
‫OK.
‫Mas de
‫qualquer maneira, vamos descer aqui e criar esses parágrafos.
‫Agora, como você pode ver, temos dois parágrafos
‫aqui para este texto.
‫Então, vamos apenas dar uma olhada em
‫como temos aqui na descrição.
‫E como você pode ver, é claro que temos apenas uma corda grande.
‫Mas nós temos isso no meio dividido com esses
‫novos personagens de linha.
‫Tudo bem?
‫E então o
‫que vamos fazer é dividir a string pelo novo caractere de linha.
‫OK?
‫Então isso é fácil, certo?
‫Portanto, código sem buffer para escrever JavaScript.
‫Parágrafos é igual a tour. Descrição. dividido pelo novo caractere de
‫linha.
‫E agora isso criará um array.
‫Portanto, os parágrafos são uma matriz, onde cada um
‫dos elementos é basicamente um parágrafo.
‫OK?
‫E agora tudo o
‫que precisamos fazer é percorrer todos esses parágrafos e imprimir seu conteúdo.
‫Portanto, cada p, digamos, nos
‫parágrafos será p. description_text igual ao parágrafo atual,
‫que é p.
‫Então, simples certo?
‫Vamos verificar isso.
‫E não podemos realmente
‫ver se é diferente porque acabei de usar este texto cego aqui.
‫Mas posso dizer que este aqui deve
‫ser o texto correto.
‫E se formos para o passeio
‫de alpinista na floresta, na verdade aqui no Compass,
‫onde fica isso?
‫Bem aqui.
‫Então, se formos aqui
‫para a descrição e tentarmos editá-la, vamos apenas adicionar
‫outro caractere de nova linha aqui.
‫Então, vamos atualizar e então devemos ver um
‫novo parágrafo aparecendo em algum lugar aqui.
‫Vamos mudar isso.
‫E isso não foi tão bem.
‫Não tenho certeza do porquê.
‫Nunca tentei fazer isso, então o
‫que fiz foi a primeira vez que tentei.
‫Portanto, não tenho certeza do que deu errado aqui.
‫Talvez precisemos realmente criar uma
‫nova linha pressionando Enter, mas também não
‫funcionou.
‫Então, vamos ver se realmente temos o caractere de
‫nova linha aqui.
‫E talvez seja este aqui.
‫Bem, mas não importa, apenas confie em mim.
‫E agora nossa nova linha ainda está aí,
‫o que está acontecendo?
‫Tudo bem, vamos lá, vamos atualizá-lo.
‫Tudo bem, agora nossa outra linha nova que
‫tínhamos aqui antes também meio que desapareceu, mas deixa para lá.
‫Acho que simplesmente não deveria ter usado o Compass para
‫editar este texto aqui.
‫OK?
‫De qualquer forma, vamos agora às imagens.
‫E agora não os vemos aqui, mas é
‫assim que deveria ser, ok?
‫Portanto, temos três imagens aqui exibidas lado
‫a lado assim.
‫E essas são, na
‫verdade, as imagens que estão em algum lugar aqui.
‫Então, sim, no campo de
‫imagens, temos essa matriz dessas três imagens.
‫Então, mais uma vez, vamos usar
‫um loop para percorrê-los.
‫Então, bastante simples.
‫Então, cada imagem em turnê. imagens.
‫E então, para cada um deles, queremos criar isso.
‫Então aqui está a fonte.
‫E isso é imagem / passeios, na verdade.
‫E então o nome da imagem atual,
‫que é imagem, claro.
‫E aqui no texto alternativo temos o número do passeio
‫e, mais importante, também aqui no
‫nome da classe CSS.
‫E então você vê que o próximo tem aquela imagem dois
‫e a imagem três.
‫OK?
‫Então, como vamos fazer isso?
‫Bem, em um loop de
‫pug podemos definir uma segunda variável.
‫E essa segunda variável será o índice.
‫Então, vamos chamar isso de i, de forma muito simples.
‫E então esse é um índice baseado
‫em zero, que será zero para o primeiro
‫elemento e um e dois para os outros dois elementos.
‫E então vamos primeiro começar colocando isso lá.
‫Então esse é i, que é o índice,
‫mais 1, porque queremos que seja 1 e não zero.
‫E agora esta parte aqui é um pouco
‫mais complicada, porque não podemos
‫usar esta sintaxe, e também não podemos usar a outra
‫sintaxe de interpolação aqui mesmo no nome da classe.
‫E então, em vez disso, o
‫que vamos fazer é copiar isso e realmente defini-lo como um atributo de classe.
‫Ok, então isso é exatamente o mesmo.
‫Mas aqui podemos usar uma
‫string de modelo para preencher essa aqui.
‫Então, eu + 1.
‫Tudo bem, vamos nos livrar disso.
‫E vamos testar.
‫Uau, algo não está certo aqui.
‫Então, nós temos nossas imagens, mas elas não parecem corretas.
‫Mas o nome da classe está certo.
‫E você também vê isso aqui aplicado.
‫Mas por algum motivo ele não encontrou essas imagens.
‫Ou realmente fez.
‫Aqui embaixo diz que não.
‫Ah, mas essas são na verdade outras imagens.
‫Mas esses são outros que estão um pouco mais abaixo.
‫De qualquer forma, o que eu acho que não está correto aqui é que essa
‫imagem deveria estar dentro desta caixa de imagem, então acho
‫que algo em nosso recuo aqui está errado.
‫E sim, realmente é isso.
‫Então você vê que esta imagem está no
‫mesmo nível que este elemento div.
‫Então, é claro, há um recuo faltando.
‫Tudo bem.
‫E isso agora deve ser corrigido.
‫E aqui vamos nós.
‫Tudo bem.
‫Então isso, só para ver que esse era o problema.
‫Agora, de fato, a imagem está dentro da caixa de imagem.
‫Tão bom.
‫O próximo é o mapa.
‫Que lembrem, vou
‫sair para a próxima palestra, para que por enquanto possamos nos preocupar em colocar
‫as revisões do tour aqui neste elemento.
‫OK.
‫E então, novamente, estamos passando para esta parte aqui.
‫Agora, de onde vêm essas avaliações.
‫Bem, lembre-se de como aqui no viewController preenchemos
‫o campo de
‫revisões com os dados de revisão reais.
‫E agora temos tours. resenhas, que é uma série de todas
‫as resenhas.
‫E como você provavelmente
‫pode imaginar, agora vamos criar outro
‫loop bem aqui dentro deste elemento de revisão.
‫Então, cada revisão em turnê. avaliações.
‫E então em cada um deles teremos este cartão de revisão.
‫Tudo bem.
‫Agora, isso aqui é
‫muito código, o que está nos distraindo do nosso conteúdo principal.
‫E então vamos novamente, criar um mixin aqui.
‫Tudo bem.
‫Então, vamos
‫colocar aqui no topo.
‫E você verá por que em um segundo.
‫Portanto, reviewCard.
‫E aqui passamos a própria revisão.
‫Tudo bem.
‫E agora precisamos corrigir essas indentações.
‫E em vez de fazer isso manualmente, lembre-se,
‫vou usar o pacote VS
‫Code que temos.
‫E então command shift
‫p ou control shift p no Windows e então Beautify pug.
‫E então isso resolve.
‫E agora precisamos criar esta
‫revisão aqui com base nos dados.
‫Mas antes de fazermos
‫isso, vamos chamar o mixin aqui em cada iteração da revisão.
‫Então, + reviewCard com a revisão atual, certo?
‫Então, vamos apenas dar uma olhada na aparência real
‫de uma revisão.
‫E nós temos os comentários aqui.
‫Mas, de fato, eles não serão
‫realmente úteis porque o usuário não está preenchido aqui.
‫Então, vamos na verdade ao Postman
‫e dar uma olhada nas avaliações finais preenchidas lá.
‫Então, digamos que faça uma revisão durante a turnê.
‫Porque isso será uma revisão completa.
‫Temos o campo de revisão, a avaliação e o usuário.
‫E o que nos interessa aqui é
‫o usuário. nome e usuário. foto.
‫Tudo bem, então o nome de usuário será revisado. do utilizador. nome.
‫Direito?
‫Então revise. do utilizador. nome.
‫E então tudo isso
‫é necessário porque é claro que agora temos vários
‫conjuntos de dados relacionados entre si e, portanto, com a função populate, eles
‫estão todos aninhados uns nos outros.
‫Portanto, vamos usar o nome dele aqui também.
‫Tudo bem.
‫E então aqui
‫não usaremos seu nome.
‫Ah, e
‫esqueci a interpolação, e aqui está a foto.
‫Tudo bem.
‫Aqui está a descrição.
‫E isso é realmente uma revisão. revisão, eu acredito.
‫Então sim.
‫Então revise. Reveja.
‫E esta é
‫a parte fácil e a parte difícil a seguir será exibir
‫a avaliação real, porque temos que exibir um desses elementos
‫aqui para cada um dos números de estrelas que a avaliação tem.
‫Portanto, uma revisão de cinco estrelas precisa de todas essas cinco estrelas.
‫Mas uma crítica de quatro estrelas só precisa de quatro delas
‫e, além disso, queremos uma estrela cinza.
‫Então, basicamente, para dizer quatro de cinco, certo?
‫Mas vamos primeiro dar uma olhada, se isso está realmente funcionando.
‫Então, tudo, exceto a classificação.
‫Então, vamos recarregar e, de fato, aqui
‫estamos nós, com os usuários, o nome e o próprio texto de revisão.
‫E agora vamos cuidar de realmente exibir
‫a classificação também.
‫Então o que vamos fazer aqui é imprimir a
‫quantidade de estrelas em um loop.
‫Portanto, há cinco estrelas possíveis e, portanto, fazemos
‫um loop de uma a cinco.
‫Então, em cada estrela, testamos se a
‫classificação do tour é maior ou igual à estrela atual.
‫E se for assim, imprimimos uma estrela verde,
‫que representa uma estrela real.
‫E se não, é uma estrela cinza.
‫Então, novamente, que é apenas uma estrela inexistente.
‫Por exemplo, para mostrar três de cinco, certo?
‫E isso provavelmente parece um pouco abstrato, então
‫vamos apenas implementá-lo.
‫Então, cada estrela em.
‫E agora não temos um array ainda, então
‫simplesmente o criamos.
‫Portanto, 1, 2,
‫3, 4 e 5, que são todas as estrelas possíveis.
‫Em seguida, vamos copiar isso aqui.
‫E agora a diferença entre uma estrela verde e
‫uma cinza é que a verde tem
‫o modificador ativo aqui, e a cinza tem inativo.
‫E então vamos mudar isso com uma string de modelo, ok?
‫E, assim como antes, realmente precisamos desse nome de
‫classe como um atributo de classe aqui.
‫Tudo bem.
‫Então isso também deve estar aqui.
‫Vamos nos livrar disso.
‫E agora vamos fazer o teste que acabamos de mencionar.
‫E, novamente, a saída disso será
‫que este ano está ativo ou inativo.
‫E então vamos colocar um pouco de JavaScript neste ponto.
‫E então o que vamos fazer aqui é
‫testar se a revisão. classificação, que é onde
‫a classificação é armazenada, é maior
‫ou igual à estrela atual.
‫Então, basicamente, estamos escrevendo um operador de torneamento aqui.
‫E então se for, então aqui
‫queremos dizer, ativo, e se
‫não, então
‫inativo.
‫E isso parece meio estranho, eu sei.
‫Então, vamos exemplificar isso com um exemplo simples.
‫Então, digamos que temos três estrelas de cinco, certo?
‫Portanto, na primeira iteração, estrela é um.
‫E, portanto, um é obviamente menos do que três.
‫E então a primeira estrela deve, é claro, ser verde, e
‫é por isso que colocamos
‫ativo aqui, o que resultará em reviews_star - ativo.
‫OK?
‫Então a mesma coisa com a segunda e a terceira estrelas.
‫Nesse ponto, temos três estrelas verdes.
‫Mas o quarto e o quinto devem ser cinza.
‫OK?
‫E então, na quarta iteração aqui a estrela é quatro.
‫Então, o teste é três maior do que quatro?
‫Não, é falso e, portanto, está inativo.
‫E então essa será uma estrela cinza, e a mesma
‫coisa para a última, então a quinta estrela.
‫Tudo bem, então vamos testar isso.
‫E, na verdade, não podemos testá-lo aqui, porque este caminhante
‫da floresta tem uma classificação perfeita
‫de cinco entre cinco e,
‫portanto, todas as avaliações são cinco estrelas.
‫E por isso precisamos vir aqui para todos os passeios.
‫E embora este link não
‫esteja realmente funcionando ainda, então você vê
‫apenas edições como esta, este hash aqui.
‫E então vamos rapidamente em frente e consertar isso.
‫E isso está no cabeçalho, bem aqui.
‫Mas não queremos isso.
‫Queremos simplesmente ir para a nossa página raiz.
‫Então essa é apenas a barra.
‫Então recarregue.
‫E agora lá embaixo
‫no link você vê que é exatamente o que temos.
‫E, de fato, voltamos à nossa página de visão geral.
‫Então, vamos para uma página com uma média mais baixa.
‫E então esse é o amante do esporte.
‫Vamos ver.
‫E é claro que você
‫vê que todos os dados agora estão corretos para este tour específico.
‫Então, novamente você vê este 3. 9 em média.
‫Você vê todos
‫esses diferentes guias turísticos, as diferentes fotos
‫e todos os comentários.
‫E também você vê que as estrelas estão realmente funcionando.
‫Portanto, esta primeira avaliação é uma avaliação cinco estrelas.
‫E então você vê cinco, quatro, um e
‫então um monte de revisões de quatro estrelas aqui.
‫Ok, então, isso foi um pouco mais
‫confuso, essa parte, mas ainda conseguimos fazer funcionar, certo?
‫Agora, uma coisa que eu queria mostrar a vocês é
‫que também podemos exportar, basicamente
‫um mixin em seu arquivo separado.
‫E então vamos apenas copiar isso e criar
‫um novo mixin
‫aqui, ou na verdade um novo arquivo.
‫E então, uma vez
‫que iremos incluí-lo, irei prefixar novamente com este sublinhado.
‫E vamos chamá-lo de reviewCard. pug.
‫Em seguida, cole aqui.
‫E todo o recuo
‫ainda está correto, e agora tudo o
‫que precisamos fazer é dizer, incluir
‫_reviewCard.
‫E se tentarmos
‫isso agora, ainda deve funcionar, e funciona.
‫Tudo bem.
‫Então, escrevemos muito
‫código até agora e estamos quase terminando.
‫Tudo o que resta fazer é esta seção de apelo à ação.
‫E aqui tudo o que realmente precisamos mudar
‫é essa duração aqui.
‫Então, temos esse slogan legal
‫tipo, 10 dias.
‫1 aventura.
‫Memórias infinitas.
‫Tudo bem?
‫Mas, na verdade, precisamos substituir
‫o número de dias para que seja correto para esta turnê em particular.
‫Então, vamos criar uma string de template para isso.
‫Então faça um tour. duração.
‫E aqui também temos algumas das imagens da turnê, ok?
‫Então, vamos fazer isso também.
‫Então essa é a imagem. tours, ou / tours
‫e, em seguida, tour slash. imagens.
‫E lembre-se de
‫que este é um array, e vou simplesmente usar o primeiro e o segundo elemento.
‫Ou na verdade a segunda e a terceira porque
‫descobri que geralmente ficam
‫um pouco melhores nessa situação.
‫Então,
‫vamos copiar isso.
‫Coloque isso aqui.
‫Ah, e estamos perdendo o colchete de fechamento aqui.
‫E vamos apenas adicionar algum texto alternativo.
‫Foto do tour.
‫Tudo bem.
‫E eu acho que é realmente isso.
‫Então, apenas uma última tentativa.
‫Você vê que aqui está em branco agora.
‫Mas agora, de fato, temos as mesmas
‫imagens aqui.
‫Portanto, este deve ser o número dois.
‫Mas ainda assim, agora
‫diz 14 dias, e então tudo isso está correto agora.
‫Impressionante.
‫Isso é fantástico.
‫Deu muito trabalho, mas
‫acho que valeu muito a pena.
‫Esta página, eu acho que parece absolutamente fantástica.
‫É realmente impressionante.
‫E agora tudo está conectado.
‫Assim, em cada passeio, podemos voltar
‫a todos os passeios e dar uma olhada em todos os outros.
‫Vamos ver o campista do parque.
‫O passeio de campista no parque.
‫Todos os detalhes.
‫Todos os diferentes guias,
‫imagens, seus comentários e, na verdade, essas diferentes imagens.
‫Excelente.
‫Então você vê este buraco em branco aqui no meio de nossa página.
‫E é aí que o mapa estará a seguir,
‫e vamos fazer isso,
‫na verdade, agora na próxima aula.