1

00:00:00,960 --> 00:00:03,340

So this time around, we want this button.



2

00:00:03,750 --> 00:00:08,100

Eventually the button on the front pages, but we want this button when we click on it, not to display



3

00:00:08,100 --> 00:00:08,640

a toast.



4

00:00:09,180 --> 00:00:14,280

We wanted to display the kind of form that we see right here with the nice pop up calendars and so on



5

00:00:14,280 --> 00:00:14,790

and so forth.



6

00:00:14,820 --> 00:00:17,490

And we can do that and we can do that by making our module smaller.



7

00:00:17,970 --> 00:00:19,120

So go back to my code.



8

00:00:19,470 --> 00:00:20,940

Here's what we left off last time.



9

00:00:20,940 --> 00:00:27,510

We have this attention toast, which calls this prompt module because we've named a variable attention



10

00:00:27,510 --> 00:00:29,730

and stored the value of this module into it.



11

00:00:30,510 --> 00:00:40,650

We need to create a new function as part of this module and we will call that function customer because



12

00:00:40,650 --> 00:00:43,770

we never know what kind of e-mail we're going to display in that popup.



13

00:00:44,280 --> 00:00:47,150

Right now, we're going to put a search form, but later on we might use something else.



14

00:00:47,670 --> 00:00:52,730

So as is the case before it takes a parameter C, we needed to find some values for that.



15

00:00:52,740 --> 00:00:56,220

So we go const and we give it some names.



16

00:00:56,220 --> 00:01:00,690

So message will be what we want to display in there and we'll make that a default to nothing.



17

00:01:01,080 --> 00:01:06,850

And title will make that default to nothing as well as have to be equal signs, not quotes.



18

00:01:06,850 --> 00:01:07,680

So let's fix that.



19

00:01:10,450 --> 00:01:10,760

Great.



20

00:01:11,080 --> 00:01:17,980

And that's going to be stored in sea and then we need another constant and here we're going to put value



21

00:01:18,370 --> 00:01:23,870

form values, so we're going to take whatever is put into that form and do something with it.



22

00:01:25,540 --> 00:01:28,390

So we want to fire the Sweedler.



23

00:01:28,400 --> 00:01:31,860

So let's go over to the Sweedler documentation to find out, again, Sweedler.



24

00:01:33,190 --> 00:01:37,690

And let's look at the documentation, other examples in type's.



25

00:01:38,020 --> 00:01:43,900

So all the way down at the very bottom of input types, it gives me an example for how I can do something



26

00:01:43,900 --> 00:01:46,690

like this, multiple inputs.



27

00:01:46,690 --> 00:01:47,430

And that's what I want.



28

00:01:47,440 --> 00:01:48,360

I want to input's.



29

00:01:48,370 --> 00:01:49,480

I want them beside each other.



30

00:01:49,480 --> 00:01:53,080

I don't want them one on top, but I want nice labels and I want to pop up Callendar.



31

00:01:53,470 --> 00:01:56,590

But this seems to be the kind of feature that we want.



32

00:01:56,590 --> 00:01:59,440

And when I click that, it shows me what you've entered into it.



33

00:01:59,950 --> 00:02:05,890

So I could just copy this whole thing and use that as a starting point and get rid of what I've typed



34

00:02:05,890 --> 00:02:08,100

already and paste it in here.



35

00:02:08,560 --> 00:02:14,470

Now, when I do that, you'll notice that the word a weight is underlined and it says the weight operator



36

00:02:14,470 --> 00:02:17,170

can only be used in an async function.



37

00:02:17,380 --> 00:02:18,700

And that's an asynchronous function.



38

00:02:19,090 --> 00:02:20,470

And that's what do I do here?



39

00:02:20,500 --> 00:02:21,520

Well, it's really quite easy.



40

00:02:21,530 --> 00:02:28,880

You go in front of the word function for custom and give it the type async and now that error goes away.



41

00:02:29,590 --> 00:02:31,330

So let's think about what we want to do here.



42

00:02:31,940 --> 00:02:33,820

I don't want this HTML at all.



43

00:02:33,850 --> 00:02:37,960

