1

00:00:01,110 --> 00:00:08,430

So now we want to make this actually work, so when you click on dates that are available, you actually



2

00:00:08,430 --> 00:00:14,010

get the ability to go to a page to complete the reservation for this given room for the date you've



3

00:00:14,010 --> 00:00:18,270

chosen or to display an error message saying, nope, those dates aren't available.



4

00:00:18,720 --> 00:00:25,410

So right now, if I choose the second and the third and click, OK, it just writes to the console and



5

00:00:25,410 --> 00:00:30,210

it says, room is not available, which isn't very helpful because our visitors to this site almost



6

00:00:30,210 --> 00:00:32,900

certainly are not looking at the JavaScript console.



7

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

So let's get started.



8

00:00:35,310 --> 00:00:39,300

So first thing I'm going to do is look at this code right here.



9

00:00:39,300 --> 00:00:46,530

And one of the things I want to do is to actually modify this, to say that if it's available, then



10

00:00:46,530 --> 00:00:47,140

display it.



11

00:00:47,160 --> 00:00:50,390

So what I can do here is I'll do the not available first.



12

00:00:50,400 --> 00:00:53,790

So instead of saying the room is not available, the logic here is perfect.



13

00:00:53,790 --> 00:00:55,710

If OK, do what I want to do.



14

00:00:55,710 --> 00:00:58,080

If there's no availability, then do something else.



15

00:00:58,620 --> 00:01:05,190

All I'll do here is just display display an error message and I can do that using our attention, attention,



16

00:01:07,530 --> 00:01:08,730

dort error.



17

00:01:10,350 --> 00:01:15,030

And inside of that we just specify the message you want and message for now just can be whatever you



18

00:01:15,030 --> 00:01:15,330

want.



19

00:01:15,330 --> 00:01:20,430

But I'm just going to put no availability and try that and see how it works.



20

00:01:21,350 --> 00:01:23,150

And that should be a comma, not a semicolon.



21

00:01:23,570 --> 00:01:28,840

So I'll go back to my console, reload this page, check availability.



22

00:01:28,880 --> 00:01:35,210

I know there's no availability on the second to the third because I verified that in the database and



23

00:01:35,210 --> 00:01:37,760

I'll click, OK, now it says no availability.



24

00:01:37,910 --> 00:01:38,270

Great.



25

00:01:38,390 --> 00:01:39,200

So that's perfect.



26

00:01:39,230 --> 00:01:39,920

So that was easy.



27

00:01:40,490 --> 00:01:42,470

But what if something is right?



28

00:01:43,010 --> 00:01:46,250

What if in fact, I can display the message?



29

00:01:46,280 --> 00:01:54,470

What I probably should do is display a dialog box that has some HTML in it with a link to a route that



30

00:01:54,470 --> 00:01:59,450

I'll create that will grab the information that we pass to that route and then just take us over the



31

00:01:59,450 --> 00:02:00,350

reservation page.



32

00:02:00,510 --> 00:02:01,740

So that should be pretty straightforward.



33

00:02:02,030 --> 00:02:04,530

So let's get rid of this console log and get started.



34

00:02:05,510 --> 00:02:10,940

So the first thing I'll do is I'll call attention and I'll call the customer because I'm actually going



35

00:02:10,940 --> 00:02:13,030

to build a custom dialog here, OK?



36

00:02:13,940 --> 00:02:22,160

And the parameters for that will be as follows will put the icon success, which may not be set up in



37

00:02:22,340 --> 00:02:23,000

our custom yet.



38

00:02:23,000 --> 00:02:24,700

But if it's not Will, we'll fix that.



39

00:02:25,190 --> 00:02:26,670

So icon will be success.



40

00:02:26,690 --> 00:02:32,330

I want to display a nice animation of the checkmark that Sweedler gives us and then I'll just write



41

00:02:32,330 --> 00:02:33,010

some HTML.



42

00:02:33,050 --> 00:02:34,370

And for right now I'll just put.



43

00:02:37,770 --> 00:02:39,720

In a paragraph tag room.



44

00:02:42,520 --> 00:02:45,250

Is available and closed by paragraph.



45

00:02:46,330 --> 00:02:48,580

