habitica/views/app/tasks.html

<modals:>
    <app:modals:modal modalId='streak-achievement-modal' header="Achievement!">
        <p>
        <div class='achievement achievement-thermometer'></div>You have stacked your "Streaker" Achievement! Every 21 days of streak, you gain 1 achievement point here.
        </p>
        <@footer>
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </@footer>
    </app:modals:modal>

<task-lists:>
    <!--helpTitle & helpContent moved to tour -->

    <!-- Habits Column -->
    <div class="module">
        <div class="task-column habits">
            <app:tasks:task-list
                    header="habits"
                    type="habit"
                    inputValue={_newHabit}
                    placeHolder="New Habit"
                    list={@habits}
                    main={{@main}}
                    editable={{@editable}}
                    >
                <@ads><a href="http://www.amazon.com/gp/product/1400069289/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1400069289&linkCode=as2&tag=ha0d2-20">The Power of Habit: Why We Do What We Do in Life and Business</a><img src="//www.assoc-amazon.com/e/ir?t=ha0d2-20&l=as2&o=1&a=1400069289" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></@ads>
            </app:tasks:task-list>
        </div>
    </div>

    <!-- Dailys Column -->
    <div class="module">
        <div class="task-column dailys">
            <app:tasks:task-list
                    header="dailies"
                    type="daily"
                    inputValue={_newDaily}
                    placeHolder="New Daily"
                    list={@dailys}
                    main={{@main}}
                    editable={{@editable}}
                    >
                <@ads><a href="http://www.amazon.com/gp/product/0142000280/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0142000280&linkCode=as2&tag=ha0d2-20">Getting Things Done: The Art of Stress-Free Productivity</a><img src="//www.assoc-amazon.com/e/ir?t=ha0d2-20&l=as2&o=1&a=0142000280" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></@ads>
            </app:tasks:task-list>
        </div>
    </div>

    <!-- Todos Column -->
    <div class="module">
        <div class="task-column todos tabbable tabs-below">

            {{#if @main}}
            <!-- todo export/graph options -->
            <span class='option-box pull-right'>
                {#if _user.history.todos}
                  <a class="option-action" x-bind=click:toggleChart data-toggle-id="todos-chart" data-history-path="_user.history.todos" rel=tooltip title="Progress"><i class=icon-signal></i></a>
                {/}
                <a class="option-action" href="/v1/users/{{_user.id}}/calendar.ics?apiToken={{_user.apiToken}}" rel=tooltip title="iCal"><i class=icon-calendar></i></a>
                <!-- <a href="https://www.google.com/calendar/render?cid={{encodeiCalLink(_user.id, _user.apiToken)}}" rel=tooltip title="Google Calendar"><i class=icon-calendar></i></a> -->
            </span>
            {{/}}


            <app:tasks:task-list
                    header="todos"
                    type="todo"
                    inputValue="{_newTodo}"
                    placeHolder="New Todo"
                    list={@todos}
                    main={{@main}}
                    editable={{@editable}}
                    >
                <@ads><a href="http://www.amazon.com/gp/product/0312430000/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0312430000&linkCode=as2&tag=ha0d2-20">The Checklist Manifesto: How to Get Things Right</a><img src="//www.assoc-amazon.com/e/ir?t=ha0d2-20&l=as2&o=1&a=0312430000" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></@ads>
            </app:tasks:task-list>

            <button class='task-action-btn tile spacious bright {#unless _showCompleted}hidden{/}' x-bind=click:clearCompleted>Clear Completed</button>

            <!-- remaining/completed tabs -->
            <ul class="nav nav-tabs">
                <li class="{#unless _showCompleted}active{/}"><a x-bind="click:todosShowRemaining">Remaining</a></li>
                <li class="{#if _showCompleted}active{/}"><a x-bind="click:todosShowCompleted">Complete</a></li>
            </ul>
        </div>
    </div>

    <!-- Rewards Column -->
    <div class="module rewards-module">
        <div class="task-column rewards">

            {{#if @main}}
            <!-- cash or gems -->
            <span class='option-box pull-right wallet'>
                <div class="money">
                    {gold(floor(_user.stats.gp))}
                    <span class='shop_gold' rel='tooltip' title='Gold'></span>
                </div>
                <div class="money">
                    {silver(_user.stats.gp)}
                    <span class='shop_silver' rel='tooltip' title='Silver'></span>
                </div>
            </span>
            {{/}}

            <app:tasks:task-list
                    header="rewards"
                    type="reward"
                    inputValue="{_newReward}"
                    placeHolder="New Reward"
                    list={@rewards}
                    main={{@main}}
                    editable={{@editable}}
                    >
                <@extra>
                {{#if @main}}
                    <!-- Static Rewards -->
                    <ul class='items {#unless _user.flags.itemsEnabled}hidden{/}'>
                        <app:rewards:item item={_items.next.weapon} />
                        <app:rewards:item item={_items.next.armor} />
                        <app:rewards:item item={_items.next.head} />
                        <app:rewards:item item={_items.next.shield} />
                        <app:rewards:item item={{_items.potion}} />
                        <app:rewards:item item={{_items.reroll}} />
                    </ul>
                {{/}}
                </@extra>
                <@ads><a href="http://www.amazon.com/gp/product/1594484805/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1594484805&linkCode=as2&tag=ha0d2-20">Drive: The Surprising Truth About What Motivates Us</a><img src="//www.assoc-amazon.com/e/ir?t=ha0d2-20&l=as2&o=1&a=1594484805" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></@ads>
            </app:tasks:task-list>
        </div>
    </div>

<!-- Templates -->
<task-list: nonvoid>
    <h2 class="task-column_title">{{t(@header)}}</h2>

    {{#if equal(@type,'todo')}}<div id="todos-chart" class="hidden"></div>{{/}}

    {{#if @editable}}

        <!-- need {#with} so we can reference model.at() in the submit handler -->
        <!-- NOTE: static binding {{}} seems to be required, otherwise things get weird - e.at() is _habitList first time, _habitList.0 second time, etc -->
        {{#with @list}}
        <form class="addtask-form form-inline new-task-form {#if and(_showCompleted,equal(@type,'todo'))}hidden{/}" data-task-type="{{@type}}" x-bind="submit:addTask">
            <span class="addtask-field"><input value="{@inputValue}" type="text" placeholder="{{@placeHolder}}"/></span>
            <input class="addtask-btn" type="submit" value="＋">
        </form>
        {{/}}
    <hr>
    {{/}}
    <ul class="{{@type}}s {#unless @list}hidden{/}">
        {#each @list as :task}<app:tasks:task />{/}
    </ul>
    {{@extra}}
    <br/>
    <!-- ads -->
    {{#if and( _loggedIn, notEqual(_user.flags.ads,'hide'), @main )}}
        <span class='pull-right'>
            <a x-bind="click:showStripe" rel='tooltip' title='Remove Ads'><i class='icon-remove'></i></a><br/>
            <a href="#" data-target="#why-ads-modal" data-toggle="modal" rel='tooltip' title='Why Ads?'><i class='icon-question-sign'></i></a>
        </span>

        {{@ads}}
    {{/}}

<!-- all the parts of a single task -->
<task:>
    <li data-id={{:task.id}} class="task {taskClasses(:task, _user.filters, _user.preferences.dayStart, _user.lastCron, _showCompleted)}">

        <!-- right-hand side control buttons -->
        <div class="task-meta-controls">
            <!-- Streak -->
            <span class='{#unless :task.streak}hide{/}'>
                {:task.streak}<span rel='tooltip' title='Streak Counter'><i class='icon-forward'></i></span>
            </span>
            <app:filters:applied-filters />
            <!-- edit -->
            <a x-bind=click:toggleTaskEdit data-hide-id="{{:task.id}}-chart" data-toggle-id="{{:task.id}}-edit" rel=tooltip title="Edit"><i class="icon-pencil"></i></a>
            <!-- delete -->
            <a x-bind=click:del rel=tooltip title="Delete"><i class="icon-trash"></i></a>
            <!-- chart -->
            <!-- removing for now cuz it's broken -->
            {#if :task.history}
              <a x-bind=click:toggleChart data-toggle-id="{{:task.id}}-chart" data-hide-id="{{:task.id}}-edit" data-history-path="_user.tasks.{{:task.id}}.history" rel="tooltip" title="Progress"><i class="icon-signal"></i></a>
            {/}
            <!-- notes -->
            {#if :task.notes}
            <span rel="popover" data-trigger="hover" data-placement="left" data-content="{:task.notes}" data-original-title="{:task.text}" class='task-notes'><i class="icon-comment"></i></span>
            {/}
        </div>

        <!-- left-hand side checkbox -->
        <div class="task-controls task-primary">
            <!-- Habits -->
            {#if equal(:task.type, 'habit')}
            {#if :task.up}<a class="task-action-btn" data-direction=up x-bind=click:score>＋</a>{/}
            {#if :task.down}<a class="task-action-btn" data-direction=down x-bind=click:score>−</a>{/}

            <!-- Rewards -->
            {else if equal(:task.type, 'reward')}
            <a class="money btn-buy" x-bind=click:score data-direction=down>
                <span class="reward-cost">{:task.value}</span>
                <span class='shop_gold'></span>
            </a>

            <!-- Daily & Todos -->
            {else}
            <span class="task-checker action-yesno">
                <input type=checkbox id="box-{{:task.id}}" class="visuallyhidden focusable" checked="{:task.completed}">
                <label for="box-{{:task.id}}"></label>
            </span>
            {/}
        </div>

        <!-- main content -->
        <p class="task-text">
            {:task.text}
        </p>

        <!-- edit/options dialog -->
        <app:tasks:taskMeta />
    </li>

<!-- task edit/options -->
<taskMeta:>
    <div id="{{:task.id}}-edit" class="task-options visuallyhidden">
        <form x-bind=submit:toggleTaskEdit data-toggle-id="{{:task.id}}-edit">
            <!-- text & notes -->
            <fieldset class="option-group">
                <label class="option-title">Text</label><input class="option-content" type=text value={:task.text}>
                <label class="option-title">Extra Notes</label><textarea class="option-content" rows=3>{:task.notes}</textarea>
            </fieldset>

            <!-- if Habit, plus/minus command options -->
            {#if equal(:task.type, 'habit')}
                <fieldset class="option-group">
                    <legend class="option-title">Direction/Actions</legend>
                    <span class="task-checker action-plusminus select-toggle">
                        <input class="visuallyhidden focusable" type=checkbox id="{{:task.id}}-option-plus" checked={:task.up}>
                        <label for="{{:task.id}}-option-plus"></label>
                    </span>
                    <span class="task-checker action-plusminus select-toggle">
                        <input class="visuallyhidden focusable" type=checkbox id="{{:task.id}}-option-minus" checked={:task.down}>
                        <label for="{{:task.id}}-option-minus"></label>
                    </span>
                </fieldset>

            <!-- if Daily, calendar -->
            {else if equal(:task.type, 'daily')}
                <fieldset class="option-group">
                    <legend class="option-title">Repeat</legend>
                    <div class="task-controls tile-group repeat-days">
                        <!-- note, does not use  data-toggle="buttons-checkbox" - it would interfere with our own click binding -->
                        <button type="button" class="task-action-btn tile {#if :task.repeat.su}active{/}" data-day='su' x-bind=click:toggleDay>Su</button>
                        <button type="button" class="task-action-btn tile {#if :task.repeat.m}active{/}" data-day='m' x-bind=click:toggleDay>M</button>
                        <button type="button" class="task-action-btn tile {#if :task.repeat.t}active{/}" data-day='t' x-bind=click:toggleDay>T</button>
                        <button type="button" class="task-action-btn tile {#if :task.repeat.w}active{/}" data-day='w' x-bind=click:toggleDay>W</button>
                        <button type="button" class="task-action-btn tile {#if :task.repeat.th}active{/}" data-day='th' x-bind=click:toggleDay>Th</button>
                        <button type="button" class="task-action-btn tile {#if :task.repeat.f}active{/}" data-day='f' x-bind=click:toggleDay>F</button>
                        <button type="button" class="task-action-btn tile {#if :task.repeat.s}active{/}" data-day='s' x-bind=click:toggleDay>S</button>
                    </div>
                </fieldset>

            <!-- if Reward, pricing -->
            {else if equal(:task.type, 'reward')}
                <fieldset class="option-group option-short">
                    <legend class="option-title">Price</legend>
                    <input class="option-content" size="16" type="number" min="0" value={:task.value}>
                    <div class="money input-suffix"><span class='shop_gold'></span></div>
                </fieldset>


            <!-- if Todo, the due date -->
            {else if equal(:task.type, 'todo')}
                <fieldset class="option-group">
                    <legend class="option-title">Due Date</legend>
                    <input class="option-content datepicker" type="text" value="{:task.date}" data-date-format="mm/dd/yyyy">
                </fieldset>
            {/}


            <app:filters:filter-fieldgroup />


            <!-- Advanced Options -->
            {#unless equal(:task.type, 'reward')}
                <p x-bind="click:tasksToggleAdvanced" class="option-title mega">Advanced Options</p>
                <fieldset class="option-group advanced-option visuallyhidden">
                    <legend class="option-title"><a class='priority-multiplier-help' href="https://trello.com/card/priority-multiplier/50e5d3684fe3a7266b0036d6/17" target="_blank"><i class='icon-question-sign'></i></a> Difficulty</legend>
                    <div class="task-controls tile-group priority-multiplier" data-id="{{:task.id}}">
                        <button type="button" class="task-action-btn tile {#if equal(:task.priority,'!')}active{/}{#unless :task.priority}active{/}" data-priority='!' x-bind=click:tasksSetPriority>Easy</button>
                        <button type="button" class="task-action-btn tile {#if equal(:task.priority,'!!')}active{/}" data-priority='!!' x-bind=click:tasksSetPriority>Medium</button>
                        <button type="button" class="task-action-btn tile {#if equal(:task.priority,'!!!')}active{/}" data-priority='!!!' x-bind=click:tasksSetPriority>Hard</button>
                    </div>
                </fieldset>
            {/}


            <button type=submit class="task-action-btn tile spacious" x-bind="click:tasksSaveAndClose">Save & Close</button>
        </form>
    </div>

    <div style="display:none;" id={{:task.id}}-chart></div>