diff options
| -rw-r--r-- | assets/css/user_profile.css | 18 | ||||
| -rw-r--r-- | assets/js/script.js | 1 | ||||
| -rw-r--r-- | assets/js/user_profile.js | 166 | ||||
| -rw-r--r-- | node_simple.js | 26 | ||||
| -rw-r--r-- | routes/user.js | 22 | ||||
| -rw-r--r-- | views/user_profile_alt.hbs | 42 |
6 files changed, 194 insertions, 81 deletions
diff --git a/assets/css/user_profile.css b/assets/css/user_profile.css index 042d842..fb35bb0 100644 --- a/assets/css/user_profile.css +++ b/assets/css/user_profile.css @@ -11,7 +11,6 @@ box-shadow: 2px 4px 5px 0 rgba(0,0,0,0.1); text-align: left; font-family: 'Roboto', sans-serif; - } .u-title h1{ @@ -134,10 +133,7 @@ nav .nav-o:hover .nav-o-container{ color: #737373; } - /* Inbox */ - - .u-table-row { display:table-row; cursor: pointer; @@ -146,5 +142,19 @@ nav .nav-o:hover .nav-o-container{ background-color: #ededed; } +/* Inbox Popups */ +.u-main .modal-content{ + padding: 0 20px 0 20px; +} + +/* Inbox paging */ +.u-pagination{ + text-align: center; +} + +.u-change-page{ + display: inline; + cursor: pointer; +} /*** USER PROFILE PAGE END ***/
\ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index 7a4c21f..0881ac6 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -25,6 +25,5 @@ function main(){ $('.table-row').trigger('create'); - } $(document).ready(main);
\ No newline at end of file diff --git a/assets/js/user_profile.js b/assets/js/user_profile.js index c26299b..c28cb8d 100644 --- a/assets/js/user_profile.js +++ b/assets/js/user_profile.js @@ -1,4 +1,8 @@ function main(){ + //Constants and Globals + var MESSAGE_COUNT = 8; // Number of message per page in inbox + var CURRENT_INBOX_PAGE = 1; + // User-profile dynamic paging var items = [ $("#profile-general"), @@ -6,12 +10,153 @@ function main(){ $("#profile-comments"), $("#profile-inbox")]; + // Helper functions function hidePages(){ items.forEach(function(item){ item.hide(); }); } + function generatePager(mailCount){ + var pageCount = Math.ceil(mailCount/MESSAGE_COUNT); + if(pageCount > 1){ + + // State current page + $('#u-pageNumber').empty().append(CURRENT_INBOX_PAGE + ' 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') + .addClass('u-change-page'); + var $next = $("<h5>").append('Next >') + .attr('id', 'u-next') + .addClass('u-change-page'); + + if(CURRENT_INBOX_PAGE == 1){ + $pager.append($next); + }else if(CURRENT_INBOX_PAGE == pageCount){ + $pager.append($previous); + }else{ + $pager.append($previous); + $pager.append(' | '); + $pager.append($next); + + } + } + } + + function generateInbox(pageNum){ + $.ajax({ + dataType: "json", + url: '/user/user_profile/inbox/' + MESSAGE_COUNT + '/' + pageNum, + success: function(mailbox){ + + + var inbox = mailbox.mail; + var mailCount = mailbox.mailCount; + var uInboxCount = $('#u-inbox-count'); + + uInboxCount.empty().append('You have ' + mailCount + + ' messages in your inbox.'); + + // For inbox table body + var $InboxBody = $('#u-inbox-body'); + + // For table modal op up windows + var $InboxContainer = $('#u-inbox-container'); + + $InboxBody.empty(); + + var windowCounter = 0; + inbox.forEach(function(message){ + + //create row + var $row = $('<tr>'); + $row.addClass('u-table-row'); + $row.attr('data-toggle', 'modal'); + $row.attr('data-target', '#popup' + windowCounter); + $row.attr('type', 'button'); + + //create cells in row + var $date = $('<td>').text(message.date); + var $subject = $('<td>').text(message.subject); + var $sender = $('<td>').text(message.sender); + + //append cells to row + $row.append($date); + $row.append($subject); + $row.append($sender); + + + //append row to body + $InboxBody.append($row); + + //Create modal pop up + var $modalFade = $('<article>') + .addClass('modal') + .addClass('fade') + .attr('id', 'popup' + String(windowCounter)); + var $modalDialog = $('<div>').addClass('modal-dialog'); + var $modalContent = $('<div>').addClass('modal-content'); + var $modalHeader = $('<section>').addClass('modal-header'); + var $modalButton = $('<button>') + .addClass('close') + .attr('type', 'button') + .attr('data-dismiss', 'modal'); + + + var $modalTitle = $('<h4>') + .addClass('modal-title'); + var $emphasisSubject = $('<em>').text('Subject: '); + + var $headerFrom = $('<h5>'); + var $emphasisFrom = $('<em>').text('From: '); + var $emphasisDate = $('<em>').text('Date: '); + + var $modalBody = $('<section>'); + var $modalFooter = $('<div>').addClass('modal-footer'); + + $InboxContainer.append($modalFade); + $modalFade.append($modalDialog); + $modalDialog.append($modalContent); + $modalContent.append($modalHeader); + $modalContent.append($modalBody); + $modalContent.append($modalFooter); + + $modalButton.append('×'); + + $modalTitle.append($emphasisSubject); + $modalTitle.append(message.subject); + + $headerFrom.append($emphasisFrom); + $headerFrom.append(message.sender); + + $emphasisDate.text('Date: '); + + $modalHeader.append($modalButton); + $modalHeader.append($modalTitle); + $modalHeader.append($headerFrom); + $modalHeader.append($emphasisDate); + $modalHeader.append(message.date); + + $modalBody.append(message.message); + + windowCounter++; + }); + + // Generate Pager + generatePager(mailCount); + } + }); + } + // Hide all pages at load hidePages(); @@ -38,17 +183,32 @@ function main(){ break; case "nav-inbox": $("#profile-inbox").show(); + generateInbox(1); // generate inbox messages for page 1 break; default: console.log("Error: User page not found"); } }); + // Inbox Pager (Located at bottom of inbox in html) + $('.u-main').on('click', 'h5.u-change-page', function(){ + console.log('clicked'); + var direction = $(this).attr('id'); - + switch(direction){ + case 'u-previous': + CURRENT_INBOX_PAGE--; + generateInbox(CURRENT_INBOX_PAGE); + break; + case 'u-next': + CURRENT_INBOX_PAGE++; + generateInbox(CURRENT_INBOX_PAGE); + break; + default: + console.log('Direction not found'); + } + }); } - - $(document).ready(main);
\ No newline at end of file diff --git a/node_simple.js b/node_simple.js index 7ff70c6..0b39620 100644 --- a/node_simple.js +++ b/node_simple.js @@ -1366,29 +1366,3 @@ exports.removeToken = function(token, callback) { }; - -/** - * Check if the user with the given username has mail. - * If the user does, then send the mail that falls within the specified page range. - * - * @param {object} username object - * @param {function} callback of the form (<boolean1>, <boolean2>, <array of objects>, <string>) - * - callback(error, success, mail, message) - * */ -exports.getMail = function (username, callback) { - - var mail = db.collection('mail'); - - mail.find({receiver: username}).toArray(function (err, data) { - if (err) { - callback(false, true, null, 'Error: could not retrieve inbox messages.'); - } else if (!data) { - callback(false, false, null, 'No inbox.'); - } else { - // Mail retrieved - callback(true, false, data, 'Retrieved inbox'); - } - - }); - -}; diff --git a/routes/user.js b/routes/user.js index 6c53989..849ebb6 100644 --- a/routes/user.js +++ b/routes/user.js @@ -136,6 +136,7 @@ router.get('/user_profile', loggedIn, isUser, function(req, res, next) { /** * Serve mail messages for page pageNum with messageCount messages as a JSON object + * mail is sorted by date. */ router.get('/user_profile/inbox/:messageCount/:pageNum', loggedIn, isUser, function(req, res, next) { @@ -182,13 +183,11 @@ router.get('/user_profile/inbox/:messageCount/:pageNum', loggedIn, isUser, funct var index = (pageNum - 1) * messageCount; var indexMax = index + messageCount; var inboxLength = inbox.length; - var count = 0; - /* Testing Purposes - var notification = "index = " + index + "\n" + - "indexMax = " + indexMax + "\n" + - "inboxLength = " + inbox.length + "\n"; - console.log(notification); */ + // Consider a more efficient alternative to sorting mail + inbox.sort(function(b,a){ + return new Date(a.date).getTime() - new Date(b.date).getTime() + }); // Find the 10 messages situated at page num in inbox, store in mail if(index >= inboxLength){ @@ -202,14 +201,17 @@ router.get('/user_profile/inbox/:messageCount/:pageNum', loggedIn, isUser, funct while((index < inboxLength) && (index < indexMax)){ mail.push(inbox[index]); index++; - count++; - console.log("in while: " + count); } } // return mail JSON object :: JSON.stringify({json}); - var mailJSON = JSON.stringify(mail); - res.end(mailJSON); + var mailbox = { + mailCount : inboxLength, + mail : mail + }; + var mailboxJSON = JSON.stringify(mailbox); + + res.end(mailboxJSON); }); }); diff --git a/views/user_profile_alt.hbs b/views/user_profile_alt.hbs index 8cc45b8..f04d094 100644 --- a/views/user_profile_alt.hbs +++ b/views/user_profile_alt.hbs @@ -125,10 +125,10 @@ <!-- Inbox page --> <section class="u-profile" id="profile-inbox"> <h4>Inbox </h4> - <hr> + <h5 id="u-inbox-count"></h5> {{# if inbox }} - <div class="col-sm-12"> + <div class="col-sm-12" id="u-inbox-container"> <table class="table table-striped u-table"> <thead> <tr> @@ -137,47 +137,15 @@ <th>Sender</th> </tr> </thead> - <tbody> - {{# each inbox }} - <tr class="u-table-row" data-toggle="modal" data-target=".{{ this.class }}"> - <td>{{ this.date }}</td> - <td>{{ this.subject }}</td> - <td>{{ this.sender }}</td> - </tr> - {{/each}} + <tbody id="u-inbox-body"> </tbody> </table> - - - - {{# each inbox}} - <article class="modal fade {{this.class}}"> - <div class="modal-dialog"> - <div class="modal-content"> - - <section class="modal-header"> - <button type="button" class="close" data-dismiss="modal">×</button> - <h4 class="modal-title"><em>Subject: </em>{{ this.subject }}</h4> - <h5><em>From: </em>{{ this.sender }}</h5> - <em>Date: </em> {{this.date}} - </section> - - <section class="modal-body"> - {{ this.message }} - </section> - - <div class="modal-footer"> - - </div> - - </div> - </div> - </article> - {{/each}} </div> {{ else }} <h3>No Messages.</h3> {{/if}} + <div id="u-pageNumber"></div> + <div id="u-pager"></div> </section> |