Then I want to continue this string because I want more in it.



46

00:02:49,210 --> 00:02:50,200

Saltpetre plus side.



47

00:02:51,950 --> 00:02:56,960

And then I'll put another paragraph tag, and inside of that, I'll put in a HSF equals and I don't



48

00:02:56,960 --> 00:03:00,080

have the path yet, so I'll fix this.



49

00:03:00,980 --> 00:03:09,770

I'll just put a placeholder for the sheriff and class equals button button primary and then I'll put



50

00:03:09,770 --> 00:03:18,070

my message in there, which is I'll just continue this on the next line inside of the attack.



51

00:03:18,080 --> 00:03:21,530

I'll just put the book now.



52

00:03:23,720 --> 00:03:27,320

And then I'll close my eyes and close my PAETEC.



53

00:03:29,300 --> 00:03:38,200

So I have an icon which we may have to set up in our in our actual JavaScript for this module, but



54

00:03:38,210 --> 00:03:39,230

we'll find that out in a minute.



55

00:03:40,040 --> 00:03:43,800

And I'm going to just do that for right now.



56

00:03:43,850 --> 00:03:45,130

OK, so let's see what happens.



57

00:03:47,150 --> 00:03:53,240

Go back here, reload this page, check for availability, and I'll choose dates that I know are available



58

00:03:53,240 --> 00:03:55,160

sometime in February 9th and the 10th.



59

00:03:55,490 --> 00:03:58,120

OK, and it gives me a cold.



60

00:03:58,140 --> 00:03:58,940

That's not good.



61

00:04:00,140 --> 00:04:01,280

But her spell attention, right?



62

00:04:01,460 --> 00:04:02,060

Safe.



63

00:04:04,050 --> 00:04:06,300

Relo check availability.



64

00:04:09,890 --> 00:04:12,690

In February, the ninth to the tenth, OK?



65

00:04:13,400 --> 00:04:18,260

And it gave me the room is available with a book now button, but I also have this OK button, which



66

00:04:18,260 --> 00:04:19,400

doesn't do anything now.



67

00:04:19,400 --> 00:04:25,460

I could if I wanted to put the time into it, I could find out how this button is rendered in Sweedler



68

00:04:25,940 --> 00:04:28,670

and I could actually make that my link.



69

00:04:29,120 --> 00:04:35,420

But the problem we have is recalling if you look at our JavaScript here, we already were inside a callback



70

00:04:35,420 --> 00:04:37,780

and I'd have to have a callback inside a callback.



71

00:04:37,790 --> 00:04:39,290

I'm not sure I want to do that right now.



72

00:04:39,500 --> 00:04:42,140

So what I'm going to do is just hide that OK button.



73

00:04:42,140 --> 00:04:46,370

I'll find a way to hide this and I find a way to display the checkmark icon here.



74

00:04:46,400 --> 00:04:53,120

So let's go back to our base layout and find that section where we have our attention.



75

00:04:53,690 --> 00:04:56,030

Custom error.



76

00:04:56,060 --> 00:04:56,790

Here's custom.



77

00:04:57,170 --> 00:05:02,480

OK, first of all, let's allow an icon to be specified and we'll make that equal to nothing if it's



78

00:05:02,480 --> 00:05:03,410

not specified.



79

00:05:03,860 --> 00:05:07,580

And then down here we'll just say icon will be icon.



80

00:05:08,570 --> 00:05:12,320

And the other thing I want to do is to hide the confirm button.



81

00:05:12,320 --> 00:05:20,900

And if you look at the documentation for Sweedler, it actually has an option called show confirm button



82

00:05:21,290 --> 00:05:22,340

and I'll default.



83

00:05:22,340 --> 00:05:23,090

That's true.



84

00:05:23,240 --> 00:05:24,770

Which is what the default is.



85

00:05:25,130 --> 00:05:28,100

But down here, I'll actually allow us to override it.



86

00:05:28,190 --> 00:05:34,390

Show confirmed button equals or colon show confirm button.



87

00:05:35,160 --> 00:05:36,430

OK, so let's do that.



88

00:05:37,070 --> 00:05:46,520

Now we go back to our generals page and we'll pass it a parameter show confirm button faults.



