‫Istruttore: Va bene, questa è la seconda parte
‫di Creazione della pagina dei dettagli della pagina del tour.
‫E abbiamo lasciato l'ultimo
‫video dopo aver costruito questa parte Quick
‫Facts usando alcuni mixin, giusto?
‫E quindi ora è il momento
‫di costruire questa parte qui delle guide.
‫Ora non sappiamo in anticipo quante guide turistiche
‫ci siano effettivamente in ogni tour.
‫E quindi, proprio come nella pagina della
‫panoramica, qui abbiamo bisogno
‫di un altro ciclo per scorrere sostanzialmente tutte
‫le guide associate a un determinato tour.
‫Quindi, facciamolo.
‫E in questo momento abbiamo effettivamente questi tre elementi.
‫Quindi questi tre box, uno per ogni guida.
‫Ma come abbiamo appena detto, non è così che vogliamo che funzioni.
‫Quindi liberiamoci di questi due e poi creiamo un ciclo qui,
‫che in ogni iterazione creerà una scatola,
‫quindi un elemento come questo.
‫E dovrebbe essere abbastanza facile.
‫Quindi, di nuovo,
‫usiamo ciascuno e poi il nome della variabile
‫nell'iterazione corrente, in e quindi l'array che vogliamo scorrere.
‫E quindi questo è il tour. guide.
‫Destra?
‫Allora,
‫dov'è?
‫Sì, quindi ecco la nostra gamma di guide.
‫Che ovviamente nel database verranno poi popolati
‫con gli utenti corrispondenti e non solo con gli ID, giusto?
‫Quindi ora dobbiamo far rientrare tutto questo qui.
‫E quindi ognuna di
‫queste guide qui sarà fondamentalmente un documento utente.
‫Quindi controlliamolo rapidamente in
‫Compass perché non abbiamo quel tipo di dati nel
‫nostro documento JSON perché, ovviamente, la
‫popolazione avviene solo dietro le quinte usando Mongos, giusto?
‫Quindi ciascuna delle guide è un utente.
‫E quindi quello che vogliamo è il nome e la foto.
‫Quindi qui vogliamo la foto, ovviamente.
‫Che è, in
‫questa pagina, in immagini/utenti e poi il nome della foto dell'utente.
‫Quindi guida. foto.
‫Che è qui, di nuovo, il
‫nome della variabile nell'iterazione corrente.
‫Quindi qui non so perché dice Guida
‫guida, ma in realtà mettiamo qui il nome della persona.
‫Quindi guida. nome.
‫Quindi qui vogliamo di nuovo il nome della guida. nome.
‫E poi vogliamo anche l'etichetta.
‫E quindi fondamentalmente quella sarà guida principale quando
‫è guida principale e semplicemente
‫guida turistica quando è una guida normale.
‫Ora lascia che ti mostri cosa succede quando mettiamo
‫qui il ruolo.
‫Quindi ricorda che il ruolo è la
‫proprietà in cui diciamo se un utente è una guida
‫o una guida principale o anche un amministratore.
‫Va bene?
‫Quindi, di nuovo,
‫vediamo per ora cosa succede quando la mettiamo così.
‫E con ciò dovremmo essere pronti a testarlo effettivamente.
‫Diamo un salvataggio.
‫E qui andiamo.
‫Quindi abbiamo le tre
‫foto, i nomi, ma poi qui il ruolo
‫di guida non sembra proprio buono, giusto?
‫Quindi ricorda come, in
‫effetti, vogliamo dire guida principale e guida turistica.
‫Ok, quindi ora è il momento di usare un condizionale.
‫Ora pug ha effettivamente dei condizionali incorporati, ma
‫sono davvero semplici e non possiamo fare
‫molte cose con loro.
‫Ad esempio, non ci
‫consentono nemmeno di verificare l'uguaglianza, ad esempio.
‫Ma la cosa buona è che possiamo ancora
‫usare JavaScript per quello.
‫E così di nuovo, usiamo del codice non bufferizzato per questo.
‫Quindi con la sintassi del trattino e quindi possiamo
‫usare un normale JavaScript se qui.
‫Quindi, di nuovo, come se stessimo scrivendo JavaScript.
‫E così guida. ruolo e ora possiamo testare e dire
‫se è una guida.
‫Bene, allora qui vogliamo dire
‫Guida principale, ok?
‫E mettiamone un altro
‫qui e diciamo che se
‫il ruolo è solo guida, beh, allora vogliamo la guida turistica.
‫E quindi è così che usiamo un JavaScript se scriviamo all'interno
‫di pug e poi lo combiniamo con un output di pug come questo.
‫Va bene?
‫Quindi, vediamo.
‫E infatti, è molto più bello.
‫Va bene.
‫Eliminiamo questo
‫spazio vuoto qui e passiamo a quello successivo, che
‫è la casella di descrizione.
‫Quindi prima qui nell'intestazione
‫abbiamo anche il nome del tour.
‫Quindi questo qui è il nome del
‫tour, quindi creiamo una
‫stringa modello e lì mettiamo tour. nome.
‫Ho pensato che avrebbe funzionato.
‫Ma non è così.
‫Funziona solo in JavaScript.
‫Ok, e in realtà mi sono
‫appena ricordato che vogliamo anche avere il tour proprio nel titolo principale.
‫Quindi, proprio qui in realtà.
‫Ok, allora facciamolo.
‫Va bene.
‫Ma comunque,
‫spostiamoci qui e creiamo questi paragrafi.
‫Ora, come vedi, in realtà abbiamo due paragrafi
‫qui per questo testo.
‫Quindi diamo solo un'occhiata a come
‫lo abbiamo qui nella descrizione.
‫E come vedi, ovviamente abbiamo solo una grossa corda.
‫Ma l'abbiamo nel mezzo diviso con questi
‫nuovi caratteri di linea.
‫Va bene?
‫E quindi quello
‫che faremo è dividere la stringa per il carattere della nuova riga.
‫Va bene?
‫Quindi è facile, no?
‫Quindi, codice non bufferizzato per scrivere JavaScript.
‫Paragrafi è uguale a tour. descrizione. diviso dal carattere della nuova
‫riga.
‫E quindi questo ora creerà un array.
‫Quindi i paragrafi sono un array, in cui ciascuno
‫degli elementi è fondamentalmente un paragrafo.
‫Va bene?
‫E quindi ora tutto
‫ciò che dobbiamo fare è scorrere tutti questi paragrafi e stamparne il contenuto.
‫Quindi ogni p, diciamo, nei
‫paragrafi sarà p. descrizione_testo uguale al paragrafo corrente,
‫che è p.
‫Quindi, semplice no?
‫Verifichiamolo.
‫E non possiamo davvero
‫vedere se è diverso perché ho appena usato questo testo cieco qui.
‫Ma posso dirvi che questo qui dovrebbe
‫essere il testo corretto.
‫E se andiamo al tour
‫escursionistico della foresta, in realtà qui a
‫Compass, allora dov'è?
‫Giusto qui.
‫Quindi, se andiamo
‫qui alla descrizione e proviamo a modificarla, aggiungiamo qui
‫un altro nuovo carattere di riga.
‫Quindi aggiorniamoci e poi dovremmo vedere un nuovo
‫paragrafo spuntare da qualche parte qui.
‫Cambiamo quello.
‫E non è andata così bene.
‫Non sono sicuro del perché.
‫Non ho mai provato a farlo, quindi quello
‫che ho fatto è stata la prima volta che l'ho provato.
‫Quindi non sono sicuro di cosa sia andato storto qui.
‫Forse abbiamo solo bisogno di creare
‫una nuova riga premendo invio, ma neanche questo
‫ha funzionato.
‫Quindi vediamo se abbiamo effettivamente il carattere della
‫nuova linea qui.
‫E forse è questo qui.
‫Beh, ma non importa, fidati di me su questo.
‫E ora la nostra nuova linea è ancora
‫lì, cosa sta succedendo?
‫Va bene, ci siamo, aggiorniamolo.
‫Bene, ora anche l'altra nostra nuova linea
‫che avevamo qui prima è un po' scomparsa, ma non importa.
‫Immagino che non avrei dovuto usare Compass per modificare
‫questo testo qui.
‫Va bene?
‫Comunque, ora passiamo alle immagini.
‫E in questo momento non li vediamo qui, ma
‫è così che dovrebbe apparire, ok?
‫Quindi abbiamo tre immagini qui visualizzate fianco a fianco
‫in questo modo.
‫E quindi queste sono in
‫realtà le immagini che sono da qualche parte qui.
‫Quindi sì, nel campo delle immagini
‫abbiamo questa serie di queste tre immagini.
‫Quindi ancora una volta useremo un
‫ciclo per scorrerli.
‫Quindi, abbastanza semplice.
‫Quindi, ogni immagine in tour. immagini.
‫E quindi per ognuno di loro vogliamo creare questo.
‫Quindi ecco la fonte.
‫E questo è image/tours, in realtà.
‫E poi il nome dell'immagine corrente,
‫che è image ovviamente.
‫E poi qui nel testo alternativo abbiamo effettivamente il numero del
‫tour e, cosa più importante, anche qui
‫nel nome della classe CSS.
‫E così vedi che il prossimo ha quell'immagine due
‫e l'immagine tre.
‫Va bene?
‫Allora come lo faremo?
‫Bene, in un ciclo pug
‫possiamo effettivamente definire una seconda variabile.
‫E quella seconda variabile sarà quindi l'indice.
‫Quindi chiamiamolo io, molto semplicemente.
‫Quindi questo è un indice a base
‫zero, che sarà zero per il primo elemento
‫e uno e due per gli altri due elementi.
‫E quindi iniziamo prima mettendolo lì.
‫Quindi questo è i, che è l'indice, più
‫1, perché vogliamo che questo sia 1 e non zero.
‫E ora questa parte qui è un po'
‫più complicata, perché non possiamo
‫usare questa sintassi, e non possiamo nemmeno usare l'altra
‫sintassi di interpolazione proprio qui nel nome della classe.
‫E così, invece, quello che
‫faremo è copiare questo e definirlo effettivamente come un attributo di classe.
‫Ok, quindi è esattamente lo stesso.
‫Ma qui possiamo quindi usare
‫una stringa modello per poi riempirla qui.
‫Quindi io + 1.
‫Va bene, liberiamoci di questo.
‫E proviamolo.
‫Whoa, qualcosa non va qui.
‫Quindi, abbiamo le nostre immagini, ma non sembrano corrette.
‫Ma il nome della classe è effettivamente corretto.
‫E lo vedi anche qui applicato.
‫Ma per qualche ragione non ha trovato queste immagini.
‫O in realtà lo ha fatto.
‫Quaggiù dice di no.
‫Ah, ma queste sono in realtà altre immagini.
‫Ma questi sono alcuni altri che sono un po' più in basso.
‫Ad ogni modo, quello che immagino non sia corretto qui è che questa immagine dovrebbe
‫essere all'interno di questa scatola di immagini, e quindi immagino
‫che qualcosa nel nostro rientro qui sia sbagliato.
‫E sì, in effetti lo è.
‫Quindi vedi che questa immagine è allo stesso
‫livello di questo elemento div.
‫Quindi, ovviamente, c'è una rientranza mancante.
‫Va bene.
‫E quindi ora dovrebbe essere risolto.
‫E qui andiamo.
‫Va bene.
‫Quindi, solo per vedere che questo era il problema.
‫Ora in effetti l'immagine è all'interno della scatola delle immagini.
‫Così fantastico.
‫Il prossimo è la mappa.
‫Il che ricorda,
‫partirò per la prossima conferenza, così per ora possiamo preoccuparci di mettere le recensioni
‫del tour qui in questo elemento.
‫Va bene.
‫E così, di nuovo, ora passiamo a questa parte qui.
‫Ora, da dove provengono effettivamente queste recensioni.
‫Bene, ricorda come qui nel viewController abbiamo popolato
‫il campo delle
‫recensioni con i dati effettivi della recensione.
‫E quindi in questo momento abbiamo dei tour. recensioni, che è una serie di tutte
‫le recensioni.
‫E quindi, come probabilmente puoi
‫immaginare, ora creeremo un altro ciclo
‫proprio qui all'interno di questo elemento di recensione.
‫Quindi, ogni recensione in tour. recensioni.
‫E poi in ognuno di essi avremo questa scheda di revisione.
‫Va bene.
‫Questo qui è un
‫sacco di codice, che ci sta distraendo dal nostro contenuto principale.
‫E quindi cerchiamo di nuovo, in realtà, di creare un mixin qui.
‫Va bene.
‫Quindi, mettiamolo
‫qui in alto.
‫E vedrai perché in un secondo.
‫Quindi recensisciCard.
‫E qui passiamo la recensione stessa.
‫Va bene.
‫E ora abbiamo davvero bisogno di correggere queste rientranze.
‫E invece di farlo manualmente, ricorda, userò
‫quel pacchetto VS Code
‫che abbiamo.
‫E quindi comanda shift
‫p o control shift p su Windows e poi Beautify pug.
‫E così lo risolve.
‫E quindi ora dobbiamo creare
‫questa recensione qui in base ai dati.
‫Ma prima di farlo,
‫chiamiamo il mixin qui in ogni iterazione della recensione.
‫Quindi +reviewCard con la recensione attuale, giusto?
‫Quindi, diamo un'occhiata a come appare effettivamente
‫una recensione.
‫E abbiamo le recensioni qui.
‫Ma in effetti, non saranno
‫davvero utili perché l'utente non è popolato qui.
‫Quindi andiamo davvero da un postino
‫e diamo un'occhiata alle recensioni finali compilate lì dentro.
‫Quindi diciamo di avere una recensione in tour.
‫Perché quella sarà quindi una recensione completa.
‫Quindi abbiamo il campo della recensione, la valutazione e poi l'utente.
‫E ciò che ci interessa qui
‫è l'utente. nome e utente. foto.
‫Va bene, quindi il nome utente sarà rivisto. utente. nome.
‫Destra?
‫Quindi recensione. utente. nome.
‫E quindi tutto questo
‫è necessario perché ovviamente ora abbiamo più set
‫di dati correlati tra loro e quindi con la funzione popola ora
‫sono tutti annidati l'uno nell'altro.
‫Quindi usiamo anche qui il suo nome.
‫Va bene.
‫E poi qui
‫non useremo il suo nome.
‫Oh e
‫ho dimenticato l'interpolazione, e poi ecco la foto.
‫Va bene.
‫Qui sarà la descrizione.
‫E questa è in realtà una recensione. recensione, credo.
‫Quindi, sì.
‫Quindi recensione. recensione.
‫E questa è
‫la parte facile e la parte difficile successiva sarà visualizzare
‫la valutazione effettiva, perché dobbiamo visualizzare uno di questi
‫elementi qui per ciascuno del numero di stelle che ha la recensione.
‫Quindi una recensione a cinque stelle ha bisogno di tutte queste cinque stelle.
‫Ma una recensione a quattro stelle ne richiede solo quattro e
‫poi in più vogliamo anche una stella grigia.
‫Quindi praticamente per dire quattro su cinque, ok?
‫Ma diamo prima un'occhiata, se funziona davvero.
‫Quindi tutto tranne la valutazione.
‫Quindi ricarichiamo, e infatti, eccoci qui,
‫con gli utenti, quindi il nome e il testo della recensione stessa.
‫E ora ci occupiamo di visualizzare effettivamente
‫anche la valutazione.
‫Quindi quello che faremo qui è stampare la quantità
‫di stelle in un ciclo.
‫Quindi ci sono cinque possibili stelle e quindi
‫passiamo da uno a cinque.
‫Quindi in ogni stella testiamo se la
‫valutazione del tour è maggiore o uguale alla stella corrente.
‫E se è così, stampiamo una stella verde,
‫che sta per una vera stella.
‫E se no, è una stella grigia.
‫Quindi di nuovo, che è solo una stella inesistente.
‫Ad esempio, per mostrare tre su cinque, ok?
‫E probabilmente suona un po' astratto,
‫quindi implementiamolo.
‫Quindi ogni stella dentro.
‫E ora non abbiamo ancora un array, quindi
‫lo creiamo semplicemente.
‫Quindi 1, 2,
‫3, 4 e 5, che sono tutte le possibili stelle.
‫Avanti, copiamo questo qui.
‫E ora la differenza tra una stella verde e
‫una grigia è che il verde ha
‫il modificatore attivo qui e quello grigio ha inattivo.
‫E quindi lo cambieremo con una stringa modello, ok?
‫E quindi, proprio come prima, abbiamo effettivamente bisogno di questo
‫nome di classe come attributo di classe qui.
‫Va bene.
‫Allora dovrebbe esserci anche questo.
‫Eliminiamo questo.
‫E quindi ora facciamo quel test che abbiamo appena menzionato.
‫E ancora, il risultato sarà
‫che quest'anno sarà attivo o inattivo.
‫E quindi mettiamo un po' di JavaScript proprio a questo punto.
‫E quindi quello che faremo qui è testare
‫se la recensione. valutazione, che è dove
‫è memorizzata la valutazione, è maggiore
‫o uguale alla stella corrente.
‫Quindi in pratica stiamo scrivendo un operatore di tornitura qui.
‫E quindi se lo è, allora
‫qui vogliamo dire attivo e, in
‫caso contrario,
‫inattivo.
‫E questo sembra un po' strano, lo so.
‫Quindi cerchiamo di esemplificarlo con un semplice esempio.
‫Quindi diciamo che abbiamo tre stelle su cinque, ok?
‫Quindi nella prima iterazione, la stella è una.
‫E quindi uno è ovviamente meno di tre.
‫E quindi la prima stella dovrebbe, ovviamente, essere verde,
‫ed è per questo
‫che qui pubblichiamo active, che si tradurrà in review_star--active.
‫Va bene?
‫Poi la stessa cosa con la seconda e la terza stella.
‫Quindi a quel punto abbiamo tre stelle verdi.
‫Ma il quarto e il quinto dovrebbero essere grigi.
‫Va bene?
‫E così nella quarta iterazione qui la stella è quattro.
‫Quindi il test è tre maggiore di quattro?
‫No è falso e quindi è inattivo.
‫E quindi quella sarà una stella grigia, e la
‫stessa cosa per l'ultima, quindi la quinta stella.
‫Va bene, allora proviamolo.
‫E in realtà non possiamo testarlo qui, perché questo escursionista
‫della foresta ha una valutazione perfetta
‫di cinque su cinque e
‫quindi tutte le recensioni sono cinque stelle.
‫E quindi dobbiamo venire qui a tutti i tour.
‫E anche se questo collegamento non
‫funziona ancora, quindi vedi che viene modificato
‫solo in questo modo, questo hash qui.
‫E quindi andiamo rapidamente avanti e risolviamo il problema.
‫E questo è nell'intestazione, quindi proprio qui.
‫Ma non lo vogliamo.
‫Vogliamo semplicemente andare alla nostra pagina principale.
‫Quindi questo è solo lo slash.
‫Quindi ricarica.
‫E ora laggiù nel
‫link vedi che è esattamente quello che abbiamo.
‫E così in effetti, torniamo alla nostra pagina di panoramica.
‫Quindi andiamo a una pagina con una media inferiore.
‫E quindi questo è l'amante dello sport.
‫Vediamo.
‫E ovviamente vedi che
‫tutti i dati ora sono corretti per questo tour specifico.
‫Quindi di nuovo vedi questo 3. 9 nella media.
‫Vedi tutte queste
‫diverse guide turistiche, le diverse immagini e
‫vedi tutte le recensioni.
‫E vedi anche che le stelle funzionano davvero.
‫Quindi questa prima recensione è una recensione a cinque stelle.
‫E così vedi cinque, quattro, uno e
‫poi un mucchio di recensioni a quattro stelle quaggiù.
‫Ok, quindi, questa parte è stata un po'
‫più confusa, ma siamo comunque riusciti a farlo funzionare, giusto?
‫Ora una cosa che volevo mostrarti è che possiamo effettivamente
‫anche esportare, fondamentalmente un
‫mixin nel suo file separato.
‫Quindi copiamo questo e creiamo un nuovo
‫mixin qui, o
‫in realtà un nuovo file.
‫E quindi poiché lo includeremo
‫di nuovo, lo premetterò di nuovo con questo carattere di sottolineatura.
‫E chiamiamola reviewCard. carlino.
‫Quindi incollalo qui.
‫E tutto il rientro
‫è ancora corretto, e ora tutto ciò
‫che dobbiamo fare è dire, includi
‫_reviewCard.
‫E quindi, se
‫lo proviamo ora, dovrebbe funzionare ancora, cosa che fa.
‫Va bene.
‫Quindi abbiamo scritto
‫molto codice finora e abbiamo quasi finito.
‫Tutto ciò che resta da fare è questa sezione di invito all'azione.
‫E qui tutto ciò che dobbiamo veramente cambiare
‫è questa durata qui.
‫Quindi abbiamo questo simpatico slogan
‫tipo, 10 giorni.
‫1 avventura.
‫Ricordi infiniti.
‫Va bene?
‫Ma in realtà dobbiamo sostituire
‫il numero di giorni in modo che sia corretto per questo particolare tour.
‫Quindi creiamo una stringa modello per questo.
‫Quindi tour. durata.
‫E poi anche qui abbiamo alcune delle immagini del tour, ok?
‫Quindi facciamolo anche noi.
‫Quindi questa è l'immagine. tour, o /tours
‫e poi slash tour. immagini.
‫E ricorda che
‫questo è un array e userò semplicemente il primo e il secondo elemento.
‫O in realtà il secondo e il terzo perché ho scoperto
‫che questi di solito
‫sembrano un po' migliori nella situazione.
‫Quindi,
‫copiamo quello.
‫Mettilo qui.
‫Oh, e qui ci manca la parentesi di chiusura.
‫E aggiungiamo solo del testo alternativo.
‫Foto del tour.
‫Va bene.
‫E penso che sia davvero così.
‫Quindi solo un ultimo tentativo.
‫Vedi che qui è vuoto adesso.
‫Ma ora, in effetti, abbiamo le stesse
‫immagini qui.
‫Quindi questo dovrebbe essere il numero due.
‫Ma ancora, ora dice
‫14 giorni, e quindi tutto questo è corretto ora.
‫Stupendo.
‫È fantastico.
‫È stato un sacco di
‫lavoro, ma penso che sia stato davvero ripagato.
‫Questa pagina, penso sia assolutamente fantastica.
‫È davvero sbalorditivo.
‫E così ora tutto è connesso.
‫Quindi in ogni tour possiamo tornare
‫a tutti i tour e dare un'occhiata a tutti gli altri.
‫Vediamo il camper del parco.
‫Il tour in camper del parco.
‫Tutti i dettagli.
‫Tutte le diverse guide,
‫immagini, le loro recensioni e in effetti queste diverse immagini.
‫Grande.
‫Quindi vedete questo buco vuoto qui al centro della nostra pagina.
‫Ed ecco dove sarà la prossima mappa,
‫e quindi facciamolo,
‫proprio ora nella prossima lezione.