added some user profile inbox functionality

4 files changed, 80 insertions, 3 deletions

diff --git a/assets/css/user_profile.css b/assets/css/user_profile.css
index 39d86b0..042d842 100644
--- a/assets/css/user_profile.css
+++ b/assets/css/user_profile.css
@@ -1,4 +1,4 @@
-/*** USER PROFILE PAGE  ***/
+        /*** USER PROFILE PAGE  ***/
 
 .user-info-content img{
     max-width: 120px;
@@ -135,5 +135,16 @@ nav .nav-o:hover .nav-o-container{
 }
 
 
+/* Inbox */
+
+
+.u-table-row {
+    display:table-row;
+    cursor: pointer;
+}
+.u-table tbody tr:hover{
+    background-color: #ededed;
+}
+
 
 /*** USER PROFILE PAGE END ***/
\ No newline at end of file
diff --git a/assets/js/user_profile.js b/assets/js/user_profile.js
index 73c7897..c26299b 100644
--- a/assets/js/user_profile.js
+++ b/assets/js/user_profile.js
@@ -42,5 +42,13 @@ function main(){
             default:
                 console.log("Error: User page not found");
         }
-    });}
+    });
+
+
+
+
+}
+
+
+
 $(document).ready(main);
\ No newline at end of file
diff --git a/routes/user.js b/routes/user.js
index bd5efb9..3717be4 100644
--- a/routes/user.js
+++ b/routes/user.js
@@ -157,6 +157,14 @@ router.get('/user_profile/inbox/:messageCount/:pageNum', loggedIn, isUser, funct
                     req.user.messages = inbox.length; // Give user message length
                     console.log("Success: " + message);
 
+                    // needed to display in layout (used for modal popup classes)
+                    var i = 0;
+                    inbox.forEach(function(element) {
+                        element.class = i;
+                        i ++;
+                    });
+
+
                     resolve(1);
                 } else if (error) {
                     // Need to redirect to an error page instead.
diff --git a/views/user_profile_alt.hbs b/views/user_profile_alt.hbs
index 8ca5597..8cc45b8 100644
--- a/views/user_profile_alt.hbs
+++ b/views/user_profile_alt.hbs
@@ -127,7 +127,57 @@
                     <h4>Inbox </h4>
 
                     <hr>
-                    <p>[PlaceHolder]</p>
+                    {{# if inbox }}
+                        <div class="col-sm-12">
+                            <table class="table table-striped u-table">
+                                <thead>
+                                <tr>
+                                    <th>Date</th>
+                                    <th>Subject</th>
+                                    <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>
+                            </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}}
                 </section>