89

00:05:46,970 --> 00:05:48,820

Let's save that and see what happens.



90

00:05:49,400 --> 00:05:51,250

So let's reload this check.



91

00:05:51,320 --> 00:05:57,440

Some dates we know are available back in February 9th, the 10th and click.



92

00:05:57,440 --> 00:06:00,290

OK, ok, so that didn't quite work.



93

00:06:00,290 --> 00:06:05,060

Show confirmed button didn't hide, but I did get my checkmark so I must have a typo in there somewhere.



94

00:06:06,530 --> 00:06:07,760

So back to base layout.



95

00:06:07,760 --> 00:06:12,830

We have show, confirm button to show, confirm button and a show can confirm buttons equal to true.



96

00:06:12,950 --> 00:06:14,090

So let's copy this.



97

00:06:14,930 --> 00:06:18,500

Go back to the generals page show confirm button.



98

00:06:18,560 --> 00:06:19,550

It looks like it's right.



99

00:06:19,760 --> 00:06:21,890

Maybe it's just not cached cached or something.



100

00:06:21,890 --> 00:06:23,750

She'll convert over but it's false.



101

00:06:24,260 --> 00:06:25,310

Oh I put it in the wrong spot.



102

00:06:25,310 --> 00:06:25,730

That's why.



103

00:06:26,090 --> 00:06:26,700

Get rid of that.



104

00:06:28,190 --> 00:06:28,960

Try that again.



105

00:06:29,630 --> 00:06:30,890

Attention success.



106

00:06:31,520 --> 00:06:32,450

It belongs here.



107

00:06:32,540 --> 00:06:35,900

I'm sure you noticed that and are laughing at me right now and that's fine.



108

00:06:35,900 --> 00:06:38,000

Lots of people have laughed at me over the years.



109

00:06:38,390 --> 00:06:44,780

So let's reload this page, check availability, choose dates that we know are available and there should



110

00:06:44,780 --> 00:06:46,070

be nothing in January.



111

00:06:46,070 --> 00:06:48,710

Click OK, room is available.



112

00:06:48,710 --> 00:06:50,300

So I have my book now button here.



113

00:06:50,300 --> 00:06:52,820

I have my cancel button here if you want to.



114

00:06:53,360 --> 00:07:00,080

You can actually look at the Sweedler documentation and hide the cancel button and make your own programmatically,



115

00:07:00,320 --> 00:07:03,020

but I'll leave that as an exercise for you right now.



116

00:07:03,140 --> 00:07:05,540

This will work, but I need an RF in there.



117

00:07:05,540 --> 00:07:12,170

I need something to go to that I can pass the three pieces of information that I'm going to need before



118

00:07:12,170 --> 00:07:14,720

I can display that make reservation page.



119

00:07:14,720 --> 00:07:18,170

And what I need are the remedy, the start date and the end date.



120

00:07:18,320 --> 00:07:19,730

So let's go modify.



121

00:07:19,760 --> 00:07:21,170

Are you Earl, right here?



122

00:07:22,220 --> 00:07:30,020

And instead of doing this, I'm going to say H.F. equals slash and I'll choose something for a let's



123

00:07:30,020 --> 00:07:37,430

just call it room book room and then it's going to take some parameters, but I'll pass those as a get



124

00:07:37,430 --> 00:07:37,940

request.



125

00:07:38,180 --> 00:07:41,210

I want I'm going to pass are the ID, which will be the remedy.



126

00:07:41,780 --> 00:07:53,150

So I'm going to um, right here, close my string and put a plus sign and in between those.



127

00:07:53,150 --> 00:07:58,160

So the ID is going to be equal to my remedy, which I already have.



128

00:07:58,490 --> 00:08:02,750

That is my data dot room ID.



129

00:08:03,890 --> 00:08:07,280

Actually we don't have that yet, but we will in a minute so we'll put a plus sign here.



130

00:08:08,630 --> 00:08:15,140

What I'm going to have to do is modify the Jason to hand back the remedy, the start date and the end



131

00:08:15,140 --> 00:08:15,350

date.



132

00:08:15,530 --> 00:08:17,840

But let's set up the URL first and then we'll go do that in a minute.



133

