Assignment 6
Due Wed., December 8, 2010
Summary
In this assignment, you will add AJAX-based JavaScript code to our project management interface in order to make the Action panel fully functional with the backend.
What To Do
Step 1: Create a folder on your own computer.
Step 2: Copy down all of the files needed for assignment 6.
These files are located at the following filepath on login.cs.unc.edu:
/afs/cs.unc.edu/proj/courses/comp416-f10/public_html/assignments/a6/a6-files/
Step 3: Set the project_id variable in the file project-v50.js equal to your PID
Because this assignment works with data stored on the server, we need to make sure that your code and interacting with your assignment to test its functionality does not interfere with other people in the class. I have set up the database so that there are separate "projects" with actions, notes, events, etc. for each of you. The numerical project id is the same as your UNC PID.
The very first line of the file project-v50.js defines the variable project_id and looks like this:
var project_id = 1;
Change this line so that the variable is set to your PID.
Step 4: Confirm that things are working.
Once you have edited project_id to be equal to your PID, load the file project-v50.html into a browser. You should see a page that includes a project description with your name and a fully functioning notes and events panel. Actions will also be loaded into the actions panel, but the creating, editing, flagging, and deleting functionality will need to be implemented by you.
Step 5: Implement the Actions panel
Add code to implement the Action panel. In order to do this, you should only have to edit the file "project-actions-v50.js". This file contains code that handles the initial loading of actions into the interface as well as code that sets up event handlers for for clicking on the various icons that create new actions (i.e., the "+" sign in the header of the actions panel) and manipulate existing actions (i.e., the flag/edit/delete icons). These handlers currently just show an alert message. You will need to change them so that they implement the appropriate functionality.
In order to interact with actions stored on the back end, use the following RESTful web service interface:
- Creating an action:
- HTTP verb: POST
- URL: http://wwwr.cs.unc.edu/gtd_dev/projects/project_id/actions/action_id.json
- CGI parameters:
- flagged
- Either 'set' or 'unset'
- text
- Text description for the action
- due
- Date string for due date. If this parameter is not provided, then no due date is set.
- Response JSON will be the new action object.
- Updating an action:
- HTTP verb: PUT
- URL: http://wwwr.cs.unc.edu/gtd_dev/projects/project_id/actions/action_id.json
- CGI parameters:
- flagged
- Either 'set' or 'unset'
- text
- Text description for the action
- due
- Date string for due date. If set to the empty string "", then any existing due date is cleared.
- Response JSON will be the updated action object.
- Deleting an action:
- HTTP verb: DELETE
- URL: http://wwwr.cs.unc.edu/gtd_dev/projects/project_id/actions/action_id.json
- CGI parameters: None.
- Response JSON will be the numerical id of the deleted action object.
The code for implementing the notes and events panels are in the files project-notes-v50.js and project-events-v50.js. I highly recommend that you read through these files and understand how they work before starting on the actions panel. If you use these files as a template for your code, you should find this assignment fairly straightforward.