jam-cloud/app/assets/javascripts/createSession.js

(function(context,$) {

    context.JK = context.JK || {};
    context.JK.CreateSessionScreen = function(app) {
        var logger = context.JK.logger;
        var realtimeMessaging = context.JK.JamServer;
        var autoComplete = null;
        var usernames = [];
        var userids = [];

/*
Message from Seth on sequence for creating/joining sessions:
02:31:46 PM) Seth Call: sequence:
(02:31:53 PM) Seth Call: LOGIN websocket (get your client_id)
(02:32:02 PM) Seth Call: CRETAE SESSION
(02:32:09 PM) Seth Call: CREATE PARTICIPANT (pass in client_id)
(02:32:12 PM) Seth Call: that's it for client 1
(02:32:13 PM) Seth Call: client 2
(02:32:20 PM) Seth Call: LOGIN WEBSOCKET (get your client_id)
(02:32:29 PM) Seth Call: CREATE PARTICIPANT(pass in client_id for client2)
(02:32:31 PM) Seth Call: that's it
(02:32:43 PM) Seth Call: USER_JOINED_MUSIC_SESSION is an event from the server
(02:32:52 PM) Seth Call: and LOGIN_MUSIC_SESSION is deprecated/junk
*/

        function beforeShow(data) {
            usernames = [];
            userids = [];
            resetForm();
        }

        /**
        * Reset form to initial state.
        */
        function resetForm() {
            $form = $('#create-session-form');
            $('textarea[name="description"]', $form).val('');
        }

        function afterShow(data) {
            // TODO: This won't work in the long-term. We'll need to provide
            // a handlers which accepts some characters and only returns users
            // who are musicians who match that input string. Once we get there,
            // we could just use the ajax functionality of the autocomplete plugin.
            //
            // But for now:
            // Load the users list into our local array for autocomplete.
            $.ajax({
                type: "GET",
                url: "/api/users"
            }).done(function(response) {
                $.each(response, function() {
                    usernames.push(this.name);
                    userids.push(this.id);
                });
                // Hook up the autocomplete.
                autoCompleteOptions = {
                    lookup: {suggestions:usernames, data: userids},
                    onSelect: addInvitation
                };
                if (!(autoComplete)) {
                    autoComplete = $('#invitations').autocomplete(autoCompleteOptions);
                } else {
                    autoComplete.setOptions(autoCompleteOptions);
                }
            });
        }

        function addInvitation(value, data) {
            var username = value;
            var userid = data;
            var template = $('#template-added-invitation').html();   // TODO: cache this
            var inviteHtml = JK.fillTemplate(template, {userId: userid, userName: username});
            $('#added-invitations').append(inviteHtml);
            $('#invitations').select();
        }

        /**
        * Validate the form, returning a list of errors.
        */
        function validateForm() {
            var errors = [];
            var genresCount = $('select[name="genres"]').find(':selected').length;
            if (genresCount > 3) {
                errors.push(['select[name="genres"]', "Please select no more than three genres."]);
            }
            return (errors.length) ? errors : null;
        }

        function submitForm(evt) {
            evt.preventDefault();
            var formErrors = validateForm();
            if (formErrors) {
                app.notify({
                    title: "Form Problems",
                    text: JSON.stringify(formErrors)
                });
                return false;
            }
            var $this = $(this);
            var data = $this.formToObject();
            data.musician_access = Boolean(data.musician_access);
            data.client_id = app.clientId;
            if (typeof(data.genres) === "string") {
                data.genres = [data.genres];
            }

            // FIXME: Hard-code tracks for now. Needs to be pickable
            data.tracks = [
                { instrument_id: "electric guitar", sound: "mono" },
                { instrument_id: "keyboard", sound: "mono" }
            ];

            var url = "/api/sessions";
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: 'application/json',
                url: url,
                processData:false,
                data: JSON.stringify(data)
            }).done(
                function(response) {
                    var newSessionId = response.id;
                    createInvitations(newSessionId, function() {
                        self.location = '#/session/' + newSessionId;
                    });
                }
            ).fail(app.ajaxError);
            return false;
        }

        function createInvitations(sessionId, onComplete) {
            var callCount = 0;
            $('#added-invitations .invitation').each(function() {
                callCount++;
                var invite_id = $(this).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 {
                    setTimeout(checker, 10);
                }
            }
            checker();
        }

        function events() {
            $('#create-session-form').submit(submitForm);
            $('#added-invitations').on("click", ".invitation span", removeInvitation);
        }

        function removeInvitation(evt) {
            $(this).closest('.invitation').remove();
        }

        function loadGenres() {
            var url = "/api/genres";
            $.ajax({
                type: "GET",
                url: url
            }).done(function(response) {
                var options = [];
                var optionTemplate = $('#template-genre-option').html();
                $.each(response, function() {
                    var d = {value: this.id, label: this.description};
                    var opt = context.JK.fillTemplate(optionTemplate, d);
                    options.push(opt);
                });
                $('#create-session-form select[name="genres"]').html(options.join(''));
            });
        }

        this.initialize = function() {
            events();
            loadGenres();
            screenBindings = { 'afterShow': afterShow, 'beforeShow': beforeShow };
            app.bindScreen('createSession', screenBindings);
        };

    };

 })(window,jQuery);