COMP 416 (Fall 2010)

Assignment 5

Due Mon., November 22, 2010

Summary

In this assignment, you will add event-based JavaScript code to our project management interface in order to make the Action panel functional. In other words, the action panel should respond to clicks on the star icon for flagging/unflagging an item, the cross icon for deleting, the pencil icon for editing, etc.

What To Do

Step 1: Create a folder on your own computer.

Step 2: Copy down all of the files needed for assignment 5.

These files are located at the following filepath on login.cs.unc.edu:
/afs/cs.unc.edu/proj/courses/comp416-f10/public_html/assignments/a5/a5-files/

Step 3: Understand the structure of the action item divs.

The project code generates a <div> for each unmarked action item with the following form:

<div id="action_N" class="list_item odd">
  <div class="item_label">
    <a href="view_action-v40.php?id=N">Action description</a>
  </div>
  <div class="item_actions">
    <a href="mark_action-v40.php?id=N"><img class="mark icon" src="checkbox.png" alt="Mark" /></a>
    <a href="flag_action-v40.php?id=N"><img class="flag icon" src="star-dim.png" alt="Unflagged" /></a>
    <a href="edit_action-v40.php?id=N"><img class="edit icon" src="pencil.png" alt="Edit" /></a>
    <a href="delete_action-v40.php?id=N"><img class="delete icon" src="cross.png" alt="Delete" /></a>
 </div>
</div>

This is essentially the same as what your code for Assignment 4 was to produce. One important difference is that the div has its id attribute set to a string that starts with "action_" and then has the numerical id associated with the action object from the project_info data structure appended. In the template above, this numerical id value is represented by N.

Other parts of the template above that will depend on the specific action item include:

odd: This class name will be either "odd" or "even" depending on its position in the panel.
Action description: This will be the action's text.
start-dim.png: The file name for the flag icon image will be "star-dim.png" for unflagged items and "star-bright.png" for flagged items.
Unflagged: The alt text for the flag icon image will be "Unflagged" for unflagged items and "Flagged" for flagged items.

Step 4: Associate event handlers for the flag, edit, and delete icons

Add code to the end of the init() function to register event handlers for the flag, edit, and delete icons for each of the action items. These handlers should be observing mouse clicks on these items. The project includes code that does something similar for the Notes panel and you can use that code as a template for your own.

Step 5: Implement the click event handler for the flag icon

The event handler that handles clicks for the flag icon should do the following:

Figure out the numerical id of the action item.
Retrieve the action item object from the array of action item objects stored in project_info.actions.
Toggle the flagged property ofthe action item object.
Set the filename and alt text of the flag icon accordingly.

The project includes code in the function handleNoteFlag for handling flag icon clicks for the items in the Notes panel that you can use as a template for your code.

Step 6: Implement the click event handler for the delete icon

The event handler for clicks on the delete icon should do the following:

Figure out the numrical id of the action item.
Retrieve the index of the corresponding action item in the array of action item objects stored in project_info.actions.
Use the array splice() method to remove the object from project_info.actions.
Remove the associated action item div from the Actions panel.
Fix up the odd/even class names for the remaining action item divs in the Actions panel.

The project includes code in the function handleNoteDelete for handling delete icon clicks for the items in the Notes panel that you can use as a template for your code.

Step 7: Implement the click event handler for the mark as done checkbox

The event handler that handles clicks for the completion mark checkbox icon should do the following:

Figure out the numerical id of the action item.
Retrieve the action item object from the array of action item objects stored in project_info.actions.
Set the done property of the action item object to true.
Remove the action item div from the Actions panel.
Fix up the odd/even class names for the remaining action item divs in the Actions panel.

Step 8: Set up and implement a click handler for the plus sign in the Actions panel header for creating a new action item.

The event handler should do the following:

Determine if the form for creating new actions is already being shown. If so, do nothing.
If not, create a form for creating new actions that includes:
- A text area for the action description.
- A checkbox for indicating whether the action is flagged or not.
- A checkbox for indicating whether the action has been done or not.
- Other inputs for indicating an optional due date.
- A submit button.
- A cancel button.
Insert the form into the page just after the 'actions_head' div.
Set up click handlers for the create and cancel buttons.
The click handler for the cancel button should simply remove the form from the interface.
The click handler for the create button should:
- Validate the form inputs and put up an alert message if the action text is not provided or if the due date, if set, is not valid.
- If the inputs are valid, create a new action object. The global project_info object has a method called createNewAction to do this. You call this function like this:
```
project_info.createNewAction(text, due, flagged, done)
```
  where
  - text is the text for the new action
  - due is either a JavaScript Date object or null if there is no due date
  - flagged is a boolean indicating the flag status
  - done is a boolean indicating whether the action item has been marked as done
  The method will create a new action object and insert it into the array of action objects in project_info.actions. The new action object will be returned as the result of the method.
- If the action has NOT been marked as done, create a new action div for it and insert it at the bottom of the 'actions_list' div. You can rely on the function create_action_div(action_obj) to create the div for you. You pass it the new action object that you got back from project_info.createNewAction(). Note: you will need to add either "odd" or "even" as a class name to this div as appropriate.
- Remove the create action form from the interface.

The project includes code in the functions showNewNoteForm, handleNewNoteCreate, and handleNewNoteCancel for adding this functionality for notes. You can use as a template for your code.

Step 9: Create an "a5" directory in your class webspace and upload all of the files to this directory.

Extra Credit

Implement the following functionality for extra credit:

(3 extra points)
When marking as done, deleting or creating an action with a due date, adjust the Events panel accordingly. Actions with due dates appear in the Events panel as a div with its id attribute set to 'actionevent_N' where N is the action object's numerical id property. So, if you are deleting or marking as done an action from the Actions panel that has a due date, seek out and find the corresponding div in the Events panel and remove it as well. Be sure to fix up the odd/even class names of the events that remain. Similarly, if you create a new action object with a due date, use the function create_event_div_from_action(action_obj) that takes the action object as a parameter in order to create a div appropriate for inserting into the Events panel.
(5 extra points)
Implement the editing function for actions. When the pencil icon is clicked, replace the div representing the action with a form for editing the action. The form should contain inputs for setting the action's text, flagged status, done status, and due date which are pre-filled with the current values. The form should have a submit button and a cancel button. Clicking on the submit button should update the values of the corresponding action object and create an appropriate div using create_action_div() to replace the form. Clicking on the cancel button should restore the div without updating the action object.