Homework 3

Due: Wednesday November 7, 11pm.

Starting code

The starting code is in the 2018-fall-hw3 branch of the repository.

Assignment

Implement a thumbs-rating mechanism

In this assignment, you will implement a thumb-rating mechanism for posts. You should start from the provided sample code, and the code in the 2018-10-29 branch will also be very useful to you, as it will contain many examples related to what you have to do.

We will develop a rating mechanism based on thumbs. This rating mechanism should work for logged-in users only.

Similarly to what done in 2018-10-29 for stars, below every post there needs to be a thumb-rating mechanism, consisting of two icons: a thumbs-up one and a thumbs-down one.

Notice that font awesome makes available four thumb icons: thumbs-up and thumbs-down, which are solid thumbs, and thumbs-o-up and thumbs-o-down, which are outline icons.

Thumbs behavior

The rating mechanism works as follows.

If the mouse is not hovering on the thumbs: If the user has not thumbed up or down anything, that is, if the state in the db table is None, or the row does not exist, or the content is not one of 'u' (for up) and 'd' (for down), then both thumbs are shown as outlines. If the state in the db is 'd', then the thumbs down is solid and the thumbs up is outline, and if the state in the db is 'u', then vice versa. The color is black.

If the mouse is hovering on the thumbs:

• The thumb over which the user is hovering is solid, the other one is outline.
• The color is: gray if the state is different from what recorded in the db, and black if it coincides. For example, if the db state for the thumb is 'u', then when the user hovers on the thumbs-up, it is solid and black (it coincides with the db) while the thumbs down is gray and outline; when the user hovers over the thumbs-down, then the thumbs-up is outline and black, and the thumbs-down is solid and gray.

When the user clicks on a thumbs:

• If the thumb does not coincide with the state of the db, then the state of the db is updated (via an AJAX call) to what has been clicked. For instance, if the state of the db is None or 'd', and the user clicks on thumbs-up, the state of the db is updated to 'u'.
• If the thumb does coincide with the state of the db, then the state of the db is set to None, that is, the thumb is... "de-thumbed". This allows users to withdraw their judgement, positive or negative, and "abstain". For instance, if the state of the db is 'd', and the user clicks on thumbs-down, then the state of the db is updated to None.

In the above explanations, we do not distinguish between the state of the db as known to the server and as known to the client. That is, once a user clicks on a thumb, the state of the db is considered immediately changed for the purpose of the rules above, even though the AJAX call will take a bit of time to reach the server.

Thumbs Count

In addition, on the side of the thumbs-up and thumbs-down icons, you need to display the difference between thumbs-up and thumbs-down; this is positive for a post that has received more thumbs-up than thumbs-down, and negative for posts that have received more thumbs-downs than ups.

Hint: I haven't implemented this, but I think the easiest might be to ask the database for the count of all the thumbs, except those from the current user. Then, you can simply add or subtract 1 (or leave unchanged) according to the user's own thumb, which you have available. Your query will say something like: get all the thumbs for this post, whose user_email is not the currently logged in user. Then you iterate on them, and you count how many ups ('u') and downs ('d') there are.

Hiding the Add Post form

In addition, we want to make so that the form to add a post is not always displayed. Normally, the form is hidden, and there is a button with "Add Post" (and maybe a plus icon) where the form would be. When you click on the Add Post button, the form appears, and the Add Post button disappears. When you submit the form, the form disappears, and the Add Post button reappears in its place.

What you have to implement

In order to implement the thumbs-rating mechanism, you will have to write Vue code in index.html, and the javascript that powers it in default_index.js. You will also need to write in default/api.py all the required endpoints for AJAX calls.

As for hiding the add-post form, I suggest you use something like <div v-if="show_form">...</div> to control the visibility of the form, and similarly for the button (perhaps you can even use <button v-if="!show_form">...</button>). You can then toggle the boolean Vue variable show_form (remember to declare it) to show/hide the content.

Submission instructions

This will be submitted to the CrowdGrader assignment: https://www.crowdgrader.org/crowdgrader/venues/view_venue/4066