<html> <head> <title>Vacation Travel</title> <style type="text/css"> <!-- body { font-family: 'Bitstream Vera Sans', 'Trebuchet MS', 'Verdana', 'Arial'; font-size: x-small; padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; background-color: white; color: black; } td, th, p {font-size: smaller;} table#tasks { border-top: 1px solid black; border-left: 1px solid black; border-bottom: 1px solid black; } table#tasks tr td { border-right: 1px solid #999; border-bottom: 1px solid #999; padding: 2px 2px 2px 2px; font-size: x-small; } table#tasks tr th { border-right: 1px solid #999; border-bottom: 1px solid #999; padding: 2px 2px 2px 2px; font-size: x-small; background-color: #ccc; color: #000; text-align: left; } table#tasks tr.completed td { text-decoration: none; } table#tasks tr td.flag { text-decoration: none; } table#tasks tr.milestone td { color: green; } table#tasks tr.critical td { color: brown; } table#tasks tr.summary td { font-weight: bold; } div.notes { border: 1px solid rgb(255, 153, 0); margin: 1px 0px 1px 0px; padding: 0pt; text-decoration: none; font-size: smaller; background-color: rgb(255, 255, 230); } em.behind { background-color: red; color: white; padding: 1px 1px 1px 1px; margin: 0px 1px 0px 0px; border: 1px solid black; font-size: xx-small; font-style: normal; font-weight: normal; } em.ahead { background-color: yellow; color: green; padding: 1px 1px 1px 1px; margin: 0px 1px 0px 0px; border: 1px solid black; font-size: xx-small; font-style: normal; font-weight: normal; } em.ongoing { background-color: #3c9; color: black; padding: 1px 1px 1px 1px; margin: 0px 1px 0px 0px; border: 1px solid black; font-size: xx-small; font-style: normal; font-weight: normal; } em.done { background-color: transparent; color: green; padding: 1px 1px 1px 1px; margin: 0px 1px 0px 0px; font-size: xx-small; font-style: normal; font-weight: bold; } em.shouldhavestarted { background-color: orange; color: white; padding: 1px 1px 1px 1px; margin: 0px 1px 0px 0px; border: 1px solid black; font-size: xx-small; font-style: normal; font-weight: normal; } em.duesoon { background-color: #f90; color: brown; padding: 1px 1px 1px 1px; margin: 0px 1px 0px 0px; border: 1px solid black; font-size: xx-small; font-style: normal; font-weight: normal; } h3 { border-bottom: 1px solid #39c; border-left: 10px solid #39c; padding-left: 10px; } h5 {margin: 0px 0px 0px 0px;} ul { list-style-type: none; padding: 0px 0px 0px 2px; margin: 0px 0px 0px 0px; } #filtertasks { background-color: transparent; text-align: right; padding: 1px 1px 1px 1px; margin: 0px 1px 2px 0px; font-size: xx-small; font-style: normal; font-weight: normal; } a.treecontrol { padding: 1px 0px 1px 1px; font-weight: bold; text-decoration: none; margin: 2px 2px 2px 2px; font-size: 8pt; width: 10px; line-height: 10px; text-align: center; color: inherit; } td#milestones_missed { border: 2px solid red; margin: 2px; padding: 2px; background-color: rgb(255, 204, 204); font-size: 80%; } td#milestones_met { border: 2px solid green; margin: 2px; padding: 2px; background-color: rgb(153, 255, 153); font-size: 80%; } td#milestones_planned { border: 2px solid rgb(153, 51, 0); margin: 2px; padding: 2px; background-color: rgb(255, 204, 102); font-size: 80%; } //--> </style> <script language="javascript" type="text/javascript"> <!-- function getElem(elemID) { var elem = document.all ? document.all[elemID] : document.getElementById(elemID); return elem; } function setBackground(row, color) { var cells = row.getElementsByTagName("td"); cells[0].style.background = color; cells[1].style.background = color; cells[2].style.background = color; cells[3].style.background = color; cells[4].style.background = color; cells[5].style.background = color; cells[6].style.background = color; cells[7].style.background = color; cells[8].style.background = color; } function applyFilter(filter, mode) { var tasks = getElem("tasks").getElementsByTagName("tr"); for (i=1; i<tasks.length; i++) { setBackground(tasks[i], "#fff"); tasks[i].style.display = ''; var resources = ((tasks[i].getElementsByTagName("td"))[8]).innerHTML; if (filter=="unassigned") { if (resources == "&nbsp;") {if(mode==0) setBackground(tasks[i], "#9cf"); } else {if(mode==1) tasks[i].style.display='none';} } else if (filter != "") { if (resources.indexOf(filter)>=0) {if (mode==0) setBackground(tasks[i], "#9cf"); } else {if(mode==1) tasks[i].style.display='none';} } } } function treeToggle(link, rownum) { var tasks = getElem("tasks").getElementsByTagName("tr"); var level = parseInt(tasks[rownum].getElementsByTagName("td")[1].innerHTML); var mode = (link.innerHTML=="+")?1:0; for (i=rownum+1; i<tasks.length; i++) { if(mode==0) { if ( level >= parseInt(tasks[i].getElementsByTagName("td")[1].innerHTML)) break; tasks[i].style.display = 'none'; } else { tasks[i].style.display = ''; if ( level == parseInt(tasks[i].getElementsByTagName("td")[1].innerHTML)) break; } } link.innerHTML = (mode==1)?"-":"+"; } //--> </script> </head> <body> <div style="border: 2px solid #39c; margin: 2px 2px 10px 2px; padding: 10px; font-size: 110%;"> <h2 style="float:left; width: 50%;">Vacation Travel</h2> <strong>Author</strong> <em>Vattekkat Satheesh Babu</em><br/> <strong>Timeline</strong> <em>Tue, May 17 2005 - Mon, May 30 2005</em><br/> <strong>83% completed</strong> on <em>Sat May 28 10:17:00 UTC+0530 2005</em><br/> </div> <table border="0" cellspacing="2" cellpadding="0" width="100%"><tr> <td id="milestones_missed" align="left" valign="top" width="33%"><h5>Missed</h5><ul><li><a href="#task_19">Visit doctor</a> <em>Was due on Tue, May 24 2005 by Wife</em></li> <li><a href="#task_20">Watch "Revenge of the Sith"</a> <em>Was due on Mon, May 23 2005 by Husband</em></li> </ul> </div> </td> <td id="milestones_planned" align="left" valign="top" width="33%"><h5>Planned</h5><ul><li><a href="#task_21">All visits done</a> <em>(Mon, May 30 2005)</em></li> </ul> </div> </td> <td id="milestones_met" align="left" valign="top" width="33%"><h5>Met</h5><ul><li><a href="#task_7">Car readied</a> <em>(Fri, May 20 2005)</em> <em class="ahead">ahead</em></li> <li><a href="#task_14">Prepared food</a> <em>(Fri, May 20 2005)</em> <em class="ahead">ahead</em></li> <li><a href="#task_15">All set for travel</a> <em>(Fri, May 20 2005)</em> <em class="ahead">ahead</em></li> </ul> </div> </td> </tr></table> <div id="filtertasks"> Filter: <select name="filter" id="filter" onChange="applyFilter(getElem('filter').options[getElem('filter').selectedIndex].value, (getElem('f_hide_d').checked)?1:0 );return false;"> <option value="">None</option> <option value="unassigned">Unassigned</option> <option value="Husband">Husband</option> <option value="Wife">Wife</option> </select> <input type="radio" id="f_hide_d" name="f_hide" value="1" onFocus="applyFilter(getElem('filter').options[getElem('filter').selectedIndex].value, (getElem('f_hide_d').checked)?1:0 );return false;"/><label for="f_hide_d">Hide Unfiltered</label> <input type="radio" id="f_hide_h" name="f_hide" value="0" checked onFocus="applyFilter(getElem('filter').options[getElem('filter').selectedIndex].value, (getElem('f_hide_d').checked)?1:0 );return false;"/><label for="f_hide_h">Hilight Filtered</label> </div> <table id="tasks" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr class="taskrow"> <th>ID</th> <th style="display:none;">Level</th> <th>Status</th> <th>Task</th> <th>%</th> <th>Start</th> <th>Finish</th> <th>Deps</th> <th style="border-right:1px solid black;">Who? </th> </tr> <tr class="taskrow summary completed "> <td class="flag"><a name="task_1"></a>1</td> <td style="display:none;">1</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:10px;"> <a href="#" class="treecontrol" onClick="treeToggle(this,1);return true;">-</a> Plan travel </td> <td>100%</td> <td>Tue, May 17 2005</td> <td>Fri, May 20 2005</td> <td class="flag" style="font-size: xx-small;">&nbsp;</td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">&nbsp;</td> </tr> <tr class="taskrow summary completed "> <td class="flag"><a name="task_2"></a>2</td> <td style="display:none;">2</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:28px;"> <a href="#" class="treecontrol" onClick="treeToggle(this,2);return true;">-</a> Prepare Car </td> <td>100%</td> <td>Tue, May 17 2005</td> <td>Fri, May 20 2005</td> <td class="flag" style="font-size: xx-small;">&nbsp;</td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">&nbsp;</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_3"></a>3</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Fix appointment with service shop </td> <td>100%</td> <td>Tue, May 17 2005</td> <td>Wed, May 18 2005</td> <td class="flag" style="font-size: xx-small;">&nbsp;</td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Husband</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_4"></a>4</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Get car serviced </td> <td>100%</td> <td>Wed, May 18 2005</td> <td>Fri, May 20 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_3">3</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Husband</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_5"></a>5</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Fill up fuel </td> <td>100%</td> <td>Fri, May 20 2005</td> <td>Fri, May 20 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_4">4</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Husband</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_6"></a>6</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Load car with spare bulb, water bottle etc. <div class="notes">Bosch halogen spare bulb One bottle of mineral water One bottle of distilled water</div> </td> <td>100%</td> <td>Fri, May 20 2005</td> <td>Fri, May 20 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_5">5</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Husband</td> </tr> <tr class="taskrow milestone completed "> <td class="flag"><a name="task_7"></a>7</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Car readied </td> <td>100%</td> <td>Fri, May 20 2005</td> <td>Fri, May 20 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_6">6</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Husband</td> </tr> <tr class="taskrow summary completed "> <td class="flag"><a name="task_8"></a>8</td> <td style="display:none;">2</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:28px;"> <a href="#" class="treecontrol" onClick="treeToggle(this,8);return true;">-</a> Prepare food </td> <td>100%</td> <td>Tue, May 17 2005</td> <td>Fri, May 20 2005</td> <td class="flag" style="font-size: xx-small;">&nbsp;</td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">&nbsp;</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_9"></a>9</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Make menu </td> <td>100%</td> <td>Tue, May 17 2005</td> <td>Tue, May 17 2005</td> <td class="flag" style="font-size: xx-small;">&nbsp;</td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Wife</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_10"></a>10</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Review menu </td> <td>100%</td> <td>Wed, May 18 2005</td> <td>Wed, May 18 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_9">9</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Husband</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_11"></a>11</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Cook </td> <td>100%</td> <td>Wed, May 18 2005</td> <td>Thu, May 19 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_10">10</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Wife</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_12"></a>12</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Pack food </td> <td>100%</td> <td>Thu, May 19 2005</td> <td>Thu, May 19 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_11">11</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Wife</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_13"></a>13</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Load food in the car </td> <td>100%</td> <td>Fri, May 20 2005</td> <td>Fri, May 20 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_12">12</a>, <a href="#task_7">7</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Wife</td> </tr> <tr class="taskrow milestone completed "> <td class="flag"><a name="task_14"></a>14</td> <td style="display:none;">3</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:38px;"> Prepared food </td> <td>100%</td> <td>Fri, May 20 2005</td> <td>Fri, May 20 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_13">13</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Wife</td> </tr> <tr class="taskrow milestone completed "> <td class="flag"><a name="task_15"></a>15</td> <td style="display:none;">2</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:28px;"> All set for travel </td> <td>100%</td> <td>Fri, May 20 2005</td> <td>Fri, May 20 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_7">7</a>, <a href="#task_14">14</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Husband</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_16"></a>16</td> <td style="display:none;">1</td> <td class="flag"><em class="done">&#8730;</em><em class="behind">late</em>&nbsp;</td> <td style="padding-left:10px;"> Drive </td> <td>100%</td> <td>Sat, May 21 2005</td> <td>Sun, May 22 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_15">15</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Husband</td> </tr> <tr class="taskrow critical summary "> <td class="flag"><a name="task_17"></a>17</td> <td style="display:none;">1</td> <td class="flag">&nbsp;</td> <td style="padding-left:10px;"> <a href="#" class="treecontrol" onClick="treeToggle(this,17);return true;">-</a> Visits </td> <td>44%</td> <td>Mon, May 23 2005</td> <td>Mon, May 30 2005</td> <td class="flag" style="font-size: xx-small;">&nbsp;</td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">&nbsp;</td> </tr> <tr class="taskrow completed "> <td class="flag"><a name="task_18"></a>18</td> <td style="display:none;">2</td> <td class="flag"><em class="done">&#8730;</em>&nbsp;</td> <td style="padding-left:28px;"> Visit amusement park </td> <td>100%</td> <td>Fri, May 27 2005</td> <td>Mon, May 30 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_16">16</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Husband, Wife</td> </tr> <tr class="taskrow milestone "> <td class="flag"><a name="task_19"></a>19</td> <td style="display:none;">2</td> <td class="flag"><em class="duesoon">hot</em><em class="behind">behind</em><em class="ongoing">&lsaquo;on&rsaquo;</em>&nbsp;</td> <td style="padding-left:28px;"> Visit doctor </td> <td>36%</td> <td>Mon, May 23 2005</td> <td>Tue, May 24 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_16">16</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Wife</td> </tr> <tr class="taskrow milestone "> <td class="flag"><a name="task_20"></a>20</td> <td style="display:none;">2</td> <td class="flag"><em class="duesoon">hot</em><em class="behind">behind</em><em class="shouldhavestarted">start!</em>&nbsp;</td> <td style="padding-left:28px;"> Watch "Revenge of the Sith" </td> <td>0%</td> <td>Mon, May 23 2005</td> <td>Mon, May 23 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_16">16</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">Husband</td> </tr> <tr class="taskrow milestone critical "> <td class="flag"><a name="task_21"></a>21</td> <td style="display:none;">2</td> <td class="flag">&nbsp;</td> <td style="padding-left:28px;"> All visits done </td> <td>0%</td> <td>Mon, May 30 2005</td> <td>Mon, May 30 2005</td> <td class="flag" style="font-size: xx-small;"><a href="#task_18">18</a>, <a href="#task_19">19</a>, <a href="#task_20">20</a></td> <td class="flag" style="border-right:1px solid black;font-size: xx-small;">&nbsp;</td> </tr> </table> <p style="font-size:xx-small; border-top: 1px solid black;">Generated on: <em>Sat May 28 13:53:22 UTC+0530 2005</em></p> </body></html>