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')
            a.option-action(ng-if='list.type=="todo"', ng-show='obj.history.todos', ng-click='toggleChart("todos")', tooltip=env.t('progress'), style='margin-right:5px;')
              span.glyphicon.glyphicon-signal
            //a.option-action(ng-href='/v1/users/{{user.id}}/calendar.ics?apiToken={{user.apiToken}}', tooltip='iCal')
            //-a.option-action(ng-if='list.type=="todo"', 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>
            a.option-action(ng-click='list.help=!list.help', tooltip='Click for help')
              span.glyphicon.glyphicon-question-sign

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

          div(ng-if='list.help', ng-switch='::list.type')
            div(ng-switch-when='habit')
              ul
                li Good Habits are things that you do often. They award gold and experience every time you click the <code>+</code>.
                li Bad Habits are things you want to avoid doing. They remove health every time you click the <code>-</code>.
                li For inspiration, check out these <a href='http://habitrpg.wikia.com/wiki/Sample_Habits#Business' target='_blank'>sample Habits</a>
                li More questions? Ask in <a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>the Newbies Guild!</a>
            div(ng-switch-when='daily')
              ul
                li Dailies repeat <strong>every day</strong> that they are active. Click the pencil icon to change the days a Daily is active.
                li If you don’t complete active Dailies, they will hurt your avatar when your day rolls over.
                li Dailies turn <strong>redder</strong> when you miss them, and <strong>bluer</strong> when you complete them. The redder the Daily, the more it will reward you... and hurt you.
                li To change when your day rolls over, go to Settings > Site > Custom Day Start.
                li For inspiration, check out these <a href='http://habitrpg.wikia.com/wiki/Sample_Dailies#Business' target='_blank'>sample Dailies</a>!
                li More questions? Ask in <a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>the Newbies Guild!</a>

            div(ng-switch-when='todo')
              ul
                li To-Dos start yellow, and get redder (more valuable) the longer it takes to complete them.
                li To-Dos never hurt you! They only award gold and experience.
                li Breaking a To-Do down into a small checklist will make it less scary, and will increase your points!
                li For inspiration, check out these <a href='http://habitrpg.wikia.com/wiki/Sample_To-Dos#Finances' target='_blank'>sample To-Dos</a>!
                li More questions? Ask in <a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>the Newbies Guild!</a>

            div(ng-switch-when='reward')
              ul
                li The Equipment you buy for your avatar is stored in Inventory > Equipment.
                li Equipment affects your stats (Avatar > Stats).
                li There will be special equipment here during World Events.
                li Don't be afraid to set custom rewards! Check out some samples <a href='http://habitrpg.wikia.com/wiki/Sample_Custom_Rewards' target='_blank'>here</a>
                li More questions? Ask in <a href='https://habitrpg.com/#/options/groups/guilds/5481ccf3-5d2d-48a9-a871-70a7380cee5a' target='_blank'>the Newbies Guild!</a>


          // 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"}')
                  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, ng-if='!$state.includes("options.social.challenges")')
            include ./task
          //Loads the non-sortable lists for challenges
          ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', ng-if='$state.includes("options.social.challenges")')
            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')