1 00:00:00,960 --> 00:00:06,030 So now we need to work on our reservation calendar and this is going to take a few steps, none of it 2 00:00:06,030 --> 00:00:09,450 is terribly difficult, but some of it will be things you haven't seen before. 3 00:00:09,450 --> 00:00:11,580 And that's OK, because none of it's difficult. 4 00:00:11,580 --> 00:00:14,480 And we'll go through each step one at a time. 5 00:00:15,090 --> 00:00:20,910 So the first thing I want to do is I want to have the current month for my calendar and the current 6 00:00:20,910 --> 00:00:23,040 year for my calendar appear here somewhere. 7 00:00:23,550 --> 00:00:27,780 And I don't want to have a button here that allows me to go to the previous month and maybe a button 8 00:00:27,780 --> 00:00:29,700 over here that allows me to go to the next month. 9 00:00:30,180 --> 00:00:34,200 So let's get started with that and then we'll move on as to the next step. 10 00:00:34,680 --> 00:00:40,260 So over in my idee, let's find the handler that shows the reservation's calendar right here. 11 00:00:40,920 --> 00:00:42,780 And right now it just renders a template. 12 00:00:42,900 --> 00:00:44,190 And that's that's a good start. 13 00:00:44,250 --> 00:00:45,440 But we have some more work to do. 14 00:00:45,930 --> 00:00:47,880 So, first of all, let's make some assumptions. 15 00:00:47,880 --> 00:00:57,000 Let's assume back here that if I have just this for the early admin reservations dash calendar, it's 16 00:00:57,000 --> 00:00:59,610 going to show the current month in the current year. 17 00:01:00,990 --> 00:01:06,030 And if I want to go to a previous month or the next month, I'm going to put something like this in 18 00:01:06,030 --> 00:01:10,450 the early questionmark to say there's somewhere else. 19 00:01:10,620 --> 00:01:12,390 Are you were all parameters coming? 20 00:01:12,390 --> 00:01:18,440 Y equals twenty twenty one ampersand M equals one or something like that. 21 00:01:18,750 --> 00:01:25,640 So if I, if you are looks like that then I want to show the year 2021 and the month of January. 22 00:01:26,310 --> 00:01:29,180 And if I want to go to 2022 this would be a 20 22. 23 00:01:29,400 --> 00:01:32,580 But if these don't exist then just show the current month. 24 00:01:32,880 --> 00:01:34,840 So let's assume that's our logic. 25 00:01:35,220 --> 00:01:42,570 So what I'm going to do in my handler, the very first thing I'm going to do is assume that the there 26 00:01:42,570 --> 00:01:48,570 is no month, that there is no month or year specified. 27 00:01:48,930 --> 00:01:50,700 And if there is, we'll change it later on. 28 00:01:50,710 --> 00:01:54,480 But right now, let's just go with now is equal to time now. 29 00:01:55,020 --> 00:02:00,070 And we're going to use this to calculate which calendar month and year we show. 30 00:02:00,360 --> 00:02:05,940 So that's defaults to the current time, which by default will give me the current year and the current 31 00:02:05,940 --> 00:02:06,300 month. 32 00:02:06,930 --> 00:02:15,750 And then we check to see if there are some query parameters, if our euro query doget. 33 00:02:16,020 --> 00:02:20,520 And my key would be why I just have to get one of them, because if is there, I can assume the other 34 00:02:20,520 --> 00:02:21,420 one is going to be there. 35 00:02:21,750 --> 00:02:23,100 If that's not equal to nothing. 36 00:02:23,550 --> 00:02:27,740 And if they don't exist, if they're not in the euro, then this will be empty. 37 00:02:27,770 --> 00:02:32,570 So but if they're not empty, then I know that the year specified and I can assume the month is specified. 38 00:02:33,030 --> 00:02:38,580 So what I'll do is grab the year and month year and I won't bother checking for an error right now because 39 00:02:38,580 --> 00:02:39,600 you know how to handle that. 40 00:02:40,170 --> 00:02:50,430 Sturgeons Atai and then I just get the year parameter argu url query get y that will give me the year 41 00:02:50,430 --> 00:02:56,420 and let's duplicate this and change that to month and change this to M. 42 00:02:56,760 --> 00:03:01,980 So those will be the parameters that I specify and those will come by from clicking on the buttons on 43 00:03:01,980 --> 00:03:03,480 that page which we'll get to shortly. 44 00:03:04,590 --> 00:03:09,780 So now I've got the year in the month which exist only within this if block because they're being assigned 45 00:03:09,780 --> 00:03:11,770 to a variable in that if block. 46 00:03:11,790 --> 00:03:12,630 What am I going to do with them? 47 00:03:12,810 --> 00:03:18,390 I'm just going to reset the value of now instead of now being the current date and time that will be 48 00:03:18,390 --> 00:03:23,940 equal to let's manually reset the time to what we want time, date. 49 00:03:24,540 --> 00:03:26,100 And that takes a lot of parameters. 50 00:03:26,460 --> 00:03:33,870 It takes the year which has to be in the form of year end and then it takes the month, which, for 51 00:03:33,870 --> 00:03:39,330 reasons I've never understood, has to be converted to a time month, which is easy to do, fortunately, 52 00:03:39,630 --> 00:03:40,770 time, not month. 53 00:03:41,220 --> 00:03:46,860 And then we just put a month in there and the next parameter is, well, the rest of them are going 54 00:03:46,860 --> 00:03:49,830 to the next one is the day I'll just set any day in the month. 55 00:03:49,830 --> 00:03:57,240 I know that every day has at least the first and then hours, minutes, seconds, nanoseconds, which 56 00:03:57,240 --> 00:03:59,040 I'll just leave at zero because I don't care what they are. 57 00:03:59,040 --> 00:04:02,460 And then any location, which I'll just set two time UTC. 58 00:04:03,510 --> 00:04:11,100 What we've done here is to say if the the variable or the euro parameter y exists, then get the URL 59 00:04:11,100 --> 00:04:18,180 parameter Y converted to an and get the euro parameter M for month, convert it to an end and reset 60 00:04:18,210 --> 00:04:26,250 now to be equal to the year specified here, the month specified here and then the first day and everything 61 00:04:26,250 --> 00:04:27,420 else is just set to zero. 62 00:04:27,420 --> 00:04:32,270 So I don't care about the time and that resets my now and that works quite well. 63 00:04:32,790 --> 00:04:36,240 OK, what do we want to do next? 64 00:04:36,390 --> 00:04:38,430 Well, let's think about this. 65 00:04:38,670 --> 00:04:48,810 When you have the page displayed, you want to put the next month and next year values on one button 66 00:04:49,200 --> 00:04:53,580 and the next the previous month and the previous year values on another button. 67 00:04:54,360 --> 00:04:56,700 So let's get started. 68 00:04:57,840 --> 00:04:59,910 Next is going to be a variable. 69 00:05:00,590 --> 00:05:09,080 And it's going to be based on the value of now, but it will be equal to now and add one month and date 70 00:05:09,650 --> 00:05:14,330 and the parameters for that particular function that are built into the time package are the number 71 00:05:14,330 --> 00:05:16,220 of years you want to add none. 72 00:05:16,730 --> 00:05:21,600 The number of months you want to add one and the number of days you want to add zero. 73 00:05:21,980 --> 00:05:26,450 That gives me next month and obviously I need a last month as well. 74 00:05:26,450 --> 00:05:29,090 So I'll call that last is equal to now. 75 00:05:29,540 --> 00:05:30,470 Add date again. 76 00:05:30,470 --> 00:05:30,770 It's not. 77 00:05:30,770 --> 00:05:31,430 Subtract it. 78 00:05:31,430 --> 00:05:32,770 You'd think it would be, but it's not. 79 00:05:32,780 --> 00:05:37,280 Instead you add a negative number and that gives me last month. 80 00:05:37,460 --> 00:05:38,840 So now I have those variables. 81 00:05:39,110 --> 00:05:40,190 What am I going to do with them? 82 00:05:40,220 --> 00:05:42,110 Well, I need to format them correctly. 83 00:05:42,500 --> 00:05:48,490 So let's say next month, which is a time sorry, next month is not a time. 84 00:05:48,590 --> 00:05:53,990 Next month is based upon next, which is a time and that's going to be formatted. 85 00:05:54,170 --> 00:05:57,980 I just want to get the month zero one. 86 00:05:59,510 --> 00:06:04,910 So all that's going to do is print next the time using this format. 87 00:06:05,240 --> 00:06:11,390 And remember from our our date format string that Gore uses zero one will give me a two digit month 88 00:06:11,390 --> 00:06:12,190 and that's all I want. 89 00:06:12,590 --> 00:06:19,330 So then I want next month, year, the year for next month, because you can't just add one to it. 90 00:06:19,340 --> 00:06:21,650 You might be going from twelve to one, for example. 91 00:06:22,010 --> 00:06:23,990 That's going to be NextG format. 92 00:06:24,320 --> 00:06:31,940 And here I want the year 2006 and all that will do is create a string that is formatted as a four digit 93 00:06:31,940 --> 00:06:34,220 year and this will create a string that's a format. 94 00:06:34,220 --> 00:06:42,500 It is a two month and we do the same thing for last month and that will be equal to last format zero 95 00:06:42,590 --> 00:06:42,920 one. 96 00:06:44,120 --> 00:06:49,620 And I'll just duplicate this and add year to it and make this twenty six. 97 00:06:50,420 --> 00:06:52,850 So now I have those strings, which is pretty simple. 98 00:06:53,390 --> 00:06:54,800 Let's create a string map. 99 00:07:02,810 --> 00:07:08,270 And put those values in it, so I will put in a string map and I'll call it next. 100 00:07:09,990 --> 00:07:14,190 Underscore month will be equal to next month. 101 00:07:17,550 --> 00:07:20,720 And I've got to put a G in string map there. 102 00:07:22,480 --> 00:07:32,560 String map next, I'll call it next month, year, because it's not necessarily next year, but it is 103 00:07:32,560 --> 00:07:43,360 for the year, for the next month that will be equal to next month, year and then string map last month. 104 00:07:45,870 --> 00:07:48,180 Will be equal to last month. 105 00:07:50,410 --> 00:07:51,700 And last month, year. 106 00:07:53,990 --> 00:07:59,030 Will be equal to last month here and will pass that string map in our template data. 107 00:08:06,260 --> 00:08:13,340 There so I have that information that will give me the information necessary to build those previous 108 00:08:13,340 --> 00:08:15,220 month and next month buttons. 109 00:08:15,290 --> 00:08:16,640 That's enough information for that. 110 00:08:16,940 --> 00:08:18,500 But what else do I want in there? 111 00:08:18,530 --> 00:08:24,200 Well, if you remember, what I wanted on this page was the current month and the current year displayed 112 00:08:24,200 --> 00:08:27,480 up here and the buttons below them, one over here and one over here maybe. 113 00:08:27,890 --> 00:08:28,570 Well, let's do that. 114 00:08:28,580 --> 00:08:35,000 We already know what now is now is either the current date and time or the current year and month that 115 00:08:35,000 --> 00:08:40,760 we specified when passing query parameters so we can calculate that easily enough. 116 00:08:41,630 --> 00:08:44,990 String map this month. 117 00:08:47,110 --> 00:08:47,800 Try that again. 118 00:08:51,070 --> 00:08:56,350 This month will be equal to now that format. 119 00:08:58,420 --> 00:09:05,680 And I'll put two zero on there for now just to put the numeric month and this month year. 120 00:09:09,970 --> 00:09:14,170 And we're going to need it in this format, as you'll see a little while, 2006. 121 00:09:14,190 --> 00:09:15,580 OK, so that's a good start. 122 00:09:15,610 --> 00:09:17,190 I have all of this information. 123 00:09:17,770 --> 00:09:19,980 What am I going to do with it? 124 00:09:19,990 --> 00:09:21,580 Do it, do with it on this page? 125 00:09:21,610 --> 00:09:24,760 Well, first of all, let's just stop our application to make sure everything compiles. 126 00:09:29,360 --> 00:09:38,030 It does good, so let's go back to our Idy and find the calendar page, which is right here, and get 127 00:09:38,030 --> 00:09:40,710 rid of this dummy content and put some information in there. 128 00:09:40,730 --> 00:09:49,040 So to start with, I will say div class equals text center just to center something and I'll put in 129 00:09:49,280 --> 00:09:56,570 index dot string map and I'll put in the current month, which is this month. 130 00:09:58,640 --> 00:10:05,780 And then after that, I'll do exactly the same thing that put the air in their index dot string map. 131 00:10:09,300 --> 00:10:11,670 This year, this month here, I think I called it. 132 00:10:13,050 --> 00:10:18,090 OK, so let's save that and reload the page and just make sure that stuff shows up and it does. 133 00:10:18,120 --> 00:10:20,100 So I want that actually to say something else. 134 00:10:20,100 --> 00:10:21,060 I don't want it to be 12. 135 00:10:21,060 --> 00:10:24,120 I want it to be December, but I'll take care of that later. 136 00:10:24,150 --> 00:10:29,130 In the meantime, let's wrap this whole thing in an H3 tag just to make it look a little bit bigger. 137 00:10:31,500 --> 00:10:32,340 Reload this. 138 00:10:32,440 --> 00:10:33,300 OK, that's better. 139 00:10:34,470 --> 00:10:39,330 And then I want to button over here and a button over here. 140 00:10:39,330 --> 00:10:41,400 So let's create those buttons. 141 00:10:42,270 --> 00:10:43,760 Obviously, I need to float. 142 00:10:43,980 --> 00:10:54,300 So I will say div class equals float left for the left button and then I'll have div class equals float. 143 00:10:54,300 --> 00:10:54,810 Right. 144 00:10:57,140 --> 00:11:02,870 For the right button and then, as I said, last lecture, you need to put in div. 145 00:11:04,980 --> 00:11:10,350 Class equals clear fix any time you're floating things around that make sure that everything shows up 146 00:11:10,350 --> 00:11:10,910 properly. 147 00:11:11,250 --> 00:11:12,480 So let's put a couple of buttons in. 148 00:11:13,710 --> 00:11:18,230 This will be an A class equals and I'll make it a button. 149 00:11:18,240 --> 00:11:19,700 I'll make it a small button. 150 00:11:19,960 --> 00:11:26,370 I don't want it to be too big and I'll make it button outline secondary, which will look pretty nice. 151 00:11:26,820 --> 00:11:34,830 And the ref for that will be equal to exactly the page we're on right now, which is slash admin, slash 152 00:11:35,190 --> 00:11:38,690 reservations dash calendar. 153 00:11:39,660 --> 00:11:47,220 But this time we're going to pass some query parameters y equals and that's going to come from index 154 00:11:48,370 --> 00:11:49,920 dot string map. 155 00:11:50,520 --> 00:11:54,510 And I'm sorry, but this is going to be along the line index string map. 156 00:11:54,510 --> 00:12:02,460 And the key for that that I'm looking it up with is last month, year that will give me part of it. 157 00:12:03,150 --> 00:12:10,740 And then I need an ampersand and the next one is M equals for the month for last the last month, which 158 00:12:10,740 --> 00:12:15,210 will be index dot from string map. 159 00:12:16,140 --> 00:12:18,690 And the key is last month. 160 00:12:20,410 --> 00:12:25,930 And then I need to put something inside of those so I can make this a little bit shorter by putting 161 00:12:25,930 --> 00:12:29,430 this here, there, I need to put some text in there. 162 00:12:32,650 --> 00:12:38,470 So I don't want to put a whole lot of words in there, I'll just put those in I'll put in a you could 163 00:12:38,470 --> 00:12:40,680 type it like this, but it will confuse your HTML. 164 00:12:40,930 --> 00:12:49,290 So instead, I'll say ampersand less than Lety and then another ampersand less than Lety. 165 00:12:49,810 --> 00:12:55,990 So that's just a way of rendering a less than sine, which is, of course, how you close the tag so 166 00:12:55,990 --> 00:12:59,350 you don't want to have those showing up and just messing up your e-mail. 167 00:12:59,350 --> 00:13:00,650 So instead you render them this way. 168 00:13:00,760 --> 00:13:04,720 Let's save that and make sure that this actually renders the way we want it to. 169 00:13:06,330 --> 00:13:06,790 There it is. 170 00:13:07,180 --> 00:13:08,800 And you are l should be. 171 00:13:09,880 --> 00:13:13,450 It is 2020 is the year and 11 is the month. 172 00:13:13,450 --> 00:13:16,000 And I'm doing this in December of twenty twenty. 173 00:13:16,000 --> 00:13:16,840 So that's perfect. 174 00:13:17,350 --> 00:13:22,030 So now let's copy this entire HSF and just change the values. 175 00:13:24,290 --> 00:13:31,070 For the right and the first thing I'm going to change is the index string string that last month is 176 00:13:31,070 --> 00:13:36,110 actually next month, year and last month becomes next month. 177 00:13:37,370 --> 00:13:39,050 And I don't want less than signs. 178 00:13:39,050 --> 00:13:40,260 I want greater than signs. 179 00:13:40,320 --> 00:13:46,610 I'll just delete those and go ampersand G.T. for greater then and then another one ampersand for greater 180 00:13:46,610 --> 00:13:48,890 than save that and reload. 181 00:13:49,910 --> 00:13:54,590 And there is one that should go to January of twenty twenty one and it does. 182 00:13:54,950 --> 00:13:58,610 So if I click on that it actually takes me the correct year. 183 00:13:58,610 --> 00:14:03,260 And if I click to this one, everything seems to be working just exactly the way that I want. 184 00:14:03,800 --> 00:14:05,690 OK, that's enough for this time around. 185 00:14:05,690 --> 00:14:07,730 In the next one we'll do a couple of things. 186 00:14:07,730 --> 00:14:13,910 We'll start writing our actual calendars and we might get around to changing that to the current year 187 00:14:13,910 --> 00:14:17,090 as a current month as a textual value instead. 188 00:14:17,270 --> 00:14:19,550 And we'll take care of that in the next lecture or two.