hook up layout settings

20 files changed, 154 insertions, 63 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",
 
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index b20c669..582f627 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -738,7 +738,7 @@ h5{
   transform:translateY(0%);
 }
 .mediaDrawer.signin, .mediaDrawer.signup,
-.mediaDrawer.alert, .mediaDrawer.confirm{
+.mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.error{
     display:table;
 }
 .confirm button {
@@ -1358,7 +1358,7 @@ form h3 {
 .errorList {
 	font-weight: 300;
 }
-form .errors div {
+.errors div, form .errors div {
 	float: none;
 }
 form li div div {
diff --git a/server/index.js b/server/index.js
index 65234d4..6c33f3a 100644
--- a/server/index.js
+++ b/server/index.js
@@ -112,7 +112,7 @@ site.route = function () {
 	app.get('/builder/:name', middleware.ensureAuthenticated, views.builder)
 
 	app.get('/api/layouts', middleware.ensureAuthenticated, api.layout.index)
-	app.get('/api/layouts/show', middleware.ensureAuthenticated, api.layout.show)
+	app.get('/api/layouts/:name', middleware.ensureAuthenticated, api.layout.show)
 	app.post('/api/layouts/new', middleware.ensureAuthenticated, api.layout.create)
 	app.post('/api/layouts/edit', middleware.ensureAuthenticated, api.layout.update)
 	app.delete('/api/layouts/destroy', middleware.ensureAuthenticated, api.layout.destroy)
diff --git a/server/lib/api.js b/server/lib/api.js
index 2d35f50..9d14651 100644
--- a/server/lib/api.js
+++ b/server/lib/api.js
@@ -151,6 +151,7 @@ var api = {
 			var data = util.cleanQuery(req.body)
 			data.name = util.sanitize(data.new_name)
 			data.displayName = util.sanitize(data.displayName)
+			data.user_id = req.user._id
 			delete data.new_name
 			new Layout(data).save(function(err, doc){
 				if (err || ! doc) { return res.json({ error: err }) }
diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js
index f818ed2..b096b85 100644
--- a/server/lib/schemas/Layout.js
+++ b/server/lib/schemas/Layout.js
@@ -23,11 +23,8 @@ var LayoutSchema = new mongoose.Schema({
 	photo: {
 		type: String,
 	},
-	about: {
-		type: String,
-		default: ""
-	},
 	rooms: [mongoose.Schema.Types.Mixed],
+	startPosition: mongoose.Schema.Types.Mixed,
 	user_id: { type: mongoose.Schema.ObjectId, index: true },
 	created_at: { type: Date },
 	updated_at: { type: Date },
diff --git a/views/builder.ejs b/views/builder.ejs
index b0e2004..8e887e3 100644
--- a/views/builder.ejs
+++ b/views/builder.ejs
@@ -44,7 +44,8 @@
 	</div>
 
 	[[ include partials/confirm-modal ]]	
-	[[ include partials/sign-in ]]	
+	[[ include projects/layouts-modal ]]	
+	[[ include partials/sign-in ]]
 
 </body>
 [[ include partials/scripts ]]
diff --git a/views/controls/builder/settings.ejs b/views/controls/builder/settings.ejs
index 52cb586..76bb0d1 100644
--- a/views/controls/builder/settings.ejs
+++ b/views/controls/builder/settings.ejs
@@ -1,4 +1,5 @@
-<div class="vvbox settings" id="builderSettings">
+<div class="vvbox settings active" id="builderSettings">
+	<input type="hidden" name="name">
 
 	<div class="setting">
 		<a href="#" id="startpoint">
@@ -8,33 +9,29 @@
 	</div>
 
 	<div class="setting">
-		<input type="text" placeholder="layout name">
+		<input type="text" name="new_name" placeholder="layout name">
 	</div>
 	
 	<div class="setting">
-		<textarea placeholder="short description"></textarea>
-	</div>
-	<div class="setting">
-		<input type="text" placeholder="http://vvalls.com/t987" />
-	</div>
-	<div class="setting">
-	<div class="radio-group">
-		<input id="opt_1" class="radio-group__option" type="radio" name="opt" value="public" checked="checked">
-		<label class="radio-group__label" for="opt_1">
-			Everyone
-		</label>
-		<input id="opt_2" class="radio-group__option" type="radio" name="opt" value="private">
-		<label class="radio-group__label" for="opt_2">
-			Just for me
-		</label>
-	</div>
+		<div class="radio-group">
+			<input id="privacy_private" class="radio-group__option" type="radio" name="privacy" value="public" checked="checked">
+			<label class="radio-group__label" for="privacy_private">
+				Everyone
+			</label>
+			<input id="privacy_public" class="radio-group__option" type="radio" name="privacy" value="private">
+			<label class="radio-group__label" for="privacy_public">
+				Just for me
+			</label>
+		</div>
 	</div>
+	
 	<div class="setting">
-		<button>Save</button>
+		<button data-role="save-layout">Save</button>
 	</div>
+	
 	<div class="setting subButtons">
-		<a href="#">Clone</a>
 		<a href="#">Clear</a>
 		<a href="#" id="deleteRoom">Delete</a>
 	</div>
+
 </div>
diff --git a/views/controls/builder/toolbar.ejs b/views/controls/builder/toolbar.ejs
index cb6dd60..b8ac6e9 100644
--- a/views/controls/builder/toolbar.ejs
+++ b/views/controls/builder/toolbar.ejs
@@ -26,6 +26,6 @@
 -->
 	<span
 		data-role='toggle-layout-settings'
-		data-info="layout settings"
+		data-info="save layout"
 		class="icon-ios7-compose-outline"></span>
 </div>
diff --git a/views/home.ejs b/views/home.ejs
index 26bf1d7..97d59dc 100755
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -46,7 +46,8 @@
 	<a href="#loadmore" class="viewMore">View More</a>
 
 	[[ include partials/confirm-modal ]]	
-	[[ include partials/sign-in ]]	
+	[[ include projects/layouts-modal ]]	
+	[[ include partials/sign-in ]]
 	[[ include partials/footer ]]
 
 </div>
diff --git a/views/partials/confirm-modal.ejs b/views/partials/confirm-modal.ejs
index 845aed2..60fbd31 100644
--- a/views/partials/confirm-modal.ejs
+++ b/views/partials/confirm-modal.ejs
@@ -20,3 +20,16 @@
 		</form>
 	</div>
 </div>
+
+<div class="mediaDrawer fixed animate error">
+	<span class="close">X</span>
+	<div class="box">
+		<form>
+			Your submission had errors:
+			<br>
+			<span class="errorList"></span>
+			<br>
+			<button class="ok">OK</button>
+		</form>
+	</div>
+</div>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index ced15c1..b977dc6 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -48,6 +48,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/lib/FormView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/lib/AlertModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/lib/ConfirmModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/lib/ErrorModal.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/site/SignInModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/SignUpModal.js"></script>
diff --git a/views/profile.ejs b/views/profile.ejs
index 5ca62dc..7bdbd51 100644
--- a/views/profile.ejs
+++ b/views/profile.ejs
@@ -44,7 +44,7 @@
 	<a href="#" data-role="new-project-modal" class="viewMore">create project</a>
 	
 	[[ include partials/edit-profile ]]
-	[[ include projects/new-project ]]
+	[[ include projects/layouts-modal ]]	
 	[[ include projects/edit-project ]]
 	[[ include partials/sign-in ]]
 	[[ include partials/confirm-modal ]]