I want to take the demo that I'm passing it, which I'm storing in the variable message so I can just



44

00:02:37,960 --> 00:02:45,820

get rid of that and put MSG, which will be whatever we pass it when we when we call with our one line



45

00:02:45,820 --> 00:02:46,200

of code.



46

00:02:46,960 --> 00:02:47,950

So we have a title.



47

00:02:47,950 --> 00:02:52,330

We want that again to not to be hard coded to to multiple inputs.



48

00:02:52,330 --> 00:02:56,920

We want that to be title whatever we specify and if we specify nothing that stays empty.



49

00:02:57,580 --> 00:02:58,570

So that's no problem.



50

00:02:59,290 --> 00:03:01,860

And we have some other things I want to put in here as well.



51

00:03:01,870 --> 00:03:04,620

One thing I don't want is I don't want the backdrop.



52

00:03:06,240 --> 00:03:07,410

So I'll set that defaults.



53

00:03:07,800 --> 00:03:13,860

That's that darkening of the background screen and it's just not something I want here and focus firm,



54

00:03:13,860 --> 00:03:17,400

I'll leave defaults and do I want to show a cancel button?



55

00:03:17,430 --> 00:03:20,250

Well, yeah, because sometimes I might click on that button and say, well, I don't really want to



56

00:03:20,250 --> 00:03:20,930

search on this room.



57

00:03:20,940 --> 00:03:21,950

Maybe I'll look at a different room.



58

00:03:21,960 --> 00:03:29,050

So there's another option I could put in here saying show cancel button, which will be true.



59

00:03:30,270 --> 00:03:32,100

OK, now.



60

00:03:34,340 --> 00:03:38,070

Here, I'm calling some HTML that I've just deleted.



61

00:03:38,090 --> 00:03:43,460

So if you go back and look at the Sweedler documentation, they're saying get element by ID swoll input,



62

00:03:43,460 --> 00:03:45,550

one which refers to the HTML up here.



63

00:03:45,560 --> 00:03:48,050

So that's not what I wanted to do right now.



64

00:03:49,180 --> 00:03:52,260

Well, hmmm, how am I going to do this.



65

00:03:52,280 --> 00:03:58,940

Well I'm going to create something and you know, let me come up here to where I'm going to call this



66

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

and let's create some HTML and we're going to store it in a JavaScript variable.



67

00:04:03,740 --> 00:04:05,330

So what's it going to look like?



68

00:04:05,540 --> 00:04:11,990

Well first of all, let's give it a name, let's call it Let HTML Equal.



69

00:04:12,410 --> 00:04:14,570

And then I want to use back to quotes.



70

00:04:14,570 --> 00:04:20,450

And the nice thing about this is it means that I can have HTML on multiple lines or values on multiple



71

00:04:20,450 --> 00:04:25,030

lines without having to chop them up and put quotation marks and plus signs and everything else.



72

00:04:25,070 --> 00:04:30,830

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



73

00:04:30,830 --> 00:04:33,140

give it an ID and I'll call that ID



74

00:04:35,720 --> 00:04:38,270

check availability.



75

00:04:41,040 --> 00:04:46,110

Form and this is going to have an action, but I don't know what it is right now, so I'll leave that



76

00:04:46,110 --> 00:04:50,160

empty and the method is going to be, well, we'll make it post.



77

00:04:51,510 --> 00:04:54,060

We're not going to do anything with it until we actually hook it up to a handler.



78

00:04:54,060 --> 00:04:57,210

But we have to give it something and I'll put no validate in there.



79

00:04:57,720 --> 00:04:59,850

Might not actually use that, but it's not going to hurt to put it.



80

00:05:00,180 --> 00:05:05,820

And I'll have a class of needs validation, which I might not use right now, but you never know.



81

00:05:06,420 --> 00:05:07,950

And of course, that has to have a closing time.



82

00:05:09,780 --> 00:05:13,680

And then inside of that, I'm going to have a div class.



83

00:05:16,010 --> 00:05:24,320

Equals form murro, because I want these things to be beside each other and underneath that I'll have



84

