habitica/views/app/index.html

<Title:>
  HabitRPG

<Header:>
  <ui:connectionAlert>
  <div id="head">
    <!--<% if current_user %>-->
      <table id="character">
        <tr>
          <td id="avatar">
            <img src="/img/avatar/{_user.lvl}.png" /><br/>
            <div id="lvl"><span class="badge badge-info">Lvl: {_user.lvl}</span></div>
          </td>
          <td id="bars">
            <div class="progress progress-danger">
              <span class="progress-text">HP: {round(_user.hp)} / 50</span>
              <div class="bar" style="width: {percent(_user.hp,50)}%;"></div>
            </div>

            <div class="progress progress-warning">
              {#if _user.history.exp}
                <span class="progress-text">
                  <a x-bind=click:toggleChart data-chart-selector="exp-chart" data-history-path="_user.history.exp"><i class=icon-signal></i></a> Exp: {round(_user.exp)} / {_tnl}
                </span>
              {/}
              <div class="bar" style="width: {percent(_user.exp,_tnl)}%;"></div>
            </div>
              
          </td>

        </tr>
        
        <tr>
          <td colspan=2>
            <div id="exp-chart" style="display:none;"></div>
          </td>
        </tr>
      </table>
    <!--<% else %>
      <h1>HabitRPG</h1>
      <p>A habit tracker app which treats your goals like a Role Playing Game. <a href="https://github.com/lefnire/habitrpg#habitrpg">More Information</a></p>
    <% end %>-->
  </div>
  
<Body:>
  <br/>
  
  <div class="container-fluid">
    {#if _debug}
    <div class="alert">
      <i class="icon-warning-sign"></i> <b>Debug Buttons</b>
      <!-- TODO: Implement on cron: this is meant to be run automatically once every night. See goo.gl/icdTT -->
      &nbsp;<a x-bind=click:endOfDayTally class="btn">Tally</a>
      &nbsp;<a x-bind=click:loadDebugDefaults class="btn">Debuggin Defaults</a>
    </div>
    {/}
    <a x-bind=click:toggleDebug style="position:absolute;bottom:0;right:0;"><i class="icon-warning-sign"></i></a>
    
    <div class="row-fluid">
      <!-- would rather have one component: <app:taskList>, which handles taskList, task, and newTask.  However,
        can't pass references as paramters.  so <app:taskList newModel={_newHabit} list={_habitList}> doesn't work
        and have to pass those in via {{{content}}} instead -->  
      
      <app:taskColumn
        title="Habits"
        helpTitle="Habits: Constantly Track." 
        helpContent="Some habits only makes sense to gain points (1h of productive work). Others only lose points (swearing). For the rest, both + and - make sense (stairs=gain, elevator=lose).">
        <ul class='habits'>{#each _habitList as :task}<app:task />{/}</ul>
        <app:newTask type=habit><input value={_newHabit} type="text" /></app:newTask>
      </app:taskColumn>
      
      <app:taskColumn
        title="Daily" 
        helpTitle="Dailies: Complete Once Each Day" 
        helpContent="At the end of each day, non-completed Dailies dock you points. They also become more valueable (worth more experience). This wil push you to focus on the reds (the goals that are doing worse)">
        <ul class='dailys'>{#each _dailyList as :task}<app:task />{/}</ul>
        <app:newTask type=daily><input value={_newDaily} type="text" /></app:newTask>
      </app:taskColumn>

      <app:taskColumn 
        title="Todos" type="todo"
        helpTitle="Todos: Complete Eventually" 
        helpContent="Non-completed TODOs won't dock you points, but they will become more valuable over time.">
        <div class="tabbable"> <!-- Only required for left/right tabs -->
          <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Remaining</a></li>
            <li><a href="#tab2" data-toggle="tab">Complete</a></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active" id="tab1">
              <ul class='todos'>
                {#each _todoList as :task}<app:task />{/}
              </ul>
              <app:newTask type=todo><input value={_newTodo} type="text" /></app:newTask>
            </div>
            <div class="tab-pane" id="tab2">
              <ul class='completeds'>
                {#each _todoList as :task}<app:task />{/}
              </ul>
            </div>
          </div>
        </div>
        {#if _user.history.todos}
          <a x-bind=click:toggleChart data-chart-selector="todos-chart" data-history-path="_user.history.todos"><i class=icon-signal></i></a>
          <div id="todos-chart" style="display:none;"></div>
        {/}
      </app:taskColumn>

      <app:taskColumn 
        title="Rewards" type="reward"  
        helpTitle="Rewards: Treat Yourself!" 
        helpContent="As you complete goals, you earn gold to buy rewards. Buy them liberally - rewards are integral in forming good habits.">
        <div id="money">{gold(_user.money)} <img src='/img/coin_single_gold.png'/>  {silver(_user.money)} <img src='/img/coin_single_silver.png'/></div>
        <ul class='rewards'>{#each _rewardList as :task}<app:task />{/}</ul>
        <app:newTask type=reward><input value={_newReward} type="text" /></app:newTask>
      </app:taskColumn>
      
      
    </div>
  </div>
    
  <!--<% if !current_user %>
    <%= link_to(image_tag("http://line6.com/images/connections/facebook-login-button.png", :alt =>  "Login with Facebook"), user_omniauth_authorize_path(:facebook)) %>
  <% else %>-->
  <!--<% end %>-->
<taskColumn: nonvoid>
  <div class="span3 well {{{type}}}s">
    <span class="help-icon" rel="popover" data-placement="bottom" data-original-title="{{{helpTitle}}}" data-content="{{{helpContent}}}"><i class="icon-question-sign"></i></span>
    <h1>{{{title}}}</h1>
    {{{content}}}
  </div>
  
<newTask: nonvoid>
  <form class="form-inline" data-task-type={{{type}}} x-bind=submit:addTask>
    {{{content}}}
    <input class="btn" type=submit value=Add>
  </form>  
  
<task:>
  <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.value, _hideCompleted)}">
    <pre>
    <div class="task-meta-controls">
      <!-- TODO make this a popover -->    
      
      <div class="hover-show">
        <a x-bind=click:toggleTaskEdit><i class="icon-pencil"></i></a>
        {#if :task.history}
          <a x-bind=click:toggleChart data-chart-selector="{{:task.id}}-chart" data-hide-selector="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history">
            <i class="icon-signal"></i>
          </a>
        {/}
      </div>
      
      <!--<a class="edit-link" href="#/<%= id %>/edit">Edit</a>-->
      {#if :task.notes}
        <a href="#" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></a>
      {/}
    </div>
    
    <div class="task-controls">
      <!-- Habits -->
      {#if equal(:task.type, 'habit')}
        {#if :task.up}<a data-direction=up x-bind=click:vote><img src="img/add.png" /></a>{/}
        {#if :task.down}<a data-direction=down x-bind=click:vote><img src="img/remove.png" /></a>{/}
      <!-- Rewards -->
      {else if equal(:task.type, 'reward')}
        <a x-bind=click:vote class="buy-link" data-direction=down>{:task.value}<img src="img/coin_single_gold.png"/></a>
      <!-- Daily & Todos -->
      {else}  
        <input type="checkbox" checked={:task.completed} x-bind=click:vote data-direction={:task.completed}/>
      {/}
    </div>
    <div class="task-text" x-bind=keydown:shortcuts contenteditable>{unescaped :task.text}</div>

    <app:taskMeta />
    </pre>
  </li>
  
<taskMeta:>
  <div style="display:none;" id={{:task.id}}-edit>
    <hr/>
    <form x-bind=submit:toggleTaskEdit data-selector="{{:task.id}}-edit">
      <div class=control-group>
        <label>Text</label><input type=text value={:task.text} />
        <label>Notes</label><textarea rows=3>{:task.notes}</textarea>
      </div>
      {#if equal(:task.type, 'habit')}
        <div class="control-group">
          <label class="checkbox inline"><input type=checkbox checked={:task.up}>Up</label>
          <label class="checkbox inline"><input type=checkbox checked={:task.down}>Down</label>
        </div>
      {/}
      {#if equal(:task.type, 'reward')}
        <div class=control-group>
          <label>Price
            <div class="input-append">
              <input class="span2" size="16" type="text" value={:task.value}><span class="add-on">Gold</span>
            </div>
          </label>
        </div>
      {/}
      <button type=submit class="btn">Save</button>
      <button x-bind=click:del class="btn btn-danger">Delete</button>
    </form>
  </div>  
  
  <div style="display:none;" id={{:task.id}}-chart></div>
  
<Footer:>
  <a href="https://github.com/lefnire/habitrpg"><img style="z-index:11; position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub"></a>
  <!--<div id="footer">
    <%if current_user %>
      <p><a href="https://github.com/lefnire/habitrpg#habitrpg">Help</a> | <%= link_to "Logout", destroy_user_session_path, :method => :delete %></p>
    <% end %>
    <p>Copyright &copy; 2012-<%= Time.now.year %> Tyler Renelle</p>
  </div>-->
  
<Scripts:>
  <script src=/jquery.min.js></script>
  <script src=/jquery-ui.min.js></script>
  <script src=/bootstrap.min.js></script>
  <script src=/underscore-min.js></script>
  <script src=/jquery.cookie.js></script>
  <script src=/bootstrap-tour.js></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(function(){});
  </script>