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