From 83f233a7fe270dc77893c2df590b2e28ba30fc41 Mon Sep 17 00:00:00 2001
From: HumairAK <humair88@hotmail.com>
Date: Sat, 27 Aug 2016 15:43:07 -0400
Subject: Added more inbox functionality for paging

---
 assets/css/user_profile.css |  18 +++--
 assets/js/script.js         |   1 -
 assets/js/user_profile.js   | 166 +++++++++++++++++++++++++++++++++++++++++++-
 node_simple.js              |  26 -------
 routes/user.js              |  22 +++---
 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('&times;');
+
+                    $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 3717be4..9b5f0fb 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">&times;</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>
 
 
-- 
cgit v1.2.3