1

00:00:01,740 --> 00:00:06,230

So this time we want to make this button do something more than just show these dates.



2

00:00:06,240 --> 00:00:09,630

And as you may have noticed, we can still select dates in the past here.



3

00:00:09,630 --> 00:00:11,940

So we're going to we're going to want to fix that, too.



4

00:00:12,060 --> 00:00:13,620

And that isn't too difficult.



5

00:00:13,650 --> 00:00:16,190

So let's go look at our code and see what we're doing at the moment.



6

00:00:16,920 --> 00:00:23,070

So in my roots right now, if I want to check availability and get the response as Jason, which is



7

00:00:23,070 --> 00:00:25,590

what we're doing on that page, here's my handler.



8

00:00:25,590 --> 00:00:27,080

It's availability, Jason.



9

00:00:27,780 --> 00:00:33,480

So I bring this up and I look at it and it says it's just constructing a response, which is this Jason



10

00:00:33,480 --> 00:00:34,790

response type right here.



11

00:00:35,190 --> 00:00:41,010

So it's going to hand back Jason that consists of OK and possibly a message, and I'm giving it false



12

00:00:41,010 --> 00:00:42,080

and available right now.



13

00:00:42,090 --> 00:00:43,040

And that's not useful.



14

00:00:43,620 --> 00:00:49,290

And if you look at the page Generals' page and this is the template for it right now, first thing I'm



15

00:00:49,290 --> 00:00:54,000

going to do is find that date range picture, which is here somewhere.



16

00:00:56,120 --> 00:00:57,150

They're the stereotypical.



17

00:00:57,500 --> 00:01:06,170

I will also give this the mandate and that will take care of the ability to select dates in the past.



18

00:01:06,180 --> 00:01:06,940

So that's fixed.



19

00:01:07,970 --> 00:01:11,830

Now, what we're doing here is on this callback function.



20

00:01:11,870 --> 00:01:18,190

This is where we're calling our Jason our our our search availability Jason path.



21

00:01:18,200 --> 00:01:23,120

So we're calling that handler I was just looking at and what it's passing, it is all of the data in



22

00:01:23,120 --> 00:01:26,090

a form with the name check check availability form.



23

00:01:26,210 --> 00:01:28,100

Well, do I have enough information in that form?



24

00:01:28,100 --> 00:01:30,920

If you recall, we set that up right here.



25

00:01:30,950 --> 00:01:33,770

This is a JavaScript string that says document.



26

00:01:33,770 --> 00:01:35,750

Guille gets the element by ID.



27

00:01:35,900 --> 00:01:42,200

When we click on that button, it then creates this HTML and that's what we use in our R pop up dialogue.



28

00:01:42,740 --> 00:01:46,850

And that is a form with the idea of reservation dates model.



29

00:01:46,850 --> 00:01:50,810

And the only thing in that is start date an ending and there's more information that we need.



30

00:01:50,840 --> 00:01:56,920

So back down here, we're actually passing in the CSF token manually.



31

00:01:57,710 --> 00:02:01,340

The start date in the end date get put into our request just by this.



32

00:02:01,370 --> 00:02:06,870

This let formed equals new form data and then it gets all of the elements in that form.



33

00:02:06,920 --> 00:02:09,740

We also need the remedy and right now we're on generals' quarters.



34

00:02:09,740 --> 00:02:14,690

So let's add another bit of data to this form data dot append.



35

00:02:15,680 --> 00:02:20,260

And we're going to call this remedy because we need that to be able to check availability for room.



36

00:02:20,720 --> 00:02:25,330

And the idea is one and I have to put that in as a string because that's what you put in form requests.



37

00:02:25,340 --> 00:02:26,640

It has to go in the form of a string.



38

00:02:27,590 --> 00:02:30,500

So now I have this information and I can pass it.



39

00:02:30,920 --> 00:02:35,750

And over in this handler, I need to get that information into a format I can work with.



40

00:02:35,900 --> 00:02:37,740

So I'm going to do it right between these things.



41

00:02:37,760 --> 00:02:39,080

