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

(function(context,$) {

    "use strict";

    context.JK = context.JK || {};
    context.JK.InviteMusiciansDialog = function(app) {
        var logger = context.JK.logger;
        var userNames = [];
        var userIds = [];
        var userPhotoUrls = [];
        var friendSelectorDialog = null;
        var _friendSelectorHTML = null;
        var selectedFriendIds = {};
        var autoComplete = null;
        var rest = context.JK.Rest();
        var selectedIds = {};
        var newSelections = {};
        var mySaveCallback;

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

        this.afterShow = function(data) {
            friendSelectorDialog.setCallback(friendSelectorCallback);

            var friends = rest.getFriends({ id: context.JK.currentUserId })
                .done(function(friends) {
                    $.each(friends, function() {
                        userNames.push(this.name);
                        userIds.push(this.id);
                        userPhotoUrls.push(this.photo_url);
                    });

                    var autoCompleteOptions = {
                        lookup: { suggestions: userNames, data: userIds },
                        onSelect: addInvitation
                    };

                    $('#friend-input').attr("placeholder", "Type a friend\'s name").prop('disabled', false);

                    if (!autoComplete) {
                        autoComplete = $('#friend-input').autocomplete(autoCompleteOptions);
                    }
                    else {
                        autoComplete.setOptions(autoCompleteOptions);
                    }

                    $(".autocomplete").width("150px");
                })
                .fail(function() {
                    $('#friend-input').attr("placeholder", "Unable to lookup friends");
                    app.ajaxError(arguments);
                });
        }

        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-friends div[user-id=' + data + ']').length === 0) {
                var template = $('#template-added-invitation').html();
                var invitationHtml = context.JK.fillTemplate(template, {userId: data, userName: value});
                $('.selected-friends').append(invitationHtml);
                $('#friend-input').select();
                selectedFriendIds[data] = true;
            }
            else {
                $('#friend-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 createInvitations(sessionId, onComplete) {
            var callCount = 0;
            var totalInvitations = 0;
            $('.selected-friends .invitation').each(function(index, invitation) {
                callCount++;
                totalInvitations++;
                var invite_id = $(invitation).attr('user-id');
                var invite = {
                    music_session: sessionId,
                    receiver: invite_id
                };
                $.ajax({
                    type: "POST",
                    url: "/api/invitations",
                    data: invite
                }).done(function(response) {
                    callCount--;
                }).fail(app.ajaxError);
            });
            // TODO - this is the second time I've used this pattern.
            // refactor to make a common utility for this.
            function checker() {
                if (callCount === 0) {
                    onComplete();
                } else {
                    context.setTimeout(checker, 10);
                }
            }
            checker();
            return totalInvitations;
        }

        function searchFriends(query) {
            if (query.length < 2) {
                $('#friend-search-results').empty();
                return;
            }
            var url = "/api/search?query=" + query + "&userId=" + context.JK.currentUserId;
            $.ajax({
                type: "GET",
                url: url,
                success: friendSearchComplete
            });
        }

        function friendSearchComplete(response) {
            // reset search results each time
            $('#friend-search-results').empty();

            // loop through each
            $.each(response.friends, function() {
                // only show friends who are musicians
                if (this.musician === true) {
                    var template = $('#template-friend-search-results').html();
                    var searchResultHtml = context.JK.fillTemplate(template, {userId: this.id, name: this.first_name + ' ' + this.last_name});
                    $('#friend-search-results').append(searchResultHtml);
                    $('#friend-search-results').attr('style', 'display:block');
                }
            });
        }

        function events() {
            $('.selected-friends').on("click", ".invitation a", removeInvitation);
            $('.btn-choose-friends').click(function(){
                friendSelectorDialog.showDialog(selectedFriendIds);
            });
        }

        function showDialog(ids) {
        }

        this.friendSelectorHTML = function() {
            if (_friendSelectorHTML === null) {
                _friendSelectorHTML = context.JK.fillTemplate($('#template-session-invite-musicians').html(),{}); 
            }
            return _friendSelectorHTML;
        }

        this.appendFriendSelector = function(elem) {
            elem.append(this.friendSelectorHTML());
            events();
        };

        this.initialize = function(friendSelectorDialogInstance) {
            friendSelectorDialog = friendSelectorDialogInstance;
        };

        this.setCallback = function(callback) {
            mySaveCallback = callback;
        }

        this.searchFriends = searchFriends;
        this.addInvitation = addInvitation;

        this.showDialog = showDialog;
        return this;
    };

})(window,jQuery);