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

(function(context,$) {

    "use strict";

    context.JK = context.JK || {};
    context.JK.Sidebar = function(app) {
        var logger = context.JK.logger;
        var friends = [];
        var invitationDialog = new context.JK.InvitationDialog(app);
        var rest = context.JK.Rest();

        function initializeFriendsPanel() {

            /////////////////////////////////////////////////////////////
            // THIS IS TEST CODE TO GENERATE BACK TO BACK NOTIFICATIONS
            // app.notify({
            //   "title": "TEST 1",
            //   "text": "Test 1",
            //   "icon_url": context.JK.resolveAvatarUrl("")
            // });

            // app.notify({
            //   "title": "TEST 2",
            //   "text": "Test 2",
            //   "icon_url": context.JK.resolveAvatarUrl("")
            // });

            // app.notify({
            //   "title": "TEST 3",
            //   "text": "Test 3",
            //   "icon_url": context.JK.resolveAvatarUrl("")
            // });
            /////////////////////////////////////////////////////////////

            $('#sidebar-search-header').hide();

            var url = "/api/users/" + context.JK.currentUserId + "/friends"
            $.ajax({
                type: "GET",
                dataType: "json",
                contentType: 'application/json',
                url: url,
                processData: false,
                success: function(response) {

                    friends = response;
                    updateFriendList(response);

                    // set friend count
                    $('#sidebar-friend-count').html(response.length);
                },
                error: app.ajaxError
            });

            return false;
        }

        function updateFriendList(response) {
            $('#sidebar-friend-list li:not(.invite-friend-row').remove();

            // show online friends first (sort by first name within online/offline groups)
            response.sort(function(a, b) {

                var a_online = a.online;
                var b_online = b.online;

                var a_firstname = a.first_name.toLowerCase();
                var b_firstname = b.first_name.toLowerCase();

                if (b_online != a_online) {
                    if (b_online < a_online) return -1;
                    if (b_online > a_online) return 1;
                    return 0;
                }

                if (a_firstname < b_firstname) return -1;
                if (a_firstname > b_firstname) return 1;
                return 0;
            });

            $.each(response, function(index, val) {

                var css = val.online ? '' : 'offline';

                friends[val.id] = val;

                // fill in template for Connect pre-click
                var template = $('#template-friend-panel').html();
                var searchResultHtml = context.JK.fillTemplate(template, {
                    userId: val.id,
                    cssClass: css,
                    avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
                    userName: val.name,
                    status: val.online ? 'Available' : 'Offline',
                    extra_info: '',
                    info_image_url: ''
                });

                $('#sidebar-friend-list li.invite-friend-row').before(searchResultHtml);
            });
        }

        function initializeNotificationsPanel() {
            // retrieve pending notifications for this user
            var url = "/api/users/" + context.JK.currentUserId + "/notifications"
            $.ajax({
                type: "GET",
                dataType: "json",
                contentType: 'application/json',
                url: url,
                processData: false,
                success: function(response) {
                    
                    updateNotificationList(response);

                    // set notification count
                    $('#sidebar-notification-count').html(response.length);
                },
                error: app.ajaxError
            });
        }

        function updateNotificationList(response) {
            $('#sidebar-notification-list').empty();

            $.each(response, function(index, val) {

                // fill in template for Connect pre-click
                var template = $('#template-notification-panel').html();
                var notificationHtml = context.JK.fillTemplate(template, {
                    notificationId: val.notification_id,
                    avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
                    text: val.formatted_msg,
                    date: context.JK.formatDate(val.created_at)
                });

                $('#sidebar-notification-list').append(notificationHtml);

                // val.description contains the notification record's description value from the DB (i.e., type)
                initializeActions(val, val.description);
            });
        }

        function initializeActions(payload, type) {

            var $notification = $('li[notification-id=' + payload.notification_id + ']');

            // wire up "x" button to delete notification
            $notification.find('#img-delete-notification').click(deleteNotificationHandler);
            if (type === context.JK.MessageType.FRIEND_REQUEST) {
                var $action_btn = .find('#btn-notification-action');
                $action_btn.text('ACCEPT');
                $action_btn.click(function() {
                    acceptFriendRequest({ "friend_request_id": payload.friend_request_id, "notification_id": payload.notification_id });
                });
            }
            else if (type === context.JK.MessageType.FRIEND_REQUEST_ACCEPTED) {
                $notification.find('#div-actions').hide();
            }
            else if (type === context.JK.MessageType.SESSION_INVITATION) {
                var $action_btn = $notification.find('#btn-notification-action');
                $action_btn.text('JOIN');
                $action_btn.click(function() {
                    joinSession({ "session_id": payload.session_id, "notification_id": payload.notification_id });
                });
            }
        }

        function deleteNotificationHandler(evt) {
            evt.stopPropagation();
            var notificationId = $(this).attr('notification-id');
            deleteNotification(notificationId);   
        }

        function deleteNotification(notificationId) {
            var url = "/api/users/" + context.JK.currentUserId + "/notifications/" + notificationId;
            $.ajax({
                type: "DELETE",
                dataType: "json",
                contentType: 'application/json',
                url: url,
                processData: false,
                success: function(response) {
                    $('li[notification-id=' + notificationId + ']').hide();
                    decrementNotificationCount();
                },
                error: app.ajaxError
            });
        }

        function initializeChatPanel() {
        }

        function search(query) {

            logger.debug('query=' + query);
            if (query !== '') {
                context.JK.search(query, app, onSearchSuccess);
            }
        }

        function onSearchSuccess(response) {

            // TODO: generalize this for each search result type (band, musician, recordings, et. al.)
            $.each(response.musicians, function(index, val) {
                // fill in template for Connect pre-click
                var template = $('#template-sidebar-search-result').html();
                var searchResultHtml = context.JK.fillTemplate(template, {
                    userId: val.id, 
                    avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
                    profile_url: "/#/profile/" + val.id,
                    userName: val.name,
                    location: val.location
                });

                $('#sidebar-search-results').append(searchResultHtml);

                // fill in template for Connect post-click
                template = $('#template-sidebar-invitation-sent').html();
                var invitationSentHtml = context.JK.fillTemplate(template, {
                    userId: val.id,
                    first_name: val.first_name,
                    profile_url: "/#/profile/" + val.id
                });

                $('#sidebar-search-results').append(invitationSentHtml);

                // initialize visibility of the divs
                $('div[layout=sidebar] div[user-id=' + val.id + '].sidebar-search-connected').hide();
                $('div[layout=sidebar] div[user-id=' + val.id + '].sidebar-search-result').show();

                // wire up button click handler if search result is not a friend or the current user
                if (!val.is_friend && val.id !== context.JK.currentUserId) {
                    $('div[layout=sidebar] div[user-id=' + val.id + ']').find('.btn-connect-friend').click(sendFriendRequest);
                }
                // hide the button if the search result is already a friend
                else {
                    $('div[layout=sidebar] div[user-id=' + val.id + ']').find('.btn-connect-friend').hide();
                }
            });

            // show header
            $('#sidebar-search-header').show();

            // hide panels
            $('[layout-panel="contents"]').hide();
            $('[layout-panel="contents"]').css({"height": "1px"});

            // resize search results area
            $('#sidebar-search-results').height(getHeight() + 'px');
        }

        function getHeight() {
            // TODO: refactor this - copied from layout.js
            var sidebarHeight = $(context).height() - 75 - 2 * 60 + $('[layout-sidebar-expander]').height();
            var combinedHeaderHeight = $('[layout-panel="contents"]').length * 36;
            var searchHeight = $('.sidebar .search').first().height();
            var expanderHeight = $('[layout-sidebar-expander]').height();
            var expandedPanelHeight = sidebarHeight - (combinedHeaderHeight + expanderHeight + searchHeight);
            return expandedPanelHeight;
        }

        function showFriendsPanel() {

            var $expandedPanelContents = $('[layout-id="panelFriends"] [layout-panel="contents"]');
            var expandedPanelHeight = getHeight();

            // hide all other contents
            $('[layout-panel="contents"]').hide();
            $('[layout-panel="contents"]').css({"height": "1px"});

            // show the appropriate contens
            $expandedPanelContents.show();
            $expandedPanelContents.animate({"height": expandedPanelHeight + "px"}, 400);
        }

        function friendRequestCallback(userId) {
            // toggle the pre-click and post-click divs
            $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-connected').show();
            $('div[layout=sidebar] div[user-id=' + userId + '].sidebar-search-result').hide();
        }

        function sendFriendRequest(evt) {
            evt.stopPropagation();
            var userId = $(this).parent().attr('user-id');
            context.JK.sendFriendRequest(app, userId, friendRequestCallback);
        }

        function hideSearchResults() {
            emptySearchResults();
            $('#search-input').val('');
            $('#sidebar-search-header').hide();
            showFriendsPanel();
        }

        function emptySearchResults() {
            $('#sidebar-search-results').empty();
            $('#sidebar-search-results').height('0px');
        }

        function incrementNotificationCount() {
            var count = parseInt($('#sidebar-notification-count').html());
            $('#sidebar-notification-count').html(count + 1);
        }

        function decrementNotificationCount() {
            var count = parseInt($('#sidebar-notification-count').html());
            if (count === 0) {
                $('#sidebar-notification-count').html(0);
            }
            else {
                $('#sidebar-notification-count').html(count - 1);
            }
        }

        function acceptFriendRequest(args) {

            rest.acceptFriendRequest({
                status : 'accept',
                friend_request_id : args.friend_request_id
            }).done(function(response) {
                    deleteNotification(args.notification_id);  // delete notification corresponding to this friend request
                    initializeFriendsPanel();  // refresh friends panel when request is accepted
            }).error(app.ajaxError);
        }

        function joinSession(args) {
            context.location = "#/session/" + args.session_id;
            deleteNotification(args.notification_id);
        }

        // default handler for incoming notification
        function handleNotification(payload, type) {
            var sidebarText;
            if (type === context.JK.MessageType.SESSION_INVITATION) {
                sidebarText = payload.sender_name + " has invited you to a session.";
            }
            else {
                sidebarText = payload.msg;
            }

            incrementNotificationCount();

            var template = $("#template-notification-panel").html();
            var notificationHtml = context.JK.fillTemplate(template, {
                notificationId: payload.notification_id,
                avatar_url: context.JK.resolveAvatarUrl(payload.photo_url),
                text: sidebarText,
                date: context.JK.formatDate(payload.created_at)
            });

            $('#sidebar-notification-list').prepend(notificationHtml);

            initializeActions(payload, type);
        }

        var delay = (function(){
            var timer = 0;
            return function(callback, ms) {
                clearTimeout(timer);
                timer = setTimeout(callback, ms);
            };
        })();


        function inviteHoverIn() {
            $('.invitation-button-holder').slideDown();
        }

        function inviteHoverOut() {
            $('.invitation-button-holder').slideUp();
        }

        function events() {
            $('#search-input').keyup(function(evt) {
                delay(function() {
                    // ENTER KEY
                    if (evt.which === 13) {
                        return hideSearchResults();
                    }

                    // ESCAPE KEY
                    if (evt.which === 27) {
                        return hideSearchResults();
                    }

                    var query = $('#search-input').val();
                    logger.debug("query=" + query);

                    if (query === '') {
                        return hideSearchResults();
                    }

                    if (query.length > 2) {
                        emptySearchResults();
                        search(query);
                    }
                }, 1000);
            });

            $('#sidebar-search-expand').click(function(evt) {
                $('#searchForm').submit();
                hideSearchResults();
            });

            $('.sidebar .invite-friend-row').hoverIntent(inviteHoverIn, inviteHoverOut);

            // $('#sidebar-div').mouseleave(function(evt) {
            //     hideSearchResults();
            // });

            // wire up FRIEND_UPDATE handler
            context.JK.JamServer.registerMessageCallback(context.JK.MessageType.FRIEND_UPDATE, function(header, payload) {
                logger.debug("Handling FRIEND_UPDATE msg " + JSON.stringify(payload));

                // update friends panel in sidebar
                friends[payload.user_id].online = payload.online;
                updateFriendList(friends);

                // display notification
                var online_text = payload.online ? "online" : "offline";
                app.notify({
                  "title": "Friend is now " + online_text,
                  "text": payload.msg,
                  "icon_url": context.JK.resolveAvatarUrl(payload.photo_url)
                });
            });
            //////////////////////////////////////////////////////////////

            // wire up FRIEND_REQUEST handler
            context.JK.JamServer.registerMessageCallback(context.JK.MessageType.FRIEND_REQUEST, function(header, payload) {
                logger.debug("Handling FRIEND_REQUEST msg " + JSON.stringify(payload));

                handleNotification(payload, header.type);

                // display notification
                app.notify({
                  "title": "New Friend Request",
                  "text": payload.msg,
                  "icon_url": context.JK.resolveAvatarUrl(payload.photo_url)
                  },
                  {
                    "ok_text": "ACCEPT",
                    "ok_callback": acceptFriendRequest,
                    "ok_callback_args": { "friend_request_id": payload.friend_request_id, "notification_id": payload.notification_id }
                  }
                );
            });
            //////////////////////////////////////////////////////////////

            // wire up FRIEND_REQUEST_ACCEPTED handler
            context.JK.JamServer.registerMessageCallback(context.JK.MessageType.FRIEND_REQUEST_ACCEPTED, function(header, payload) {
                logger.debug("Handling FRIEND_REQUEST_ACCEPTED msg " + JSON.stringify(payload));

                handleNotification(payload, header.type);

                // refresh friends panel
                initializeFriendsPanel();

                // display notification
                app.notify({
                  "title": "Friend Request Accepted",
                  "text": payload.msg,
                  "icon_url": context.JK.resolveAvatarUrl(payload.photo_url)
                });
            });
            //////////////////////////////////////////////////////////////

            // wire up MUSICIAN_SESSION_JOIN handler
            context.JK.JamServer.registerMessageCallback(context.JK.MessageType.MUSICIAN_SESSION_JOIN, function(header, payload) {
                logger.debug("Handling MUSICIAN_SESSION_JOIN msg " + JSON.stringify(payload));

                // display notification
                app.notify({
                  "title": "Musician Joined Session",
                  "text": payload.username + " has joined the session.",
                  "icon_url": context.JK.resolveAvatarUrl(payload.photo_url)
                });
            });
            //////////////////////////////////////////////////////////////

            // wire up MUSICIAN_SESSION_DEPART handler
            context.JK.JamServer.registerMessageCallback(context.JK.MessageType.MUSICIAN_SESSION_DEPART, function(header, payload) {
                logger.debug("Handling MUSICIAN_SESSION_DEPART msg " + JSON.stringify(payload));

                // display notification
                app.notify({
                  "title": "Musician Left Session",
                  "text": payload.username + " has left the session.",
                  "icon_url": context.JK.resolveAvatarUrl(payload.photo_url)
                });
            });
            //////////////////////////////////////////////////////////////

            // wire up MUSICIAN_SESSION_DEPART handler
            context.JK.JamServer.registerMessageCallback(context.JK.MessageType.FRIEND_SESSION_JOIN, function(header, payload) {
                logger.debug("Handling FRIEND_SESSION_JOIN msg " + JSON.stringify(payload));

                // display notification
                app.notify({
                  "title": "Friend Joined Session",
                  "text": payload.username + " has joined a session.",
                  "icon_url": context.JK.resolveAvatarUrl(payload.photo_url)
                });
            });
            //////////////////////////////////////////////////////////////

             // wire up SESSION_INVITATION handler
            context.JK.JamServer.registerMessageCallback(context.JK.MessageType.SESSION_INVITATION, function(header, payload) {
                logger.debug("Handling SESSION_INVITATION msg " + JSON.stringify(payload));

                handleNotification(payload, header.type);

                var participants = [];
                rest.getSession(payload.session_id).done(function(response) {
                    $.each(response.participants, function(index, val) {
                        logger.debug(val.user.photo_url + "," + val.user.name);
                        participants.push({"photo_url": val.user.photo_url, "name": val.user.name});
                    });
                }).error(app.ajaxError);

                var participantHtml = "You have been invited to join a session with: <br/><br/>";
                participantHtml += "<table><tbody>";

                $.each(participants, function(index, val) {
                    if (index < 4) {
                     participantHtml += "<tr><td><img class='avatar-small' src='" + val.photo_url + "' /></td><td>" + val.name + "</td></tr>";
                    }
                });

                participantHtml += "</tbody></table>";

                // display notification
                app.notify({
                    "title": "Session Invitation",
                    "text": participantHtml
                  },
                  {
                    "ok_text": "JOIN SESSION",
                    "ok_callback": joinSession,
                    "ok_callback_args": { "session_id": payload.session_id, "notification_id": payload.notification_id }
                  }
                );
            });
            //////////////////////////////////////////////////////////////

            // watch for Invite More Users events
            $('#sidebar-div .btn-email-invitation').click(function() {
                invitationDialog.showEmailDialog();
            });

            $('#sidebar-div .btn-gmail-invitation').click(function() {
                invitationDialog.showGoogleDialog();
            });
        }

        this.initialize = function() {
            events();
            initializeFriendsPanel();
            initializeChatPanel();
            initializeNotificationsPanel();
        };
    };
})(window,jQuery);