habitica/views/app/index.html

<Title:>
  Todos

<Header:>
  <app:alert>
  
<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={{id}} class="{taskClasses(.type, .completed)}">
    <label>
      <!-- Habits -->
      {#if equal(.type, 'habit')}
        {#if up}<a href="#" class="vote-up"><img src="img/add.png" /></a>{/}
        {#if down}<a href="#" class="vote-down"><img src="img/remove.png" /></a>{/}
      <!-- Rewards -->
      {else if equal(.type, 'reward')}
        <a class="vote-down buy-link" href="#">{.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={.completed} />
      {/}
    <i></i>  
    </label>
    <div x-bind=keydown:shortcuts contenteditable>{unescaped .text}</div>
    
    <!--<span class="habit-text"><%= name %></span>

    <% if (user_id != -1) { %>
    <div class='habit-meta'>
      <a class="edit-link" href="#/<%= id %>/edit">Edit</a>
      <% if (notes) { %>
        <img src='/assets/comment.png' class="comment" />
        <div class='qtip'><%= notes %></div>
      <% } %>
    </div>
    <% } %>-->
  </li>

<newTask: nonvoid>
  <form data-task-type={{{type}}} x-bind=submit:addTask>
    {{{content}}}
    <input type=submit value=Add>
  </form>

<Body:>
  <div id="container">
    
    <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"></div></b>
            </td>
            <td id="bars">
              <div id="hp-bar" style="width:400px;">
                <span id="hp"></span>
              </div>
              <div id="tnl-bar" style="width:400px;">
                <span id="tnl"></span>
              </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 id="content">
      <!--<% 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 %>-->
      
      <!-- 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:taskList title=Habits type=habit>
        {#each _habitList}<app:task />{/}
      </app:taskList>
      <app:newTask type=habit><input class=new value={_newHabit}></app:newTask>
  
      <app:taskList title=Dailies type=daily>
        {#each _dailyList}<app:task />{/}
      </app:taskList>
      <app:newTask type=daily><input class=new value={_newDaily}></app:newTask>
  
      <app:taskList title=Todos type=todo>
        {#each _todoList}<app:task />{/}
      </app:taskList>
      <app:newTask type=todo><input class=new value={_newTodo}></app:newTask>
  
      <app:taskList title=Rewards type=reward>
        {#each _rewardList}<app:task />{/}
      </app:taskList>
      <app:newTask type=reward><input class=new value={_newReward}></app:newTask>
        
      <!--<% end %>-->
        
    </div>
  </div>

    
  
  </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 Tyler Renelle</p>
  </div>
  
<alert:>
  <div id=alert>
    {#unless connected}
      <p>
        {#if canConnect}
          Offline {#if _showReconnect}&ndash; <a x-bind=click:connect>Reconnect</a>{/}
        {else}
          Unable to reconnect &ndash; <a x-bind=click:reload>Reload</a>
        {/}
      </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>