1 00:00:01,100 --> 00:00:03,200 ‫All right, this is part two 2 00:00:03,200 --> 00:00:05,313 ‫of Building the Tour Page Detail Page. 3 00:00:06,670 --> 00:00:08,820 ‫And we left off the last video 4 00:00:08,820 --> 00:00:11,630 ‫after building this Quick Facts part here 5 00:00:11,630 --> 00:00:14,130 ‫using some mixins, right? 6 00:00:14,130 --> 00:00:16,550 ‫And so next up it's time to build 7 00:00:16,550 --> 00:00:19,010 ‫this part here of the guides. 8 00:00:19,010 --> 00:00:21,550 ‫Now we don't know beforehand how many tour guides 9 00:00:21,550 --> 00:00:23,950 ‫there actually are on each tour. 10 00:00:23,950 --> 00:00:26,150 ‫And so just like on the overview page, 11 00:00:26,150 --> 00:00:27,930 ‫here we need to have another loop 12 00:00:27,930 --> 00:00:30,260 ‫to basically loop through all the guides 13 00:00:30,260 --> 00:00:32,423 ‫that are associated with a certain tour. 14 00:00:34,030 --> 00:00:36,220 ‫So, let's do that. 15 00:00:36,220 --> 00:00:39,900 ‫And right now we actually have these three elements. 16 00:00:39,900 --> 00:00:43,210 ‫So these three box, one for each guide. 17 00:00:43,210 --> 00:00:47,570 ‫But as we just said, that's not how we want it to work. 18 00:00:47,570 --> 00:00:51,970 ‫So let's get rid of these two and then create a loop here, 19 00:00:51,970 --> 00:00:55,210 ‫which in each iteration will create a box, 20 00:00:55,210 --> 00:00:57,620 ‫so an element like this. 21 00:00:57,620 --> 00:00:59,553 ‫And that should be fairly easy. 22 00:01:00,460 --> 00:01:01,880 ‫So again, we use each 23 00:01:03,890 --> 00:01:06,923 ‫and then the name of the variable in the current iteration, 24 00:01:08,505 --> 00:01:11,580 ‫in, and then the array that we want to loop through. 25 00:01:11,580 --> 00:01:14,933 ‫And so that's tour.guides. 26 00:01:16,980 --> 00:01:18,230 ‫Right? 27 00:01:18,230 --> 00:01:19,063 ‫So, 28 00:01:20,080 --> 00:01:20,913 ‫where is that? 29 00:01:23,540 --> 00:01:26,620 ‫Yeah, so here is our array of guides. 30 00:01:26,620 --> 00:01:29,810 ‫Which of course, in the database will then be populated 31 00:01:29,810 --> 00:01:34,393 ‫with the corresponding users and not just the IDs, right? 32 00:01:35,260 --> 00:01:37,803 ‫So now we need to indent all of this here. 33 00:01:38,902 --> 00:01:40,350 ‫And so each of these guides here 34 00:01:40,350 --> 00:01:43,220 ‫will basically be a user document. 35 00:01:43,220 --> 00:01:46,010 ‫So let's quickly check that out in Compass 36 00:01:46,010 --> 00:01:50,560 ‫because we don't have that kind of data in our JSON document 37 00:01:50,560 --> 00:01:53,390 ‫because, of course, the population only happens 38 00:01:53,390 --> 00:01:57,520 ‫behind the scenes using Mongos, right? 39 00:01:57,520 --> 00:01:59,600 ‫So each of the guides is a user. 40 00:01:59,600 --> 00:02:03,573 ‫And so what we want is the name and the photo. 41 00:02:06,100 --> 00:02:09,893 ‫So here we want the photo, of course. 42 00:02:10,890 --> 00:02:12,140 ‫Which is, in this page, 43 00:02:12,140 --> 00:02:16,683 ‫at images/users and then the name of the user photo. 44 00:02:20,180 --> 00:02:22,850 ‫So guide.photo. 45 00:02:22,850 --> 00:02:25,350 ‫Which is here, again, the variable name 46 00:02:25,350 --> 00:02:27,540 ‫in the current iteration. 47 00:02:27,540 --> 00:02:30,130 ‫Then here I don't know why it says Lead guide, 48 00:02:30,130 --> 00:02:33,223 ‫but let's actually put the name of the person here. 49 00:02:37,030 --> 00:02:39,520 ‫So guide.name. 50 00:02:39,520 --> 00:02:42,713 ‫Then here we want the guide's name again, 51 00:02:45,997 --> 00:02:46,850 ‫.name. 52 00:02:46,850 --> 00:02:49,330 ‫And then we also want the label. 53 00:02:49,330 --> 00:02:50,940 ‫And so basically that will be 54 00:02:50,940 --> 00:02:53,060 ‫Lead guide when it's lead guide 55 00:02:53,060 --> 00:02:56,810 ‫and simply tour guide when it's a regular guide. 56 00:02:56,810 --> 00:02:58,270 ‫Now let me show you what happens 57 00:02:58,270 --> 00:03:00,223 ‫when we just put the role here. 58 00:03:02,300 --> 00:03:04,830 ‫So remember that role is the property 59 00:03:04,830 --> 00:03:07,040 ‫where we say if a user is a guide 60 00:03:07,040 --> 00:03:09,333 ‫or a lead guide or even an admin. 61 00:03:10,430 --> 00:03:11,450 ‫Okay? 62 00:03:11,450 --> 00:03:14,030 ‫So, again, let's for now see what happens 63 00:03:14,030 --> 00:03:16,130 ‫when we just put it like this. 64 00:03:16,130 --> 00:03:19,963 ‫And with that we should be ready to actually test it. 65 00:03:21,450 --> 00:03:23,030 ‫Let's give it a save. 66 00:03:23,030 --> 00:03:24,700 ‫And here we go. 67 00:03:24,700 --> 00:03:27,800 ‫So we have the three photos, the names, 68 00:03:27,800 --> 00:03:30,440 ‫but then here the guide role 69 00:03:30,440 --> 00:03:33,020 ‫doesn't really look good, right? 70 00:03:33,020 --> 00:03:37,640 ‫So remember how, in fact, we want to say lead guide 71 00:03:37,640 --> 00:03:38,883 ‫and tour guide. 72 00:03:39,930 --> 00:03:43,270 ‫Okay, and so now it's time to use a conditional. 73 00:03:43,270 --> 00:03:46,080 ‫Now pug actually has conditionals built in, 74 00:03:46,080 --> 00:03:48,390 ‫but they are really simple and we can't 75 00:03:48,390 --> 00:03:50,020 ‫do a lot of stuff with them. 76 00:03:50,020 --> 00:03:52,240 ‫For example, they don't even allow us 77 00:03:52,240 --> 00:03:54,990 ‫to test for equality, for example. 78 00:03:54,990 --> 00:03:56,520 ‫But, the good thing is that we can 79 00:03:56,520 --> 00:03:58,813 ‫actually still use JavaScript for that. 80 00:03:59,770 --> 00:04:03,190 ‫And so again, we use some unbuffered code for that. 81 00:04:03,190 --> 00:04:05,730 ‫So with the dash syntax and then we can 82 00:04:05,730 --> 00:04:08,023 ‫use a regular JavaScript if here. 83 00:04:08,890 --> 00:04:12,180 ‫So again, as if we were just writing JavaScript. 84 00:04:12,180 --> 00:04:16,340 ‫And so guide.role and now we can test and say 85 00:04:16,340 --> 00:04:19,873 ‫if it's a lead-guide. 86 00:04:22,130 --> 00:04:24,340 ‫Well then here we want to say 87 00:04:27,330 --> 00:04:28,753 ‫Lead guide, okay? 88 00:04:32,309 --> 00:04:33,980 ‫And let's put another one here 89 00:04:33,980 --> 00:04:37,320 ‫and say if the role is just guide, 90 00:04:37,320 --> 00:04:40,690 ‫well, then we want Tour guide. 91 00:04:40,690 --> 00:04:44,660 ‫And so this is how we use a JavaScript if write inside 92 00:04:44,660 --> 00:04:48,823 ‫of pug and then combine it with a pug output like this. 93 00:04:50,237 --> 00:04:51,320 ‫All right? 94 00:04:51,320 --> 00:04:53,720 ‫So, let's see. 95 00:04:53,720 --> 00:04:56,333 ‫And indeed, that is much nicer. 96 00:04:58,660 --> 00:04:59,830 ‫Okay. 97 00:04:59,830 --> 00:05:03,350 ‫Let's get rid of this empty space here 98 00:05:03,350 --> 00:05:05,200 ‫and move on to the next one, 99 00:05:05,200 --> 00:05:06,883 ‫which is the description box. 100 00:05:07,870 --> 00:05:09,750 ‫So first up here in the heading 101 00:05:09,750 --> 00:05:12,320 ‫we actually also have the name of the tour. 102 00:05:12,320 --> 00:05:14,250 ‫So this here is the name of the tour, 103 00:05:14,250 --> 00:05:16,310 ‫and so let's create a template string, 104 00:05:16,310 --> 00:05:21,220 ‫and in there let's put tour.name. 105 00:05:23,770 --> 00:05:25,070 ‫I thought that would work. 106 00:05:26,870 --> 00:05:27,750 ‫But it doesn't. 107 00:05:27,750 --> 00:05:29,250 ‫This only works in JavaScript. 108 00:05:30,650 --> 00:05:33,040 ‫Okay, and actually I just remembered 109 00:05:33,040 --> 00:05:38,040 ‫that we also want to have the tour right in the main title. 110 00:05:38,600 --> 00:05:42,573 ‫So, right here actually. 111 00:05:44,420 --> 00:05:45,983 ‫Okay, so let's do that. 112 00:05:51,040 --> 00:05:51,873 ‫Okay. 113 00:05:53,200 --> 00:05:55,500 ‫But anyway, let's move down here 114 00:05:56,550 --> 00:05:59,010 ‫and create these paragraphs. 115 00:05:59,010 --> 00:06:00,670 ‫Now as you see we actually have 116 00:06:00,670 --> 00:06:04,090 ‫two paragraphs here for this text. 117 00:06:04,090 --> 00:06:06,950 ‫So let's just take a look at how we have it here 118 00:06:06,950 --> 00:06:08,230 ‫in the description. 119 00:06:08,230 --> 00:06:12,200 ‫And as you see, we of course only have one big string. 120 00:06:12,200 --> 00:06:14,560 ‫But we have it in the middle divided 121 00:06:14,560 --> 00:06:16,460 ‫with these new line characters. 122 00:06:16,460 --> 00:06:17,293 ‫All right? 123 00:06:17,293 --> 00:06:20,230 ‫And so what we're gonna do is to split the string 124 00:06:20,230 --> 00:06:21,743 ‫by the new line character. 125 00:06:23,550 --> 00:06:24,750 ‫Okay? 126 00:06:24,750 --> 00:06:26,923 ‫So that's easy, right? 127 00:06:29,330 --> 00:06:32,743 ‫So, unbuffered code to write JavaScript. 128 00:06:35,340 --> 00:06:39,910 ‫Paragraphs equals tour.description.split 129 00:06:45,080 --> 00:06:46,853 ‫by the new line character. 130 00:06:47,880 --> 00:06:50,400 ‫And so this will now create an array. 131 00:06:50,400 --> 00:06:52,460 ‫So paragraphs is an array, 132 00:06:52,460 --> 00:06:55,893 ‫where each of the element is basically one paragraph. 133 00:06:56,950 --> 00:06:57,840 ‫Okay? 134 00:06:57,840 --> 00:07:00,130 ‫And so now all we need to do is to loop 135 00:07:00,130 --> 00:07:03,940 ‫through all of these paragraphs and print their content. 136 00:07:03,940 --> 00:07:06,520 ‫So each p, let's say, 137 00:07:06,520 --> 00:07:10,280 ‫in paragraphs will be p.description_text 138 00:07:13,870 --> 00:07:17,063 ‫equal to the current paragraph, which is p. 139 00:07:20,920 --> 00:07:22,343 ‫So, simple right? 140 00:07:23,490 --> 00:07:24,653 ‫Let's check that out. 141 00:07:27,560 --> 00:07:30,160 ‫And we cannot really see if it's different 142 00:07:30,160 --> 00:07:32,870 ‫because I just used this blind text here. 143 00:07:32,870 --> 00:07:34,760 ‫But I can tell you that this here 144 00:07:34,760 --> 00:07:36,340 ‫should be the correct text. 145 00:07:36,340 --> 00:07:38,630 ‫And if we go to the forest hiker tour, 146 00:07:38,630 --> 00:07:39,880 ‫actually here in Compass, 147 00:07:42,320 --> 00:07:43,620 ‫so where is that? 148 00:07:45,370 --> 00:07:46,480 ‫Right here. 149 00:07:46,480 --> 00:07:48,613 ‫So if we go here to the description 150 00:07:49,637 --> 00:07:51,173 ‫and try to edit that, 151 00:07:53,140 --> 00:07:58,140 ‫so let's just add another new line character here. 152 00:07:58,660 --> 00:08:03,460 ‫Then let's update and then we should see a new paragraph 153 00:08:03,460 --> 00:08:05,460 ‫popping up somewhere here. 154 00:08:05,460 --> 00:08:07,090 ‫Let's change that. 155 00:08:07,090 --> 00:08:09,143 ‫And that didn't go so well. 156 00:08:09,143 --> 00:08:10,800 ‫I'm not sure why. 157 00:08:10,800 --> 00:08:12,680 ‫I never tried to do it, 158 00:08:12,680 --> 00:08:16,560 ‫so what I just did was the first time that I tried it. 159 00:08:16,560 --> 00:08:19,875 ‫So I'm not sure what went wrong here. 160 00:08:19,875 --> 00:08:23,860 ‫Maybe we really just need to create a new line 161 00:08:23,860 --> 00:08:25,190 ‫by hitting enter, 162 00:08:25,190 --> 00:08:28,910 ‫but that didn't really work out either. 163 00:08:28,910 --> 00:08:30,550 ‫So let's see if we actually have 164 00:08:30,550 --> 00:08:32,223 ‫the new line character here. 165 00:08:33,460 --> 00:08:35,360 ‫And maybe it's this one here. 166 00:08:35,360 --> 00:08:38,723 ‫Well, but never mind, just trust me on this. 167 00:08:41,450 --> 00:08:43,610 ‫And now our new line is still there, 168 00:08:43,610 --> 00:08:44,833 ‫what's happening? 169 00:08:49,740 --> 00:08:52,463 ‫All right, here we go, let's update it. 170 00:08:57,830 --> 00:09:01,460 ‫All right, now our other new line that we had here before 171 00:09:01,460 --> 00:09:04,440 ‫also kind of disappeared, but never mind. 172 00:09:04,440 --> 00:09:05,920 ‫I guess I just shouldn't have used 173 00:09:05,920 --> 00:09:09,430 ‫Compass in order to edit this text here. 174 00:09:09,430 --> 00:09:10,690 ‫Okay? 175 00:09:10,690 --> 00:09:13,630 ‫Anyway, let's now move on to the images. 176 00:09:13,630 --> 00:09:15,960 ‫And right now we don't see them here, 177 00:09:15,960 --> 00:09:19,710 ‫but this is how it's supposed to look like, okay? 178 00:09:19,710 --> 00:09:21,410 ‫So we have three images here 179 00:09:21,410 --> 00:09:23,603 ‫displaying side-by-side like this. 180 00:09:24,670 --> 00:09:28,390 ‫And so these are actually the images that are 181 00:09:29,690 --> 00:09:31,530 ‫somewhere here. 182 00:09:31,530 --> 00:09:33,670 ‫So yeah, in the images field 183 00:09:33,670 --> 00:09:36,800 ‫we have this array of these three images. 184 00:09:36,800 --> 00:09:39,160 ‫So once more we're going to use a loop 185 00:09:40,120 --> 00:09:42,360 ‫in order to loop through them. 186 00:09:42,360 --> 00:09:43,933 ‫So, simple enough. 187 00:09:44,890 --> 00:09:49,890 ‫So, each image in tour.images. 188 00:09:51,190 --> 00:09:54,423 ‫And so for each of them we want to create this. 189 00:09:56,690 --> 00:09:58,703 ‫So here the source. 190 00:10:00,680 --> 00:10:03,963 ‫And that's image/tours, actually. 191 00:10:07,800 --> 00:10:10,360 ‫And then the name of the current image, 192 00:10:10,360 --> 00:10:13,730 ‫which is image of course. 193 00:10:13,730 --> 00:10:15,760 ‫And then here in the alt text we have 194 00:10:15,760 --> 00:10:17,500 ‫actually the number of the tour, 195 00:10:17,500 --> 00:10:21,700 ‫and more importantly also here in the CSS class name. 196 00:10:21,700 --> 00:10:23,250 ‫And so you see that the next one 197 00:10:23,250 --> 00:10:25,693 ‫has that image two and image three. 198 00:10:26,750 --> 00:10:27,940 ‫Okay? 199 00:10:27,940 --> 00:10:29,900 ‫So how are we going to do that? 200 00:10:29,900 --> 00:10:32,250 ‫Well, in a pug loop we can 201 00:10:32,250 --> 00:10:34,350 ‫actually define a second variable. 202 00:10:34,350 --> 00:10:37,723 ‫And that second variable is then going to be the index. 203 00:10:38,880 --> 00:10:41,280 ‫So let's call that i, very simply. 204 00:10:41,280 --> 00:10:43,750 ‫And so that is a zero-based index, 205 00:10:43,750 --> 00:10:46,660 ‫which is going to be zero for the first element 206 00:10:46,660 --> 00:10:49,023 ‫and one and two for the other two elements. 207 00:10:49,890 --> 00:10:53,233 ‫And so let's first start by putting that there. 208 00:10:58,360 --> 00:11:02,460 ‫So that is i, which is the index, plus 1, 209 00:11:02,460 --> 00:11:05,560 ‫because we want this to be 1 and not zero. 210 00:11:05,560 --> 00:11:07,940 ‫And now this part here is a bit trickier, 211 00:11:07,940 --> 00:11:11,420 ‫because we cannot use this syntax, 212 00:11:11,420 --> 00:11:14,580 ‫and we can also not use the other interpolation syntax 213 00:11:14,580 --> 00:11:16,330 ‫right here in the class name. 214 00:11:16,330 --> 00:11:20,270 ‫And so instead what we're going to do is to copy this, 215 00:11:20,270 --> 00:11:23,143 ‫and actually define it as a class attribute. 216 00:11:25,610 --> 00:11:28,140 ‫Okay, and so that is exactly the same. 217 00:11:28,140 --> 00:11:30,860 ‫But here we can then use a template string 218 00:11:30,860 --> 00:11:33,363 ‫in order to then fill that one here. 219 00:11:34,870 --> 00:11:37,393 ‫So i + 1. 220 00:11:39,360 --> 00:11:41,990 ‫All right, let's get rid of this. 221 00:11:46,222 --> 00:11:47,122 ‫And let's test it. 222 00:11:49,420 --> 00:11:51,473 ‫Whoa, something's not right here. 223 00:11:53,490 --> 00:11:57,450 ‫So, we have our images, but they do not look correct. 224 00:11:57,450 --> 00:11:59,850 ‫But the class name is actually right. 225 00:11:59,850 --> 00:12:02,010 ‫And also you see it here applied. 226 00:12:02,010 --> 00:12:05,990 ‫But for some reason it didn't find these images. 227 00:12:05,990 --> 00:12:07,940 ‫Or actually it did. 228 00:12:07,940 --> 00:12:10,150 ‫Down here it says that it didn't. 229 00:12:10,150 --> 00:12:12,057 ‫Ah, but these are actually other images. 230 00:12:12,057 --> 00:12:16,460 ‫But these are some other ones that are a bit further down. 231 00:12:16,460 --> 00:12:19,590 ‫Anyway, what I guess is not correct here 232 00:12:19,590 --> 00:12:22,340 ‫is that this image should be inside of this picture box, 233 00:12:22,340 --> 00:12:26,690 ‫and so I guess something in our indentation here is wrong. 234 00:12:26,690 --> 00:12:29,681 ‫And yeah, indeed that is. 235 00:12:29,681 --> 00:12:32,040 ‫So you see this image is at the same level 236 00:12:32,040 --> 00:12:33,820 ‫as this div element. 237 00:12:33,820 --> 00:12:36,613 ‫So of course, there is a missing indentation. 238 00:12:38,090 --> 00:12:38,930 ‫All right. 239 00:12:38,930 --> 00:12:40,530 ‫And so that should now be fixed. 240 00:12:43,470 --> 00:12:44,973 ‫And here we go. 241 00:12:46,100 --> 00:12:47,050 ‫All right. 242 00:12:47,050 --> 00:12:49,973 ‫So that, just to see that this was the problem. 243 00:12:51,316 --> 00:12:53,916 ‫Now indeed the picture is inside of the picture box. 244 00:12:55,380 --> 00:12:56,580 ‫So great. 245 00:12:56,580 --> 00:12:57,720 ‫Next up is the map. 246 00:12:57,720 --> 00:13:02,170 ‫Which remember, I'm going to leave for the next lecture, 247 00:13:02,170 --> 00:13:04,330 ‫so that for now we can worry about 248 00:13:04,330 --> 00:13:08,140 ‫putting the tour reviews here in this element. 249 00:13:08,140 --> 00:13:09,600 ‫Okay. 250 00:13:09,600 --> 00:13:14,190 ‫And so, again, we're now moving on to this part here. 251 00:13:14,190 --> 00:13:16,953 ‫Now where are these reviews actually coming from. 252 00:13:17,810 --> 00:13:19,140 ‫Well, remember how here 253 00:13:19,140 --> 00:13:21,390 ‫in the viewController we did populate 254 00:13:21,390 --> 00:13:24,410 ‫the reviews field with the actual review data. 255 00:13:24,410 --> 00:13:27,420 ‫And so right now we have tours.reviews, 256 00:13:27,420 --> 00:13:29,766 ‫which is an array of all the reviews. 257 00:13:29,766 --> 00:13:32,320 ‫And so as you can probably guess, 258 00:13:32,320 --> 00:13:35,460 ‫we are now going to create yet another loop 259 00:13:35,460 --> 00:13:37,763 ‫right here inside this review element. 260 00:13:39,640 --> 00:13:44,640 ‫So, each review in tour.reviews. 261 00:13:47,670 --> 00:13:52,670 ‫And then in each of them we will have this review card. 262 00:13:53,150 --> 00:13:54,150 ‫All right. 263 00:13:54,150 --> 00:13:56,460 ‫Now this here is a lot of code, 264 00:13:56,460 --> 00:13:59,870 ‫which is kind of distracting us here from our main content. 265 00:13:59,870 --> 00:14:02,943 ‫And so let's again, actually create a mixin here. 266 00:14:04,550 --> 00:14:05,383 ‫All right. 267 00:14:06,630 --> 00:14:07,780 ‫So, 268 00:14:07,780 --> 00:14:09,230 ‫let's put it here at the top. 269 00:14:11,040 --> 00:14:12,590 ‫And you'll see why in a second. 270 00:14:14,080 --> 00:14:15,520 ‫So reviewCard. 271 00:14:16,760 --> 00:14:20,193 ‫And in here we pass the review itself. 272 00:14:21,480 --> 00:14:22,330 ‫All right. 273 00:14:22,330 --> 00:14:25,330 ‫And now we actually need to fix these indentations. 274 00:14:25,330 --> 00:14:26,870 ‫And instead of doing it manually, 275 00:14:26,870 --> 00:14:28,370 ‫remember, I'm going to use 276 00:14:28,370 --> 00:14:30,610 ‫that VS Code package that we have. 277 00:14:30,610 --> 00:14:35,230 ‫And so command shift p or control shift p on Windows 278 00:14:35,230 --> 00:14:37,193 ‫and then Beautify pug. 279 00:14:38,580 --> 00:14:41,110 ‫And so that fixes it. 280 00:14:41,110 --> 00:14:43,960 ‫And so now we need to create this review here 281 00:14:43,960 --> 00:14:45,540 ‫based on the data. 282 00:14:45,540 --> 00:14:48,790 ‫But before we do that, let's actually call the mixin here 283 00:14:48,790 --> 00:14:50,890 ‫in each iteration of the review. 284 00:14:50,890 --> 00:14:55,890 ‫So +reviewCard with the current review, right? 285 00:15:01,030 --> 00:15:03,090 ‫So, let's just take a look at what 286 00:15:03,090 --> 00:15:05,970 ‫a review actually looks like. 287 00:15:05,970 --> 00:15:07,820 ‫And we have the reviews here. 288 00:15:07,820 --> 00:15:10,140 ‫But indeed, they will not be really useful 289 00:15:10,140 --> 00:15:12,773 ‫because the user is not populated here. 290 00:15:13,860 --> 00:15:17,160 ‫So let's actually go to a Postman 291 00:15:17,160 --> 00:15:21,830 ‫and take a look at the final populated reviews in there. 292 00:15:21,830 --> 00:15:24,923 ‫So let's say get review on tour. 293 00:15:29,250 --> 00:15:32,170 ‫Because that will then be a complete review. 294 00:15:32,170 --> 00:15:35,890 ‫So we have the review field, the rating, and then the user. 295 00:15:35,890 --> 00:15:37,370 ‫And what we're interested in here 296 00:15:37,370 --> 00:15:40,593 ‫is then user.name and user.photo. 297 00:15:41,440 --> 00:15:45,973 ‫All right, and so the username will be review.user.name. 298 00:15:48,010 --> 00:15:48,843 ‫Right? 299 00:15:51,130 --> 00:15:55,830 ‫So review.user.name. 300 00:15:55,830 --> 00:15:58,490 ‫And so all of this is necessary because of course 301 00:15:58,490 --> 00:16:02,340 ‫we have now multiple datasets related to one each other 302 00:16:02,340 --> 00:16:04,050 ‫and so with the populate function 303 00:16:04,050 --> 00:16:07,850 ‫they are all now kind of nested one into each other. 304 00:16:07,850 --> 00:16:11,413 ‫So let's use his name here as well. 305 00:16:18,110 --> 00:16:19,080 ‫All right. 306 00:16:19,080 --> 00:16:20,130 ‫And then here 307 00:16:23,240 --> 00:16:24,940 ‫we will not use his name. 308 00:16:24,940 --> 00:16:29,790 ‫Oh and I forgot the interpolation, 309 00:16:29,790 --> 00:16:32,683 ‫and then here it's the photo. 310 00:16:33,554 --> 00:16:34,387 ‫All right. 311 00:16:34,387 --> 00:16:37,063 ‫Here it's going to be the description. 312 00:16:39,350 --> 00:16:43,113 ‫And that's actually review.review, I believe. 313 00:16:45,390 --> 00:16:46,790 ‫So, yeah. 314 00:16:46,790 --> 00:16:48,980 ‫So review.review. 315 00:16:48,980 --> 00:16:52,510 ‫And this is the easy part and the hard part next 316 00:16:52,510 --> 00:16:55,760 ‫is going to be to display the actual rating, 317 00:16:55,760 --> 00:16:59,610 ‫because we have to display one of these elements here 318 00:16:59,610 --> 00:17:02,730 ‫for each of the number of stars that the review has. 319 00:17:02,730 --> 00:17:06,330 ‫So a five-star review needs all of these five stars. 320 00:17:06,330 --> 00:17:09,130 ‫But a four-star review only needs four of them 321 00:17:09,130 --> 00:17:12,420 ‫and then plus that we also want a gray star. 322 00:17:12,420 --> 00:17:15,860 ‫So basically to say four out of five, okay? 323 00:17:15,860 --> 00:17:18,993 ‫But let's first take a look, if this is actually working. 324 00:17:19,900 --> 00:17:21,993 ‫So everything except the rating. 325 00:17:23,500 --> 00:17:27,290 ‫So let's reload, and indeed, here we are, 326 00:17:27,290 --> 00:17:31,680 ‫with the users, then name, and the review text itself. 327 00:17:31,680 --> 00:17:34,190 ‫And let's now take care of actually displaying 328 00:17:34,190 --> 00:17:36,550 ‫the rating as well. 329 00:17:36,550 --> 00:17:38,270 ‫So what we're gonna do here is 330 00:17:38,270 --> 00:17:40,880 ‫to print the amount of stars in a loop. 331 00:17:40,880 --> 00:17:42,920 ‫So there are five possible stars 332 00:17:42,920 --> 00:17:45,660 ‫and so we loop from one to five. 333 00:17:45,660 --> 00:17:49,270 ‫Then in each star we test if the tour rating 334 00:17:49,270 --> 00:17:52,260 ‫is higher or equal to the current star. 335 00:17:52,260 --> 00:17:54,630 ‫And if so, we print a green star, 336 00:17:54,630 --> 00:17:56,540 ‫which stands for an actual star. 337 00:17:56,540 --> 00:17:58,600 ‫And if not, it is a gray star. 338 00:17:58,600 --> 00:18:01,700 ‫So again, which is just an inexistent star. 339 00:18:01,700 --> 00:18:06,120 ‫For example, to show three out of five, okay? 340 00:18:06,120 --> 00:18:08,130 ‫And that probably sounds a bit abstract, 341 00:18:08,130 --> 00:18:10,261 ‫so let's just implement it. 342 00:18:10,261 --> 00:18:15,261 ‫So each star in. 343 00:18:15,580 --> 00:18:17,500 ‫And now we don't have an array yet, 344 00:18:17,500 --> 00:18:19,000 ‫and so we simply create it. 345 00:18:19,000 --> 00:18:23,240 ‫So 1, 2, 3, 4, and 5, 346 00:18:23,240 --> 00:18:25,003 ‫which are all the possible stars. 347 00:18:27,510 --> 00:18:31,160 ‫Next up, let's copy this here. 348 00:18:31,160 --> 00:18:34,380 ‫And now the difference between a green star and a gray one 349 00:18:34,380 --> 00:18:38,210 ‫is that the green has the active modifier here, 350 00:18:38,210 --> 00:18:40,600 ‫and the gray one has inactive. 351 00:18:40,600 --> 00:18:44,280 ‫And so we will change that with a template string, okay? 352 00:18:44,280 --> 00:18:47,880 ‫And so just like before, we actually need this class name 353 00:18:47,880 --> 00:18:51,443 ‫as a class attribute here. 354 00:18:53,850 --> 00:18:54,683 ‫All right. 355 00:18:56,830 --> 00:18:58,470 ‫Then this should also be here. 356 00:18:58,470 --> 00:18:59,743 ‫Let's get rid of this. 357 00:19:02,630 --> 00:19:05,570 ‫And so now let's do that test that we just mentioned. 358 00:19:05,570 --> 00:19:08,650 ‫And again, the output of that will be that this year 359 00:19:08,650 --> 00:19:10,770 ‫is either active or inactive. 360 00:19:10,770 --> 00:19:14,083 ‫And so let's put some JavaScript right at this point. 361 00:19:16,360 --> 00:19:18,090 ‫And so what we're going to do here 362 00:19:18,090 --> 00:19:22,130 ‫is to test if the review.rating, 363 00:19:22,130 --> 00:19:23,930 ‫which is where the rating is stored, 364 00:19:25,230 --> 00:19:28,483 ‫is greater or equal than the current star. 365 00:19:30,010 --> 00:19:33,810 ‫So basically we're writing a turnery operator here. 366 00:19:33,810 --> 00:19:37,233 ‫And so if it is, then here we want to say, 367 00:19:38,640 --> 00:19:40,210 ‫active, 368 00:19:40,210 --> 00:19:41,063 ‫and if not, 369 00:19:43,450 --> 00:19:44,653 ‫then inactive. 370 00:19:46,370 --> 00:19:49,790 ‫And this looks kind of weird, I know. 371 00:19:49,790 --> 00:19:53,530 ‫So let's just exemplify that with a simple example. 372 00:19:53,530 --> 00:19:58,530 ‫So let's say that we have three stars out of five, okay? 373 00:19:58,660 --> 00:20:02,212 ‫So in the first iteration, star is one. 374 00:20:02,212 --> 00:20:06,330 ‫And so one is of course less than three. 375 00:20:06,330 --> 00:20:08,630 ‫And so the first star should, of course, 376 00:20:08,630 --> 00:20:12,360 ‫be a green one, and so that's why here we put out active, 377 00:20:12,360 --> 00:20:16,610 ‫which will then result in reviews_star--active. 378 00:20:16,610 --> 00:20:17,443 ‫Okay? 379 00:20:17,443 --> 00:20:20,910 ‫Then the same thing with the second and the third star. 380 00:20:20,910 --> 00:20:23,320 ‫So at that point we have three green stars. 381 00:20:23,320 --> 00:20:26,410 ‫But the fourth and the fifth one should be gray. 382 00:20:26,410 --> 00:20:27,243 ‫Okay? 383 00:20:27,243 --> 00:20:30,270 ‫And so in the fourth iteration here star is four. 384 00:20:30,270 --> 00:20:33,580 ‫So the test is is three greater than four? 385 00:20:33,580 --> 00:20:36,350 ‫No it's false and so it's inactive. 386 00:20:36,350 --> 00:20:38,820 ‫And so that will then be a gray star, 387 00:20:38,820 --> 00:20:42,683 ‫and the same thing for the last, so the fifth star. 388 00:20:43,720 --> 00:20:47,200 ‫All right, so let's test that. 389 00:20:47,200 --> 00:20:49,480 ‫And actually we cannot test it here, 390 00:20:49,480 --> 00:20:51,410 ‫because this forest hiker 391 00:20:51,410 --> 00:20:53,900 ‫has a perfect five out of five rating 392 00:20:53,900 --> 00:20:57,390 ‫and so all the reviews are five stars. 393 00:20:57,390 --> 00:21:00,490 ‫And so we need to come here to all tours. 394 00:21:00,490 --> 00:21:03,970 ‫And while this link is not really working just yet, 395 00:21:03,970 --> 00:21:07,460 ‫so you see it only edits like this, 396 00:21:07,460 --> 00:21:08,677 ‫this hash here. 397 00:21:08,677 --> 00:21:12,270 ‫And so let's quickly actually go ahead and fix that. 398 00:21:12,270 --> 00:21:15,830 ‫And that is in the header, so right here. 399 00:21:15,830 --> 00:21:17,200 ‫But we don't want that. 400 00:21:17,200 --> 00:21:20,330 ‫We simply want to go to our root page. 401 00:21:20,330 --> 00:21:23,123 ‫So that's just the slash. 402 00:21:24,690 --> 00:21:25,963 ‫So reload. 403 00:21:26,810 --> 00:21:29,340 ‫And now down there in the link you see 404 00:21:29,340 --> 00:21:31,597 ‫that that's exactly what we have. 405 00:21:31,597 --> 00:21:34,853 ‫And so indeed, we get back to our overview page. 406 00:21:35,800 --> 00:21:39,220 ‫So let's go to a page with a lower average. 407 00:21:39,220 --> 00:21:40,843 ‫And so that's the sport lover. 408 00:21:42,390 --> 00:21:43,463 ‫Let's see. 409 00:21:44,510 --> 00:21:46,790 ‫And of course you see that all the data 410 00:21:46,790 --> 00:21:49,410 ‫is now correct for this specific tour. 411 00:21:49,410 --> 00:21:52,190 ‫So again you see this 3.9 average. 412 00:21:52,190 --> 00:21:54,430 ‫You see all these different tour guides, 413 00:21:54,430 --> 00:21:55,823 ‫the different pictures, 414 00:21:56,850 --> 00:21:59,110 ‫and you see all the reviews. 415 00:21:59,110 --> 00:22:03,420 ‫And also you see that the stars are actually working. 416 00:22:03,420 --> 00:22:05,660 ‫So this first review is a five-star review. 417 00:22:05,660 --> 00:22:08,053 ‫And so you see five, four, one, 418 00:22:09,570 --> 00:22:13,633 ‫and then a bunch of four-star reviews down here. 419 00:22:15,290 --> 00:22:20,290 ‫Okay, so, this was a bit more confusing, this part, 420 00:22:20,490 --> 00:22:24,740 ‫but we still managed to get it work, right? 421 00:22:24,740 --> 00:22:27,030 ‫Now one thing that I wanted to just show you 422 00:22:27,030 --> 00:22:29,420 ‫is that we can actually also export, 423 00:22:29,420 --> 00:22:32,490 ‫basically a mixin into its separate file. 424 00:22:32,490 --> 00:22:34,100 ‫And so let's just copy this 425 00:22:34,100 --> 00:22:36,600 ‫and create a new mixin here, 426 00:22:36,600 --> 00:22:37,973 ‫or actually a new file. 427 00:22:39,410 --> 00:22:41,760 ‫And so since we're then going to include it 428 00:22:41,760 --> 00:22:44,343 ‫I will again prefix this with this underscore. 429 00:22:45,610 --> 00:22:49,423 ‫And let's call it reviewCard.pug. 430 00:22:50,720 --> 00:22:52,600 ‫Then paste it here. 431 00:22:52,600 --> 00:22:55,300 ‫And all the indentation is still correct, 432 00:22:55,300 --> 00:22:57,923 ‫and now all we need to do is to say, 433 00:22:59,140 --> 00:22:59,973 ‫include 434 00:23:01,670 --> 00:23:02,670 ‫_reviewCard. 435 00:23:03,850 --> 00:23:06,120 ‫And so if we try that now, 436 00:23:06,120 --> 00:23:09,123 ‫it should still work, which it does. 437 00:23:11,090 --> 00:23:12,230 ‫All right. 438 00:23:12,230 --> 00:23:14,660 ‫So we wrote a lot of code so far 439 00:23:14,660 --> 00:23:16,090 ‫and we're almost done. 440 00:23:16,090 --> 00:23:20,010 ‫All that's left to do is this call to action section. 441 00:23:20,010 --> 00:23:22,360 ‫And here all we really need to change 442 00:23:22,360 --> 00:23:24,340 ‫is this duration here. 443 00:23:24,340 --> 00:23:25,820 ‫So we have this nice slogan like, 444 00:23:25,820 --> 00:23:26,653 ‫10 days. 445 00:23:26,653 --> 00:23:27,520 ‫1 adventure. 446 00:23:27,520 --> 00:23:29,200 ‫Infinite memories. 447 00:23:29,200 --> 00:23:30,240 ‫All right? 448 00:23:30,240 --> 00:23:32,890 ‫But we actually need to replace the number of days 449 00:23:32,890 --> 00:23:35,563 ‫so that it's correct for this particular tour. 450 00:23:36,870 --> 00:23:39,020 ‫So let's create a template string for that. 451 00:23:45,840 --> 00:23:47,720 ‫So tour.duration. 452 00:23:47,720 --> 00:23:52,350 ‫And then also here we have some of the tour images, okay? 453 00:23:52,350 --> 00:23:54,650 ‫So let's do that as well. 454 00:23:54,650 --> 00:23:59,470 ‫So that's image.tours, or /tours and then slash 455 00:24:04,020 --> 00:24:05,200 ‫tour.images. 456 00:24:05,200 --> 00:24:07,430 ‫And remember that this is an array, 457 00:24:07,430 --> 00:24:11,120 ‫and I will simply use the first and the second element. 458 00:24:11,120 --> 00:24:13,010 ‫Or actually the second and the third 459 00:24:13,010 --> 00:24:15,150 ‫'cause I found out that these usually 460 00:24:15,150 --> 00:24:17,223 ‫look a bit better in the situation. 461 00:24:18,530 --> 00:24:20,980 ‫So, 462 00:24:20,980 --> 00:24:23,103 ‫let's copy that. 463 00:24:24,900 --> 00:24:25,833 ‫Put that here. 464 00:24:26,961 --> 00:24:30,480 ‫Oh and we're missing the closing bracket here. 465 00:24:30,480 --> 00:24:32,530 ‫And let's just add some alternative text. 466 00:24:33,890 --> 00:24:34,973 ‫Tour picture. 467 00:24:36,540 --> 00:24:37,500 ‫All right. 468 00:24:37,500 --> 00:24:40,380 ‫And I think that's actually it. 469 00:24:40,380 --> 00:24:42,243 ‫So just one last try. 470 00:24:44,040 --> 00:24:46,203 ‫You see that here it's blank right now. 471 00:24:47,200 --> 00:24:48,223 ‫But now indeed, 472 00:24:49,075 --> 00:24:51,690 ‫we have the same images here. 473 00:24:51,690 --> 00:24:53,313 ‫So this should be number two. 474 00:24:54,450 --> 00:24:57,960 ‫But still, now it says 14 days, 475 00:24:57,960 --> 00:25:00,470 ‫and so all of that is correct now. 476 00:25:00,470 --> 00:25:01,530 ‫Awesome. 477 00:25:01,530 --> 00:25:03,010 ‫That's fantastic. 478 00:25:03,010 --> 00:25:04,920 ‫That was a lot of work, 479 00:25:04,920 --> 00:25:06,610 ‫but I think it really paid off. 480 00:25:06,610 --> 00:25:10,530 ‫This page, I think looks absolutely fantastic. 481 00:25:10,530 --> 00:25:12,200 ‫It's really stunning. 482 00:25:12,200 --> 00:25:14,050 ‫And so now everything is connected. 483 00:25:14,050 --> 00:25:17,260 ‫So on each tour we can go back to all the tours 484 00:25:17,260 --> 00:25:20,100 ‫and take a look at all the other ones. 485 00:25:20,100 --> 00:25:21,960 ‫Let's see the park camper. 486 00:25:21,960 --> 00:25:23,500 ‫The park camper tour. 487 00:25:23,500 --> 00:25:24,540 ‫All the details. 488 00:25:24,540 --> 00:25:26,593 ‫All the different guides, images, 489 00:25:27,620 --> 00:25:32,173 ‫their reviews, and indeed these different images. 490 00:25:33,400 --> 00:25:34,233 ‫Great. 491 00:25:34,233 --> 00:25:38,230 ‫So you see this blank hole here in the middle of our page. 492 00:25:38,230 --> 00:25:40,630 ‫And so that's where the map is going to be next, 493 00:25:40,630 --> 00:25:43,500 ‫and so let's do that, actually right now 494 00:25:43,500 --> 00:25:44,623 ‫in the next lecture.