Angularjs 1, Building a Data-Driven App, Pushing awards to our database

Let’s take care of writing the information to the database. I’ll also go ahead and show the prizes in the list, right here. What I need to do is write this function that I’m calling get love, here, scope.givelove and this is going to be a function and it’s going to get passed the check in information, as well as the gift information.

Remember that’s being called from check in list and it’s called right here, so the information that is on this form is going to get passed through these variables, right here, into this give love function that we’re creating. What we need is a reference to the database at the position that we want to insert this data. Let’s take a look at our data file right now and you can see that I’ve got the users, then a hash for each user, then meetings, hash for each meeting, check ins, hash for each one of the check ins.

We’re just going down this structure and then finding the user that we want to insert this data in and then we’re going to create a new sort of section, right here, called awards, and then insert the data right here. To do that, we pretty much have what we need in this reference, right here. This gets you all the way to check ins. From there, let’s go ahead and great a variable. We’ll call it reflove and it’s going to be the reference and then we’re going to use the child method, using the my check in information.

We’ll use fire bases ID method to get the ID of that check in, that way we have the hash, and then we can do the child of that, and then we’ll put all of the gifts in an awards section, right, and then we’ll create another variable called checkinsarray. We’ll use the firebaseArray method to get the reference that we just, sort of, asked for. Let’s make this a little bit bigger, so we can see the whole thing.

Again, the reason we’re using checkinsArray is because we want to add something to that position and to do that we’re going to use the add method, but that is only available to arrays, so we’ll have to say checkinsArray and then use angular fires add method to pass along an object with the information that we want to store at that position. We’ve done this plenty of times before, but it’s a good, sort of, review to take a look at what we’re doing here. We’re going to pass along the name of the gift and this is just some text that has the information of the name of the gift and then we want to do a date, just like we did before, we can use this firebase.database.ServerValue.TIMESTAMP, so we get the exact date that this entered into the database.

That’s going to be almost it. Let’s go ahead and save this and let’s go ahead and show this, right here. For Barot, we’ll go ahead and click on this and it toggles to show the user, and let’s just gift Barot a hug and we’ll hit the plus sign, here, and it’s going to collapse and if we go into the database and we find Barot, should be the first one. Sometimes it puts these things in a completely different order than what you actually, sort of, placed them in, so it has its own way of doing that.

Let’s find Barot in here. There he is and you can see that now there is an awards section here and if we open that up there, we find the hug award. It’s pushing into the database properly. Let’s go back, we obviously need to display the gift. Let’s do that in the checkins list and I’m going to do that right underneath this form. I’m going to create an unordered list, because we will be able to give the users more than one gift if we want to, if we’re feeling generous.

For the class I’m going to use awardslist and a clear fix right here. Then we’ll use a list item that will have a class of clear fix and this is going to be a list that we’re going to iterate through. We’ve done this before, if you remember, the NG repeat allows you to iterate through a list, we’re using it right here.

We can come down here and use that same NG repeat directive to go through a list of elements. In this case, we’re going to get the key, as well as the award information in checkin.awards. So we’re reading that awards element and then we’re putting it in a temporary variable called award and we’re also getting the key and then, in here, we’re going to create a div with a class of award and, of course, we’re just going to put the award name in here.

We’ll use the double curly braces and write the award.name and we don’t need all that space on that div, so let’s go ahead and close that out. That should be it, let’s go ahead and save this and we should be able see Barot’s hug right here. We’ll also give him a hug in Spanish, so we’ll say abrazo. Hit the plus sign here and if we open this up we should see both of them appear.

That’s pretty cool, we can add gifts to any one of these users that we want to, by hitting this love and then just kind of. Let’s give Constance a hug as well. We’ll hit the plus sign and you can display it like this. That’s pretty cool. Really, it’s nothing that we haven’t done before, it’s just that when we create a more complex application we have to go through the same process of modifying the controller, as well as the view, in order to get done the things that are important to our applications.

Leave a Reply

avatar
1000
  Subscribe  
Notify of