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)}">
    <table width=100%>
      <tr>
        <td class=handle width=0></td>
        <td width=100%>
          <div class=todo>
            <label>
              {#if equal(.type, 'habit')}+ -<i></i>{/}
              {#if equal(.type, 'daily')}<input type=checkbox checked={.completed}><i></i>{/}
              {#if equal(.type, 'todo')}<input type=checkbox checked={.completed}><i></i>{/}
              {#if equal(.type, 'reward')}${.price}{/}
            <i></i>  
            </label>
            <div x-bind=keydown:shortcuts contenteditable>{unescaped .text}</div>
          </div>
        </td>
        <td width=0><button class=delete x-bind=click:del>Delete</button></td>
      </tr>
    </table>
  </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>