1 files changed, 85 insertions, 0 deletions
diff --git a/public/assets/javascripts/ui/site/LayoutsIndex.js b/public/assets/javascripts/ui/site/LayoutsIndex.js
new file mode 100644
index 0000000..f7272bb
--- /dev/null
+++ b/public/assets/javascripts/ui/site/LayoutsIndex.js
@@ -0,0 +1,85 @@
+
+var LayoutsIndex = View.extend({
+
+	initialize: function(){
+		this.$templates = this.$(".templates")
+		this.$templatesList = this.$(".templates-list")
+		this.$noTemplates = this.$(".no-templates")
+		this.$form = this.$("form")
+		
+		this.$userTemplatesList = this.$(".userTemplatesList")
+		this.$blueprintsList = this.$(".blueprintsList")
+		this.$newBlueprintButton = this.$("[data-role='create-new-blueprint']")
+	},
+
+	load: function(type){
+		this.$templates.children("span").remove()
+		
+		$.get(this.action, this.populate.bind(this))
+	},
+
+	populate: function(data){
+		if (! data.layouts.length) {
+			this.$templates.hide()
+			this.$form.hide()
+			this.$noTemplates.show()
+		}
+		this.$templatesList.empty()
+		data.layouts.forEach(function(room){
+			var $span = $("<span>")
+			$span.data("slug", room.slug)
+			
+			var $label = $("<label>")
+			$label.html( room.name )
+			
+			var $image = $("<span>")
+			$image.addClass("image").css("background-image", "url(" + room.photo + ")")
+			
+      $span.append( $image )
+      $span.append( $label )
+			
+			this.$templatesList.append($span)
+		}.bind(this))
+		this.show()
+	}
+
+})
+
+
+
+var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
+	el: ".mediaDrawer.projects",
+
+	action: "/api/project",
+
+	events: {
+		"click .templates span": 'toggleActive',
+		"submit form": 'newProject',
+	},
+	
+	populate: function(data){
+		if (! data.length) {
+			app.router.newProject()
+		}
+		else {
+			this.__super__.populate.call(this, data)
+		}
+	},
+	
+	toggleActive: function(e){
+		e.preventDefault()
+		this.$(".templates .active").removeClass("active")
+		var $layout = $(e.currentTarget)
+		$layout.addClass("active")
+				
+		// actually do
+		window.location.pathname = "/project/" + $layout.data("slug") + "/edit"
+	},
+	
+	newProject: function(e){
+		e && e.preventDefault()
+		window.location.pathname = "/project/new"
+	}
+
+})
+