habitica-self-host/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/>
            <b><div id="lvl">Lvl: {_user.lvl}</div></b>
          </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">
              <span class="progress-text">Exp: {round(_user.exp)} / {_tnl}</span>
              <div class="bar" style="width: {percent(_user.exp,_tnl)}%;"></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>
  
<Body:>
  <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">
        <h1>Habits</h1>
        <ul>{#each _habitList as :task}<app:task />{/}</ul>
        <app:newTask type=habit><input value={_newHabit} class="input-medium" type="text" /></app:newTask>
      </div>
      
      <div class="span2">
        <h1>Dailies</h1>
        <ul>{#each _dailyList as :task}<app:task />{/}</ul>
        <app:newTask type=daily><input value={_newDaily} class="input-medium" type="text" /></app:newTask>
      </div>

      <div class="span2">
        <h1>Todos</h1>
        <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>{#each _todoList as :task}<app:task />{/}</ul>
              <app:newTask type=todo><input value={_newTodo} class="input-medium" type="text" /></app:newTask>
            </div>
            <div class="tab-pane" id="tab2">
              TODO: Implement completed
            </div>
          </div>
        </div>
      </div>

      <div class="span2">
        <h1>Rewards</h1>
        {gold(_user.money)} <img src='/img/coin_single_gold.png'/>  {silver(_user.money)} <img src='/img/coin_single_silver.png'/>
        <ul>{#each _rewardList as :task}<app:task />{/}</ul>
        <app:newTask type=reward><input value={_newReward} class="input-medium" type="text" /></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 %>-->
  
<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)}">
    <div class="task-meta">
      <!-- TODO make this a popover -->    
      
      <a x-bind=click:toggleEdit data-selector="{{:task.id}}-edit" class="edit-link"><i class="icon-pencil"></i></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 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:editPopover />
  </li>
  
<editPopover:>
  <div style="display:none;" id={{:task.id}}-edit>
    <hr/>
    <label>Text<input type=text value={:task.text} /></label>
    <label>Notes<textarea rows=3>{:task.notes}</textarea></label>
    {#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')}
      <label>value<input type=text value={:task.value} /></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>  
  
<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>