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=overlay></div>
  <div id=head>
    Money: {_user.money}<br/>
    Exp: {_user.exp}<br/>
    Lvl: {_user.lvl}<br/>
  </div>
  
  <div id=content>
    
    <!-- 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>
  
  </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>