00:05:24,320 --> 00:05:33,560

a div class equals call to hold the first one, the start date, and inside of that I will have a div



85

00:05:33,950 --> 00:05:35,730

class equals form.



86

00:05:35,790 --> 00:05:39,830

So again, just like we did last time.



87

00:05:41,570 --> 00:05:45,380

And I'm going to give this an idea of reservation dates model.



88

00:05:53,110 --> 00:05:57,640

And then inside of that, I will have my div class equals call.



89

00:06:00,330 --> 00:06:07,740

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



90

00:06:07,740 --> 00:06:15,600

put class equals form control to make it look like the bootstrap input put the type will be equal to



91

00:06:15,600 --> 00:06:18,330

text the name.



92

00:06:18,360 --> 00:06:22,590

I'll make the start and the idea I'll make start.



93

00:06:24,840 --> 00:06:29,610

And I'll give it a placeholder, just like I did in the last time we built this farm.



94

00:06:30,360 --> 00:06:30,750

All right.



95

00:06:31,890 --> 00:06:33,270

And then I'll close that call.



96

00:06:35,540 --> 00:06:45,260

And I'll have another call and I'll just copy and paste this to make it faster copy paste and this will



97

00:06:45,260 --> 00:06:50,990

be and not start and end, not start and departure.



98

00:06:53,030 --> 00:06:54,500

All right, then.



99

00:06:54,500 --> 00:06:56,270

I need to close my form, Ro.



100

00:07:00,380 --> 00:07:01,970

And I need to close my call.



101

00:07:03,770 --> 00:07:06,740

And then I need to close the reparative for the former.



102

00:07:07,820 --> 00:07:10,490

All right, so that should be it for for the.



103

00:07:11,400 --> 00:07:14,600

Now, I've given it a name of start and an idea of start.



104

00:07:14,600 --> 00:07:16,160

A name of and in an idea that.



105

00:07:16,190 --> 00:07:20,280

So let's go back down to our JavaScript and think about this.



106

00:07:20,390 --> 00:07:28,220

So for the purposes of this exercise, all we have to do is get them started.



107

00:07:28,220 --> 00:07:29,060

And I believe.



108

00:07:29,570 --> 00:07:30,720

Yeah, start and end.



109

00:07:31,670 --> 00:07:32,990

So start.



110

00:07:39,280 --> 00:07:45,730

And say that, OK, so let's go down here and see how close we're getting, so we have this thing we're



111

00:07:45,730 --> 00:07:49,330

calling custom and we want it to be called by custom.



112

00:07:50,020 --> 00:07:54,800

And we go back up to our top where we're calling this and where is it?



113

00:07:54,820 --> 00:08:03,670

Here it is so custom and the message will be not, oops, it'll be this variable HTML that I just created.



114

00:08:04,780 --> 00:08:06,710

All right, let's save that and see what happens.



115

00:08:06,730 --> 00:08:13,110

So I go back over to here and find my page and I reload this and see if we're getting close at all.



116

00:08:14,050 --> 00:08:15,640

Hey, that looks not bad at all.



117

00:08:15,670 --> 00:08:18,390

Maybe we should put a title in there so we can cancel this.



118

00:08:19,990 --> 00:08:21,160

So let's call it the title.



119

00:08:27,240 --> 00:08:33,120

Choose your dates and save up and reload this and open it.



120

00:08:33,820 --> 00:08:34,350

That's not bad.



121

00:08:34,380 --> 00:08:34,950

We're getting there now.



122

00:08:34,950 --> 00:08:37,100

We don't have any calendar yet at all.



123

00:08:37,830 --> 00:08:43,400

We need to somehow tell it to open these open a calendar when I when I when I open this page.



124

00:08:43,410 --> 00:08:45,840

So let's come back here and see how we can do that.



125

00:08:46,590 --> 00:08:55,830

Well, if we go back down to our JavaScript, what we want is after or just before it displays this



126

00:08:55,830 --> 00:09:01,140

HTML that's stored in a variable message and it's called here we need to call some JavaScript.



127

00:09:01,170 --> 00:09:02,090

