hook up layout settings

9 files changed, 112 insertions, 32 deletions

diff --git a/public/assets/javascripts/rectangles/engine/map/_map.js b/public/assets/javascripts/rectangles/engine/map/_map.js
index 855ca5d..3046d1d 100644
--- a/public/assets/javascripts/rectangles/engine/map/_map.js
+++ b/public/assets/javascripts/rectangles/engine/map/_map.js
@@ -19,8 +19,8 @@ var Map = function(){
 										 base.center.a + sides.a, -base.center.b + sides.b )
 	}
 
-	base.zoom = 1/8
-	base.zoom_exponent = -3
+	base.zoom = 1/4
+	base.zoom_exponent = -2
 	base.set_zoom = function (n) {
 		base.zoom_exponent = n
 		base.zoom = pow(2, base.zoom_exponent)
diff --git a/public/assets/javascripts/ui/SiteRouter.js b/public/assets/javascripts/ui/SiteRouter.js
index 92816be..c224b6a 100644
--- a/public/assets/javascripts/ui/SiteRouter.js
+++ b/public/assets/javascripts/ui/SiteRouter.js
@@ -11,7 +11,7 @@ var SiteRouter = Router.extend({
 		"click [data-role='new-document-modal']": 'newDocument',
 		"click [data-role='edit-document-modal']": 'editDocument',
 		"click [data-role='delete-document-modal']": 'destroyDocument',
-		"click [data-role='show-layouts-modal']": 'showLayoutsModal',
+		"click [data-role='show-layouts-modal']": 'pickLayout',
 	},
 	
 	routes: {
@@ -23,9 +23,8 @@ var SiteRouter = Router.extend({
 		"/about/:name/edit": 'editDocument',
 		"/about/new":        'newDocument',
 		"/editor":           'launchEditor',
-		"/builder":          'showLayoutsModal',
-		"/builder/new":      'launchBuilder',
-		"/builder/:name":    'launchBuilder',
+		"/builder":          'pickLayout',
+		"/builder/:name":    'builder',
 	},
 
 	initialize: function(){
@@ -35,26 +34,24 @@ var SiteRouter = Router.extend({
 		this.editProjectModal = new EditProjectModal()
 		this.editProfileModal = new EditProfileModal()
 		this.documentModal = new DocumentModal()
-		this.confirmModal = new ConfirmModal()
-		this.alertModal = new AlertModal()
 		
 		this.route()
 		
 		$("body").removeClass("loading")
 	},
 	
-	launchBuilder: function(){
+	builder: function(e, name){
 		app.mode.builder = true
 		app.launch()
 
 		this.builderView = new BuilderView()
-		this.builderView.load()
+		this.builderView.load(name)
 	},
 	
-	showLayoutsModal: function(e){
+	pickLayout: function(e){
 		e && e.preventDefault()
 		window.history.pushState(null, document.title, "/builder")
-		this.layoutsModal.load("builder")
+		this.layoutsModal.load()
 	},
 
 	launchEditor: function(){
@@ -127,9 +124,9 @@ var SiteRouter = Router.extend({
 		
 		var name = e ? $(e.currentTarget).data("name") : name
 		
-		this.confirmModal.confirm("Are you sure you want to delete " + name + "?", $.proxy(function(){
+		confirmModal.confirm("Are you sure you want to delete " + name + "?", $.proxy(function(){
 			this.documentModal.destroy(name, $.proxy(function(){
-				this.alertModal.alert("Document deleted!", $.proxy(function(){
+				AlertModal.alert("Document deleted!", $.proxy(function(){
 					window.location.href = "/about"
 				}, this))
 			}, this))
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 004c1c4..a7a0555 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -1,20 +1,66 @@
 
-var BuilderSettings = View.extend({
+var BuilderSettings = FormView.extend({
 	el: "#builderSettings",
+	
+	createAction: "/api/layouts/new",
+	updateAction: "/api/layouts/edit",
 
 	events: {
+		"click [data-role='save-layout']": 'save',
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.__super__.initialize.call(this)
+		
+		this.$name = this.$("[name=name]")
+		this.$newName = this.$("[name=new_name]")
+		this.$privacy = this.$("[name=privacy]")
 	},
 	
-	initialize: function(){
+	load: function(data){
+		this.$name.val(data.name)
+		this.$newName.val(data.name)
+		this.$privacy.find("[value=" + data.privacy + "]").prop('checked', true);
 	},
 
 	toggle: function(){
 		this.$el.toggleClass("active")
 	},
 	
-	save: function(){
-		var data = Rooms.serialize()
-		console.log(data)
-	}
+	validate: function(){
+		var errors = []
+		var name = this.$name.val()
+		if (! name || ! name.length) {
+			errors.push("Layout needs a name.")
+		}
+		if (Rooms.count() == 0) {
+			errors.push("Please add some rooms by drawing boxes.")
+		}
+		return errors
+	},
+	
+	showErrors: function(errors){
+		var $errors = $("<span>")
+		errors.forEach(function(err){
+			var $row = $("<div>")
+			$row.html(err)
+			$errors.append( $row )
+		})
+		ErrorModal.alert($errors)
+	},
+	
+	serialize: function(){
+		var fd = new FormData()
+		fd.append("name", this.$name.val())
+		fd.append("new_name", this.$newName.val())
+		fd.append("privacy", this.$privacy.val())
+		fd.append("rooms", Rooms.serialize())
+		fd.append("startPosition", app.position(scene.camera))
+		return fd
+	},
+	
+	success: function(){
+	},
 
 })
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index d0659bb..9c0f236 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -1,6 +1,8 @@
 
 var BuilderView = View.extend({
 	el: "#builderView",
+	
+	action: "/api/layouts/",
 
 	events: {
 	},
@@ -10,8 +12,18 @@ var BuilderView = View.extend({
 		this.settings = new BuilderSettings ({ parent: this })
 	},
 
-	load: function(){
-		$("#map").show()
+	load: function(name){
+		if (! name || name == "new") {
+			this.isNew = true
+			this.ready({})
+			return
+		}
+
+		$.get(this.action + name, $.proxy(this.ready, this))
+	},
+	
+	ready: function(data){
+		this.settings.load(data)
 	},
 
 })
diff --git a/public/assets/javascripts/ui/lib/AlertModal.js b/public/assets/javascripts/ui/lib/AlertModal.js
index c5693ad..1aeb048 100644
--- a/public/assets/javascripts/ui/lib/AlertModal.js
+++ b/public/assets/javascripts/ui/lib/AlertModal.js
@@ -1,6 +1,6 @@
 
 
-var AlertModal = ModalFormView.extend({
+var AlertModal = new( ModalFormView.extend({
 	el: ".mediaDrawer.alert",
 
 	events: {
@@ -9,9 +9,10 @@ var AlertModal = ModalFormView.extend({
 	},
 	
 	alert: function(message, callback){
-		this.$(".message").html(message)
+		this.$(".message").empty().append(message)
 		this.callback = callback
 		this.show()
+		this.$(".ok").focus()
 	},
 	
 	advance: function(e){
@@ -21,5 +22,5 @@ var AlertModal = ModalFormView.extend({
 		this.callback = null
 	}
 
-})
+}))
 
diff --git a/public/assets/javascripts/ui/lib/ConfirmModal.js b/public/assets/javascripts/ui/lib/ConfirmModal.js
index 868ce8e..01720bb 100644
--- a/public/assets/javascripts/ui/lib/ConfirmModal.js
+++ b/public/assets/javascripts/ui/lib/ConfirmModal.js
@@ -1,6 +1,6 @@
 
 
-var ConfirmModal = ModalFormView.extend({
+var ConfirmModal = new( ModalFormView.extend({
 	el: ".mediaDrawer.confirm",
 
 	events: {
@@ -9,7 +9,7 @@ var ConfirmModal = ModalFormView.extend({
 	},
 	
 	confirm: function(question, callback){
-		this.$(".question").html(question)
+		this.$(".question").empty().append(question)
 		this.callback = callback
 		this.show()
 	},
@@ -21,5 +21,4 @@ var ConfirmModal = ModalFormView.extend({
 		this.callback = null
 	}
 
-})
-
+}) )
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/lib/ErrorModal.js b/public/assets/javascripts/ui/lib/ErrorModal.js
new file mode 100644
index 0000000..8b01077
--- /dev/null
+++ b/public/assets/javascripts/ui/lib/ErrorModal.js
@@ -0,0 +1,26 @@
+
+
+var ErrorModal = new( ModalFormView.extend({
+	el: ".mediaDrawer.error",
+
+	events: {
+		"click .ok": "advance",
+		"click .close": "advance",
+	},
+	
+	alert: function(message, callback){
+		this.$(".errorList").empty().append(message)
+		this.callback = callback
+		this.show()
+		this.$(".ok").focus()
+	},
+	
+	advance: function(e){
+		e && e.preventDefault()
+		this.hide()
+		this.callback && this.callback()
+		this.callback = null
+	}
+
+}))
+
diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js
index 2de4554..dc1801b 100644
--- a/public/assets/javascripts/ui/lib/FormView.js
+++ b/public/assets/javascripts/ui/lib/FormView.js
@@ -3,7 +3,7 @@ var FormView = View.extend({
 	method: "post",
 
 	events: {
-		"submit form": "submit"
+		"submit form": "save"
 	},
 
 	initialize: function(){
@@ -51,7 +51,7 @@ var FormView = View.extend({
 		return fd
 	},
 	
-	submit: function(e){
+	save: function(e){
 		e.preventDefault()
 
 		this.$errors.hide().css("opacity", 0.0);
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index f80a6cc..2766a44 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -45,7 +45,6 @@ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 
 
 
-
 var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	el: ".mediaDrawer.newProject",