Homework 5

Due: Wednesday December 5, 11pm (STRICT, NO EXTENSIONS POSSIBLE)

Submission: Submit your work to this CrowdGrader assignment: https://www.crowdgrader.org/crowdgrader/venues/view_venue/4112

NOTE: This assignment is optional. If you decide to do it, it will be averaged together with the grades of assignments 1, 2, 3, 4, with the lowest grade in all assignments carrying only half of the weight as the other grades.

If you do decide to submit, you need to do also the CrowdGrader reviews.

The Assignment

For this assignment, you will build a bulletin board. The board has a fixed size of 3 rows and 3 columns, and is shaped like a grid. In each of the 9 squares, a post of the bulletin board can fit.

Each post consists of:

• Post text
• An image (suggestion: implement images last. I will give code to handle images).
• A delete button, which shows if the user is logged in, if the post is not blank, and one of the following is true:
  • The post belongs to the user, or,
  • These two conditions are all true:
    • There are no blank posts on the board,
    • the user has no posts on the board.
• An edit button, which shows if the user is logged in, if no post is being edited, and one of these is true:
  • The user is the author of the post.
  • The post is blank (empty).

Deleting a post turns it into a blank post. Blank posts have blank text, image, and date; they will have an edit button for logged-in users.

The rules for the delete button allow a user to replace a post on the board, deleting it then editing it, if the user has no other posts on the board. So new users can overwrite previous posts, just like in a paper bulletin board.

Editing must occur in place. There should be:

• an area where to edit the text, with a button "Save" to save the text and terminate the editing,
• a button to specify a file containing a photo (see suggestions about the photo). The photo is immediately uploaded and shown when a file is specified.

Editing terminates when the "Save" button is pressed.

Suggestions

Implement the image upload / display last. I will go over how to implement an image upload on Wednesday; you cannot use the examples in the "Overview" chapter of the book as those do not work with Ajax. Once I go over it, you can basically use my code.

There is no particular starter code. I suggest you start with the standard vue branch of the repository, and copy there code that is useful.

You need to build only one page, an index.html page. So you need an index() controller in defaults.py, plus the API methods in api.py.

You will need to create one database table, for the posts. You will need to store something similar to this:

• Post author
• Post content
• Post date
• Post image (as uuencoded string, see class on Wednesday).
• Post location (its position in the 3x3 table); you can decide whether to store it as the two coordinates, or simply as an integer from 0 to 8, or whatever you like.

To display the grid of posts, you can use an HTML table , or you can use stupid.css with <div class="container"> and <div class="third">. Perhaps the latter is a little bit easier.

Editing

The edit of the post text is performed with a textarea.

To implement edit in place, you can disable the textarea when the post is in view mode; you can do this via:

<textarea v-model="post.post_text" :disabled="!post._edit"></textarea>

This is perhaps the simplest solution. Above, post_text is the post text, and _edit is an attribute of post that you initialize to false, and you toggle to true for the post you are editing.

Vue variables

You may want to keep a few global Vue variables (defined in the data section of vue):

• is_logged_in
• user_email
• has_empty_post: true if there is at least an empty post on the board. Useful for implementing Delete button logic.
• is_editing: true if any post is being edited. Useful to turn off the editing button for all posts.

In addition, you may want to define some additional attributes (using Vue.set) for each post, namely:

• _edit: true if post is being edited.
• _blank: true if post is blank.

There may be other variables that may be useful to define.

If you run into trouble

The best way to get help is, of course, to start the homework early and ask in class about the portions you are not able to do.