<div id="goal-tracker"> <div class="control-bar"> <div id="goal_setting"> <div class="goal-setting-expand expand-button" style="float:left;"></div> <div class="goal-setting-text expand">About Goal Setting</div> <div id="goal-tracker-infographic" class="goal_setting_content hide"> <ul id="goal_tracker_infographics_nav_tabs"> <li class="active tab-control-for-creating_goals"> <a>Creating Goals</a> </li> <li class="tab-control-for-making_good_goals"> <a>Making Good Goals</a> </li> <li class="tab-control-for-keeping_goals_in_balance"> <a>Keeping Goals In Balance</a> </li> <li class="tab-control-for-rewarding_yourself"> <a>Rewarding Yourself</a> </li> </ul> <div id="creating_goals" style="display:none;"> <br class="clear_fix"/> <%=GoalTracker.Infographics.goalsInfographic%> </div> <div id="making_good_goals" style="display:none;"> <br class="clear_fix"/> <%=GoalTracker.Infographics.makingGoodGoals%> </div> <div id="keeping_goals_in_balance" style="display:none;"> <br class="clear_fix"/> <%=GoalTracker.Infographics.keepingGoalsInBalance%> </div> <div id="rewarding_yourself" style="display:none;"> <br class="clear_fix"/> <%=GoalTracker.Infographics.rewardYourself%> </div> </div> </div> <div class="clear_fix"></div> <div class="print-goals-container"> <%=GoalTracker.PrintHTML.printGoals%> </div> <div class="goals-filters"> <div class="filters"> <select class="filters-selectmenu" id="filters"> <%= view('/filter/list') %> </select> </div> <a id="undelete-link" class="undelete" style="display: none;" href="javascript: void(0);">Restore Goal "<span class="deleted-goal-description"></span>"</a> </div> <div class="clear_fix"></div> </div> <div id="goal-tracker-main"> <div id="goal-list-header"> <div class="complete header cell">Complete</div> <div class="description header cell"> <div class="sortable description-sort"> <span>Goal Description</span> <div class="sort-image"> </div> </div> </div> <div class="progress header cell"> <div class="sortable progress-sort"> <span>Progress</span> <div class="sort-image"> </div> </div> </div> <div class="target-date header cell"> <div class="sortable deadline-sort"> <span>Target Date</span> <div class="sort-image"> </div> </div> </div> <div class="category header cell"> <div class="sortable category-sort"> <span>Category</span> <div class="sort-image"> </div> </div> </div> <div class="reminder header cell"> <div class="sortable reminder-sort"> <span>Reminder</span> <div class="sort-image"> </div> </div> </div> <div class="smart header cell"> <div class="sortable smart-sort smart-header-icon"></div> </div> </div> <div id="goals"> <%= view('/goal/list', { goals: goals}) %> </div> <div class="goal-tracker-footer"> <a id="goal-add" class="goal-add"></a> </div> </div> </div> </div> <% for(var i = 0; i < goals.length; i++) { var goal = goals[i]; %> <div class="goal goal-id-<%= goal.id() %>"> <%= view('/goal/show', { goal: goal}) %> </div> <% } %> <% try { if(expanded) {} } catch(e) { var expanded = false; } %> <div class="goal-wrapper show <% if(expanded) { %>expanded <% } %> <% if(goal.isCompleted()) { %>completed<% } %>"> <div class="complete cell"> <div style="float:left" class="goal-complete-check <% if(goal.isCompleted()) { %>completed<% } %>"> </div> </div> <div class="description cell"> <span class="expand-button <% if(!expanded){ %>goal-expand <%} else { %> expanded goal-collapse <% }%>"> </span> <div class="description-text <% if(!expanded){ %>goal-expand <%} else { %> expanded goal-collapse <% }%>"><%= goal.shortDescription() %></div> <% if(expanded) { %> <br/><div class="full-description"><%= goal.description() %></div> <% } %> <div class="clear_fix"> </div> <div class="goal-links"> <%= view('/goal/links', {completed:goal.isCompleted() }) %> </div> </div> <div class="progress cell"> <div class="<%if(goal.tasks().length > 0){if(!expanded){%>goal-expand<%} else { %>goal-collapse<% }}%>"> <%= view('/goal/progressbar', { goal:goal, editMode: false}) %> </div> </div> <div class="target-date cell <% if(goal.isCompleted() == false && goal.isOverdue() ) { %>expired <% } %>"> <%= humanizeTimestamp(goal.deadline()) %> </div> <div class="category cell"><%= GoalTracker.Categories.get(goal.categoryId()) %>  </div> <div class="reminder cell"><%= goal.reminderType() %></div> <div class="goal-smart-view <% if(goal.isSmart()){%>goal-view-smart-img <%if(goal.isCompleted()){%>view-smart-completed<%}}%>"></div> <div class="clear_fix"></div> </div> <div class="clear_fix" ></div> <%= view('/goal/form', { goal: goal, type: 'save' }) %> <div class="goal add editing"> <%= view('/goal/form', { goal: goal, type: 'create' }) %> </div> <% var actionClass = type; %> <div class="goal-wrapper edit" id="goal-add-form"> <form> <div class="complete cell"> </div> <div class="cell"> <div class="text-input-container cell"> <input id="short-description-<%= goal.id() %>" name="short_description" class="short-description has-description-label <% if(goal.shortDescription().length == 0){ %>empty<% } %>" type="text" value="<%= goal.shortDescription() %>" maxlength="50" /> <label class="default-value-label" for="short-description-<%= goal.id() %>" <% if(goal.shortDescription().length != 0){ %> style="display:none;" <% } %>>Short Description</label> </div> <div class="date-error cell"></div> <br class="clear_fix" /> <div style="float:left;"> <div class="text-input-container cell"> <text name="description" id="description-<%= goal.id() %>" class="goal-textarea has-description-label <% if(goal.description().length == 0){ %>empty<% } %>"><%= goal.description() %></text> <label class="default-value-label" for="description-<%= goal.id() %>" <% if(goal.description().length != 0){ %> style="display:none;" <% } %>>Description</label> </div> <div class="progress cell goal-nonTextFields"> <%= view('/goal/progressbar', { goal:goal, editMode:true}) %> </div> <div style="height:40px;" class="cell goal-nonTextFields"> <div class="target-date cell"> <input id="goal-deadline-<%= goal.id() %>" name="deadline" class="deadline no-animation disable-drag date-text" type="text" value="<%= humanizeTimestamp(goal.deadline()) %>" /> </div> <div class="category cell edit"> <%= view('/select/category', { category: goal.categoryId() }) %> </div> <div class="reminder cell edit"> <%= view('/select/reminder', { reminder_type: goal.reminderType() }) %> </div> <span style="height:40px;"> <span class="goal-smart-explanation goal-smart-mouse">SMART GOAL?</span> <span class="goal-smart goal-smart-edit goal-smart-mouse goal-edit-smart-img <%if(goal.isSmart()){%>edit-smart-checked<%}%>" > </span> <span class="goal-smart-box hidden"></span> </span> </div> </div> </div> <div class="clear_fix"></div> </form> <div class="model-errors" style="display: none;"></div> <div class="edit-goal-buttons"> <div class="goal-save-button goal-<%=actionClass%>"></div> <div class="goal-cancel-button goal-<%=actionClass%>-cancel"></div> <br class="clear_fix" /> </div> </div> <div>You must correct the following errors:</div> <ul> <% errors.each(function(attrName, attrError) { %> <li><%= attrError %></li> <% }); %> </ul> <span class="target-date-error">Target date (<%=targetDate%>) is in the past</span> <%= view('/goal/show', { goal: goal, expanded: true}) %> <div class="tasks-container"> <div class="tasks"> <%= view('/task/list', { tasks: goal.tasks() }) %> </div> <div class="tasks-summary-bar" <% if(goal.tasks().length == 0) { %>style="display: none;"<% } %>> <div class="summary-bar-controls"> <% if(!goal.attr("is_read_only")) { %> <a href="javascript: void(0);" class="complete-all">Complete All</a> <% } %> <%=GoalTracker.PrintHTML.printTasks%> </div> </div> <div class="tasks-buttons"> <% if(!goal.attr("is_read_only")) { %> <a class="task-show-add-form button" href="javascript:void(0);"><span class="task-show-add-form">Add Task</span></a> <% } %> <a class="goal-collapse button grey" href="javascript:void(0);"><span class="">Hide Tasks</span></a> </div> </div> <% for(var i = 0; i < tasks.length; i++) { %> <div class="task task-id-<%= tasks[i].id() %>"> <%= view('/task/show', { task: tasks[i] }) %> </div> <% } %> <div class="task-wrapper <% if(task.isCompleted()) { %> completed <% } %>"> <div class="complete cell"> <div style="float:left" class="task-complete-check <% if(task.isCompleted()) { %>completed<% } %>"></div> </div> <div class="description cell"> <%= task.description() %> <div class="task-links"> <a href="javascript: void(0)" class="task-edit task-link"> <span class="task-link <% if(task.isCompleted()) { %>completed<% } %>">Edit</span> </a> <span class="task-links">|</span> <a href="javascript: void(0)" class="task-delete task-link"> <span class="task-link task-delete-button task-delete <% if(task.isCompleted()) { %>completed<% } %>"></span> <span class="task-link <% if(task.isCompleted()) { %>completed<% } %>">Delete</span> </a> </div> </div> <div class="target-date cell <% if( task.isOverdue() ) { %>expired<% } %>"> <%= humanizeTimestamp(task.deadline()) %> </div> </div> <div class="progress-bar-container <%if(editMode){%>disabled<%}%>"> <%if(!editMode){%> <div class="progress-bar-progress" style="position:relative;z-index:1;width: <%= parseInt(goal.progress() * 80) %>px;"></div> <%}%> <div class="taskCount <%if(goal.isCompleted()){%>completed<%}%> <%if(editMode){%>disabled<%}%>"> <% if(goal.tasks().length > 0){%> <%= goal.getCompletedTasks().length+" of "+goal.tasks().length %> <%}else{%> <%="Add Task"%> <%}%> </div> </div> <div class="task add form"> <%= view('/task/edit/form', { task: task, actionClass: 'add' }) %> </div> <div class="edit form"> <%= view('/task/edit/form', { task: task, actionClass: 'save' }) %> </div> <form> <div class="complete cell"></div> <div class="description cell"> <div class="text-input-container"> <text name="description" id="description-<%= task.id() %>" class="edit has-description-label <% if(task.description().length == 0){ %>empty<% } %>"><%= task.description() %></text> <label class="default-value-label" for="description-<%= task.id() %>" <% if(task.description().length != 0){ %> style="display:none;" <% } %>>Task Description</label> </div> </div> <div class="target-date cell"> <span> <input id="task-deadline-<%= task.id() %>" name="deadline" class="deadline" type="text" value="<%= humanizeTimestamp(task.deadline()) %>" /> </span> </div> <div class="date-error cell"></div> <div class="clear_fix"></div> </form> <div class="model-errors" style="display: none;"></div> <div class="buttons"> <button class="task-<%= actionClass %> button"> <span>Save</span> </button> <button class="task-<%= actionClass %>-cancel button grey"> <span>Cancel</span> </button> </div> <% try { if(reminder_type) {} } catch(e) { reminder_type = 'Reminder'; } %> <div style="position:relative;"> <%if(GoalTracker.GoalTracker.reminderTooltip != ""){%> <span class="tooltip" style="display:none;"><%=GoalTracker.GoalTracker.reminderTooltip%></span> <%}%> <select name="reminder_type" class="reminder_type reminder-selectmenu goal-reminder-tooltip"> <option value="Reminder" >Reminder</option> <% for(var i = 0; i < REMINDER_TYPES.length; i++) { %> <option value="<%= REMINDER_TYPES[i] %>" <% if(REMINDER_TYPES[i] == reminder_type) { %> SELECTED <% } %>> <%= REMINDER_TYPES[i] %> </option> <% } %> </select> </div> <select name="goal_category_id" class="category category-selectmenu"> <option value="Category" >Category</option> <% var categories = []; GoalTracker.Categories.each(function(kvp){ categories.push(kvp); }); categories.sort(function(kvp1, kvp2){ return kvp1.value > kvp2.value ? 1 : -1; }); %> <% for(var i = 0; i < categories.length; i++) { %> <option value="<%= categories[i].key %>" <% if(category == categories[i].key ) { %> SELECTED <% } %>> <%= categories[i].value %> </option> <% } %> </select> <option name="all" value="all"> All Goals </option> <option name="completed" value="completed"> Goals Completed </option> <option name="in-progress" value="in-progress"> Goals in Progress </option> <option name="goals-with-tasks" value="goals-with-tasks"> Goals with Tasks </option> <option name="overdue" value="overdue"> Goals Overdue </option> <div id="modal-window"> <%= view(modalView, modalViewParams) %> </div> <a href="javascript: void(0)" class="goal-edit goal-link"> <span class="goal-link <% if(completed) { %>completed<% } %>">Edit</span> </a> <span class="goal-links goal-link-divider"></span> <a href="javascript: void(0)" class="goal-delete goal-link"> <span class="goal-link goal-delete-button goal-delete <% if(completed) { %>completed<% } %>"></span> <span class="goal-link <% if(completed) { %>completed<% } %>">Delete</span> </a> <%if(GoalTracker.enableSocialMedia){%> <span class="goal-links goal-link-divider"></span> <a href="javascript: void(0)" class="goal-facebook goal-link"> <span class="goal-link goal-facebook-button goal-facebook <% if(completed) { %>completed<% } %>"></span> </a> <span class="goal-links goal-link-divider"></span> <a href="javascript: void(0)" class="goal-twitter goal-link"> <span class="goal-link goal-twitter-button goal-twitter <% if(completed) { %>completed<% } %>"></span> </a> <%}%> <div class="modal-header"> Now you're getting it! </div> <div class="modal-text"> Keep building your list of goals and tasks. But don't lose anything (if you leave now you will). Enter your name and email at this point, and we'll send you all your goals, dreams, and mission statement information, plus more ideas*. </div> <div class="visitor-info-form"> <div class="input"> <input id="visitor-name" class="visitor-name has-description-label empty" /> <label value="First Name" for="visitor-name">First Name</label> </div> <div class="input"> <input id="visitor-email" class="visitor-email has-description-label empty" /> <label value="Email" for="visitor-email">Email</label> </div> <%if(GoalTracker.GoalTracker.visitorEmailSignupHTML != ""){%> <div>I'd also like to receive:</div> <div id="replaceMe"></div> <%}%> <div class="clear_fix"></div> <a href="javascript:void(0)" class="button" id="save-visitor-info"> <span>Continue</span> </a> <div class="visitor-info-form-footer"></div> </div> <div class="form-error-message"> </div> <div> <div class="modal-text fine-print"> *Information about retrieving your goals will also be sent via email </div>