So how are we going to do that?



128

00:09:02,130 --> 00:09:08,490

Well, let's go back to our documentation on Sweetland and see if there's anything that will allow us



129

00:09:08,490 --> 00:09:09,240

to do this.



130

00:09:10,230 --> 00:09:11,940

OK, so let's see.



131

00:09:11,940 --> 00:09:14,040

Method's maybe it's got something here.



132

00:09:16,220 --> 00:09:19,110

We want it to search just before it opens.



133

00:09:19,530 --> 00:09:20,760

So let's just look for the word open.



134

00:09:21,570 --> 00:09:23,400

Hey, look at that will open.



135

00:09:24,240 --> 00:09:25,500

So let's see what will open to us.



136

00:09:25,920 --> 00:09:26,580

Copy that.



137

00:09:26,590 --> 00:09:30,540

Find it will open pop up.



138

00:09:30,540 --> 00:09:34,230

Life-cycle synchronously runs before the pop up is shown on the screen.



139

00:09:34,260 --> 00:09:36,040

That's exactly what I want.



140

00:09:36,600 --> 00:09:40,130

So let's put a function in here or a call to will open.



141

00:09:41,640 --> 00:09:42,940

And what's it going to look like.



142

00:09:42,960 --> 00:09:48,600

Well Will Open is going to just like pre confirm run this way.



143

00:09:48,900 --> 00:09:50,250

And what do we want it to do?



144

00:09:50,820 --> 00:09:57,090

Well, we want it to display that Pop-Up Calendar so we can do it the same same way we did on the other



145

00:09:57,090 --> 00:09:57,420

screen.



146

00:09:57,420 --> 00:10:03,150

We could just say Const Ellum, which is just a variable, I'm just going to call it that equals document



147

00:10:03,570 --> 00:10:05,030

get element by ID.



148

00:10:05,070 --> 00:10:06,180

And what did I call that?



149

00:10:06,180 --> 00:10:08,250

I think I called it reservation dates model.



150

00:10:08,280 --> 00:10:09,030

Let's make sure.



151

00:10:09,780 --> 00:10:10,020

Yeah.



152

00:10:10,020 --> 00:10:11,100

Reservation dates model.



153

00:10:11,100 --> 00:10:12,180

So let's copy that.



154

00:10:12,810 --> 00:10:17,190

We're getting that element by ID back down here.



155

00:10:19,560 --> 00:10:20,880

Reservation dates model.



156

00:10:20,880 --> 00:10:27,900

So we're getting a reference to that element and then we want to call our date picker.



157

00:10:28,050 --> 00:10:34,380

Our range picture equals new date range picture.



158

00:10:37,220 --> 00:10:46,250

On the element and then in curly brackets format, we use the same format we did last time year, once



159

00:10:46,250 --> 00:10:53,180

month data and show on focus are set to true.



160

00:10:53,720 --> 00:10:56,420

OK, so that means when you click on it, you should see it.



161

00:10:56,690 --> 00:11:00,210

So that should hopefully open the day picture.



162

00:11:00,230 --> 00:11:01,730

It's probably not going to, but let's find out.



163

00:11:03,560 --> 00:11:04,520

So let's give it a try.



164

00:11:04,520 --> 00:11:05,570

Reload the page.



165

00:11:06,050 --> 00:11:06,650

Click on it.



166

00:11:07,520 --> 00:11:07,930

Huh.



167

00:11:09,080 --> 00:11:13,730

So it automatically opened my calendar and it stuck it behind this model.



168

00:11:14,210 --> 00:11:15,750

Well, that's not exactly what I want.



169

00:11:16,250 --> 00:11:17,780

I don't want it to open automatically.



170

00:11:17,810 --> 00:11:19,130

Well, let's do the easy one first.



171

00:11:19,460 --> 00:11:21,530

So let's inspect this page.



172

00:11:21,530 --> 00:11:29,300

So I'll bring up my tools, find my inspector and click on this actual.



173

00:11:29,930 --> 00:11:32,220

I'll see if I can get this whole calendar highlighted.



174

00:11:32,240 --> 00:11:33,370

