diff options
Diffstat (limited to 'assets/js/user_profile.js')
| -rw-r--r-- | assets/js/user_profile.js | 146 |
1 files changed, 131 insertions, 15 deletions
diff --git a/assets/js/user_profile.js b/assets/js/user_profile.js index c28cb8d..cc9cab7 100644 --- a/assets/js/user_profile.js +++ b/assets/js/user_profile.js @@ -1,8 +1,15 @@ function main(){ - //Constants and Globals - var MESSAGE_COUNT = 8; // Number of message per page in inbox + // Inbox Constants and Globals + var INBOX_MESSAGE_COUNT = 8; // Number of message per page in inbox var CURRENT_INBOX_PAGE = 1; + // CommentsConstants and Globals + var COMMENT_MESSAGE_COUNT = 4; // Number of message per page in comments + var CURRENT_COMMENT_PAGE = 1; + var COMMENT_BOX; // {commentCount : int, commentList : array} + var COMMENT_PAGES = {}; // {pgNum : commentList} + var COMMENT_COUNT; + // User-profile dynamic paging var items = [ $("#profile-general"), @@ -17,45 +24,66 @@ function main(){ }); } - function generatePager(mailCount){ - var pageCount = Math.ceil(mailCount/MESSAGE_COUNT); + // Helper functions: Inbox paging + + /* Create the Previous and Next Directional controllers for + * First calculate the page count, then set up controllers accordingly. + * Pre-condition: Type takes on values: 'inbox', 'comments'*/ + function generatePager(count, type){ + var currentPage; + var pageCount; + var $pageNumber; + var $uPager; + var directionType = type; + + if(type == 'inbox'){ + currentPage = CURRENT_INBOX_PAGE; + pageCount = Math.ceil(count/INBOX_MESSAGE_COUNT); + $pageNumber = $('#u-inbox-page-number'); + $uPager = $("#u-inbox-pager"); + }else{ + currentPage = CURRENT_COMMENT_PAGE; + pageCount = Math.ceil(count/COMMENT_MESSAGE_COUNT); + $pageNumber = $('#u-comment-page-number'); + $uPager = $("#u-comment-pager"); + } + if(pageCount > 1){ // State current page - $('#u-pageNumber').empty().append(CURRENT_INBOX_PAGE + ' of ' + pageCount) + $pageNumber.empty().append(currentPage + ' of ' + pageCount) .addClass('u-pagination'); - var $uPager = $("#u-pager"); $uPager.empty(); var $pager = $('<div>').addClass('u-pagination'); $uPager.append($pager); var $previous = $("<h5>").append('< Previous') - .attr('id', 'u-previous') + .attr('id', 'u-previous-' + directionType) .addClass('u-change-page'); var $next = $("<h5>").append('Next >') - .attr('id', 'u-next') + .attr('id', 'u-next-' + directionType) .addClass('u-change-page'); - if(CURRENT_INBOX_PAGE == 1){ + if(currentPage == 1){ $pager.append($next); - }else if(CURRENT_INBOX_PAGE == pageCount){ + }else if(currentPage == pageCount){ $pager.append($previous); }else{ $pager.append($previous); $pager.append(' | '); $pager.append($next); - } } } + /* Request inbox from server, then create inbox in DOM, call generatePager */ function generateInbox(pageNum){ $.ajax({ dataType: "json", - url: '/user/user_profile/inbox/' + MESSAGE_COUNT + '/' + pageNum, + url: '/user/user_profile/inbox/' + INBOX_MESSAGE_COUNT + '/' + pageNum, success: function(mailbox){ @@ -152,17 +180,95 @@ function main(){ }); // Generate Pager - generatePager(mailCount); + generatePager(mailCount, 'inbox'); + } + }); + } + + /* Request comment history for user from server, call create comments */ + function generateComments(pageNum){ + $.ajax({ + dataType: "json", + url: '/user/user_profile/comments/' + COMMENT_MESSAGE_COUNT + '/' + pageNum, + success: function(commentbox){ + COMMENT_BOX = commentbox; // Load comments into box + COMMENT_COUNT = commentbox.commentCount; + commentPageCreation(); } }); } + /* Create comment DOM elements */ + function createCommentDOM(){ + var commentList = COMMENT_PAGES['page_' + CURRENT_COMMENT_PAGE]; + var $commentContainer = $('#u-comment-container'); + $commentContainer.empty(); + + // If Page does not exist add an error prompt in DOM + if(!commentList){ + var $pageNotFound = $('<h5>').text('Page does not Exist'); + $commentContainer.append($pageNotFound); + return + } + + commentList.forEach(function(comment){ + // Parse date: + var date = comment.date.split(' '); + var datePrint = date[0] + ' ' + date[1] + ' ' + date[2]; + + var $commentContent = $('<div>').addClass('u-comment-block'); + var $date = $('<h6>').text(datePrint + ', ').addClass('u-comment-elem'); + var $course = $('<h6>').text(comment.course_code+ ', ').addClass('u-comment-elem'); + var $term = $('<h6>').text(comment.term+ ', ').addClass('u-comment-elem'); + var $year = $('<h6>').text(comment.year).addClass('u-comment-elem'); + var $comment= $('<em>').text(comment.comment).addClass('u-comment-style'); + + $commentContent.append($course).append($date).append($term).append($year).append($('<p>').append($comment)); + $commentContainer.append($commentContent); + + generatePager(COMMENT_COUNT, 'comments'); + }); + } + + /* Set up Comment Pages attribute for comment DOM creation*/ + function commentPageCreation(){ + console.log('in comment creation'); + var commentCount = COMMENT_BOX.commentCount; + var commentList = COMMENT_BOX.commentList; + var pageCount = Math.ceil(commentCount/COMMENT_MESSAGE_COUNT); + + console.log('CommentCount: ' + commentCount); + console.log('pageCount: ' + pageCount); + + + //Sort comments by ascended order + commentList.sort(function(a,b){ + return new Date(a.date).getTime() - new Date(b.date).getTime() + }); + + // For each page + for(var i = 1; i <= pageCount; i++){ + COMMENT_PAGES[('page_' + i)] = []; + // Create 10 rows for comments or until max length is reached + var j = 1; + while((j <= COMMENT_MESSAGE_COUNT) && (commentList.length > 0)){ + COMMENT_PAGES[('page_' + i)].push(commentList.pop()); + j++; + } + } + + // Create commentDom + createCommentDOM(); + //console.log(COMMENT_PAGES); + } + // Hide all pages at load hidePages(); // Show General page items[0].show(); + // Navigate pages in profile (i.e. profile, comments, follows, inbox, etc.) $('.nav-o').bind('click', function(e){ e.preventDefault(); @@ -180,6 +286,7 @@ function main(){ break; case "nav-comments": $("#profile-comments").show(); + generateComments(CURRENT_COMMENT_PAGE); break; case "nav-inbox": $("#profile-inbox").show(); @@ -196,14 +303,23 @@ function main(){ var direction = $(this).attr('id'); switch(direction){ - case 'u-previous': + case 'u-previous-inbox': CURRENT_INBOX_PAGE--; generateInbox(CURRENT_INBOX_PAGE); break; - case 'u-next': + case 'u-next-inbox': CURRENT_INBOX_PAGE++; generateInbox(CURRENT_INBOX_PAGE); break; + case 'u-previous-comments': + CURRENT_COMMENT_PAGE--; + createCommentDOM(); + break; + case 'u-next-comments': + CURRENT_COMMENT_PAGE++; + createCommentDOM(); + break; + default: console.log('Direction not found'); } |