1 00:00:00,870 --> 00:00:07,020 So we have our display of new reservations and of all reservations working properly, but we're not 2 00:00:07,020 --> 00:00:07,850 quite done yet. 3 00:00:09,030 --> 00:00:15,750 So if I look at an individual reservation, the first thing I need to do is to put a button here. 4 00:00:15,750 --> 00:00:20,460 I'm going to put it right here that will allow us to make a reservation as processed, but only if it 5 00:00:20,460 --> 00:00:21,930 hasn't been processed already. 6 00:00:22,530 --> 00:00:27,510 And I'm also going to want to add a button and I'll stick it way over here so it's not clicked on accidentally 7 00:00:27,540 --> 00:00:29,250 that allows us to delete a reservation. 8 00:00:29,250 --> 00:00:31,440 Somebody calls to cancel, says they can't make it. 9 00:00:31,450 --> 00:00:37,230 So I need to delete that reservation and make sure that room is available for booking by someone else. 10 00:00:38,670 --> 00:00:40,830 So to make that happen, there's a few things we need to do. 11 00:00:40,830 --> 00:00:46,050 But the very first thing I'm going to be concerned with is ensuring that I have a means of displaying 12 00:00:46,050 --> 00:00:47,610 messages to the user. 13 00:00:48,000 --> 00:00:53,700 So we did that on the public site with our Attention and Nottie and Sweet Alert, but we never copied 14 00:00:53,700 --> 00:00:58,740 the necessary JavaScript libraries or JavaScript code into our admin template. 15 00:00:58,740 --> 00:01:00,900 So let's do that first just to get that out of the way. 16 00:01:01,410 --> 00:01:05,220 So I'll go back to my ID and I will open the base layout. 17 00:01:05,640 --> 00:01:09,900 And at the very top, first thing I'll grab is this Nottie Min. 18 00:01:10,050 --> 00:01:17,250 So I'll grab that CSC file and then I'll open my admin layout and make sure I put that in here. 19 00:01:17,250 --> 00:01:18,870 So I'll put it right here. 20 00:01:19,620 --> 00:01:20,070 Right. 21 00:01:21,170 --> 00:01:21,830 Here. 22 00:01:23,660 --> 00:01:33,500 And then back in our other page, which is basically let's open that up, let's get the necessary JavaScript 23 00:01:33,500 --> 00:01:38,090 libraries, we're going to need abcess, we're going to need suite alert and we're going to need Nottie. 24 00:01:38,090 --> 00:01:43,550 So let's copy those and go back to admin layout and down on the JavaScript section. 25 00:01:43,940 --> 00:01:45,970 We'll put that right here. 26 00:01:48,920 --> 00:01:52,790 And then finally, we're going to need this code right here. 27 00:01:53,300 --> 00:01:55,370 So I'll copy the first part here. 28 00:01:57,130 --> 00:02:02,020 And put that right here and give it a closing script tag. 29 00:02:04,720 --> 00:02:11,470 And then let's get the rest of it, the bit that gives us our notifications right here all the way down 30 00:02:11,470 --> 00:02:11,920 to here. 31 00:02:15,620 --> 00:02:17,130 And we'll put that right in there. 32 00:02:17,720 --> 00:02:25,100 So now we have the necessary JavaScript that allows us to use our prompt JavaScript module to called 33 00:02:25,100 --> 00:02:29,840 notified to give us a Nottie, alert, to give us a model, to give us an error message as success message 34 00:02:29,840 --> 00:02:30,650 or a warning message. 35 00:02:31,700 --> 00:02:35,180 Now, there is one other change I need to make, and that is an app jass. 36 00:02:38,830 --> 00:02:44,740 And if we look at the part where we're doing a custom notification, we have this pre confirmed bid 37 00:02:45,100 --> 00:02:46,360 and we don't need that anymore. 38 00:02:46,480 --> 00:02:47,750 I'm going to get rid of that entirely. 39 00:02:47,770 --> 00:02:48,430 We don't need it. 40 00:02:48,730 --> 00:02:54,220 And that will actually cause us JavaScript errors, because every time I try to call a custom JavaScript 41 00:02:54,520 --> 00:03:01,930 alert a notification of some sort, it will always look for a start an element in the model that has 42 00:03:01,930 --> 00:03:06,760 an idea of start at an idiot and I'm going to get rid of those because I don't need those right in here 43 00:03:06,760 --> 00:03:07,160 anymore. 44 00:03:08,440 --> 00:03:09,610 So we've built that. 45 00:03:09,620 --> 00:03:16,240 Now let's open our admin reservations show page and put a necessary button and I'll just set up the 46 00:03:16,240 --> 00:03:21,960 buttons first and then I will put in the necessary JavaScript and handlers and everything else afterwards. 47 00:03:22,420 --> 00:03:25,990 So we already have two buttons, we have a save button and we have the cancel button. 48 00:03:25,990 --> 00:03:28,810 And those look like this save and cancel. 49 00:03:28,810 --> 00:03:31,660 And I want a button here that's called marked as processed. 50 00:03:32,050 --> 00:03:33,730 So let's put a button first. 51 00:03:34,190 --> 00:03:39,910 HSF equals and I'll make it go nowhere with you using hash bang, which still makes it an active link. 52 00:03:40,150 --> 00:03:42,640 But when clicking on it has no effect. 53 00:03:43,060 --> 00:03:50,140 I'll get a class of button and button info and I want an unclick handler. 54 00:03:50,170 --> 00:03:55,810 When I, when I click on this, I want to execute a JavaScript function which doesn't exist yet, but 55 00:03:55,810 --> 00:04:01,570 we'll make it in a minute and I'll call it process revs and it will take one parameter, which will 56 00:04:01,570 --> 00:04:04,210 be the reservation ID. 57 00:04:06,970 --> 00:04:15,240 And I'll give it some text mark as processed, so there now I need to create the necessary JavaScript 58 00:04:15,250 --> 00:04:23,830 and I'll just use the define G.S. that section we have set up in our admin template layout. 59 00:04:24,490 --> 00:04:26,230 And inside of that, I'll have a script tag. 60 00:04:28,370 --> 00:04:29,840 And inside that make a function. 61 00:04:31,660 --> 00:04:36,590 And the function will be process rose, and it takes one parameter, which I'll call it. 62 00:04:38,320 --> 00:04:39,890 Now, what do we want to do in this function? 63 00:04:39,940 --> 00:04:43,870 I don't want someone to actually let's just reload the page and see what it looks like. 64 00:04:43,920 --> 00:04:46,210 It looks OK when someone clicks on this. 65 00:04:46,210 --> 00:04:50,560 I don't want it to just automatically mark that as processed because they might have clicked on that 66 00:04:50,560 --> 00:04:57,460 button by mistake so we can take advantage of our attention, which we defined in our base and our admin 67 00:04:57,460 --> 00:04:58,660 layer, which is right here. 68 00:04:58,660 --> 00:05:02,800 We defined attention, which is our prompt JavaScript library or module. 69 00:05:03,550 --> 00:05:06,910 So we can just say attention, custom. 70 00:05:09,630 --> 00:05:17,670 And custom take some settings and icon, which I will make warning because this is a warning and then 71 00:05:17,670 --> 00:05:22,750 has a message which will be something as simple as are you sure? 72 00:05:24,690 --> 00:05:25,980 And then the callback. 73 00:05:26,140 --> 00:05:31,290 What do I want to have happen when someone clicks the OK button but not the council button? 74 00:05:31,950 --> 00:05:37,350 Well, that's going to be a function, an anonymous function which takes result, whatever they clicked 75 00:05:37,350 --> 00:05:38,400 on as an argument. 76 00:05:38,400 --> 00:05:42,830 And that's passed to us by Sweedler, hour by hour, hour, library. 77 00:05:43,050 --> 00:05:49,530 And if they actually click on that, but not on the cancel button, if the result is not exactly equal 78 00:05:49,530 --> 00:05:55,200 to faults, then I just want to take them to another URL and the URL I'm going to take them to doesn't 79 00:05:55,200 --> 00:06:04,250 exist yet, but we can create window dot, location, dot, rev that says change the browser's location, 80 00:06:04,260 --> 00:06:13,410 take them to this address and I'll take them to a euro admin process reservation and then I'm going 81 00:06:13,410 --> 00:06:16,620 to put the source in there and we we used it up here. 82 00:06:16,620 --> 00:06:18,660 If you recall, we have this source. 83 00:06:18,660 --> 00:06:19,830 So I'll copy this. 84 00:06:21,930 --> 00:06:27,960 This this takes the argument as passed to the JavaScript, to the goal line template and says, where 85 00:06:27,960 --> 00:06:28,680 did you come from? 86 00:06:28,950 --> 00:06:30,210 The Sarsae, in other words. 87 00:06:30,600 --> 00:06:31,740 So I'll just put this in here. 88 00:06:31,740 --> 00:06:37,830 So we have access to it in this library or in this this block of our function. 89 00:06:38,280 --> 00:06:47,700 And I'll just put SIRC and then slash and then plus ID, which is the parameter pass to this JavaScript 90 00:06:47,700 --> 00:06:48,120 function. 91 00:06:48,570 --> 00:06:55,980 So if someone clicks on the button here, Mark is processed, it should fire an alert that has an E 92 00:06:56,490 --> 00:06:58,170 message with a warning icon. 93 00:06:58,380 --> 00:07:02,940 And if they click OK, it should take them to this URL, which doesn't exist yet, but we can try it 94 00:07:02,940 --> 00:07:03,870 out and make sure it works. 95 00:07:04,410 --> 00:07:09,810 So let's reload the page and open up the JavaScript console just to make sure we don't have any errors. 96 00:07:10,050 --> 00:07:10,970 And let's see what happens. 97 00:07:11,250 --> 00:07:13,950 Mark is processed, so that looks good. 98 00:07:13,950 --> 00:07:17,040 Counsel should make this go away and it does. 99 00:07:17,520 --> 00:07:21,990 And clicking it again, but clicking OK, should give us a page not found error because we're taking 100 00:07:22,020 --> 00:07:26,100 them to a u r l that doesn't exist yet and it does. 101 00:07:26,100 --> 00:07:26,640 Perfect. 102 00:07:26,880 --> 00:07:28,020 So that looks good. 103 00:07:28,030 --> 00:07:33,690 So this is are you, are we now we need to set that up in our roots and create the necessary handler. 104 00:07:34,290 --> 00:07:36,210 So let's go back to our roots file. 105 00:07:41,430 --> 00:07:46,800 And let's put this in and we got to put it in the right place, remember, are you are all that we're 106 00:07:46,800 --> 00:07:52,680 trying to go to is admin's process reservations, news six. 107 00:07:53,040 --> 00:07:55,040 So I want to make sure that it's actually hit. 108 00:07:55,650 --> 00:07:57,060 So I'll put it right here. 109 00:07:57,600 --> 00:07:58,830 Mux, don't get. 110 00:08:01,710 --> 00:08:10,590 Process reservation, I don't need the admin part because that's added automatically and then the source, 111 00:08:10,590 --> 00:08:18,900 which can be all or new at the moment, and then the ID and we're going to take this to a handler, 112 00:08:19,170 --> 00:08:21,330 which doesn't exist yet, were created at the moment. 113 00:08:21,720 --> 00:08:29,520 Handlers thought repo dot and I'll call this process reservation. 114 00:08:29,520 --> 00:08:32,790 Actually, I'll call it admin process reservation just for consistency. 115 00:08:33,330 --> 00:08:33,720 All right. 116 00:08:33,810 --> 00:08:35,730 Now let's go create that handler. 117 00:08:36,300 --> 00:08:40,530 So I'll just create it right here and I'll just copy this and change it to make it a little faster. 118 00:08:41,610 --> 00:08:48,570 And I want this one to be called that mean process reservation, which should fix the problem in our 119 00:08:48,570 --> 00:08:49,260 reads file. 120 00:08:49,260 --> 00:08:50,010 And it does. 121 00:08:50,490 --> 00:08:51,900 So now we can find it at least. 122 00:08:51,990 --> 00:08:52,980 Let's give it a comment. 123 00:08:55,090 --> 00:08:59,050 Marks a reservation as processed. 124 00:09:00,460 --> 00:09:01,930 OK, and what do we want to do here? 125 00:09:01,960 --> 00:09:04,090 We don't want to render a template, so let's delete that. 126 00:09:04,450 --> 00:09:10,240 First thing we want to do is get those two things that are being passed as part of the route, the source 127 00:09:10,240 --> 00:09:11,050 and the ID. 128 00:09:11,200 --> 00:09:12,040 And that's easy enough. 129 00:09:12,040 --> 00:09:12,850 We know how to do that. 130 00:09:13,480 --> 00:09:19,840 We can just say ID and then I'll ignore the error for now is equal to this needs to be an input. 131 00:09:19,840 --> 00:09:28,780 So I'll use the str conv package a Twohy and it requires a couple of requires one thing and that is 132 00:09:28,780 --> 00:09:30,970 what is the string that you want to convert to anent. 133 00:09:31,210 --> 00:09:40,630 So I'll just use the built in function czi Eurail Perram and it requires the RR variable which is our 134 00:09:40,630 --> 00:09:43,470 request and it also requires what's the name of the key. 135 00:09:43,480 --> 00:09:48,940 And in this case it's ID and then I'll duplicate this changes to SIRC. 136 00:09:49,240 --> 00:09:52,180 We're not converting it to a string because it's coming as a string. 137 00:09:52,870 --> 00:10:02,320 So I don't need the STR convert and this one is called SIRC and remember that ID and SIRC are these 138 00:10:02,320 --> 00:10:05,440 things right here, ID NRC. 139 00:10:05,560 --> 00:10:09,400 So that should give us those two pieces of information. 140 00:10:09,820 --> 00:10:15,370 So now that we have those we can just call that database function that we set up in lecture ago called 141 00:10:15,370 --> 00:10:17,280 update process for reservation. 142 00:10:17,800 --> 00:10:19,510 So again, I'll ignore the error rate. 143 00:10:19,510 --> 00:10:25,840 Now that's equal to my DB dot update process for reservation. 144 00:10:25,870 --> 00:10:31,900 That requires two things the ID, which we know we already have, that we just grabbed it and what do 145 00:10:31,900 --> 00:10:32,950 we want to change it to? 146 00:10:32,950 --> 00:10:38,530 And here I just want to change it to one, because I'm going to mark this preservation, this reservation 147 00:10:38,530 --> 00:10:41,650 as processed so I can just hard code the one. 148 00:10:41,650 --> 00:10:43,660 And that's fine for our purposes right now. 149 00:10:45,130 --> 00:10:47,500 Next, we want to give them some kind of feedback. 150 00:10:47,500 --> 00:10:49,090 So let's put something in the session. 151 00:10:49,120 --> 00:10:52,240 M dot app, dot session dot put. 152 00:10:53,230 --> 00:10:55,900 And it requires the context, our context. 153 00:10:58,240 --> 00:10:59,420 And what are we going to call it? 154 00:10:59,440 --> 00:11:07,000 It will be a flash message because it's a success message and we'll just say reservation marked as processed 155 00:11:08,500 --> 00:11:09,540 and then take them somewhere. 156 00:11:09,550 --> 00:11:11,020 And here's where we use the source bit. 157 00:11:11,290 --> 00:11:17,050 If they've come from the new reservations, if they got to that reservation from the new reservations 158 00:11:17,050 --> 00:11:21,700 page or only reservations, we want to take them back to their if they came from all reservations, 159 00:11:21,700 --> 00:11:22,770 we want to take them back there. 160 00:11:23,230 --> 00:11:25,870 So htp dot redirect. 161 00:11:27,070 --> 00:11:31,440 And that requires the response right to the point here, to the request and the euro. 162 00:11:31,450 --> 00:11:37,230 And here all use format is print F because I want to use that source tag. 163 00:11:37,720 --> 00:11:46,390 We'll take them to slash admin's reservations, dash my placeholder and substitute SIRC for that and 164 00:11:46,390 --> 00:11:52,570 then give them the appropriate status http dot status c other and that should work. 165 00:11:52,720 --> 00:11:56,560 So let's try this out so we'll go back and stop our application. 166 00:11:56,560 --> 00:12:00,400 If it's running it is clear the screen run this. 167 00:12:02,900 --> 00:12:11,420 It compiled and what I'm going to do now is go back to this screen Reloaded and I'm going to clear this 168 00:12:11,840 --> 00:12:16,350 and I'm going to turn on the inspector and I'm going to turn that on for a particular reason. 169 00:12:16,370 --> 00:12:19,530 OK, we're looking at this, the screen right now. 170 00:12:19,550 --> 00:12:22,750 Watch this little bit and see if I can get this a little actually show up. 171 00:12:24,050 --> 00:12:30,050 We should when I mark as processed, if we got everything right, it should give us a nodi alert. 172 00:12:30,290 --> 00:12:31,310 So let's see if it does. 173 00:12:33,130 --> 00:12:35,620 So there it is showing up here. 174 00:12:35,710 --> 00:12:37,750 This is great that that's been added, that's the. 175 00:12:37,750 --> 00:12:38,500 Are you sure? 176 00:12:38,530 --> 00:12:39,410 I'll click, OK. 177 00:12:41,540 --> 00:12:46,670 And it actually gave us that Nodi alert and then it disappeared, as it should, but it was there, 178 00:12:46,670 --> 00:12:47,540 but we never saw it. 179 00:12:47,630 --> 00:12:48,610 Why was that? 180 00:12:48,660 --> 00:12:50,200 Well, there's a very simple reason for that. 181 00:12:50,210 --> 00:12:54,170 It actually did display the Nodi Alert and hopefully you saw that flash in and out. 182 00:12:54,170 --> 00:12:59,650 If not, roll back the video a little bit and you'll see that a little d'Hiv appeared and then it disappeared. 183 00:13:00,260 --> 00:13:06,770 And we need to actually change in our admin layout page a little bit of success because it showed that 184 00:13:06,770 --> 00:13:10,640 Sweedler are that that Nodi alert, but it showed it behind everything else. 185 00:13:10,790 --> 00:13:14,890 The Z index needs to be changed so we can do that easily enough. 186 00:13:15,290 --> 00:13:20,180 All we need to do is go back to our success for the admin layout. 187 00:13:20,190 --> 00:13:21,170 So let's open this up. 188 00:13:21,470 --> 00:13:26,630 And at the very top where we have this little bit, we need to add another directive here and it's going 189 00:13:26,630 --> 00:13:31,880 to be for anything with a Class of Nottie container, which I saw from that little thing that popped 190 00:13:31,880 --> 00:13:32,120 up. 191 00:13:32,420 --> 00:13:37,310 Let's just change it Z index to something really high and I'll put 50000. 192 00:13:39,550 --> 00:13:40,420 And that should do it. 193 00:13:40,570 --> 00:13:46,930 So now if I come back here and reload this page, we're going to click on the link, which is a new 194 00:13:46,930 --> 00:13:50,520 reservation ID for Lois Lane. 195 00:13:50,860 --> 00:13:56,800 We're going to mark this as processed and we'll say, OK, and now it shows up properly, except that 196 00:13:56,800 --> 00:13:59,530 I have a zero ID in the word reservation, so I'm going to go fix that. 197 00:13:59,530 --> 00:14:04,660 And Lane disappeared from new reservations, but should still show up in all reservations. 198 00:14:04,670 --> 00:14:05,380 And there it is. 199 00:14:05,680 --> 00:14:07,240 So this seems to be working really well. 200 00:14:07,240 --> 00:14:14,830 Let's just go fix that one typo I had in my handler, which was right here. 201 00:14:14,830 --> 00:14:16,690 Reservation, get rid of the zero. 202 00:14:16,780 --> 00:14:17,200 Good. 203 00:14:17,590 --> 00:14:20,680 OK, so that's all set up in the next lecture. 204 00:14:20,680 --> 00:14:23,870 We'll do the same thing for the delete a reservation bit. 205 00:14:23,890 --> 00:14:25,200 And that's pretty straightforward.