Python-powered Chat Apps with Twilio and SendGrid Transcripts
Chapter: Creating the admin backend for Flask
Lecture: The admin index HTML template
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
It seems we're able to pull back a list of orders and there was only one in the list, but that's all of them. Now we need to build out our HTML side,
0:08
and we need to pass that data over. So we're gonna go over here and we're gonna say orders=orders.
0:16
That's the data that's the name were given to it in the template. And then we're gonna flip over to this file here and edit it and in PyCharm
0:23
Click that little friendly thing. Let's do a tiny bit of styling here. We'll say this is a class of table table-striped like that and we're going
0:36
to have a <thead> in a <tbody>. Head is like the header. The body is the rows of data that we're going
0:44
to put into it. Now I'm going to copy and paste some data here, just so I remember what we're supposed to cover what's supposed to put in here in
0:50
order. But we're going to have the order_id the Customer Name, name the customer phone number, or WhatsApp number, their Email,
0:59
Purchase Date, Completed Date and whether or not it is fulfilled. And here will this non header. Things like the action to fulfill it.
1:07
I'm going to copy this down again, and we can use that here. So what we're going to do is we're going to add, come down here and say
1:18
we're gonna do a loop and have {% for order in orders %}. And let's just do something real simple.
1:28
<tr><td> {{order.id}}Just to see that we're actually getting something here so let's run this. Make sure everything's hanging together.
1:41
There it is. How exciting. The one thing appeared one time with the number one. All right, that's really good.
1:48
So this is working. Let's go back and drop in a little more. Now, We need to put in pieces of data, the dynamic data from our order,
1:57
so I'll just crank those out and then talk you through the real quick with the order, which has an ID.
2:05
And then we're gonna use the relationship to the order.user.name, Similarly for the number.
2:22
Now the order has a created date. If we just put it like this, you'll see, this is probably not how you want to see the date.
2:31
Not super amazing. I think Maybe just that right there would be great. So we can come over here and simply do .date() isoformat() like this.
2:45
Here we go. That's a nicer date, and we'll do the same for the completed date if it exists. So we want to use this,
2:54
but only if this has been fulfilled. Otherwise, we just want to leave it empty. But nothing if not this else will put that similarly over here.
3:06
We will say, if it's not fulfilled, will put open otherwise, If it is fulfilled, I'll just put the word fulfilled.
3:17
Here we go. Look, it's not completed so empty, and its status is open. The final thing is, if it's open, we want to put a button.
3:37
And here we're just going to put a hyperlink, and the hyperlink is going to go to /admin/fulfilled. We want to pass over the order id.
3:45
So would you like this and just fulfill and let's make it pretty well, give it a class of button btn-dash success. All right, let's see how this looks.
4:00
There we go. Look at that also looks a little bit big. We can make it smaller, just do one more class 'sm' like that.
4:09
I did notice when I did the copy and paste. All these <th> should be <td> for the data, so let's do a quick replace.
4:24
How are things looking perfect Looks a little better on the table formatting and are fulfilled button. Is the right size perfect.
4:31
Well, we've got our basic table view of the data, and whether or not it's completed or not, sitting right here,
4:39
let's go and add one more order just to make sure that it's going to show up in our list. Cake me. It's time for more cake. I'd better be small,
4:50
though. Remember, we've had a lot. I'm going for a rainbow, chocolate and Sprinkles.
5:09
Now, just a quick reminder. You have to have your ngrok running and have your website running in order for this to hit our API.
5:17
Just right here. We got our post for the order that came in. That's how it got into our database.
5:23
Presumably, let's refresh the page and see what happened. Oh, look at that. We have our second order with order id 2, that came in.
5:34
And if you notice in WhatsApp it said your order ideas too. We've accepted it. Thank you.
5:40
Well, it looks like our admin table for finding orders and fulfilling them is all set. Really quickly, before we wrap this up,
5:48
I just noticed that we had previously had user.number here our Json exchange the user number is passed across, but our actual database over here,
6:01
our user, they have a phone. So if you notice that that wasn't showing up, that's because that should be phone. Here we go. All good.