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 THE FOLLOWING FILES:
    // createSession.js
    // accounts_profiles.js

    context.JK.BandSetupScreen = function(app) {
        var logger = context.JK.logger;
        var rest = context.JK.Rest();
        var friendSelectorDialog = null;
        var autoComplete = null;
        var userNames = [];
        var userIds = [];
        var userPhotoUrls = [];
        var selectedFriendIds = {};

        function resetForm() {

        }

        function getSelectedGenres() {
            var genres = [];
            $('input[type=checkbox]:checked', '#band-genres').each(function(i) {
                var genre = $(this).val();
                genres.push(genre);
            });
            
            return genres;
        }

        function validateForm() {
            var isValid = true;
            // name

            // country

            // state

            // city

            // genres (no more than 3)

            // description


            return isValid;
        }

        function createBand() {
            if (validateForm()) {
                var band = {};
                band.name = $("#band-name").val();
                band.website = $("#band-website").val();
                band.biography = $("#band-biography").val();
                band.city = $("#band-city").val();
                band.state = $("#band-state").val();
                band.country = $("#band-country").val();
                band.genres = getSelectedGenres();

                rest.createBand(band).done(function(response) {
                    createBandInvitations(response.id, function() {
                        context.location = "#/bandProfile/" + response.id;
                    });
                });
            }
        }

        function createBandInvitations(bandId, onComplete) {
            var callCount = 0;
            var totalInvitations = 0;
            $('#selected-band-invitees .invitation').each(function(index, invitation) {
                callCount++;
                totalInvitations++;
                var userId = $(invitation).attr('user-id');
                rest.createBandInvitation(bandId, userId)
                    .done(function(response) {
                        callCount--;
                }).fail(app.ajaxError);
            });

            function checker() {
                if (callCount === 0) {
                    onComplete();
                } else {
                    context.setTimeout(checker, 10);
                }
            }
            checker();
            return totalInvitations;            
        }

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

        function afterShow(data) {
            loadFriends();
            loadGenres();
            loadCountries();
        }

        function loadFriends() {
            $.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 loadGenres() {
            rest.getGenres().done(function(response) {
                $.each(response, function(index, val) {
                    var genreTemplate = $('#template-band-setup-genres').html();
                    var genreHtml = context.JK.fillTemplate(genreTemplate, {
                        id: val.id,
                        description: val.description
                    });

                    $('#band-genres').append(genreHtml);
                });
            });
        }

        function loadCountries() {

        }

        function loadStates(country) {

        }

        function loadCities(state) {

        }

        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);
            });

            $('#band-country').on('change', function(evt) {
                evt.stopPropagation();
                loadStates(this.value);
                return false;
            });

            $('#band-state').on('change', function(evt) {
                evt.stopPropagation();
                loadCities(this.value);
                return false;
            });
        }

        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);