COMP 416 (Fall 2010)

Assignment 4

Due Mon., November 1, 2010

Summary

In this assignment, you will add JavaScript code to an "empty" version of our project management interface in order to fill it with information about a particular project dynamically after the page is loaded. The information about the project (i.e., its name, description, associated tags, notes, events, due dates, etc.) will be retrieved from a JavaScript object that represents the project.

What To Do

Step 1: Create a folder on your own computer.

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

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

Step 3: Load the file project-v30.html in a browser and view its source and make you understand how the project_info variable works.

Notice that while it has the same structure as project-v20.html from assignment 2, it is empty wherever there should be content specific to the project (i.e., the specific notes, actions, events, and tags). You need to create JavaScript code that will generate the project-specific parts of the page.

The project-v30.html template loads 3 JavaScript files:

prototype.js
This is the prototype library that I've described in class. For this assignment, we will be using it to help navigate the document structure using the "$" and "$$" functions that it provides. These functions return extended Element objects that include methods for manipulating and inserting content in the page.
project-info.js
This is a JavaScript file that I've provided that creates an object to represent the project-specific information. This object is stored in the global variable "project_info" and its properties are described in more detail below.
project-v30.js
This is the file that you need to edit in order to complete the assignment. Like all of our examples in class, it contains an "init" function that is called when the page is loaded. You need to add code to the init function in order to generate and insert the project-specific parts of the page as appropriate.

The global variable project_info will contain an object with properties corresponding to the various actions, notes, events, and tags associated with the project. These properties are described below:

project_info.id: A numerical unique identifier associated with the project.
project_info.title: A string containing the project title.
project_info.description: A string containing the project description.
project_info.tags: An array of strings representing tag names associated with the project.
project_info.notes: An array of note objects associated with the project. See below for details of the note object.
project_info.actions: An array of action objects associated with the project. See below for details of the action object.
project_info.events: An array of event objects associated with te project. See below for details of the event object.

Note objects

A described above, the 'notes' property of project_info contains an array of note objects. Each note object has the following properties (for the documentation below, assume that the variable note_obj contains a reference to a note object):

note_obj.id: A numerical unique identifier associated with the note.
note_obj.flagged: A boolean value that indicates whether or not the note has been flagged or not.
note_obj.text: A string containing the note text.

Action objects

Action objects have the following properties (for the documentation below assume that the variable action_obj contains a reference to an action object):

action_obj.id: A numerical unique identifier associated with the action.
action_obj.due: A JavaScript Date object representing the due date associated with this action. If the action does not have a due date, this property will be null. See here for more documentation on JavaScript Date objects.
action_obj.flagged: A boolean value that indicates whether or not the action has been flagged or not.
action_obj.done: A boolean value that indicates whether or not the action has been completed or not.
action_obj.text: A string containing the text description of the action.

Event objects

Project event objects have the following properties (for the documentation below assume that the variable events_obj contains a reference to a project event object):

event_obj.id: A numerical unique identifier associated with the event.
event_obj.start: A JavaScript Date object representing the start date associated with this event. All events have a start date.
event_obj.end: A JavaScript Date object representing the end date associated with this event. Only multi-day events have an end date, otherwise this property will be null.
event_obj.flagged: A boolean value indicating whether this event has been flagged or not.
event_obj.text: A string containing the text description of the event.

Step 4: Generate the tags on the sidebar.

For each of the tags associated with the project, create a <div> element that matches the following pattern and insert these elements as children of the <div> element that has the id "tagpanel".

<div class="tag_item">
  <a href="remove_tag-v30.php?tag=tag_string"><img class="delete icon" src="cross.png" alt="Delete" /></a>
  <a class="tag" href="view_tag-v30.php?tag=tag_string">tag_string</a>
</div>

Important notes about generated tag content:

The word tag_string in the pattern above indicates a placeholder for the tag's string.
Note that the URLs of the linking <a> elements for removing and viewing tags use CGI URLs that include the parameter 'tag' which needs to be set to the tag's string value. Since the tag may contain spaces or other characters not allowed in URLs, you must be sure to use the JavaScript encodeURIComponent() function to encode the tag string when forming the URL.

Step 6: Generate the action items in the action panel.

