display messages

3 files changed, 63 insertions, 1 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 62842fd..24ed78e 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -349,6 +349,33 @@ tr:nth-child(odd) td.comment { background-color: #fcf8f8; }
 #boxes td {
   padding: 3px;
 }
+
+#message {
+  text-align: left;
+  max-width: 500px;
+  margin: 0 auto;
+}
+#message .av {
+  float: left;
+  margin-right: 10px;
+}
+#message span {
+  display: inline-block;
+  line-height: 14px;
+  margin-top: 7px;
+}
+#message .subject {
+  font-weight: bold;
+  font-size: 15px;
+}
+#message hr {
+  clear: both;
+}
+#message .body {
+  font-size: 12px;
+  line-height: 15px;
+  padding: 20px;
+}
 @media (max-width: 1024px) {
   #threads td:nth-child(3) small {
     display: none;
diff --git a/public/assets/js/lib/router.js b/public/assets/js/lib/router.js
index 0482c0e..b491fb9 100644
--- a/public/assets/js/lib/router.js
+++ b/public/assets/js/lib/router.js
@@ -11,8 +11,8 @@ var SiteRouter = Router.extend({
 		"/details/:id":   'details',
 		"/mail":          'mailbox',
 		"/mail/:mailbox": 'mailbox',
-		"/mail/read/:id": 'message',
 		"/mail/compose":  'compose',
+		"/message/:id":   'message',
 	},
 	
 	initialize: function(){
diff --git a/public/assets/js/lib/views/mail/message.js b/public/assets/js/lib/views/mail/message.js
index 7deb6b6..b6297d9 100644
--- a/public/assets/js/lib/views/mail/message.js
+++ b/public/assets/js/lib/views/mail/message.js
@@ -1,3 +1,38 @@
 var MessageView = View.extend({
 
+  el: "#message",
+
+  action: '/api/message/',
+  
+  initialize: function(){
+    this.template = this.$(".template").html()
+  },
+
+  load: function(name){
+    name = sanitize(name) || "inbox"
+    $.get(this.action + name, this.populate.bind(this))
+  },
+  
+  populate: function(data){
+    this.parse(data)
+  },
+  
+  parse: function(data){
+    var message = data.message
+//     var user = data.user
+
+    $("h1").html(message.subject)
+    var datetime = verbose_date(message.date)
+    var id = message.id
+//     var is_sender = message.sender == user.username
+    var t = this.template
+                .replace(/{{id}}/g, message.id)
+                .replace(/{{sender}}/g, message.sender)
+                .replace(/{{subject}}/g, message.subject)
+                .replace(/{{date}}/g, datetime[0])
+                .replace(/{{time}}/g, datetime[1])
+                .replace(/{{body}}/g, tidy_urls(message.body) )
+    this.$el.html(t)
+  },
+
 })