basic ui

3 files changed, 65 insertions, 9 deletions

diff --git a/public/assets/javascripts/ui/site/EditSubscriptionModal.js b/public/assets/javascripts/ui/site/EditSubscriptionModal.js
index af3b99e..539a8ae 100644
--- a/public/assets/javascripts/ui/site/EditSubscriptionModal.js
+++ b/public/assets/javascripts/ui/site/EditSubscriptionModal.js
@@ -8,6 +8,7 @@ var EditSubscriptionModal = ModalView.extend({
 	
 	fixedClose: true,
 	subscriber: null,
+	tempSubscriber: null,
 	
 	events: {
 	  "click [data-role='addLayouts']": 'addLayouts',
@@ -19,16 +20,62 @@ var EditSubscriptionModal = ModalView.extend({
 		"click [data-role=showLayoutsMenu]": "layoutsMode",
 		"click [data-role=showPlanMenu]": "planMode",
 
-		"click [data-role=closeMenu]": "reset",
+		"click [data-role=closeMenu]": "resetMode",
 
 		"input [data-role=basicLayoutInput]": "updateQuantity",
 		"input [data-role=proLayoutInput]": "updateQuantity",
-		"click [data-role=buyLayouts]": "saveLayouts",
+		"click [data-role=saveQuantity]": "saveQuantity",
 
 		"input [name=planRadio]": "updatePlan",
 		"click [data-role=changePlan]": "savePlan",
 	},
-	
+
+	resetMode: function(e){
+		e.preventDefault()
+		this.$paidPlan.removeClass("editLayouts editPlan")
+		this.reset()
+	},
+
+	layoutsMode: function(e){
+		e.preventDefault()
+		this.$paidPlan.addClass("editLayouts")
+		this.tempSubscriber = defaults({}, this.subscriber)
+		this.$basicLayoutInput.val( this.subscriber.basic_layouts )
+		this.$proLayoutInput.val( this.subscriber.pro_layouts )
+	},
+	updateQuantity: function(e){
+		e.preventDefault()
+		this.tempSubscriber.basic_layouts = this.$proLayoutInput.int()
+		this.tempSubscriber.pro_layouts = this.$basicLayoutInput.int()
+		
+		var plan = this.getPlan( this.tempSubscriber.plan_type )
+		this.displayTotals(this.tempSubscriber, plan)
+	},
+	saveQuantity: function(e){
+		e.preventDefault()
+		// blabla.. save
+		this.subscriber = this.tempSubscriber
+		this.resetMode()
+	},
+
+	planMode: function(e){
+		e.preventDefault()
+		this.$paidPlan.addClass("editPlan")
+		this.$planRadio.val( this.subscriber.plan_type )
+		this.tempSubscriber = defaults({}, this.subscriber)
+	},
+	updatePlan: function(e){
+		e.preventDefault()
+		var plan = this.getPlan( this.$("[name=planRadio]").val() )
+		this.displayTotals(this.tempSubscriber, plan)
+	},
+	savePlan: function(e){
+		e.preventDefault()
+		this.subscriber.plan_type = this.$("[name=planRadio]").val()
+		this.subscriber = this.tempSubscriber
+		this.resetMode()
+	},
+
 	initialize: function(){
 	  // this.parent = opt.parent
 	  this.__super__.initialize.call(this)
@@ -137,8 +184,11 @@ var EditSubscriptionModal = ModalView.extend({
 	},
 	reset: function(){
 		var subscriber = this.subscriber
-		var plan = this.plans[ this.plan_levels[ subscriber.plan_type ] ]
-		this.displayTotals(subscriber)
+		var plan = this.getPlan(subscriber.plan_type)
+		this.displayTotals(subscriber, plan)
+	},
+	getPlan: function(plan_type){
+		return this.plans[ this.plan_levels[ plan_type ] ]
 	},
 	calculateTotals: function(subscriber, plan){
 		var t = {}
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 4144b8b..b3d380c 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1057,11 +1057,17 @@ iframe.embed {
 }
 /* purchase mode */
 .paidPlan input[type=number] { display: none }
-.paidPlan.editing input[type=number] { display: inline-block }
-.paidPlan.editing input[type=number]+span { display: none }
 form .paidPlan div { float: none; }
 form .paidPlan label { float: none; font-size: 2vw; margin: 0 10px; }
 .paidPlan .upgradeMenu div { padding: 5px 10px; }
+.paidPlan .layoutsMenu { display: none }
+.paidPlan .planMenu { display: none }
+.paidPlan.editLayouts .layoutsMenu { display: block }
+.paidPlan.editLayouts .billingMenu { display: none }
+.paidPlan.editLayouts input[type=number] { display: inline-block }
+.paidPlan.editLayouts input[type=number]+span { display: none }
+.paidPlan.editPlan .planMenu { display: block }
+.paidPlan.editPlan .billingMenu { display: none }
 
 /* LAYOUTS MODAL */
 
diff --git a/views/partials/edit-subscription.ejs b/views/partials/edit-subscription.ejs
index fcb4b94..086f513 100644
--- a/views/partials/edit-subscription.ejs
+++ b/views/partials/edit-subscription.ejs
@@ -48,7 +48,7 @@
 						<button data-role="cancelSubscription">Cancel your subscription</button>
 					</div>
 					<div class="layoutsMenu">
-						<button data-role="buyLayouts">Buy layouts</button>
+						<button data-role="saveQuantity">Buy layouts</button>
 						<button data-role="closeMenu">Cancel</button>
 					</div>
 					<div class="planMenu">
@@ -63,7 +63,7 @@
 							<label for="chooseProPlan" data-role="proPlanName"></label>
 							$<span data-role="proPlanCost"></span>/<span data-role="billingInterval"></span>
 						</div>
-						<button data-role="changePlan">Change plan</button>
+						<button data-role="savePlan">Change plan</button>
 						<button data-role="closeMenu">Cancel</button>
 					</div>
 				</li>