1 1 00:00:01,210 --> 00:00:02,043 Hi guys. 2 2 00:00:02,043 --> 00:00:03,050 Welcome back. 3 3 00:00:03,050 --> 00:00:05,330 In this video, we're going to be adding the ability 4 4 00:00:05,330 --> 00:00:08,430 to edit alerts in your application. 5 5 00:00:08,430 --> 00:00:13,330 So far, we've added new alerts and also an alert index. 6 6 00:00:13,330 --> 00:00:15,310 Now we're going to go into our alerts templates 7 7 00:00:15,310 --> 00:00:19,363 and add edit_alert.html. 8 8 00:00:20,290 --> 00:00:21,660 Make sure to delete all that. 9 9 00:00:21,660 --> 00:00:23,580 And then we're gonna go over to new_alert 10 10 00:00:23,580 --> 00:00:24,787 and we're gonna copy everything there 11 11 00:00:24,787 --> 00:00:27,210 and we're gonna paste it into edit_alert. 12 12 00:00:28,049 --> 00:00:30,913 Now the reason for that is because when we edit an alert, 13 13 00:00:30,913 --> 00:00:33,990 we're going to want to be able to see 14 14 00:00:33,990 --> 00:00:36,380 the different fields that are in the alert 15 15 00:00:36,380 --> 00:00:38,530 so that we can change them. 16 16 00:00:38,530 --> 00:00:42,080 But we're going to make a few limitations 17 17 00:00:42,080 --> 00:00:45,120 into what edit a user can do. 18 18 00:00:45,120 --> 00:00:48,410 First of all, we're going to let them change the alert name 19 19 00:00:49,250 --> 00:00:50,403 or the URL. 20 20 00:00:51,660 --> 00:00:53,860 If they want to change other than those two things, 21 21 00:00:53,860 --> 00:00:56,410 we're gonna ask them to create a new alert instead. 22 22 00:00:57,300 --> 00:00:59,100 The reason for that was two-fold. 23 23 00:00:59,100 --> 00:01:01,140 The first one is, if you change an alert's name 24 24 00:01:01,140 --> 00:01:04,220 and the item URL, it really stops being the same alert. 25 25 00:01:04,220 --> 00:01:05,720 It's now a different alert. 26 26 00:01:05,720 --> 00:01:07,890 It's about a different item entirely. 27 27 00:01:07,890 --> 00:01:09,500 If you change the name and the item URL, 28 28 00:01:09,500 --> 00:01:11,930 you're probably also gonna change the price limit. 29 29 00:01:11,930 --> 00:01:13,480 Really, you're changing everything about the alert. 30 30 00:01:13,480 --> 00:01:16,230 You might as well create a new one and delete this one. 31 31 00:01:17,310 --> 00:01:19,570 The second reason is to show you guys 32 32 00:01:19,570 --> 00:01:21,390 how it's done. (laughs) 33 33 00:01:21,390 --> 00:01:22,450 That's really the main one. 34 34 00:01:22,450 --> 00:01:25,290 If you want to allow the user to edit everything, 35 35 00:01:25,290 --> 00:01:28,140 then I'll also show you how to do that. 36 36 00:01:28,140 --> 00:01:31,360 But for now, what we have here is an exact copy 37 37 00:01:31,360 --> 00:01:33,433 of the new alert template. 38 38 00:01:34,480 --> 00:01:35,740 What does that mean? 39 39 00:01:35,740 --> 00:01:38,900 It means that when the user submits this form, 40 40 00:01:38,900 --> 00:01:40,960 they will be able to send us 41 41 00:01:40,960 --> 00:01:43,930 or they will send us three different pieces of data. 42 42 00:01:43,930 --> 00:01:47,040 They will send us the name, 43 43 00:01:47,040 --> 00:01:49,120 they will send us the item URL, 44 44 00:01:49,120 --> 00:01:51,043 and they will send us the price limit. 45 45 00:01:52,450 --> 00:01:56,610 Now in our alert views, we've got this endpoint new_alert 46 46 00:01:56,610 --> 00:01:59,740 that receives that data and then deal with it 47 47 00:01:59,740 --> 00:02:00,940 and creates a new alert. 48 48 00:02:02,140 --> 00:02:06,650 If we want to edit an alert, all we have to do 49 49 00:02:06,650 --> 00:02:08,423 is we have to take that data, 50 50 00:02:09,600 --> 00:02:12,550 make sure that we have an alert object 51 51 00:02:12,550 --> 00:02:14,723 for the alert that we want to edit. 52 52 00:02:15,580 --> 00:02:18,070 We'll just change the alert object and save it back 53 53 00:02:18,070 --> 00:02:20,423 to MongoDB without creating a new alert. 54 54 00:02:22,810 --> 00:02:25,140 The only thing we must make sure we have 55 55 00:02:25,140 --> 00:02:26,450 if we want to edit an alert 56 56 00:02:26,450 --> 00:02:28,330 is we need the alert_id 57 57 00:02:29,800 --> 00:02:34,800 so that we can get an alert with that ID from the database 58 58 00:02:34,920 --> 00:02:37,663 and we can change it instead of creating a new one. 59 59 00:02:39,690 --> 00:02:40,523 All right. 60 60 00:02:40,523 --> 00:02:45,523 With that said, let's start creating our endpoint here 61 61 00:02:45,920 --> 00:02:47,630 and then we'll go back to the template 62 62 00:02:47,630 --> 00:02:49,970 and make sure that we disallow 63 63 00:02:49,970 --> 00:02:51,693 those fields from being modified. 64 64 00:02:52,710 --> 00:02:57,370 If we want to take in a particular alert and change it, 65 65 00:02:57,370 --> 00:02:59,633 we need to have an alert ID. 66 66 00:03:00,782 --> 00:03:02,210 What we're gonna do is we're gonna say 67 67 00:03:02,210 --> 00:03:06,560 that the alert_blueprint endpoint here slash edit 68 68 00:03:06,560 --> 00:03:09,520 is going to take in an alert ID 69 69 00:03:10,410 --> 00:03:12,320 and then message is get 70 70 00:03:14,410 --> 00:03:15,680 and post. 71 71 00:03:15,680 --> 00:03:17,750 What does this mean? 72 72 00:03:17,750 --> 00:03:22,120 It means that when a user accesses this endpoint, 73 73 00:03:22,120 --> 00:03:27,120 it'll be something like http://mysite.com/alerts 74 74 00:03:27,670 --> 00:03:31,720 because that's the URL prefix, slash edit 75 75 00:03:32,756 --> 00:03:37,420 because that's this first part of the endpoint, slash 76 76 00:03:39,360 --> 00:03:41,453 the alert ID. 77 77 00:03:42,970 --> 00:03:46,140 If we have something like this 78 78 00:03:46,140 --> 00:03:51,140 and we type out less than string colon alert_id 79 79 00:03:51,470 --> 00:03:53,740 greater than these crocodile clips around it, 80 80 00:03:53,740 --> 00:03:58,740 Flask will be able to take this string here from the URL 81 81 00:03:59,280 --> 00:04:00,910 and give it to us. 82 82 00:04:00,910 --> 00:04:02,465 It'll say edit_alert. 83 83 00:04:02,465 --> 00:04:05,260 We will get an alert ID. 84 84 00:04:05,260 --> 00:04:08,980 We'll get a string containing this value here 85 85 00:04:08,980 --> 00:04:10,483 inside our endpoint. 86 86 00:04:11,370 --> 00:04:12,593 Why is that useful? 87 87 00:04:14,060 --> 00:04:19,060 We can get an alert by its ID, which is pretty handy. 88 88 00:04:20,800 --> 00:04:24,400 We can say alert is alert.get_by_id 89 89 00:04:24,400 --> 00:04:26,087 and we can pass it in the alert ID. 90 90 00:04:26,087 --> 00:04:28,160 That's gonna go into the database, 91 91 00:04:28,160 --> 00:04:31,090 retrieve an alert with this ID, 92 92 00:04:31,090 --> 00:04:33,970 and allow us to modify it or show it 93 93 00:04:33,970 --> 00:04:35,520 or whatever else we want to do. 94 94 00:04:36,550 --> 00:04:39,313 Next, if the request method is post, 95 95 00:04:40,880 --> 00:04:43,700 then we're gonna deal with the change. 96 96 00:04:43,700 --> 00:04:47,680 We will assume that we have received some data from the form 97 97 00:04:47,680 --> 00:04:51,233 and that data will be used to change the alert. 98 98 00:04:52,150 --> 00:04:54,670 The first thing we'll say is price limit is float 99 99 00:04:54,670 --> 00:04:57,083 of request.form price_limit. 100 100 00:04:58,220 --> 00:05:01,610 This is the field price_limit in the form data 101 101 00:05:01,610 --> 00:05:03,420 that we received. 102 102 00:05:03,420 --> 00:05:05,030 And then we'll say alert, 103 103 00:05:05,030 --> 00:05:07,620 this one that we retrieved up here, 104 104 00:05:07,620 --> 00:05:12,210 dot price_limit equal the new price_limit variable. 105 105 00:05:12,210 --> 00:05:16,670 This effectively modifies the alert. 106 106 00:05:16,670 --> 00:05:18,620 And then we'll say alert.save_to_mongo. 107 107 00:05:20,280 --> 00:05:25,176 Finally, we will return a redirect 108 108 00:05:25,176 --> 00:05:28,820 of url_for for dot index. 109 109 00:05:28,820 --> 00:05:31,493 We need these two imports from Flask. 110 110 00:05:34,420 --> 00:05:37,910 What this does is it calculates the URL 111 111 00:05:37,910 --> 00:05:42,910 to go to this index method inside the current blueprint. 112 112 00:05:43,370 --> 00:05:44,320 That's what the dot means. 113 113 00:05:44,320 --> 00:05:45,710 Dot means current blueprint. 114 114 00:05:45,710 --> 00:05:47,250 Index is the function name. 115 115 00:05:47,250 --> 00:05:49,780 Sorry, I said method there, but it's a function. 116 116 00:05:49,780 --> 00:05:52,180 And then redirect is going to send the user 117 117 00:05:52,180 --> 00:05:55,823 from this endpoint over to that one. 118 118 00:05:57,520 --> 00:06:00,060 Finally, if it wasn't a post, we're gonna return 119 119 00:06:00,060 --> 00:06:04,560 a render_template of alerts/edit_alert.html. 120 120 00:06:06,740 --> 00:06:09,440 To this endpoint, we're also gonna pass in the alert 121 121 00:06:09,440 --> 00:06:10,803 that we loaded earlier on. 122 122 00:06:12,236 --> 00:06:14,033 I'll tell you why in just a moment. 123 123 00:06:17,180 --> 00:06:20,480 What happens when we do save to Mongo? 124 124 00:06:20,480 --> 00:06:23,810 We've got an alert object that we loaded up here. 125 125 00:06:23,810 --> 00:06:26,290 Then we modified something inside it. 126 126 00:06:26,290 --> 00:06:28,580 And then we're gonna save to Mongo. 127 127 00:06:28,580 --> 00:06:32,450 What this does, if you remember correctly, is it updates. 128 128 00:06:32,450 --> 00:06:35,430 It goes into the collection of the alert 129 129 00:06:35,430 --> 00:06:38,660 and then it looks to see if the database can find anything 130 130 00:06:38,660 --> 00:06:41,750 matching the underscore ID property of the alert. 131 131 00:06:41,750 --> 00:06:44,000 And it will because we retrieved that one 132 132 00:06:44,000 --> 00:06:44,833 from the database. 133 133 00:06:44,833 --> 00:06:46,160 So, it will be there. 134 134 00:06:46,160 --> 00:06:48,410 And then it's gonna replace all of its contents 135 135 00:06:48,410 --> 00:06:50,063 with the alert's JSON. 136 136 00:06:51,020 --> 00:06:54,360 Remember, the alert's JSON will have changed 137 137 00:06:54,360 --> 00:06:58,330 because we've modified the alert object in this line. 138 138 00:06:58,330 --> 00:07:00,750 This is how you update something in the database 139 139 00:07:00,750 --> 00:07:02,370 without creating a new one. 140 140 00:07:02,370 --> 00:07:05,300 There is no new alert constructor being called 141 141 00:07:05,300 --> 00:07:06,690 in this endpoint, 142 142 00:07:06,690 --> 00:07:10,970 which means no new underscore ID property is generated. 143 143 00:07:10,970 --> 00:07:13,420 So, we're modifying the one that we already have. 144 144 00:07:15,003 --> 00:07:15,940 Cool. 145 145 00:07:15,940 --> 00:07:19,680 Now in this endpoint, we're only getting the price limit. 146 146 00:07:19,680 --> 00:07:22,860 We're not touching the name or the item URL. 147 147 00:07:22,860 --> 00:07:26,600 But the user can still change those inputs. 148 148 00:07:26,600 --> 00:07:29,420 He or she can put whatever they want into them, 149 149 00:07:29,420 --> 00:07:31,340 but they will not be used. 150 150 00:07:31,340 --> 00:07:33,440 That's not a very nice interaction. 151 151 00:07:33,440 --> 00:07:36,140 The user can change the name, they press save, 152 152 00:07:36,140 --> 00:07:37,710 and then nothing happens, it seems, 153 153 00:07:37,710 --> 00:07:40,010 because that is not used. 154 154 00:07:40,010 --> 00:07:41,980 What we're gonna do is instead of putting 155 155 00:07:41,980 --> 00:07:44,390 a placeholder there, we're gonna put a value. 156 156 00:07:44,390 --> 00:07:47,933 The value is gonna be alert.name. 157 157 00:07:49,190 --> 00:07:51,410 Of course, the alert will have a name. 158 158 00:07:51,410 --> 00:07:55,610 What this is gonna show is the field will show 159 159 00:07:55,610 --> 00:07:58,590 something already typed into it. 160 160 00:07:58,590 --> 00:08:01,890 What's already typed into it will be the alert's name. 161 161 00:08:01,890 --> 00:08:05,630 But we're gonna make it disabled so that the user 162 162 00:08:05,630 --> 00:08:07,703 cannot change the value inside. 163 163 00:08:08,800 --> 00:08:10,620 Similarly, for the item URL, 164 164 00:08:10,620 --> 00:08:12,680 we're gonna say value equal 165 165 00:08:15,823 --> 00:08:17,773 alert.item._url, I think it is. 166 166 00:08:19,770 --> 00:08:21,253 Let me double-check. 167 167 00:08:22,360 --> 00:08:25,610 Oh sorry, it's alert.item.url. 168 168 00:08:25,610 --> 00:08:28,263 We will do that. 169 169 00:08:32,380 --> 00:08:34,440 Once again, we're gonna make it disabled as well 170 170 00:08:34,440 --> 00:08:36,333 so the user cannot change it. 171 171 00:08:37,750 --> 00:08:39,820 We're gonna keep this as is. 172 172 00:08:39,820 --> 00:08:42,930 But instead of a placeholder or as well as a placeholder, 173 173 00:08:42,930 --> 00:08:46,113 we're also going to add a value. 174 174 00:08:47,220 --> 00:08:52,063 So, we'll say value equal alert.price_limit. 175 175 00:08:53,870 --> 00:08:57,755 The reason we do this is so that the user can see 176 176 00:08:57,755 --> 00:09:02,470 that this already has something inside it. 177 177 00:09:02,470 --> 00:09:04,920 Don't forget the quotation marks like I just did. 178 178 00:09:06,080 --> 00:09:09,300 This value will already be typed into the field. 179 179 00:09:09,300 --> 00:09:11,450 The user can then change it if they want. 180 180 00:09:11,450 --> 00:09:13,000 But these two are gonna be disabled 181 181 00:09:13,000 --> 00:09:14,950 and they cannot be changed. 182 182 00:09:14,950 --> 00:09:18,223 Now instead of create, we're gonna change this to update. 183 183 00:09:19,170 --> 00:09:20,550 Instead of create over here, 184 184 00:09:20,550 --> 00:09:22,210 we're gonna change this to update. 185 185 00:09:22,210 --> 00:09:23,660 Instead of create in here, 186 186 00:09:23,660 --> 00:09:25,870 we're gonna change this to update. 187 187 00:09:25,870 --> 00:09:29,093 Just making sure that we keep that all consistent. 188 188 00:09:30,670 --> 00:09:31,630 That's it. 189 189 00:09:31,630 --> 00:09:33,370 That's how we can edit alerts. 190 190 00:09:33,370 --> 00:09:36,880 We're just gonna make small changes in the form as required 191 191 00:09:36,880 --> 00:09:40,370 to show current data and to prevent editing from things 192 192 00:09:40,370 --> 00:09:42,440 that we don't want to be edited 193 193 00:09:42,440 --> 00:09:45,780 and then we add the endpoint that takes in the data 194 194 00:09:45,780 --> 00:09:46,890 and does something with it. 195 195 00:09:46,890 --> 00:09:48,450 The thing to make sure 196 196 00:09:48,450 --> 00:09:50,620 is that we're not creating a new alert, 197 197 00:09:50,620 --> 00:09:54,490 we're just using the one that's coming in from the database. 198 198 00:09:54,490 --> 00:09:57,853 Because this has this string alert_id, 199 199 00:09:58,930 --> 00:10:01,730 that means that we have an alert ID here that we can use 200 200 00:10:01,730 --> 00:10:03,750 to retrieve something from the database. 201 201 00:10:03,750 --> 00:10:06,730 The next question is, how do we get it 202 202 00:10:06,730 --> 00:10:10,050 because a user is not gonna have an alert ID to give us 203 203 00:10:10,050 --> 00:10:12,883 since they don't know what IDs alerts have. 204 204 00:10:14,310 --> 00:10:17,653 We're gonna do that in the alert index. 205 205 00:10:18,540 --> 00:10:23,540 Here, we do have something that says for alert in alerts 206 206 00:10:24,398 --> 00:10:26,910 and then it iterate over each alert 207 207 00:10:26,910 --> 00:10:29,471 and it shows this list-group-item. 208 208 00:10:29,471 --> 00:10:34,250 In here, we could add a link to edit the alert. 209 209 00:10:34,250 --> 00:10:36,050 We're gonna do that in the next video 210 210 00:10:36,050 --> 00:10:38,110 because we will have the alert ID here. 211 211 00:10:38,110 --> 00:10:39,860 We can add the button in there. 212 212 00:10:39,860 --> 00:10:41,270 Join me in the next one. 213 213 00:10:41,270 --> 00:10:42,220 I'll see you there.