This is going to disappear in a moment.



42

00:02:39,080 --> 00:02:40,340

But I'll put what I need in here.



43

00:02:40,760 --> 00:02:45,950

And what I definitely need in here is the start date, which I'll get is a string to start with our



44

00:02:46,190 --> 00:02:49,340

form douget and we called it start in that form.



45

00:02:49,850 --> 00:02:55,610

We also need the end date as a string, which is coming in as end, and we also need the remedy.



46

00:02:55,850 --> 00:03:01,520

And we can go room ID and I'll just ignore the air right now is equal to Sterkel.



47

00:03:03,340 --> 00:03:12,730

Awide ata form doget, and we're calling that room Viddy, and I need to convert these from a string



48

00:03:12,730 --> 00:03:18,490

format into the time time format because I'm going to call that database function that allows us to



49

00:03:18,490 --> 00:03:21,390

search for availability by room for a given date range.



50

00:03:21,850 --> 00:03:23,290

So you remember how to do that.



51

00:03:23,290 --> 00:03:31,300

You define a layout and that's just a string and it's in the form of a four digit year and a two digit



52

00:03:31,300 --> 00:03:33,880

month and a one day to day to day.



53

00:03:34,420 --> 00:03:40,330

And then we just convert our SD and add into time time.



54

00:03:40,480 --> 00:03:45,730

And we do that by saying start date and potentially an error, which I'm going to ignore right now,



55

00:03:47,380 --> 00:03:53,410

is equal to time pass layout and then start date.



56

00:03:54,400 --> 00:03:57,340

And I can do the same thing for Andy.



57

00:03:59,390 --> 00:04:00,800

As long as I change this to.



58

00:04:02,030 --> 00:04:06,770

All right, so now I have my start date, my end date and my remedy, and that's everything I need to



59

00:04:06,770 --> 00:04:11,990

call my database function so I can say I'm going to start in the boolean variable available and it's



60

00:04:11,990 --> 00:04:16,130

a boolean because that's what my my database function gives back to me.



61

00:04:16,130 --> 00:04:25,340

And I'll ignore the air right now is equal to or assign the value of IMDB dot search availability dates



62

00:04:25,340 --> 00:04:26,210

by Brumidi.



63

00:04:26,360 --> 00:04:31,310

And that takes my start date, my end date and my Romandie.



64

00:04:33,670 --> 00:04:40,000

So this variable is now set to true if things are available and it's set to false if things are not



65

00:04:40,000 --> 00:04:40,340

available.



66

00:04:40,780 --> 00:04:49,660

So what I can do is just take this response here, cut it out of this position and put it down into



67

00:04:49,660 --> 00:04:53,570

this position and change this fault's to available.



68

00:04:54,100 --> 00:04:56,920

I don't reply to available available.



69

00:04:57,660 --> 00:05:00,040

I don't really care about the message because I'm not going to use it.



70

00:05:00,040 --> 00:05:01,920

So I'll just leave that as an empty string for now.



71

00:05:02,020 --> 00:05:04,720

I could just leave it out entirely and it would default to an empty string.



72

00:05:05,410 --> 00:05:06,880

But this is what I'm going to do.



73

00:05:06,890 --> 00:05:11,230

Now, you may have noticed I'm ignoring an error here and I'm ignoring an error here and I'm ignoring



74

00:05:11,230 --> 00:05:13,270

an error here and I'm ignoring an error here.



75

00:05:14,110 --> 00:05:15,550

And that's not a good thing.



76

00:05:15,670 --> 00:05:17,590

I probably should do more than that.



77

00:05:17,860 --> 00:05:23,320

But in this situation where I know I'm sending JavaScript of a particular format, I'm less concerned



78

00:05:23,320 --> 00:05:23,650

about it.



79

00:05:24,160 --> 00:05:27,640

Honestly, if I was going into production, I would write the error handling code.



80

00:05:27,850 --> 00:05:31,840

But for the purposes of this lecture, you already know how to handle errors.



81

00:05:31,930 --> 00:05:33,670

So I'm not going to worry about that right now.