I'll get me close enough.



175

00:11:34,010 --> 00:11:39,110

So this appears to be in a div with the class of date picture.



176

00:11:39,770 --> 00:11:44,690

Now, we haven't actually gone through accessory in great detail yet, but we need to do a little bit



177

00:11:44,690 --> 00:11:45,220

right now.



178

00:11:45,500 --> 00:11:52,490

I need to override the default class S.O.S class for the div date pictured right here, which is the



179

00:11:52,490 --> 00:11:59,540

whole calendar, and you need to change it so that it displays on top or closer to the two to us than



180

00:11:59,540 --> 00:12:00,320

the actual model.



181

00:12:00,320 --> 00:12:01,610

And that's called the Z Index.



182

00:12:01,720 --> 00:12:02,920

We can fix that pretty easily.



183

00:12:03,830 --> 00:12:10,970

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



184

00:12:11,960 --> 00:12:17,330

picture up here and we'll give it a Z index.



185

00:12:17,450 --> 00:12:21,530

I don't know how hard is how high it's supposed to be, but the bigger the number, the closer to the



186

00:12:21,530 --> 00:12:24,650

top of the screen are the front of the screen, the closer to us than it is.



187

00:12:24,650 --> 00:12:27,230

I'll put 10000 in there and hopefully that'll do it.



188

00:12:27,440 --> 00:12:28,070

Save that.



189

00:12:28,760 --> 00:12:29,840

Reload this page.



190

00:12:30,680 --> 00:12:32,010

Open this up there.



191

00:12:32,450 --> 00:12:34,940

So now it's displaying at least where it should be.



192

00:12:34,940 --> 00:12:37,010

But I don't want this to fire automatically.



193

00:12:37,340 --> 00:12:38,610

And what's making that happen?



194

00:12:38,750 --> 00:12:39,820

Well, what's making it happen?



195

00:12:39,830 --> 00:12:41,270

You notice the blue around this.



196

00:12:41,270 --> 00:12:42,540

Firefox puts blue around it.



197

00:12:42,560 --> 00:12:43,280

So does Chrome.



198

00:12:43,400 --> 00:12:46,690

If your browser doesn't, you at least see the blinking cursor in there.



199

00:12:47,270 --> 00:12:55,760

What this means is that Sweedler automatically puts the focus in the first element on this dialog.



200

00:12:55,760 --> 00:12:57,020

I don't want it to do that.



201

00:12:57,290 --> 00:12:59,570

Well, I mean, I, I can't really stop it from doing that.



202

00:12:59,570 --> 00:13:07,930

But I need to make sure that when this dialog fires, when the the model comes up, that date picture



203

00:13:08,030 --> 00:13:10,600

doesn't automatically display the calendar.



204

00:13:10,610 --> 00:13:11,720

So how am I going to do that?



205

00:13:11,820 --> 00:13:15,300

Well, we need to look at another life cycle hook that's part of this.



206

00:13:15,370 --> 00:13:18,290

OK, so what I'm going to do is change my e-mail.



207

00:13:18,890 --> 00:13:23,420

I'm going to make this input disabled, which means it can't take the focus.



208

00:13:23,840 --> 00:13:28,110

I just do that putting the word disabled in there and I'll do the same thing for the second one.



209

00:13:28,160 --> 00:13:32,060

Otherwise, it'll probably just display the calendar there for the end date.



210

00:13:32,300 --> 00:13:34,430

So let's say that reload this.



211

00:13:34,430 --> 00:13:39,740

I can close my inspection now because I'm not looking for e-mail or access and it should pop the dialog



212

00:13:39,740 --> 00:13:44,100

and not pop the calendar and these should be disabled and they are OK.



213

00:13:44,120 --> 00:13:47,810

So now at least I've got that it so it doesn't show the calendar.



214

00:13:47,810 --> 00:13:55,250

But I want after this dialogue comes up, I need to get rid of that disabled attribute on both of those



215

00:13:55,250 --> 00:13:55,630

inputs.



216

00:13:55,640 --> 00:13:56,570

So how am I going to do that?



217

00:13:56,780 --> 00:13:59,170

