So this time around, we want this button.
Eventually the button on the front pages, but we want this button when we click on it, not to display
a toast.
We wanted to display the kind of form that we see right here with the nice pop up calendars and so on
and so forth.
And we can do that and we can do that by making our module smaller.
So go back to my code.
Here's what we left off last time.
We have this attention toast, which calls this prompt module because we've named a variable attention
and stored the value of this module into it.
We need to create a new function as part of this module and we will call that function customer because
we never know what kind of e-mail we're going to display in that popup.
Right now, we're going to put a search form, but later on we might use something else.
So as is the case before it takes a parameter C, we needed to find some values for that.
So we go const and we give it some names.
So message will be what we want to display in there and we'll make that a default to nothing.
And title will make that default to nothing as well as have to be equal signs, not quotes.
So let's fix that.
Great.
And that's going to be stored in sea and then we need another constant and here we're going to put value
form values, so we're going to take whatever is put into that form and do something with it.
So we want to fire the Sweedler.
So let's go over to the Sweedler documentation to find out, again, Sweedler.
And let's look at the documentation, other examples in type's.
So all the way down at the very bottom of input types, it gives me an example for how I can do something
like this, multiple inputs.
And that's what I want.
I want to input's.
I want them beside each other.
I don't want them one on top, but I want nice labels and I want to pop up Callendar.
But this seems to be the kind of feature that we want.
And when I click that, it shows me what you've entered into it.
So I could just copy this whole thing and use that as a starting point and get rid of what I've typed
already and paste it in here.
Now, when I do that, you'll notice that the word a weight is underlined and it says the weight operator
can only be used in an async function.
And that's an asynchronous function.
And that's what do I do here?
Well, it's really quite easy.
You go in front of the word function for custom and give it the type async and now that error goes away.
So let's think about what we want to do here.
I don't want this HTML at all.
I want to take the demo that I'm passing it, which I'm storing in the variable message so I can just
get rid of that and put MSG, which will be whatever we pass it when we when we call with our one line
of code.
So we have a title.
We want that again to not to be hard coded to to multiple inputs.
We want that to be title whatever we specify and if we specify nothing that stays empty.
So that's no problem.
And we have some other things I want to put in here as well.
One thing I don't want is I don't want the backdrop.
So I'll set that defaults.
That's that darkening of the background screen and it's just not something I want here and focus firm,
I'll leave defaults and do I want to show a cancel button?
Well, yeah, because sometimes I might click on that button and say, well, I don't really want to
search on this room.
Maybe I'll look at a different room.
So there's another option I could put in here saying show cancel button, which will be true.
OK, now.
Here, I'm calling some HTML that I've just deleted.
So if you go back and look at the Sweedler documentation, they're saying get element by ID swoll input,
one which refers to the HTML up here.
So that's not what I wanted to do right now.
Well, hmmm, how am I going to do this.
Well I'm going to create something and you know, let me come up here to where I'm going to call this
and let's create some HTML and we're going to store it in a JavaScript variable.
So what's it going to look like?
Well first of all, let's give it a name, let's call it Let HTML Equal.
And then I want to use back to quotes.
And the nice thing about this is it means that I can have HTML on multiple lines or values on multiple
lines without having to chop them up and put quotation marks and plus signs and everything else.
I'm going to put some e-mail in here and it's going to be equal to form because this is a form and I'll
give it an ID and I'll call that ID
check availability.
Form and this is going to have an action, but I don't know what it is right now, so I'll leave that
empty and the method is going to be, well, we'll make it post.
We're not going to do anything with it until we actually hook it up to a handler.
But we have to give it something and I'll put no validate in there.
Might not actually use that, but it's not going to hurt to put it.
And I'll have a class of needs validation, which I might not use right now, but you never know.
And of course, that has to have a closing time.
And then inside of that, I'm going to have a div class.
Equals form murro, because I want these things to be beside each other and underneath that I'll have
a div class equals call to hold the first one, the start date, and inside of that I will have a div
class equals form.
So again, just like we did last time.
And I'm going to give this an idea of reservation dates model.
And then inside of that, I will have my div class equals call.
And then I'm going to have an input and this will be my start date and I'll make it required and I'll
put class equals form control to make it look like the bootstrap input put the type will be equal to
text the name.
I'll make the start and the idea I'll make start.
And I'll give it a placeholder, just like I did in the last time we built this farm.
All right.
And then I'll close that call.
And I'll have another call and I'll just copy and paste this to make it faster copy paste and this will
be and not start and end, not start and departure.
All right, then.
I need to close my form, Ro.
And I need to close my call.
And then I need to close the reparative for the former.
All right, so that should be it for for the.
Now, I've given it a name of start and an idea of start.
A name of and in an idea that.
So let's go back down to our JavaScript and think about this.
So for the purposes of this exercise, all we have to do is get them started.
And I believe.
Yeah, start and end.
So start.
And say that, OK, so let's go down here and see how close we're getting, so we have this thing we're
calling custom and we want it to be called by custom.
And we go back up to our top where we're calling this and where is it?
Here it is so custom and the message will be not, oops, it'll be this variable HTML that I just created.
All right, let's save that and see what happens.
So I go back over to here and find my page and I reload this and see if we're getting close at all.
Hey, that looks not bad at all.
Maybe we should put a title in there so we can cancel this.
So let's call it the title.
Choose your dates and save up and reload this and open it.
That's not bad.
We're getting there now.
We don't have any calendar yet at all.
We need to somehow tell it to open these open a calendar when I when I when I open this page.
So let's come back here and see how we can do that.
Well, if we go back down to our JavaScript, what we want is after or just before it displays this
HTML that's stored in a variable message and it's called here we need to call some JavaScript.
So how are we going to do that?
Well, let's go back to our documentation on Sweetland and see if there's anything that will allow us
to do this.
OK, so let's see.
Method's maybe it's got something here.
We want it to search just before it opens.
So let's just look for the word open.
Hey, look at that will open.
So let's see what will open to us.
Copy that.
Find it will open pop up.
Life-cycle synchronously runs before the pop up is shown on the screen.
That's exactly what I want.
So let's put a function in here or a call to will open.
And what's it going to look like.
Well Will Open is going to just like pre confirm run this way.
And what do we want it to do?
Well, we want it to display that Pop-Up Calendar so we can do it the same same way we did on the other
screen.
We could just say Const Ellum, which is just a variable, I'm just going to call it that equals document
get element by ID.
And what did I call that?
I think I called it reservation dates model.
Let's make sure.
Yeah.
Reservation dates model.
So let's copy that.
We're getting that element by ID back down here.
Reservation dates model.
So we're getting a reference to that element and then we want to call our date picker.
Our range picture equals new date range picture.
On the element and then in curly brackets format, we use the same format we did last time year, once
month data and show on focus are set to true.
OK, so that means when you click on it, you should see it.
So that should hopefully open the day picture.
It's probably not going to, but let's find out.
So let's give it a try.
Reload the page.
Click on it.
Huh.
So it automatically opened my calendar and it stuck it behind this model.
Well, that's not exactly what I want.
I don't want it to open automatically.
Well, let's do the easy one first.
So let's inspect this page.
So I'll bring up my tools, find my inspector and click on this actual.
I'll see if I can get this whole calendar highlighted.
I'll get me close enough.
So this appears to be in a div with the class of date picture.
Now, we haven't actually gone through accessory in great detail yet, but we need to do a little bit
right now.
I need to override the default class S.O.S class for the div date pictured right here, which is the
whole calendar, and you need to change it so that it displays on top or closer to the two to us than
the actual model.
And that's called the Z Index.
We can fix that pretty easily.
So let's go back to our code and we'll go to the very top of the screen and we'll just put in dot date
picture up here and we'll give it a Z index.
I don't know how hard is how high it's supposed to be, but the bigger the number, the closer to the
top of the screen are the front of the screen, the closer to us than it is.
I'll put 10000 in there and hopefully that'll do it.
Save that.
Reload this page.
Open this up there.
So now it's displaying at least where it should be.
But I don't want this to fire automatically.
And what's making that happen?
Well, what's making it happen?
You notice the blue around this.
Firefox puts blue around it.
So does Chrome.
If your browser doesn't, you at least see the blinking cursor in there.
What this means is that Sweedler automatically puts the focus in the first element on this dialog.
I don't want it to do that.
Well, I mean, I, I can't really stop it from doing that.
But I need to make sure that when this dialog fires, when the the model comes up, that date picture
doesn't automatically display the calendar.
So how am I going to do that?
Well, we need to look at another life cycle hook that's part of this.
OK, so what I'm going to do is change my e-mail.
I'm going to make this input disabled, which means it can't take the focus.
I just do that putting the word disabled in there and I'll do the same thing for the second one.
Otherwise, it'll probably just display the calendar there for the end date.
So let's say that reload this.
I can close my inspection now because I'm not looking for e-mail or access and it should pop the dialog
and not pop the calendar and these should be disabled and they are OK.
So now at least I've got that it so it doesn't show the calendar.
But I want after this dialogue comes up, I need to get rid of that disabled attribute on both of those
inputs.
So how am I going to do that?
I'll go back down here and use another Life-cycle hook.
So if we go back to our Sweedler, you'll see there's another one that's called did open.
I searched for it, did open.
And this says Pop up, life-cycle hook asynchronously runs after the pop up has been shown on the screen.
All right.
So that's easy enough to do.
That's exactly what I want.
So I will now put here a call to did open and all I want wanted to do.
We need to use the same syntax that we did for the other ones.
So empty brackets, the pointer and inside these double quotes, all I want to do is to say document
get element by ID start and then I want to remove the attribute disabled and the JavaScript to do that
is not surprisingly called remove attribute and the attribute I want to remove is disabled.
And I'll do the same thing for end.
So what it's going to do when this is called, it's going to call it with a title that I've provided,
whatever HTML I provide, I'll turn the backdrop defaults.
I'm not going to confirm the focus, but put the focus on the confirm button.
I am going to show a cancel button before it opens.
It's going to call the date picker initialized the date picker on the element with the idea of reservation
dates model.
So that's the wrapper around the two inputs.
Then I specify the date format and whether or not I want it to show unfocussed to say true.
And then after it's opened, it's going to remove the disabled attribute on the start and the end inputs.
So I save this.
I go back here.
This should work.
Let's reload this.
Pop it up.
And there's my calendar now let's make sure it actually chooses dates, so I'll choose November the
twenty third and then I'll choose November the 24th and then when I click, OK, because all we're telling
it to do right now is just to show us what was entered on pre confirm it's going to return whatever
is in the start and whatever is in the end.
So hopefully when I click, OK, I get my start and I get my and there it is.
November 2013, November 24th.
All right.
So we can use that on our Roomba, the button on our room pages so it doesn't do anything yet.
And I'm not going to bother moving it now until I actually chop up the HTML and create our Goldwing
line templates.
But it seems as though we have the functionality we need to be able to search that to to display that
search form in a pop up dialogue.
All right.
Almost time to cut things up and put them into goaland templates.