For each of the actions associated with the project, create <div> elements that match the following pattern and include it as a child of the <div> with the 'id' attribute of 'actions_list':

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

Important notes about how to generate content for each action item:

The string "Action description" in the pattern above should be replaced with the appropriate description text for the action.
Note that the URLs associated with the various linking <a> elements are CGI URLs that require an 'id' parameter. In the pattern above, this parameter is set to the placeholder 'action_id', but that should really be the appropriate action's numerical identifier (see description of the action object above).
You should alternate between setting the class attribute of the generated div to "list_item odd" and "list_item even". You can either do this at the time that you generate the div or go back through after you have inserted the div's into the document, adding the "odd" and "even" class names as appropriate. Prototype provides extended Elements with an addClassName method that you might find useful for this.
The source filename (i.e., the 'src' attribute) of the <img> element associated with the "flag_action" link should be set to "star-dim.png" if the action is not flagged (i.e., its 'flagged' property is set to false) and set to "star-bright.png" if the action is flagged. Similarly, the 'alt' attribute of this <img> element should be set to "Flagged" or "Unflagged" accordingly.
You should NOT generate content for action items that have already been marked as being completed (i.e., actions that have their "done" property set to true.

Step 7: Generate the event items in the event panel.

For each of the events associated with the project, create a <div> element that matches the following pattern and include it as a child of the <div> element with the 'id' attribute of "events_list".

<div class="odd list_item">
  <div class="item_date">
    <a href="calendar-v30.php?date=yyyymmdd">mm/dd/yyyy</a>
  </div>
  <div class="item_label">
    <a href="view_event-v30.php?id=event_id">Event description</a>
  </div>
  <div class="item_actions">
    <a href="flag_event-v30.php?id=event_id"><img class="flag icon" src="star-dim.png" alt="Unflagged" /></a>
    <a href="edit_event-v30.php?id=event_id"><img class="edit icon" src="pencil.png" alt="Edit" /></a>
  </div>
</div>

Important notes about how to generate content for each event item:

The string "Event description" in the pattern above should be replaced with the appropriate description text.
The start date of the event should be represented by a string in the form of "mm/dd/yyyy". Note that the URL associated with the <a> element that encompasses the event start date should be a CGI URL with the parameter 'date' set to a string in the form of "yyyymmdd".
If the event is a multi-day event (i.e., it has an 'end' property that is not null), the div for the date should have this pattern instead:
```
<div class="item_date multiday">
  <a href="calendar-v30.php?date=yyyymmdd">mm/dd/yyyy</a> -
  <a href="calendar-v30.php?date=yyyymmdd">mm/dd/yyyy</a>
</div>
```
In this pattern, the div that encompasses the date information has been additionally given the class name "multiday" and there are strings encompassed by links for both the start date and the end date separated by a dash.
Like the generated div's for the action items, the generated div elements for the event items should have either "odd" or "even" included as one of its class names and these should alternate.
The URLs associated with <a> elements representing links for viewing, editing, and flagging events are CGI URLs that require the numerical identifier associated with the event in place of "event_id" in the pattern above.
The source filename of the <img> element associated with the "flag_event" link should be set to "star-dim.png" or "star-bright.png" depending on whether the event has been flagged or not. Similarly, the 'alt' attribute of this element should be set to "Flagged" or "Unflagged" accordingly.

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

Hints

The template solution already includes code for generating <div> elements for each of the note items associated with the project. You may find it helpful to read through that code as a pattern for your code.

Extra Credit

Implement the following functionality for extra credit:

(1 extra point) Check to see if an event is in the past and if so, do not include it.
An event is in the past if it is not a multi-day event and the start date is before the current date or if it is a multi-day event and the end date is before the current date. You can get a JavaScript Date object that corresponds to the current Date by calling the Date constructor with no arguments as in:
```
var now = new Date();
```
(5 extra points) Generate content for each action with a due date to include in the events panel.
The action's due date should act as the generated event's start date. Overdue actions should have the class name "overdue" in addition to the class names "list_item" and either "odd" or "even". Overdue actions should also have the text "Overdue: " preceding the description text. In order to receive the extra credit, you do not have to have the action items with due dates sorted with the event items by start date, although that would be a nice touch.