IPL Voting APP With Vue JS — Part 2

IPL With Vue JS Part 2

Alright! Great to have you guys back here. Whoot-Whoot.

If you are wondering where is the first part — here is the link:

IPL Voting APP With VUE JS

Now in the previous post, we set up our Vue project and created our firebase project and added the data on to our database — firestore. We have added both individual team data and the matches for each day data. Cool Right?

In this post, we will see how to add the voting system. Now the voting system will be the same for a match and a team so let's look at how to add it for a match and you can figure out how to do the same thing for a team on your own. Do we have a deal?

First, let's have a look at our match object that we sent to firestore.

{
"Date": "23-3-2019",
"Time": "8 PM",
"Day": "Sat",
"Team": "Chennai Super Kings",
"Team2": "Royal Challengers Bangalore",
"Venue": "Chennai"
},

This is how a match object is structured, but if you notice, as of now we don't have any properties to store the votes for teams in the match. Firestore is amazingly handy in order to do that for us. With firestore, we can add data, and if that doesn’t exist, firestore will create that for us.

Let’s start with coding.

Fetching Todays Matches

In some cases, we have two matches per day and in other cases, we have a single match per day. Now we need a way to fetch all the matches that we have on that particular day, we can do that by using Firestore’s where method. This method is inbuilt into firestore and can be used to filter through our data, inside this method we can write our simple queries that firestore will run and fetch us the results.

We are going to filter through the data by the Date property inside each object, we will get the date on the client side, format it to match the format in the database and use to get the matches on that particular day.

We can get the same format by —

var dateObject = new Date();
var today = dateObject.getDate() + "-" + Number(dateObject.getMonth() + 1)+ "-" + dateObject.getFullYear();

That's it! we have the day-month-year format, that matches the date in the database.

Then, in the created lifecycle hook, let's clear out all the code from the previous post since that is used to send data on to the server. Now its time to bring it back to our app.

Let's start off by fetching the data like we normally do with firestore.

firebase.firestore().collection("Matches").get().then((doc)=>{})

Now this line above fetches all the documents inside the collection “Matches”, this is okay for our case, since we have like 50 or so documents and we can filter through them using javascript in the client, but this approach will easily fail once the data becomes huge or your site traffic is increasing rapidly, where each and every instance will fetch all the fifty documents and will try to filter through it.

This is where the “where” method shines.

The “where” method takes in three arguments —

1. Field — the field on which you are trying to filter the data
2. expression — lower, greater, equals, etc
3. comparable — the variable to compare with the Field

You can say...

firebase.firestore().collection("Matches").where("Date", "==", today).onSnapshot((doc)=>{
})

Above, since we have declared the “today” variable and assigned it the format that we want, we can directly give it to firestore to fetch the required data based on that query.

Now we get an array as a response and we can filter through the data as follows: -

firebase.firestore().collection("Matches").where("Date", "==", today).onSnapshot((doc)=>{
doc.forEach((document)=>{
    console.log(document.data())
}
})

And that’s it! You have all the data you need available.

PLUG

Check out My Vue JS Fundamentals Course for Beginners on Cynohub.

https://cynohub.com/courses/vue-js-fundamentals-course/

You can create a new data property called todaysMatches —

data(){
    return{
        todaysMatches: []
    }
}

You can store the documents you fetched from firestore and store them inside that array.

Then you can use V-For and other directives to build a simple UI. This is how mine looks…

Today's Matches

I know, I know, it's bad. You can do a lot better. Post what you have made in the comments below.

I’ve also added a small button for each team so that users who visit our website can vote for their favorite team.

With the beauty of event listeners, I’ve attached each button to a method that runs when the button is clicked.

Updating the Votes

Like we discussed, as of now firestore has now way of storing votes for each team. So before we try to update the value, we need to check if that value is present. Usually, if that value is not present, we get undefined.

Now we have three steps of increasing the count —

1. Reading the existing count.
2. Incrementing the value
3. Updating it the incremented value to the database

Since we are already done with Step One.

Let's have a small check in place to see if the value we get is undefined.

firebase.firestore().collection("Matches").doc(id).get().then((doc)=>{
var updateObject = {...doc.data()};
if(updateObject.TeamVotes == undefined){
updateObject.TeamVotes = 1;
console.log(updateObject)
}

This code makes sure that if the value we get is undefined, we will set it to 1. Our first vote.

But if the value we get is not undefined.

firebase.firestore().collection("Matches").doc(id).get().then((doc)=>{
var updateObject = {...doc.data()};
if(updateObject.TeamVotes == undefined){
updateObject.TeamVotes = 1;
console.log(updateObject)
}else{
updateObject.TeamVotes = Number(updateObject.TeamVotes + 1);
console.log(updateObject)
}
firebase.firestore().collection("Matches").doc(id).update(updateObject).then(()=>{
console.log("Update Succesful")
})
})

This is what it looks like, we are incrementing the value and pushing the object back to the browser. Here we are using the update method so that we don’t re-write everything and just update the changed values. This way is it's a little more efficient.

So That’s it. You can repeat the same thing for Team B as well and the same procedure for voting for the individual teams.

Cast Your Vote

Have a look at the finished product.

iplwithvue

PLUG

Check out My Vue JS Fundamentals Course for Beginners — currently at 50% OFF

https://cynohub.com/courses/vue-js-fundamentals-course/

Connect with me over these platforms—

Vamshi Krishna - Front-End Web Developer

Chsvk (@Chsvk21) | Twitter

Vamshi Krishna (@chsvk_) * Instagram photos and videos

If you enjoyed the post, leave a comment and a clap. See you in the next one.