82

00:05:33,850 --> 00:05:35,970

I'll leave that as an exercise for you.



83

00:05:36,400 --> 00:05:40,710

So I have this all set up now and it seems that I'm getting exactly what I want.



84

00:05:40,990 --> 00:05:43,840

So let's stop, stop and start our application.



85

00:05:44,440 --> 00:05:45,940

Clear run.



86

00:05:49,080 --> 00:05:54,930

Let's go back to our Web browser, reload this page to make sure everything is current and make sure



87

00:05:54,930 --> 00:05:57,120

that it works the way it wants it's supposed to.



88

00:05:57,270 --> 00:06:00,360

OK, so right now that's I can't select dates in the past.



89

00:06:00,700 --> 00:06:06,510

I'll check for a date of, say, the 25th to the 26th and what's going to happen?



90

00:06:06,510 --> 00:06:13,020

Not much, because we didn't actually put anything in our page to determine to demonstrate whether we're



91

00:06:13,020 --> 00:06:14,240

getting a value back or not.



92

00:06:14,250 --> 00:06:22,430

So let's go back to our page and down here where I'm actually calling my handler, that returns, Jason.



93

00:06:22,800 --> 00:06:23,640

I'm posting it.



94

00:06:23,640 --> 00:06:24,150

That's great.



95

00:06:24,150 --> 00:06:25,080

It's got all the phone data.



96

00:06:25,080 --> 00:06:25,650

That's great.



97

00:06:25,860 --> 00:06:30,030

Then it takes our response and convert it to Jason and then I can do stuff with it.



98

00:06:30,040 --> 00:06:32,250

So what I'm going to do here is just change this.



99

00:06:33,720 --> 00:06:43,470

I'll get rid of the console log data and I'll say if DataDot OK, so if that's true, the console log



100

00:06:44,070 --> 00:06:45,600

room is available.



101

00:06:48,260 --> 00:06:48,830

ELT's.



102

00:06:51,490 --> 00:06:55,380

Console dialogue room is not available.



103

00:06:56,930 --> 00:07:03,020

All right, so let's try this, I don't need to restart my application because I'm actually rebuilding



104

00:07:03,020 --> 00:07:09,140

the page on every request in development mode and I'll open my terminal, my console, my JavaScript



105

00:07:09,140 --> 00:07:11,200

console, and I will check availability.



106

00:07:11,660 --> 00:07:18,650

So I'm going to look for the second to the third and search.



107

00:07:19,490 --> 00:07:21,500

And it says room is not available.



108

00:07:21,630 --> 00:07:22,890

Let's check availability again.



109

00:07:23,210 --> 00:07:28,880

Let's try something that should be available July, July 7th to July 8th.



110

00:07:30,080 --> 00:07:32,420

OK, room is available.



111

00:07:32,420 --> 00:07:35,210

It seems to be working exactly the way that I want.



112

00:07:35,210 --> 00:07:36,260

And you can verify that.



113

00:07:36,260 --> 00:07:42,800

And I recommend you do so by going to your database, looking at your room restrictions table, finding



114

00:07:42,800 --> 00:07:47,660

dates that, you know, that room is not available and searching on that and getting the correct response



115

00:07:47,960 --> 00:07:51,980

and then doing the same thing, but searching for dates, you know, are available and making sure you



116

00:07:51,980 --> 00:07:52,940

get the right response.



117

00:07:52,980 --> 00:07:59,600

And when we actually update our tests, we'll be doing this right in our tests to automate that process.



118

00:07:59,750 --> 00:08:05,480

But as a quick smoke test, as we sometimes call it, it's not at all unhelpful to test it that way.



119

00:08:06,470 --> 00:08:11,990

So what we need to do next is to actually, once the room is available to display useful information



120

00:08:11,990 --> 00:08:16,280

that says this room is available with the button that allows them to click to go make a reservation



121

00:08:16,550 --> 00:08:21,340

or to display an error message saying sorry, the selected dates are not available.



122

00:08:21,620 --> 00:08:24,530

Try another search and we'll do that in the next lecture.