habitica/views/app/index.html

<Title:>
  Todos

<Header:>
  <app:alert>
  
<dragList: nonvoid>
  <h1>{{{title}}}</h1>
  <div id=dragbox-{{{type}}}></div>
  <div id=content-{{{type}}}><ul id={{{type}}}s>{{{content}}}</ul></div>
  <form x-bind=submit:{{{addFunc}}}>
    <input id=new-{{{type}}} value={{{newVal}}}>
    <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>
  
  <app:dragList title="Habits" type="habit" addFunc=addHabit newVal={_newHabit}>
  {#each _habitList}
    <li data-id={{id}} class="habit">
      <table width=100%>
        <tr>
          <td class=handle width=0></td>
          <td width=100%>
            <div class=todo>
              <label>+ -<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>
  {/}
  </app:dragList>
  
  <app:dragList title="Dailies" type="daily" addFunc=addDaily newVal={_newDaily}>
  {#each _dailyList}
    <li data-id={{id}} class="{#if .completed}completed{/}">
      <table width=100%>
        <tr>
          <td class=handle width=0></td>
          <td width=100%>
            <div class=todo>
              <label><input type=checkbox checked={.completed}><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>
  {/}
  </app:dragList>

  <app:dragList title="Todos" type="todo" addFunc=addTodo newVal={_newTodo}>
  {#each _todoList}
    <li data-id={{id}} class="{#if .completed}completed{/}">
      <table width=100%>
        <tr>
          <td class=handle width=0></td>
          <td width=100%>
            <div class=todo>
              <label><input type=checkbox checked={.completed}><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>
  {/}
  </app:dragList>
  
  <app:dragList title="Rewards" type="todo" addFunc=addReward newVal={_newReward}>
  {#each _rewardList}
    <li data-id={{id}} class="reward">
      <table width=100%>
        <tr>
          <td class=handle width=0></td>
          <td width=100%>
            <div class=todo>
              <label>${.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>
  {/}
  </app:dragList>

<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>