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
44. No sites fix and placeholder
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
you may have also seen this if you've been following along but if we don't have any sites so if we delete the final site that we have what we actually end up with on the home page here is
00:10
an error and we also just see if we just get rid of this when we do fix this we will see just an empty page so we're going to fix up this issue here and then we're of course going to go on to show a little placeholder to prompt the user to create a site so this issue here as we can see from here comes from this just here we don't have a site so we can't access the endpoints on a site
00:38
so what we're going to do is head over to our dashboard controller and we're just going to add a little ternary on here to say well if we do have a site of course go ahead and grab the endpoints otherwise just set the endpoints to null let's come over and give this a refresh and here we see cannot get property id on null that comes from the site resource itself just here so we
01:02
need to fix that one up as well maybe not the cleanest solution but we can figure it out and let's give this a refresh now we end up with a sort of empty page so if we come over to our console here what we see is cannot read data on a certain thing and that is this site at the top we know that over on the dashboard so if we go over to the dashboard page at the very top here in the
01:24
header we're saying site data domain we want to make this an optional because if we can't access the site then we don't want to access any of these properties either so let's give that a refresh and we still end up with an empty page but that's for a different reason that is we are trying to access endpoints and there's no need to so what we're going to do here is go and wrap a conditional
01:47
around all of this stuff here if we don't have any site available so let's create a template out here a template out here to wrap all of this all the way down quite a lot here but that's okay here and let's go all the way up here and indent this there we go and this conditional is going to be if we don't have a site then we're going to have a little placeholder in here
02:15
not forgetting to add in the v else in here as well so let's go over give this a refresh and there we go so at the moment we don't see a title which is fine you can even add something in there in its place we only have the option to add a site but we also have a placeholder in here prompting the user to add in their first site so let's go ahead and keep this paragraph in here
02:37
we'll set the text to center change the text to just say grey 500 set the font to semi-bold and let's make the text small and let's swap this out to say no sites yet create one to get started and of course you can change that to look however you want so there we go if we don't have any sites available the first thing that we do is fix up the fact that we're passing down these two pieces
03:05
of data which doesn't make sense because we don't have a site in here all of these values will be null and then go ahead and wrap all of our dashboard in a conditional because there's no point listing through endpoints if we don't have a current site selected and then finally just adding in a little placeholder to prompt the user to add their first site
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!