So now we want to make this actually work, so when you click on dates that are available, you actually
get the ability to go to a page to complete the reservation for this given room for the date you've
chosen or to display an error message saying, nope, those dates aren't available.
So right now, if I choose the second and the third and click, OK, it just writes to the console and
it says, room is not available, which isn't very helpful because our visitors to this site almost
certainly are not looking at the JavaScript console.
So let's get started.
So first thing I'm going to do is look at this code right here.
And one of the things I want to do is to actually modify this, to say that if it's available, then
display it.
So what I can do here is I'll do the not available first.
So instead of saying the room is not available, the logic here is perfect.
If OK, do what I want to do.
If there's no availability, then do something else.
All I'll do here is just display display an error message and I can do that using our attention, attention,
dort error.
And inside of that we just specify the message you want and message for now just can be whatever you
want.
But I'm just going to put no availability and try that and see how it works.
And that should be a comma, not a semicolon.
So I'll go back to my console, reload this page, check availability.
I know there's no availability on the second to the third because I verified that in the database and
I'll click, OK, now it says no availability.
Great.
So that's perfect.
So that was easy.
But what if something is right?
What if in fact, I can display the message?
What I probably should do is display a dialog box that has some HTML in it with a link to a route that
I'll create that will grab the information that we pass to that route and then just take us over the
reservation page.
So that should be pretty straightforward.
So let's get rid of this console log and get started.
So the first thing I'll do is I'll call attention and I'll call the customer because I'm actually going
to build a custom dialog here, OK?
And the parameters for that will be as follows will put the icon success, which may not be set up in
our custom yet.
But if it's not Will, we'll fix that.
So icon will be success.
I want to display a nice animation of the checkmark that Sweedler gives us and then I'll just write
some HTML.
And for right now I'll just put.
In a paragraph tag room.
Is available and closed by paragraph.
Then I want to continue this string because I want more in it.
Saltpetre plus side.
And then I'll put another paragraph tag, and inside of that, I'll put in a HSF equals and I don't
have the path yet, so I'll fix this.
I'll just put a placeholder for the sheriff and class equals button button primary and then I'll put
my message in there, which is I'll just continue this on the next line inside of the attack.
I'll just put the book now.
And then I'll close my eyes and close my PAETEC.
So I have an icon which we may have to set up in our in our actual JavaScript for this module, but
we'll find that out in a minute.
And I'm going to just do that for right now.
OK, so let's see what happens.
Go back here, reload this page, check for availability, and I'll choose dates that I know are available
sometime in February 9th and the 10th.
OK, and it gives me a cold.
That's not good.
But her spell attention, right?
Safe.
Relo check availability.
In February, the ninth to the tenth, OK?
And it gave me the room is available with a book now button, but I also have this OK button, which
doesn't do anything now.
I could if I wanted to put the time into it, I could find out how this button is rendered in Sweedler
and I could actually make that my link.
But the problem we have is recalling if you look at our JavaScript here, we already were inside a callback
and I'd have to have a callback inside a callback.
I'm not sure I want to do that right now.
So what I'm going to do is just hide that OK button.
I'll find a way to hide this and I find a way to display the checkmark icon here.
So let's go back to our base layout and find that section where we have our attention.
Custom error.
Here's custom.
OK, first of all, let's allow an icon to be specified and we'll make that equal to nothing if it's
not specified.
And then down here we'll just say icon will be icon.
And the other thing I want to do is to hide the confirm button.
And if you look at the documentation for Sweedler, it actually has an option called show confirm button
and I'll default.
That's true.
Which is what the default is.
But down here, I'll actually allow us to override it.
Show confirmed button equals or colon show confirm button.
OK, so let's do that.
Now we go back to our generals page and we'll pass it a parameter show confirm button faults.
Let's save that and see what happens.
So let's reload this check.
Some dates we know are available back in February 9th, the 10th and click.
OK, ok, so that didn't quite work.
Show confirmed button didn't hide, but I did get my checkmark so I must have a typo in there somewhere.
So back to base layout.
We have show, confirm button to show, confirm button and a show can confirm buttons equal to true.
So let's copy this.
Go back to the generals page show confirm button.
It looks like it's right.
Maybe it's just not cached cached or something.
She'll convert over but it's false.
Oh I put it in the wrong spot.
That's why.
Get rid of that.
Try that again.
Attention success.
It belongs here.
I'm sure you noticed that and are laughing at me right now and that's fine.
Lots of people have laughed at me over the years.
So let's reload this page, check availability, choose dates that we know are available and there should
be nothing in January.
Click OK, room is available.
So I have my book now button here.
I have my cancel button here if you want to.
You can actually look at the Sweedler documentation and hide the cancel button and make your own programmatically,
but I'll leave that as an exercise for you right now.
This will work, but I need an RF in there.
I need something to go to that I can pass the three pieces of information that I'm going to need before
I can display that make reservation page.
And what I need are the remedy, the start date and the end date.
So let's go modify.
Are you Earl, right here?
And instead of doing this, I'm going to say H.F. equals slash and I'll choose something for a let's
just call it room book room and then it's going to take some parameters, but I'll pass those as a get
request.
I want I'm going to pass are the ID, which will be the remedy.
So I'm going to um, right here, close my string and put a plus sign and in between those.
So the ID is going to be equal to my remedy, which I already have.
That is my data dot room ID.
Actually we don't have that yet, but we will in a minute so we'll put a plus sign here.
What I'm going to have to do is modify the Jason to hand back the remedy, the start date and the end
date.
But let's set up the URL first and then we'll go do that in a minute.
So data room ID plus and inside the string, we're back to building our you.
Well, now we have to get our next parameter, which we do with an ampersand and I'll put S equals four
start date plus data start date plus ampersand e equals.
And this will be the end date deck plus DataDot end date.
And let's see what's after that.
We have our H.F. Open.
Good we have our uro then questionmark id equals plus that ampersand s equals in that ampersand equals
in that.
And then we close our we have to close our query here.
So that would be right after data and date.
This should have a single quote there.
All right, so that should give us a valid YORO.
Let's make sure it works before we do anything to make it work.
We have to actually pass remedies, start date and end date back from our handlers.
Let's go back to our handlers.
Let's find the availability, Jason, right here.
And there's the Jason response type.
Now, I want to include three more pieces of information room ID, which will be a string.
And I'm going to call it in Jason.
I'll call it room I.D. Then we need to start date, which will also be a string.
And in Jason, I'll call that start date and end date.
All right, so I've redefined my type now I just need to populate the information that I send back.
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
that and date, which is EDI's and relighting now relighting is actually an ENT.
What I have here is I'm getting that remedy into it.
And so I need to convert that to a string and I can just use my Starcom and this time I'm going into
a and that doesn't throw an error.
It just gives me the the the string back so I can just in there put remedy.
All right.
Now if I start my application, start my application.
They compiled go back here, reload this page, clear the console just in case there's an error somewhere
and check availability and look for dates that I know are available sometime in January.
So the 12th to the 13th and click.
OK, now I have a link here.
And that link I can see in the lower left hand corner says, go to Bucaram with an idea of one, which
is the idea of the generals quarters.
And there's our start date and there's our end date.
Perfect.
So now all I need to do is to set up my new route for book dash room, grab those parameters that are
passed as a get request, construct a sectional variable for the reservation, stick it in the session
and then take us over to the make reservation page.
And that should be really easy and we'll take care of that in the next lecture.