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 selectedFriendIds = {};
        var autoComplete = null;
        var rest = context.JK.Rest();
        var mySaveCallback;
        var inviteAction = 'create';  // create/update

        this.inviteSessionCreate = function(elemSelector) {
            inviteAction = 'create';
            _appendFriendSelector($(elemSelector));
        };

        this.inviteSessionUpdate = function(elemSelector, sessionId) {
            inviteAction = 'update';
            if (0 == $(elemSelector + ' .friendbox').length) {
                _appendFriendSelector($(elemSelector));
            }
            this.clearSelections();
            $.ajax({
                ajax: false,
                url: "/api/invitations",
                data: { session_id:  sessionId, sender: context.JK.currentUserId }
            }).done(function(response) {
                response.map(function(item) {
                    var dd = item['receiver']
                    selectedFriendIds[dd['id']] = true;
                    addInvitation(dd['name'], dd['id']);
                });
            }).fail(app.ajaxError);
        }

        this.clearSelections = function() {
            userNames = [];
            userIds = [];
            userPhotoUrls = [];
            selectedFriendIds = {};
            $('.selected-friends').empty();
        };

        this.loadFriends = function() {
            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 image_style = inviteAction == 'update' ? 'display:none' : '';
                var invitationHtml = context.JK.fillTemplate(template, 
                                                             {userId: data, 
                                                              userName: value,
                                                              image_style: image_style});
                $('.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();
        }

        this.createInvitations = function(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-'+inviteAction).on("click", ".invitation a", removeInvitation);
            $('#btn-choose-friends-'+inviteAction).click(function(){
                friendSelectorDialog.showDialog(selectedFriendIds);
            });
        }

        function _friendSelectorHTML() {
            return context.JK.fillTemplate($('#template-session-invite-musicians').html(),
                                           {choose_friends_id: 'btn-choose-friends-'+inviteAction,
                                            selected_friends_id: 'selected-friends-'+inviteAction}); 
        }

        function _appendFriendSelector(elemSelector) {
            elemSelector.append(_friendSelectorHTML());
            _events();
        };

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

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

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

        return this;
    };

})(window,jQuery);