stub in details page

7 files changed, 138 insertions, 5 deletions

diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index f3e60a9..9f19341 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -6,7 +6,7 @@ body {
 	color: #111111;
 	font-size: 10px;
 	font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
-	margin: 20px;
+	padding: 20px 30px;
 }
 small {
 	font-size: 10px;
diff --git a/public/assets/js/lib/router.js b/public/assets/js/lib/router.js
index 5bc05c3..d5b9652 100644
--- a/public/assets/js/lib/router.js
+++ b/public/assets/js/lib/router.js
@@ -8,7 +8,7 @@ var SiteRouter = Router.extend({
 		"/":            'login',
 		"/index":       'index',
 		"/login":       'login',
-		"/details/:id": 'room',
+		"/details/:id": 'details',
 	},
 	
 	initialize: function(){
@@ -22,5 +22,10 @@ var SiteRouter = Router.extend({
   login: function(){
     app.view = new LoginView ()
   },
+  
+  details: function(id){
+    app.view = new DetailsView ()
+    app.view.load(id)
+  }
 
 })
\ No newline at end of file
diff --git a/public/assets/js/lib/views/details/comments.js b/public/assets/js/lib/views/details/comments.js
new file mode 100644
index 0000000..164a3b1
--- /dev/null
+++ b/public/assets/js/lib/views/details/comments.js
@@ -0,0 +1,39 @@
+var CommentsView = FormView.extend({
+  
+  el: "#comments",
+  
+  events: {
+  },
+  
+  initialize: function(){
+    this.__super__.initialize.call(this)
+    this.template = this.$(".template").html()
+  },
+  
+  load: function(comments){
+    comments.forEach(this.appendComment.bind(this))
+  },
+  
+  parse: function(comment){
+    var datetime = verbose_date(comment.date)
+    var t = this.template.replace(/{{username}}/g, comment.username)
+                         .replace(/{{comment}}/g, comment.comment)
+                         .replace(/{{date}}/g, datetime[0])
+                         .replace(/{{time}}/g, datetime[1])
+    return t
+  },
+  
+  prependComment: function(comment){
+    var $el = $( this.parse(comment) )
+    this.$el.prepend($el)
+  },
+
+  appendComment: function(comment){
+    var $el = $( this.parse(comment) )
+    this.$el.append($el)
+  },
+  
+  success: function(){
+    this.prependComment(comment)
+  }
+})
\ No newline at end of file
diff --git a/public/assets/js/lib/views/details/files.js b/public/assets/js/lib/views/details/files.js
new file mode 100644
index 0000000..5a19519
--- /dev/null
+++ b/public/assets/js/lib/views/details/files.js
@@ -0,0 +1,59 @@
+var FilesView = FormView.extend({
+  
+  el: "#files",
+  
+  events: {
+  },
+  
+  initialize: function(){
+    this.__super__.initialize.call(this)
+    this.template = this.$(".template").html()
+    this.templateTotal = this.$(".templateTotal").html()
+  },
+  
+  load: function(files){
+    if (! files.length) {
+      this.$el.hide()
+    }
+    var total = 0
+    files.forEach(function(file){
+      this.appendFile(file)
+      total += file.size
+    }.bind(this))
+    
+    var size = hush_size(total)
+    var t = this.templateTotal.replace(/{{size_class}}/g, size[0])
+                              .replace(/{{size}}/g, size[1])
+    this.$el.append(t)
+  },
+  
+  parse: function(file){
+    var size = hush_size(file.size)
+    var datetime = verbose_date(file.date)
+    var date_class = carbon_date(file.date)
+
+    var t = this.template.replace(/{{username}}/g, file.username)
+                         .replace(/{{link}}/g, file.filename)
+                         .replace(/{{filename}}/g, file.filename)
+                         .replace(/{{date_class}}/g, date_class)
+                         .replace(/{{date}}/g, datetime[0])
+                         .replace(/{{time}}/g, datetime[1])
+                         .replace(/{{size_class}}/g, size[0])
+                         .replace(/{{size}}/g, size[1])
+    return t
+  },
+  
+  prependFile: function(file){
+    var $el = $( this.parse(file) )
+    this.$el.prepend($el)
+  },
+
+  appendFile: function(file){
+    var $el = $( this.parse(file) )
+    this.$el.append($el)
+  },
+  
+  success: function(){
+    this.prependFile(file)
+  }
+})
\ No newline at end of file
diff --git a/public/assets/js/lib/views/details/index.js b/public/assets/js/lib/views/details/index.js
new file mode 100644
index 0000000..e2adb55
--- /dev/null
+++ b/public/assets/js/lib/views/details/index.js
@@ -0,0 +1,28 @@
+var DetailsView = View.extend({
+
+  events: {
+  },
+  
+  action: "/api/thread/",
+  
+  initialize: function(opt){
+    this.comments = new CommentsView ({ parent: this })
+    this.files = new FilesView ({ parent: this })
+  },
+  
+  load: function(id){
+    id = id.replace(/\D/g, "")
+    $.get(this.action + id, this.populate.bind(this))
+  },
+  
+  populate: function(data){
+    $("h1").html(data.thread.title)
+    this.comments.load(data.comments)
+    this.files.load(data.files)
+  },
+  
+  success: function(){
+    window.location.href = "/index"
+  },
+
+})
diff --git a/public/assets/js/lib/views/index/threadbox.js b/public/assets/js/lib/views/index/threadbox.js
index 2e7d211..9f12411 100644
--- a/public/assets/js/lib/views/index/threadbox.js
+++ b/public/assets/js/lib/views/index/threadbox.js
@@ -27,14 +27,16 @@ var ThreadBox = View.extend({
     var comments = hush_null(thread.comment_count, "c")
     var files = hush_null(thread.file_count, "f")
     var dot = privacy_dot(thread.private)
+    var datetime = verbose_date(thread.lastmodified)
 
     var t = this.template
                 .replace(/{{id}}/g, thread.id)
                 .replace(/{{username}}/g, thread.username)
                 .replace(/{{privacy_dot}}/g, dot)
                 .replace(/{{title}}/g, thread.title)
-                .replace(/{{age}}/g, verbose_date(thread.lastmodified) )
-                .replace(/{{age_class}}/g, carbon_date(thread.lastmodified) )
+                .replace(/{{date}}/g, datetime[0])
+                .replace(/{{time}}/g, datetime[1])
+                .replace(/{{date_class}}/g, carbon_date(thread.lastmodified) )
                 .replace(/{{views}}/g, views[1])
                 .replace(/{{comments}}/g, comments[1])
                 .replace(/{{files}}/g, files[1])
diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js
index d034c26..de8fd65 100644
--- a/public/assets/js/util/format.js
+++ b/public/assets/js/util/format.js
@@ -51,7 +51,7 @@ function verbose_date (date) {
   var date = d + '‑' + short_months[date.getMonth()] + '‑' + date.getFullYear()
   var time = h + ':' + m + meridian
   
-  return date + " <small>" + time + "</small>"
+  return [date, time]
 }
 function carbon_date (date, no_bold) {
   var span = (+new Date() / 1000 - date)