habitica/website/views/shared/tasks/lists.jade

// Note here, we need this part of Habit to be a directive since we're going to be passing it variables from various
// parts of the app. The alternative would be to create new scopes for different containing sections, but that
// started to get unwieldy
script(id='templates/habitrpg-tasks.html', type="text/ng-template")
  .tasks-lists.container-fluid
    .row
      .col-md-3.col-sm-6(bindonce='lists', ng-repeat='list in lists', ng-class='::{"rewards-module": list.type==="reward"}')
        .task-column(class='{{list.type}}s')

          // Todos export/graph options
          span.option-box.pull-right(ng-if='::main && list.type=="todo"')
            a.option-action(ng-show='obj.history.todos', ng-click='toggleChart("todos")', tooltip=env.t('progress'))
              span.glyphicon.glyphicon-signal
            //a.option-action(ng-href='/v1/users/{{user.id}}/calendar.ics?apiToken={{user.apiToken}}', tooltip='iCal')
            a.option-action(ng-click='notPorted()', tooltip='iCal', ng-show='false')
              span.glyphicon.glyphicon-calendar
            // <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>

          // Header
          h2.task-column_title {{list.header}}

          // Todo Chart
          .todos-chart(ng-if='::list.type == "todo"', ng-show='charts.todos')

          // Add New
          form.task-add(name='new{{list.type}}form', ng-hide='obj._locked', ng-submit='addTask(obj[list.type+"s"],list)')
            textarea(rows='6', task-focus='list.bulk && list.focus', ng-model='list.newTask', placeholder='{{list.placeHolderBulk}}', ng-if='list.bulk', ui-keydown='{"meta-enter ctrl-enter":"addTask(obj[list.type+\'s\'],list)"}', required)
            input(type='text', task-focus='!list.bulk && list.focus', ng-model='list.newTask', placeholder='{{list.placeHolder}}', ng-if='!list.bulk', required)
            button(type='submit', ng-disabled='new{{list.type}}form.$invalid')
             div.empty-task-notification( ng-show='new{{list.type}}form.$invalid', tooltip=env.t("emptyTask") )
               span.glyphicon.glyphicon-plus
             span.glyphicon.glyphicon-plus(ng-show='!new{{list.type}}form.$invalid')
            small.help-block.btn-link.pull-right(ng-click='toggleBulk(list)')
              span(ng-if='!list.bulk')=env.t('addmultiple')
              span(ng-if='list.bulk')=env.t('addsingle')

          mixin taskColumnTabs(position)
            // Habits Tabs
            div(ng-if='::main && list.type=="habit"', class='tabbable tabs-below')
              ul.task-filter
                li(ng-class='{active: list.view == "all"}')
                  a(ng-click='list.view = "all"')=env.t('all')
                li(ng-class='{active: list.view == "yellowred"}')
                  a(ng-click='list.view = "yellowred"')=env.t('yellowred')
                li(ng-class='{active: list.view == "greenblue"}')
                  a(ng-click='list.view = "greenblue"')=env.t('greenblue')
            // Daily Tabs
            div(ng-if='::main && list.type=="daily"', class='tabbable tabs-below')
              // remaining/completed tabs
              ul.task-filter
                li(ng-class='{active: list.view == "all"}')
                  a(ng-click='list.view = "all"')=env.t('all')
                li(ng-class='{active: list.view == "remaining"}')
                  a(ng-click='list.view = "remaining"')=env.t('due')
                li(ng-class='{active: list.view == "complete"}')
                  a(ng-click='list.view = "complete"')=env.t('grey')
            // Todo Tabs
            div(ng-if='::main && list.type=="todo"', ng-class='::{"tabbable tabs-below": list.type=="todo"}')
              if position=="bottom"
                div(ng-show='list.view == "complete"')
                  .alert
                    =env.t('lotOfToDos')
                  button.task-action-btn.tile.spacious.bright(ng-click='user.ops.clearCompleted({})',popover=env.t('deleteToDosExplanation'),popover-trigger='mouseenter')=env.t('clearCompleted')
                  p!=env.t('beeminderDeleteWarning')
              // remaining/completed tabs
              ul.task-filter
                li(ng-class='{active: list.view == "remaining"}')
                  a(ng-click='list.view = "remaining"')=env.t('remaining')
                li(ng-class='{active: list.view == "dated"}', tooltip=env.t('datedNotSorted'))
                  a(ng-click='list.view = "dated"')=env.t('dated')
                li(ng-class='{active: list.view == "complete"}')
                  a(ng-click='list.view = "complete"')=env.t('complete')
            // Rewards Tabs
            div(ng-if='::main && list.type=="reward"', class='tabbable tabs-below')
              ul.task-filter
                li(ng-class='{active: list.view == "all"}')
                  a(ng-click='list.view = "all"')=env.t('all')
                li(ng-class='{active: list.view == "ingamerewards"}')
                  a(ng-click='list.view = "ingamerewards"')=env.t('ingamerewards')

          +taskColumnTabs('top')

          // Static Rewards
          ul.items.rewards(ng-if='main && list.type=="reward"')
            li.task.reward-item(ng-repeat='item in itemStore',popover-trigger='mouseenter', popover-placement='top', popover='{{item.notes()}}')
              // right-hand side control buttons
              .task-meta-controls
                span.task-notes
                  span.glyphicon.glyphicon-comment
              //left-hand size commands
              .task-controls.task-primary
                a.money.btn-buy.item-btn(ng-class='{highValue: item.value >= 1000}', ng-click='buy(item)')
                  span.shop_gold
                  span.reward-cost {{item.value}}
              // main content
              span(ng-class='::{"shop_{{item.key}} shop-sprite item-img": true}').reward-img
              p.task-text {{item.text()}}

          // Events
          ul.items.rewards(ng-if='main && list.type=="reward" && (user.items.special.snowball>0 || user.stats.buffs.snowball || user.items.special.spookDust>0 || user.stats.buffs.spookDust || user.items.special.shinySeed>0 || user.stats.buffs.shinySeed)')

            mixin specialSpell(k,canceler)
              li.task.reward-item(ng-if='#{canceler ? "user.stats.buffs."+canceler : "user.items.special."+k+">0"}',popover-trigger='mouseenter', popover-placement='top', popover='{{Content.spells.special.#{k}.notes()}}')
                .task-meta-controls
                  span.task-notes
                    span.glyphicon.glyphicon-comment
                //left-hand size commands
                .task-controls.task-primary
                  a.money.btn-buy.item-btn(ng-click='castStart(Content.spells.special.#{k})', ng-class='{active: Content.spells.special.#{k}.key == spell.key}')
                    if canceler
                      span.shop_gold
                      span.reward-cost {{Content.spells.special.#{k}.value}}
                    else
                      span.shop_spell(class='shop_#{k}')
                      span.reward-cost {{user.items.special.#{k}}}
                // main content
                p.task-text {{Content.spells.special.#{k}.text()}}

            +specialSpell('snowball')
            +specialSpell('spookDust')
            +specialSpell('shinySeed')
            +specialSpell('salt','snowball')
            +specialSpell('opaquePotion','spookDust')
            +specialSpell('petalFreePotion','shinySeed')

          // Actual List
          ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', hrpg-sort-tasks)
            include ./task

          // Spells
          ul.items(ng-if='main && list.type=="reward" && user.stats.class && !user.preferences.disableClasses')
            li.task.reward-item(ng-repeat='(k,skill) in Content.spells[user.stats.class]', ng-if='user.stats.lvl >= skill.lvl',popover-trigger='mouseenter', popover-placement='top', popover='{{skill.notes()}}')
              .task-meta-controls
                span.task-notes
                  span.glyphicon.glyphicon-comment
              //left-hand size commands
              .task-controls.task-primary
                a.money.btn-buy.item-btn(ng-click='castStart(skill)', ng-class='{active: skill.key == spell.key}')
                  span.reward-cost
                    strong {{skill.mana}}
                    =env.t('mp')
              // main content
              span(ng-class='{"shop_{{skill.key}} shop-sprite item-img": true}')
              p.task-text {{skill.text()}}

          br

          +taskColumnTabs('bottom')