store layouts and retrieve them

1 files changed, 16 insertions, 9 deletions

diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 2766a44..0a03878 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -1,21 +1,28 @@
 
 var LayoutsIndex = View.extend({
 
-	load: function(type){
-		this.show()
+	initialize: function(){
+		this.$templates = this.$(".templates")
+	},
 
+	load: function(type){
+		this.$templates.children("span").remove()
+		
 		$.get("/api/layouts", $.proxy(function(data){
-			console.log(data)
+
 			data.forEach($.proxy(function(room){
 				var $span = $("<span>")
-				$span.html(JSON.stringify(room))
-				this.$(".templates").append($span)
+				// $span.html(JSON.stringify(room))
+				$span.data("slug", room.slug)
+				$span.css("background-image", "url(" + room.photo + ")")
+				
+				this.$templates.append($span)
 			}, this))
+
 			this.show()
 		}, this))
 
 	}
-
 })
 
 
@@ -30,10 +37,11 @@ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	toggleActive: function(e){
 		e.preventDefault()
 		this.$(".templates .active").removeClass("active")
-		$(e.currentTarget).addClass("active")
+		var $layout = $(e.currentTarget)
+		$layout.addClass("active")
 		
 		// actually do
-		// window.location.pathname = "/builder/" + $(this).data("name")
+		window.location.pathname = "/builder/" + $layout.data("slug")
 	},
 	
 	newBuilder: function(e){
@@ -44,7 +52,6 @@ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 })
 
 
-
 var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	el: ".mediaDrawer.newProject",