display hootbox

10 files changed, 215 insertions, 10 deletions

diff --git a/lib/bucky.js b/lib/bucky.js
index aed6494..dddbae9 100644
--- a/lib/bucky.js
+++ b/lib/bucky.js
@@ -39,10 +39,8 @@ var bucky = module.exports = {
     })
   },
   ensureHootbox: function (req, res, next){
-    db.getCommentsForThread(1, 50).then(function(hootbox){
-      res.hootbox = hootbox.forEach(function(comment){
-        comment.set("comment", comment.get("comment").toString() )
-      })
+    db.getCommentsForThread(1, 9).then(function(hootbox){
+      res.hootbox = hootbox
       next()
     })
   },
diff --git a/lib/db/bookshelf.js b/lib/db/bookshelf.js
index 5774120..69157cc 100644
--- a/lib/db/bookshelf.js
+++ b/lib/db/bookshelf.js
@@ -5,7 +5,14 @@ var knex = require('knex')({
     user     : process.env.DB_USER,
     password : process.env.DB_PASS,
     database : process.env.DB_NAME,
-    charset  : 'utf8'
+    charset  : 'utf8',
+    typecast : function (field, next) {
+      console.log(field.type)
+      if (field.type == 'BLOB') {
+        return field.string()
+      }
+      return next()
+    }
   }
 })
 
diff --git a/lib/db/index.js b/lib/db/index.js
index 2c8486b..994187e 100644
--- a/lib/db/index.js
+++ b/lib/db/index.js
@@ -83,8 +83,23 @@ db.getCommentsForThread = function (id, limit, offset){
     if (offset) {
       qb = qb.offset(offset)
     }
-  }).fetchAll()
+  }).fetchAll().then(function(comments){
+    comments.forEach(function(comment){
+      comment.set("comment", comment.get("comment").toString() )
+    })
+    return comments
+  })
 }
 db.getCommentCounts = function(ids){
   return knex.column('thread').count('* as count').select().from('comments').where('thread', 'in', ids).groupBy('thread')
 }
