Work on the boards.

Added middleware loading of the models; switched to export a server instance so I can use "up" and began an "add column" feature.
iammerrick · Feb 13, 2012 · 37ea916 · 37ea916
1 parent 04745ac
commit 37ea916
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 48 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,5 @@
 .DS_Store
 stylesheets/*.css
 node_modules
+
+npm-debug.log
diff --git a/app/config/routes.js b/app/config/routes.js
@@ -6,6 +6,7 @@ module.exports = {
 	['get', '/tasks/:id', 'Tasks', 'view'],
 	['get', '/boards', 'Boards'],
     ['get', '/boards/:uri', 'Boards', 'view'],
+	['put', '/boards/:uri', 'Boards', 'edit'],
 	['post', '/boards', 'Boards', 'new']
   ]
 }
diff --git a/app/controllers/BoardsController.js b/app/controllers/BoardsController.js
@@ -1,4 +1,6 @@
-module.exports = require(app.set('controllers') + '/ApplicationController').extend()
+module.exports = require(app.set('controllers') + '/ApplicationController').extend(function(){
+		this.addBeforeFilter(['edit', 'view'], this.load);
+	})
 	.methods({
 
 		index: function(){
@@ -8,17 +10,7 @@ module.exports = require(app.set('controllers') + '/ApplicationController').exte
 		},
 
 		view: function(){
-			var Board = this.getModel('Board'),
-				self = this;
-
-			Board.findOne({ uri : this.request.param('uri') }, function(error, instance){
-				if(error){
-					console.log(error);
-					self.error();
-				}
-				self.json(instance);
-
-			});
+			this.json(this.board);
 		},
 
 		new: function(){
@@ -35,5 +27,23 @@ module.exports = require(app.set('controllers') + '/ApplicationController').exte
 					self.error();
 				})
 				.end();
+		},
+
+		edit: function(){
+
+		},
+
+		load: function(next){
+			var Board = this.getModel('Board'),
+				self = this;
+
+			Board.findOne({ uri : this.request.param('uri') }, function(error, instance){
+				if (error) {
+					next(error);
+				} else {
+					self.board = instance;
+					next(null);
+				}
+			});
 		}
 	});
diff --git a/app/views/boards/index.html b/app/views/boards/index.html
@@ -1,7 +1,8 @@
 <div class="header">
     <div class="inside">
-        <ul class="headers">
-        </ul>
+		<ul class="headers">
+			<li class="last add-column"><a href="#" class="add-column-action">+</a></li>
+		</ul>
     </div>
 </div>
 <div class="columns inside">

diff --git a/public/images/add.png b/public/images/add.png
diff --git a/public/javascripts/app/views/board.js b/public/javascripts/app/views/board.js
@@ -2,6 +2,12 @@ define(['jquery', 'backbone', 'app/views/task', 'app/models/task'], function($,
 
     var BoardView = Backbone.View.extend({
 
+		el: 'body',
+
+		events: {
+			'click .add-column' : 'add'
+		},
+
 		initialize: function(){
             var self = this;
 
@@ -13,21 +19,26 @@ define(['jquery', 'backbone', 'app/views/task', 'app/models/task'], function($,
         },
 
         render: function(){
+
 			this.createColumns();
+
             return this;
         },
 
+		add: function(e){
+			e.preventDefault();
+		},
+
 		createColumns: function(){
 			// Iterate through columns
 			_(this.model.get('columns')).each(function(column){
 
 				// Make the headers
-				$('.headers').append('<li>'+column.name+'</li>');
+				this.$('.headers').prepend('<li>'+column.name+'</li>');
 
-
 				// Make the column and append to DOM
 				var $column = $('<div class="column" data-column-id="'+column._id+'" />');
-				$('.columns').append($column);
+				this.$('.columns').append($column);
 
 				_(column.tasks).each(function(task){
 					var taskView = new TaskView({

diff --git a/public/sass/screen.scss b/public/sass/screen.scss
@@ -2,6 +2,15 @@
 @import "compass/utilities";
 @import "compass/css3";
 
+@mixin embed($image) {
+	@include inline-block;
+	@include background(image-url($image) no-repeat);
+	overflow: hidden;
+	text-indent: -9999px;
+	width: image-width($image);
+	height: image-height($image);
+}
+
 body{
     @include background(image-url('grid.png'));
     font: 12px "Helvetica Neue", Helvetica;
@@ -10,7 +19,6 @@ body{
 
 $headers: #6E6E6E;
 
-
 .header{
     background-color: #FFFFFF;
     color: $headers;
@@ -69,9 +77,7 @@ $headers: #6E6E6E;
     }
 
     .pin{
-        @include background(image-url('pin.png') no-repeat);
-        width: 25px;
-        height: 25px;
+        @include embed('pin.png');
         position: absolute;
         left: ((230px - 25) / 2);
         top: -(25px / 2);
@@ -139,3 +145,7 @@ $headers: #6E6E6E;
         }
     }
 }
+
+.add-column-action{
+	@include embed('add.png');
+}
diff --git a/public/stylesheets/screen.css b/public/stylesheets/screen.css
@@ -63,22 +63,22 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
   display: block;
 }
 
-/* line 5, ../sass/screen.scss */
+/* line 14, ../sass/screen.scss */
 body {
   background: url('../images/grid.png?1328146262');
   font: 12px "Helvetica Neue", Helvetica;
   color: #8d8d8d;
 }
 
-/* line 14, ../sass/screen.scss */
+/* line 22, ../sass/screen.scss */
 .header {
   background-color: #FFFFFF;
   color: #6e6e6e;
   height: 100px;
   line-height: 100px;
 }
 
