jam-cloud/web/app/assets/javascripts/band_setup.js

(function(context,$) {

    "use strict";

    context.JK = context.JK || {};
    // TODO: MUCH OF THIS CLASS IS REPEATED IN createSession.js - REFACTOR
    context.JK.BandSetupScreen = function(app) {
        var logger = context.JK.logger;
        var rest = context.JK.Rest();
        var band = {};
        var friendSelectorDialog = null;
        var autoComplete = null;
        var userNames = [];
        var userIds = [];
        var userPhotoUrls = [];
        var selectedFriendIds = {};

        function resetForm() {

        }

        function formatGenres(genres) {
            var formattedGenres = '';
            if (genres) {
                for (var i=0; i < genres.length; i++) {
                    var genre = genres[i];
                    formattedGenres += genre.description;
                    if (i < genres.length -1) {
                        formattedGenres += ', ';
                    }
                }
            }
            return formattedGenres;
        }

        function createBand() {

        }

        function createBandInvitation() {

        }

        function beforeShow(data) {
            userNames = [];
            userIds = [];
            userPhotoUrls = [];
            resetForm();
        }

        function afterShow(data) {
            $.ajax({
                type: "GET",
                url: "/api/users/" + context.JK.currentUserId + "/friends",
                async: false
            }).done(function(response) {
                $.each(response, function() {
                    userNames.push(this.name);
                    userIds.push(this.id);
                    userPhotoUrls.push(this.photo_url);
                });

                var autoCompleteOptions = {
                    lookup: { suggestions: userNames, data: userIds },
                    onSelect: addInvitation
                };
                if (!autoComplete) {
                    autoComplete = $('#band-invitee-input').autocomplete(autoCompleteOptions);
                }
                else {
                    autoComplete.setOptions(autoCompleteOptions);
                }
            });

            $(".autocomplete").width("150px");
        }

        function friendSelectorCallback(newSelections) {
            var keys = Object.keys(newSelections);
            for (var i=0; i < keys.length; i++) {
                addInvitation(newSelections[keys[i]].userName, newSelections[keys[i]].userId);
            }
        }

        function addInvitation(value, data) {
            if ($('#selected-band-invitees div[user-id=' + data + ']').length === 0) {
                var template = $('#template-band-invitation').html();
                var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value});
                $('#selected-band-invitees').append(invitationHtml);
                $('#band-invitee-input').select();
                selectedFriendIds[data] = true;
            }
            else {
                $('#band-invitee-input').select();
                context.alert('Invitation already exists for this musician.');
            }
        }

        function removeInvitation(evt) {
            delete selectedFriendIds[$(evt.currentTarget).parent().attr('user-id')];
            $(evt.currentTarget).closest('.invitation').remove();
        }

        function events() {
            $('#selected-band-invitees').on("click", ".invitation a", removeInvitation);

            // friend input focus
            $('#band-invitee-input').focus(function() {
                $(this).val('');
            });

            // friend input blur
            $('#band-invitee-input').blur(function() {
                $(this).val('Type a friend\'s name');
            });

            $('#btn-band-setup-cancel').click(function() {
                context.location = "#/";
            });

            $('#btn-band-setup-next').click(function() {
                $("#band-setup-step-2").show();
                $("#band-setup-step-1").hide();
            });

            $('#btn-band-setup-back').click(function() {
                $("#band-setup-step-1").show();
                $("#band-setup-step-2").hide();
            });

            $('#btn-band-setup-create').click(createBand);

            $('#btn-band-choose-friends').click(function() {
                friendSelectorDialog.showDialog(selectedFriendIds);
            });
        }

        function initialize(friendSelectorDialogInstance) {
            friendSelectorDialog = friendSelectorDialogInstance;
            friendSelectorDialog.setCallback(friendSelectorCallback);
            events();

            var screenBindings = {
                'beforeShow': beforeShow,
                'afterShow': afterShow
            };

            app.bindScreen('band/setup', screenBindings);
        }

        this.initialize = initialize;
        this.afterShow = afterShow;
        return this;
    };

 })(window,jQuery);