00:08:18,620 --> 00:08:23,290

So data room ID plus and inside the string, we're back to building our you.



134

00:08:23,300 --> 00:08:29,060

Well, now we have to get our next parameter, which we do with an ampersand and I'll put S equals four



135

00:08:29,060 --> 00:08:37,130

start date plus data start date plus ampersand e equals.



136

00:08:37,130 --> 00:08:43,250

And this will be the end date deck plus DataDot end date.



137

00:08:44,390 --> 00:08:46,790

And let's see what's after that.



138

00:08:47,870 --> 00:08:49,760

We have our H.F. Open.



139

00:08:50,300 --> 00:08:57,530

Good we have our uro then questionmark id equals plus that ampersand s equals in that ampersand equals



140

00:08:57,530 --> 00:08:57,980

in that.



141

00:08:57,980 --> 00:09:04,430

And then we close our we have to close our query here.



142

00:09:06,470 --> 00:09:08,450

So that would be right after data and date.



143

00:09:09,610 --> 00:09:13,060

This should have a single quote there.



144

00:09:13,180 --> 00:09:17,350

All right, so that should give us a valid YORO.



145

00:09:17,350 --> 00:09:21,520

Let's make sure it works before we do anything to make it work.



146

00:09:21,520 --> 00:09:25,870

We have to actually pass remedies, start date and end date back from our handlers.



147

00:09:25,950 --> 00:09:27,040

Let's go back to our handlers.



148

00:09:28,030 --> 00:09:30,310

Let's find the availability, Jason, right here.



149

00:09:30,310 --> 00:09:31,900

And there's the Jason response type.



150

00:09:31,940 --> 00:09:38,830

Now, I want to include three more pieces of information room ID, which will be a string.



151

00:09:40,480 --> 00:09:41,950

And I'm going to call it in Jason.



152

00:09:41,950 --> 00:09:48,730

I'll call it room I.D. Then we need to start date, which will also be a string.



153

00:09:49,240 --> 00:09:54,100

And in Jason, I'll call that start date and end date.



154

00:09:58,200 --> 00:10:03,130

All right, so I've redefined my type now I just need to populate the information that I send back.



155

00:10:03,150 --> 00:10:10,320

So here I can say start date that will be equal to well, I already have it in SD, so I'm able to use



156

00:10:10,320 --> 00:10:17,070

that and date, which is EDI's and relighting now relighting is actually an ENT.



157

00:10:18,240 --> 00:10:21,390

What I have here is I'm getting that remedy into it.



158

00:10:21,390 --> 00:10:27,990

And so I need to convert that to a string and I can just use my Starcom and this time I'm going into



159

00:10:27,990 --> 00:10:29,550

a and that doesn't throw an error.



160

00:10:29,730 --> 00:10:35,230

It just gives me the the the string back so I can just in there put remedy.



161

00:10:36,570 --> 00:10:37,020

All right.



162

00:10:37,110 --> 00:10:40,320

Now if I start my application, start my application.



163

00:10:42,320 --> 00:10:48,880

They compiled go back here, reload this page, clear the console just in case there's an error somewhere



164

00:10:49,340 --> 00:10:54,270

and check availability and look for dates that I know are available sometime in January.



165

00:10:54,290 --> 00:10:56,240

So the 12th to the 13th and click.



166

00:10:56,240 --> 00:10:59,030

OK, now I have a link here.



167

00:10:59,030 --> 00:11:05,090

And that link I can see in the lower left hand corner says, go to Bucaram with an idea of one, which



168

00:11:05,090 --> 00:11:06,560

is the idea of the generals quarters.



169

00:11:06,680 --> 00:11:08,640

And there's our start date and there's our end date.



170

00:11:08,870 --> 00:11:09,440

Perfect.



171

00:11:09,710 --> 00:11:17,210

So now all I need to do is to set up my new route for book dash room, grab those parameters that are



172

00:11:17,210 --> 00:11:23,390

passed as a get request, construct a sectional variable for the reservation, stick it in the session



173

00:11:23,390 --> 00:11:25,240

and then take us over to the make reservation page.



174

00:11:25,250 --> 00:11:29,090

And that should be really easy and we'll take care of that in the next lecture.