- [Instructor] So it's time to make the second button work.
This will allow users to check into our individual meetings.
Now to create this button,
I'm going to need to create an additional route.
And this route's going to be a little
different from the other ones.
It's going to be a dynamic route
where I'm going to be passing along some variables
so that I can send people to
different URLs depending on what meeting they're going to.
So it's going to look like this.
We're going to create just another object right here.
Then we will say, just like before,
we will do path, but the path is going
to look a little bit different.
I'm going to say the path is check in.
And then I'm going to put in a slash and a colon
and then the user ID
and then a slash and another colon
and then meeting ID.
So these are going to be passed along
on to our page or our component
using these variables right here.
So the two paths after check in,
which are user ID and meeting ID,
are going to be passed in a special route's variable
that we'll take a look at in a minute.
All right, so I need to still give it a name.
This is going to be called check in.
And then I'll specify that this will receive it,
information from a component.
And I'll call that check in as well.
So I'll need to create this component.
I don't have that one quite made yet.
I need a comma right here.
All right, so now that we have this special path,
we can go ahead and save this.
And then I'm going to create an additional view.
Now I've named things views instead of components.
You could really call things whatever you want
and do your own folder structure.
It's just that when we use the CLI,
it created this specific folder structure for it.
So I'm just going to follow it.
There's not a lot of difference between
components and views in this case.
So let's go ahead and do that.
We'll do a new file.
And this one will be called check in dot view.
And I'm going to get a template that
I've created for you at this URL.
And again, hit the Raw button.
This is just some really boring html
with some bootstrap classes.
And so I'm just going to paste that in here.
And for right now, I'm just going to save this
and leave it alone.
Now I still need to make sure that in meetings,
I reprogram my new button,
that is the check in button,
to make sure that it goes to that meeting.
So let's see, the check in button is right there,
right now it has a hard coded to parameter
that sends it to the homepage.
I need to make this a dynamic or bind a variable
that's going to be dynamic,
so I can pass along the different variables
with the user ID and the meeting ID.
So I'm going to do this.
This is going to go to check in.
And I'll put this in single quotes.
So this is just like a JavaScript expression here.
And it's going to use the user variable
and pass along the UID and then pass along
another slash here.
And pass along item ID.
So this should actually have another slash right here.
So then it's going to pass along the user ID
and then a slash and then the item ID.
So let's go ahead and save that.
And if we did everything correctly,
it'll look like we have an error here.
So let's check out the inspect
and check in is not defined.
Okay, great.
Yeah, so I missed one thing.
Let's go back into our router.
So whenever I do create an additional route like this,
I need to make sure that I import the component,
which I've done everywhere expect for this
check in component that I just created.
So I need to import check in dot view.
Save this.
And now it should look good.
Let's try clicking on check in.
And you can now see that we can view
the form that we added in there.
I need to go and work a little bit
on my script for the check in page.
So in here, let's go ahead and
start defining what our page is going to have here.
So script and we'll create data here.
Function and I need a couple of variables.
So this form has display name field.
This is one of the input fields.
And then, let's see, oops,
then we need also an email field.
Which will initialize as blank.
We can actually, we've been doing nulls
so we just could do null here as well.
All right, null means no value at all,
where double quotes just means essentially an empty strain.
It's not quite exactly the same.
All right, so now let's go ahead
and create some methods.
So methods
and we're going to need one method called handle check in.
I tend to name my methods that are
going to do something before they emit
something to the parent component handle.
And that's just what I do, so,
you can do you and I'll do me here.
All right, so all I'm going to do right now
is just go ahead and log consol, log,
and I want to show you that the URL
is passing along some information
in a special variable called route params.
And then we can ask for either of the values
that we specified in the route.
So you can say meeting ID here.
And then I'll clear out display name equals null.
And all right, so I need to go ahead
and also make sure that I track the value
of display names in my input fields.
So here's the input field for the name.
So we'll do a V-model display name.
Whoops, this should have a capital in it.
And for the email,
email also.
Let's see, did I capitalize?
Yup, I capitalized email.
And I need to make sure that I'm just consistent everywhere.
Sometimes that inconsistency is what really bites you.
All right, so let's take at what we have here
and try to fill this out.
And I'm going to hit check in.
So clearly I need to prevent the default behavior.
You saw that page reload.
So that's not what we want.
So that means that in our form,
we need to capture that submit event
and submit it properly.
So it needs to be something like at submit
and also use the prevent flag or the property here.
Prevent so that it doesn't do a page reload.
And then we need to say handle check in.
So it looks like you would dot function.
Let's try it now.
And I'm going to inspect so that I can see the consol.
I'm getting 12 errors.
It could have just been from before.
So let's check it out.
Refresh this page.
So it looks like property error, method email,
just not defined.
If so, it looks like it could be
something with my capitalization here.
So email, let's see, for email, V-model email,
and okay, so there's something funky going on here.
Data function return.
And then I need to pass an object
that's these two variables.
Okay, this should be better.
You know, I have this veeder,
sometimes gives you this auto formatter.
And sometimes if you make a little mistake,
it tries to sort of, quote, unquote, fix it.
And the way that it fixes it is by
adding punctuation where it thinks it should go
and sometimes that really messes up your code.
So it looks like now,
okay, return display name null, email null,
failed to compile.
Let's try refreshing this to see what errors we get.
Yeah, so it's telling me,
actually, so this is good.
Sometimes this overlay is going to give you
a little bit better error information than the consol.
So if you see this, this is actually good news
cause it tries to give you more information.
So clearly here, I should've used a colon.
So let's go ahead and save that.
Now my page is loading
and let's try to check in.
And we'll hit check it.
And so it clear this out.
Let's inspect our code right here.
And you can see that it's passing along
just in the consol the meeting ID.
So where is that coming from?
That coming to the information
that is placed right here and here,
as the user ID as well as the meetings ID.
And that comes from the previous page.
So if we go into meetings,
you can see that when we roll over each of the meetings,
now each of the meetings is passing along
that information dynamically to that component.
So that's great.
But we still have a little bit of work to do
so we'll keep going in the next video.