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

(function(context,$) {

    "use strict";

    context.JK = context.JK || {};
    context.JK.ProfileScreen = function(app) {
        var logger = context.JK.logger;
        var userId;
        var user = {};

        var proficiencyDescriptionMap = {
            "1": "BEGINNER",
            "2": "INTERMEDIATE",
            "3": "EXPERT"
        };

        var proficiencyCssMap = {
            "1": "proficiency-beginner",
            "2": "proficiency-intermediate",
            "3": "proficiency-expert"
        };

        function beforeShow(data) {
            userId = data.id;
        }

        function afterShow(data) {
            resetForm();
            events();
            bindUser();
        }

        function resetForm() {
            $('#profile-instruments').empty();
        }

        function events() {
            // TODO: wire up panel clicks

            // wire up buttons if you're not viewing your own profile 
            if (userId != context.JK.currentUserId) {
                // wire up Add Friend click
                var friend = isFriend();
                configureFriendButton(friend);

                // wire up Follow click
                var following = isFollowing();
                configureFollowingButton(following);
            }
            else {
                $('#btn-add-friend').hide();
                $('#btn-follow').hide();
            }
        }

        function sendFriendRequest(evt) {
            evt.stopPropagation();
            context.JK.sendFriendRequest(app, userId, friendRequestCallback);
        }

        function removeFriend(evt) {
            evt.stopPropagation();

            var url = "/api/users/" + context.JK.currentUserId + "/friends/" + userId;
            $.ajax({
                type: "DELETE",
                dataType: "json",
                url: url,
                processData: false,
                success: function(response) {
                    resetForm();
                    bindUser();  // refresh stats
                    configureFriendButton(false);
                },
                error: app.ajaxError
            });
        }

        function isFriend() {
            var alreadyFriend = false;

            var url = "/api/users/" + context.JK.currentUserId + "/friends/" + userId;
            $.ajax({
                type: "GET",
                dataType: "json",
                url: url,
                async: false,
                processData: false,
                success: function(response) {
                    if (response.id !== undefined) {
                        alreadyFriend = true;
                    }
                    else {
                        alreadyFriend = false;
                    }
                },
                error: app.ajaxError
            });

            return alreadyFriend;
        }

        function friendRequestCallback() {
            configureFriendButton(true);
        }

        function configureFriendButton(friend) {
            $('#btn-add-friend').unbind("click");

            if (friend) {
                $('#btn-add-friend').text('REMOVE FRIEND');
                $('#btn-add-friend').click(removeFriend);
            }
            else {
                $('#btn-add-friend').text('ADD FRIEND');
                $('#btn-add-friend').click(sendFriendRequest);
            }
        }

        function addFollowing() {
            var newFollowing = {};
            newFollowing.user_id = userId;

            var url = "/api/users/" + context.JK.currentUserId + "/followings";
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: 'application/json',
                url: url,
                data: JSON.stringify(newFollowing),
                processData: false,
                success: function(response) {
                    resetForm();
                    bindUser();  // refresh stats
                    configureFollowingButton(true);
                },
                error: app.ajaxError
            });
        }

        function removeFollowing() {
            var following = {};
            following.user_id = userId;

            var url = "/api/users/" + context.JK.currentUserId + "/followings";
            $.ajax({
                type: "DELETE",
                dataType: "json",
                contentType: 'application/json',
                url: url,
                data: JSON.stringify(following),
                processData: false,
                success: function(response) {
                    resetForm();
                    bindUser();  // refresh stats
                    configureFollowingButton(false);
                },
                error: app.ajaxError
            });
        }

        function isFollowing() {
            var alreadyFollowing = false;

            var url = "/api/users/" + context.JK.currentUserId + "/followings/" + userId;
            $.ajax({
                type: "GET",
                dataType: "json",
                url: url,
                async: false,
                processData: false,
                success: function(response) {
                    if (response.id !== undefined) {
                        alreadyFollowing = true;
                    }
                    else {
                        alreadyFollowing = false;
                    }
                },
                error: app.ajaxError
            });

            return alreadyFollowing;
        }

        function configureFollowingButton(following) {
            $('#btn-follow').unbind("click");

            if (following) {
                $('#btn-follow').text('STOP FOLLOWING');
                $('#btn-follow').click(removeFollowing);
            }
            else {
                $('#btn-follow').text('FOLLOW');
                $('#btn-follow').click(addFollowing);
            }
        }

        function bindUser() {
            var url = "/api/users/" + userId;
            $.ajax({
                type: "GET",
                dataType: "json",
                url: url,
                async: false,
                processData:false,
                success: function(response) {
                    user = response;
                },
                error: app.ajaxError
            });

            if (user) {

                // name
                $('#profile-username').html(user.name);

                // avatar
                $('#profile-avatar').attr('src', context.JK.resolveAvatarUrl(user.photo_url));

                // instruments
                if (user.instruments) {
                    for (var i=0; i < user.instruments.length; i++) {
                        var instrument = user.instruments[i];
                        var description = instrument.instrument_id;
                        var proficiency = instrument.proficiency_level;
                        var instrument_icon_url = context.JK.getInstrumentIcon45(description);

                        // add instrument info to layout
                        var template = $('#template-profile-instruments').html();
                        var instrumentHtml = context.JK.fillTemplate(template, {
                            instrument_logo_url: instrument_icon_url,
                            instrument_description: description,
                            proficiency_level: proficiencyDescriptionMap[proficiency],
                            proficiency_level_css: proficiencyCssMap[proficiency]
                        });

                        $('#profile-instruments').append(instrumentHtml);
                    }
                }

                // location
                $('#profile-location').html(user.location);

                // stats
                var text = user.friend_count > 1 || user.friend_count == 0 ? " Friends" : " Friend";
                $('#profile-friend-stats').html(user.friend_count + text);

                text = user.follower_count > 1 || user.follower_count == 0 ? " Followers" : " Follower";
                $('#profile-follower-stats').html(user.follower_count + text);

                text = user.session_count > 1 || user.session_count == 0 ? " Sessions" : " Session";
                $('#profile-session-stats').html(user.session_count + text);

                text = user.recording_count > 1 || user.recording_count == 0 ? " Recordings" : " Recording";
                $('#profile-recording-stats').html(user.recording_count + text);

                //$('#profile-biography').html(user.biography);
            }
            else {

            }
        }

        function initialize() {
            var screenBindings = {
                'beforeShow': beforeShow,
                'afterShow': afterShow
            };
            app.bindScreen('profile', screenBindings);
        }

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

 })(window,jQuery);