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> {{}}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, 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() Uh, 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.

Talk Python's Mastodon Michael Kennedy's Mastodon