Shopping List App

Write a shopping list app using Vue.js and the provided starter code. The app should be called shopping, and it should be in apps/shopping, where you can already find some starting code. Use the code given as starting point for the HTML (pay attention to the classes, as they are used in testing).

The app allows users to store a shopping list. The list should be stored in the database, associated with the user. The index page should be accessible only when the user is logged in, and each user should have their own shopping list.

First, you should create a database for storing the list; each item should have at a minimum:

• the item name;
• a boolean field indicating whether the item has been purchased or not;
• a way to associate the item with the user.

The app should have the following features:

• The user should be able to add an item to the list.
• New items are added to the top of the list.
• The user should be able to mark an item as purchased by checking a checkbox.
• Checked items are moved to the bottom of the list.
• Unchecked items are moved to the top of the list.
• The user should be able to delete an item from the list.
• When the list is loaded, unchecked items should be displayed at the top, and checked items at the bottom.

Implementation

To run py4web, you can do:

./py4web.sh

Of course, do look into that script. All it does is to run the command:

py4web run --errorlog=:stdout -L 20 apps

where the options are to optimize logging. The app will be available at http://localhost:8000/shopping.

You should only modify the following files:

• static/js/index.js
• templates/index.html
• controllers.py
• models.py

To implement the app, you should follow these steps:

• First, define in models.py the database model for the shopping list. Make sure you store whether items are checked, and to which user they belong.
• In controllers.py, create the necessary routes to handle the shopping list, including:
  • loading the item list;
  • adding an item;
  • marking an item as purchased;
  • deleting an item.
• In templates/index.html, implement the HTML template for the shopping list, first statically, then with bindings to Vue.js. You can find a template already with the right classes defined; use that, so that the grading will go through.
• In static/js/index.js, implement the Vue.js app that allows the user to interact with the shopping list.

Grading

You can grade the assignment yourself, like this:

python grade.py

The grading is as follows:

• 1 point: it's possible to add an item.
• 2 points: the item persists when the page is loaded.
• 1 point: the item is not visible to another user.
• 1 point: when a second item is added, it's added to the top of the list.
• 1 point: it's possible to mark an item as purchased, and checked items are moved to the bottom of the list.
• 1 point: when reloading, checked items follow unchecked items.
• 1 points: the dynamics of checking/unchecking items are correct.
• 1 points: deletion works correctly.
• 1 point: no interference between users.

Killing old servers

Sometimes, you may need to kill old servers. You can list the old servers via:

ps aux | grep 'py4web'

If you have more than one server associated with port 8800, a new server will not be created, and this is a common source of errors. You can kill all leftover py4web servers via:

pgrep -f 'py4web' | xargs kill -9

Submission

To submit, first crete the zip file, via:

python zipit.py

This creates the file submission.zip. Submit this file to the Google Form, and be sure to press SUBMIT on the form. Just uploading the file to the form is not enough.