habitica/views/app/index.html

<Title:>
  HabitRPG

<Header:>
  <ui:connectionAlert>
  
<taskList: nonvoid>
  <div class="{{{type}}}s">
    <h1>{{{title}}}</h1>
    <div class=dragbox></div>
    <div class=content>
      <ul>
        {{{content}}}
      </ul>
    </div>
  </div>
  
<task:>
  <li data-id={{:task.id}} class="task {taskClasses(:task.type, :task.completed, :task.score)}">
    <div class="task-meta">
      <!-- TODO make this a popover -->    
      <a x-bind=click:toggleEdit data-selector="{{:task.id}}-edit" class="edit-link">Edit</a>
      
      <!--<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 class="vote-down buy-link" href="#">{:task.price}<img src="img/coin_single_gold.png"/></a>
      <!-- Daily & Todos -->
      {else}  
        <!--TODO this was part of input below <%= done ? "class='vote-down' checked='checked'" : "class='vote-up'" %>-->
        <input type="checkbox" checked={:task.completed} />
      {/}
    </div>
    <div class="task-text" x-bind=keydown:shortcuts contenteditable>{unescaped :task.text}</div>

    <app:editPopover />
  </li>
  
<editPopover:>
  <div style="display:none;" id={{:task.id}}-edit>
    <label>Text<input type=text value={:task.text} /></label>
    <label>Notes<input type=textarea rows=5 value={:task.notes} /></label>
    {#if equal(:task.type, 'habit')}
      <label><input type=checkbox checked={:task.up}><i></i>Up</label>
      <label><input type=checkbox checked={:task.down}><i></i>Down</label>
    {/}
    {#if equal(:task.type, 'reward')}
      <label>Price<input type=text value={:task.price} /></label>
    {/}
    <a x-bind=click:toggleEdit data-selector="{{:task.id}}-edit" class="btn">Save</a>
    <a x-bind=click:del class="btn btn-danger">Delete</a>
  </div>
  
<newTask: nonvoid>
  <form data-task-type={{{type}}} x-bind=submit:addTask>
    {{{content}}}
    <input class="btn" type=submit value=Add>
  </form>

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

            <div class="progress progress-warning">
              <div class="bar" style="width: {percent(_user.exp,_tnl)}%;">
                <span id="tnl">Exp: {round(_user.exp)} / {_tnl}</span>
              </div>
            </div>
              
            </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>
  <br/>
  
  <div class="container-fluid">
    <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 -->  
      
      <div class="span2">
        <app:taskList title=Habits type=habit>
          {#each _habitList as :task}<app:task />{/}
        </app:taskList>
        <app:newTask type=habit><input class=new value={_newHabit}></app:newTask>
      </div>
      
      <div class="span2">
        <app:taskList title=Dailies type=daily>
          {#each _dailyList as :task}<app:task />{/}
        </app:taskList>
        <app:newTask type=daily><input class=new value={_newDaily}></app:newTask>
      </div>

      <div class="span2">
        <app:taskList title=Todos type=todo>
          {#each _todoList as :task}<app:task />{/}
        </app:taskList>
        <app:newTask type=todo><input class=new value={_newTodo}></app:newTask>
      </div>

      <div class="span2">
        {gold(_user.money)} <img src='/img/coin_single_gold.png'/>  {silver(_user.money)} <img src='/img/coin_single_silver.png'/>
        <app:taskList title=Rewards type=reward>
          {#each _rewardList as :task}<app:task />{/}
        </app:taskList>
        <app:newTask type=reward><input class=new value={_newReward}></app:newTask>
      </div>
      
      
    </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 %>-->
  
<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=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
  <script src=https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js></script>
  <script src=http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js></script>