I'll go back down here and use another Life-cycle hook.



218

00:13:59,900 --> 00:14:06,760

So if we go back to our Sweedler, you'll see there's another one that's called did open.



219

00:14:06,780 --> 00:14:08,510

I searched for it, did open.



220

00:14:09,110 --> 00:14:14,930

And this says Pop up, life-cycle hook asynchronously runs after the pop up has been shown on the screen.



221

00:14:15,350 --> 00:14:15,750

All right.



222

00:14:15,890 --> 00:14:16,810

So that's easy enough to do.



223

00:14:16,820 --> 00:14:18,050

That's exactly what I want.



224

00:14:18,500 --> 00:14:26,570

So I will now put here a call to did open and all I want wanted to do.



225

00:14:26,570 --> 00:14:29,270

We need to use the same syntax that we did for the other ones.



226

00:14:29,270 --> 00:14:36,950

So empty brackets, the pointer and inside these double quotes, all I want to do is to say document



227

00:14:37,970 --> 00:14:45,650

get element by ID start and then I want to remove the attribute disabled and the JavaScript to do that



228

00:14:45,650 --> 00:14:50,930

is not surprisingly called remove attribute and the attribute I want to remove is disabled.



229

00:14:52,920 --> 00:14:54,730

And I'll do the same thing for end.



230

00:14:56,340 --> 00:15:02,400

So what it's going to do when this is called, it's going to call it with a title that I've provided,



231

00:15:02,400 --> 00:15:05,720

whatever HTML I provide, I'll turn the backdrop defaults.



232

00:15:05,730 --> 00:15:09,440

I'm not going to confirm the focus, but put the focus on the confirm button.



233

00:15:09,450 --> 00:15:13,200

I am going to show a cancel button before it opens.



234

00:15:13,380 --> 00:15:19,800

It's going to call the date picker initialized the date picker on the element with the idea of reservation



235

00:15:19,800 --> 00:15:20,340

dates model.



236

00:15:20,340 --> 00:15:22,200

So that's the wrapper around the two inputs.



237

00:15:22,800 --> 00:15:27,480

Then I specify the date format and whether or not I want it to show unfocussed to say true.



238

00:15:28,080 --> 00:15:35,270

And then after it's opened, it's going to remove the disabled attribute on the start and the end inputs.



239

00:15:35,280 --> 00:15:36,180

So I save this.



240

00:15:36,180 --> 00:15:36,920

I go back here.



241

00:15:36,930 --> 00:15:37,650

This should work.



242

00:15:38,340 --> 00:15:39,270

Let's reload this.



243

00:15:40,500 --> 00:15:41,100

Pop it up.



244

00:15:42,590 --> 00:15:47,660

And there's my calendar now let's make sure it actually chooses dates, so I'll choose November the



245

00:15:47,660 --> 00:15:54,020

twenty third and then I'll choose November the 24th and then when I click, OK, because all we're telling



246

00:15:54,020 --> 00:15:59,660

it to do right now is just to show us what was entered on pre confirm it's going to return whatever



247

00:15:59,660 --> 00:16:01,310

is in the start and whatever is in the end.



248

00:16:01,310 --> 00:16:05,870

So hopefully when I click, OK, I get my start and I get my and there it is.



249

00:16:05,870 --> 00:16:07,700

November 2013, November 24th.



250

00:16:07,970 --> 00:16:08,480

All right.



251

00:16:08,570 --> 00:16:15,560

So we can use that on our Roomba, the button on our room pages so it doesn't do anything yet.



252

00:16:15,560 --> 00:16:20,090

And I'm not going to bother moving it now until I actually chop up the HTML and create our Goldwing



253

00:16:20,090 --> 00:16:20,660

line templates.



254

00:16:20,660 --> 00:16:26,330

But it seems as though we have the functionality we need to be able to search that to to display that



255

00:16:26,330 --> 00:16:28,080

search form in a pop up dialogue.



256

00:16:28,640 --> 00:16:29,090

All right.



257

00:16:29,120 --> 00:16:32,360

Almost time to cut things up and put them into goaland templates.