habitica/views/options/challenges.html

<main:>
    <app:widgets:tabs>
        <@headers>
            <app:widgets:tab-header group="challenges" tab="party" title="Party" default="true" />
            <app:widgets:tab-header group="challenges" tab="guild" title="Guild" />
            <app:widgets:tab-header group="challenges" tab="public" title="Public" />
        </@headers>

        <app:widgets:tab-content group="challenges" tab="party" default="true">
            {{#unless _page.party.id}}
                Join a party first.
            {{else}}
                <app:challenges:list type="party" gid="{{_page.party.id}}" text="Party" list="{_page.lists.challenges[_page.party.id]}" />
            {{/}}
        </app:widgets:tab-content>

        <app:widgets:tab-content group="challenges" tab="guild">
            <ul class="nav nav-pills">
                {{#each _page.guilds as :guild}}
                    <li class="{{#if equal($index,0)}}active{{/}}"><a data-toggle='tab' data-target="#challenges-guild-{:guild.id}">{{:guild.name}}</a></li>
                {{/}}
            </ul>
            <div class="tab-content">
                {{#each _page.guilds as :guild}}
                    <div class="tab-pane {{#if equal($index,0)}}active{{/}}" id="challenges-guild-{{:guild.id}}">
                        <app:challenges:list type="guild" gid="{{:guild.id}}" text="Guild" list="{_page.lists.challenges[:guild.id]}" />
                    </div>
                {{/}}
            </div>
        </app:widgets:tab-content>

        <app:widgets:tab-content group="challenges" tab="public">
            <app:challenges:list type="public" gid="habitrpg" text="Public" list="{_page.lists.challenges.habitrpg}" />
        </app:widgets:tab-content>

    </app:widgets:tabs>

<list:>
    <div class="{#unless _page.new.challenge}hidden{/}">
        <app:challenges:create-form />
    </div>
    <div class="{#if _page.new.challenge}hidden{/}">
        <app:challenges:create-button type='{{@type}}' gid={{@gid}} text={{@text}} />
        {#each @list as :challenge}
            <app:challenges:list-entry challenge={:challenge} />
        {/}
        <hr/>
    </div>

<list-entry:>
    <div class="accordion-group">
        <div class="accordion-heading">
            <ul class='pull-right challenge-accordion-header-specs'>
                <li>
                    {count(@challenge.members)} Subscribers
                </li>
                <li>
                    <!-- prize -->
                    {#if @challenge.prize}
                        <table><tr><td>{@challenge.prize}</td><td><span class="Pet_Currency_Gem1x"></span></td><td> Prize</td></tr></table>
                    {/}
                </li>
                <li>
                    <!-- subscribe / unsubscribe -->
                    {#with @challenge}
                    <a x-bind="click:challenges.challengeUnsubscribe" class='btn btn-small btn-danger {#unless indexOf(_page.user.pub.challenges,@challenge.id)}hidden{/}'><i class='icon-ban-circle'></i> Unsubscribe</a>
                    <a x-bind="click:challenges.subscribe" class='btn btn-small btn-success {#if indexOf(_page.user.pub.challenges,@challenge.id)}hidden{/}'><i class='icon-ok'></i> Subscribe</a>
                    {/}
                </li>
            </ul>
            <a class="accordion-toggle" data-toggle="collapse" href="#accordion-challenge-{{@challenge.id}}">{@challenge.name} (by {@challenge.user.name})</a>


        </div>
        <div id="accordion-challenge-{{@challenge.id}}" class="accordion-body collapse">
            <div class="accordion-inner">

                <!-- Edit button -->
                <span style='position:absolute; right:0;'>
                {#if and(not(_page.editing.challenges[@challenge.id]),equal(@challenge.user.uid,_session.userId))}
                    <ul class='nav nav-pills'><li>
                        <a x-bind='click:challenges.toggleEdit' data-id={{@challenge.id}} ><i class=icon-pencil></i></a>
                    </li></ul>
                {else}
                    <ul class='nav nav-pills'><li>
                        <a x-bind='click:challenges.toggleEdit' data-id={{@challenge.id}} ><i class=icon-ok></i></a>
                    </li></ul>
                {/}
                </span>

                {#if _page.editing.challenges[@challenge.id]}
                    <div class='-options'>
                        <input type=text class='option-content' value={@challenge.name} />
                        <textarea cols=3 class='option-content' placeholder='Description'>{@challenge.description}</textarea>
                        <!--<input type=number class='option-content' placeholder='Gems Prize' value={@challenge.prize} />-->
                    </div>
                    {{#with @challenge}}
                        <a class='btn btn-small btn-danger' x-bind=click:challenges.delete >Delete</a>
                    {{/}}
                {/}
                {#if @challenge.description}<div>{@challenge.description}</div>{/}

                <div class="grid">
                    <app:tasks:task-lists
                            editable={_page.editing.challenges[@challenge.id]}
                            habits={@challenge.habits}
                            dailys={@challenge.dailys}
                            todos={@challenge.todos}
                            rewards={@challenge.rewards}
                            />
                </div>

                <h3>Statistics</h3>
                {#each @challenge.members as :member}
                    <h4>{:member.name}</h4>
                    <div class="grid">
                        <div class="module">
                            <app:challenges:stats header=Habits challenge={@challenge} member={:member} list={@challenge.habits} />
                        </div>
                        <div class="module">
                            <app:challenges:stats header=Dailies challenge={@challenge} member={:member} list={@challenge.dailys}  />
                        </div>
                        <div class="module">
                            <app:challenges:stats header=Todos challenge={@challenge} member={:member} list={@challenge.todos}  />
                        </div>
                    </div>
                {/}
            </div>
        </div>
    </div>

<stats:>
    <h5>{@header}</h5>
    <div>
    {#each @list as :task}
        <table><tr>
            <td>
                <!-- FIXME commented section below isn't getting updated dynamically, temp solution is less efficient -->
                <strong>{:task.text}</strong>: {challengeMemberScore(@member,:task)} <!--{round(@member[@taskType]s[:task.id].value)}-->
            </td>
            <td>
                <div style='margin-left: 10px' class="challenge-{{@challenge.id}}-member-{{@member.id}}-history-{{:task.id}}"></div>
            </td>
        </tr></table>
    {/}
    </div>

<create-button:>
    <a x-bind='click:challenges.create' class='btn btn-success' data-type={{@type}} data-gid={{@gid}} >Create {{@text}} Challenge</a>

<create-form:>
    <form x-bind="submit:challenges.save">
        <div>
            <input type='submit' class='btn btn-success' value='Save' />
            <input type='button' x-bind='click:challenges.discard' class='btn btn-danger' value=Discard />
        </div>

        <div class='challenge-options'>
            <input type='text' class='option-content' value={_page.new.challenge.name} placeholder="Challenge Title" required />
        </div>
    </form>

    <div class="grid">
        <app:tasks:task-lists
                habits={_page.new.challenge.habits}
                dailys={_page.new.challenge.dailys}
                todos={_page.new.challenge.todos}
                rewards={_page.new.challenge.rewards}
                editable=true />
    </div>