+
+/* PRIVATE MESSAGES */
+
+db.getMessage = function (id){
+  var model = new Message({'id': id})
+  return model.fetch().then(function(message){
+    message.set("body", message.get("body").toString() )
+    return message
+  })
+}
\ No newline at end of file
diff --git a/lib/index.js b/lib/index.js
index 51a8e07..7732001 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -72,10 +72,15 @@ site.route = function(){
     res.redirect('/index')
   })
   app.get("/login", function(req, res){
-    res.render("pages/login", { title: "" })
+    res.render("pages/login", {
+      title: ""
+    })
   })
   app.get("/index", middleware.ensureAuthenticated, function(req, res){
-    res.render("pages/index", { title: fortune("titles") })
+    res.render("pages/index", {
+      title: fortune("titles"),
+      hoot_text: fortune("hoots"),
+    })
   })
   app.post("/api/login", auth.loggedInLocal)
   app.get("/api/index",
diff --git a/migrations/20150905232742_make_blob_fields_text.js b/migrations/20150905232742_make_blob_fields_text.js
new file mode 100644
index 0000000..6e24278
--- /dev/null
+++ b/migrations/20150905232742_make_blob_fields_text.js
@@ -0,0 +1,64 @@
+// mysqlcheck -u root --auto-repair --optimize --all-databases
+
+exports.up = function(knex, Promise) {
+  var promise
+  knex.raw("ALTER DATABASE bucky CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci").then(function(){ console.log("OK") })
+  var sql = [
+    "comments comment text",
+    "invites grass tinytext",
+    "keywords threads text",
+    "keywords ops text",
+    "keywords display tinytext",
+    "messages body text",
+    "tags ops text",
+    "tags display tinytext",
+    "threads allowed tinytext",
+    "threads display tinytext",
+    "users grass text",
+    "users keywords text",
+    "users stickies text",
+    "users sink text",
+    "users display text",
+    "users boxes text",
+  ].map(function(s){
+    var ss = s.split(" ")
+    var sz = [
+      "ALTER TABLE",
+      ss[0],
+      "MODIFY COLUMN",
+      ss[1],
+      ss[2],
+    ].join(" ")
+    console.log(sz + ";")
+    promise = knex.raw([
+      "ALTER TABLE",
+      ss[0],
+      "MODIFY COLUMN",
+      ss[1],
+      ss[2],
+      "CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci",
+    ].join(" ")).then(function(){ Promise.resolve(); console.log("OK") })
+  })
+  return promise
+};
+
+exports.down = function(knex, Promise) {
+/*
+    "comments comment blob",
+    "invites grass tinyblob",
+    "keywords threads blob",
+    "keywords ops blob",
+    "keywords display tinyblob",
+    "messages body blob",
+    "tags ops blob",
+    "tags display tinyblob",
+    "threads allowed tinyblob",
+    "threads display tinyblob",
+    "users grass blob",
+    "users keywords blob",
+    "users stickies blob",
+    "users sink blob",
+    "users display blob",
+    "users boxes blob",
+*/  
+};
diff --git a/public/assets/css/bucky.css b/public/assets/css/bucky.css
index 1f36a35..0db5a00 100644
--- a/public/assets/css/bucky.css
+++ b/public/assets/css/bucky.css
@@ -23,6 +23,7 @@ button {
 	padding: 2px;
 	margin: 3px;
 	background-color: #c8d0dc;
+	text-transform: uppercase;
 }
 .desktop button:hover {
   color: #040a0a;
@@ -41,7 +42,7 @@ button {
 	text-align: center;
 	border: 2px solid #201010;
 	padding: 3px;
-	margin: 0;
+	margin: 0 0 5px 0;
 }
 hr {
   border-color: #000;
@@ -50,3 +51,48 @@ hr {
 #sidebar {
   width: 300px;
 }
+
+#hootbox.bluebox {
+  padding: 0;
+}
+#hootbox form {
+  padding: 4px;
+}
+#hootbox input[type=text] {
+  border: 2px solid #000;
+  font-size: 13px;
+  position: relative;
+  top: 2px;
+  margin-bottom: 5px;
+  width: 230px;
+}
+#hootbox button {
+  width: 36px;
+}
+#hoots {
+  margin: 0;
+  padding: 0;
+  border-spacing: 0;
+}
+#hoots tr {
+  margin: 0;
+  padding: 0;
+}
+#hoots td {
+  margin: 0;
+  padding: 0;
+  border-top: 2px solid #000;
+}
+#hoots td:nth-child(1){
+  border-right: 2px solid #000;
+  width: 40px;
+  height: 40px;
+  background-size: cover;
+  background-position: center center;
+}
+#hoots td:nth-child(2){
+  text-align: left;
+  padding: 5px;
+}
+#hoots tr:nth-child(odd) td:nth-child(2) { background-color: #f3f1f2; }
+#hoots tr:nth-child(even) td:nth-child(2) { background-color: #e3e8e3; }
diff --git a/public/assets/js/lib/views/index/hootbox.js b/public/assets/js/lib/views/index/hootbox.js
new file mode 100644
index 0000000..43c4fe9
--- /dev/null
+++ b/public/assets/js/lib/views/index/hootbox.js
@@ -0,0 +1,37 @@
+var HootboxView = FormView.extend({
+  
+  el: "#hootbox",
+  
+  events: {
+  },
+  
+  initialize: function(){
+    this.__super__.initialize.call(this)
+    this.template = this.$(".template").html()
+    this.$hoots = this.$("#hoots")
+  },
+  
+  load: function(comments){
+    comments.forEach(this.prependComment.bind(this))
+  },
+  
+  parse: function(comment){
+    var t = this.template.replace(/{{username}}/g, comment.username)
+                    .replace(/{{comment}}/g, comment.comment)
+    return t
+  },
+  
+  prependComment: function(comment){
+    var $el = $( this.parse(comment) )
+    this.$hoots.prepend($el)
+  },
+
+  appendComment: function(comment){
+    var $el = $( this.parse(comment) )
+    this.$hoots.append($el)
+  },
+  
+  success: function(){
+    this.prependComment(comment)
+  }
+})
\ No newline at end of file
diff --git a/public/assets/js/lib/views/index/index.js b/public/assets/js/lib/views/index/index.js
index 095909d..cb648fa 100644
--- a/public/assets/js/lib/views/index/index.js
+++ b/public/assets/js/lib/views/index/index.js
@@ -3,8 +3,20 @@ var IndexView = View.extend({
   events: {
   },
   
+  action: "/api/index",
+  
   initialize: function(opt){
     // opt.parent = parent
+    this.hootbox = new HootboxView ({ parent: this })
+    this.load()
+  },
+  
+  load: function(){
+    $.get(this.action, this.populate.bind(this))
+  },
+  
+  populate: function(data){
+    this.hootbox.load(data.hootbox)
   },
   
   success: function(){
diff --git a/views/pages/index.ejs b/views/pages/index.ejs
index 9924a2b..7b6732e 100644
--- a/views/pages/index.ejs
+++ b/views/pages/index.ejs
@@ -4,7 +4,23 @@
 
 <div id="sidebar">
   <div class="bluebox">
-    welcome to bucky
+    <b><big>welcome to bucky</big></b>
+  </div>
+  <div class="bluebox" id="hootbox">
+    <form>
+      <input type="text" name="hoot">
+      <button><%= hoot_text %></button>
+    </form>
+    <table id="hoots">
+      <script class="template" type="text/html">
+        <tr>
+          <td style="background-image:url(//www.carbonpictures.com/bucky/data/profile/.thumb/am.{{username}}.jpg)"><a href="/profile/{{username}}"><div></div></a></td>
+          <td>
+            {{comment}}
+          </td>
+        </tr>
+      </script>
+    </table>
   </div>
 </div>
 
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 9ac68ee..297f198 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -7,9 +7,14 @@
 <script src="/assets/js/vendor/view/view.js"></script>
 <script src="/assets/js/vendor/view/formview.js"></script>
 <script src="/assets/js/vendor/view/router.js"></script>
+
 <script src="/assets/js/lib/router.js"></script>
+
 <script src="/assets/js/lib/views/login/login.js"></script>
+
 <script src="/assets/js/lib/views/index/index.js"></script>
+<script src="/assets/js/lib/views/index/hootbox.js"></script>
+
 <script src="/assets/js/index.js"></script>
 
 <!--