kwc-challenge-set-listing.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../kwc-challenge-set/kwc-challenge-set.html">

<!--
`kwc-challenge-set-listing`
To display all the step-by-step challenge sets available to the user

@demo demo/index.html
-->

<dom-module id="kwc-challenge-set-listing">
    <template>
        <style>
             :host {
                display: block;
            }
            kano-display-training {
                margin: auto;
                max-width: 700px;
            }
        </style>

        <template is="dom-repeat" items="[[challengeSets]]" as="challengeSet">

            <kwc-challenge-set
                complete-icon-url="[[completeIconUrl]]"
                locked-icon-url="[[lockedIconUrl]]"
                current-icon-url="[[currentIconUrl]]"
                label="Challenge Set"
                challenge-set="[[challengeSet]]"
                progress="[[_computeCategoryProgress(challengeSet.category, completedChallenges)]]"
                avatar-url="[[userAvatarUrl]]"
                show-medals="[[showMedals]]"
                on-disabled-medal-clicked="_onDisabledMedalClicked"
                hide-challenge-friend
                disabled$="[[_computeDisabled(challengeSet.*, disabledChallengeSets.*)]]">
            </kwc-challenge-set>

        </template>

    </template>

    <script>

        Polymer({

            is: 'kwc-challenge-set-listing',

            properties: {
                /**
                 * An array of challenge set objects. A <kwc-challenge-set>
                 * element is rendered for each set.
                 * @type {Array}
                 */
                challengeSets: {
                    type: Array,
                    value: () => {
                        return [];
                    }
                },
                /**
                 * An array of challenge disabled challenge sets.
                 * @type {Array}
                 */
                disabledChallengeSets: {
                    type: Array,
                    value: () => {
                        return [];
                    }
                },
                /**
                 * An url for the current user's avatar
                 * @type {String}
                 */
                userAvatarUrl: {
                    type: String,
                    value: null
                },
                /**
                 * A dictionary of challenge categories containing an array of
                 * challenge ids that have been completed for each category.
                 * @type {Object}
                 */
                completedChallenges: {
                    type: Object,
                    value: () => {
                        return {};
                    }
                },
                /**
                 * Flags if, after completing a challenge set, the user
                 * should see the medal (badges) unlocked in the challenge
                 * set circle.
                 * @type {Boolean}
                 */
                showMedals: {
                    type: Boolean,
                    value: false
                },
                /*
                 * A url to use for completed challenges in the progess bar
                 */
                completeIconUrl: {
                    type: String,
                    value: null
                },
                /*
                 * A url for an icon to use for the current challenge in the progress bar.
                 */
                currentIconUrl: {
                    type: String,
                    value: null
                },
                /*
                 * A url for an icon to used for locked challenges on the progress bar.
                 */
                lockedIconUrl: {
                    type: String,
                    value: null
                }
            },
            /**
             * TODO: Document `_computeCategoryProgress`
             */
            _computeCategoryProgress (category, progress) {
                if (!category || !progress) {
                    return 0;
                }
                return progress[category];
            },
            /**
             * Compute if challenge set is disabled or not. The rule for
             * disabling a challenge set might change so instead of binding it
             * straight to the dom, it's being calculated on this method so
             * it's easier to manage it.
             * @param {Object} challengeSet A "challenge set" data object
             * @return {Boolean}
             */
            _computeDisabled (challengeSet, disabledChallengeSets) {
                return disabledChallengeSets.base.indexOf(challengeSet.base.category) !== -1;
            },
            /**
             * Proxy `disabled-medal-clicked` to parent view
             * @param {Event} e Event triggered by clicking on a disabled medal
             *     of a completed challenge set.
             */
            _onDisabledMedalClicked (e) {
                this.dispatchEvent(
                    new CustomEvent('disabled-medal-clicked', e)
                );
            }
        });
    </script>
</dom-module>