‫Instructeur : Très bien, ceci fait partie de la deuxième
‫partie de la page de détail de la page de visite.
‫Et nous avons laissé la dernière
‫vidéo après avoir construit cette partie Quick Facts ici
‫en utilisant quelques mixins, n'est-ce pas ?
‫Et donc ensuite, il est temps
‫de construire cette partie ici des guides.
‫Maintenant, nous ne savons pas à l'avance combien de guides
‫touristiques il y a réellement sur chaque visite.
‫Et donc, tout comme sur la page
‫de présentation, nous avons
‫besoin ici d'une autre boucle pour parcourir tous
‫les guides associés à une certaine visite.
‫Alors, faisons-le.
‫Et en ce moment, nous avons en fait ces trois éléments.
‫Donc ces trois boites, une pour chaque guide.
‫Mais comme nous venons de le dire, ce n'est pas comme cela que nous voulons que cela fonctionne.
‫Alors débarrassons-nous de ces deux-là, puis créons une boucle ici,
‫qui à chaque itération créera une boîte,
‫donc un élément comme celui-ci.
‫Et cela devrait être assez facile.
‫Encore une fois, nous
‫utilisons chacun, puis le nom de la variable dans
‫l'itération actuelle, dans, puis le tableau que nous voulons parcourir.
‫Et donc c'est la tournée. guides.
‫À droite?
‫Alors, où
‫est-ce ?
‫Oui, voici donc notre gamme de guides.
‫Lesquels, bien sûr, dans la base de données seront
‫ensuite renseignés avec les utilisateurs correspondants et pas seulement les identifiants, n'est-ce pas ?
‫Alors maintenant, nous devons mettre tout cela en retrait ici.
‫Et donc chacun de
‫ces guides ici sera essentiellement un document utilisateur.
‫Alors vérifions rapidement cela dans Compass
‫car nous n'avons pas ce genre de données dans notre document
‫JSON car, bien sûr, la population ne
‫se produit qu'en coulisses en utilisant Mongos, n'est-ce pas ?
‫Ainsi chacun des guides est un utilisateur.
‫Et donc ce que nous voulons, c'est le nom et la photo.
‫Alors ici, nous voulons la photo, bien sûr.
‫Qui se trouve,
‫dans cette page, à images/users puis le nom de la photo de l'utilisateur.
‫Alors guide. photo.
‫Qui est ici, encore une fois, le nom
‫de la variable dans l'itération en cours.
‫Alors ici, je ne sais pas pourquoi il est écrit
‫Lead guide, mais mettons en fait le nom de la personne ici.
‫Alors guide. Nom.
‫Ensuite, nous voulons à nouveau le nom du guide. Nom.
‫Et puis nous voulons aussi l'étiquette.
‫Et donc fondamentalement, ce sera le guide principal lorsqu'il s'agira
‫d'un guide principal et simplement
‫d'un guide touristique lorsqu'il s'agira d'un guide régulier.
‫Maintenant, laissez-moi vous montrer ce qui se passe lorsque nous mettons
‫simplement le rôle ici.
‫Rappelez-vous donc que le rôle est la
‫propriété où nous disons si un utilisateur est un guide
‫ou un guide principal ou même un administrateur.
‫D'accord?
‫Donc, encore une fois, voyons
‫pour l'instant ce qui se passe lorsque nous le disons simplement comme ça.
‫Et avec cela, nous devrions être prêts à le tester réellement.
‫Faisons une sauvegarde.
‫Et c'est reparti.
‫Nous avons donc les
‫trois photos, les noms, mais ici le rôle de guide
‫n'a pas vraiment l'air bien, n'est-ce pas ?
‫Alors rappelez-vous comment, en
‫fait, nous voulons dire guide principal et guide touristique.
‫D'accord, et maintenant il est temps d'utiliser un conditionnel.
‫Maintenant, pug a en fait des conditionnels intégrés, mais ils
‫sont vraiment simples et nous ne pouvons pas
‫faire beaucoup de choses avec eux.
‫Par exemple, ils ne nous
‫permettent même pas de tester l'égalité, par exemple.
‫Mais la bonne chose est que nous pouvons toujours
‫utiliser JavaScript pour cela.
‫Et encore une fois, nous utilisons du code sans tampon pour cela.
‫Donc, avec la syntaxe du tiret, puis nous pouvons
‫utiliser un JavaScript normal si ici.
‫Encore une fois, comme si nous écrivions simplement du JavaScript.
‫Et donc guide. rôle et maintenant nous pouvons tester et dire
‫si c'est un lead-guide.
‫Eh bien, ici, nous voulons dire Guide
‫principal, d'accord ?
‫Et mettons-en un autre ici
‫et disons que si le rôle
‫est juste un guide, eh bien, alors nous voulons un guide touristique.
‫Et c'est ainsi que nous utilisons un JavaScript si nous écrivons
‫à l'intérieur de pug, puis le combinons avec une sortie de pug comme celle-ci.
‫Très bien?
‫Alors, voyons.
‫Et en effet, c'est beaucoup plus agréable.
‫D'accord.
‫Débarrassons-nous ici
‫de cet espace vide et passons au suivant, qui
‫est la zone de description.
‫Donc, tout d'abord ici dans le titre,
‫nous avons également le nom de la tournée.
‫Voici donc le nom de la tournée, et
‫créons donc une chaîne de
‫modèle, et y mettons la tournée. Nom.
‫Je pensais que ça marcherait.
‫Mais ce n'est pas le cas.
‫Cela ne fonctionne qu'en JavaScript.
‫D'accord, et en fait je viens de me
‫rappeler que nous voulons aussi avoir la tournée directement dans le titre principal.
‫Donc, juste ici en fait.
‫D'accord, alors faisons-le.
‫D'accord.
‫Mais de
‫toute façon, descendons ici et créons ces paragraphes.
‫Maintenant, comme vous le voyez, nous avons en fait
‫ici deux paragraphes pour ce texte.
‫Voyons donc comment nous l'avons
‫ici dans la description.
‫Et comme vous le voyez, nous n'avons bien sûr qu'une seule grosse ficelle.
‫Mais nous l'avons au milieu divisé avec ces
‫nouveaux caractères de ligne.
‫Très bien?
‫Et donc ce
‫que nous allons faire est de diviser la chaîne par le caractère de nouvelle ligne.
‫D'accord?
‫Alors c'est facile, non ?
‫Donc, du code sans tampon pour écrire du JavaScript.
‫Les paragraphes sont égaux à la tournée. la description. divisé par le caractère de
‫nouvelle ligne.
‫Et donc cela va maintenant créer un tableau.
‫Ainsi, les paragraphes sont un tableau, où chacun
‫des éléments est essentiellement un paragraphe.
‫D'accord?
‫Et maintenant, tout ce que
‫nous avons à faire est de parcourir tous ces paragraphes et d'imprimer leur contenu.
‫Ainsi, chaque p, disons, dans les
‫paragraphes sera p. description_text égal au paragraphe courant,
‫qui est p.
‫Alors, simple non ?
‫Vérifions cela.
‫Et on ne peut pas
‫vraiment voir si c'est différent car je viens d'utiliser ce texte aveugle ici.
‫Mais je peux vous dire que ceci devrait
‫être le texte correct.
‫Et si nous allons au circuit
‫des randonneurs en forêt, en fait ici à Compass,
‫alors où est-ce ?
‫Ici.
‫Donc, si nous allons ici
‫à la description et essayons de la modifier, ajoutons simplement
‫un autre nouveau caractère de ligne ici.
‫Ensuite, mettons à jour et nous devrions voir
‫un nouveau paragraphe apparaître quelque part ici.
‫Changeons cela.
‫Et cela ne s'est pas si bien passé.
‫Je ne sais pas pourquoi.
‫Je n'ai jamais essayé de le faire, donc ce que
‫je viens de faire était la première fois que je l'ai essayé.
‫Donc je ne suis pas sûr de ce qui s'est passé ici.
‫Peut-être que nous avons juste besoin de créer une
‫nouvelle ligne en appuyant sur Entrée, mais cela n'a pas vraiment
‫fonctionné non plus.
‫Voyons donc si nous avons réellement le nouveau caractère
‫de ligne ici.
‫Et c'est peut-être celui-ci ici.
‫Eh bien, mais peu importe, faites-moi confiance là-dessus.
‫Et maintenant, notre nouvelle ligne est toujours là,
‫que se passe-t-il ?
‫Très bien, c'est parti, mettons-le à jour.
‫Très bien, maintenant notre autre nouvelle ligne que nous
‫avions ici auparavant a également en quelque sorte disparu, mais peu importe.
‫Je suppose que je n'aurais tout simplement pas dû utiliser Compass
‫pour éditer ce texte ici.
‫D'accord?
‫Quoi qu'il en soit, passons maintenant aux images.
‫Et pour le moment, nous ne les voyons pas ici, mais c'est
‫à ça que ça doit ressembler, d'accord ?
‫Nous avons donc ici trois images affichées côte à
‫côte comme celle-ci.
‫Et donc ce sont
‫en fait les images qui sont quelque part ici.
‫Alors oui, dans le champ des
‫images, nous avons ce tableau de ces trois images.
‫Donc, une fois de plus, nous allons utiliser
‫une boucle pour les parcourir.
‫Donc, assez simple.
‫Ainsi, chaque image en tournée. images.
‫Et donc pour chacun d'eux, nous voulons créer ceci.
‫Alors voici la source.
‫Et c'est image/tours, en fait.
‫Et puis le nom de l'image courante,
‫qui est image bien sûr.
‫Et puis ici, dans le texte alternatif, nous avons en fait le numéro de
‫la tournée et, plus important encore, ici dans
‫le nom de la classe CSS.
‫Et donc vous voyez que le suivant a cette image deux
‫et l'image trois.
‫D'accord?
‫Alors comment allons-nous faire?
‫Eh bien, dans une boucle carlin,
‫nous pouvons en fait définir une deuxième variable.
‫Et cette deuxième variable sera alors l'indice.
‫Alors appelons ça i, très simplement.
‫Et c'est donc un indice de base
‫zéro, qui sera zéro pour le premier élément
‫et un et deux pour les deux autres éléments.
‫Et donc commençons d'abord par mettre ça là.
‫C'est donc i, qui est l'indice, plus 1,
‫parce que nous voulons que ce soit 1 et non zéro.
‫Et maintenant, cette partie ici est un peu plus délicate,
‫car nous ne pouvons pas utiliser
‫cette syntaxe, et nous ne pouvons pas non plus utiliser l'autre
‫syntaxe d'interpolation ici même dans le nom de la classe.
‫Et donc à la place, ce que
‫nous allons faire est de copier ceci et de le définir en fait comme un attribut de classe.
‫D'accord, et c'est exactement la même chose.
‫Mais ici, nous pouvons ensuite utiliser une
‫chaîne de modèle afin de remplir celle-ci ici.
‫Donc je + 1.
‫Très bien, débarrassons-nous de ça.
‫Et testons-le.
‫Whoa, quelque chose ne va pas ici.
‫Donc, nous avons nos images, mais elles ne semblent pas correctes.
‫Mais le nom de la classe est en fait juste.
‫Et aussi vous le voyez ici appliqué.
‫Mais pour une raison quelconque, il n'a pas trouvé ces images.
‫Ou en fait, il l'a fait.
‫Ici-bas, il est dit que non.
‫Ah, mais ce sont en fait d'autres images.
‫Mais ce sont d'autres qui sont un peu plus bas.
‫Quoi qu'il en soit, ce que je suppose n'est pas correct ici, c'est que cette image
‫devrait être à l'intérieur de cette zone d'image, et donc je suppose
‫que quelque chose dans notre indentation ici est faux.
‫Et oui, en effet c'est.
‫Vous voyez donc que cette image est au
‫même niveau que cet élément div.
‫Alors bien sûr, il y a une indentation manquante.
‫Très bien.
‫Et donc cela devrait maintenant être corrigé.
‫Et c'est reparti.
‫Très bien.
‫Alors ça, juste pour voir que c'était ça le problème.
‫Maintenant, en effet, l'image est à l'intérieur de la boîte d'image.
‫Tellement bon.
‫Ensuite vient la carte.
‫Qui rappelez-vous, je vais
‫partir pour la prochaine conférence, de sorte que pour l'instant nous pouvons nous soucier de mettre les
‫critiques de la tournée ici dans cet élément.
‫D'accord.
‫Et donc, encore une fois, nous passons maintenant à cette partie ici.
‫Maintenant, d'où viennent réellement ces critiques.
‫Eh bien, rappelez-vous comment ici, dans le viewController, nous
‫avons rempli le
‫champ d'évaluation avec les données d'évaluation réelles.
‫Et donc en ce moment nous avons des tournées. avis, qui est un tableau de tous
‫les avis.
‫Et comme vous pouvez probablement le
‫deviner, nous allons maintenant créer une autre boucle
‫ici même à l'intérieur de cet élément de révision.
‫Donc, chaque examen en tournée. Commentaires.
‫Et puis dans chacun d'eux, nous aurons cette carte de révision.
‫Très bien.
‫Maintenant, il y a
‫beaucoup de code, ce qui nous distrait ici de notre contenu principal.
‫Et donc encore une fois, créons en fait un mixin ici.
‫Très bien.
‫Alors, mettons-le
‫ici en haut.
‫Et vous verrez pourquoi dans une seconde.
‫Alors révisezCard.
‫Et ici, nous passons l'examen lui-même.
‫Très bien.
‫Et maintenant, nous devons réellement corriger ces indentations.
‫Et au lieu de le faire manuellement, rappelez-vous, je
‫vais utiliser ce package VS
‫Code que nous avons.
‫Et donc commande shift
‫p ou control shift p sous Windows, puis Beautify pug.
‫Et donc ça le répare.
‫Et maintenant, nous devons créer cette
‫revue ici sur la base des données.
‫Mais avant de faire cela,
‫appelons en fait le mixin ici à chaque itération de l'examen.
‫Donc +reviewCard avec la critique actuelle, n'est-ce pas ?
‫Voyons donc à quoi ressemble réellement
‫une critique.
‫Et nous avons les critiques ici.
‫Mais effectivement, ils ne seront pas
‫vraiment utiles car l'utilisateur n'est pas renseigné ici.
‫Allons donc voir un
‫facteur et examinons les dernières critiques remplies.
‫Alors disons obtenir une critique en tournée.
‫Parce que ce sera alors un examen complet.
‫Nous avons donc le champ d'évaluation, la note, puis l'utilisateur.
‫Et ce qui nous intéresse ici, c'est
‫alors l'utilisateur. nom et utilisateur. photo.
‫Très bien, et donc le nom d'utilisateur sera révisé. utilisateur. Nom.
‫À droite?
‫Alors revoyez. utilisateur. Nom.
‫Et donc tout cela est nécessaire
‫car, bien sûr, nous avons maintenant plusieurs ensembles de données liés
‫les uns aux autres et donc avec la fonction de remplissage, ils sont tous maintenant en quelque
‫sorte imbriqués les uns dans les autres.
‫Utilisons donc son nom ici aussi.
‫Très bien.
‫Et puis ici,
‫nous n'utiliserons pas son nom.
‫Ah et
‫j'ai oublié l'interpolation, et puis là c'est la photo.
‫Très bien.
‫Ici, ce sera la description.
‫Et c'est en fait un examen. avis, je crois.
‫Donc voilà.
‫Alors revoyez. passer en revue.
‫Et c'est la
‫partie facile et la partie la plus difficile ensuite sera
‫d'afficher la note réelle, car nous devons afficher l'un
‫de ces éléments ici pour chacun des nombres d'étoiles de la critique.
‫Donc, une critique cinq étoiles a besoin de toutes ces cinq étoiles.
‫Mais une revue quatre étoiles n'en a besoin que de quatre et
‫en plus nous voulons aussi une étoile grise.
‫Donc en gros pour dire quatre sur cinq, d'accord ?
‫Mais regardons d'abord si cela fonctionne réellement.
‫Donc tout sauf la cote.
‫Rechargeons donc, et en effet, nous y
‫sommes, avec les utilisateurs, puis le nom, et le texte de la critique lui-même.
‫Et maintenant, occupons-nous également d'afficher
‫la note.
‫Donc, ce que nous allons faire ici, c'est imprimer
‫le nombre d'étoiles dans une boucle.
‫Il y a donc cinq étoiles possibles et donc
‫on boucle de une à cinq.
‫Ensuite, dans chaque étoile, nous testons si la
‫note de la tournée est supérieure ou égale à l'étoile actuelle.
‫Et si c'est le cas, nous imprimons une étoile
‫verte, qui représente une véritable étoile.
‫Et sinon, c'est une étoile grise.
‫Encore une fois, ce qui n'est qu'une étoile inexistante.
‫Par exemple, pour montrer trois sur cinq, d'accord ?
‫Et cela semble probablement un peu abstrait,
‫alors implémentons-le simplement.
‫Donc, chaque étoile dedans.
‫Et maintenant, nous n'avons pas encore de tableau, alors nous
‫le créons simplement.
‫Donc 1, 2,
‫3, 4 et 5, qui sont toutes les étoiles possibles.
‫Ensuite, copions ceci ici.
‫Et maintenant, la différence entre une étoile verte et une
‫étoile grise est que la verte a
‫le modificateur actif ici, et la grise a le modificateur inactif.
‫Et donc nous allons changer cela avec une chaîne de modèle, d'accord ?
‫Et donc comme avant, nous avons en fait besoin de
‫ce nom de classe comme attribut de classe ici.
‫Très bien.
‫Alors cela devrait aussi être ici.
‫Débarrassons-nous de cela.
‫Et maintenant, faisons ce test que nous venons de mentionner.
‫Et encore une fois, le résultat sera
‫que cette année est soit active, soit inactive.
‫Et donc mettons un peu de JavaScript à ce stade.
‫Et donc ce que nous allons faire ici est
‫de tester si l'examen. note, qui est l'endroit
‫où la note est stockée, est
‫supérieure ou égale à l'étoile actuelle.
‫Donc, fondamentalement, nous écrivons ici un opérateur de tournage.
‫Et donc si c'est le cas,
‫alors nous voulons dire ici, actif,
‫et sinon,
‫inactif.
‫Et ça a l'air un peu bizarre, je sais.
‫Alors, illustrons simplement cela avec un exemple simple.
‫Alors disons que nous avons trois étoiles sur cinq, d'accord ?
‫Ainsi, dans la première itération, star est un.
‫Et donc un est bien sûr moins que trois.
‫Et donc la première étoile devrait, bien sûr, être une étoile
‫verte, et c'est pourquoi ici
‫nous mettons active, ce qui se traduira ensuite par reviews_star--active.
‫D'accord?
‫Puis la même chose avec la deuxième et la troisième étoile.
‫Donc, à ce stade, nous avons trois étoiles vertes.
‫Mais le quatrième et le cinquième devraient être gris.
‫D'accord?
‫Et donc, dans la quatrième itération, l'étoile vaut quatre.
‫Le test est donc trois supérieur à quatre ?
‫Non c'est faux et donc inactif.
‫Et donc ce sera alors une étoile grise, et la même
‫chose pour la dernière, donc la cinquième étoile.
‫Très bien, alors testons ça.
‫Et en fait, nous ne pouvons pas le tester ici, car
‫ce randonneur forestier a une note
‫parfaite de cinq sur cinq
‫et donc toutes les critiques sont cinq étoiles.
‫Et donc nous devons venir ici pour toutes les tournées.
‫Et bien que ce lien ne
‫fonctionne pas encore vraiment, vous ne voyez donc
‫que des modifications comme celle-ci, ce hachage ici.
‫Et donc allons-y rapidement et corrigeons cela.
‫Et c'est dans l'en-tête, donc ici.
‫Mais nous ne voulons pas de cela.
‫Nous voulons simplement aller à notre page racine.
‫Donc c'est juste la barre oblique.
‫Alors rechargez.
‫Et maintenant, là-bas, dans le
‫lien, vous voyez que c'est exactement ce que nous avons.
‫Et donc effectivement, nous revenons à notre page de présentation.
‫Passons donc à une page avec une moyenne inférieure.
‫Et c'est donc l'amateur de sport.
‫Voyons voir.
‫Et bien sûr, vous voyez
‫que toutes les données sont maintenant correctes pour cette tournée spécifique.
‫Donc encore une fois, vous voyez ce 3. 9 en moyenne.
‫Vous voyez tous
‫ces différents guides touristiques, les différentes photos, et
‫vous voyez toutes les critiques.
‫Et vous voyez aussi que les étoiles fonctionnent réellement.
‫Donc, ce premier avis est un avis cinq étoiles.
‫Et donc vous voyez cinq, quatre, un,
‫puis un tas de critiques quatre étoiles ici.
‫D'accord, alors, c'était un peu plus déroutant, cette partie,
‫mais nous avons quand même réussi à le faire fonctionner, n'est-ce pas ?
‫Maintenant, une chose que je voulais juste vous montrer, c'est que
‫nous pouvons également exporter, essentiellement
‫un mixin dans son fichier séparé.
‫Et donc, copions simplement ceci et créons un
‫nouveau mixin ici,
‫ou en fait un nouveau fichier.
‫Et donc puisque nous allons ensuite
‫l'inclure, je vais à nouveau préfixer cela avec ce trait de soulignement.
‫Et appelons ça reviewCard. carlin.
‫Ensuite, collez-le ici.
‫Et toute l'indentation est toujours
‫correcte, et maintenant tout ce que nous
‫avons à faire est de dire, d'inclure
‫_reviewCard.
‫Et donc si nous
‫essayons cela maintenant, cela devrait toujours fonctionner, ce qui est le cas.
‫Très bien.
‫Nous avons donc écrit
‫beaucoup de code jusqu'à présent et nous avons presque terminé.
‫Tout ce qui reste à faire est cette section d'appel à l'action.
‫Et ici, tout ce que nous avons vraiment besoin de
‫changer, c'est cette durée ici.
‫Nous avons donc ce joli slogan
‫comme, 10 jours.
‫1 aventure.
‫Souvenirs infinis.
‫Très bien?
‫Mais nous devons en fait
‫remplacer le nombre de jours afin qu'il soit correct pour cette tournée particulière.
‫Créons donc une chaîne de modèle pour cela.
‫Donc tournée. durée.
‫Et puis aussi ici, nous avons quelques images de la tournée, d'accord ?
‫Alors faisons-le aussi.
‫C'est donc l'image. tours, ou
‫/tours puis slash tour. images.
‫Et rappelez-vous qu'il
‫s'agit d'un tableau et que j'utiliserai simplement le premier et le deuxième élément.
‫Ou en fait le deuxième et le troisième parce que j'ai
‫découvert que ceux-ci ont généralement
‫l'air un peu mieux dans la situation.
‫Alors,
‫copions ça.
‫Mettez ça ici.
‫Oh et il nous manque la parenthèse fermante ici.
‫Et ajoutons simplement un texte alternatif.
‫Photo de la tournée.
‫Très bien.
‫Et je pense que c'est effectivement ça.
‫Alors juste un dernier essai.
‫Vous voyez qu'ici c'est vide en ce moment.
‫Mais maintenant en effet, nous avons les
‫mêmes images ici.
‫Cela devrait donc être le numéro deux.
‫Mais encore, maintenant, il
‫est dit 14 jours, et donc tout cela est correct maintenant.
‫Impressionnant.
‫C'est fantastique.
‫C'était beaucoup de travail, mais
‫je pense que ça a vraiment payé.
‫Cette page, je pense, est absolument fantastique.
‫C'est vraiment bluffant.
‫Et maintenant, tout est connecté.
‫Ainsi, à chaque tournée, nous pouvons
‫revenir à toutes les tournées et jeter un œil à toutes les autres.
‫Voyons le camping-car du parc.
‫La visite du parc en camping-car.
‫Tous les détails.
‫Tous les différents guides,
‫images, leurs avis, et bien sûr ces différentes images.
‫Super.
‫Vous voyez donc ce trou vide ici au milieu de notre page.
‫Et c'est donc là que la carte va être la
‫prochaine, et alors faisons-le, en
‫fait dès maintenant dans la prochaine conférence.