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
28. The response body modal
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
setting up the response body for the modal is going to be really simple because we've already pulled in the view final modal package for our site selector when we hit add site so let's just fix this up quickly because i probably forgot to add a v if or v else on there and there we go
00:14
great and let's go ahead and hook this up so i'm actually going to come straight over to the site selector open that up properly and i'm just going to grab the modal that we already had in here so we can just grab the entire thing here that includes all of the styles there are ways to create modals here that you can just inject into but for now we're just keeping this really really
00:33
simple so i'm just going to paste this into here of course we're going to get rid of the entire form inside of here because we're not going to need that we're just showing the response body in here so let's just add response body and we want to go ahead and hook this up to a model in view so we can trigger this so down here let's go ahead and import ref from view and let's define
00:57
this out here and we'll call this show response body modal set that to a ref and of course by default that is going to be false so we can hook that up to there and then of course with our button we can go ahead and say v on click show response body modal and set that to true so if we come over now what we should see if we actually import the view final modal package so again we
01:22
can come over to site selector for that the reason that that is happening is because the component can't be imported and therefore it's just adding in some spacing there when we click on that there we go see our response body so as simple as that now the downside to this is we're basically rendering out a view final modal component for every single one of these checks here so if there
01:44
are a lot we're going to see a lot of these rendered out and hidden in one go not the end of the world we can always fix this up later okay so now that we've got this we just want to output the response body we're going to do this inside of a text area that we can't modify because it's going to make sense for us to be able to select things and scroll a little bit easier so we'll
02:03
go ahead and add some styles to this in fact let's bind in the value of this first so that is just going to be from the check and the response body that's pretty much it so if we just view this there we go we've got the response body in there but of course we can modify this and it's not styled up properly so the first thing we'll do is add in a read only of course and then over in
02:23
our classes let's add in a border and let's set this to rounded just say medium and we'll set the width to full and we'll specifically set the row count on the text area itself so that looks a lot better we can't modify this now but we can scroll down we can still select stuff if we need to grab any of the response we get back from that and for viewing our response body that is pretty much it
44 episodes•4 hrs 59 mins•1 year 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!
Comments
No comments, yet. Be the first to leave a comment.