-/* line 21, ../sass/screen.scss */
+/* line 29, ../sass/screen.scss */
 .headers {
   margin: 0;
   padding: 0;
@@ -109,7 +109,7 @@ body {
 .headers li.last {
   padding-right: 0;
 }
-/* line 24, ../sass/screen.scss */
+/* line 32, ../sass/screen.scss */
 .headers li {
   width: 230px;
   font-size: 36px;
@@ -118,27 +118,27 @@ body {
   text-align: center;
 }
 
-/* line 33, ../sass/screen.scss */
+/* line 41, ../sass/screen.scss */
 .column {
   width: 230px;
   margin: 0px 40px;
   float: left;
 }
-/* line 38, ../sass/screen.scss */
+/* line 46, ../sass/screen.scss */
 .column:first-child {
   margin-left: 0px;
 }
-/* line 42, ../sass/screen.scss */
+/* line 50, ../sass/screen.scss */
 .column:last-child {
   margin-right: 0px;
 }
 
-/* line 47, ../sass/screen.scss */
+/* line 55, ../sass/screen.scss */
 .inside {
   padding: 0px 40px;
 }
 
-/* line 51, ../sass/screen.scss */
+/* line 59, ../sass/screen.scss */
 .task {
   background-color: #FFFFFF;
   margin: 25px 0px 50px;
@@ -149,7 +149,7 @@ body {
   -o-box-shadow: #bdb9b8 0px 1px 3px;
   box-shadow: #bdb9b8 0px 1px 3px;
 }
-/* line 58, ../sass/screen.scss */
+/* line 66, ../sass/screen.scss */
 .task .responsible {
   background-color: #F2F0F0;
   position: absolute;
@@ -162,74 +162,103 @@ body {
   font-weight: bold;
   color: #8d8d8d;
 }
-/* line 71, ../sass/screen.scss */
+/* line 79, ../sass/screen.scss */
 .task .pin {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
   background: url('../images/pin.png?1328148019') no-repeat;
+  overflow: hidden;
+  text-indent: -9999px;
   width: 25px;
-  height: 25px;
+  height: 26px;
   position: absolute;
   left: 102.5px;
   top: -12.5px;
 }
-/* line 81, ../sass/screen.scss */
+/* line 7, ../../../../../.rbenv/versions/1.9.2-p290/lib/ruby/gems/1.9.1/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
+.task .pin {
+  *display: inline;
+}
+/* line 87, ../sass/screen.scss */
 .task .details h2 {
   color: #575757;
   text-align: center;
   font-weight: bold;
   padding: 5px 0px 2px 0px;
 }
-/* line 88, ../sass/screen.scss */
+/* line 94, ../sass/screen.scss */
 .task .details .small {
   font-size: a10px;
   text-align: center;
 }
-/* line 94, ../sass/screen.scss */
+/* line 100, ../sass/screen.scss */
 .task .receipt {
   margin-top: 20px;
 }
-/* line 97, ../sass/screen.scss */
+/* line 103, ../sass/screen.scss */
 .task .receipt ul {
   border-top: 1px solid #e6e6e6;
   border-bottom: 1px solid #e6e6e6;
 }
-/* line 102, ../sass/screen.scss */
+/* line 108, ../sass/screen.scss */
 .task .receipt li {
   overflow: hidden;
   *zoom: 1;
   padding: 5px 0px;
 }
-/* line 107, ../sass/screen.scss */
+/* line 113, ../sass/screen.scss */
 .task .receipt li:first-child {
   padding-top: 20px;
 }
-/* line 111, ../sass/screen.scss */
+/* line 117, ../sass/screen.scss */
 .task .receipt li:last-child {
   padding-bottom: 20px;
 }
-/* line 115, ../sass/screen.scss */
+/* line 121, ../sass/screen.scss */
 .task .receipt .item {
   float: left;
 }
-/* line 119, ../sass/screen.scss */
+/* line 125, ../sass/screen.scss */
 .task .receipt .cost {
   float: right;
 }
-/* line 123, ../sass/screen.scss */
+/* line 129, ../sass/screen.scss */
 .task .receipt .total {
   overflow: hidden;
   *zoom: 1;
   padding: 10px 0px;
 }
-/* line 127, ../sass/screen.scss */
+/* line 133, ../sass/screen.scss */
 .task .receipt .total .cost {
   font-size: 18px;
   font-weight: bold;
 }
-/* line 132, ../sass/screen.scss */
+/* line 138, ../sass/screen.scss */
 .task .receipt .total .good {
   color: #588400;
 }
-/* line 136, ../sass/screen.scss */
+/* line 142, ../sass/screen.scss */
 .task .receipt .total .bad {
   color: #a80707;
 }
+
+/* line 149, ../sass/screen.scss */
+.add-column-action {
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: middle;
+  *vertical-align: auto;
+  background: url('../images/add.png?1329103904') no-repeat;
+  overflow: hidden;
+  text-indent: -9999px;
+  width: 31px;
+  height: 31px;
+}
+/* line 7, ../../../../../.rbenv/versions/1.9.2-p290/lib/ruby/gems/1.9.1/gems/compass-0.11.7/frameworks/compass/stylesheets/compass/css3/_inline-block.scss */
+.add-column-action {
+  *display: inline;
+}
diff --git a/server.js b/server.js
@@ -26,7 +26,9 @@ app.configure('development', function () {
 app.configure('production', function () {
   app.use(matador.errorHandler())
 })
+
 app.set('viewPartials', matador.partials.build(app.set('views')))
+
 matador.mount(require('./app/config/routes'))
-app.listen(3000)
-console.log('matador running on port 3000')
+
+module.exports = app;