This episode is for members only
Sign up to access "Build An Uptime Monitor with Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
11. Creating the endpoint form
Episodes
01. Introduction
02. Sites
03. Endpoints
09. Setting up endpoints
4m 23s
0%
10. Enum endpoint frequencies
3m 50s
0%
11. Creating the endpoint form
12m 58s
0%
12. Storing an endpoint
7m 21s
0%
13. Validating and authorizing endpoint stores
7m 6s
0%
14. Normalizing the endpoint location
6m 4s
0%
15. Displaying endpoints
6m 22s
0%
16. Deleting endpoints
6m 21s
0%
17. Toggling inline editing for endpoints
5m 12s
0%
18. Applying a watcher to the endpoint form
5m 31s
0%
19. Storing endpoint edits
8m 56s
0%
04. Checking endpoints
20. Determining endpoints to check
2m 57s
0%
21. Creating a job to perform a check
3m 21s
0%
22. Making an HTTP request
3m 39s
0%
23. Scheduling checks every second
4m 27s
0%
24. Setting up the check relationship
3m 14s
0%
25. Updating the job
2m 10s
0%
26. Showing the last status
12m 50s
0%
27. Expanded list of checks
14m 10s
0%
28. The response body modal
2m 49s
0%
29. Authorizing the endpoint details
2m 27s
0%
30. Calculating uptime for endpoints
8m 29s
0%
06. Email notifications
07. Downtime notifications
Transcript
00:00
The first thing that we need to do to create an endpoint is actually replace the data we're just
00:04
dumping here with an endpoint creation form. So we're going to go ahead and fill that in here and then in the next episode we're going to look at actually storing an endpoint. And remember for this endpoint form that we're going to be creating we also need to iterate through them enum values that we've just added to our endpoint frequency enum. So to get started
00:25
let's actually get rid of this entire thing here we don't really need that and we're going to go ahead and just create out an h2 in here saying new endpoint and then underneath this we can put the form. So let's add some styles to this header very quickly so let's go for a semi-bold font we'll make the text large make the text gray and we'll set the leading to type just so we
00:46
get a little bit of spacing. So there's our header and then of course directly under this we're going to go ahead and add in our form. So let's get rid of the action we're not going to need that I'm going to go ahead and add some styles to this but I'm going to copy and paste these over of course these are available in the course downloads if you want to go ahead and grab
01:05
them or just copy them. Okay so inside the form we're going to go ahead and create our section on the left with the input and the input error and then we're going to create another section just underneath that or next to that which is going to have the select and then down here we're going to have the primary button so we could just go ahead and add that in very quickly now primary
01:28
button we've already looked at pulling that in and in here we're just going to say add so let's just check I don't think we have that component on this page we don't so let's go down or up in this case and go ahead and import that primary button from our component section great so that should now show us the button and now we just need to fill in the rest of the data in here so let's start
01:53
with the easy part that's just going to be the input so let's add in an input label which we'll need to import as well and this is going to be for the location so the actual endpoint that we want to hit set the value here to location and let's capitalize that and once again we're going to set this to have a screen reader only class because we don't want to see it so let's set text input
02:17
in here as well again we've already seen this before and the id for this is going to be location the type of this is just text and let's add some very simple styles in here we'll just say width full give that a height of nine and we'll make the text small placeholder in here is just going to go ahead and give us an idea of what we want to do in here so for example pricing
02:38
and let's go ahead and not introduce our input error just yet we'll do that when we get to actually submitting this through but we do want to go ahead and put in these two components so we actually see something here so this is going to be the input label and this is going to be the input or text input okay so that's looking like that not great at the moment so what we're
03:01
going to do is for this outer class here this one just here or this first class we're going to go ahead and set grow on here we've got flex on this form that means that that's just going to push everything across to fill up the remaining space okay so lastly we're just going to pop the frequencies drop down inside of this div just here so let's go ahead and create a select out
03:24
we'll give a name of this frequency an id of frequency and we can also go ahead and add in an input label for this as well make this hidden frequency and that's going to be frequency as well okay and that should be just about it let's add a couple of fake options in here just to get us started we'll just add one in there and at the moment it looks like that so
03:51
not great at the moment so once again i'm just going to go ahead and grab some pre-made classes for this which you can grab from the course downloads there we go and that's it so that's what it's going to look like but of course what we need to do is actually pass in the values for our frequencies and i'm going to show you two ways that we can do this because we're going to need
04:15
these frequencies in various parts of our application the first thing that we're going to do is pass these down directly to the dashboard and then we're going to create them as an inertia global that we can access from anywhere so let's start with the simple one that's going to be over in the dashboard controller and with the data that we have here we're just going to want to pass down
04:35
these endpoint frequencies like so so how are we going to do this well like the other data that we've created here even though we're dealing with an enum we can still create an api resource to represent these so let's go ahead and make out a resource in here and let's call this endpoint frequencies or frequency that would probably make a bit more sense resource so let's create
04:58
that resource out and go ahead and open this up like so okay so we want to go ahead and pass out enum into this or the cases for this and then we want to obviously represent these like we've done with our standard laravel collection data so let's go over here say endpoint frequency resource we want to go ahead and use a collection again and we want to reference the endpoint frequency enum
05:24
but this time what we want to do is use the cases method on this enum this is all built into php it's nothing to do with laravel cases will return to us an array of all of the enums individually inside of here and when we look at an enum here when we access this this gets represented back to us as an enum so each of these things that we're iterating through are enums in themselves so now
05:49
that we've got that passed in we just need to access the values in here like we normally would so the frequency itself is going to be the just the value of this so let's start with that and then we'll go back to our enum because we're going to need to find a way to grab the labels that we can use inside of the ui so let's just check that this is working first of all we're passing this
06:11
down as endpoint frequencies so let's go over to our dashboard and let's go ahead and accept this into here as an object as we normally would and once again let's just dump these out on the page we'll just do this up on here so endpoint frequencies and let's see what we get so let's give that a refresh and there we go you can see all of our frequencies here represented in seconds
06:33
that of course now we can iterate through and show inside of this input so let's go ahead and do that now and then we'll update this so we can see a nice label so down here inside of these options this is what we want to iterate through so let's not wrap that in a template let's do it directly on the option so we're going to say v4 frequency in endpoint frequencies and remember
06:56
data the key here can just be the frequency because these are always going to be unique so let's grab the direct frequency from that frequency in the iteration the value we need to bind in and that's going to be the same thing so it's going to be frequency dot frequency so we can bind that in nicely and just for now let's output the actual frequency inside of here so if
07:17
we come over now you can see we've got all of the frequencies in here in this list really nicely so what we're now going to do is set this up so we can get a label from our enum based on what value we're working with and then we'll move this over to a global inertia value that we can access from anywhere so to be able to get inside of here the label which is what we want to show on the ui we
07:41
want that to look like something like one minute we need to update our enum so let's leave that as one minute for now and go over to our enum so what we can do on here is for every single enum value we can actually call a method on this so let's go ahead and create out a label method make sure we go ahead and define this out returning a string and then we're going to
08:02
go ahead and use match on let's just pull this down this now this refers to either this this this or you guessed it this so not the entire thing so this can be either one minute five minutes 30 minutes one hour or any of the other values that we add in here and what we want to do is go ahead and return for one minute a value of one minute
08:33
and we want to do that for each of these cases five minutes and we want that to show five minutes and these can say anything you want doesn't have to be what i'm writing here and 30 minutes is of course going to be 30 minutes or you could write half an hour and of course one hour is going to say one hour so that is pretty much the label that we can use to access based on the individual
08:59
enum that we're working with so how do we use this well if we come back over to here we access this value which gives us the raw value here but now what we can do is say this label easy as that so if we go over to our dashboard and just dump these values out here again and see what we get we now have a label for every single one which we can update within our form
09:27
so let's go down here and output the label for this and there we go one minute five minutes 30 minutes and one hour and just to demonstrate how powerful this is if we come over to our endpoint frequency enum if we wanted to add two hours here we could easily do that and then we could add in two hours and of course write two hours and then that's it now this once
09:56
we get to use this for validation will mean that we don't need to update any validation rules we don't need to update the ui because we're already iterating through each of the predefined values that's already in there for us and it will be validated once we start to use this enum so let's get rid of two hours for now because we don't too many values in here but that is now
10:15
our enum using to output through and output our ui as well okay so the last thing that we're going to do is on the dashboard controller move the endpoint frequencies over to a global inertia value what that's going to allow us to do is use this value anywhere there are lots of different places on the ui that we're going to need to access endpoint frequencies so it makes sense
10:38
to put it in a global location so we're going to go ahead and get rid of this from here of course that's going to completely break this it's not going to show them values because we don't have them and we're going to come over to the handle inertia requests middleware over in app http and middleware and we're going to come down to this share section here now this already contains a
10:59
few things that we get with the breeze boilerplate but we can just easily add as many as we need to here obviously not too many or it's going to slow things down so i'm just going to go ahead and paste that in there and of course pull in the namespaces for our resource and our enum and that's it so if we head back over to the app you can see that this is working as normal what you can also do though
11:21
is if you come over to dashboard and you get rid of this from your props in your page you might not want to define it there you can also directly access this so now we've got rid of the prop and we give this a refresh it's not going to work but what you can do if you want to is you can access this via page props value and then the endpoint frequencies data now page is going to be a
11:47
composable that is used within inertia so if we come up to here we can go ahead and import and let's just see what else we're using here use page from inertia view three and then down here somewhere we can say page equals use page now i'm going to go ahead and console log out page so you can see what it has in it and if we go over to the console
12:16
we've got all of the props that are being passed down if we go over to value and target you can see we've got all of these in here so that includes the ones that are being globally shared and the ones that are just being passed down to this component they're all lumped together as well as loads of other information you can access from here but that's another way that
12:36
you can do this if you don't want to add that to define props and you want to make it clear that this is coming from a global it's entirely up to you i'll leave this in here because this can be useful anyway okay so our endpoint form is created we're outputting our enum values all that's left to do is hit add and make sure we have the functionality to actually add an endpoint
44 episodes•4 hrs 59 mins•2 years ago
Overview
Ready to dive into Inertia? Let's build a real-world app with Laravel, Inertia and Vue! If you're already working with Inertia, you'll pick up some tips and techniques for future projects.
This uptime monitor allows you to create and switch between sites, then add endpoints to monitor with frequency intervals. Using the power of scheduling and queues, it'll automatically alert the email addresses you've added via the UI when an endpoint goes down.
In this course, you'll learn to:
- Build a real app from scratch with Inertia
- Work with Laravel queues
- Perform actions on models at user-defined intervals
- Work with sub-minute schedules in Laravel
- Send out channel notifications with Laravel
- Use API resources to simplify Inertia data
- Organise apps with events and observers
- Create modals in Vue
- Perform inline editing with Inertia forms
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!