1 00:00:01,290 --> 00:00:07,470 So this time around, we want to create the necessary code to make this screen in our admin tool actually 2 00:00:07,470 --> 00:00:11,250 useful, and that is the listing of all reservations. 3 00:00:11,310 --> 00:00:15,630 Now we're going to have another one for listing new reservations, which, of course, means we're going 4 00:00:15,630 --> 00:00:20,880 to have to add a column to our database table for reservations that indicates whether it's been processed 5 00:00:20,880 --> 00:00:21,240 or not. 6 00:00:21,540 --> 00:00:23,580 If it's been processed, it's not new. 7 00:00:23,730 --> 00:00:26,360 If it has not been processed, then it is new. 8 00:00:26,520 --> 00:00:29,090 But we'll do that when we get to new reservations. 9 00:00:29,820 --> 00:00:35,310 So if you think about the things we need to do here to start with, we're going to have to have a database 10 00:00:35,310 --> 00:00:38,610 query that gets a list of all reservations for us. 11 00:00:39,270 --> 00:00:42,900 And then we're going to have to create a handler that calls that database routine. 12 00:00:43,200 --> 00:00:48,660 And then somehow we're going to have to present that information in a meaningful fashion in this particular 13 00:00:48,660 --> 00:00:49,030 window. 14 00:00:49,440 --> 00:00:50,230 So let's get started. 15 00:00:50,940 --> 00:00:56,580 Let's go back to our idea and look at our handlers, which are right here. 16 00:00:57,330 --> 00:01:00,700 And the one we're doing right now is listing all reservations. 17 00:01:00,720 --> 00:01:06,870 So before we we actually send this information off, before we render this template, we need to get 18 00:01:07,320 --> 00:01:13,740 the list of all reservations from the database, which means we need to go to our post Glasgow and add 19 00:01:13,740 --> 00:01:18,800 a new function here and then add it to our repository and add one in our test repository as well. 20 00:01:19,500 --> 00:01:25,770 So I'll create a new function, which I'll call it has to have the receiver Postgrads DB Reffo and I'll 21 00:01:25,770 --> 00:01:30,090 call this all reservations, which seems like a meaningful name. 22 00:01:31,440 --> 00:01:36,840 And it's not going to take any parameters because we want all of the reservations and it will return 23 00:01:36,840 --> 00:01:41,610 a slice of model's reservation and potentially an error. 24 00:01:43,410 --> 00:01:50,010 OK, as we usually do, we'll copy our context lines and paste them in here and then we'll create a 25 00:01:50,010 --> 00:01:57,660 variable which I'll call reservations and it will be a type of type models reservation, a slice of 26 00:01:57,660 --> 00:01:58,680 models reservation. 27 00:01:59,070 --> 00:02:00,030 And now we'll do our query. 28 00:02:00,750 --> 00:02:02,070 And the query is really simple. 29 00:02:03,030 --> 00:02:09,030 I'll put it in tactics so I can put it on as many lines as I want select and I'm going to aliased the 30 00:02:09,030 --> 00:02:15,030 table reservations to the letter are we want the ID, the first name. 31 00:02:16,980 --> 00:02:17,810 The last name. 32 00:02:19,950 --> 00:02:20,300 I don't know. 33 00:02:20,340 --> 00:02:21,060 I get an either. 34 00:02:21,480 --> 00:02:26,850 I should be in our first name, last name, email the start date. 35 00:02:30,860 --> 00:02:32,810 And the phone I'll put after email. 36 00:02:35,870 --> 00:02:36,620 The end date. 37 00:02:43,890 --> 00:02:44,610 The remedy. 38 00:02:48,040 --> 00:02:48,850 The created at. 39 00:02:52,030 --> 00:02:52,900 The updated at. 40 00:02:56,840 --> 00:03:01,700 And we're going to also want to get the room information, so we'll join that table in a minute and 41 00:03:01,700 --> 00:03:07,670 I'll aliased to R.M. for the remedy the Rumney. 42 00:03:09,740 --> 00:03:19,340 And we're going to we're going to be selecting that from reservations are and we will join left join 43 00:03:20,660 --> 00:03:24,530 rooms, R.M. and we'll join it on our dot room. 44 00:03:24,530 --> 00:03:29,120 ID equals our Amde ID. 45 00:03:30,140 --> 00:03:32,120 And I want to order this in any particular way. 46 00:03:32,150 --> 00:03:32,990 I probably do. 47 00:03:33,350 --> 00:03:37,760 Always good to get information, lots of information and sort it in some meaningful fashion. 48 00:03:37,760 --> 00:03:42,880 So I'll order this by our start date and I'll make it ascending. 49 00:03:42,890 --> 00:03:45,480 And if that doesn't suit our purposes, we can change it later. 50 00:03:46,370 --> 00:03:47,510 So now I have the query. 51 00:03:48,230 --> 00:03:50,090 I have a place to store this information. 52 00:03:50,090 --> 00:03:58,130 So let's get some rose and potentially an error from the database by calling m dot db dot query context. 53 00:04:01,020 --> 00:04:07,800 And give it the context and give it a query, and it has no arguments in this case and we'll check for 54 00:04:07,800 --> 00:04:15,810 an error, if error is not equal to nil, just return our empty variable, which is reservations and 55 00:04:15,810 --> 00:04:16,200 the error. 56 00:04:18,160 --> 00:04:24,030 Otherwise, let's scan this for Rosie next, what are we going to do inside of this? 57 00:04:24,040 --> 00:04:29,950 We're going to create a new new variable and I'll just call it eye for item and let's have type models, 58 00:04:29,950 --> 00:04:30,910 DOT reservation. 59 00:04:32,140 --> 00:04:39,730 And now we'll scan our information into this newly created eye variable rose dot scan. 60 00:04:42,970 --> 00:04:47,890 And I'll put this on multiple lines, so it's readable and we're going to scan into the variable eye 61 00:04:48,070 --> 00:04:55,510 the ID, which is the first thing in our select statement, then we'll scan into our first name and 62 00:04:55,510 --> 00:04:57,570 let's just duplicate this a few times to make it faster. 63 00:05:00,030 --> 00:05:08,730 Then the last name, then email, then phone and start date. 64 00:05:11,220 --> 00:05:15,030 An end date and then remedy. 65 00:05:19,210 --> 00:05:24,190 And after that, we're scanning our created that are updated at. 66 00:05:29,130 --> 00:05:39,960 And now we're scanning into our room, the I.D. and then room name, room, room name. 67 00:05:40,830 --> 00:05:45,630 All right, I'm not going to bother with the creator created and an updated that it out for the room 68 00:05:45,630 --> 00:05:47,450 because I'm actually not going to use that information. 69 00:05:48,270 --> 00:05:52,800 And if that doesn't work, if we have an error, we'll just check for the error. 70 00:05:53,970 --> 00:05:55,780 If error is not equal to nil. 71 00:05:56,580 --> 00:06:01,230 We'll return once again our reservations and the error. 72 00:06:02,910 --> 00:06:04,500 Otherwise append this. 73 00:06:04,830 --> 00:06:07,830 So we'll append our new variable to the reservations. 74 00:06:07,830 --> 00:06:13,220 Slice reservations equals append reservations. 75 00:06:13,230 --> 00:06:19,500 And I and then, as is always good practice, after we're finished, our for Loop will check for one 76 00:06:19,500 --> 00:06:20,310 more error. 77 00:06:20,340 --> 00:06:28,920 If error equals Rossdale error, error is not equal to nil return reservations. 78 00:06:30,070 --> 00:06:34,090 And the air and I think I missed some parentheses here, it looks like I did. 79 00:06:36,810 --> 00:06:42,900 Otherwise, everything worked, so we'll just return reservations and nil, no error. 80 00:06:43,380 --> 00:06:45,690 OK, so let's give this thing a comment. 81 00:06:49,730 --> 00:07:00,160 Returns a slice of all reservations and let's copy this and put it into our repository, which is under 82 00:07:00,170 --> 00:07:04,670 internal repository repository. 83 00:07:04,850 --> 00:07:10,790 So we'll put that right here and then we'll copy the entire function. 84 00:07:14,630 --> 00:07:20,180 And go to our test tube repo and put it in there and just make it as simple as we possibly can. 85 00:07:21,680 --> 00:07:31,070 So I'll delete all of this information, delete the context that we're not using and give it the correct 86 00:07:31,070 --> 00:07:33,800 receiver, which is tested repo there. 87 00:07:34,310 --> 00:07:35,410 So this should compile. 88 00:07:35,450 --> 00:07:36,500 Let's make sure it does. 89 00:07:41,780 --> 00:07:42,470 It does. 90 00:07:42,530 --> 00:07:48,000 OK, so let's stop our application and go put this in our handler and just see if it actually works. 91 00:07:48,440 --> 00:07:51,950 So back to our handlers and we called this all reservations. 92 00:07:53,390 --> 00:07:55,990 So let's get our reservations. 93 00:07:58,310 --> 00:07:59,810 I'll call it reservations. 94 00:08:00,630 --> 00:08:07,910 Error is a sign, the value of Magdeburg, all reservations if air is not equal to nil. 95 00:08:08,120 --> 00:08:11,720 And I will just do helper's that server error. 96 00:08:14,700 --> 00:08:21,180 And return, so now we have our reservations, let's put them somewhere, let's put a crate, our slice 97 00:08:21,180 --> 00:08:33,660 for data data is a sign the value of make a map string interface data and I'll call the variable that 98 00:08:33,660 --> 00:08:36,210 I'm going to pass reservations. 99 00:08:40,290 --> 00:08:48,330 Is equal to reservations, and here I will pass that data in using our predefine member data, which 100 00:08:48,330 --> 00:08:49,410 is going to be equal to data. 101 00:08:50,340 --> 00:08:52,480 OK, so this should work as well. 102 00:08:52,740 --> 00:08:59,070 So now if this works properly, we actually should have our reservations available to us in this template 103 00:08:59,070 --> 00:09:00,700 admin on reservations page. 104 00:09:01,140 --> 00:09:07,710 So let's see if we do, I'll get rid of the all reservations content and just to see if it works, I 105 00:09:07,710 --> 00:09:14,610 will get the variable from my data and store it in a local variable, which I'll call Rez is a the value 106 00:09:14,610 --> 00:09:19,400 of index dot data and I called it reservations. 107 00:09:19,410 --> 00:09:21,420 That's the key I look it up with. 108 00:09:21,900 --> 00:09:30,600 And now I should be able to range rez and all I'll do just to make sure this is working is close this 109 00:09:30,600 --> 00:09:31,290 with an end. 110 00:09:34,540 --> 00:09:38,680 And inside of this, I will just print out the IDs one at a time. 111 00:09:41,600 --> 00:09:42,960 Each one on its own line. 112 00:09:42,980 --> 00:09:45,290 So let's compile this run. 113 00:09:47,340 --> 00:09:48,590 And see if we got everything right. 114 00:09:51,610 --> 00:09:58,330 Reload this, I got a log in, of course, admin added Mint.com Password. 115 00:10:01,870 --> 00:10:06,030 Go back to our dashboard and look at all reservations, and there they are. 116 00:10:06,070 --> 00:10:07,720 So I have a bunch of reservations in there. 117 00:10:07,750 --> 00:10:13,600 So now we've got our information being passed to this particular screen and that seems to work well. 118 00:10:14,230 --> 00:10:22,030 So one thing I believe I forgot to do, and I probably should do that right now is if I go to Postgres, 119 00:10:22,810 --> 00:10:25,020 did I defer Roques clothes? 120 00:10:25,030 --> 00:10:31,100 I did not defer rose dot clothes. 121 00:10:32,180 --> 00:10:32,780 That's better. 122 00:10:33,070 --> 00:10:34,510 Otherwise, I'm going to have a memory leak. 123 00:10:35,260 --> 00:10:37,840 So we have this actually working the way we want to. 124 00:10:37,900 --> 00:10:41,140 But the information we're displaying is not ideal. 125 00:10:41,150 --> 00:10:42,880 It doesn't look very good. 126 00:10:43,150 --> 00:10:44,680 It's just a list of IDs. 127 00:10:44,830 --> 00:10:51,580 So obviously this is a lot of rows of information coming from the database that I want to display on 128 00:10:51,580 --> 00:10:52,090 the screen. 129 00:10:52,420 --> 00:10:55,780 So probably the best way to do this is to create a table. 130 00:10:56,020 --> 00:10:56,760 So let's do that. 131 00:10:57,280 --> 00:11:00,340 Let's go back to our original reservations page. 132 00:11:00,880 --> 00:11:06,340 And instead of just doing it this way and just displaying the ID, let's get rid of that and let's create 133 00:11:06,340 --> 00:11:06,790 a table. 134 00:11:07,900 --> 00:11:13,450 So we'll do the first part of our table outside of the loop and we'll do inside of the loop each of 135 00:11:13,450 --> 00:11:14,700 the rows of information. 136 00:11:14,710 --> 00:11:23,050 So let's create a table, table, class equals table, table striped and I'll add table cover as well. 137 00:11:24,010 --> 00:11:30,100 And that way when people roll their mouse over a given row in the table, it will light up and I'll 138 00:11:30,100 --> 00:11:32,500 give this an ID ID equals already. 139 00:11:32,570 --> 00:11:34,570 I'm not going to do anything with that yet, but I will later. 140 00:11:34,990 --> 00:11:38,530 And the closing table tag, of course, has to be after this part. 141 00:11:40,450 --> 00:11:49,000 And here we want our ticket to give it a nicely formatted head and then we want a tier and then one 142 00:11:49,690 --> 00:11:54,520 t h for each of the columns in the table and I'll display all of the useful information. 143 00:11:54,520 --> 00:11:56,380 So I'll duplicate that a few times. 144 00:11:56,770 --> 00:12:03,400 I'll put the ID there, I'll put the guests last name and then I'll put the room they're staying in 145 00:12:04,150 --> 00:12:08,830 and then I'll put the arrival and the departure and that's probably enough. 146 00:12:10,780 --> 00:12:16,840 So that's how she had then we want our Tibaldi and the T bodies. 147 00:12:16,840 --> 00:12:20,740 Closing tag has to go after a range and let's format this whole thing. 148 00:12:21,970 --> 00:12:24,820 And every time I Leapster this, I'm going to be putting one rowin. 149 00:12:24,820 --> 00:12:32,020 So I need a Rohtak and then I have my TDRS td and the first one is just the ID and I'll duplicate this 150 00:12:32,020 --> 00:12:34,300 a few times then the last name. 151 00:12:36,790 --> 00:12:45,640 Then the room, not room name, because the room is actually stored as an entry in the struct, but 152 00:12:45,640 --> 00:12:48,850 it it itself is also a struct of type room. 153 00:12:49,930 --> 00:12:57,160 And then we want start date or start date is the arrival and end date is the departure. 154 00:12:57,850 --> 00:12:58,230 All right. 155 00:12:58,390 --> 00:12:59,380 Now, that should work. 156 00:12:59,390 --> 00:13:00,310 Let's give this a try. 157 00:13:00,430 --> 00:13:02,620 Go back and just reload this page. 158 00:13:03,870 --> 00:13:05,740 OK, that's not bad. 159 00:13:06,310 --> 00:13:12,160 But as you can see, as we start adding more and more reservations, this is going to become unwieldy. 160 00:13:12,160 --> 00:13:15,790 If we have 200 reservations, I'm going to be scrolling along way down. 161 00:13:16,090 --> 00:13:18,940 I have no means of searching for a particular entry. 162 00:13:19,270 --> 00:13:20,770 There's got to be a better way of doing this. 163 00:13:20,770 --> 00:13:27,250 And in fact, there is what we want is sometimes called a data grid and sometimes called a data table. 164 00:13:27,640 --> 00:13:29,290 And there are lots of them out there. 165 00:13:29,290 --> 00:13:30,880 Most of them use query. 166 00:13:30,880 --> 00:13:35,640 But I made that decision early on that I want to use as little query as I possibly can. 167 00:13:35,650 --> 00:13:39,310 And yes, I know that this uses query and that's fine. 168 00:13:39,550 --> 00:13:46,240 But I want to think about the future and I want to, if possible, avoid using query as much as I can. 169 00:13:46,630 --> 00:13:53,140 Well, there's a really good package based upon a really popular plug in for Jake Query called Data 170 00:13:53,140 --> 00:13:53,710 Tables. 171 00:13:54,040 --> 00:13:56,020 And this one is called Simple Data Tables. 172 00:13:56,020 --> 00:13:57,430 And this is the URL right here. 173 00:13:57,430 --> 00:13:58,570 It's on GitHub dot com. 174 00:13:58,570 --> 00:14:01,820 And I'll put a link to this on the course resources for this lecture. 175 00:14:02,950 --> 00:14:04,840 This one doesn't use query. 176 00:14:04,840 --> 00:14:07,660 It's lightweight, it's extendible, it's dependency free. 177 00:14:07,660 --> 00:14:09,340 So it's pure JavaScript. 178 00:14:09,340 --> 00:14:12,040 And this looks like it's exactly what I want. 179 00:14:12,250 --> 00:14:18,700 So I'm going to use this and I'm going to copy these links that point to a content delivery network 180 00:14:18,700 --> 00:14:21,520 that allows us to use this without having to download it. 181 00:14:22,240 --> 00:14:30,580 And I'll go back to my template and at the top, I'll take advantage of that section we defined in our 182 00:14:30,580 --> 00:14:33,760 template called S.O.S. 183 00:14:35,340 --> 00:14:41,880 And I'll put my untag in there and then format this and then I'll just put in, first of all, the top 184 00:14:41,880 --> 00:14:47,630 part, I'll put in the link to the success and then I'll cut the script part, the JavaScript, which 185 00:14:47,640 --> 00:14:49,050 I guess I missed the tag there. 186 00:14:51,060 --> 00:15:00,750 And now at the bottom, I'll define, you know, G.S., I'll paste in what I just cut and close that. 187 00:15:03,600 --> 00:15:04,980 OK, now how do we use this thing? 188 00:15:05,010 --> 00:15:05,940 Let's go back and look. 189 00:15:08,770 --> 00:15:14,830 Features in store QuickStart if using the CDN, this is what we're going to be using somebody's copy 190 00:15:14,830 --> 00:15:24,760 this and come down here and in my jazz section of my template, I'll put in a script tag paste in what 191 00:15:24,760 --> 00:15:25,590 they just gave me. 192 00:15:26,020 --> 00:15:29,380 I did not call my table or the ID of my table. 193 00:15:30,760 --> 00:15:31,660 I called it all. 194 00:15:31,660 --> 00:15:33,160 Red's not my table. 195 00:15:33,340 --> 00:15:35,590 So it says what we're doing is this great. 196 00:15:35,710 --> 00:15:40,960 Let's just get rid of all those other options and just go with the default install and see how that 197 00:15:40,960 --> 00:15:41,290 looks. 198 00:15:42,220 --> 00:15:43,570 So hopefully this will work. 199 00:15:43,690 --> 00:15:50,200 Let's save this, go back, find our page and reload this. 200 00:15:50,560 --> 00:15:52,250 And look, that is much nicer. 201 00:15:52,300 --> 00:15:53,140 It really is. 202 00:15:53,140 --> 00:15:54,280 I can search for things. 203 00:15:54,280 --> 00:15:59,860 So if I search, for example, for Wayne there, there's Wayne, I can pageant through the results, 204 00:16:00,400 --> 00:16:01,450 go back and forth. 205 00:16:01,630 --> 00:16:04,630 I can show more entries per page if I want to. 206 00:16:04,960 --> 00:16:06,180 I can show five per page. 207 00:16:06,370 --> 00:16:07,450 This looks ideal. 208 00:16:07,810 --> 00:16:12,670 Now I have my nice hover thing here, which looks very good, but my stripe isn't working. 209 00:16:12,700 --> 00:16:14,170 Why isn't my stripe working? 210 00:16:14,290 --> 00:16:17,890 Well, if I inspect this, if I. 211 00:16:17,890 --> 00:16:18,100 Right. 212 00:16:18,100 --> 00:16:19,990 Click on it and choose inspect element. 213 00:16:22,060 --> 00:16:31,210 Looks like somewhere in here I have a content wrapper, so that seems to be covering the entire section. 214 00:16:31,210 --> 00:16:34,150 And if I look at the CFS for this, it has a background. 215 00:16:34,210 --> 00:16:38,410 If I change that background to white, that looks a little better. 216 00:16:38,590 --> 00:16:39,100 It does. 217 00:16:39,100 --> 00:16:40,390 Now I have my stripe table. 218 00:16:40,390 --> 00:16:41,740 I still have my hover effect. 219 00:16:41,980 --> 00:16:47,770 So what I'll do is open my base template and change the CSC for content wrapper, which is easy enough. 220 00:16:48,160 --> 00:16:54,190 Let's go back over here and find our templates and find our admin layout. 221 00:16:54,970 --> 00:17:01,150 And in the CSC section at the top, just before my per page access, I'll put in a style tag. 222 00:17:03,630 --> 00:17:11,410 And I'll overate content wrapper and give it a background of white. 223 00:17:12,630 --> 00:17:17,580 Now I want to come back here and close this and reload the page that should stay white. 224 00:17:18,420 --> 00:17:19,700 OK, that's much better. 225 00:17:20,040 --> 00:17:22,630 Now, obviously, listing the reservations isn't that helpful. 226 00:17:22,650 --> 00:17:24,060 I can see what's going on. 227 00:17:24,060 --> 00:17:29,100 I can I can sort my room if I want to by clicking on the tall column, and that works really well. 228 00:17:29,790 --> 00:17:31,260 But there's a couple of things I don't like here. 229 00:17:31,260 --> 00:17:37,410 First of all, I should have some means of clicking on a given reservation and going to detailed information 230 00:17:37,410 --> 00:17:40,470 about it, maybe modifying information, maybe deleting information. 231 00:17:40,920 --> 00:17:44,310 And also this date is way too long. 232 00:17:44,320 --> 00:17:47,460 I just want 20, 21, zero three 10. 233 00:17:47,550 --> 00:17:51,510 I don't want the rest of this stuff because I'm always storing things at midnight. 234 00:17:52,380 --> 00:17:55,230 I'm just storing things by day, not by time. 235 00:17:55,710 --> 00:17:57,450 So I want to make a couple of changes. 236 00:17:57,450 --> 00:18:02,400 And what I'm going to do, first of all, is go over to my render package. 237 00:18:02,790 --> 00:18:08,430 So let's go back to our ID and find our packages for rendered right here. 238 00:18:11,190 --> 00:18:17,220 And you may recall a long time ago we created this variable right here called Functions, and it is 239 00:18:17,220 --> 00:18:19,610 a type template, funk map. 240 00:18:19,920 --> 00:18:27,390 And what this allows us to do is to specify the certain functions that are available to our goaland 241 00:18:27,390 --> 00:18:28,050 templates. 242 00:18:28,440 --> 00:18:35,640 So what I'm going to do is create a new function and I'll do it right down here and I'll call that func 243 00:18:36,120 --> 00:18:36,970 human date. 244 00:18:37,200 --> 00:18:42,900 In other words, a date that's nice for humans to read and it will take an argument of named T of type 245 00:18:42,900 --> 00:18:46,170 time dot time and it will return a string. 246 00:18:48,180 --> 00:18:53,850 And all I'm going to do is take that time that I'm past and send it back in a particular format. 247 00:18:54,220 --> 00:18:57,720 I'll return t dot format and give it the layout. 248 00:18:57,720 --> 00:19:05,050 And the layout I want is we're in four digits and then the month in to digits and then the day in digits. 249 00:19:05,070 --> 00:19:10,230 And this is again using that strange reference time that goal uses. 250 00:19:10,360 --> 00:19:18,660 Now I have defined this as human date and in my func map I can actually put in a name that I can refer 251 00:19:18,660 --> 00:19:22,830 to in my goal line template, which I'll call human date with a lowercase H. 252 00:19:24,410 --> 00:19:28,240 And that's going to be equal to Human Day. 253 00:19:30,120 --> 00:19:36,450 With no parentheses now, when I restart my application, I will have access to a function in my Gullwing 254 00:19:36,450 --> 00:19:42,230 templates called human date that points to this function human date, which is this one right here. 255 00:19:42,900 --> 00:19:43,980 So let's give this a comment. 256 00:19:46,980 --> 00:19:53,340 Returns time in year, year, year, month, month data format. 257 00:19:54,420 --> 00:19:56,100 OK, so let's stop our application. 258 00:19:57,090 --> 00:20:01,620 And I'm going to do one more thing here just because I hate having to log in every time I'm going to 259 00:20:01,620 --> 00:20:02,700 find my roots. 260 00:20:05,230 --> 00:20:12,550 And I'm going to disable my off so I can while developing reload admin page templates without having 261 00:20:12,550 --> 00:20:13,850 to log in every time. 262 00:20:13,850 --> 00:20:19,000 And before I go into production, I'll just uncommented that and then our security will be back in place. 263 00:20:19,690 --> 00:20:21,070 So let's run our application. 264 00:20:24,300 --> 00:20:30,510 It's running and let's go back to our admin layout are our admin, our reservations page, and let's 265 00:20:30,510 --> 00:20:37,800 add that function just to this one human date, which is what I called it in that funk map back in my 266 00:20:37,800 --> 00:20:38,550 render package. 267 00:20:38,910 --> 00:20:40,200 And let's go reload the page. 268 00:20:41,400 --> 00:20:42,480 That looks a little better. 269 00:20:42,630 --> 00:20:47,400 OK, so I've now formatted the day, the date in a way that is less intrusive. 270 00:20:47,400 --> 00:20:54,060 It doesn't take up all this horizontal space and let's put the same function on end date, human date. 271 00:20:56,380 --> 00:20:57,880 And reload, perfect. 272 00:20:58,330 --> 00:21:03,310 OK, so the last thing I want to add right now is I want to make the last name clickable, I want to 273 00:21:03,310 --> 00:21:04,000 make it clickable. 274 00:21:04,000 --> 00:21:10,170 So it will take me to a screen that gives me more information about that particular reservation. 275 00:21:10,240 --> 00:21:14,890 And we'll just make the link and then we'll make the actual handler for that link later on. 276 00:21:15,340 --> 00:21:18,280 So let's go back to our template here. 277 00:21:18,310 --> 00:21:21,040 And I want to put it on last name, so I'll give myself some room. 278 00:21:23,820 --> 00:21:28,320 And it'll just create a link here, a H.F. equals and what do I want that link to be? 279 00:21:28,350 --> 00:21:33,120 Well, it's going to start with admin because I want it to be password protected and it's in the reservations 280 00:21:33,120 --> 00:21:33,440 part. 281 00:21:33,450 --> 00:21:37,680 So I'll use reservations and then I want to put in the ID. 282 00:21:40,010 --> 00:21:46,160 One more thing I'll add here, I get that at closing e-TAG down where it belongs, I know I'm going 283 00:21:46,160 --> 00:21:50,210 to be listing all reservations and I know I'm going to be listing new reservations. 284 00:21:50,330 --> 00:21:51,530 So this is the all part. 285 00:21:51,530 --> 00:21:52,820 So I'll just put all there. 286 00:21:53,030 --> 00:21:59,660 So the full you URL to click on a reservation from this screen will be slash admin, slash reservations, 287 00:21:59,840 --> 00:22:03,340 slash all and then the idea of the current reservation. 288 00:22:03,350 --> 00:22:08,660 So let's just reload that page and make sure that it actually works the way we want it to and point 289 00:22:08,660 --> 00:22:08,930 at it. 290 00:22:08,930 --> 00:22:17,870 And if I look in the lower left hand corner slash admin slash slash all five and there's six and there's 291 00:22:17,870 --> 00:22:18,400 four. 292 00:22:18,680 --> 00:22:19,190 Perfect. 293 00:22:19,340 --> 00:22:22,510 OK, well that seems like it's coming along reasonably well. 294 00:22:22,970 --> 00:22:29,090 The last thing I want to do here is I want to change this so that it's sorted by arrival date and I 295 00:22:29,090 --> 00:22:29,750 can do that. 296 00:22:29,750 --> 00:22:36,080 If you look at the documentation for this simple, simple data, tables, documentation, there's all 297 00:22:36,080 --> 00:22:37,430 kinds of things listed here. 298 00:22:37,700 --> 00:22:39,020 And I already read it. 299 00:22:39,020 --> 00:22:46,940 And I know that if I come down here and in the curly brackets, when I initialize data tables, I actually 300 00:22:46,940 --> 00:22:49,340 can say select is an option. 301 00:22:49,790 --> 00:22:55,340 And I want to go to the third column starting at zero and sort by descending. 302 00:22:57,140 --> 00:23:04,220 OK, so we're select three sort descending, so I'm selecting the third column starting at zero zero 303 00:23:04,340 --> 00:23:09,140 one, two, three, and now this should be sorted by descending. 304 00:23:09,740 --> 00:23:10,700 So let's reload this. 305 00:23:11,300 --> 00:23:13,580 And it is it's working quite well. 306 00:23:13,590 --> 00:23:18,670 So twenty, twenty one that seems to work well and I can sort by date this way. 307 00:23:18,680 --> 00:23:19,400 Looks great. 308 00:23:19,430 --> 00:23:20,730 OK, that's a little bit better. 309 00:23:21,020 --> 00:23:26,150 The last thing I want to do is I have this script and the script is going to try to run as soon as it 310 00:23:26,150 --> 00:23:26,980 possibly can. 311 00:23:26,990 --> 00:23:32,060 And I want to defer the running of that script until the document is actually loaded, until everything 312 00:23:32,060 --> 00:23:34,910 is there that needs to be there just to be safe. 313 00:23:35,000 --> 00:23:40,190 So I'll just put a listener on here document at event listener. 314 00:23:40,430 --> 00:23:49,430 And the event I'm listening for is Dom Content loaded and I want to after the DOM content is loaded, 315 00:23:49,430 --> 00:23:56,180 after everything is loaded, run a function and now I'll take this part, these last two things and 316 00:23:56,180 --> 00:24:00,860 get those out of there and put them after this and format everything. 317 00:24:01,160 --> 00:24:06,340 And now this won't run until the DOM content, until all of the necessary content is loaded. 318 00:24:06,590 --> 00:24:07,730 Let's just make sure it works. 319 00:24:08,270 --> 00:24:10,200 Reload the page and it's good. 320 00:24:10,580 --> 00:24:11,050 All right. 321 00:24:11,060 --> 00:24:13,070 So we have this done now. 322 00:24:13,430 --> 00:24:16,520 That's the all reservations and that seems to work pretty well. 323 00:24:17,630 --> 00:24:23,030 We're going to do new reservations next, and that's going to require another database query that gets 324 00:24:23,030 --> 00:24:29,960 us just new reservations, which is also going to require that we modify the structure for our reservations 325 00:24:29,960 --> 00:24:34,470 table and put a new column in there, something like process with a default of zero. 326 00:24:34,760 --> 00:24:40,700 So when a new reservation comes in, it will have a processed column set to the value of zero. 327 00:24:40,760 --> 00:24:45,470 And after we process it saying, yes, I'm aware of this reservation, it's confirmed we'll change that 328 00:24:45,470 --> 00:24:47,240 to a one or something like that. 329 00:24:47,240 --> 00:24:53,180 And that'll give us a means of finding reservations that are processed and finding new reservations. 330 00:24:53,180 --> 00:24:55,430 And we'll take care of that in the next lecture.