IPL Voting APP With Vue JS — Part 2

Vamshi Krishna
Apr 3, 2019 · 5 min read
Image for post
Image for post
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:

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.

{

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();

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 — currently at 50% OFF


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…

Image for post
Image for post
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)=>{

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)=>{

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.

PLUG

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


My Point of Vue

Everything Regarding Vue JS and its counterparts.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store